@tiptap/core 3.0.0-next.3 → 3.0.0-next.5

package/src/ExtensionManager.ts

@@ -1,24 +1,28 @@
 import { keymap } from '@tiptap/pm/keymap'
 import { Schema } from '@tiptap/pm/model'
 import { Plugin } from '@tiptap/pm/state'
-import { NodeViewConstructor } from '@tiptap/pm/view'
+import { 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 type { NodeConfig } from './index.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 } from './index.js'
 import { InputRule, inputRulesPlugin } from './InputRule.js'
 import { Mark } from './Mark.js'
 import { PasteRule, pasteRulesPlugin } from './PasteRule.js'
 import { AnyConfig, Extensions, RawCommands } from './types.js'
 import { callOrReturn } from './utilities/callOrReturn.js'
-import { findDuplicates } from './utilities/findDuplicates.js'
 
 export class ExtensionManager {
   editor: Editor
@@ -31,87 +35,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.
@@ -122,16 +55,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
@@ -156,7 +85,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[] = []
@@ -166,7 +95,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),
         }
@@ -182,7 +111,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 })
         }
 
@@ -200,21 +129,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())
@@ -269,33 +190,21 @@ 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: NodeViewConstructor = (
-            node,
-            view,
-            getPos,
-            decorations,
-            innerDecorations,
-          ) => {
+          const nodeview: NodeViewConstructor = (node, view, getPos, decorations, innerDecorations) => {
             const HTMLAttributes = getRenderedAttributes(node, extensionAttributes)
 
             return addNodeView()({
@@ -317,19 +226,64 @@ 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,
+            })
+          }
+
+          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),
       }
@@ -342,11 +296,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']>(
@@ -354,11 +304,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

@@ -6,57 +6,48 @@ 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,
-  ChainedCommands,
-  ExtendedRegExpMatchArray,
-  Range,
-  SingleCommands,
-} from './types.js'
+import { CanCommands, ChainedCommands, ExtendedRegExpMatchArray, Range, SingleCommands } from './types.js'
 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
   }
 }
 
-const inputRuleMatcherHandler = (
-  text: string,
-  find: InputRuleFinder,
-): ExtendedRegExpMatchArray | null => {
+const inputRuleMatcherHandler = (text: string, find: InputRuleFinder): ExtendedRegExpMatchArray | null => {
   if (isRegExp(find)) {
     return find.exec(text)
   }
@@ -75,9 +66,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)
@@ -87,16 +76,14 @@ 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,
-  } = config
+  const { editor, from, to, text, rules, plugin } = config
   const { view } = editor
 
   if (view.composing) {
@@ -107,9 +94,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
   }
@@ -197,8 +184,8 @@ export function inputRulesPlugin(props: { editor: Editor; rules: InputRule[] }):
         const simulatedInputMeta = tr.getMeta('applyInputRules') as
           | undefined
           | {
-              from: number;
-              text: string | ProseMirrorNode | Fragment;
+              from: number
+              text: string | ProseMirrorNode | Fragment
             }
         const isSimulatedInput = !!simulatedInputMeta