@jvs-milkdown/crepe 1.2.15 → 1.2.17

package/lib/esm/index.js

@@ -6,7 +6,7 @@ import { $ctx, $nodeSchema, $view, $remark, $markAttr, $markSchema, $command, $p
 import { defineComponent, shallowRef, ref, computed, h, createApp, watchEffect, watch, onUnmounted, Fragment, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { Icon } from '@jvs-milkdown/kit/component';
 import { blockConfig, block, BlockProvider } from '@jvs-milkdown/kit/plugin/block';
-import { commandsCtx, editorViewCtx, editorCtx, EditorStatus, schemaCtx, parserCtx, editorViewOptionsCtx, Editor, rootCtx, defaultValueCtx } from '@jvs-milkdown/kit/core';
+import { commandsCtx, editorViewCtx, schemaCtx, editorCtx, EditorStatus, parserCtx, editorViewOptionsCtx, Editor, rootCtx, defaultValueCtx } from '@jvs-milkdown/kit/core';
 import { findNodeInSelection, findParent, nodeRule } from '@jvs-milkdown/kit/prose';
 import { NodeSelection, TextSelection, Plugin, PluginKey, EditorState, AllSelection } from '@jvs-milkdown/kit/prose/state';
 import { computePosition, flip, shift, offset } from '@floating-ui/dom';
@@ -3071,27 +3071,39 @@ const Menu = defineComponent({
       let activeTextColor = null;
       let activeBgColor = null;
       if (node && node.nodeSize > 2) {
-        node.descendants((childNode) => {
-          if (childNode.isText) {
-            const tcType = textColorSchema.type(ctx);
-            const bcType = bgColorSchema.type(ctx);
-            if (!activeTextColor) {
-              const tcMark = childNode.marks.find((m) => m.type === tcType);
-              if (tcMark) activeTextColor = tcMark.attrs.color;
-            }
-            if (!activeBgColor) {
-              const bcMark = childNode.marks.find((m) => m.type === bcType);
-              if (bcMark) activeBgColor = bcMark.attrs.color;
+        const schema = ctx.get(schemaCtx);
+        const tcHasMark = schema.marks[textColorSchema.id];
+        const bcHasMark = schema.marks[bgColorSchema.id];
+        if (tcHasMark || bcHasMark) {
+          node.descendants((childNode) => {
+            if (childNode.isText) {
+              if (tcHasMark && !activeTextColor) {
+                const tcType = textColorSchema.type(ctx);
+                const tcMark = childNode.marks.find(
+                  (m) => m.type === tcType
+                );
+                if (tcMark) activeTextColor = tcMark.attrs.color;
+              }
+              if (bcHasMark && !activeBgColor) {
+                const bcType = bgColorSchema.type(ctx);
+                const bcMark = childNode.marks.find(
+                  (m) => m.type === bcType
+                );
+                if (bcMark) activeBgColor = bcMark.attrs.color;
+              }
             }
-          }
-          return false;
-        });
+            return false;
+          });
+        }
       }
       const setBlockColor = (colorValue, isBg) => {
         if (pos === null || pos === void 0) return;
         const { tr } = view.state;
         const targetNode = tr.doc.nodeAt(pos);
         if (!targetNode) return;
+        const schema = ctx.get(schemaCtx);
+        const hasMark = isBg ? schema.marks[bgColorSchema.id] : schema.marks[textColorSchema.id];
+        if (!hasMark) return;
         const markType = isBg ? bgColorSchema.type(ctx) : textColorSchema.type(ctx);
         const start = pos + 1;
         const end = pos + targetNode.nodeSize - 1;
@@ -3110,10 +3122,17 @@ const Menu = defineComponent({
         const { tr } = view.state;
         const targetNode = tr.doc.nodeAt(pos);
         if (!targetNode) return;
+        const schema = ctx.get(schemaCtx);
+        const tcHasMark = schema.marks[textColorSchema.id];
+        const bcHasMark = schema.marks[bgColorSchema.id];
         const start = pos + 1;
         const end = pos + targetNode.nodeSize - 1;
-        tr.removeMark(start, end, textColorSchema.type(ctx));
-        tr.removeMark(start, end, bgColorSchema.type(ctx));
+        if (tcHasMark) {
+          tr.removeMark(start, end, textColorSchema.type(ctx));
+        }
+        if (bcHasMark) {
+          tr.removeMark(start, end, bgColorSchema.type(ctx));
+        }
         view.dispatch(tr);
         showColorMenu.value = false;
         hide();
@@ -6144,6 +6163,10 @@ const Toolbar = defineComponent({
         return { textColor: null, bgColor: null };
       const view = ctx.get(editorViewCtx);
       const { state } = view;
+      const schema = ctx.get(schemaCtx);
+      const tcHasMark = schema.marks[textColorSchema.id];
+      const bcHasMark = schema.marks[bgColorSchema.id];
+      if (!tcHasMark || !bcHasMark) return { textColor: null, bgColor: null };
       const tcType = textColorSchema.type(ctx);
       const bcType = bgColorSchema.type(ctx);
       const { $cursor, ranges } = state.selection;
@@ -6188,6 +6211,10 @@ const Toolbar = defineComponent({
       const { state, dispatch } = view;
       const { tr } = state;
       const { from, to, empty } = state.selection;
+      const schema = ctx.get(schemaCtx);
+      const tcHasMark = schema.marks[textColorSchema.id];
+      const bcHasMark = schema.marks[bgColorSchema.id];
+      if (!tcHasMark || !bcHasMark) return;
       const textColorType = textColorSchema.type(ctx);
       const bgColorType = bgColorSchema.type(ctx);
       if (empty) {
@@ -6209,6 +6236,10 @@ const Toolbar = defineComponent({
         return { fontFamily: null, fontSize: null };
       const view = ctx.get(editorViewCtx);
       const { state } = view;
+      const schema = ctx.get(schemaCtx);
+      const ffHasMark = schema.marks[fontFamilySchema.id];
+      const fsHasMark = schema.marks[fontSizeSchema.id];
+      if (!ffHasMark || !fsHasMark) return { fontFamily: null, fontSize: null };
       const ffType = fontFamilySchema.type(ctx);
       const fsType = fontSizeSchema.type(ctx);
       const { $cursor, ranges } = state.selection;
@@ -9184,6 +9215,11 @@ const OutlinePanel = defineComponent({
     const activeId = ref("");
     const collapsedIds = ref(/* @__PURE__ */ new Set());
     let scrollLock = false;
+    const clickedActiveId = ref(null);
+    const clearClickedActive = () => {
+      if (scrollLock) return;
+      clickedActiveId.value = null;
+    };
     const hasChildren = (index) => {
       const current = items.value[index];
       if (!current) return false;
@@ -9238,6 +9274,10 @@ const OutlinePanel = defineComponent({
       if (scrollLock) return;
       const view = props.ctx.get(editorViewCtx);
       if (!view || !view.dom) return;
+      if (clickedActiveId.value) {
+        activeId.value = clickedActiveId.value;
+        return;
+      }
       const headings = Array.from(
         view.dom.querySelectorAll("h1, h2, h3, h4, h5, h6")
       );
@@ -9245,14 +9285,39 @@ const OutlinePanel = defineComponent({
         activeId.value = "";
         return;
       }
-      const scrollContainer = view.dom.parentElement;
-      if (!scrollContainer) return;
-      const toolbar = scrollContainer.querySelector(
+      let scrollContainer = view.dom.parentElement;
+      while (scrollContainer && scrollContainer !== document.body) {
+        const style = window.getComputedStyle(scrollContainer);
+        const overflowY = style.overflowY;
+        if ((overflowY === "auto" || overflowY === "scroll") && scrollContainer.scrollHeight > scrollContainer.clientHeight) {
+          break;
+        }
+        scrollContainer = scrollContainer.parentElement;
+      }
+      const isRootScroll = !scrollContainer || scrollContainer === document.body || scrollContainer === document.documentElement;
+      const actualScrollContainer = isRootScroll ? document.scrollingElement || document.documentElement || document.body : scrollContainer;
+      const rootNode = view.dom.getRootNode();
+      let toolbar = rootNode.querySelector(
         ".milkdown-fixed-toolbar"
       );
+      if (!toolbar) {
+        toolbar = document.querySelector(
+          ".milkdown-fixed-toolbar"
+        );
+      }
       const toolbarHeight = (toolbar == null ? void 0 : toolbar.offsetHeight) || 0;
-      const containerRect = scrollContainer.getBoundingClientRect();
-      const threshold = containerRect.top + toolbarHeight + 50;
+      const containerRect = actualScrollContainer.getBoundingClientRect();
+      const containerTop = isRootScroll ? 0 : Math.max(0, containerRect.top);
+      let scrollTop = actualScrollContainer.scrollTop;
+      let clientHeight = actualScrollContainer.clientHeight;
+      let scrollHeight = actualScrollContainer.scrollHeight;
+      if (isRootScroll) {
+        scrollTop = window.scrollY || document.documentElement.scrollTop;
+        clientHeight = window.innerHeight || document.documentElement.clientHeight;
+        scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+      }
+      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 15;
+      const threshold = isAtBottom ? containerTop + clientHeight : containerTop + toolbarHeight + 50;
       let active = headings[0];
       for (const h2 of headings) {
         const rect = h2.getBoundingClientRect();
@@ -9262,43 +9327,120 @@ const OutlinePanel = defineComponent({
           break;
         }
       }
-      activeId.value = (active == null ? void 0 : active.id) || "";
+      const activeItem = items.value.find((item) => {
+        try {
+          const activePos = view.posAtDOM(active, 0);
+          const isPosMatch = item.pos === activePos - 1;
+          let isDepthMatch = false;
+          const $pos = view.state.doc.resolve(activePos);
+          for (let d = $pos.depth; d >= 0; d--) {
+            if ($pos.node(d).type.name === "heading") {
+              if (item.pos === $pos.before(d)) {
+                isDepthMatch = true;
+                break;
+              }
+            }
+          }
+          if (isPosMatch || isDepthMatch) {
+            return true;
+          }
+        } catch (e) {
+        }
+        const dom = view.nodeDOM(item.pos);
+        const domMatch = dom === active || dom instanceof HTMLElement && active && dom.contains(active);
+        if (domMatch) {
+          return true;
+        }
+        return false;
+      });
+      const newActiveId = activeItem ? activeItem.id : (active == null ? void 0 : active.id) || "";
+      activeId.value = newActiveId;
     };
-    const scrollToHeading = (id) => {
+    const scrollToHeading = (item) => {
       const view = props.ctx.get(editorViewCtx);
       if (!view) return;
       try {
-        const headingEl = view.dom.querySelector(
-          `[id="${id}"]`
-        );
+        let headingEl = view.nodeDOM(item.pos);
+        if (!headingEl) {
+          try {
+            const domAt = view.domAtPos(item.pos);
+            let node = domAt.node;
+            if (node.nodeType === Node.TEXT_NODE) {
+              node = node.parentElement;
+            }
+            if (node instanceof HTMLElement) {
+              headingEl = node.closest(
+                "h1, h2, h3, h4, h5, h6"
+              );
+              if (!headingEl && domAt.offset < node.childNodes.length) {
+                const child = node.childNodes[domAt.offset];
+                if (child instanceof HTMLElement) {
+                  headingEl = child.closest("h1, h2, h3, h4, h5, h6") || child.querySelector(
+                    "h1, h2, h3, h4, h5, h6"
+                  );
+                }
+              }
+            }
+          } catch (e) {
+          }
+        }
+        if (!headingEl) {
+          headingEl = view.dom.querySelector(
+            `[id="${item.id}"]`
+          );
+        }
         if (!headingEl) return;
-        const scrollContainer = view.dom.parentElement;
-        if (!scrollContainer) return;
+        let scrollContainer = view.dom.parentElement;
+        while (scrollContainer && scrollContainer !== document.body) {
+          const style = window.getComputedStyle(scrollContainer);
+          const overflowY = style.overflowY;
+          if ((overflowY === "auto" || overflowY === "scroll") && scrollContainer.scrollHeight > scrollContainer.clientHeight) {
+            break;
+          }
+          scrollContainer = scrollContainer.parentElement;
+        }
+        const isRootScroll = !scrollContainer || scrollContainer === document.body || scrollContainer === document.documentElement;
+        const actualScrollContainer = isRootScroll ? document.scrollingElement || document.documentElement || document.body : scrollContainer;
         scrollLock = true;
-        const toolbar = scrollContainer.querySelector(
+        const rootNode = view.dom.getRootNode();
+        let toolbar = rootNode.querySelector(
           ".milkdown-fixed-toolbar"
         );
+        if (!toolbar) {
+          toolbar = document.querySelector(
+            ".milkdown-fixed-toolbar"
+          );
+        }
         const toolbarHeight = (toolbar == null ? void 0 : toolbar.offsetHeight) || 0;
-        const containerRect = scrollContainer.getBoundingClientRect();
+        const containerRectTop = isRootScroll ? 0 : actualScrollContainer.getBoundingClientRect().top;
         const headingRect = headingEl.getBoundingClientRect();
-        scrollContainer.scrollTo({
-          top: scrollContainer.scrollTop + headingRect.top - containerRect.top - toolbarHeight - 20,
-          behavior: "smooth"
-        });
+        const targetTop = actualScrollContainer.scrollTop + headingRect.top - containerRectTop - toolbarHeight - 20;
+        const scrollTarget = isRootScroll ? window : actualScrollContainer;
         let timer;
         const onScrollEnd = () => {
           clearTimeout(timer);
           timer = setTimeout(() => {
             scrollLock = false;
-            scrollContainer.removeEventListener("scroll", onScrollEnd);
+            scrollTarget.removeEventListener("scroll", onScrollEnd);
             checkActive();
           }, 150);
         };
-        scrollContainer.addEventListener("scroll", onScrollEnd);
+        scrollTarget.addEventListener("scroll", onScrollEnd);
         setTimeout(() => {
           scrollLock = false;
-          scrollContainer.removeEventListener("scroll", onScrollEnd);
+          scrollTarget.removeEventListener("scroll", onScrollEnd);
         }, 2e3);
+        if (isRootScroll) {
+          window.scrollTo({
+            top: targetTop,
+            behavior: "smooth"
+          });
+        } else {
+          actualScrollContainer.scrollTo({
+            top: targetTop,
+            behavior: "smooth"
+          });
+        }
       } catch (e) {
         scrollLock = false;
         updateOutline();
@@ -9309,6 +9451,27 @@ const OutlinePanel = defineComponent({
     onMounted(() => {
       updateOutline();
       checkActive();
+      window.addEventListener("wheel", clearClickedActive, { passive: true });
+      window.addEventListener("touchmove", clearClickedActive, {
+        passive: true
+      });
+      window.addEventListener("pointerdown", clearClickedActive, {
+        passive: true
+      });
+      const keyHandler = (e) => {
+        if ([
+          "ArrowUp",
+          "ArrowDown",
+          "PageUp",
+          "PageDown",
+          "Home",
+          "End"
+        ].includes(e.key)) {
+          clearClickedActive();
+        }
+      };
+      window.addEventListener("keydown", keyHandler, { passive: true });
+      onMounted._keyHandler = keyHandler;
       interval = setInterval(() => {
         if (viewState.value.outlineVisible) {
           updateOutline();
@@ -9325,6 +9488,13 @@ const OutlinePanel = defineComponent({
       if (interval) clearInterval(interval);
       if (pollInterval) clearInterval(pollInterval);
       window.removeEventListener("scroll", checkActive, true);
+      window.removeEventListener("wheel", clearClickedActive);
+      window.removeEventListener("touchmove", clearClickedActive);
+      window.removeEventListener("pointerdown", clearClickedActive);
+      const keyHandler = onMounted._keyHandler;
+      if (keyHandler) {
+        window.removeEventListener("keydown", keyHandler);
+      }
     });
     let startX = 0;
     let startWidth = 0;
@@ -9452,7 +9622,8 @@ const OutlinePanel = defineComponent({
               key: item.id,
               onClick: () => {
                 activeId.value = item.id;
-                scrollToHeading(item.id);
+                clickedActiveId.value = item.id;
+                scrollToHeading(item);
               },
               style: {
                 display: "flex",
@@ -9509,7 +9680,7 @@ const OutlinePanel = defineComponent({
                   e.currentTarget.style.backgroundColor = "transparent";
                 }
               },
-              "\uFFFD?",
+              "\u25BC",
               " "
             ),
             /* @__PURE__ */ h(