@tiptap/extensions 3.27.1 → 3.27.3

package/dist/index.js

@@ -206,13 +206,13 @@ var Gapcursor = Extension4.create({
 import { PluginKey as PluginKey3 } from "@tiptap/pm/state";
 var DEFAULT_DATA_ATTRIBUTE = "placeholder";
 var PLUGIN_KEY = new PluginKey3("tiptap__placeholder");
-var VIEWPORT_OVERSCAN_PX = 200;
 
 // src/placeholder/placeholder.ts
 import { Extension as Extension5 } from "@tiptap/core";
 
 // src/placeholder/plugins/PlaceholderPlugin.ts
 import { Plugin as Plugin3 } from "@tiptap/pm/state";
+import { DecorationSet as DecorationSet4 } from "@tiptap/pm/view";
 
 // src/placeholder/utils/buildPlaceholderDecorations.ts
 import { isNodeEmpty } from "@tiptap/core";
@@ -250,6 +250,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 && 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,
@@ -257,7 +301,6 @@ function buildPlaceholderDecorations({
   doc,
   selection
 }) {
-  var _a, _b;
   const active = editor.isEditable || !options.showOnlyWhenEditable;
   if (!active) {
     return null;
@@ -294,212 +337,216 @@ 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 && 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 DecorationSet2.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
+import { getChangedRanges } from "@tiptap/core";
+import { DecorationSet as DecorationSet3 } from "@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 toContentRelativeRange(doc, range) {
+  return {
+    from: Math.max(0, range.from - 1),
+    to: Math.min(doc.content.size, range.to - 1)
+  };
 }
-function findScrollParent(element) {
-  let el = element;
-  while (el) {
-    if (isScrollable(el)) {
-      return el;
+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 = 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 : DecorationSet3.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 Plugin3({
     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 DecorationSet4.empty;
+        }
+        return (_a = PLUGIN_KEY.getState(state)) != null ? _a : DecorationSet4.empty;
+      }
     }
   });
 }
@@ -526,7 +573,7 @@ var Placeholder = Extension5.create({
 // src/selection/selection.ts
 import { createStyleTag, Extension as Extension6, isNodeSelection } from "@tiptap/core";
 import { Plugin as Plugin4, PluginKey as PluginKey4 } from "@tiptap/pm/state";
-import { Decoration as Decoration3, DecorationSet as DecorationSet3 } from "@tiptap/pm/view";
+import { Decoration as Decoration3, DecorationSet as DecorationSet5 } from "@tiptap/pm/view";
 var selectionStyle = `.ProseMirror:not(.ProseMirror-focused) *::selection {
   background: transparent;
 }
@@ -554,7 +601,7 @@ var Selection = Extension6.create({
             if (state.selection.empty || editor.isFocused || !editor.isEditable || isNodeSelection(state.selection) || editor.view.dragging) {
               return null;
             }
-            return DecorationSet3.create(state.doc, [
+            return DecorationSet5.create(state.doc, [
               Decoration3.inline(state.selection.from, state.selection.to, {
                 class: options.className
               })