@jvs-milkdown/crepe 1.2.26 → 1.2.28

package/lib/types/default-config/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/default-config/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,kBAAkB,EAAE,MAAM,YAAY,CAAA;AASlE,eAAO,MAAM,aAAa,EAAE,kBAU3B,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,YAAY,OAAO,CAAC,kBAAkB,CAAC,qDAOlE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/default-config/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAgB,KAAK,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAwBlE,eAAO,MAAM,aAAa,EAAE,kBAU3B,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,YAAY,OAAO,CAAC,kBAAkB,CAAC,qDAOlE,CAAA"}

package/lib/types/feature/block-edit/handle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/feature/block-edit/handle/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAehD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAkRtD,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,GAAG,EACR,MAAM,CAAC,EAAE,sBAAsB,QA2ChC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/feature/block-edit/handle/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAehD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAwRtD,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,GAAG,EACR,MAAM,CAAC,EAAE,sBAAsB,QA2ChC"}

package/lib/types/feature/block-edit/menu/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../../src/feature/block-edit/menu/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAYhD,OAAO,EAOL,KAAK,GAAG,EAGT,MAAM,KAAK,CAAA;AAEZ,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,IAAI,CAAA;AAwBhD,KAAK,SAAS,GAAG;IACf,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAClB,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACnB,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAC/B,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,IAAI,oWAoxCf,CAAA"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../../src/feature/block-edit/menu/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAYhD,OAAO,EAOL,KAAK,GAAG,EAGT,MAAM,KAAK,CAAA;AAEZ,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,IAAI,CAAA;AAwBhD,KAAK,SAAS,GAAG;IACf,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAClB,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACnB,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAC/B,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,IAAI,oWAuxCf,CAAA"}

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.26",
+  "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.26",
-    "@jvs-milkdown/prose": "^1.2.26",
-    "@jvs-milkdown/utils": "^1.2.26",
+    "@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/default-config/index.ts

@@ -1,3 +1,4 @@
+import { LanguageDescription } from '@codemirror/language'
 import { languages } from '@codemirror/language-data'
 import { oneDark } from '@codemirror/theme-one-dark'
 import { mergeWith } from 'lodash-es'
@@ -11,10 +12,25 @@ import {
   visibilityOffIcon,
 } from '../icons'
 
+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 as any)
+  },
+})
+
+const allLanguages = [mermaidLanguage, ...languages].sort((a, b) =>
+  a.name.localeCompare(b.name)
+)
+
 export const defaultConfig: CrepeFeatureConfig = {
   [CrepeFeature.CodeMirror]: {
     theme: oneDark,
-    languages,
+    languages: allLanguages,
     expandIcon: chevronDownIcon,
     searchIcon: searchIcon,
     clearSearchIcon: clearIcon,

package/src/feature/block-edit/handle/index.ts

@@ -96,7 +96,10 @@ class BlockHandleView implements PluginView {
           node.type.name.includes('math') ||
           hasMediaChild
         const isEmpty =
-          node.textContent.length === 0 && node.content.size <= 2 && !isMedia
+          node.type.name === 'paragraph' &&
+          node.textContent.length === 0 &&
+          node.content.size <= 2 &&
+          !isMedia
         if (isEmpty) {
           this.#content.classList.add('empty-block')
         } else {
@@ -158,7 +161,10 @@ class BlockHandleView implements PluginView {
         node.type.name.includes('math') ||
         hasMediaChild
       const isEmpty =
-        node.textContent.length === 0 && node.content.size <= 2 && !isMedia
+        node.type.name === 'paragraph' &&
+        node.textContent.length === 0 &&
+        node.content.size <= 2 &&
+        !isMedia
       if (isEmpty) {
         this.#content.classList.add('empty-block')
       } else {

package/src/feature/block-edit/menu/component.tsx

@@ -685,7 +685,10 @@ export const Menu = defineComponent<MenuProps>({
       const showAlign = !isMedia || isImageBlock
 
       const isEmpty = node
-        ? node.textContent.length === 0 && node.content.size <= 2 && !isMedia
+        ? node.type.name === 'paragraph' &&
+          node.textContent.length === 0 &&
+          node.content.size <= 2 &&
+          !isMedia
         : false
 
       const currentAlign = node?.attrs?.align || 'left'

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) ||

package/src/theme/common/block-edit.css

@@ -1,6 +1,8 @@
 .milkdown {
-  &:has(.milkdown-slash-menu[data-show='true'][data-mode='block']) .milkdown-block-handle,
-  &:has(.milkdown-slash-menu[data-show='true'][data-mode='list']) .milkdown-block-handle {
+  &:has(.milkdown-slash-menu[data-show='true'][data-mode='block'])
+    .milkdown-block-handle,
+  &:has(.milkdown-slash-menu[data-show='true'][data-mode='list'])
+    .milkdown-block-handle {
     opacity: 1 !important;
     pointer-events: auto !important;
   }
@@ -107,7 +109,7 @@
     }
 
     position: absolute;
-    z-index: 10;
+    z-index: 200;
     display: block;
     font-family: var(--crepe-font-default);
     color: var(--crepe-color-on-surface);

package/src/theme/common/code-mirror.css

@@ -334,6 +334,25 @@
       .preview {
         text-align: center;
         overflow-x: auto;
+        --mermaid-font-family: 'trebuchet ms', verdana, arial, sans-serif;
+
+        svg * {
+          font-family: 'trebuchet ms', verdana, arial, sans-serif !important;
+          line-height: normal !important;
+        }
+
+        svg .relationshipLabel,
+        svg .relationshipLabel *,
+        svg .edgeLabel,
+        svg .edgeLabel *,
+        svg .edgeLabelText,
+        svg .edgeLabelText * {
+          font-size: 11px !important;
+        }
+
+        svg foreignObject {
+          overflow: visible !important;
+        }
       }
     }
   }

package/src/theme/common/link-tooltip.css

@@ -1,7 +1,7 @@
 .milkdown {
   .milkdown-link-preview {
     position: absolute;
-    z-index: 10;
+    z-index: 200;
     &[data-show='false'] {
       display: none;
     }
@@ -71,7 +71,7 @@
 
   .milkdown-link-edit {
     position: absolute;
-    z-index: 10;
+    z-index: 200;
     &[data-show='false'] {
       display: none;
     }

package/src/theme/common/toolbar.css

@@ -9,7 +9,7 @@
       display: none;
     }
 
-    z-index: 110;
+    z-index: 200;
     position: absolute;
     display: flex;
     background: var(--crepe-color-surface);