@tiptap/core 2.2.6 → 2.3.0

package/dist/packages/core/src/Editor.d.ts

@@ -3,10 +3,9 @@ import { EditorState, Plugin, PluginKey, Transaction } from '@tiptap/pm/state';
 import { EditorView } from '@tiptap/pm/view';
 import { EventEmitter } from './EventEmitter.js';
 import { ExtensionManager } from './ExtensionManager.js';
-import * as extensions from './extensions/index.js';
 import { NodePos } from './NodePos.js';
 import { CanCommands, ChainedCommands, EditorEvents, EditorOptions, JSONContent, SingleCommands, TextSerializer } from './types.js';
-export { extensions };
+export * as extensions from './extensions/index.js';
 export interface HTMLElement {
     editor?: Editor;
 }

package/dist/packages/core/src/commands/insertContent.d.ts

@@ -9,6 +9,8 @@ declare module '@tiptap/core' {
             insertContent: (value: Content, options?: {
                 parseOptions?: ParseOptions;
                 updateSelection?: boolean;
+                applyInputRules?: boolean;
+                applyPasteRules?: boolean;
             }) => ReturnType;
         };
     }

package/dist/packages/core/src/commands/insertContentAt.d.ts

@@ -9,6 +9,8 @@ declare module '@tiptap/core' {
             insertContentAt: (position: number | Range, value: Content, options?: {
                 parseOptions?: ParseOptions;
                 updateSelection?: boolean;
+                applyInputRules?: boolean;
+                applyPasteRules?: boolean;
             }) => ReturnType;
         };
     }

package/dist/packages/core/src/extensions/clipboardTextSerializer.d.ts

@@ -1,2 +1,5 @@
 import { Extension } from '../Extension.js';
-export declare const ClipboardTextSerializer: Extension<any, any>;
+export declare type ClipboardTextSerializerOptions = {
+    blockSeparator?: string;
+};
+export declare const ClipboardTextSerializer: Extension<ClipboardTextSerializerOptions, any>;

package/dist/packages/core/src/types.d.ts

@@ -58,6 +58,11 @@ export interface EditorOptions {
     editable: boolean;
     editorProps: EditorProps;
     parseOptions: ParseOptions;
+    coreExtensionOptions?: {
+        clipboardTextSerializer?: {
+            blockSeparator?: string;
+        };
+    };
     enableInputRules: EnableRules;
     enablePasteRules: EnableRules;
     enableCoreExtensions: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "2.2.6",
+  "version": "2.3.0",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -32,7 +32,7 @@
     "dist"
   ],
   "devDependencies": {
-    "@tiptap/pm": "^2.2.6"
+    "@tiptap/pm": "^2.3.0"
   },
   "peerDependencies": {
     "@tiptap/pm": "^2.0.0"

package/src/Editor.ts

@@ -9,7 +9,9 @@ import { EditorView } from '@tiptap/pm/view'
 import { CommandManager } from './CommandManager.js'
 import { EventEmitter } from './EventEmitter.js'
 import { ExtensionManager } from './ExtensionManager.js'
-import * as extensions from './extensions/index.js'
+import {
+  ClipboardTextSerializer, Commands, Editable, FocusEvents, Keymap, Tabindex,
+} from './extensions/index.js'
 import { createDocument } from './helpers/createDocument.js'
 import { getAttributes } from './helpers/getAttributes.js'
 import { getHTMLFromFragment } from './helpers/getHTMLFromFragment.js'
@@ -32,7 +34,7 @@ import {
 import { createStyleTag } from './utilities/createStyleTag.js'
 import { isFunction } from './utilities/isFunction.js'
 
-export { extensions }
+export * as extensions from './extensions/index.js'
 
 export interface HTMLElement {
   editor?: Editor
@@ -63,6 +65,7 @@ export class Editor extends EventEmitter<EditorEvents> {
     editable: true,
     editorProps: {},
     parseOptions: {},
+    coreExtensionOptions: {},
     enableInputRules: true,
     enablePasteRules: true,
     enableCoreExtensions: true,
@@ -235,7 +238,17 @@ export class Editor extends EventEmitter<EditorEvents> {
    * Creates an extension manager.
    */
   private createExtensionManager(): void {
-    const coreExtensions = this.options.enableCoreExtensions ? Object.values(extensions) : []
+
+    const coreExtensions = this.options.enableCoreExtensions ? [
+      Editable,
+      ClipboardTextSerializer.configure({
+        blockSeparator: this.options.coreExtensionOptions?.clipboardTextSerializer?.blockSeparator,
+      }),
+      Commands,
+      FocusEvents,
+      Keymap,
+      Tabindex,
+    ] : []
     const allExtensions = [...coreExtensions, ...this.options.extensions].filter(extension => {
       return ['extension', 'node', 'mark'].includes(extension?.type)
     })

package/src/InputRule.ts

@@ -191,6 +191,26 @@ export function inputRulesPlugin(props: { editor: Editor; rules: InputRule[] }):
           return stored
         }
 
+        // if InputRule is triggered by insertContent()
+        const simulatedInputMeta = tr.getMeta('applyInputRules')
+        const isSimulatedInput = !!simulatedInputMeta
+
+        if (isSimulatedInput) {
+          setTimeout(() => {
+            const { from, text } = simulatedInputMeta
+            const to = from + text.length
+
+            run({
+              editor,
+              from,
+              to,
+              text,
+              rules,
+              plugin,
+            })
+          })
+        }
+
         return tr.selectionSet || tr.docChanged ? null : prev
       },
     },

package/src/NodePos.ts

@@ -136,7 +136,7 @@ export class NodePos {
     this.node.content.forEach((node, offset) => {
       const isBlock = node.isBlock && !node.isTextblock
 
-      const targetPos = this.pos + offset + (isBlock ? 0 : 1)
+      const targetPos = this.pos + offset + 1
       const $pos = this.resolvedPos.doc.resolve(targetPos)
 
       if (!isBlock && $pos.depth <= this.depth) {
@@ -201,7 +201,7 @@ export class NodePos {
     let nodes: NodePos[] = []
 
     // iterate through children recursively finding all nodes which match the selector with the node name
-    if (this.isBlock || !this.children || this.children.length === 0) {
+    if (!this.children || this.children.length === 0) {
       return nodes
     }
 

package/src/PasteRule.ts

@@ -154,6 +154,16 @@ function run(config: {
   return success
 }
 
+const createClipboardPasteEvent = (text: string) => {
+  const event = new ClipboardEvent('paste', {
+    clipboardData: new DataTransfer(),
+  })
+
+  event.clipboardData?.setData('text/html', text)
+
+  return event
+}
+
 /**
  * Create an paste rules plugin. When enabled, it will cause pasted
  * text that matches any of the given rules to trigger the rule’s
@@ -167,6 +177,45 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
   let pasteEvent = typeof ClipboardEvent !== 'undefined' ? new ClipboardEvent('paste') : null
   let dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null
 
+  const processEvent = ({
+    state,
+    from,
+    to,
+    rule,
+    pasteEvt,
+  }: {
+    state: EditorState
+    from: number
+    to: { b: number }
+    rule: PasteRule
+    pasteEvt: ClipboardEvent | null
+  }) => {
+    const tr = state.tr
+    const chainableState = createChainableState({
+      state,
+      transaction: tr,
+    })
+
+    const handler = run({
+      editor,
+      state: chainableState,
+      from: Math.max(from - 1, 0),
+      to: to.b - 1,
+      rule,
+      pasteEvent: pasteEvt,
+      dropEvent,
+    })
+
+    if (!handler || !tr.steps.length) {
+      return
+    }
+
+    dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null
+    pasteEvent = typeof ClipboardEvent !== 'undefined' ? new ClipboardEvent('paste') : null
+
+    return tr
+  }
+
   const plugins = rules.map(rule => {
     return new Plugin({
       // we register a global drag handler to track the current drag source element
@@ -212,45 +261,45 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
         const isPaste = transaction.getMeta('uiEvent') === 'paste' && !isPastedFromProseMirror
         const isDrop = transaction.getMeta('uiEvent') === 'drop' && !isDroppedFromProseMirror
 
-        if (!isPaste && !isDrop) {
+        // if PasteRule is triggered by insertContent()
+        const simulatedPasteMeta = transaction.getMeta('applyPasteRules')
+        const isSimulatedPaste = !!simulatedPasteMeta
+
+        if (!isPaste && !isDrop && !isSimulatedPaste) {
           return
         }
 
-        // stop if there is no changed range
+        // Handle simulated paste
+        if (isSimulatedPaste) {
+          const { from, text } = simulatedPasteMeta
+          const to = from + text.length
+          const pasteEvt = createClipboardPasteEvent(text)
+
+          return processEvent({
+            rule,
+            state,
+            from,
+            to: { b: to },
+            pasteEvt,
+          })
+        }
+
+        // handle actual paste/drop
         const from = oldState.doc.content.findDiffStart(state.doc.content)
         const to = oldState.doc.content.findDiffEnd(state.doc.content)
 
+        // stop if there is no changed range
         if (!isNumber(from) || !to || from === to.b) {
           return
         }
 
-        // build a chainable state
-        // so we can use a single transaction for all paste rules
-        const tr = state.tr
-        const chainableState = createChainableState({
-          state,
-          transaction: tr,
-        })
-
-        const handler = run({
-          editor,
-          state: chainableState,
-          from: Math.max(from - 1, 0),
-          to: to.b - 1,
+        return processEvent({
           rule,
-          pasteEvent,
-          dropEvent,
+          state,
+          from,
+          to,
+          pasteEvt: pasteEvent,
         })
-
-        // stop if there are no changes
-        if (!handler || !tr.steps.length) {
-          return
-        }
-
-        dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null
-        pasteEvent = typeof ClipboardEvent !== 'undefined' ? new ClipboardEvent('paste') : null
-
-        return tr
       },
     })
   })

package/src/commands/insertContent.ts

@@ -13,6 +13,8 @@ declare module '@tiptap/core' {
         options?: {
           parseOptions?: ParseOptions
           updateSelection?: boolean
+          applyInputRules?: boolean
+          applyPasteRules?: boolean
         },
       ) => ReturnType
     }

package/src/commands/insertContentAt.ts

@@ -16,6 +16,8 @@ declare module '@tiptap/core' {
         options?: {
           parseOptions?: ParseOptions
           updateSelection?: boolean
+          applyInputRules?: boolean
+          applyPasteRules?: boolean
         },
       ) => ReturnType
     }
@@ -31,6 +33,8 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
     options = {
       parseOptions: {},
       updateSelection: true,
+      applyInputRules: false,
+      applyPasteRules: false,
       ...options,
     }
 
@@ -76,26 +80,40 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
       }
     }
 
+    let newContent
+
     // if there is only plain text we have to use `insertText`
     // because this will keep the current marks
     if (isOnlyTextContent) {
       // if value is string, we can use it directly
       // otherwise if it is an array, we have to join it
       if (Array.isArray(value)) {
-        tr.insertText(value.map(v => v.text || '').join(''), from, to)
+        newContent = value.map(v => v.text || '').join('')
       } else if (typeof value === 'object' && !!value && !!value.text) {
-        tr.insertText(value.text, from, to)
+        newContent = value.text
       } else {
-        tr.insertText(value as string, from, to)
+        newContent = value as string
       }
+
+      tr.insertText(newContent, from, to)
     } else {
-      tr.replaceWith(from, to, content)
+      newContent = content
+
+      tr.replaceWith(from, to, newContent)
     }
 
     // set cursor at end of inserted content
     if (options.updateSelection) {
       selectionToInsertionEnd(tr, tr.steps.length - 1, -1)
     }
+
+    if (options.applyInputRules) {
+      tr.setMeta('applyInputRules', { from, text: newContent })
+    }
+
+    if (options.applyPasteRules) {
+      tr.setMeta('applyPasteRules', { from, text: newContent })
+    }
   }
 
   return true

package/src/extensions/clipboardTextSerializer.ts

@@ -4,9 +4,19 @@ import { Extension } from '../Extension.js'
 import { getTextBetween } from '../helpers/getTextBetween.js'
 import { getTextSerializersFromSchema } from '../helpers/getTextSerializersFromSchema.js'
 
-export const ClipboardTextSerializer = Extension.create({
+export type ClipboardTextSerializerOptions = {
+  blockSeparator?: string,
+}
+
+export const ClipboardTextSerializer = Extension.create<ClipboardTextSerializerOptions>({
   name: 'clipboardTextSerializer',
 
+  addOptions() {
+    return {
+      blockSeparator: undefined,
+    }
+  },
+
   addProseMirrorPlugins() {
     return [
       new Plugin({
@@ -23,6 +33,9 @@ export const ClipboardTextSerializer = Extension.create({
             const range = { from, to }
 
             return getTextBetween(doc, range, {
+              ...(this.options.blockSeparator !== undefined
+                ? { blockSeparator: this.options.blockSeparator }
+                : {}),
               textSerializers,
             })
           },

package/src/types.ts

@@ -59,6 +59,11 @@ export interface EditorOptions {
   editable: boolean
   editorProps: EditorProps
   parseOptions: ParseOptions
+  coreExtensionOptions?: {
+    clipboardTextSerializer?: {
+      blockSeparator?: string
+    }
+  }
   enableInputRules: EnableRules
   enablePasteRules: EnableRules
   enableCoreExtensions: boolean