@tiptap/extensions 3.0.0-next.4 → 3.0.0-next.5

package/dist/index.d.cts

@@ -1,4 +1,63 @@
-import { Extension, ParentConfig } from '@tiptap/core';
+import { Extension, ParentConfig, Editor } from '@tiptap/core';
+import { Node } from '@tiptap/pm/model';
+
+interface CharacterCountOptions {
+    /**
+     * The maximum number of characters that should be allowed. Defaults to `0`.
+     * @default null
+     * @example 180
+     */
+    limit: number | null | undefined;
+    /**
+     * The mode by which the size is calculated. If set to `textSize`, the textContent of the document is used.
+     * If set to `nodeSize`, the nodeSize of the document is used.
+     * @default 'textSize'
+     * @example 'textSize'
+     */
+    mode: 'textSize' | 'nodeSize';
+    /**
+     * The text counter function to use. Defaults to a simple character count.
+     * @default (text) => text.length
+     * @example (text) => [...new Intl.Segmenter().segment(text)].length
+     */
+    textCounter: (text: string) => number;
+    /**
+     * The word counter function to use. Defaults to a simple word count.
+     * @default (text) => text.split(' ').filter(word => word !== '').length
+     * @example (text) => text.split(/\s+/).filter(word => word !== '').length
+     */
+    wordCounter: (text: string) => number;
+}
+interface CharacterCountStorage {
+    /**
+     * Get the number of characters for the current document.
+     * @param options The options for the character count. (optional)
+     * @param options.node The node to get the characters from. Defaults to the current document.
+     * @param options.mode The mode by which the size is calculated. If set to `textSize`, the textContent of the document is used.
+     */
+    characters: (options?: {
+        node?: Node;
+        mode?: 'textSize' | 'nodeSize';
+    }) => number;
+    /**
+     * Get the number of words for the current document.
+     * @param options The options for the character count. (optional)
+     * @param options.node The node to get the words from. Defaults to the current document.
+     */
+    words: (options?: {
+        node?: Node;
+    }) => number;
+}
+declare module '@tiptap/core' {
+    interface Storage {
+        characterCount: CharacterCountStorage;
+    }
+}
+/**
+ * This extension allows you to count the characters and words of your document.
+ * @see https://tiptap.dev/api/extensions/character-count
+ */
+declare const CharacterCount: Extension<CharacterCountOptions, CharacterCountStorage>;
 
 interface DropcursorOptions {
     /**
@@ -75,6 +134,102 @@ declare module '@tiptap/core' {
  */
 declare const Gapcursor: Extension<any, any>;
 
+interface HistoryOptions {
+    /**
+     * The amount of history events that are collected before the oldest events are discarded.
+     * @default 100
+     * @example 50
+     */
+    depth: number;
+    /**
+     * The delay (in milliseconds) between changes after which a new group should be started.
+     * @default 500
+     * @example 1000
+     */
+    newGroupDelay: number;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        history: {
+            /**
+             * Undo recent changes
+             * @example editor.commands.undo()
+             */
+            undo: () => ReturnType;
+            /**
+             * Reapply reverted changes
+             * @example editor.commands.redo()
+             */
+            redo: () => ReturnType;
+        };
+    }
+}
+/**
+ * This extension allows you to undo and redo recent changes.
+ * @see https://www.tiptap.dev/api/extensions/history
+ *
+ * **Important**: If the `@tiptap/extension-collaboration` package is used, make sure to remove
+ * the `history` extension, as it is not compatible with the `collaboration` extension.
+ *
+ * `@tiptap/extension-collaboration` uses its own history implementation.
+ */
+declare const History: Extension<HistoryOptions, any>;
+
+interface PlaceholderOptions {
+    /**
+     * **The class name for the empty editor**
+     * @default 'is-editor-empty'
+     */
+    emptyEditorClass: string;
+    /**
+     * **The class name for empty nodes**
+     * @default 'is-empty'
+     */
+    emptyNodeClass: string;
+    /**
+     * **The placeholder content**
+     *
+     * You can use a function to return a dynamic placeholder or a string.
+     * @default 'Write something …'
+     */
+    placeholder: ((PlaceholderProps: {
+        editor: Editor;
+        node: Node;
+        pos: number;
+        hasAnchor: boolean;
+    }) => string) | string;
+    /**
+     * **Checks if the placeholder should be only shown when the editor is editable.**
+     *
+     * If true, the placeholder will only be shown when the editor is editable.
+     * If false, the placeholder will always be shown.
+     * @default true
+     */
+    showOnlyWhenEditable: boolean;
+    /**
+     * **Checks if the placeholder should be only shown when the current node is empty.**
+     *
+     * If true, the placeholder will only be shown when the current node is empty.
+     * If false, the placeholder will be shown when any node is empty.
+     * @default true
+     */
+    showOnlyCurrent: boolean;
+    /**
+     * **Controls if the placeholder should be shown for all descendents.**
+     *
+     * If true, the placeholder will be shown for all descendents.
+     * If false, the placeholder will only be shown for the current node.
+     * @default false
+     */
+    includeChildren: boolean;
+}
+/**
+ * This extension allows you to add a placeholder to your editor.
+ * A placeholder is a text that appears when the editor or a node is empty.
+ * @see https://www.tiptap.dev/api/extensions/placeholder
+ */
+declare const Placeholder: Extension<PlaceholderOptions, any>;
+
 type SelectionOptions = {
     /**
      * The class name that should be added to the selected text.
@@ -114,4 +269,4 @@ interface TrailingNodeOptions {
  */
 declare const TrailingNode: Extension<TrailingNodeOptions, any>;
 
-export { Dropcursor, type DropcursorOptions, Focus, type FocusOptions, Gapcursor, Selection, type SelectionOptions, TrailingNode, type TrailingNodeOptions };
+export { CharacterCount, type CharacterCountOptions, type CharacterCountStorage, Dropcursor, type DropcursorOptions, Focus, type FocusOptions, Gapcursor, History, type HistoryOptions, Placeholder, type PlaceholderOptions, Selection, type SelectionOptions, TrailingNode, type TrailingNodeOptions };

package/dist/index.d.ts

@@ -1,4 +1,63 @@
-import { Extension, ParentConfig } from '@tiptap/core';
+import { Extension, ParentConfig, Editor } from '@tiptap/core';
+import { Node } from '@tiptap/pm/model';
+
+interface CharacterCountOptions {
+    /**
+     * The maximum number of characters that should be allowed. Defaults to `0`.
+     * @default null
+     * @example 180
+     */
+    limit: number | null | undefined;
+    /**
+     * The mode by which the size is calculated. If set to `textSize`, the textContent of the document is used.
+     * If set to `nodeSize`, the nodeSize of the document is used.
+     * @default 'textSize'
+     * @example 'textSize'
+     */
+    mode: 'textSize' | 'nodeSize';
+    /**
+     * The text counter function to use. Defaults to a simple character count.
+     * @default (text) => text.length
+     * @example (text) => [...new Intl.Segmenter().segment(text)].length
+     */
+    textCounter: (text: string) => number;
+    /**
+     * The word counter function to use. Defaults to a simple word count.
+     * @default (text) => text.split(' ').filter(word => word !== '').length
+     * @example (text) => text.split(/\s+/).filter(word => word !== '').length
+     */
+    wordCounter: (text: string) => number;
+}
+interface CharacterCountStorage {
+    /**
+     * Get the number of characters for the current document.
+     * @param options The options for the character count. (optional)
+     * @param options.node The node to get the characters from. Defaults to the current document.
+     * @param options.mode The mode by which the size is calculated. If set to `textSize`, the textContent of the document is used.
+     */
+    characters: (options?: {
+        node?: Node;
+        mode?: 'textSize' | 'nodeSize';
+    }) => number;
+    /**
+     * Get the number of words for the current document.
+     * @param options The options for the character count. (optional)
+     * @param options.node The node to get the words from. Defaults to the current document.
+     */
+    words: (options?: {
+        node?: Node;
+    }) => number;
+}
+declare module '@tiptap/core' {
+    interface Storage {
+        characterCount: CharacterCountStorage;
+    }
+}
+/**
+ * This extension allows you to count the characters and words of your document.
+ * @see https://tiptap.dev/api/extensions/character-count
+ */
+declare const CharacterCount: Extension<CharacterCountOptions, CharacterCountStorage>;
 
 interface DropcursorOptions {
     /**
@@ -75,6 +134,102 @@ declare module '@tiptap/core' {
  */
 declare const Gapcursor: Extension<any, any>;
 
+interface HistoryOptions {
+    /**
+     * The amount of history events that are collected before the oldest events are discarded.
+     * @default 100
+     * @example 50
+     */
+    depth: number;
+    /**
+     * The delay (in milliseconds) between changes after which a new group should be started.
+     * @default 500
+     * @example 1000
+     */
+    newGroupDelay: number;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        history: {
+            /**
+             * Undo recent changes
+             * @example editor.commands.undo()
+             */
+            undo: () => ReturnType;
+            /**
+             * Reapply reverted changes
+             * @example editor.commands.redo()
+             */
+            redo: () => ReturnType;
+        };
+    }
+}
+/**
+ * This extension allows you to undo and redo recent changes.
+ * @see https://www.tiptap.dev/api/extensions/history
+ *
+ * **Important**: If the `@tiptap/extension-collaboration` package is used, make sure to remove
+ * the `history` extension, as it is not compatible with the `collaboration` extension.
+ *
+ * `@tiptap/extension-collaboration` uses its own history implementation.
+ */
+declare const History: Extension<HistoryOptions, any>;
+
+interface PlaceholderOptions {
+    /**
+     * **The class name for the empty editor**
+     * @default 'is-editor-empty'
+     */
+    emptyEditorClass: string;
+    /**
+     * **The class name for empty nodes**
+     * @default 'is-empty'
+     */
+    emptyNodeClass: string;
+    /**
+     * **The placeholder content**
+     *
+     * You can use a function to return a dynamic placeholder or a string.
+     * @default 'Write something …'
+     */
+    placeholder: ((PlaceholderProps: {
+        editor: Editor;
+        node: Node;
+        pos: number;
+        hasAnchor: boolean;
+    }) => string) | string;
+    /**
+     * **Checks if the placeholder should be only shown when the editor is editable.**
+     *
+     * If true, the placeholder will only be shown when the editor is editable.
+     * If false, the placeholder will always be shown.
+     * @default true
+     */
+    showOnlyWhenEditable: boolean;
+    /**
+     * **Checks if the placeholder should be only shown when the current node is empty.**
+     *
+     * If true, the placeholder will only be shown when the current node is empty.
+     * If false, the placeholder will be shown when any node is empty.
+     * @default true
+     */
+    showOnlyCurrent: boolean;
+    /**
+     * **Controls if the placeholder should be shown for all descendents.**
+     *
+     * If true, the placeholder will be shown for all descendents.
+     * If false, the placeholder will only be shown for the current node.
+     * @default false
+     */
+    includeChildren: boolean;
+}
+/**
+ * This extension allows you to add a placeholder to your editor.
+ * A placeholder is a text that appears when the editor or a node is empty.
+ * @see https://www.tiptap.dev/api/extensions/placeholder
+ */
+declare const Placeholder: Extension<PlaceholderOptions, any>;
+
 type SelectionOptions = {
     /**
      * The class name that should be added to the selected text.
@@ -114,4 +269,4 @@ interface TrailingNodeOptions {
  */
 declare const TrailingNode: Extension<TrailingNodeOptions, any>;
 
-export { Dropcursor, type DropcursorOptions, Focus, type FocusOptions, Gapcursor, Selection, type SelectionOptions, TrailingNode, type TrailingNodeOptions };
+export { CharacterCount, type CharacterCountOptions, type CharacterCountStorage, Dropcursor, type DropcursorOptions, Focus, type FocusOptions, Gapcursor, History, type HistoryOptions, Placeholder, type PlaceholderOptions, Selection, type SelectionOptions, TrailingNode, type TrailingNodeOptions };

package/dist/index.js

@@ -1,7 +1,106 @@
-// src/drop-cursor/drop-cursor.ts
+// src/character-count/character-count.ts
 import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+var CharacterCount = Extension.create({
+  name: "characterCount",
+  addOptions() {
+    return {
+      limit: null,
+      mode: "textSize",
+      textCounter: (text) => text.length,
+      wordCounter: (text) => text.split(" ").filter((word) => word !== "").length
+    };
+  },
+  addStorage() {
+    return {
+      characters: () => 0,
+      words: () => 0
+    };
+  },
+  onBeforeCreate() {
+    this.storage.characters = (options) => {
+      const node = (options == null ? void 0 : options.node) || this.editor.state.doc;
+      const mode = (options == null ? void 0 : options.mode) || this.options.mode;
+      if (mode === "textSize") {
+        const text = node.textBetween(0, node.content.size, void 0, " ");
+        return this.options.textCounter(text);
+      }
+      return node.nodeSize;
+    };
+    this.storage.words = (options) => {
+      const node = (options == null ? void 0 : options.node) || this.editor.state.doc;
+      const text = node.textBetween(0, node.content.size, " ", " ");
+      return this.options.wordCounter(text);
+    };
+  },
+  addProseMirrorPlugins() {
+    let initialEvaluationDone = false;
+    return [
+      new Plugin({
+        key: new PluginKey("characterCount"),
+        appendTransaction: (transactions, oldState, newState) => {
+          if (initialEvaluationDone) {
+            return;
+          }
+          const limit = this.options.limit;
+          if (limit === null || limit === void 0 || limit === 0) {
+            initialEvaluationDone = true;
+            return;
+          }
+          const initialContentSize = this.storage.characters({ node: newState.doc });
+          if (initialContentSize > limit) {
+            const over = initialContentSize - limit;
+            const from = 0;
+            const to = over;
+            console.warn(
+              `[CharacterCount] Initial content exceeded limit of ${limit} characters. Content was automatically trimmed.`
+            );
+            const tr = newState.tr.deleteRange(from, to);
+            initialEvaluationDone = true;
+            return tr;
+          }
+          initialEvaluationDone = true;
+        },
+        filterTransaction: (transaction, state) => {
+          const limit = this.options.limit;
+          if (!transaction.docChanged || limit === 0 || limit === null || limit === void 0) {
+            return true;
+          }
+          const oldSize = this.storage.characters({ node: state.doc });
+          const newSize = this.storage.characters({ node: transaction.doc });
+          if (newSize <= limit) {
+            return true;
+          }
+          if (oldSize > limit && newSize > limit && newSize <= oldSize) {
+            return true;
+          }
+          if (oldSize > limit && newSize > limit && newSize > oldSize) {
+            return false;
+          }
+          const isPaste = transaction.getMeta("paste");
+          if (!isPaste) {
+            return false;
+          }
+          const pos = transaction.selection.$head.pos;
+          const over = newSize - limit;
+          const from = pos - over;
+          const to = pos;
+          transaction.deleteRange(from, to);
+          const updatedSize = this.storage.characters({ node: transaction.doc });
+          if (updatedSize > limit) {
+            return false;
+          }
+          return true;
+        }
+      })
+    ];
+  }
+});
+
+// src/drop-cursor/drop-cursor.ts
+import { Extension as Extension2 } from "@tiptap/core";
 import { dropCursor } from "@tiptap/pm/dropcursor";
-var Dropcursor = Extension.create({
+var Dropcursor = Extension2.create({
   name: "dropCursor",
   addOptions() {
     return {
@@ -16,10 +115,10 @@ var Dropcursor = Extension.create({
 });
 
 // src/focus/focus.ts
-import { Extension as Extension2 } from "@tiptap/core";
-import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Extension as Extension3 } from "@tiptap/core";
+import { Plugin as Plugin2, PluginKey as PluginKey2 } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
-var Focus = Extension2.create({
+var Focus = Extension3.create({
   name: "focus",
   addOptions() {
     return {
@@ -29,8 +128,8 @@ var Focus = Extension2.create({
   },
   addProseMirrorPlugins() {
     return [
-      new Plugin({
-        key: new PluginKey("focus"),
+      new Plugin2({
+        key: new PluginKey2("focus"),
         props: {
           decorations: ({ doc, selection }) => {
             const { isEditable, isFocused } = this.editor;
@@ -81,9 +180,9 @@ var Focus = Extension2.create({
 });
 
 // src/gap-cursor/gap-cursor.ts
-import { callOrReturn, Extension as Extension3, getExtensionField } from "@tiptap/core";
+import { callOrReturn, Extension as Extension4, getExtensionField } from "@tiptap/core";
 import { gapCursor } from "@tiptap/pm/gapcursor";
-var Gapcursor = Extension3.create({
+var Gapcursor = Extension4.create({
   name: "gapCursor",
   addProseMirrorPlugins() {
     return [gapCursor()];
@@ -101,11 +200,105 @@ var Gapcursor = Extension3.create({
   }
 });
 
-// src/selection/selection.ts
-import { Extension as Extension4 } from "@tiptap/core";
-import { Plugin as Plugin2, PluginKey as PluginKey2 } from "@tiptap/pm/state";
+// src/history/history.ts
+import { Extension as Extension5 } from "@tiptap/core";
+import { history, redo, undo } from "@tiptap/pm/history";
+var History = Extension5.create({
+  name: "history",
+  addOptions() {
+    return {
+      depth: 100,
+      newGroupDelay: 500
+    };
+  },
+  addCommands() {
+    return {
+      undo: () => ({ state, dispatch }) => {
+        return undo(state, dispatch);
+      },
+      redo: () => ({ state, dispatch }) => {
+        return redo(state, dispatch);
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    return [history(this.options)];
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-z": () => this.editor.commands.undo(),
+      "Shift-Mod-z": () => this.editor.commands.redo(),
+      "Mod-y": () => this.editor.commands.redo(),
+      // Russian keyboard layouts
+      "Mod-\u044F": () => this.editor.commands.undo(),
+      "Shift-Mod-\u044F": () => this.editor.commands.redo()
+    };
+  }
+});
+
+// src/placeholder/placeholder.ts
+import { Extension as Extension6, isNodeEmpty } from "@tiptap/core";
+import { Plugin as Plugin3, PluginKey as PluginKey3 } from "@tiptap/pm/state";
 import { Decoration as Decoration2, DecorationSet as DecorationSet2 } from "@tiptap/pm/view";
-var Selection = Extension4.create({
+var Placeholder = Extension6.create({
+  name: "placeholder",
+  addOptions() {
+    return {
+      emptyEditorClass: "is-editor-empty",
+      emptyNodeClass: "is-empty",
+      placeholder: "Write something \u2026",
+      showOnlyWhenEditable: true,
+      showOnlyCurrent: true,
+      includeChildren: false
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      new Plugin3({
+        key: new PluginKey3("placeholder"),
+        props: {
+          decorations: ({ doc, selection }) => {
+            const active = this.editor.isEditable || !this.options.showOnlyWhenEditable;
+            const { anchor } = selection;
+            const decorations = [];
+            if (!active) {
+              return null;
+            }
+            const isEmptyDoc = this.editor.isEmpty;
+            doc.descendants((node, pos) => {
+              const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
+              const isEmpty = !node.isLeaf && isNodeEmpty(node);
+              if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
+                const classes = [this.options.emptyNodeClass];
+                if (isEmptyDoc) {
+                  classes.push(this.options.emptyEditorClass);
+                }
+                const decoration = Decoration2.node(pos, pos + node.nodeSize, {
+                  class: classes.join(" "),
+                  "data-placeholder": typeof this.options.placeholder === "function" ? this.options.placeholder({
+                    editor: this.editor,
+                    node,
+                    pos,
+                    hasAnchor
+                  }) : this.options.placeholder
+                });
+                decorations.push(decoration);
+              }
+              return this.options.includeChildren;
+            });
+            return DecorationSet2.create(doc, decorations);
+          }
+        }
+      })
+    ];
+  }
+});
+
+// src/selection/selection.ts
+import { Extension as Extension7 } 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";
+var Selection = Extension7.create({
   name: "selection",
   addOptions() {
     return {
@@ -115,15 +308,15 @@ var Selection = Extension4.create({
   addProseMirrorPlugins() {
     const { editor, options } = this;
     return [
-      new Plugin2({
-        key: new PluginKey2("selection"),
+      new Plugin4({
+        key: new PluginKey4("selection"),
         props: {
           decorations(state) {
             if (state.selection.empty || editor.isFocused) {
               return null;
             }
-            return DecorationSet2.create(state.doc, [
-              Decoration2.inline(state.selection.from, state.selection.to, {
+            return DecorationSet3.create(state.doc, [
+              Decoration3.inline(state.selection.from, state.selection.to, {
                 class: options.className
               })
             ]);
@@ -135,12 +328,12 @@ var Selection = Extension4.create({
 });
 
 // src/trailing-node/trailing-node.ts
-import { Extension as Extension5 } from "@tiptap/core";
-import { Plugin as Plugin3, PluginKey as PluginKey3 } from "@tiptap/pm/state";
+import { Extension as Extension8 } from "@tiptap/core";
+import { Plugin as Plugin5, PluginKey as PluginKey5 } from "@tiptap/pm/state";
 function nodeEqualsType({ types, node }) {
   return node && Array.isArray(types) && types.includes(node.type) || (node == null ? void 0 : node.type) === types;
 }
-var TrailingNode = Extension5.create({
+var TrailingNode = Extension8.create({
   name: "trailingNode",
   addOptions() {
     return {
@@ -149,10 +342,10 @@ var TrailingNode = Extension5.create({
     };
   },
   addProseMirrorPlugins() {
-    const plugin = new PluginKey3(this.name);
+    const plugin = new PluginKey5(this.name);
     const disabledNodes = Object.entries(this.editor.schema.nodes).map(([, value]) => value).filter((node) => (this.options.notAfter || []).concat(this.options.node).includes(node.name));
     return [
-      new Plugin3({
+      new Plugin5({
         key: plugin,
         appendTransaction: (_, __, state) => {
           const { doc, tr, schema } = state;
@@ -182,9 +375,12 @@ var TrailingNode = Extension5.create({
   }
 });
 export {
+  CharacterCount,
   Dropcursor,
   Focus,
   Gapcursor,
+  History,
+  Placeholder,
   Selection,
   TrailingNode
 };