@tiptap/core 3.0.0 → 3.0.1

package/src/ExtensionManager.ts

@@ -1,23 +1,30 @@
 import { keymap } from '@tiptap/pm/keymap'
-import { Node as ProsemirrorNode, Schema } from '@tiptap/pm/model'
-import { Plugin } from '@tiptap/pm/state'
-import { Decoration, EditorView } from '@tiptap/pm/view'
+import type { Schema } from '@tiptap/pm/model'
+import type { Plugin } from '@tiptap/pm/state'
+import type { MarkViewConstructor, NodeViewConstructor } from '@tiptap/pm/view'
 
 import type { Editor } from './Editor.js'
-import { getAttributesFromExtensions } from './helpers/getAttributesFromExtensions.js'
-import { getExtensionField } from './helpers/getExtensionField.js'
-import { getNodeType } from './helpers/getNodeType.js'
-import { getRenderedAttributes } from './helpers/getRenderedAttributes.js'
-import { getSchemaByResolvedExtensions } from './helpers/getSchemaByResolvedExtensions.js'
-import { getSchemaTypeByName } from './helpers/getSchemaTypeByName.js'
-import { isExtensionRulesEnabled } from './helpers/isExtensionRulesEnabled.js'
-import { splitExtensions } from './helpers/splitExtensions.js'
-import { Mark, NodeConfig } from './index.js'
-import { InputRule, inputRulesPlugin } from './InputRule.js'
-import { PasteRule, pasteRulesPlugin } from './PasteRule.js'
-import { AnyConfig, Extensions, RawCommands } from './types.js'
+import {
+  flattenExtensions,
+  getAttributesFromExtensions,
+  getExtensionField,
+  getNodeType,
+  getRenderedAttributes,
+  getSchemaByResolvedExtensions,
+  getSchemaTypeByName,
+  isExtensionRulesEnabled,
+  resolveExtensions,
+  sortExtensions,
+  splitExtensions,
+} from './helpers/index.js'
+import { type MarkConfig, type NodeConfig, type Storage, getMarkType, updateMarkViewAttributes } from './index.js'
+import type { InputRule } from './InputRule.js'
+import { inputRulesPlugin } from './InputRule.js'
+import { Mark } from './Mark.js'
+import type { PasteRule } from './PasteRule.js'
+import { pasteRulesPlugin } from './PasteRule.js'
+import type { AnyConfig, Extensions, RawCommands } from './types.js'
 import { callOrReturn } from './utilities/callOrReturn.js'
-import { findDuplicates } from './utilities/findDuplicates.js'
 
 export class ExtensionManager {
   editor: Editor
@@ -30,87 +37,16 @@ export class ExtensionManager {
 
   constructor(extensions: Extensions, editor: Editor) {
     this.editor = editor
-    this.extensions = ExtensionManager.resolve(extensions)
+    this.extensions = resolveExtensions(extensions)
     this.schema = getSchemaByResolvedExtensions(this.extensions, editor)
     this.setupExtensions()
   }
 
-  /**
-   * Returns a flattened and sorted extension list while
-   * also checking for duplicated extensions and warns the user.
-   * @param extensions An array of Tiptap extensions
-   * @returns An flattened and sorted array of Tiptap extensions
-   */
-  static resolve(extensions: Extensions): Extensions {
-    const resolvedExtensions = ExtensionManager.sort(ExtensionManager.flatten(extensions))
-    const duplicatedNames = findDuplicates(resolvedExtensions.map(extension => extension.name))
-
-    if (duplicatedNames.length) {
-      console.warn(
-        `[tiptap warn]: Duplicate extension names found: [${duplicatedNames
-          .map(item => `'${item}'`)
-          .join(', ')}]. This can lead to issues.`,
-      )
-    }
+  static resolve = resolveExtensions
 
-    return resolvedExtensions
-  }
+  static sort = sortExtensions
 
-  /**
-   * Create a flattened array of extensions by traversing the `addExtensions` field.
-   * @param extensions An array of Tiptap extensions
-   * @returns A flattened array of Tiptap extensions
-   */
-  static flatten(extensions: Extensions): Extensions {
-    return (
-      extensions
-        .map(extension => {
-          const context = {
-            name: extension.name,
-            options: extension.options,
-            storage: extension.storage,
-          }
-
-          const addExtensions = getExtensionField<AnyConfig['addExtensions']>(
-            extension,
-            'addExtensions',
-            context,
-          )
-
-          if (addExtensions) {
-            return [extension, ...this.flatten(addExtensions())]
-          }
-
-          return extension
-        })
-        // `Infinity` will break TypeScript so we set a number that is probably high enough
-        .flat(10)
-    )
-  }
-
-  /**
-   * Sort extensions by priority.
-   * @param extensions An array of Tiptap extensions
-   * @returns A sorted array of Tiptap extensions by priority
-   */
-  static sort(extensions: Extensions): Extensions {
-    const defaultPriority = 100
-
-    return extensions.sort((a, b) => {
-      const priorityA = getExtensionField<AnyConfig['priority']>(a, 'priority') || defaultPriority
-      const priorityB = getExtensionField<AnyConfig['priority']>(b, 'priority') || defaultPriority
-
-      if (priorityA > priorityB) {
-        return -1
-      }
-
-      if (priorityA < priorityB) {
-        return 1
-      }
-
-      return 0
-    })
-  }
+  static flatten = flattenExtensions
 
   /**
    * Get all commands from the extensions.
@@ -121,16 +57,12 @@ export class ExtensionManager {
       const context = {
         name: extension.name,
         options: extension.options,
-        storage: extension.storage,
+        storage: this.editor.extensionStorage[extension.name as keyof Storage],
         editor: this.editor,
         type: getSchemaTypeByName(extension.name, this.schema),
       }
 
-      const addCommands = getExtensionField<AnyConfig['addCommands']>(
-        extension,
-        'addCommands',
-        context,
-      )
+      const addCommands = getExtensionField<AnyConfig['addCommands']>(extension, 'addCommands', context)
 
       if (!addCommands) {
         return commands
@@ -155,7 +87,7 @@ export class ExtensionManager {
     // so it feels more natural to run plugins at the end of an array first.
     // That’s why we have to reverse the `extensions` array and sort again
     // based on the `priority` option.
-    const extensions = ExtensionManager.sort([...this.extensions].reverse())
+    const extensions = sortExtensions([...this.extensions].reverse())
 
     const inputRules: InputRule[] = []
     const pasteRules: PasteRule[] = []
@@ -165,7 +97,7 @@ export class ExtensionManager {
         const context = {
           name: extension.name,
           options: extension.options,
-          storage: extension.storage,
+          storage: this.editor.extensionStorage[extension.name as keyof Storage],
           editor,
           type: getSchemaTypeByName(extension.name, this.schema),
         }
@@ -181,7 +113,7 @@ export class ExtensionManager {
         let defaultBindings: Record<string, () => boolean> = {}
 
         // bind exit handling
-        if (extension.type === 'mark' && getExtensionField<AnyConfig['exitable']>(extension, 'exitable', context)) {
+        if (extension.type === 'mark' && getExtensionField<MarkConfig['exitable']>(extension, 'exitable', context)) {
           defaultBindings.ArrowRight = () => Mark.handleExit({ editor, mark: extension as Mark })
         }
 
@@ -199,21 +131,13 @@ export class ExtensionManager {
 
         plugins.push(keyMapPlugin)
 
-        const addInputRules = getExtensionField<AnyConfig['addInputRules']>(
-          extension,
-          'addInputRules',
-          context,
-        )
+        const addInputRules = getExtensionField<AnyConfig['addInputRules']>(extension, 'addInputRules', context)
 
         if (isExtensionRulesEnabled(extension, editor.options.enableInputRules) && addInputRules) {
           inputRules.push(...addInputRules())
         }
 
-        const addPasteRules = getExtensionField<AnyConfig['addPasteRules']>(
-          extension,
-          'addPasteRules',
-          context,
-        )
+        const addPasteRules = getExtensionField<AnyConfig['addPasteRules']>(extension, 'addPasteRules', context)
 
         if (isExtensionRulesEnabled(extension, editor.options.enablePasteRules) && addPasteRules) {
           pasteRules.push(...addPasteRules())
@@ -260,7 +184,7 @@ export class ExtensionManager {
    * Get all node views from the extensions.
    * @returns An object with all node views where the key is the node name and the value is the node view function
    */
-  get nodeViews() {
+  get nodeViews(): Record<string, NodeViewConstructor> {
     const { editor } = this
     const { nodeExtensions } = splitExtensions(this.extensions)
 
@@ -268,41 +192,34 @@ export class ExtensionManager {
       nodeExtensions
         .filter(extension => !!getExtensionField(extension, 'addNodeView'))
         .map(extension => {
-          const extensionAttributes = this.attributes.filter(
-            attribute => attribute.type === extension.name,
-          )
+          const extensionAttributes = this.attributes.filter(attribute => attribute.type === extension.name)
           const context = {
             name: extension.name,
             options: extension.options,
-            storage: extension.storage,
+            storage: this.editor.extensionStorage[extension.name as keyof Storage],
             editor,
             type: getNodeType(extension.name, this.schema),
           }
-          const addNodeView = getExtensionField<NodeConfig['addNodeView']>(
-            extension,
-            'addNodeView',
-            context,
-          )
+          const addNodeView = getExtensionField<NodeConfig['addNodeView']>(extension, 'addNodeView', context)
 
           if (!addNodeView) {
             return []
           }
 
-          const nodeview = (
-            node: ProsemirrorNode,
-            view: EditorView,
-            getPos: (() => number) | boolean,
-            decorations: Decoration[],
-          ) => {
+          const nodeview: NodeViewConstructor = (node, view, getPos, decorations, innerDecorations) => {
             const HTMLAttributes = getRenderedAttributes(node, extensionAttributes)
 
             return addNodeView()({
-              editor,
+              // pass-through
               node,
-              getPos,
+              view,
+              getPos: getPos as () => number,
               decorations,
-              HTMLAttributes,
+              innerDecorations,
+              // tiptap-specific
+              editor,
               extension,
+              HTMLAttributes,
             })
           }
 
@@ -311,19 +228,67 @@ export class ExtensionManager {
     )
   }
 
+  get markViews(): Record<string, MarkViewConstructor> {
+    const { editor } = this
+    const { markExtensions } = splitExtensions(this.extensions)
+
+    return Object.fromEntries(
+      markExtensions
+        .filter(extension => !!getExtensionField(extension, 'addMarkView'))
+        .map(extension => {
+          const extensionAttributes = this.attributes.filter(attribute => attribute.type === extension.name)
+          const context = {
+            name: extension.name,
+            options: extension.options,
+            storage: this.editor.extensionStorage[extension.name as keyof Storage],
+            editor,
+            type: getMarkType(extension.name, this.schema),
+          }
+          const addMarkView = getExtensionField<MarkConfig['addMarkView']>(extension, 'addMarkView', context)
+
+          if (!addMarkView) {
+            return []
+          }
+
+          const markView: MarkViewConstructor = (mark, view, inline) => {
+            const HTMLAttributes = getRenderedAttributes(mark, extensionAttributes)
+
+            return addMarkView()({
+              // pass-through
+              mark,
+              view,
+              inline,
+              // tiptap-specific
+              editor,
+              extension,
+              HTMLAttributes,
+              updateAttributes: (attrs: Record<string, any>) => {
+                updateMarkViewAttributes(mark, editor, attrs)
+              },
+            })
+          }
+
+          return [extension.name, markView]
+        }),
+    )
+  }
+
   /**
    * Go through all extensions, create extension storages & setup marks
    * & bind editor event listener.
    */
   private setupExtensions() {
-    this.extensions.forEach(extension => {
-      // store extension storage in editor
-      this.editor.extensionStorage[extension.name] = extension.storage
+    const extensions = this.extensions
+    // re-initialize the extension storage object instance
+    this.editor.extensionStorage = Object.fromEntries(
+      extensions.map(extension => [extension.name, extension.storage]),
+    ) as unknown as Storage
 
+    extensions.forEach(extension => {
       const context = {
         name: extension.name,
         options: extension.options,
-        storage: extension.storage,
+        storage: this.editor.extensionStorage[extension.name as keyof Storage],
         editor: this.editor,
         type: getSchemaTypeByName(extension.name, this.schema),
       }
@@ -336,11 +301,7 @@ export class ExtensionManager {
         }
       }
 
-      const onBeforeCreate = getExtensionField<AnyConfig['onBeforeCreate']>(
-        extension,
-        'onBeforeCreate',
-        context,
-      )
+      const onBeforeCreate = getExtensionField<AnyConfig['onBeforeCreate']>(extension, 'onBeforeCreate', context)
       const onCreate = getExtensionField<AnyConfig['onCreate']>(extension, 'onCreate', context)
       const onUpdate = getExtensionField<AnyConfig['onUpdate']>(extension, 'onUpdate', context)
       const onSelectionUpdate = getExtensionField<AnyConfig['onSelectionUpdate']>(
@@ -348,11 +309,7 @@ export class ExtensionManager {
         'onSelectionUpdate',
         context,
       )
-      const onTransaction = getExtensionField<AnyConfig['onTransaction']>(
-        extension,
-        'onTransaction',
-        context,
-      )
+      const onTransaction = getExtensionField<AnyConfig['onTransaction']>(extension, 'onTransaction', context)
       const onFocus = getExtensionField<AnyConfig['onFocus']>(extension, 'onFocus', context)
       const onBlur = getExtensionField<AnyConfig['onBlur']>(extension, 'onBlur', context)
       const onDestroy = getExtensionField<AnyConfig['onDestroy']>(extension, 'onDestroy', context)

package/src/InputRule.ts

@@ -1,16 +1,14 @@
-import { EditorState, Plugin, TextSelection } from '@tiptap/pm/state'
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { Fragment } from '@tiptap/pm/model'
+import type { EditorState, TextSelection } from '@tiptap/pm/state'
+import { Plugin } from '@tiptap/pm/state'
 
 import { CommandManager } from './CommandManager.js'
-import { Editor } from './Editor.js'
+import type { Editor } from './Editor.js'
 import { createChainableState } from './helpers/createChainableState.js'
+import { getHTMLFromFragment } from './helpers/getHTMLFromFragment.js'
 import { getTextContentFromNodes } from './helpers/getTextContentFromNodes.js'
-import {
-  CanCommands,
-  ChainedCommands,
-  ExtendedRegExpMatchArray,
-  Range,
-  SingleCommands,
-} from './types.js'
+import type { CanCommands, ChainedCommands, ExtendedRegExpMatchArray, Range, SingleCommands } from './types.js'
 import { isRegExp } from './utilities/isRegExp.js'
 
 export type InputRuleMatch = {
@@ -51,10 +49,7 @@ export class InputRule {
   }
 }
 
-const inputRuleMatcherHandler = (
-  text: string,
-  find: InputRuleFinder,
-): ExtendedRegExpMatchArray | null => {
+const inputRuleMatcherHandler = (text: string, find: InputRuleFinder): ExtendedRegExpMatchArray | null => {
   if (isRegExp(find)) {
     return find.exec(text)
   }
@@ -73,9 +68,7 @@ const inputRuleMatcherHandler = (
 
   if (inputRuleMatch.replaceWith) {
     if (!inputRuleMatch.text.includes(inputRuleMatch.replaceWith)) {
-      console.warn(
-        '[tiptap warn]: "inputRuleMatch.replaceWith" must be part of "inputRuleMatch.text".',
-      )
+      console.warn('[tiptap warn]: "inputRuleMatch.replaceWith" must be part of "inputRuleMatch.text".')
     }
 
     result.push(inputRuleMatch.replaceWith)
@@ -92,9 +85,7 @@ function run(config: {
   rules: InputRule[]
   plugin: Plugin
 }): boolean {
-  const {
-    editor, from, to, text, rules, plugin,
-  } = config
+  const { editor, from, to, text, rules, plugin } = config
   const { view } = editor
 
   if (view.composing) {
@@ -105,9 +96,9 @@ function run(config: {
 
   if (
     // check for code node
-    $from.parent.type.spec.code
+    $from.parent.type.spec.code ||
     // check for code mark
-    || !!($from.nodeBefore || $from.nodeAfter)?.marks.find(mark => mark.type.spec.code)
+    !!($from.nodeBefore || $from.nodeAfter)?.marks.find(mark => mark.type.spec.code)
   ) {
     return false
   }
@@ -184,7 +175,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 +183,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({