EQMS-1325 Add mermaid and drawing board to editor kit (#7487)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>

plugins/text-editor-resources/src/components/CollaborationDiffViewer.svelte

@@ -15,6 +15,7 @@
 //
 -->
 <script lang="ts">
+  import { Analytics } from '@hcengineering/analytics'
   import { MarkupNode } from '@hcengineering/text'
   import { onDestroy, onMount } from 'svelte'
   import { Doc as Ydoc } from 'yjs'
@@ -80,7 +81,11 @@
       editorProps: { attributes: mergeAttributes(defaultEditorAttributes, { class: 'flex-grow' }) },
       element,
       editable: false,
-      extensions: [await getEditorKit(), DecorationExtension, Collaboration.configure({ document: ydoc, field })]
+      extensions: [await getEditorKit(), DecorationExtension, Collaboration.configure({ document: ydoc, field })],
+      onContentError: ({ error, disableCollaboration }) => {
+        disableCollaboration()
+        Analytics.handleError(error)
+      }
     })
   })
 

plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte

@@ -75,7 +75,7 @@
   import TextEditorToolbar from './TextEditorToolbar.svelte'
   import { noSelectionRender, renderCursor } from './editor/collaboration'
   import { defaultEditorAttributes } from './editor/editorProps'
-  import { DrawingBoardExtension, SavedBoard } from './extension/drawingBoard'
+  import { SavedBoard } from './extension/drawingBoard'
   import { EmojiExtension } from './extension/emoji'
   import { FileUploadExtension } from './extension/fileUploadExt'
   import { ImageUploadExtension } from './extension/imageUploadExt'
@@ -83,7 +83,7 @@
   import { LeftMenuExtension } from './extension/leftMenu'
   import { type FileAttachFunction } from './extension/types'
   import { completionConfig, inlineCommandsConfig } from './extensions'
-  import { MermaidExtension, mermaidOptions } from './extension/mermaid'
+  import { mermaidOptions } from './extension/mermaid'
   import { InlineCommentExtension } from './extension/inlineComment'
 
   export let object: Doc
@@ -464,6 +464,14 @@
               isHidden: () => !showToolbar
             }
           },
+          mermaid: {
+            ...mermaidOptions,
+            ydoc,
+            ydocContentField: field
+          },
+          drawingBoard: {
+            getSavedBoard
+          },
           ...kitOptions
         }),
         ...optionalExtensions,
@@ -485,8 +493,6 @@
           }
         }),
         EmojiExtension,
-        MermaidExtension.configure({ ...mermaidOptions, ydoc, ydocContentField: field }),
-        DrawingBoardExtension.configure({ getSavedBoard }),
         ...extensions
       ],
       parseOptions: {

plugins/text-editor-resources/src/components/StyledTextBox.svelte

@@ -31,7 +31,6 @@
   import { InlineCommandsExtension } from './extension/inlineCommands'
   import { type FileAttachFunction } from './extension/types'
   import { completionConfig, InlineCommandId, inlineCommandsConfig } from './extensions'
-  import { MermaidExtension, mermaidOptions } from './extension/mermaid'
 
   export let label: IntlString | undefined = undefined
   export let content: Markup
@@ -193,7 +192,6 @@
     }
     extensions.push(
       imageUploadPlugin,
-      MermaidExtension.configure(mermaidOptions),
       FocusExtension.configure({ onCanBlur: (value: boolean) => (canBlur = value), onFocus: handleFocus })
     )
     if (enableEmojiReplace) {

plugins/text-editor-resources/src/components/TextEditor.svelte

@@ -174,6 +174,7 @@
                   }
                 }
               : false,
+            drawingBoard: false,
             submit: supportSubmit ? { submit } : false,
             toolbar: {
               element: textToolbarElement,

plugins/text-editor-resources/src/kits/editor-kit.ts

@@ -35,6 +35,8 @@ import { ParagraphExtension } from '../components/extension/paragraph'
 import { SubmitExtension, type SubmitOptions } from '../components/extension/submit'
 import { Table, TableCell, TableRow } from '../components/extension/table'
 import { DefaultKit, type DefaultKitOptions } from './default-kit'
+import { MermaidExtension, type MermaidOptions, mermaidOptions } from '../components/extension/mermaid'
+import { DrawingBoardExtension, type DrawingBoardOptions } from '../components/extension/drawingBoard'
 
 export interface EditorKitOptions extends DefaultKitOptions {
   history?: false
@@ -49,6 +51,8 @@ export interface EditorKitOptions extends DefaultKitOptions {
     }
   })
   | false
+  drawingBoard?: DrawingBoardOptions | false
+  mermaid?: MermaidOptions | false
   mode?: 'full' | 'compact'
   note?: NoteOptions | false
   submit?: SubmitOptions | false
@@ -248,6 +252,14 @@ async function buildEditorKit (): Promise<Extension<EditorKitOptions, any>> {
                 staticKitExtensions.push([800, ImageExtension.configure(imageOptions)])
               }
 
+              if (this.options.drawingBoard !== false) {
+                staticKitExtensions.push([840, DrawingBoardExtension.configure(this.options.drawingBoard)])
+              }
+
+              if (this.options.mermaid !== false) {
+                staticKitExtensions.push([850, MermaidExtension.configure(this.options.mermaid ?? mermaidOptions)])
+              }
+
               if (this.options.toolbar !== false) {
                 staticKitExtensions.push([
                   900,