@jvs-milkdown/crepe 1.2.26 → 1.2.28

package/lib/esm/index.js

@@ -1,5 +1,6 @@
 import { replaceAll, $prose as $prose$1, getHTML } from '@jvs-milkdown/utils';
 import { defaultsDeep } from 'lodash-es';
+import { LanguageDescription } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { createSlice } from '@jvs-milkdown/kit/ctx';
@@ -675,10 +676,21 @@ const importIcon = `
 </svg>
 `;
 
+const mermaidLanguage = LanguageDescription.of({
+  name: "Mermaid",
+  alias: ["mermaid"],
+  load: () => {
+    const fallback = languages.find((l) => l.name === "YAML") || languages.find((l) => l.name === "Markdown");
+    return fallback ? fallback.load() : Promise.resolve(null);
+  }
+});
+const allLanguages = [mermaidLanguage, ...languages].sort(
+  (a, b) => a.name.localeCompare(b.name)
+);
 const defaultConfig = {
   [CrepeFeature.CodeMirror]: {
     theme: oneDark,
-    languages,
+    languages: allLanguages,
     expandIcon: chevronDownIcon,
     searchIcon,
     clearSearchIcon: clearIcon,
@@ -3064,7 +3076,7 @@ const Menu = defineComponent({
       const isTableBlock = (node == null ? void 0 : node.type.name) === "table";
       const isMedia = ((_a = node == null ? void 0 : node.type.name) == null ? void 0 : _a.includes("image")) || isAttachmentBlock || isImageParagraph || (node == null ? void 0 : node.type.name) === "hr" || isTableBlock;
       const showAlign = !isMedia || isImageBlock;
-      const isEmpty = node ? node.textContent.length === 0 && node.content.size <= 2 && !isMedia : false;
+      const isEmpty = node ? node.type.name === "paragraph" && node.textContent.length === 0 && node.content.size <= 2 && !isMedia : false;
       const currentAlign = ((_b = node == null ? void 0 : node.attrs) == null ? void 0 : _b.align) || "left";
       const currentIndent = ((_c = node == null ? void 0 : node.attrs) == null ? void 0 : _c.indent) || 0;
       const setAlign = (alignValue) => {
@@ -4020,7 +4032,7 @@ class BlockHandleView {
           });
         }
         const isMedia = node.type.name.includes("image") || node.type.name.includes("attachment") || node.type.name === "hr" || node.type.name.includes("math") || hasMediaChild;
-        const isEmpty = node.textContent.length === 0 && node.content.size <= 2 && !isMedia;
+        const isEmpty = node.type.name === "paragraph" && node.textContent.length === 0 && node.content.size <= 2 && !isMedia;
         if (isEmpty) {
           __privateGet$5(this, _content$3).classList.add("empty-block");
         } else {
@@ -4171,7 +4183,7 @@ class BlockHandleView {
           });
         }
         const isMedia = node.type.name.includes("image") || node.type.name.includes("attachment") || node.type.name === "hr" || node.type.name.includes("math") || hasMediaChild;
-        const isEmpty = node.textContent.length === 0 && node.content.size <= 2 && !isMedia;
+        const isEmpty = node.type.name === "paragraph" && node.textContent.length === 0 && node.content.size <= 2 && !isMedia;
         if (isEmpty) {
           __privateGet$5(this, _content$3).classList.add("empty-block");
         } else {
@@ -4276,7 +4288,69 @@ const codeMirror = (editor, config = {}) => {
         }),
         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) => {
           var _a2, _b;
           const icon = ((_a2 = config.previewToggleIcon) == null ? void 0 : _a2.call(config, previewOnlyMode)) || (previewOnlyMode ? editIcon : visibilityOffIcon);