@jvs-milkdown/crepe 1.2.12 → 1.2.13

package/lib/esm/index.js

@@ -439,6 +439,7 @@ const removeIcon = `
   >
     <path
       d="M7.30775 20.4997C6.81058 20.4997 6.385 20.3227 6.031 19.9687C5.677 19.6147 5.5 19.1892 5.5 18.692V5.99973H5.25C5.0375 5.99973 4.85942 5.92782 4.71575 5.78398C4.57192 5.64015 4.5 5.46198 4.5 5.24948C4.5 5.03682 4.57192 4.85873 4.71575 4.71523C4.85942 4.57157 5.0375 4.49973 5.25 4.49973H9C9 4.2549 9.08625 4.04624 9.25875 3.87374C9.43108 3.7014 9.63967 3.61523 9.8845 3.61523H14.1155C14.3603 3.61523 14.5689 3.7014 14.7413 3.87374C14.9138 4.04624 15 4.2549 15 4.49973H18.75C18.9625 4.49973 19.1406 4.57165 19.2843 4.71548C19.4281 4.85932 19.5 5.03748 19.5 5.24998C19.5 5.46265 19.4281 5.64073 19.2843 5.78423C19.1406 5.9279 18.9625 5.99973 18.75 5.99973H18.5V18.692C18.5 19.1892 18.323 19.6147 17.969 19.9687C17.615 20.3227 17.1894 20.4997 16.6923 20.4997H7.30775ZM17 5.99973H7V18.692C7 18.7818 7.02883 18.8556 7.0865 18.9132C7.14417 18.9709 7.21792 18.9997 7.30775 18.9997H16.6923C16.7821 18.9997 16.8558 18.9709 16.9135 18.9132C16.9712 18.8556 17 18.7818 17 18.692V5.99973ZM10.1543 16.9997C10.3668 16.9997 10.5448 16.9279 10.6885 16.7842C10.832 16.6404 10.9037 16.4622 10.9037 16.2497V8.74973C10.9037 8.53723 10.8318 8.35907 10.688 8.21523C10.5443 8.07157 10.3662 7.99973 10.1535 7.99973C9.941 7.99973 9.76292 8.07157 9.61925 8.21523C9.47575 8.35907 9.404 8.53723 9.404 8.74973V16.2497C9.404 16.4622 9.47583 16.6404 9.6195 16.7842C9.76333 16.9279 9.94158 16.9997 10.1543 16.9997ZM13.8465 16.9997C14.059 16.9997 14.2371 16.9279 14.3807 16.7842C14.5243 16.6404 14.596 16.4622 14.596 16.2497V8.74973C14.596 8.53723 14.5242 8.35907 14.3805 8.21523C14.2367 8.07157 14.0584 7.99973 13.8458 7.99973C13.6333 7.99973 13.4552 8.07157 13.3115 8.21523C13.168 8.35907 13.0962 8.53723 13.0962 8.74973V16.2497C13.0962 16.4622 13.1682 16.6404 13.312 16.7842C13.4557 16.9279 13.6338 16.9997 13.8465 16.9997Z"
+      fill="#363B4C"
     />
   </svg>
 `;
@@ -4294,6 +4295,29 @@ const cursor = (editor, config) => {
   editor.use($prose(() => virtualCursor));
 };
 
+const listeners = /* @__PURE__ */ new Set();
+let _popupCount = 0;
+function getIsAnyPopupOpen() {
+  return _popupCount > 0;
+}
+function addPopupChangeListener(fn) {
+  listeners.add(fn);
+  return () => listeners.delete(fn);
+}
+function incrementPopupCount() {
+  const wasZero = _popupCount === 0;
+  _popupCount++;
+  if (wasZero) {
+    listeners.forEach((fn) => fn());
+  }
+}
+function decrementPopupCount() {
+  _popupCount = Math.max(0, _popupCount - 1);
+  if (_popupCount === 0) {
+    listeners.forEach((fn) => fn());
+  }
+}
+
 const remarkHighlightMarkPlugin = $remark(
   "remarkHighlightMark",
   () => function() {
@@ -5390,6 +5414,8 @@ const Toolbar = defineComponent({
           const {
             marks: savedMarks,
             align: savedAlign,
+            blockType: savedBlockType,
+            blockAttrs: savedBlockAttrs,
             isPersistent
           } = formatPainterState.value;
           let applied = false;
@@ -5411,6 +5437,30 @@ const Toolbar = defineComponent({
                 }
               );
             }
+            if (savedBlockType) {
+              curState.doc.nodesBetween(
+                curSelection.from,
+                curSelection.to,
+                (node, pos) => {
+                  if (node.type.name === "paragraph") {
+                    tr.setNodeMarkup(
+                      pos,
+                      curState.schema.nodes[savedBlockType],
+                      {
+                        ...savedBlockAttrs,
+                        ...savedAlign ? { align: savedAlign } : {}
+                      }
+                    );
+                  } else if (node.type.name === "heading" && savedBlockAttrs) {
+                    tr.setNodeMarkup(pos, null, {
+                      ...node.attrs,
+                      ...savedBlockAttrs,
+                      ...savedAlign ? { align: savedAlign } : {}
+                    });
+                  }
+                }
+              );
+            }
             dispatch(tr);
             applied = true;
           } else {
@@ -5443,6 +5493,22 @@ const Toolbar = defineComponent({
                 });
               }
             }
+            if (savedBlockType) {
+              const pos = curSelection.$from.before(curSelection.$from.depth);
+              const node = curState.doc.nodeAt(pos);
+              if (node && node.type.name === "paragraph") {
+                tr.setNodeMarkup(pos, curState.schema.nodes[savedBlockType], {
+                  ...savedBlockAttrs,
+                  ...savedAlign ? { align: savedAlign } : {}
+                });
+              } else if (node && node.type.name === "heading" && savedBlockAttrs) {
+                tr.setNodeMarkup(pos, null, {
+                  ...node.attrs,
+                  ...savedBlockAttrs,
+                  ...savedAlign ? { align: savedAlign } : {}
+                });
+              }
+            }
             tr.setStoredMarks(savedMarks);
             dispatch(tr);
             applied = true;
@@ -5491,7 +5557,22 @@ const Toolbar = defineComponent({
         }
       }
       align = foundAlign;
-      formatPainterState.value = { marks, align, isPersistent };
+      let blockType = null;
+      let blockAttrs = null;
+      {
+        const parent = selection.$from.parent;
+        if (parent.type.name === "heading") {
+          blockType = "heading";
+          blockAttrs = { level: parent.attrs.level };
+        }
+      }
+      formatPainterState.value = {
+        marks,
+        align,
+        blockType,
+        blockAttrs,
+        isPersistent
+      };
       document.removeEventListener("pointerup", formatPainterHandler);
       setTimeout(() => {
         document.addEventListener("pointerup", formatPainterHandler);
@@ -5544,6 +5625,13 @@ const Toolbar = defineComponent({
     const showOverflowMenu = ref(false);
     const overflowMenuPos = ref({ top: 0 });
     const cachedWidths = /* @__PURE__ */ new Map();
+    const anyFixedPopup = computed(
+      () => !!isFixed && (showBlockMenu.value || showAlignMenu.value || showColorMenu.value || showFontFamilyMenu.value || showFontSizeMenu.value || showTableMenu.value || showOverflowMenu.value)
+    );
+    watch(anyFixedPopup, (val) => {
+      if (val) incrementPopupCount();
+      else decrementPopupCount();
+    });
     const getMenuLeftPos = (rect, menuWidth) => {
       let left = rect.left;
       if (left + menuWidth > window.innerWidth) {
@@ -5780,6 +5868,7 @@ const Toolbar = defineComponent({
       if (hideFontFamilyTimer) clearTimeout(hideFontFamilyTimer);
       if (hideFontSizeTimer) clearTimeout(hideFontSizeTimer);
       if (hideTableTimer) clearTimeout(hideTableTimer);
+      if (anyFixedPopup.value) decrementPopupCount();
     });
     let overflowResizeObserver = null;
     let overflowSetupDone = false;
@@ -6218,13 +6307,11 @@ const Toolbar = defineComponent({
           });
         }
       });
-      const nonHeadingGroups = toolbarGroupInfo.value.filter(
-        (group) => {
-          if (group.key === "heading") return false;
-          if (props.isFixed && group.key === "function") return false;
-          return true;
-        }
-      );
+      const nonHeadingGroups = toolbarGroupInfo.value.filter((group) => {
+        if (group.key === "heading") return false;
+        if (props.isFixed && group.key === "function") return false;
+        return true;
+      });
       const isSectionOverflowed = (idx) => idx >= overflowVisibleCount.value;
       const hasOverflow = overflowVisibleCount.value < totalSectionCount.value;
       return /* @__PURE__ */ h(
@@ -7520,7 +7607,7 @@ const createViewMenuState = () => reactive({
   outlineVisible: false,
   outlinePosition: "left",
   outlineWidth: 250,
-  documentBackground: null,
+  documentBackground: "#FFFFFF",
   showTitle: false,
   showCover: false,
   coverUrl: "",
@@ -7620,10 +7707,15 @@ const MenuBar = defineComponent({
     onUnmounted(() => {
       document.removeEventListener("click", closeMenu);
       if (rafId) cancelAnimationFrame(rafId);
+      if (showMenu.value) decrementPopupCount();
+    });
+    watch(showMenu, (val) => {
+      if (val) incrementPopupCount();
+      else decrementPopupCount();
     });
     const viewState = computed(() => props.ctx.get(viewMenuStateCtx.key));
     const bgColors = [
-      { name: "\u9ED8\u8BA4", value: null },
+      { name: "\u767D\u8272", value: "#FFFFFF" },
       { name: "\u6D45\u7070", value: "#F7F7F5" },
       { name: "\u6D45\u68D5", value: "#F4EEDB" },
       { name: "\u6D45\u6A59", value: "#FBECDD" },
@@ -8111,7 +8203,7 @@ const rightGroups = [
     titleKey: "shortcuts.history",
     items: [
       { labelKey: "shortcuts.undo", keys: ["Mod+z"] },
-      { labelKey: "shortcuts.redo", keys: ["Mod+y", "Shift+Mod+z"] }
+      { labelKey: "shortcuts.redo", keys: ["Mod+y", "Shift+Mod+Z"] }
     ]
   }
 ];
@@ -9439,7 +9531,7 @@ var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Ca
 var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
-var _content$2, _app$2, _headerContent, _headerApp, _outlineContent, _outlineApp, _watcher, _selection$1, _show$1, _resizeObserver, _updateOutlineGeometry, _scrollContainers, _view;
+var _content$2, _app$2, _headerContent, _headerApp, _outlineContent, _outlineApp, _watcher, _selection$1, _show$1, _resizeObserver, _updateOutlineGeometry, _scrollContainers, _onDblClick, _view;
 const fixedToolbarConfig = $ctx(
   {},
   "fixedToolbarConfigCtx"
@@ -9459,12 +9551,16 @@ class FixedToolbarView {
     __privateAdd$3(this, _resizeObserver);
     __privateAdd$3(this, _updateOutlineGeometry);
     __privateAdd$3(this, _scrollContainers, []);
+    __privateAdd$3(this, _onDblClick);
     __privateAdd$3(this, _view);
     this.update = (view) => {
       __privateGet$3(this, _selection$1).value = view.state.selection;
     };
     this.destroy = () => {
       if (__privateGet$3(this, _watcher)) __privateGet$3(this, _watcher).call(this);
+      if (__privateGet$3(this, _onDblClick)) {
+        __privateGet$3(this, _view).dom.removeEventListener("dblclick", __privateGet$3(this, _onDblClick));
+      }
       if (__privateGet$3(this, _resizeObserver)) __privateGet$3(this, _resizeObserver).disconnect();
       window.removeEventListener("resize", __privateGet$3(this, _updateOutlineGeometry));
       window.removeEventListener("scroll", __privateGet$3(this, _updateOutlineGeometry), {
@@ -9515,6 +9611,31 @@ class FixedToolbarView {
       __privateGet$3(this, _outlineApp).mount(outlineContent);
       __privateSet$3(this, _outlineContent, outlineContent);
       root.appendChild(outlineContent);
+      __privateSet$3(this, _onDblClick, (event) => {
+        const view2 = __privateGet$3(this, _view);
+        if (!view2.editable) return;
+        const dom = view2.dom;
+        const children = dom.children;
+        if (children.length === 0) return;
+        const lastChild = children[children.length - 1];
+        if (!lastChild) return;
+        const lastRect = lastChild.getBoundingClientRect();
+        if (event.clientY <= lastRect.bottom) return;
+        const { doc } = view2.state;
+        const lastNode = doc.lastChild;
+        if (!lastNode) return;
+        if (lastNode.type.name === "paragraph" && lastNode.content.size === 0)
+          return;
+        const paragraphType = view2.state.schema.nodes["paragraph"];
+        if (!paragraphType) return;
+        const pos = doc.content.size;
+        const tr = view2.state.tr.insert(pos, paragraphType.create());
+        const sel = TextSelection.create(tr.doc, pos + 1);
+        tr.setSelection(sel);
+        view2.dispatch(tr);
+        view2.focus();
+      });
+      view.dom.addEventListener("dblclick", __privateGet$3(this, _onDblClick));
       __privateGet$3(this, _content$2).style.transition = "margin 0.1s ease-out, width 0.1s ease-out";
       const viewState = ctx.get(viewMenuStateCtx.key);
       if (config.outlinePosition) {
@@ -9613,7 +9734,7 @@ class FixedToolbarView {
           __privateGet$3(this, _view).dom.style.maxWidth = maxWidth;
           __privateGet$3(this, _view).dom.style.width = isFull ? "100%" : maxWidth;
           __privateGet$3(this, _view).dom.style.margin = isFull ? "0" : "0 auto";
-          __privateGet$3(this, _view).dom.style.padding = `20px ${px} 0`;
+          __privateGet$3(this, _view).dom.style.padding = `20px ${px} 36px`;
           if (__privateGet$3(this, _headerContent)) {
             __privateGet$3(this, _headerContent).style.margin = isFull && !viewState.showCover ? "0 auto" : "0";
             __privateGet$3(this, _headerContent).style.padding = `0px`;
@@ -9640,6 +9761,7 @@ _show$1 = new WeakMap();
 _resizeObserver = new WeakMap();
 _updateOutlineGeometry = new WeakMap();
 _scrollContainers = new WeakMap();
+_onDblClick = new WeakMap();
 _view = new WeakMap();
 const fixedToolbarPlugin = $prose((ctx) => {
   return new Plugin({
@@ -9761,7 +9883,7 @@ const imageBlockConverter = $prose$1((ctx) => {
         const r = replacements[i];
         tr.replaceWith(r.from, r.to, r.blocks);
       }
-      return tr;
+      return tr.setMeta("addToHistory", false);
     }
   });
 });
@@ -10242,7 +10364,7 @@ var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Ca
 var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
-var _tooltipProvider, _content, _app, _selection, _show, _mousePressed;
+var _tooltipProvider, _content, _app, _selection, _show, _mousePressed, _removePopupListener, _onDocumentMouseUp;
 const toolbarTooltip = tooltipFactory("CREPE_TOOLBAR");
 class ToolbarView {
   constructor(ctx, view, config) {
@@ -10252,11 +10374,18 @@ class ToolbarView {
     __privateAdd$1(this, _selection);
     __privateAdd$1(this, _show, ref(false));
     __privateAdd$1(this, _mousePressed, false);
+    __privateAdd$1(this, _removePopupListener);
+    __privateAdd$1(this, _onDocumentMouseUp);
     this.update = (view, prevState) => {
       __privateGet$1(this, _tooltipProvider).update(view, prevState);
       __privateGet$1(this, _selection).value = view.state.selection;
     };
     this.destroy = () => {
+      var _a;
+      (_a = __privateGet$1(this, _removePopupListener)) == null ? void 0 : _a.call(this);
+      if (__privateGet$1(this, _onDocumentMouseUp)) {
+        document.removeEventListener("mouseup", __privateGet$1(this, _onDocumentMouseUp));
+      }
       __privateGet$1(this, _tooltipProvider).destroy();
       __privateGet$1(this, _app).unmount();
       __privateGet$1(this, _content).remove();
@@ -10286,12 +10415,23 @@ class ToolbarView {
         this.update(view);
       }, 0);
     });
+    const onDocumentMouseUp = () => {
+      if (__privateGet$1(this, _mousePressed)) {
+        __privateSet$1(this, _mousePressed, false);
+        setTimeout(() => {
+          this.update(view);
+        }, 0);
+      }
+    };
+    document.addEventListener("mouseup", onDocumentMouseUp);
+    __privateSet$1(this, _onDocumentMouseUp, onDocumentMouseUp);
     __privateSet$1(this, _tooltipProvider, new TooltipProvider({
       content: __privateGet$1(this, _content),
       debounce: 20,
       offset: 10,
       shouldShow: (view2) => {
         if (__privateGet$1(this, _mousePressed)) return false;
+        if (getIsAnyPopupOpen()) return false;
         const { doc, selection } = view2.state;
         const { empty, from, to } = selection;
         const isEmptyTextBlock = !doc.textBetween(from, to).length && selection instanceof TextSelection;
@@ -10311,6 +10451,13 @@ class ToolbarView {
     __privateGet$1(this, _tooltipProvider).onHide = () => {
       __privateGet$1(this, _show).value = false;
     };
+    __privateSet$1(this, _removePopupListener, addPopupChangeListener(() => {
+      if (getIsAnyPopupOpen()) {
+        __privateGet$1(this, _tooltipProvider).hide();
+      } else {
+        __privateGet$1(this, _tooltipProvider).update(view);
+      }
+    }));
     this.update(view);
   }
 }
@@ -10320,6 +10467,8 @@ _app = new WeakMap();
 _selection = new WeakMap();
 _show = new WeakMap();
 _mousePressed = new WeakMap();
+_removePopupListener = new WeakMap();
+_onDocumentMouseUp = new WeakMap();
 const toolbar = (editor, config) => {
   editor.config(crepeFeatureConfig(CrepeFeature.Toolbar)).config((ctx) => {
     ctx.set(toolbarTooltip.key, {