Merge branch 'editor' of gitlab.com:discoursio/discoursio-webapp into editor

# Conflicts:
#	src/components/Editor/Editor.tsx

src/components/Editor/Editor.tsx

@@ -1,3 +1,4 @@
+import { createEffect } from 'solid-js'
 import { createTiptapEditor, useEditorHTML } from 'solid-tiptap'
 import { clsx } from 'clsx'
 import { useLocalize } from '../../context/localize'

src/components/Editor/EditorBubbleMenu.tsx

@@ -105,7 +105,7 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
                 type="text"
                 placeholder={t('Enter URL address')}
                 autofocus
-                value={prevUrl() ? prevUrl() : null}
+                value={prevUrl() ?? null}
                 onChange={(e) => setUrl(e.currentTarget.value)}
               />
               <button type="submit">

src/components/Editor/TopicSelect/TopicSelect.scss

@@ -0,0 +1,22 @@
+.TopicSelect .solid-select-list {
+  background: #fff;
+}
+
+//.TopicSelect.solid-select-container {
+//  color: #fa7f25;
+//}
+//.TopicSelect .solid-select-control {
+//  outline-color: #fca560;
+//  border-color: #fca560;
+//}
+//.TopicSelect .solid-select-placeholder {
+//  color: #fca560;
+//}
+//.TopicSelect .solid-select-option:hover {
+//  background-color: #fa7f25;
+//  color: #fff;
+//}
+//.TopicSelect .solid-select-option[data-focused=true] {
+//  background-color: #fca560;
+//  color: #fff;
+//}

src/components/Editor/TopicSelect/TopicSelect.tsx

@@ -2,20 +2,36 @@ import type { Topic } from '../../../graphql/types.gen'
 import { createOptions, Select } from '@thisbeyond/solid-select'
 import { useLocalize } from '../../../context/localize'
 import '@thisbeyond/solid-select/style.css'
+import './TopicSelect.scss'
 
 type TopicSelectProps = {
   topics: Topic[]
+  selectedTopics: Topic[]
   onChange: (selectedTopics: Topic[]) => void
 }
 
 export const TopicSelect = (props: TopicSelectProps) => {
   const { t } = useLocalize()
 
-  const selectProps = createOptions(props.topics, { key: 'title' })
+  const selectProps = createOptions(props.topics, {
+    key: 'title',
+    disable: (topic) => {
+      console.log({ selectedTopics: clone(props.selectedTopics) })
+      return props.selectedTopics.includes(topic)
+    }
+  })
 
   const handleChange = (selectedTopics: Topic[]) => {
     props.onChange(selectedTopics)
   }
 
-  return <Select multiple={true} {...selectProps} placeholder={t('Topics')} onChange={handleChange} />
+  return (
+    <Select
+      multiple={true}
+      {...selectProps}
+      placeholder={t('Topics')}
+      class="TopicSelect"
+      onChange={handleChange}
+    />
+  )
 }

src/components/Views/Create.tsx

@@ -15,7 +15,8 @@ type ShoutForm = {
   slug: string
   title: string
   subtitle: string
-  topicSlugs: string[]
+  selectedTopics: Topic[]
+  mainTopic: Topic
   body: string
   coverImageUrl: string
 }
@@ -29,7 +30,8 @@ export const CreateView = () => {
     slug: '',
     title: '',
     subtitle: '',
-    topicSlugs: [],
+    selectedTopics: [],
+    mainTopic: null,
     body: '',
     coverImageUrl: ''
   })
@@ -121,8 +123,8 @@ export const CreateView = () => {
                     <Show when={topics()}>
                       <TopicSelect
                         topics={topics()}
-                        onChange={(selectedTopicSlugs) => setForm('topicSlugs', selectedTopics)}
-                        selectedTopicSlugs={form.topicSlugs}
+                        onChange={(newSelectedTopics) => setForm('selectedTopics', newSelectedTopics)}
+                        selectedTopics={form.selectedTopics}
                       />
                     </Show>
                     {/*<input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />*/}