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

package/src/history/history.ts

@@ -0,0 +1,86 @@
+import { Extension } from '@tiptap/core'
+import { history, redo, undo } from '@tiptap/pm/history'
+
+export 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.
+ */
+export const History = Extension.create<HistoryOptions>({
+  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-я': () => this.editor.commands.undo(),
+      'Shift-Mod-я': () => this.editor.commands.redo(),
+    }
+  },
+})

package/src/history/index.ts

@@ -0,0 +1 @@
+export * from './history.js'

package/src/index.ts

@@ -1,5 +1,8 @@
+export * from './character-count/index.js'
 export * from './drop-cursor/index.js'
 export * from './focus/index.js'
 export * from './gap-cursor/index.js'
+export * from './history/index.js'
+export * from './placeholder/index.js'
 export * from './selection/index.js'
 export * from './trailing-node/index.js'

package/src/placeholder/index.ts

@@ -0,0 +1 @@
+export * from './placeholder.js'

package/src/placeholder/placeholder.ts

@@ -0,0 +1,128 @@
+import { Editor, Extension, isNodeEmpty } from '@tiptap/core'
+import { Node as ProsemirrorNode } from '@tiptap/pm/model'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+
+export 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: ProsemirrorNode; 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
+ */
+export const Placeholder = Extension.create<PlaceholderOptions>({
+  name: 'placeholder',
+
+  addOptions() {
+    return {
+      emptyEditorClass: 'is-editor-empty',
+      emptyNodeClass: 'is-empty',
+      placeholder: 'Write something …',
+      showOnlyWhenEditable: true,
+      showOnlyCurrent: true,
+      includeChildren: false,
+    }
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('placeholder'),
+        props: {
+          decorations: ({ doc, selection }) => {
+            const active = this.editor.isEditable || !this.options.showOnlyWhenEditable
+            const { anchor } = selection
+            const decorations: Decoration[] = []
+
+            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 = Decoration.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 DecorationSet.create(doc, decorations)
+          },
+        },
+      }),
+    ]
+  },
+})