collabmode-onoff

src/components/Editor/Editor.tsx

@@ -32,7 +32,6 @@ export type EditorComponentProps = {
   shoutId: number
   initialContent?: string
   onChange: (text: string) => void
-  disableCollaboration?: boolean
 }
 
 const yDocs: Record<string, Doc> = {}
@@ -45,7 +44,7 @@ export const EditorComponent = (props: EditorComponentProps) => {
   const [isCommonMarkup, setIsCommonMarkup] = createSignal(false)
   const [shouldShowTextBubbleMenu, setShouldShowTextBubbleMenu] = createSignal(false)
   const { showSnackbar } = useSnackbar()
-  const { countWords, setEditing } = useEditorContext()
+  const { countWords, setEditing, isCollabMode } = useEditorContext()
   const [editorOptions, setEditorOptions] = createSignal<Partial<EditorOptions>>({})
   const [editorElRef, setEditorElRef] = createSignal<HTMLElement | undefined>()
   const [textBubbleMenuRef, setTextBubbleMenuRef] = createSignal<HTMLDivElement | undefined>()
@@ -154,6 +153,7 @@ export const EditorComponent = (props: EditorComponentProps) => {
     }
     console.log(options)
     setEditorOptions(() => options)
+    return options
   }
 
   // stage 1: create editor options when got author profile
@@ -166,19 +166,6 @@ export const EditorComponent = (props: EditorComponentProps) => {
     })
   )
 
-  // Перенос всех эффектов, зависящих от editor, внутрь onMount
-  onMount(() => {
-    console.log('Editor component mounted')
-    editorElRef()?.addEventListener('focus', handleFocus)
-    requireAuthentication(() => {
-      setTimeout(() => {
-        setupEditor()
-        createEditorInstance(editorOptions())
-        initializeMenus()
-      }, 1200)
-    }, 'edit')
-  })
-
   const isFigcaptionActive = createEditorTransaction(editor as Accessor<Editor | undefined>, (e) =>
     e?.isActive('figcaption')
   )
@@ -276,7 +263,18 @@ export const EditorComponent = (props: EditorComponentProps) => {
       return
     }
 
+    setEditorOptions((prev: Partial<EditorOptions>) => {
+      const extensions = [...(prev.extensions || [])]
+
       try {
+        if (!isCollabMode()) {
+          // Remove collaboration extensions and return
+          const filteredExtensions = extensions.filter(
+            (ext) => ext.name !== 'collaboration' && ext.name !== 'collaborationCursor'
+          )
+          return { ...prev, extensions: filteredExtensions }
+        }
+
         const docName = `shout-${props.shoutId}`
         const token = session()?.access_token || ''
         const profile = author()
@@ -298,16 +296,6 @@ export const EditorComponent = (props: EditorComponentProps) => {
           })
           console.log(`HocuspocusProvider установлен для ${docName}`)
         }
-
-      setEditorOptions((prev: Partial<EditorOptions>) => {
-        const extensions = [...(prev.extensions || [])]
-        if (props.disableCollaboration) {
-          // Remove collaboration extensions if they exist
-          const filteredExtensions = extensions.filter(
-            (ext) => ext.name !== 'collaboration' && ext.name !== 'collaborationCursor'
-          )
-          return { ...prev, extensions: filteredExtensions }
-        }
         extensions.push(
           Collaboration.configure({ document: yDocs[docName] }),
           CollaborationCursor.configure({
@@ -315,13 +303,14 @@ export const EditorComponent = (props: EditorComponentProps) => {
             user: { name: profile.name, color: uniqolor(profile.slug).color }
           })
         )
-        console.log('collab extensions added:', extensions)
-        return { ...prev, extensions }
-      })
+
       } catch (error) {
         console.error('Error initializing collaboration:', error)
         showSnackbar({ body: t('Failed to initialize collaboration') })
       }
+      console.log('collab extensions added:', extensions)
+      return { ...prev, extensions }
+    })
   }
 
   const handleFocus = (event: FocusEvent) => {
@@ -332,13 +321,23 @@ export const EditorComponent = (props: EditorComponentProps) => {
     }
   }
 
-  // Инициализируем коллаборацию если необходимо
+  onMount(() => {
+    console.log('Editor component mounted')
+    editorElRef()?.addEventListener('focus', handleFocus)
+    requireAuthentication(() => {
+      setTimeout(() => {
+        const opts = setupEditor()
+        createEditorInstance(opts)
+        initializeMenus()
+      }, 120)
+    }, 'edit')
+  })
+
+  // collab mode on/off
   createEffect(
     on(
-      () => props.disableCollaboration,
-      () => {
-        initializeCollaboration()
-      },
+      isCollabMode,
+      (x) => !x && initializeCollaboration(),
       { defer: true }
     )
   )

src/components/Editor/Panel/Panel.tsx

@@ -11,6 +11,7 @@ import { useLocalize } from '~/context/localize'
 import { useUI } from '~/context/ui'
 import { useEscKeyDownHandler } from '~/lib/useEscKeyDownHandler'
 import { useOutsideClickHandler } from '~/lib/useOutsideClickHandler'
+
 import styles from './Panel.module.scss'
 
 const typograf = new Typograf({ locale: ['ru', 'en-US'] })
@@ -23,6 +24,7 @@ export const Panel = (props: Props) => {
   const { t } = useLocalize()
   const { showModal } = useUI()
   const {
+    setIsCollabMode,
     isEditorPanelVisible,
     wordCounter,
     form,
@@ -32,13 +34,12 @@ export const Panel = (props: Props) => {
     publishShout,
     editing: editor
   } = useEditorContext()
-
-  let containerRef: HTMLElement | undefined
+  const [containerRef, setAsideContainerRef] = createSignal<HTMLElement | undefined>()
   const [isShortcutsVisible, setIsShortcutsVisible] = createSignal(false)
   const [isTypographyFixed, setIsTypographyFixed] = createSignal(false)
 
   useOutsideClickHandler({
-    containerRef,
+    containerRef: containerRef(),
     predicate: () => isEditorPanelVisible(),
     handler: () => toggleEditorPanel()
   })
@@ -67,7 +68,7 @@ export const Panel = (props: Props) => {
 
   return (
     <aside
-      ref={(el) => (containerRef = el)}
+      ref={setAsideContainerRef}
       class={clsx('col-md-6', styles.Panel, { [styles.hidden]: !isEditorPanelVisible() })}
     >
       <Button
@@ -96,6 +97,13 @@ export const Panel = (props: Props) => {
               {t('Invite co-authors')}
             </span>
           </p>
+          {/* TODO: <Show when={coauthorsCount() > 0}> */}
+          <p>
+            <span class={styles.link} onClick={() => setIsCollabMode((x) => !x)}>
+              {t('Collaborative mode')}
+            </span>
+          </p>
+          {/*</Show> */}
           <p>
             <A
               class={styles.link}

src/components/Editor/Toolbar/FullBubbleMenu.tsx

@@ -10,6 +10,7 @@ import { ToolbarControl } from './ToolbarControl'
 
 import { Popover } from '~/components/_shared/Popover/Popover'
 import styles from './FullBubbleMenu.module.scss'
+import { useEditorContext } from '~/context/editor'
 
 type FullBubbleMenuProps = {
   editor: () => Editor | undefined
@@ -20,6 +21,7 @@ type FullBubbleMenuProps = {
 
 export const FullBubbleMenu = (props: FullBubbleMenuProps) => {
   const { t } = useLocalize()
+  const { isCollabMode, setIsCollabMode } = useEditorContext()
 
   // SIGNALS
   const [textSizeBubbleOpen, setTextSizeBubbleOpen] = createSignal(false)
@@ -259,6 +261,18 @@ export const FullBubbleMenu = (props: FullBubbleMenuProps) => {
         <div style={{ width: '5px' }} />
 
         <ListDropdown />
+
+        <div class={styles.dropDownHolder}>
+          <Popover content={t('Collaborative mode')}>
+            {(triggerRef: (el: HTMLButtonElement) => void) => (
+              <button ref={triggerRef} type="button" class={styles.actionButton}
+                onClick={() => setIsCollabMode(x => !x)}
+              >
+                <Icon name={`comment${isCollabMode() ? '-hover' : ''}`} />
+              </button>
+            )}
+          </Popover>
+        </div>
       </Show>
     </>
   )