@tiptap/extensions 3.23.6 → 3.24.0

package/dist/index.cjs

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   CharacterCount: () => CharacterCount,
+  DEFAULT_DATA_ATTRIBUTE: () => DEFAULT_DATA_ATTRIBUTE,
   Dropcursor: () => Dropcursor,
   Focus: () => Focus,
   Gapcursor: () => Gapcursor,
@@ -238,9 +239,20 @@ var Gapcursor = import_core4.Extension.create({
   }
 });
 
+// src/placeholder/constants.ts
+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");
+
+// src/placeholder/plugins/PlaceholderPlugin.ts
+var import_state4 = require("@tiptap/pm/state");
+
+// src/placeholder/utils/buildPlaceholderDecorations.ts
 var import_core5 = require("@tiptap/core");
-var import_state3 = require("@tiptap/pm/state");
 var import_view3 = require("@tiptap/pm/view");
 
 // src/placeholder/utils/createPlaceholderDecoration.ts
@@ -271,6 +283,81 @@ function createPlaceholderDecoration(options) {
   });
 }
 
+// src/placeholder/utils/buildPlaceholderDecorations.ts
+function buildPlaceholderDecorations({
+  editor,
+  options,
+  dataAttribute,
+  doc,
+  selection
+}) {
+  var _a, _b;
+  const active = editor.isEditable || !options.showOnlyWhenEditable;
+  if (!active) {
+    return null;
+  }
+  const { anchor } = selection;
+  const decorations = [];
+  const isEmptyDoc = editor.isEmpty;
+  const classes = {
+    emptyEditor: options.emptyEditorClass,
+    emptyNode: options.emptyNodeClass
+  };
+  const useResolvedPath = options.showOnlyCurrent && !options.includeChildren;
+  if (useResolvedPath) {
+    const resolved = doc.resolve(anchor);
+    const node = resolved.depth > 0 ? resolved.node(1) : resolved.nodeAfter;
+    const nodeStart = resolved.depth > 0 ? resolved.before(1) : anchor;
+    if (node && node.type.isTextblock && (0, import_core5.isNodeEmpty)(node)) {
+      const hasAnchor = anchor >= nodeStart && anchor <= nodeStart + node.nodeSize;
+      decorations.push(
+        createPlaceholderDecoration({
+          editor,
+          isEmptyDoc,
+          dataAttribute,
+          hasAnchor,
+          placeholder: options.placeholder,
+          classes,
+          node,
+          pos: nodeStart
+        })
+      );
+    }
+  } 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,
+            node,
+            pos
+          })
+        );
+      }
+      return options.includeChildren;
+    });
+  }
+  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/findScrollParent.ts
 function isScrollable(el) {
   const style = getComputedStyle(el);
@@ -311,8 +398,8 @@ function getViewportBoundaryPositions({
 }) {
   const editorRect = view.dom.getBoundingClientRect();
   const containerRect = scrollContainer ? getContainerRect(scrollContainer) : { top: 0, bottom: window.innerHeight };
-  const visibleTop = Math.max(editorRect.top, containerRect.top);
-  const visibleBottom = Math.min(editorRect.bottom, containerRect.bottom);
+  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 { top: 0, bottom: doc.content.size };
   }
@@ -326,34 +413,98 @@ function getViewportBoundaryPositions({
   };
 }
 
-// src/placeholder/utils/throttle.ts
-function throttle(fn, delay) {
-  let timer = null;
-  const call = ((...args) => {
-    if (timer) {
+// 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;
+    }
+    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,
+      doc: view.state.doc,
+      scrollContainer
+    });
+    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;
     }
-    fn(...args);
-    timer = setTimeout(() => {
-      timer = null;
-    }, delay);
-  });
-  const cancel = () => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = null;
+    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 });
+  computeAndDispatch();
+  return {
+    update(_view, prevState) {
+      if (view.state.doc.content.size !== prevState.doc.content.size) {
+        scheduleFrame();
+      }
+    },
+    destroy: () => {
+      if (frame !== null) {
+        cancelAnimationFrame(frame);
+      }
+      scrollContainer.removeEventListener("scroll", scheduleFrame);
     }
   };
-  return { call, cancel };
 }
 
-// src/placeholder/placeholder.ts
-var DEFAULT_DATA_ATTRIBUTE = "placeholder";
-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}`;
+  return new import_state4.Plugin({
+    key: PLUGIN_KEY,
+    state: viewportPluginState,
+    view: createViewportPluginView,
+    props: {
+      decorations: ({ doc, selection }) => buildPlaceholderDecorations({ editor, options, dataAttribute, doc, selection })
+    }
+  });
 }
-var PLUGIN_KEY = new import_state3.PluginKey("tiptap__placeholder");
-var Placeholder = import_core5.Extension.create({
+
+// src/placeholder/placeholder.ts
+var Placeholder = import_core6.Extension.create({
   name: "placeholder",
   addOptions() {
     return {
@@ -367,140 +518,15 @@ var Placeholder = import_core5.Extension.create({
     };
   },
   addProseMirrorPlugins() {
-    const dataAttribute = this.options.dataAttribute ? `data-${preparePlaceholderAttribute(this.options.dataAttribute)}` : `data-${DEFAULT_DATA_ATTRIBUTE}`;
-    return [
-      new import_state3.Plugin({
-        state: {
-          init() {
-            return {
-              // null means "no viewport info yet" — decoration callback falls
-              // back to full document scan until the scroll handler fires.
-              topPos: null,
-              bottomPos: null
-            };
-          },
-          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;
-            }
-            return {
-              topPos: prev.topPos !== null ? tr.mapping.map(prev.topPos) : null,
-              bottomPos: prev.bottomPos !== null ? tr.mapping.map(prev.bottomPos) : null
-            };
-          }
-        },
-        key: PLUGIN_KEY,
-        view(view) {
-          const scrollContainer = findScrollParent(view.dom);
-          const computeAndDispatch = () => {
-            const positions = getViewportBoundaryPositions({
-              view,
-              doc: view.state.doc,
-              scrollContainer
-            });
-            const prev = PLUGIN_KEY.getState(view.state);
-            if (prev.topPos === positions.top && prev.bottomPos === positions.bottom) {
-              return;
-            }
-            const tr = view.state.tr.setMeta(PLUGIN_KEY, { positions }).setMeta("tiptap__viewportUpdate", true);
-            view.dispatch(tr);
-          };
-          const { call: throttledUpdate, cancel: cancelThrottle } = throttle(computeAndDispatch, 250);
-          const scrollParent = scrollContainer;
-          scrollParent.addEventListener("scroll", throttledUpdate, { passive: true });
-          computeAndDispatch();
-          return {
-            update(_, prevState) {
-              if (view.state.doc.content.size !== prevState.doc.content.size) {
-                computeAndDispatch();
-              }
-            },
-            destroy: () => {
-              cancelThrottle();
-              scrollParent.removeEventListener("scroll", throttledUpdate);
-            }
-          };
-        },
-        props: {
-          decorations: ({ doc, selection }) => {
-            var _a, _b;
-            const active = this.editor.isEditable || !this.options.showOnlyWhenEditable;
-            if (!active) {
-              return null;
-            }
-            const { anchor } = selection;
-            const decorations = [];
-            const isEmptyDoc = this.editor.isEmpty;
-            const useResolvedPath = this.options.showOnlyCurrent && !this.options.includeChildren;
-            if (useResolvedPath) {
-              const resolved = doc.resolve(anchor);
-              if (resolved.depth > 0) {
-                const node = resolved.node(1);
-                const nodeStart = resolved.before(1);
-                if (node.type.isTextblock && (0, import_core5.isNodeEmpty)(node)) {
-                  const hasAnchor = anchor >= nodeStart && anchor <= nodeStart + node.nodeSize;
-                  const decoration = createPlaceholderDecoration({
-                    node,
-                    dataAttribute,
-                    hasAnchor,
-                    placeholder: this.options.placeholder,
-                    classes: {
-                      emptyEditor: this.options.emptyEditorClass,
-                      emptyNode: this.options.emptyNodeClass
-                    },
-                    editor: this.editor,
-                    isEmptyDoc,
-                    pos: resolved.before(1)
-                  });
-                  decorations.push(decoration);
-                }
-              }
-            } else {
-              const pluginState = PLUGIN_KEY.getState(this.editor.state);
-              const from = (_a = pluginState.topPos) != null ? _a : 0;
-              const to = (_b = 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 this.options.includeChildren;
-                }
-                if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
-                  const decoration = createPlaceholderDecoration({
-                    classes: { emptyEditor: this.options.emptyEditorClass, emptyNode: this.options.emptyNodeClass },
-                    editor: this.editor,
-                    isEmptyDoc,
-                    dataAttribute,
-                    hasAnchor,
-                    placeholder: this.options.placeholder,
-                    node,
-                    pos
-                  });
-                  decorations.push(decoration);
-                }
-                return this.options.includeChildren;
-              });
-            }
-            return import_view3.DecorationSet.create(doc, decorations);
-          }
-        }
-      })
-    ];
+    return [createPlaceholderPlugin({ editor: this.editor, options: this.options })];
   }
 });
 
 // src/selection/selection.ts
-var import_core6 = require("@tiptap/core");
-var import_state4 = require("@tiptap/pm/state");
+var import_core7 = require("@tiptap/core");
+var import_state5 = require("@tiptap/pm/state");
 var import_view4 = require("@tiptap/pm/view");
-var Selection = import_core6.Extension.create({
+var Selection = import_core7.Extension.create({
   name: "selection",
   addOptions() {
     return {
@@ -510,11 +536,11 @@ var Selection = import_core6.Extension.create({
   addProseMirrorPlugins() {
     const { editor, options } = this;
     return [
-      new import_state4.Plugin({
-        key: new import_state4.PluginKey("selection"),
+      new import_state5.Plugin({
+        key: new import_state5.PluginKey("selection"),
         props: {
           decorations(state) {
-            if (state.selection.empty || editor.isFocused || !editor.isEditable || (0, import_core6.isNodeSelection)(state.selection) || editor.view.dragging) {
+            if (state.selection.empty || editor.isFocused || !editor.isEditable || (0, import_core7.isNodeSelection)(state.selection) || editor.view.dragging) {
               return null;
             }
             return import_view4.DecorationSet.create(state.doc, [
@@ -530,13 +556,16 @@ var Selection = import_core6.Extension.create({
 });
 
 // src/trailing-node/trailing-node.ts
-var import_core7 = require("@tiptap/core");
-var import_state5 = require("@tiptap/pm/state");
+var import_core8 = require("@tiptap/core");
+var import_state6 = require("@tiptap/pm/state");
 var skipTrailingNodeMeta = "skipTrailingNode";
-function nodeEqualsType({ types, node }) {
+function nodeEqualsType({
+  types,
+  node
+}) {
   return node && Array.isArray(types) && types.includes(node.type) || (node == null ? void 0 : node.type) === types;
 }
-var TrailingNode = import_core7.Extension.create({
+var TrailingNode = import_core8.Extension.create({
   name: "trailingNode",
   addOptions() {
     return {
@@ -546,11 +575,11 @@ var TrailingNode = import_core7.Extension.create({
   },
   addProseMirrorPlugins() {
     var _a;
-    const plugin = new import_state5.PluginKey(this.name);
+    const plugin = new import_state6.PluginKey(this.name);
     const defaultNode = this.options.node || ((_a = this.editor.schema.topNodeType.contentMatch.defaultType) == null ? void 0 : _a.name) || "paragraph";
     const disabledNodes = Object.entries(this.editor.schema.nodes).map(([, value]) => value).filter((node) => (this.options.notAfter || []).concat(defaultNode).includes(node.name));
     return [
-      new import_state5.Plugin({
+      new import_state6.Plugin({
         key: plugin,
         appendTransaction: (transactions, __, state) => {
           const { doc, tr, schema } = state;
@@ -587,9 +616,9 @@ var TrailingNode = import_core7.Extension.create({
 });
 
 // src/undo-redo/undo-redo.ts
-var import_core8 = require("@tiptap/core");
+var import_core9 = require("@tiptap/core");
 var import_history = require("@tiptap/pm/history");
-var UndoRedo = import_core8.Extension.create({
+var UndoRedo = import_core9.Extension.create({
   name: "undoRedo",
   addOptions() {
     return {
@@ -624,6 +653,7 @@ var UndoRedo = import_core8.Extension.create({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CharacterCount,
+  DEFAULT_DATA_ATTRIBUTE,
   Dropcursor,
   Focus,
   Gapcursor,