@jvs-milkdown/crepe 1.2.27 → 1.2.28

package/lib/types/feature/code-mirror/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/feature/code-mirror/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAIlD,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,wCAAwC,CAAA;AAG/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAe9C,UAAU,gBAAiB,SAAQ,eAAe;IAChD,KAAK,EAAE,SAAS,CAAA;IAChB,iBAAiB,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,MAAM,CAAA;IACvD,iBAAiB,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,MAAM,CAAA;CACxD;AAED,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAAA;AAE/D,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,uBAAuB,CAwD7D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/feature/code-mirror/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAIlD,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,wCAAwC,CAAA;AAG/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAe9C,UAAU,gBAAiB,SAAQ,eAAe;IAChD,KAAK,EAAE,SAAS,CAAA;IAChB,iBAAiB,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,MAAM,CAAA;IACvD,iBAAiB,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,MAAM,CAAA;CACxD;AAED,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAAA;AAE/D,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,uBAAuB,CA+H7D,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jvs-milkdown/crepe",
-  "version": "1.2.27",
+  "version": "1.2.28",
   "keywords": [
     "crepe",
     "editor",
@@ -107,15 +107,16 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.26.0",
     "@floating-ui/dom": "^1.7.6",
-    "@jvs-milkdown/kit": "^1.2.27",
-    "@jvs-milkdown/prose": "^1.2.27",
-    "@jvs-milkdown/utils": "^1.2.27",
+    "@jvs-milkdown/kit": "^1.2.28",
+    "@jvs-milkdown/prose": "^1.2.28",
+    "@jvs-milkdown/utils": "^1.2.28",
     "@types/lodash-es": "^4.17.12",
     "clsx": "^2.0.0",
     "codemirror": "^6.0.1",
     "diff": "^9.0.0",
     "katex": "^0.16.0",
     "lodash-es": "^4.17.21",
+    "mermaid": "^11.15.0",
     "prosemirror-virtual-cursor": "^0.4.2",
     "remark-math": "^6.0.0",
     "unist-util-visit": "^5.0.0",

package/src/feature/code-mirror/index.ts

@@ -66,7 +66,78 @@ export const codeMirror: DefineFeature<CodeMirrorFeatureConfig> = (
         noResultText:
           config.noResultText || i18n(ctx, 'codeMirror.noResultText'),
         renderLanguage: config.renderLanguage || defaultConfig.renderLanguage,
-        renderPreview: config.renderPreview || defaultConfig.renderPreview,
+        renderPreview: config.renderPreview || ((language, content, applyPreview) => {
+          if (language.toLowerCase() === 'mermaid' && content.trim().length > 0) {
+            import('mermaid')
+              .then(({ default: mermaid }) => {
+                mermaid.initialize({
+                  startOnLoad: false,
+                  theme: 'default',
+                  themeVariables: {
+                    fontFamily: '"trebuchet ms", verdana, arial, sans-serif',
+                  },
+                })
+
+                if (typeof document !== 'undefined') {
+                  const styleId = 'mermaid-global-measurement-styles'
+                  if (!document.getElementById(styleId)) {
+                    const styleEl = document.createElement('style')
+                    styleEl.id = styleId
+                    styleEl.textContent = `
+                      body,
+                      .mermaid,
+                      .relationshipLabel,
+                      .edgeLabel,
+                      .edgeLabelText,
+                      .label,
+                      .nodeLabel,
+                      svg * {
+                        font-family: "trebuchet ms", verdana, arial, sans-serif !important;
+                        line-height: normal !important;
+                      }
+                      .relationshipLabel,
+                      .relationshipLabel *,
+                      .edgeLabel,
+                      .edgeLabel *,
+                      .edgeLabelText,
+                      .edgeLabelText * {
+                        font-size: 11px !important;
+                      }
+                      svg foreignObject {
+                        overflow: visible !important;
+                      }
+                    `
+                    document.head.appendChild(styleEl)
+                  }
+                }
+
+                const id = `mermaid-${Math.random().toString(36).substring(2, 9)}`
+                mermaid
+                  .render(id, content)
+                  .then(({ svg }) => {
+                    applyPreview(svg)
+                  })
+                  .catch((e) => {
+                    const errorEl = document.getElementById(`d${id}`)
+                    if (errorEl) {
+                      errorEl.remove()
+                    }
+                    applyPreview(
+                      `<div class="mermaid-error" style="color: red; padding: 10px; font-family: monospace;">${
+                        e instanceof Error ? e.message : String(e)
+                      }</div>`
+                    )
+                  })
+              })
+              .catch((err) => {
+                applyPreview(
+                  `<div class="mermaid-error" style="color: red; padding: 10px; font-family: monospace;">Failed to load mermaid: ${err.message}</div>`
+                )
+              })
+            return
+          }
+          return defaultConfig.renderPreview(language, content, applyPreview)
+        }),
         previewToggleButton: (previewOnlyMode) => {
           const icon =
             config.previewToggleIcon?.(previewOnlyMode) ||