@jvs-milkdown/crepe 1.2.21 → 1.2.23

package/lib/cjs/index.js

@@ -1136,6 +1136,10 @@ const attachmentSchema = utils.$nodeSchema("attachment", () => {
   };
 });
 
+function keepAlive(..._args) {
+}
+
+keepAlive(vue.h);
 const downloadIcon = `<svg viewBox="0 0 1024 1024" width="20" height="20" fill="currentColor">
   <path d="M464.96 743.936L194.304 479.68c-4.928-4.8-10.24-9.408-14.592-14.656-20.736-24.768-21.376-45.76-2.368-63.424 17.664-16.384 43.328-16 65.472 4.8 49.088 46.144 96.64 93.824 144.896 140.8l69.376 67.52 11.968 11.392v-184.96c0-36.096-0.128-86.272-0.32-136.96-0.192-54.912-0.32-110.464-0.32-149.504l-0.064-9.28a208 208 0 0 1 0.704-26.56c3.52-31.168 19.328-46.592 45.248-45.76 25.344 0.832 41.088 16.96 42.688 48.576 1.28 24.384 1.024 48.896 0.768 73.408l-0.128 28.928c0 53.376 0.128 120.32 0.256 188.096 0.192 76.352 0.384 153.792 0.32 214.016 74.432-72.704 185.6-181.12 216.32-210.88 7.424-7.168 14.912-15.168 24-19.52 18.688-8.96 37.632-8.32 52.672 7.872 14.72 15.744 16.448 33.408 4.032 51.392-3.84 5.632-8.576 10.816-13.44 15.616-45.696 44.736-243.328 238.272-289.728 282.24a62.592 62.592 0 0 1-8.064 6.4 43.392 43.392 0 0 1-15.872 10.432c-20.544 7.616-37.504-0.512-51.968-14.848l-11.2-10.88z m430.784-39.744c24-0.576 42.176 14.4 43.328 41.6 1.728 40.832 2.944 82.176-1.088 122.816-5.312 54.144-51.52 89.792-114.752 91.008-50.112 0.896-100.224 0.704-150.4 0.512L608 960H434.944c-64.832 0.128-129.6 0.192-194.432-0.192-90.624-0.512-130.752-40.192-131.392-128.64l-0.192-18.56c-0.32-21.12-0.576-42.304 0.768-63.36 1.92-29.76 20.48-46.528 45.76-45.184 23.488 1.28 37.312 16.32 40.064 45.184 0.896 9.792 0.832 19.648 0.704 29.504l-0.064 11.52c0.384 76.544 7.36 83.392 88.128 83.456a163213.952 163213.952 0 0 0 351.68 0.064l43.968 0.128c36.096 0.128 72.192 0.256 108.288-0.448 52.672-1.024 64-12.864 65.152-64.32 0.192-7.68 0.128-15.488 0-23.232a414.72 414.72 0 0 1 0.704-38.208c2.24-27.712 17.92-42.944 41.664-43.52z" fill="currentColor"></path>
 </svg>`;
@@ -1503,9 +1507,6 @@ class GroupBuilder {
 _groups = new WeakMap();
 _getGroupInstance = new WeakMap();
 
-function keepAlive(..._args) {
-}
-
 const remarkTextColorPlugin = utils.$remark(
   "remarkTextColor",
   () => function() {
@@ -5757,12 +5758,18 @@ const Toolbar = vue.defineComponent({
     };
     let lastContainerWidth = 0;
     const computeOverflow = () => {
+      var _a;
       if (!toolbarContainerRef.value) return;
+      const status = (_a = ctx == null ? void 0 : ctx.get(core.editorCtx)) == null ? void 0 : _a.status;
+      if (status !== core.EditorStatus.Created) return;
+      const view = ctx.get(core.editorViewCtx);
+      if (!view || !view.dom) return;
       const container = toolbarContainerRef.value;
       if (!isFixed) {
-        const view = ctx.get(core.editorViewCtx);
         const containerDOM = view.dom.closest(".milkdown-editor-container") || view.dom.closest(".milkdown") || view.dom;
-        container.style.maxWidth = `${containerDOM.clientWidth - 32}px`;
+        if (containerDOM) {
+          container.style.maxWidth = `${containerDOM.clientWidth - 32}px`;
+        }
       }
       let containerWidth;
       if (isFixed) {
@@ -5781,9 +5788,8 @@ const Toolbar = vue.defineComponent({
           containerWidth = container.clientWidth;
         }
       } else {
-        const view = ctx.get(core.editorViewCtx);
         const containerDOM = view.dom.closest(".milkdown-editor-container") || view.dom.closest(".milkdown") || view.dom;
-        containerWidth = containerDOM.clientWidth - 32;
+        containerWidth = containerDOM ? containerDOM.clientWidth - 32 : 0;
       }
       if (showOverflowMenu.value) {
         showOverflowMenu.value = false;
@@ -5985,7 +5991,18 @@ const Toolbar = vue.defineComponent({
     let overflowResizeObserver = null;
     let overflowSetupDone = false;
     const setupOverflowObserver = () => {
+      var _a;
       if (!toolbarContainerRef.value || overflowSetupDone) return;
+      const status = (_a = ctx == null ? void 0 : ctx.get(core.editorCtx)) == null ? void 0 : _a.status;
+      if (status !== core.EditorStatus.Created) {
+        setTimeout(setupOverflowObserver, 50);
+        return;
+      }
+      const view = ctx.get(core.editorViewCtx);
+      if (!view || !view.dom) {
+        setTimeout(setupOverflowObserver, 50);
+        return;
+      }
       overflowSetupDone = true;
       overflowResizeObserver = new ResizeObserver(() => {
         computeOverflow();
@@ -5995,7 +6012,6 @@ const Toolbar = vue.defineComponent({
         const parent = toolbarContainerRef.value.parentElement;
         if (parent) overflowResizeObserver.observe(parent);
       } else {
-        const view = ctx.get(core.editorViewCtx);
         overflowResizeObserver.observe(view.dom);
         const containerDOM = view.dom.closest(".milkdown-editor-container");
         if (containerDOM) {
@@ -7764,13 +7780,14 @@ const createViewMenuState = () => vue.reactive({
 });
 const viewMenuStateCtx = utils.$ctx(createViewMenuState(), "viewMenuStateCtx");
 
+keepAlive(vue.h);
 const ToggleSwitch = vue.defineComponent({
   props: {
     modelValue: { type: Boolean, required: true }
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    return () => /* @__PURE__ */ h(
+    return () => /* @__PURE__ */ vue.h(
       "div",
       {
         onClick: (e) => {
@@ -7787,7 +7804,7 @@ const ToggleSwitch = vue.defineComponent({
           transition: "background-color 0.2s"
         }
       },
-      /* @__PURE__ */ h(
+      /* @__PURE__ */ vue.h(
         "div",
         {
           style: {
@@ -7886,7 +7903,7 @@ const MenuBar = vue.defineComponent({
     const hasSubmenu = (key) => key === "view";
     return () => {
       const state = viewState.value;
-      return /* @__PURE__ */ h(
+      return /* @__PURE__ */ vue.h(
         "div",
         {
           class: "milkdown-menu-bar",
@@ -7898,7 +7915,7 @@ const MenuBar = vue.defineComponent({
             position: "relative"
           }
         },
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ vue.h(
           "div",
           {
             ref: buttonRef,
@@ -7921,7 +7938,7 @@ const MenuBar = vue.defineComponent({
                 e.currentTarget.style.backgroundColor = "transparent";
             }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ vue.h(
             "span",
             {
               style: {
@@ -7932,9 +7949,9 @@ const MenuBar = vue.defineComponent({
                 justifyContent: "center"
               }
             },
-            /* @__PURE__ */ h(component.Icon, { icon: menuIcon })
+            /* @__PURE__ */ vue.h(component.Icon, { icon: menuIcon })
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ vue.h(
             "span",
             {
               style: {
@@ -7947,7 +7964,7 @@ const MenuBar = vue.defineComponent({
             "\u83DC\u5355"
           )
         ),
-        showMenu.value ? /* @__PURE__ */ h(
+        showMenu.value ? /* @__PURE__ */ vue.h(
           "div",
           {
             ref: mainRef,
@@ -7974,7 +7991,7 @@ const MenuBar = vue.defineComponent({
           menuKeys.value.map((menuKey) => {
             const isHovered = activeSubmenu.value === menuKey;
             const label = i18n(props.ctx, `menuBar.${menuKey}`) || menuKey;
-            return /* @__PURE__ */ h(
+            return /* @__PURE__ */ vue.h(
               "div",
               {
                 key: menuKey,
@@ -7996,7 +8013,7 @@ const MenuBar = vue.defineComponent({
                   backgroundColor: isHovered ? "var(--crepe-color-hover, #f5f5f5)" : "transparent"
                 }
               },
-              /* @__PURE__ */ h(
+              /* @__PURE__ */ vue.h(
                 "span",
                 {
                   style: {
@@ -8006,7 +8023,7 @@ const MenuBar = vue.defineComponent({
                 },
                 label
               ),
-              hasSubmenu(menuKey) ? /* @__PURE__ */ h(
+              hasSubmenu(menuKey) ? /* @__PURE__ */ vue.h(
                 "span",
                 {
                   style: {
@@ -8015,7 +8032,7 @@ const MenuBar = vue.defineComponent({
                     display: "flex"
                   }
                 },
-                /* @__PURE__ */ h(
+                /* @__PURE__ */ vue.h(
                   "svg",
                   {
                     width: "12",
@@ -8027,10 +8044,10 @@ const MenuBar = vue.defineComponent({
                     "stroke-linecap": "round",
                     "stroke-linejoin": "round"
                   },
-                  /* @__PURE__ */ h("polyline", { points: "9 18 15 12 9 6" })
+                  /* @__PURE__ */ vue.h("polyline", { points: "9 18 15 12 9 6" })
                 )
               ) : null,
-              menuKey === "view" && isHovered ? /* @__PURE__ */ h(
+              menuKey === "view" && isHovered ? /* @__PURE__ */ vue.h(
                 "div",
                 {
                   style: {
@@ -8048,7 +8065,7 @@ const MenuBar = vue.defineComponent({
                     cursor: "default"
                   }
                 },
-                /* @__PURE__ */ h(
+                /* @__PURE__ */ vue.h(
                   "div",
                   {
                     style: {
@@ -8058,7 +8075,7 @@ const MenuBar = vue.defineComponent({
                       alignItems: "center"
                     }
                   },
-                  /* @__PURE__ */ h(
+                  /* @__PURE__ */ vue.h(
                     "span",
                     {
                       style: {
@@ -8068,7 +8085,7 @@ const MenuBar = vue.defineComponent({
                     },
                     i18n(props.ctx, "view.title") || "\u6807\u9898"
                   ),
-                  /* @__PURE__ */ h(
+                  /* @__PURE__ */ vue.h(
                     ToggleSwitch,
                     {
                       modelValue: state.showTitle,
@@ -8076,7 +8093,7 @@ const MenuBar = vue.defineComponent({
                     }
                   )
                 ),
-                /* @__PURE__ */ h(
+                /* @__PURE__ */ vue.h(
                   "div",
                   {
                     style: {
@@ -8086,7 +8103,7 @@ const MenuBar = vue.defineComponent({
                       alignItems: "center"
                     }
                   },
-                  /* @__PURE__ */ h(
+                  /* @__PURE__ */ vue.h(
                     "span",
                     {
                       style: {
@@ -8096,7 +8113,7 @@ const MenuBar = vue.defineComponent({
                     },
                     i18n(props.ctx, "view.outline") || "\u5927\u7EB2"
                   ),
-                  /* @__PURE__ */ h(
+                  /* @__PURE__ */ vue.h(
                     ToggleSwitch,
                     {
                       modelValue: state.outlineVisible,
@@ -8104,7 +8121,7 @@ const MenuBar = vue.defineComponent({
                     }
                   )
                 ),
-                /* @__PURE__ */ h(
+                /* @__PURE__ */ vue.h(
                   "div",
                   {
                     style: {
@@ -8114,7 +8131,7 @@ const MenuBar = vue.defineComponent({
                       alignItems: "center"
                     }
                   },
-                  /* @__PURE__ */ h(
+                  /* @__PURE__ */ vue.h(
                     "span",
                     {
                       style: {
@@ -8124,7 +8141,7 @@ const MenuBar = vue.defineComponent({
                     },
                     i18n(props.ctx, "view.cover") || "\u5C01\u9762"
                   ),
-                  /* @__PURE__ */ h(
+                  /* @__PURE__ */ vue.h(
                     ToggleSwitch,
                     {
                       modelValue: state.showCover,
@@ -8140,7 +8157,7 @@ const MenuBar = vue.defineComponent({
                     }
                   )
                 ),
-                /* @__PURE__ */ h(
+                /* @__PURE__ */ vue.h(
                   "div",
                   {
                     style: {
@@ -8150,7 +8167,7 @@ const MenuBar = vue.defineComponent({
                     }
                   }
                 ),
-                /* @__PURE__ */ h(
+                /* @__PURE__ */ vue.h(
                   "div",
                   {
                     style: {
@@ -8160,7 +8177,7 @@ const MenuBar = vue.defineComponent({
                       alignItems: "center"
                     }
                   },
-                  /* @__PURE__ */ h(
+                  /* @__PURE__ */ vue.h(
                     "span",
                     {
                       style: {
@@ -8171,7 +8188,7 @@ const MenuBar = vue.defineComponent({
                     i18n(props.ctx, "view.docBackground") || "\u6587\u6863\u80CC\u666F"
                   )
                 ),
-                /* @__PURE__ */ h(
+                /* @__PURE__ */ vue.h(
                   "div",
                   {
                     style: {
@@ -8181,7 +8198,7 @@ const MenuBar = vue.defineComponent({
                       gap: "6px"
                     }
                   },
-                  bgColors.map((bg) => /* @__PURE__ */ h(
+                  bgColors.map((bg) => /* @__PURE__ */ vue.h(
                     "div",
                     {
                       key: bg.value || "default",
@@ -8203,7 +8220,7 @@ const MenuBar = vue.defineComponent({
                         justifyContent: "center"
                       }
                     },
-                    bg.value === null ? /* @__PURE__ */ h(
+                    bg.value === null ? /* @__PURE__ */ vue.h(
                       "div",
                       {
                         style: {
@@ -8216,7 +8233,7 @@ const MenuBar = vue.defineComponent({
                           borderRadius: "3px"
                         }
                       },
-                      /* @__PURE__ */ h(
+                      /* @__PURE__ */ vue.h(
                         "div",
                         {
                           style: {
@@ -8234,7 +8251,7 @@ const MenuBar = vue.defineComponent({
                     ) : null
                   ))
                 ),
-                /* @__PURE__ */ h(
+                /* @__PURE__ */ vue.h(
                   "div",
                   {
                     style: {
@@ -8244,7 +8261,7 @@ const MenuBar = vue.defineComponent({
                     }
                   }
                 ),
-                /* @__PURE__ */ h(
+                /* @__PURE__ */ vue.h(
                   "div",
                   {
                     style: {
@@ -8254,7 +8271,7 @@ const MenuBar = vue.defineComponent({
                       alignItems: "center"
                     }
                   },
-                  /* @__PURE__ */ h(
+                  /* @__PURE__ */ vue.h(
                     "span",
                     {
                       style: {
@@ -8265,7 +8282,7 @@ const MenuBar = vue.defineComponent({
                     i18n(props.ctx, "view.editorWidth") || "\u5185\u5BB9\u5BBD\u5EA6"
                   )
                 ),
-                /* @__PURE__ */ h(
+                /* @__PURE__ */ vue.h(
                   "div",
                   {
                     style: {
@@ -8287,7 +8304,7 @@ const MenuBar = vue.defineComponent({
                       key: "full",
                       labelKey: "view.widthFull"
                     }
-                  ].map(({ key, labelKey }) => /* @__PURE__ */ h(
+                  ].map(({ key, labelKey }) => /* @__PURE__ */ vue.h(
                     "button",
                     {
                       key,
@@ -8319,6 +8336,7 @@ const MenuBar = vue.defineComponent({
   }
 });
 
+keepAlive(vue.h);
 const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 function fmt(shortcut) {
   return shortcut.replace(/Mod/g, isMac ? "\u2318" : "Ctrl").replace(/\+/g, isMac ? "" : "+").replace(/Shift/g, isMac ? "\u21E7" : "Shift").replace(/Alt/g, isMac ? "\u2325" : "Alt");
@@ -8515,6 +8533,7 @@ const FixedToolbarComponent = vue.defineComponent({
     canRedo: { type: Object, required: true }
   },
   setup(props) {
+    keepAlive(vue.h);
     const showShortcuts = vue.ref(false);
     vue.onMounted(() => {
       const handleShowShortcuts = () => {
@@ -8533,7 +8552,7 @@ const FixedToolbarComponent = vue.defineComponent({
       props.selection.value;
       const canUndo = (typeof props.canUndo === "boolean" ? props.canUndo : (_a = props.canUndo) == null ? void 0 : _a.value) || false;
       const canRedo = (typeof props.canRedo === "boolean" ? props.canRedo : (_b = props.canRedo) == null ? void 0 : _b.value) || false;
-      return /* @__PURE__ */ h(
+      return /* @__PURE__ */ vue.h(
         "div",
         {
           style: {
@@ -8547,8 +8566,8 @@ const FixedToolbarComponent = vue.defineComponent({
           }
         },
         ((_c = props.config) == null ? void 0 : _c.showMenuBar) !== false && [
-          /* @__PURE__ */ h(MenuBar, { ctx: props.ctx, config: props.config }),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ vue.h(MenuBar, { ctx: props.ctx, config: props.config }),
+          /* @__PURE__ */ vue.h(
             "div",
             {
               style: {
@@ -8561,7 +8580,7 @@ const FixedToolbarComponent = vue.defineComponent({
           )
         ],
         ((_d = props.config) == null ? void 0 : _d.showHistory) !== false && [
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ vue.h(
             "button",
             {
               type: "button",
@@ -8592,7 +8611,7 @@ const FixedToolbarComponent = vue.defineComponent({
                 "--toolbar-icon-color": canUndo ? "#363b4c" : "#c0c4cc"
               }
             },
-            /* @__PURE__ */ h(
+            /* @__PURE__ */ vue.h(
               "span",
               {
                 style: { display: "inline-flex", alignItems: "center" },
@@ -8600,7 +8619,7 @@ const FixedToolbarComponent = vue.defineComponent({
               }
             )
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ vue.h(
             "button",
             {
               type: "button",
@@ -8631,7 +8650,7 @@ const FixedToolbarComponent = vue.defineComponent({
                 "--toolbar-icon-color": canRedo ? "#363b4c" : "#c0c4cc"
               }
             },
-            /* @__PURE__ */ h(
+            /* @__PURE__ */ vue.h(
               "span",
               {
                 style: { display: "inline-flex", alignItems: "center" },
@@ -8639,7 +8658,7 @@ const FixedToolbarComponent = vue.defineComponent({
               }
             )
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ vue.h(
             "div",
             {
               style: {
@@ -8651,7 +8670,7 @@ const FixedToolbarComponent = vue.defineComponent({
             }
           )
         ],
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ vue.h(
           Toolbar,
           {
             ctx: props.ctx,
@@ -8662,7 +8681,7 @@ const FixedToolbarComponent = vue.defineComponent({
             isFixed: true
           }
         ),
-        showShortcuts.value && /* @__PURE__ */ h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
+        showShortcuts.value && /* @__PURE__ */ vue.h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
       );
     };
   }
@@ -9447,6 +9466,7 @@ const DocumentHeader = vue.defineComponent({
   }
 });
 
+keepAlive(vue.h);
 const OutlinePanel = vue.defineComponent({
   props: {
     ctx: { type: Object, required: true }
@@ -12077,6 +12097,21 @@ class CrepeBuilder {
       });
       return this;
     };
+    /// Set the visibility of the outline panel.
+    this.setOutlineVisible = (visible) => {
+      __privateGet(this, _editor).action((ctx) => {
+        if (__privateGet(this, _editor).status === core.EditorStatus.Created) {
+          try {
+            const state = ctx.get(viewMenuStateCtx.key);
+            if (state) {
+              state.outlineVisible = visible;
+            }
+          } catch (e) {
+          }
+        }
+      });
+      return this;
+    };
     var _a;
     __privateSet(this, _rootElement, (_a = typeof root === "string" ? document.querySelector(root) : root) != null ? _a : document.body);
     const mergedTranslations = {
@@ -12169,6 +12204,22 @@ class CrepeBuilder {
   get readonly() {
     return !__privateGet(this, _editable);
   }
+  /// Get the visibility of the outline panel.
+  get outlineVisible() {
+    let visible = false;
+    __privateGet(this, _editor).action((ctx) => {
+      if (__privateGet(this, _editor).status === core.EditorStatus.Created) {
+        try {
+          const state = ctx.get(viewMenuStateCtx.key);
+          if (state) {
+            visible = state.outlineVisible;
+          }
+        } catch (e) {
+        }
+      }
+    });
+    return visible;
+  }
 }
 _editor = new WeakMap();
 _rootElement = new WeakMap();