@jvs-milkdown/crepe 1.2.26 → 1.2.28

package/lib/cjs/index.js

@@ -2,6 +2,7 @@
 
 var utils$1 = require('@jvs-milkdown/utils');
 var lodashEs = require('lodash-es');
+var language = require('@codemirror/language');
 var languageData = require('@codemirror/language-data');
 var themeOneDark = require('@codemirror/theme-one-dark');
 var ctx = require('@jvs-milkdown/kit/ctx');
@@ -696,10 +697,21 @@ const importIcon = `
 </svg>
 `;
 
+const mermaidLanguage = language.LanguageDescription.of({
+  name: "Mermaid",
+  alias: ["mermaid"],
+  load: () => {
+    const fallback = languageData.languages.find((l) => l.name === "YAML") || languageData.languages.find((l) => l.name === "Markdown");
+    return fallback ? fallback.load() : Promise.resolve(null);
+  }
+});
+const allLanguages = [mermaidLanguage, ...languageData.languages].sort(
+  (a, b) => a.name.localeCompare(b.name)
+);
 const defaultConfig = {
   [CrepeFeature.CodeMirror]: {
     theme: themeOneDark.oneDark,
-    languages: languageData.languages,
+    languages: allLanguages,
     expandIcon: chevronDownIcon,
     searchIcon,
     clearSearchIcon: clearIcon,
@@ -3085,7 +3097,7 @@ const Menu = vue.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) => {
@@ -4041,7 +4053,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 {
@@ -4192,7 +4204,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 {
@@ -4297,7 +4309,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);