updated configuration of inline commands for StyledTextBox (#7397)

Signed-off-by: Victor Ilyushchenko <alt13ri@gmail.com>

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

@@ -30,7 +30,8 @@
   import { ImageUploadExtension } from './extension/imageUploadExt'
   import { InlineCommandsExtension } from './extension/inlineCommands'
   import { type FileAttachFunction } from './extension/types'
-  import { completionConfig, inlineCommandsConfig } from './extensions'
+  import { completionConfig, InlineCommandId, inlineCommandsConfig } from './extensions'
+  import { MermaidExtension, mermaidOptions } from './extension/mermaid'
 
   export let label: IntlString | undefined = undefined
   export let content: Markup
@@ -192,6 +193,7 @@
     }
     extensions.push(
       imageUploadPlugin,
+      MermaidExtension.configure(mermaidOptions),
       FocusExtension.configure({ onCanBlur: (value: boolean) => (canBlur = value), onFocus: handleFocus })
     )
     if (enableEmojiReplace) {
@@ -199,10 +201,12 @@
     }
 
     if (enableInlineCommands) {
+      const excludedInlineCommands: InlineCommandId[] = ['drawing-board', 'todo-list']
+
+      if (attachFile === undefined) excludedInlineCommands.push('image')
+
       extensions.push(
-        InlineCommandsExtension.configure(
-          inlineCommandsConfig(handleCommandSelected, attachFile === undefined ? ['image'] : [])
-        )
+        InlineCommandsExtension.configure(inlineCommandsConfig(handleCommandSelected, excludedInlineCommands))
       )
     }
 
@@ -226,11 +230,13 @@
       }
       case 'code-block':
         editor.editorHandler.insertCodeBlock(pos)
-
         break
       case 'separator-line':
         editor.editorHandler.insertSeparatorLine()
         break
+      case 'mermaid':
+        editor.getEditor()?.commands.insertContentAt(pos, { type: 'mermaid' })
+        break
     }
   }
 

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

@@ -17,10 +17,9 @@
   import { IntlString } from '@hcengineering/platform'
   import { EmptyMarkup } from '@hcengineering/text'
   import { Button, type ButtonSize, Scroller } from '@hcengineering/ui'
-  import { AnyExtension, mergeAttributes } from '@tiptap/core'
+  import { AnyExtension, mergeAttributes, type Editor } from '@tiptap/core'
   import { createEventDispatcher } from 'svelte'
   import textEditor, { RefAction, TextEditorHandler, TextFormatCategory } from '@hcengineering/text-editor'
-
   import { defaultRefActions, getModelRefActions } from './editor/actions'
   import TextEditor from './TextEditor.svelte'
 
@@ -63,6 +62,9 @@
   export function insertText (text: string): void {
     editor?.insertText(text)
   }
+  export function getEditor (): Editor | undefined {
+    return editor?.getEditor()
+  }
 
   $: varsStyle =
     maxHeight === 'card'

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

@@ -90,6 +90,9 @@
       editor.commands.clearContent(true)
     }
   }
+  export function getEditor (): Editor {
+    return editor
+  }
 
   export function insertText (text: string): void {
     editor?.commands.insertContent(text)

plugins/text-editor-resources/src/components/extensions.ts

@@ -130,7 +130,15 @@ export const completionConfig: Partial<CompletionOptions> = {
   }
 }
 
-const inlineCommandsIds = ['image', 'table', 'code-block', 'separator-line', 'todo-list'] as const
+const inlineCommandsIds = [
+  'image',
+  'table',
+  'code-block',
+  'separator-line',
+  'todo-list',
+  'drawing-board',
+  'mermaid'
+] as const
 export type InlineCommandId = (typeof inlineCommandsIds)[number]
 
 /**