@tiptap/extensions 3.0.0-beta.0

package/src/selection/selection.ts

@@ -0,0 +1,51 @@
+import { Extension, isNodeSelection } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+
+export type SelectionOptions = {
+  /**
+   * The class name that should be added to the selected text.
+   * @default 'selection'
+   * @example 'is-selected'
+   */
+  className: string
+}
+
+/**
+ * This extension allows you to add a class to the selected text.
+ * @see https://www.tiptap.dev/api/extensions/selection
+ */
+export const Selection = Extension.create({
+  name: 'selection',
+
+  addOptions() {
+    return {
+      className: 'selection',
+    }
+  },
+
+  addProseMirrorPlugins() {
+    const { editor, options } = this
+
+    return [
+      new Plugin({
+        key: new PluginKey('selection'),
+        props: {
+          decorations(state) {
+            if (state.selection.empty || editor.isFocused || !editor.isEditable || isNodeSelection(state.selection)) {
+              return null
+            }
+
+            return DecorationSet.create(state.doc, [
+              Decoration.inline(state.selection.from, state.selection.to, {
+                class: options.className,
+              }),
+            ])
+          },
+        },
+      }),
+    ]
+  },
+})
+
+export default Selection

package/src/trailing-node/index.ts

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

package/src/trailing-node/trailing-node.ts

@@ -0,0 +1,84 @@
+import { Extension } from '@tiptap/core'
+import type { Node, NodeType } from '@tiptap/pm/model'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+function nodeEqualsType({ types, node }: { types: NodeType | NodeType[]; node: Node | null | undefined }) {
+  return (node && Array.isArray(types) && types.includes(node.type)) || node?.type === types
+}
+
+/**
+ * Extension based on:
+ * - https://github.com/ueberdosis/tiptap/blob/v1/packages/tiptap-extensions/src/extensions/TrailingNode.js
+ * - https://github.com/remirror/remirror/blob/e0f1bec4a1e8073ce8f5500d62193e52321155b9/packages/prosemirror-trailing-node/src/trailing-node-plugin.ts
+ */
+
+export interface TrailingNodeOptions {
+  /**
+   * The node type that should be inserted at the end of the document.
+   * @note the node will always be added to the `notAfter` lists to
+   * prevent an infinite loop.
+   * @default 'paragraph'
+   */
+  node: string
+  /**
+   * The node types after which the trailing node should not be inserted.
+   * @default ['paragraph']
+   */
+  notAfter?: string | string[]
+}
+
+/**
+ * This extension allows you to add an extra node at the end of the document.
+ * @see https://www.tiptap.dev/api/extensions/trailing-node
+ */
+export const TrailingNode = Extension.create<TrailingNodeOptions>({
+  name: 'trailingNode',
+
+  addOptions() {
+    return {
+      node: 'paragraph',
+      notAfter: [],
+    }
+  },
+
+  addProseMirrorPlugins() {
+    const plugin = new PluginKey(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 Plugin({
+        key: plugin,
+        appendTransaction: (_, __, state) => {
+          const { doc, tr, schema } = state
+          const shouldInsertNodeAtEnd = plugin.getState(state)
+          const endPosition = doc.content.size
+          const type = schema.nodes[this.options.node]
+
+          if (!shouldInsertNodeAtEnd) {
+            return
+          }
+
+          return tr.insert(endPosition, type.create())
+        },
+        state: {
+          init: (_, state) => {
+            const lastNode = state.tr.doc.lastChild
+
+            return !nodeEqualsType({ node: lastNode, types: disabledNodes })
+          },
+          apply: (tr, value) => {
+            if (!tr.docChanged) {
+              return value
+            }
+
+            const lastNode = tr.doc.lastChild
+
+            return !nodeEqualsType({ node: lastNode, types: disabledNodes })
+          },
+        },
+      }),
+    ]
+  },
+})

package/src/undo-redo/index.ts

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

package/src/undo-redo/undo-redo.ts

@@ -0,0 +1,86 @@
+import { Extension } from '@tiptap/core'
+import { history, redo, undo } from '@tiptap/pm/history'
+
+export interface UndoRedoOptions {
+  /**
+   * 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> {
+    undoRedo: {
+      /**
+       * 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/undo-redo
+ *
+ * **Important**: If the `@tiptap/extension-collaboration` package is used, make sure to remove
+ * the `undo-redo` extension, as it is not compatible with the `collaboration` extension.
+ *
+ * `@tiptap/extension-collaboration` uses its own history implementation.
+ */
+export const UndoRedo = Extension.create<UndoRedoOptions>({
+  name: 'undoRedo',
+
+  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(),
+    }
+  },
+})