@jvs-milkdown/crepe 1.2.4 → 1.2.7

package/lib/esm/feature/toolbar/index.js

@@ -31,6 +31,7 @@ const zhCN = {
   "toolbar.heading": "\u6807\u9898",
   "toolbar.formatting": "\u683C\u5F0F",
   "toolbar.function": "\u529F\u80FD",
+  "toolbar.formatPainter": "\u683C\u5F0F\u5237",
   // menu bar
   "menuBar.file": "\u6587\u4EF6",
   "menuBar.edit": "\u7F16\u8F91",
@@ -184,6 +185,7 @@ const enUS = {
   "toolbar.heading": "Heading",
   "toolbar.formatting": "Formatting",
   "toolbar.function": "Function",
+  "toolbar.formatPainter": "Format Painter",
   "menuBar.file": "File",
   "menuBar.edit": "Edit",
   "menuBar.view": "View",
@@ -1014,6 +1016,12 @@ const splitCellIcon = `
   </svg>
 `;
 
+const formatPainterIcon = `
+    <svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+    <path d="M454.698667 302.506667H323.84q-23.04 0-41.6 13.824-18.517333 13.824-25.130667 35.968l-31.36 104.704q-10.112 33.621333 10.794667 61.738666 11.52 15.445333 27.221333 22.442667 0.853333 46.165333-0.810666 105.6-1.408 51.84-58.368 138.496-23.338667 35.413333-3.413334 72.96 20.053333 37.76 62.677334 37.76h477.994666q39.509333 0 69.077334-26.325333 29.738667-26.453333 34.090666-65.962667 10.24-93.738667 10.24-155.946667 0-57.088-8.618666-103.68 20.949333-6.058667 35.285333-25.344 20.864-28.117333 10.837333-61.738666l-31.36-104.704q-6.656-22.144-25.173333-35.968-18.517333-13.781333-41.6-13.781334h-130.858667V197.802667q0-28.885333-20.437333-49.365334Q622.933333 128 594.090667 128H524.373333q-28.842667 0-49.237333 20.48-20.437333 20.437333-20.437333 49.322667v104.746666z m68.992 41.728q0.682667-3.370667 0.682666-6.784V197.802667h69.717334V337.493333q0 3.413333 0.64 6.826667 0.682667 3.370667 2.005333 6.528 1.28 3.2 3.2 6.058667 1.92 2.816 4.352 5.248 2.389333 2.474667 5.248 4.352 2.901333 1.92 6.058667 3.242666 3.157333 1.322667 6.528 1.962667 3.328 0.682667 6.826666 0.682667h165.674667l31.36 104.746666H292.48l31.36-104.746666h165.717333q3.413333 0 6.826667-0.64 3.328-0.682667 6.528-2.005334 3.157333-1.322667 5.973333-3.242666 2.858667-1.877333 5.290667-4.352 2.432-2.432 4.309333-5.248 1.92-2.901333 3.242667-6.058667 1.322667-3.157333 1.962667-6.570667z m252.501333 202.666666q9.429333 43.648 9.429333 100.864 0 58.368-9.813333 148.352-1.450667 12.757333-11.093333 21.376-9.813333 8.704-22.826667 8.704h-100.309333q22.058667-81.493333 22.058666-174.592h-69.674666q0 94.421333-24.96 174.592h-121.514667q41.941333-81.450667 41.941333-174.592H419.754667q0 94.378667-52.992 174.592H263.808q-0.725333 0-1.109333-0.725333-0.469333-0.981333 0.042666-1.749333 67.968-103.253333 69.888-175.018667 1.536-56.533333 0.938667-101.802667H776.106667z" fill="currentColor" p-id="11997"></path>
+    </svg>
+`;
+
 function keepAlive(..._args) {
 }
 
@@ -2296,7 +2304,7 @@ defineComponent({
     });
     return () => {
       var _a, _b, _c;
-      show.value;
+      void show.value;
       const api = ctx.get(menuAPI.key);
       const showListMenu = (api == null ? void 0 : api.getMode()) === "list" || !(api == null ? void 0 : api.isProgrammatic()) || filter.value !== "";
       if (showListMenu) {
@@ -3042,7 +3050,9 @@ defineComponent({
                   var _a2;
                   e.preventDefault();
                   e.stopPropagation();
-                  (_a2 = host.value) == null ? void 0 : _a2.querySelectorAll(`[data-index="${item.index}"]`).forEach((el) => el.classList.remove("active"));
+                  (_a2 = host.value) == null ? void 0 : _a2.querySelectorAll(`[data-index="${item.index}"]`).forEach(
+                    (el) => el.classList.remove("active")
+                  );
                   runByIndexForAddBelow(item.index);
                 }
               },
@@ -4090,6 +4100,10 @@ const activeIconMap = {
   // [highLineCodeIcon]: highLineCodeIconActive,
 };
 keepAlive(h, Fragment);
+const formatPainterStates = /* @__PURE__ */ new WeakMap();
+const formatPainterHandlers = /* @__PURE__ */ new WeakMap();
+const formatPainterIgnoreNext = /* @__PURE__ */ new WeakMap();
+const cursorStyleEls = /* @__PURE__ */ new WeakMap();
 const Toolbar = defineComponent({
   props: {
     ctx: { type: Object, required: true },
@@ -4120,6 +4134,184 @@ const Toolbar = defineComponent({
     const tableMenuPos = ref({ top: 0, left: 0 });
     const tableHoverIndices = ref({ r: 0, c: 0 });
     let hideTableTimer = null;
+    let formatPainterState = formatPainterStates.get(ctx);
+    if (!formatPainterState) {
+      formatPainterState = ref(null);
+      formatPainterStates.set(ctx, formatPainterState);
+    }
+    let formatPainterIgnore = formatPainterIgnoreNext.get(ctx);
+    if (!formatPainterIgnore) {
+      formatPainterIgnore = { value: false };
+      formatPainterIgnoreNext.set(ctx, formatPainterIgnore);
+    }
+    let formatPainterHandler = formatPainterHandlers.get(ctx);
+    if (!formatPainterHandler) {
+      formatPainterHandler = (ev) => {
+        if (!formatPainterState.value) return;
+        if (formatPainterIgnore.value) {
+          formatPainterIgnore.value = false;
+          return;
+        }
+        const currentView = ctx.get(editorViewCtx);
+        const targetElement = ev.target instanceof Element ? ev.target : ev.target.parentElement;
+        if (targetElement && targetElement.closest(".milkdown-toolbar, .milkdown-fixed-toolbar")) {
+          return;
+        }
+        setTimeout(() => {
+          if (!formatPainterState.value) return;
+          const { state: curState, dispatch } = currentView;
+          const { selection: curSelection, tr } = curState;
+          const {
+            marks: savedMarks,
+            align: savedAlign,
+            isPersistent
+          } = formatPainterState.value;
+          let applied = false;
+          if (!curSelection.empty) {
+            savedMarks.forEach((m) => {
+              tr.addMark(curSelection.from, curSelection.to, m);
+            });
+            if (savedAlign) {
+              curState.doc.nodesBetween(
+                curSelection.from,
+                curSelection.to,
+                (node, pos) => {
+                  if (node.type.name === "paragraph" || node.type.name === "heading") {
+                    tr.setNodeMarkup(pos, null, {
+                      ...node.attrs,
+                      align: savedAlign
+                    });
+                  }
+                }
+              );
+            }
+            dispatch(tr);
+            applied = true;
+          } else {
+            if (savedMarks.length > 0) {
+              const $pos = curSelection.$from;
+              if ($pos.parent.isTextblock) {
+                const text = $pos.parent.textContent;
+                const offset = $pos.parentOffset;
+                let start = offset;
+                let end = offset;
+                const isWordChar = (char) => !/[\s,.\-!?;:()[\]{}"'“”‘’，。！？；：（）【】《》、\n\r]/.test(
+                  char
+                );
+                while (start > 0 && isWordChar(text[start - 1])) start--;
+                while (end < text.length && isWordChar(text[end])) end++;
+                if (start < end) {
+                  savedMarks.forEach((m) => {
+                    tr.addMark($pos.start() + start, $pos.start() + end, m);
+                  });
+                }
+              }
+            }
+            if (savedAlign) {
+              const pos = curSelection.$from.before(curSelection.$from.depth);
+              const node = curState.doc.nodeAt(pos);
+              if (node && (node.type.name === "paragraph" || node.type.name === "heading")) {
+                tr.setNodeMarkup(pos, null, {
+                  ...node.attrs,
+                  align: savedAlign
+                });
+              }
+            }
+            tr.setStoredMarks(savedMarks);
+            dispatch(tr);
+            applied = true;
+          }
+          if (applied && !isPersistent) {
+            formatPainterState.value = null;
+            document.removeEventListener("pointerup", formatPainterHandler);
+          }
+        }, 50);
+      };
+      formatPainterHandlers.set(ctx, formatPainterHandler);
+    }
+    const toggleFormatPainter = (isPersistent) => {
+      const view = ctx.get(editorViewCtx);
+      const { state } = view;
+      const { selection } = state;
+      let marks = [];
+      if (selection.empty) {
+        marks = state.storedMarks ? [...state.storedMarks] : [...selection.$from.marks()];
+      } else {
+        let foundMarks = null;
+        state.doc.nodesBetween(selection.from, selection.to, (node) => {
+          if (foundMarks) return false;
+          if (node.isInline) {
+            foundMarks = [...node.marks];
+            return false;
+          }
+          return void 0;
+        });
+        marks = foundMarks || [];
+      }
+      let align = null;
+      let foundAlign = null;
+      state.doc.nodesBetween(selection.from, selection.to, (node) => {
+        if (foundAlign) return false;
+        if (node.isBlock && (node.type.name === "paragraph" || node.type.name === "heading")) {
+          foundAlign = node.attrs.align || null;
+          return false;
+        }
+        return void 0;
+      });
+      if (!foundAlign) {
+        const parent = selection.$from.parent;
+        if (parent && (parent.type.name === "paragraph" || parent.type.name === "heading")) {
+          foundAlign = parent.attrs.align || null;
+        }
+      }
+      align = foundAlign;
+      formatPainterState.value = { marks, align, isPersistent };
+      document.removeEventListener("pointerup", formatPainterHandler);
+      setTimeout(() => {
+        document.addEventListener("pointerup", formatPainterHandler);
+      }, 0);
+    };
+    const handleFormatPainterClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (formatPainterState.value) {
+        formatPainterState.value = null;
+        document.removeEventListener("pointerup", formatPainterHandler);
+      } else {
+        formatPainterIgnore.value = true;
+        toggleFormatPainter(false);
+      }
+    };
+    const handleFormatPainterDblClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      toggleFormatPainter(true);
+    };
+    watch(
+      () => formatPainterState.value,
+      (newVal) => {
+        if (newVal) {
+          let cursorStyleEl = cursorStyleEls.get(ctx);
+          if (!cursorStyleEl) {
+            cursorStyleEl = document.createElement("style");
+            const encodedSvg = encodeURIComponent(
+              formatPainterIcon.replace(/currentColor/g, "#363B4C")
+            );
+            cursorStyleEl.innerHTML = `.milkdown .ProseMirror, .milkdown .ProseMirror * { cursor: url("data:image/svg+xml;utf8,${encodedSvg}") 0 16, auto !important; }`;
+            document.head.appendChild(cursorStyleEl);
+            cursorStyleEls.set(ctx, cursorStyleEl);
+          }
+        } else {
+          const cursorStyleEl = cursorStyleEls.get(ctx);
+          if (cursorStyleEl) {
+            cursorStyleEl.remove();
+            cursorStyleEls.delete(ctx);
+          }
+        }
+      }
+    );
+    onUnmounted(() => {
+    });
     const toolbarContainerRef = ref(null);
     const overflowVisibleCount = ref(Infinity);
     const totalSectionCount = ref(Infinity);
@@ -4826,7 +5018,7 @@ const Toolbar = defineComponent({
               position: "relative",
               display: isSectionOverflowed(0) ? "none" : "flex",
               alignItems: "center",
-              padding: "0 8px",
+              padding: "0 6px",
               flexShrink: 0
             }
           },
@@ -4845,6 +5037,49 @@ const Toolbar = defineComponent({
             /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
           )
         ),
+        /* @__PURE__ */ h(
+          "div",
+          {
+            style: {
+              position: "relative",
+              display: isSectionOverflowed(0) ? "none" : "flex",
+              flexShrink: 0
+            }
+          },
+          /* @__PURE__ */ h(
+            "button",
+            {
+              type: "button",
+              class: clsx(
+                "toolbar-item",
+                formatPainterState.value && "active"
+              ),
+              onPointerdown: (e) => {
+                e.preventDefault();
+                handleFormatPainterClick(e);
+              },
+              onDblclick: handleFormatPainterDblClick,
+              title: i18n(ctx, "toolbar.formatPainter") || "Format Painter",
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: formatPainterState.value ? "var(--crepe-color-selected, var(--crepe-color-hover))" : void 0
+              }
+            },
+            /* @__PURE__ */ h(
+              "span",
+              {
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  "--toolbar-icon-color": formatPainterState.value ? "var(--crepe-color-primary)" : "#363B4C"
+                },
+                innerHTML: formatPainterIcon
+              }
+            )
+          )
+        ),
         /* @__PURE__ */ h(
           "div",
           {
@@ -4867,7 +5102,7 @@ const Toolbar = defineComponent({
               position: "relative",
               display: isSectionOverflowed(2) ? "none" : "flex",
               alignItems: "center",
-              padding: "0 8px",
+              padding: "0 6px",
               minWidth: "50px",
               flexShrink: 0
             }
@@ -4909,7 +5144,7 @@ const Toolbar = defineComponent({
               position: "relative",
               display: isSectionOverflowed(3) ? "none" : "flex",
               alignItems: "center",
-              padding: "0 8px",
+              padding: "0 6px",
               minWidth: "40px",
               flexShrink: 0
             }
@@ -4950,7 +5185,7 @@ const Toolbar = defineComponent({
               position: "relative",
               display: isSectionOverflowed(5) ? "none" : "flex",
               alignItems: "center",
-              padding: "0 8px",
+              padding: "0 6px",
               flexShrink: 0
             }
           },
@@ -5987,7 +6222,7 @@ const Toolbar = defineComponent({
                       ctx && checkActive(item.active) ? activeIconMap[item.icon] || item.icon : item.icon,
                       item.label,
                       ctx ? checkActive(item.active) : false,
-                      isTable ? void 0 : (e) => {
+                      isTable ? void 0 : (_e) => {
                         item.onRun(ctx);
                         showOverflowMenu.value = false;
                       },