@tiptap/core 2.9.1 → 2.10.0

package/dist/inputRules/markInputRule.d.ts

@@ -4,7 +4,7 @@ import { ExtendedRegExpMatchArray } from '../types.js';
 /**
  * Build an input rule that adds a mark when the
  * matched text is typed into it.
- * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
  */
 export declare function markInputRule(config: {
     find: InputRuleFinder;

package/dist/inputRules/nodeInputRule.d.ts

@@ -4,7 +4,7 @@ import { ExtendedRegExpMatchArray } from '../types.js';
 /**
  * Build an input rule that adds a node when the
  * matched text is typed into it.
- * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
  */
 export declare function nodeInputRule(config: {
     /**

package/dist/inputRules/textInputRule.d.ts

@@ -2,7 +2,7 @@ import { InputRule, InputRuleFinder } from '../InputRule.js';
 /**
  * Build an input rule that replaces text when the
  * matched text is typed into it.
- * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
  */
 export declare function textInputRule(config: {
     find: InputRuleFinder;

package/dist/inputRules/textblockTypeInputRule.d.ts

@@ -6,7 +6,7 @@ import { ExtendedRegExpMatchArray } from '../types.js';
  * matched text is typed into it. When using a regular expresion you’ll
  * probably want the regexp to start with `^`, so that the pattern can
  * only occur at the start of a textblock.
- * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
  */
 export declare function textblockTypeInputRule(config: {
     find: InputRuleFinder;

package/dist/inputRules/wrappingInputRule.d.ts

@@ -15,7 +15,7 @@ import { ExtendedRegExpMatchArray } from '../types.js';
  * two nodes. You can pass a join predicate, which takes a regular
  * expression match and the node before the wrapped node, and can
  * return a boolean to indicate whether a join should happen.
- * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
  */
 export declare function wrappingInputRule(config: {
     find: InputRuleFinder;

package/dist/pasteRules/markPasteRule.d.ts

@@ -4,7 +4,7 @@ import { ExtendedRegExpMatchArray } from '../types.js';
 /**
  * Build an paste rule that adds a mark when the
  * matched text is pasted into it.
- * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#paste-rules
  */
 export declare function markPasteRule(config: {
     find: PasteRuleFinder;

package/dist/pasteRules/nodePasteRule.d.ts

@@ -4,7 +4,7 @@ import { ExtendedRegExpMatchArray, JSONContent } from '../types.js';
 /**
  * Build an paste rule that adds a node when the
  * matched text is pasted into it.
- * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#paste-rules
  */
 export declare function nodePasteRule(config: {
     find: PasteRuleFinder;

package/dist/pasteRules/textPasteRule.d.ts

@@ -2,7 +2,7 @@ import { PasteRule, PasteRuleFinder } from '../PasteRule.js';
 /**
  * Build an paste rule that replaces text when the
  * matched text is pasted into it.
- * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#paste-rules
  */
 export declare function textPasteRule(config: {
     find: PasteRuleFinder;

package/package.json

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

package/src/Editor.ts

@@ -360,6 +360,11 @@ export class Editor extends EventEmitter<EditorEvents> {
 
     this.view = new EditorView(this.options.element, {
       ...this.options.editorProps,
+      attributes: {
+        // add `role="textbox"` to the editor element
+        role: 'textbox',
+        ...this.options.editorProps?.attributes,
+      },
       dispatchTransaction: this.dispatchTransaction.bind(this),
       state: EditorState.create({
         doc,
@@ -367,14 +372,6 @@ export class Editor extends EventEmitter<EditorEvents> {
       }),
     })
 
-    // add `role="textbox"` to the editor element
-    this.view.dom.setAttribute('role', 'textbox')
-
-    // add aria-label to the editor element
-    if (!this.view.dom.getAttribute('aria-label')) {
-      this.view.dom.setAttribute('aria-label', 'Rich-Text Editor')
-    }
-
     // `editor.view` is not yet available at this time.
     // Therefore we will add all plugins and node views directly afterwards.
     const newState = this.state.reconfigure({

package/src/EventEmitter.ts

@@ -46,6 +46,15 @@ export class EventEmitter<T extends Record<string, any>> {
     return this
   }
 
+  public once<EventName extends StringKeyOf<T>>(event: EventName, fn: CallbackFunction<T, EventName>): this {
+    const onceFn = (...args: CallbackType<T, EventName>) => {
+      this.off(event, onceFn)
+      fn.apply(this, args)
+    }
+
+    return this.on(event, onceFn)
+  }
+
   public removeAllListeners(): void {
     this.callbacks = {}
   }

package/src/Extension.ts

@@ -61,7 +61,7 @@ declare module '@tiptap/core' {
      */
     addOptions?: (this: {
       name: string
-      parent: Exclude<ParentConfig<ExtensionConfig<Options, Storage>>['addOptions'], undefined>
+      parent: ParentConfig<ExtensionConfig<Options, Storage>>['addOptions']
     }) => Options
 
     /**
@@ -76,7 +76,7 @@ declare module '@tiptap/core' {
     addStorage?: (this: {
       name: string
       options: Options
-      parent: Exclude<ParentConfig<ExtensionConfig<Options, Storage>>['addStorage'], undefined>
+      parent: ParentConfig<ExtensionConfig<Options, Storage>>['addStorage']
     }) => Storage
 
     /**

package/src/InputRule.ts

@@ -1,8 +1,10 @@
+import { Fragment, Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { EditorState, Plugin, TextSelection } from '@tiptap/pm/state'
 
 import { CommandManager } from './CommandManager.js'
 import { Editor } from './Editor.js'
 import { createChainableState } from './helpers/createChainableState.js'
+import { getHTMLFromFragment } from './helpers/getHTMLFromFragment.js'
 import { getTextContentFromNodes } from './helpers/getTextContentFromNodes.js'
 import {
   CanCommands,
@@ -14,37 +16,37 @@ import {
 import { isRegExp } from './utilities/isRegExp.js'
 
 export type InputRuleMatch = {
-  index: number
-  text: string
-  replaceWith?: string
-  match?: RegExpMatchArray
-  data?: Record<string, any>
-}
+  index: number;
+  text: string;
+  replaceWith?: string;
+  match?: RegExpMatchArray;
+  data?: Record<string, any>;
+};
 
-export type InputRuleFinder = RegExp | ((text: string) => InputRuleMatch | null)
+export type InputRuleFinder = RegExp | ((text: string) => InputRuleMatch | null);
 
 export class InputRule {
   find: InputRuleFinder
 
   handler: (props: {
-    state: EditorState
-    range: Range
-    match: ExtendedRegExpMatchArray
-    commands: SingleCommands
-    chain: () => ChainedCommands
-    can: () => CanCommands
+    state: EditorState;
+    range: Range;
+    match: ExtendedRegExpMatchArray;
+    commands: SingleCommands;
+    chain: () => ChainedCommands;
+    can: () => CanCommands;
   }) => void | null
 
   constructor(config: {
-    find: InputRuleFinder
+    find: InputRuleFinder;
     handler: (props: {
-      state: EditorState
-      range: Range
-      match: ExtendedRegExpMatchArray
-      commands: SingleCommands
-      chain: () => ChainedCommands
-      can: () => CanCommands
-    }) => void | null
+      state: EditorState;
+      range: Range;
+      match: ExtendedRegExpMatchArray;
+      commands: SingleCommands;
+      chain: () => ChainedCommands;
+      can: () => CanCommands;
+    }) => void | null;
   }) {
     this.find = config.find
     this.handler = config.handler
@@ -85,12 +87,12 @@ const inputRuleMatcherHandler = (
 }
 
 function run(config: {
-  editor: Editor
-  from: number
-  to: number
-  text: string
-  rules: InputRule[]
-  plugin: Plugin
+  editor: Editor;
+  from: number;
+  to: number;
+  text: string;
+  rules: InputRule[];
+  plugin: Plugin;
 }): boolean {
   const {
     editor, from, to, text, rules, plugin,
@@ -184,7 +186,7 @@ export function inputRulesPlugin(props: { editor: Editor; rules: InputRule[] }):
       init() {
         return null
       },
-      apply(tr, prev) {
+      apply(tr, prev, state) {
         const stored = tr.getMeta(plugin)
 
         if (stored) {
@@ -192,12 +194,25 @@ export function inputRulesPlugin(props: { editor: Editor; rules: InputRule[] }):
         }
 
         // if InputRule is triggered by insertContent()
-        const simulatedInputMeta = tr.getMeta('applyInputRules')
+        const simulatedInputMeta = tr.getMeta('applyInputRules') as
+          | undefined
+          | {
+              from: number;
+              text: string | ProseMirrorNode | Fragment;
+            }
         const isSimulatedInput = !!simulatedInputMeta
 
         if (isSimulatedInput) {
           setTimeout(() => {
-            const { from, text } = simulatedInputMeta
+            let { text } = simulatedInputMeta
+
+            if (typeof text === 'string') {
+              text = text as string
+            } else {
+              text = getHTMLFromFragment(Fragment.from(text), state.schema)
+            }
+
+            const { from } = simulatedInputMeta
             const to = from + text.length
 
             run({

package/src/Mark.ts

@@ -64,7 +64,7 @@ declare module '@tiptap/core' {
      */
     addOptions?: (this: {
       name: string
-      parent: Exclude<ParentConfig<MarkConfig<Options, Storage>>['addOptions'], undefined>
+      parent: ParentConfig<MarkConfig<Options, Storage>>['addOptions']
     }) => Options
 
     /**
@@ -79,7 +79,7 @@ declare module '@tiptap/core' {
     addStorage?: (this: {
       name: string
       options: Options
-      parent: Exclude<ParentConfig<MarkConfig<Options, Storage>>['addStorage'], undefined>
+      parent: ParentConfig<MarkConfig<Options, Storage>>['addStorage']
     }) => Storage
 
     /**

package/src/Node.ts

@@ -65,7 +65,7 @@ declare module '@tiptap/core' {
      */
     addOptions?: (this: {
       name: string
-      parent: Exclude<ParentConfig<NodeConfig<Options, Storage>>['addOptions'], undefined>
+      parent: ParentConfig<NodeConfig<Options, Storage>>['addOptions']
     }) => Options
 
     /**
@@ -80,7 +80,7 @@ declare module '@tiptap/core' {
     addStorage?: (this: {
       name: string
       options: Options
-      parent: Exclude<ParentConfig<NodeConfig<Options, Storage>>['addStorage'], undefined>
+      parent: ParentConfig<NodeConfig<Options, Storage>>['addStorage']
     }) => Storage
 
     /**
@@ -595,6 +595,25 @@ declare module '@tiptap/core' {
           editor?: Editor
         }) => NodeSpec['whitespace'])
 
+    /**
+     * Allows a **single** node to be set as linebreak equivalent (e.g. hardBreak).
+     * When converting between block types that have whitespace set to "pre"
+     * and don't support the linebreak node (e.g. codeBlock) and other block types
+     * that do support the linebreak node (e.g. paragraphs) - this node will be used
+     * as the linebreak instead of stripping the newline.
+     *
+     * See [linebreakReplacement](https://prosemirror.net/docs/ref/#model.NodeSpec.linebreakReplacement).
+     */
+    linebreakReplacement?:
+      | NodeSpec['linebreakReplacement']
+      | ((this: {
+          name: string
+          options: Options
+          storage: Storage
+          parent: ParentConfig<NodeConfig<Options, Storage>>['linebreakReplacement']
+          editor?: Editor
+        }) => NodeSpec['linebreakReplacement'])
+
     /**
      * When enabled, enables both
      * [`definingAsContext`](https://prosemirror.net/docs/ref/#model.NodeSpec.definingAsContext) and

package/src/PasteRule.ts

@@ -1,8 +1,10 @@
+import { Fragment, Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { EditorState, Plugin } from '@tiptap/pm/state'
 
 import { CommandManager } from './CommandManager.js'
 import { Editor } from './Editor.js'
 import { createChainableState } from './helpers/createChainableState.js'
+import { getHTMLFromFragment } from './helpers/getHTMLFromFragment.js'
 import {
   CanCommands,
   ChainedCommands,
@@ -14,45 +16,47 @@ import { isNumber } from './utilities/isNumber.js'
 import { isRegExp } from './utilities/isRegExp.js'
 
 export type PasteRuleMatch = {
-  index: number
-  text: string
-  replaceWith?: string
-  match?: RegExpMatchArray
-  data?: Record<string, any>
-}
+  index: number;
+  text: string;
+  replaceWith?: string;
+  match?: RegExpMatchArray;
+  data?: Record<string, any>;
+};
 
-export type PasteRuleFinder = RegExp | ((text: string, event?: ClipboardEvent | null) => PasteRuleMatch[] | null | undefined)
+export type PasteRuleFinder =
+  | RegExp
+  | ((text: string, event?: ClipboardEvent | null) => PasteRuleMatch[] | null | undefined);
 
 /**
  * Paste rules are used to react to pasted content.
- * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#paste-rules
  */
 export class PasteRule {
   find: PasteRuleFinder
 
   handler: (props: {
-    state: EditorState
-    range: Range
-    match: ExtendedRegExpMatchArray
-    commands: SingleCommands
-    chain: () => ChainedCommands
-    can: () => CanCommands
-    pasteEvent: ClipboardEvent | null
-    dropEvent: DragEvent | null
+    state: EditorState;
+    range: Range;
+    match: ExtendedRegExpMatchArray;
+    commands: SingleCommands;
+    chain: () => ChainedCommands;
+    can: () => CanCommands;
+    pasteEvent: ClipboardEvent | null;
+    dropEvent: DragEvent | null;
   }) => void | null
 
   constructor(config: {
-    find: PasteRuleFinder
+    find: PasteRuleFinder;
     handler: (props: {
-      can: () => CanCommands
-      chain: () => ChainedCommands
-      commands: SingleCommands
-      dropEvent: DragEvent | null
-      match: ExtendedRegExpMatchArray
-      pasteEvent: ClipboardEvent | null
-      range: Range
-      state: EditorState
-    }) => void | null
+      can: () => CanCommands;
+      chain: () => ChainedCommands;
+      commands: SingleCommands;
+      dropEvent: DragEvent | null;
+      match: ExtendedRegExpMatchArray;
+      pasteEvent: ClipboardEvent | null;
+      range: Range;
+      state: EditorState;
+    }) => void | null;
   }) {
     this.find = config.find
     this.handler = config.handler
@@ -96,13 +100,13 @@ const pasteRuleMatcherHandler = (
 }
 
 function run(config: {
-  editor: Editor
-  state: EditorState
-  from: number
-  to: number
-  rule: PasteRule
-  pasteEvent: ClipboardEvent | null
-  dropEvent: DragEvent | null
+  editor: Editor;
+  state: EditorState;
+  from: number;
+  to: number;
+  rule: PasteRule;
+  pasteEvent: ClipboardEvent | null;
+  dropEvent: DragEvent | null;
 }): boolean {
   const {
     editor, state, from, to, rule, pasteEvent, dropEvent,
@@ -179,7 +183,13 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
   let isPastedFromProseMirror = false
   let isDroppedFromProseMirror = false
   let pasteEvent = typeof ClipboardEvent !== 'undefined' ? new ClipboardEvent('paste') : null
-  let dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null
+  let dropEvent: DragEvent | null
+
+  try {
+    dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null
+  } catch (e) {
+    dropEvent = null
+  }
 
   const processEvent = ({
     state,
@@ -188,11 +198,11 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
     rule,
     pasteEvt,
   }: {
-    state: EditorState
-    from: number
-    to: { b: number }
-    rule: PasteRule
-    pasteEvt: ClipboardEvent | null
+    state: EditorState;
+    from: number;
+    to: { b: number };
+    rule: PasteRule;
+    pasteEvt: ClipboardEvent | null;
   }) => {
     const tr = state.tr
     const chainableState = createChainableState({
@@ -214,7 +224,11 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
       return
     }
 
-    dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null
+    try {
+      dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null
+    } catch (e) {
+      dropEvent = null
+    }
     pasteEvent = typeof ClipboardEvent !== 'undefined' ? new ClipboardEvent('paste') : null
 
     return tr
@@ -266,7 +280,9 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
         const isDrop = transaction.getMeta('uiEvent') === 'drop' && !isDroppedFromProseMirror
 
         // if PasteRule is triggered by insertContent()
-        const simulatedPasteMeta = transaction.getMeta('applyPasteRules')
+        const simulatedPasteMeta = transaction.getMeta('applyPasteRules') as
+          | undefined
+          | { from: number; text: string | ProseMirrorNode | Fragment }
         const isSimulatedPaste = !!simulatedPasteMeta
 
         if (!isPaste && !isDrop && !isSimulatedPaste) {
@@ -275,8 +291,17 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
 
         // Handle simulated paste
         if (isSimulatedPaste) {
-          const { from, text } = simulatedPasteMeta
+          let { text } = simulatedPasteMeta
+
+          if (typeof text === 'string') {
+            text = text as string
+          } else {
+            text = getHTMLFromFragment(Fragment.from(text), state.schema)
+          }
+
+          const { from } = simulatedPasteMeta
           const to = from + text.length
+
           const pasteEvt = createClipboardPasteEvent(text)
 
           return processEvent({

package/src/commands/insertContent.ts

@@ -1,4 +1,4 @@
-import { ParseOptions } from '@tiptap/pm/model'
+import { Fragment, Node as ProseMirrorNode, ParseOptions } from '@tiptap/pm/model'
 
 import { Content, RawCommands } from '../types.js'
 
@@ -14,7 +14,7 @@ declare module '@tiptap/core' {
         /**
          * The ProseMirror content to insert.
          */
-        value: Content,
+        value: Content | ProseMirrorNode | Fragment,
 
         /**
          * Optional options
@@ -23,17 +23,17 @@ declare module '@tiptap/core' {
           /**
            * Options for parsing the content.
            */
-          parseOptions?: ParseOptions
+          parseOptions?: ParseOptions;
 
           /**
            * Whether to update the selection after inserting the content.
            */
-          updateSelection?: boolean
-          applyInputRules?: boolean
-          applyPasteRules?: boolean
-        },
-      ) => ReturnType
-    }
+          updateSelection?: boolean;
+          applyInputRules?: boolean;
+          applyPasteRules?: boolean;
+        }
+      ) => ReturnType;
+    };
   }
 }
 

package/src/commands/insertContentAt.ts

@@ -20,7 +20,7 @@ declare module '@tiptap/core' {
         /**
          * The ProseMirror content to insert.
          */
-        value: Content,
+        value: Content | ProseMirrorNode | Fragment,
 
         /**
          * Optional options
@@ -132,6 +132,16 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
       // otherwise if it is an array, we have to join it
       if (Array.isArray(value)) {
         newContent = value.map(v => v.text || '').join('')
+      } else if (value instanceof Fragment) {
+        let text = ''
+
+        value.forEach(node => {
+          if (node.text) {
+            text += node.text
+          }
+        })
+
+        newContent = text
       } else if (typeof value === 'object' && !!value && !!value.text) {
         newContent = value.text
       } else {

package/src/commands/setContent.ts

@@ -1,4 +1,4 @@
-import { ParseOptions } from '@tiptap/pm/model'
+import { Fragment, Node as ProseMirrorNode, ParseOptions } from '@tiptap/pm/model'
 
 import { createDocument } from '../helpers/createDocument.js'
 import { Content, RawCommands } from '../types.js'
@@ -17,7 +17,7 @@ declare module '@tiptap/core' {
         /**
          * The new content.
          */
-        content: Content,
+        content: Content | Fragment | ProseMirrorNode,
 
         /**
          * Whether to emit an update event.
@@ -37,10 +37,10 @@ declare module '@tiptap/core' {
           /**
            * Whether to throw an error if the content is invalid.
            */
-           errorOnInvalidContent?: boolean
-        },
-      ) => ReturnType
-    }
+          errorOnInvalidContent?: boolean;
+        }
+      ) => ReturnType;
+    };
   }
 }
 
@@ -66,12 +66,8 @@ export const setContent: RawCommands['setContent'] = (content, emitUpdate = fals
     tr.setMeta('preventUpdate', !emitUpdate)
   }
 
-  return commands.insertContentAt(
-    { from: 0, to: doc.content.size },
-    content,
-    {
-      parseOptions,
-      errorOnInvalidContent: options.errorOnInvalidContent ?? editor.options.enableContentCheck,
-    },
-  )
+  return commands.insertContentAt({ from: 0, to: doc.content.size }, content, {
+    parseOptions,
+    errorOnInvalidContent: options.errorOnInvalidContent ?? editor.options.enableContentCheck,
+  })
 }