feat: support mermaid node

Author: drl990114

package.json

@@ -149,6 +149,7 @@
     "fuse.js": "^7.0.0",
     "html-parse-stringify": "^3.0.1",
     "i18next": "^23.10.1",
+    "js-event-bus": "^1.1.1",
     "jsx-dom-cjs": "^8.1.5",
     "linkify-it": "^5.0.0",
     "lodash": "^4.17.21",
@@ -157,6 +158,7 @@
     "mdast-util-from-markdown": "^1.3.1",
     "mdast-util-gfm-autolink-literal": "^1.0.3",
     "mdast-util-gfm-strikethrough": "^1.0.3",
+    "mermaid": "^11.4.1",
     "micromark-extension-gfm-autolink-literal": "^1.0.5",
     "micromark-extension-gfm-strikethrough": "^1.0.7",
     "nanoid": "^5.0.8",

src/editor/codemirror/codemirror.ts

@@ -14,7 +14,11 @@ import type { EditorSchema, EditorView, ProsemirrorNode } from '@remirror/pm'
 import { exitCode } from '@remirror/pm/commands'
 import { Selection, TextSelection } from '@remirror/pm/state'
 import { lightTheme } from '../../editor/theme'
-import { ensureSyntaxTree, type LanguageDescription, type LanguageSupport } from '@codemirror/language'
+import {
+  ensureSyntaxTree,
+  type LanguageDescription,
+  type LanguageSupport,
+} from '@codemirror/language'
 import { languages } from '@codemirror/language-data'
 import { nanoid } from 'nanoid'
 import type { LoadLanguage } from '../extensions/CodeMirror/codemirror-node-view'
@@ -36,17 +40,17 @@ export const changeTheme = (theme: CreateThemeOptions): void => {
 }
 
 export const extractMatches = (view: CodeMirrorEditorView) => {
-  const tree: Tree | null = ensureSyntaxTree(view.state, view.state.doc.length);
-  const matches: any[] = [];
+  const tree: Tree | null = ensureSyntaxTree(view.state, view.state.doc.length)
+  const matches: any[] = []
   tree?.iterate({
     from: 0,
     to: view.state.doc.length,
     enter: ({ type, from, to }: SyntaxNodeRef) => {
       if (type.name.startsWith('ATXHeading')) {
-        matches.push({ from, to, value: view.state.doc.sliceString(from, to), type: type.name });
+        matches.push({ from, to, value: view.state.doc.sliceString(from, to), type: type.name })
       }
-    }
-  });
+    },
+  })
 
   return matches
 }
@@ -58,6 +62,8 @@ export type CreateCodemirrorOptions = {
   useProsemirrorHistoryKey?: boolean
 
   codemirrorEditorViewConfig?: CodeMirrorEditorViewConfig
+
+  onValueChange?: (value: string) => void
 }
 
 export class MfCodemirrorView {
@@ -241,6 +247,8 @@ export class MfCodemirrorView {
         change.text ? this.schema.text(change.text) : [],
       )
       this.view.dispatch(transaction)
+
+      this.options?.onValueChange?.(tr.state.doc.toString())
     }
   }
 

src/editor/components/Preview/preview.tsx

@@ -1,24 +1,23 @@
 import { WysiwygThemeWrapper } from '../../theme'
-import { prosemirrorNodeToHtml } from 'remirror'
 import { DOMSerializer, type Node } from '@remirror/pm/model'
 import { EditorProps } from '../Editor'
 import { createWysiwygDelegate } from '../WysiwygEditor'
-// @ts-ignore
-import HTML from 'html-parse-stringify'
 import { useEffect, useState } from 'react'
-import { nanoid } from 'nanoid'
 import { Icon } from 'zens'
+import { rmeProsemirrorNodeToHtml } from '@/editor/utils/prosemirrorNodeToHtml'
 
 interface PreviewProps {
   doc: Node | string
   delegateOptions?: EditorProps['delegateOptions']
+  onError?: (e: Error) => void
 }
 
 export type HTMLAstNode = {
   attrs: Record<string, any>
   name: string
   type: string
   children?: HTMLAstNode[]
+  content?: string
 }
 
 export const Preview: React.FC<PreviewProps> = (props) => {
@@ -30,46 +29,16 @@ export const Preview: React.FC<PreviewProps> = (props) => {
     targetDoc = createWysiwygDelegate(delegateOptions).stringToDoc(targetDoc)
   }
 
-  const html = prosemirrorNodeToHtml(targetDoc)
-
   useEffect(() => {
-    const fullAst = HTML.parse(html)
-
-    const imageLoadTasks: Promise<void>[] = []
-    const handleHtmlText = async (ast: HTMLAstNode[]) => {
-      const handleNode = (node: HTMLAstNode) => {
-        if (!node) {
-          return
-        }
-
-        if (node.name === 'img' && node.attrs?.src && delegateOptions?.handleViewImgSrcUrl) {
-          imageLoadTasks.push(
-            (async () => {
-              node.attrs.src = await delegateOptions?.handleViewImgSrcUrl?.(node.attrs.src)
-              node.attrs.key = nanoid()
-            })(),
-          )
-        }
-
-        if (node.children) {
-          handleHtmlText(node.children)
-        }
-      }
-
-      for (let i = 0; i < ast.length; i++) {
-        handleNode(ast[i])
-      }
-    }
-
-    handleHtmlText(fullAst)
-    Promise.all(imageLoadTasks)
-      .then((res) => {
-        setProcessedHtml(HTML.stringify(fullAst))
-      })
-      .catch(() => {
+    rmeProsemirrorNodeToHtml(targetDoc, delegateOptions)
+      .then((html) => {
         setProcessedHtml(html)
       })
-  }, [html])
+      .catch((e) => {
+        props.onError?.(e)
+        console.error(e)
+      })
+  }, [props.onError])
 
   if (!processedHtml) {
     return (

src/editor/components/ThemeProvider.tsx

@@ -1,8 +1,10 @@
 import { ThemeProvider as ScThemeProvider } from 'styled-components'
 import { CreateThemeOptions, changeTheme } from '../codemirror'
-import { useEffect } from 'react'
+import { memo, useEffect } from 'react'
 import { darkTheme, lightTheme } from '../theme'
 import { changeLng, i18nInit } from '../i18n'
+import mermaid from 'mermaid'
+import { eventBus } from '../utils/eventbus'
 
 export * from './Editor'
 
@@ -26,14 +28,13 @@ type Props = {
   children?: React.ReactNode
 }
 
-export const ThemeProvider: React.FC<Props> = ({ theme, i18n, children }: Props) => {
+export const ThemeProvider: React.FC<Props> = memo(({ theme, i18n, children }: Props) => {
   const mode = theme?.mode || 'light'
 
   const defaultThemeToken = mode === 'dark' ? darkTheme.styledConstants : lightTheme.styledConstants
 
   const themeToken = theme?.token ? { ...defaultThemeToken, ...theme.token } : defaultThemeToken
 
-
   useEffect(() => {
     if (i18n?.locales) {
       i18nInit(i18n.locales).then(() => {
@@ -50,7 +51,13 @@ export const ThemeProvider: React.FC<Props> = ({ theme, i18n, children }: Props)
         ? darkTheme.codemirrorTheme
         : lightTheme.codemirrorTheme
     changeTheme(codemirrorTheme)
+
+    mermaid.initialize({
+      theme: mode === 'dark' ? 'dark' : 'default',
+    })
+
+    eventBus.emit('change-theme')
   }, [mode, theme?.codemirrorTheme, changeTheme])
 
   return <ScThemeProvider theme={themeToken}>{children}</ScThemeProvider>
-}
+})

src/editor/extensions/CodeMirror/codemirror-extension.ts

@@ -116,7 +116,7 @@ export class LineCodeMirrorExtension extends NodeExtension<CodeMirrorExtensionOp
    * when typing triple back tick followed by a space.
    */
   createInputRules(): InputRule[] {
-    const regexp = /^```(\S+) $/
+    const regexp = /^```(?!mermaid)(\S*) $/
 
     const getAttributes: GetAttributes = (match) => {
       const language = match[1] ?? ''

src/editor/extensions/CodeMirror/codemirror-utils.ts

@@ -27,7 +27,8 @@ export function arrowHandler(dir: 'left' | 'right' | 'up' | 'down'): CommandFunc
     if (
       nextPos.$head &&
       (nextPos.$head.parent.type.name === 'codeMirror' ||
-        nextPos.$head.parent.type.name === 'html_block')
+        nextPos.$head.parent.type.name === 'html_block' ||
+        nextPos.$head.parent.type.name === 'mermaid_node')
     ) {
       dispatch?.(tr.setSelection(nextPos))
       return true

src/editor/extensions/HtmlNode/html-block-view.ts

@@ -59,7 +59,6 @@ export class HtmlNodeView implements NodeView {
 
     this.dom.appendChild(this._htmlSrcElt)
 
-    this.dom.addEventListener('click', () => this.ensureFocus())
     label.addEventListener('click', () => this.ensureFocus())
     this.dom.addEventListener('mouseenter', this.handleMouseEnter)
     this.dom.addEventListener('mouseleave', this.handleMouseLeave)

src/editor/extensions/Mermaid/index.ts

@@ -0,0 +1 @@
+export * from './mermaid-extension'

src/editor/extensions/Mermaid/mermaid-extension.ts

@@ -0,0 +1,96 @@
+import type { NodeSerializerOptions } from '../../transform'
+import { ParserRuleType } from '../../transform'
+import type {
+  ApplySchemaAttributes,
+  NodeExtensionSpec,
+  NodeSpecOverride,
+  NodeViewMethod,
+  PrioritizedKeyBindings,
+} from '@remirror/core'
+import { NodeExtension, isElementDomNode, nodeInputRule } from '@remirror/core'
+import type { ProsemirrorNode } from '@remirror/pm'
+import { MermaidNodeView } from './mermaid-view'
+import type { InputRule } from '@remirror/pm/inputrules'
+import { TextSelection } from '@remirror/pm/state'
+import { arrowHandler } from '../CodeMirror/codemirror-utils'
+
+export class MermaidBlockExtension extends NodeExtension {
+  get name() {
+    return 'mermaid_node' as const
+  }
+
+  createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
+    return {
+      group: 'block',
+      content: 'text*',
+      defining: true,
+      ...override,
+      code: true,
+      marks: '',
+      attrs: {
+        ...extra.defaults(),
+      },
+      parseDOM: [
+        {
+          tag: 'pre',
+          getAttrs: (node) => (isElementDomNode(node) ? extra.parse(node) : false),
+        },
+        ...(override.parseDOM ?? []),
+      ],
+      toDOM() {
+        return ['pre', { 'data-type': 'mermaid' }, 0]
+      },
+      isolating: true,
+    }
+  }
+
+  createNodeViews(): NodeViewMethod {
+    return (node: ProsemirrorNode, view, getPos) => {
+      return new MermaidNodeView(node, view, getPos as () => number)
+    }
+  }
+
+  createInputRules(): InputRule[] {
+    const rules: InputRule[] = [
+      nodeInputRule({
+        regexp: /^```mermaid$/,
+        type: this.type,
+        beforeDispatch: ({ tr, start, match }) => {
+          const $pos = tr.doc.resolve(start)
+          tr.setSelection(TextSelection.near($pos))
+        },
+      }),
+    ]
+
+    return rules
+  }
+
+  createKeymap(): PrioritizedKeyBindings {
+    return {
+      ArrowLeft: arrowHandler('left'),
+      ArrowRight: arrowHandler('right'),
+      ArrowUp: arrowHandler('up'),
+      ArrowDown: arrowHandler('down'),
+    }
+  }
+
+  public fromMarkdown() {
+    return [
+      {
+        type: ParserRuleType.block,
+        token: 'mermaid_node',
+        node: this.name,
+        hasOpenClose: false,
+      },
+    ] as const
+  }
+
+  public toMarkdown({ state, node }: NodeSerializerOptions) {
+    state.write('```mermaid\n')
+    state.text(node.textContent, false)
+    state.text('\n')
+    state.write('```')
+    state.closeBlock(node)
+    state.ensureNewLine()
+  }
+}