@tiptap/extensions 3.27.2 → 3.27.3

package/dist/index.cjs

@@ -243,13 +243,13 @@ var Gapcursor = import_core4.Extension.create({
 var import_state3 = require("@tiptap/pm/state");
 var DEFAULT_DATA_ATTRIBUTE = "placeholder";
 var PLUGIN_KEY = new import_state3.PluginKey("tiptap__placeholder");
-var VIEWPORT_OVERSCAN_PX = 200;
 
 // src/placeholder/placeholder.ts
-var import_core6 = require("@tiptap/core");
+var import_core7 = require("@tiptap/core");
 
 // src/placeholder/plugins/PlaceholderPlugin.ts
 var import_state4 = require("@tiptap/pm/state");
+var import_view5 = require("@tiptap/pm/view");
 
 // src/placeholder/utils/buildPlaceholderDecorations.ts
 var import_core5 = require("@tiptap/core");
@@ -287,6 +287,50 @@ function createPlaceholderDecoration(options) {
 function resolveEmptyNodeClass(emptyNodeClass, props) {
   return typeof emptyNodeClass === "function" ? emptyNodeClass(props) : emptyNodeClass;
 }
+function scanRangeForDecorations({
+  editor,
+  options,
+  dataAttribute,
+  doc,
+  selection,
+  from,
+  to
+}) {
+  const { anchor } = selection;
+  const decorations = [];
+  const isEmptyDoc = editor.isEmpty;
+  doc.nodesBetween(from, to, (node, pos) => {
+    const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
+    const isEmpty = !node.isLeaf && (0, import_core5.isNodeEmpty)(node);
+    if (!node.type.isTextblock) {
+      return options.includeChildren;
+    }
+    if ((hasAnchor || !options.showOnlyCurrent) && isEmpty) {
+      decorations.push(
+        createPlaceholderDecoration({
+          editor,
+          isEmptyDoc,
+          dataAttribute,
+          hasAnchor,
+          placeholder: options.placeholder,
+          classes: {
+            emptyEditor: options.emptyEditorClass,
+            emptyNode: resolveEmptyNodeClass(options.emptyNodeClass, {
+              editor,
+              node,
+              pos,
+              hasAnchor
+            })
+          },
+          node,
+          pos
+        })
+      );
+    }
+    return options.includeChildren;
+  });
+  return decorations;
+}
 function buildPlaceholderDecorations({
   editor,
   options,
@@ -294,7 +338,6 @@ function buildPlaceholderDecorations({
   doc,
   selection
 }) {
-  var _a, _b;
   const active = editor.isEditable || !options.showOnlyWhenEditable;
   if (!active) {
     return null;
@@ -331,218 +374,222 @@ function buildPlaceholderDecorations({
       );
     }
   } else {
-    const pluginState = PLUGIN_KEY.getState(editor.state);
-    const from = (_a = pluginState == null ? void 0 : pluginState.topPos) != null ? _a : 0;
-    const to = (_b = pluginState == null ? void 0 : pluginState.bottomPos) != null ? _b : doc.content.size;
-    doc.nodesBetween(from, to, (node, pos) => {
-      const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
-      const isEmpty = !node.isLeaf && (0, import_core5.isNodeEmpty)(node);
-      if (!node.type.isTextblock) {
-        return options.includeChildren;
-      }
-      if ((hasAnchor || !options.showOnlyCurrent) && isEmpty) {
-        decorations.push(
-          createPlaceholderDecoration({
-            editor,
-            isEmptyDoc,
-            dataAttribute,
-            hasAnchor,
-            placeholder: options.placeholder,
-            classes: {
-              emptyEditor: options.emptyEditorClass,
-              emptyNode: resolveEmptyNodeClass(options.emptyNodeClass, {
-                editor,
-                node,
-                pos,
-                hasAnchor
-              })
-            },
-            node,
-            pos
-          })
-        );
-      }
-      return options.includeChildren;
-    });
+    decorations.push(
+      ...scanRangeForDecorations({
+        editor,
+        options,
+        dataAttribute,
+        doc,
+        selection,
+        from: 0,
+        to: doc.content.size
+      })
+    );
   }
   return import_view3.DecorationSet.create(doc, decorations);
 }
 
-// src/placeholder/utils/preparePlaceholderAttribute.ts
-function preparePlaceholderAttribute(attr) {
-  return attr.replace(/\s+/g, "-").replace(/[^a-zA-Z0-9-]/g, "").replace(/^[0-9-]+/, "").replace(/^-+/, "").toLowerCase();
-}
+// src/placeholder/utils/placeholderStateField.ts
+var import_core6 = require("@tiptap/core");
+var import_view4 = require("@tiptap/pm/view");
 
-// src/placeholder/utils/findScrollParent.ts
-function isScrollable(el) {
-  const style = getComputedStyle(el);
-  const overflow = `${style.overflow} ${style.overflowY} ${style.overflowX}`;
-  return /auto|scroll|overlay/.test(overflow);
+// src/placeholder/utils/resolveTopLevelRange.ts
+function resolveTopLevelRange(doc, pos) {
+  var _a;
+  const resolved = doc.resolve(pos);
+  if (resolved.depth === 0) {
+    const node2 = (_a = resolved.nodeAfter) != null ? _a : resolved.nodeBefore;
+    if (!node2) {
+      return { from: pos, to: pos };
+    }
+    const nodePos = resolved.nodeAfter ? pos : pos - node2.nodeSize;
+    return { from: nodePos, to: nodePos + node2.nodeSize };
+  }
+  const topLevelPos = resolved.before(1);
+  const node = resolved.node(1);
+  return { from: topLevelPos, to: topLevelPos + node.nodeSize };
 }
-function findScrollParent(element) {
-  let el = element;
-  while (el) {
-    if (isScrollable(el)) {
-      return el;
+function toContentRelativeRange(doc, range) {
+  return {
+    from: Math.max(0, range.from - 1),
+    to: Math.min(doc.content.size, range.to - 1)
+  };
+}
+function getTopLevelBlocksInRange(doc, from, to) {
+  const ranges = [];
+  doc.forEach((node, offset) => {
+    const nodeStart = offset;
+    const nodeEnd = nodeStart + node.nodeSize;
+    const absNodeStart = nodeStart + 1;
+    const absNodeEnd = nodeEnd + 1;
+    if (absNodeStart < to && absNodeEnd > from) {
+      ranges.push({ from: nodeStart, to: nodeEnd });
     }
-    const parent = el.parentElement;
-    if (!parent) {
-      const root = el.getRootNode();
-      if (root instanceof ShadowRoot) {
-        el = root.host;
-        continue;
-      }
-      return window;
+  });
+  return ranges;
+}
+function mergeRanges(ranges) {
+  if (ranges.length === 0) {
+    return [];
+  }
+  const sorted = [...ranges].sort((a, b) => a.from - b.from);
+  const merged = [{ ...sorted[0] }];
+  for (let i = 1; i < sorted.length; i += 1) {
+    const last = merged[merged.length - 1];
+    const current = sorted[i];
+    if (current.from <= last.to) {
+      last.to = Math.max(last.to, current.to);
+    } else {
+      merged.push({ ...current });
     }
-    el = parent;
   }
-  return window;
+  return merged;
 }
 
-// src/placeholder/utils/getViewportBoundaryPositions.ts
-function getContainerRect(container) {
-  if (container === window) {
-    return { top: 0, bottom: window.innerHeight };
+// src/placeholder/utils/placeholderStateField.ts
+function collectBlocksForChange(doc, change) {
+  const ranges = getTopLevelBlocksInRange(doc, change.from, change.to);
+  ranges.push(toContentRelativeRange(doc, resolveTopLevelRange(doc, change.from)));
+  if (change.to > change.from) {
+    ranges.push(
+      toContentRelativeRange(
+        doc,
+        resolveTopLevelRange(doc, Math.min(change.to, doc.content.size + 1) - 1)
+      )
+    );
+  } else if (change.from < doc.content.size + 1) {
+    ranges.push(
+      toContentRelativeRange(
+        doc,
+        resolveTopLevelRange(doc, Math.min(change.from + 1, doc.content.size))
+      )
+    );
   }
-  return container.getBoundingClientRect();
+  return ranges;
 }
-function getViewportBoundaryPositions({
-  view,
-  scrollContainer
-}) {
-  const editorRect = view.dom.getBoundingClientRect();
-  if (editorRect.width <= 0 || editorRect.height <= 0) {
-    return null;
-  }
-  const containerRect = scrollContainer ? getContainerRect(scrollContainer) : { top: 0, bottom: window.innerHeight };
-  const visibleTop = Math.max(editorRect.top, containerRect.top) - VIEWPORT_OVERSCAN_PX;
-  const visibleBottom = Math.min(editorRect.bottom, containerRect.bottom) + VIEWPORT_OVERSCAN_PX;
-  if (visibleTop >= visibleBottom) {
-    return null;
-  }
-  const minX = editorRect.left + 1;
-  const maxX = editorRect.right - 1;
-  if (minX > maxX) {
-    return null;
-  }
-  const isRTL = getComputedStyle(view.dom).direction === "rtl";
-  const targetX = isRTL ? editorRect.right - 2 : editorRect.left + 2;
-  const x = Math.min(Math.max(targetX, minX), maxX);
-  const probeTop = Math.max(visibleTop + 2, editorRect.top + 1);
-  const probeBottom = Math.min(visibleBottom - 2, editorRect.bottom - 1);
-  if (probeTop > probeBottom) {
-    return null;
+function collectRescanRanges(tr, oldState, newState) {
+  const ranges = [];
+  if (tr.docChanged) {
+    const changes = (0, import_core6.getChangedRanges)(tr);
+    for (const change of changes) {
+      ranges.push(...collectBlocksForChange(newState.doc, change.newRange));
+    }
   }
-  const topPos = view.posAtCoords({ left: x, top: probeTop });
-  const bottomPos = view.posAtCoords({ left: x, top: probeBottom });
-  if (!topPos || !bottomPos) {
-    return null;
+  if (tr.selectionSet) {
+    ranges.push(
+      toContentRelativeRange(
+        newState.doc,
+        resolveTopLevelRange(newState.doc, tr.mapping.map(oldState.selection.anchor))
+      )
+    );
+    ranges.push(
+      toContentRelativeRange(
+        newState.doc,
+        resolveTopLevelRange(newState.doc, newState.selection.anchor)
+      )
+    );
   }
-  return { top: topPos.pos, bottom: bottomPos.pos };
+  return mergeRanges(ranges);
 }
-
-// src/placeholder/utils/viewportTracking.ts
-var viewportPluginState = {
-  /**
-   * Initialises the viewport state with no known positions.
-   * @returns The initial viewport state.
-   */
-  init() {
-    return { topPos: null, bottomPos: null };
-  },
-  /**
-   * Updates the viewport state from incoming transactions.
-   * @param tr - The transaction being applied.
-   * @param prev - The previous viewport state.
-   * @returns The next viewport state.
-   */
-  apply(tr, prev) {
-    const meta = tr.getMeta(PLUGIN_KEY);
-    if (meta == null ? void 0 : meta.positions) {
-      return { topPos: meta.positions.top, bottomPos: meta.positions.bottom };
-    }
-    if (!tr.docChanged) {
-      return prev;
+function clampRange(from, to, doc) {
+  const clampedFrom = Math.max(0, Math.min(from, doc.content.size));
+  const clampedTo = Math.max(clampedFrom, Math.min(to, doc.content.size));
+  return { from: clampedFrom, to: clampedTo };
+}
+function updateDecorationsInRanges({
+  decorations,
+  ranges,
+  editor,
+  options,
+  dataAttribute,
+  doc,
+  selection
+}) {
+  let next = decorations;
+  for (const range of ranges) {
+    const { from, to } = clampRange(range.from, range.to, doc);
+    const existing = next.find(from, to).filter((decoration) => decoration.from >= from && decoration.to <= to);
+    if (existing.length) {
+      next = next.remove(existing);
     }
-    return {
-      topPos: prev.topPos !== null ? tr.mapping.map(prev.topPos) : null,
-      bottomPos: prev.bottomPos !== null ? tr.mapping.map(prev.bottomPos) : null
-    };
-  }
-};
-function createViewportPluginView(view) {
-  const scrollContainer = findScrollParent(view.dom);
-  const computeAndDispatch = () => {
-    const positions = getViewportBoundaryPositions({
-      view,
-      scrollContainer
+    const newDecos = scanRangeForDecorations({
+      editor,
+      options,
+      dataAttribute,
+      doc,
+      selection,
+      from,
+      to
     });
-    if (positions === null) {
-      return;
+    if (newDecos.length) {
+      next = next.add(doc, newDecos);
     }
-    const prev = PLUGIN_KEY.getState(view.state);
-    if ((prev == null ? void 0 : prev.topPos) === positions.top && (prev == null ? void 0 : prev.bottomPos) === positions.bottom) {
-      return;
-    }
-    const tr = view.state.tr.setMeta(PLUGIN_KEY, { positions });
-    view.dispatch(tr);
-  };
-  let frame = null;
-  let lastCompute = 0;
-  const MIN_SCROLL_INTERVAL = 150;
-  const scheduleFrame = () => {
-    if (frame !== null) return;
-    frame = requestAnimationFrame(() => {
-      frame = null;
-      const now = performance.now();
-      if (now - lastCompute >= MIN_SCROLL_INTERVAL) {
-        lastCompute = now;
-        computeAndDispatch();
-      } else {
-        scheduleFrame();
-      }
-    });
-  };
-  scrollContainer.addEventListener("scroll", scheduleFrame, { passive: true });
-  const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(scheduleFrame) : null;
-  resizeObserver == null ? void 0 : resizeObserver.observe(view.dom);
-  const intersectionObserver = typeof IntersectionObserver !== "undefined" ? new IntersectionObserver(scheduleFrame) : null;
-  intersectionObserver == null ? void 0 : intersectionObserver.observe(view.dom);
-  view.dom.addEventListener("focus", scheduleFrame);
-  computeAndDispatch();
+  }
+  return next;
+}
+function createPlaceholderStateField({
+  editor,
+  options,
+  dataAttribute
+}) {
   return {
-    update(_view, prevState) {
-      if (view.state.doc.content.size !== prevState.doc.content.size) {
-        scheduleFrame();
-      }
+    init(_config, state) {
+      const decorations = buildPlaceholderDecorations({
+        editor,
+        options,
+        dataAttribute,
+        doc: state.doc,
+        selection: state.selection
+      });
+      return decorations != null ? decorations : import_view4.DecorationSet.empty;
     },
-    destroy: () => {
-      if (frame !== null) {
-        cancelAnimationFrame(frame);
+    apply(tr, prev, oldState, newState) {
+      if (!tr.docChanged && !tr.selectionSet) {
+        return prev;
       }
-      scrollContainer.removeEventListener("scroll", scheduleFrame);
-      resizeObserver == null ? void 0 : resizeObserver.disconnect();
-      intersectionObserver == null ? void 0 : intersectionObserver.disconnect();
-      view.dom.removeEventListener("focus", scheduleFrame);
+      const mapped = prev.map(tr.mapping, tr.doc);
+      const ranges = collectRescanRanges(tr, oldState, newState);
+      return updateDecorationsInRanges({
+        decorations: mapped,
+        ranges,
+        editor,
+        options,
+        dataAttribute,
+        doc: newState.doc,
+        selection: newState.selection
+      });
     }
   };
 }
 
+// src/placeholder/utils/preparePlaceholderAttribute.ts
+function preparePlaceholderAttribute(attr) {
+  return attr.replace(/\s+/g, "-").replace(/[^a-zA-Z0-9-]/g, "").replace(/^[0-9-]+/, "").replace(/^-+/, "").toLowerCase();
+}
+
 // src/placeholder/plugins/PlaceholderPlugin.ts
 function createPlaceholderPlugin({ editor, options }) {
   const dataAttribute = options.dataAttribute ? `data-${preparePlaceholderAttribute(options.dataAttribute)}` : `data-${DEFAULT_DATA_ATTRIBUTE}`;
+  const useResolvedPath = options.showOnlyCurrent && !options.includeChildren;
   return new import_state4.Plugin({
     key: PLUGIN_KEY,
-    state: viewportPluginState,
-    view: createViewportPluginView,
+    ...useResolvedPath ? {} : {
+      state: createPlaceholderStateField({ editor, options, dataAttribute })
+    },
     props: {
-      decorations: ({ doc, selection }) => buildPlaceholderDecorations({ editor, options, dataAttribute, doc, selection })
+      decorations: useResolvedPath ? ({ doc, selection }) => buildPlaceholderDecorations({ editor, options, dataAttribute, doc, selection }) : (state) => {
+        var _a;
+        if (options.showOnlyWhenEditable && !editor.isEditable) {
+          return import_view5.DecorationSet.empty;
+        }
+        return (_a = PLUGIN_KEY.getState(state)) != null ? _a : import_view5.DecorationSet.empty;
+      }
     }
   });
 }
 
 // src/placeholder/placeholder.ts
-var Placeholder = import_core6.Extension.create({
+var Placeholder = import_core7.Extension.create({
   name: "placeholder",
   addOptions() {
     return {
@@ -561,9 +608,9 @@ var Placeholder = import_core6.Extension.create({
 });
 
 // src/selection/selection.ts
-var import_core7 = require("@tiptap/core");
+var import_core8 = require("@tiptap/core");
 var import_state5 = require("@tiptap/pm/state");
-var import_view4 = require("@tiptap/pm/view");
+var import_view6 = require("@tiptap/pm/view");
 var selectionStyle = `.ProseMirror:not(.ProseMirror-focused) *::selection {
   background: transparent;
 }
@@ -571,7 +618,7 @@ var selectionStyle = `.ProseMirror:not(.ProseMirror-focused) *::selection {
 .ProseMirror:not(.ProseMirror-focused) *::-moz-selection {
   background: transparent;
 }`;
-var Selection = import_core7.Extension.create({
+var Selection = import_core8.Extension.create({
   name: "selection",
   addOptions() {
     return {
@@ -581,18 +628,18 @@ var Selection = import_core7.Extension.create({
   addProseMirrorPlugins() {
     const { editor, options } = this;
     if (editor.options.injectCSS && typeof document !== "undefined") {
-      (0, import_core7.createStyleTag)(selectionStyle, editor.options.injectNonce, "selection");
+      (0, import_core8.createStyleTag)(selectionStyle, editor.options.injectNonce, "selection");
     }
     return [
       new import_state5.Plugin({
         key: new import_state5.PluginKey("selection"),
         props: {
           decorations(state) {
-            if (state.selection.empty || editor.isFocused || !editor.isEditable || (0, import_core7.isNodeSelection)(state.selection) || editor.view.dragging) {
+            if (state.selection.empty || editor.isFocused || !editor.isEditable || (0, import_core8.isNodeSelection)(state.selection) || editor.view.dragging) {
               return null;
             }
-            return import_view4.DecorationSet.create(state.doc, [
-              import_view4.Decoration.inline(state.selection.from, state.selection.to, {
+            return import_view6.DecorationSet.create(state.doc, [
+              import_view6.Decoration.inline(state.selection.from, state.selection.to, {
                 class: options.className
               })
             ]);
@@ -604,7 +651,7 @@ var Selection = import_core7.Extension.create({
 });
 
 // src/trailing-node/trailing-node.ts
-var import_core8 = require("@tiptap/core");
+var import_core9 = require("@tiptap/core");
 var import_state6 = require("@tiptap/pm/state");
 var skipTrailingNodeMeta = "skipTrailingNode";
 function nodeEqualsType({
@@ -613,7 +660,7 @@ function nodeEqualsType({
 }) {
   return node && Array.isArray(types) && types.includes(node.type) || (node == null ? void 0 : node.type) === types;
 }
-var TrailingNode = import_core8.Extension.create({
+var TrailingNode = import_core9.Extension.create({
   name: "trailingNode",
   addOptions() {
     return {
@@ -664,9 +711,9 @@ var TrailingNode = import_core8.Extension.create({
 });
 
 // src/undo-redo/undo-redo.ts
-var import_core9 = require("@tiptap/core");
+var import_core10 = require("@tiptap/core");
 var import_history = require("@tiptap/pm/history");
-var UndoRedo = import_core9.Extension.create({
+var UndoRedo = import_core10.Extension.create({
   name: "undoRedo",
   addOptions() {
     return {