@tiptap/core 2.0.0-beta.17 → 2.0.0-beta.170

package/src/Node.ts

@@ -4,21 +4,27 @@ import {
   Node as ProseMirrorNode,
   NodeType,
 } from 'prosemirror-model'
-import { Command as ProseMirrorCommand } from 'prosemirror-commands'
 import { Plugin, Transaction } from 'prosemirror-state'
-import { InputRule } from 'prosemirror-inputrules'
-import mergeDeep from './utilities/mergeDeep'
+import { InputRule } from './InputRule'
+import { PasteRule } from './PasteRule'
+import { mergeDeep } from './utilities/mergeDeep'
+import { callOrReturn } from './utilities/callOrReturn'
+import { getExtensionField } from './helpers/getExtensionField'
 import {
+  AnyConfig,
+  Extensions,
   Attributes,
   NodeViewRenderer,
   GlobalAttributes,
   RawCommands,
+  ParentConfig,
+  KeyboardShortcutCommand,
 } from './types'
 import { NodeConfig } from '.'
 import { Editor } from './Editor'
 
 declare module '@tiptap/core' {
-  interface NodeConfig<Options = any> {
+  interface NodeConfig<Options = any, Storage = any> {
     [key: string]: any;
 
     /**
@@ -26,123 +32,187 @@ declare module '@tiptap/core' {
      */
     name: string,
 
+    /**
+     * Priority
+     */
+    priority?: number,
+
     /**
      * Default options
      */
     defaultOptions?: Options,
 
+    /**
+     * Default Options
+     */
+    addOptions?: (this: {
+      name: string,
+      parent: Exclude<ParentConfig<NodeConfig<Options, Storage>>['addOptions'], undefined>,
+    }) => Options,
+
+    /**
+     * Default Storage
+     */
+    addStorage?: (this: {
+      name: string,
+      options: Options,
+      parent: Exclude<ParentConfig<NodeConfig<Options, Storage>>['addStorage'], undefined>,
+    }) => Storage,
+
     /**
      * Global attributes
      */
     addGlobalAttributes?: (this: {
+      name: string,
       options: Options,
+      storage: Storage,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['addGlobalAttributes'],
     }) => GlobalAttributes | {},
 
     /**
      * Raw
      */
     addCommands?: (this: {
+      name: string,
       options: Options,
+      storage: Storage,
       editor: Editor,
       type: NodeType,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['addCommands'],
     }) => Partial<RawCommands>,
 
     /**
      * Keyboard shortcuts
      */
     addKeyboardShortcuts?: (this: {
+      name: string,
       options: Options,
+      storage: Storage,
       editor: Editor,
       type: NodeType,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['addKeyboardShortcuts'],
     }) => {
-      [key: string]: ProseMirrorCommand,
+      [key: string]: KeyboardShortcutCommand,
     },
 
     /**
      * Input rules
      */
     addInputRules?: (this: {
+      name: string,
       options: Options,
+      storage: Storage,
       editor: Editor,
       type: NodeType,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['addInputRules'],
     }) => InputRule[],
 
     /**
      * Paste rules
      */
     addPasteRules?: (this: {
+      name: string,
       options: Options,
+      storage: Storage,
       editor: Editor,
       type: NodeType,
-    }) => Plugin[],
+      parent: ParentConfig<NodeConfig<Options, Storage>>['addPasteRules'],
+    }) => PasteRule[],
 
     /**
      * ProseMirror plugins
      */
     addProseMirrorPlugins?: (this: {
+      name: string,
       options: Options,
+      storage: Storage,
       editor: Editor,
       type: NodeType,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['addProseMirrorPlugins'],
     }) => Plugin[],
 
+    /**
+     * Extensions
+     */
+    addExtensions?: (this: {
+      name: string,
+      options: Options,
+      storage: Storage,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['addExtensions'],
+    }) => Extensions,
+
     /**
      * Extend Node Schema
      */
     extendNodeSchema?: ((
       this: {
+        name: string,
         options: Options,
+        storage: Storage,
+        parent: ParentConfig<NodeConfig<Options, Storage>>['extendNodeSchema'],
       },
       extension: Node,
-    ) => {
-      [key: string]: any,
-    }) | null,
+    ) => Record<string, any>) | null,
 
     /**
      * Extend Mark Schema
      */
     extendMarkSchema?: ((
       this: {
+        name: string,
         options: Options,
+        storage: Storage,
+        parent: ParentConfig<NodeConfig<Options, Storage>>['extendMarkSchema'],
       },
       extension: Node,
-    ) => {
-      [key: string]: any,
-    }) | null,
+    ) => Record<string, any>) | null,
 
     /**
-     * The editor is ready.
+     * The editor is not ready yet.
      */
-    onCreate?: ((this: {
+    onBeforeCreate?: ((this: {
+      name: string,
       options: Options,
+      storage: Storage,
       editor: Editor,
       type: NodeType,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['onBeforeCreate'],
     }) => void) | null,
 
     /**
-     * The content has changed.
+     * The editor is ready.
      */
-    onUpdate?: ((this: {
+    onCreate?: ((this: {
+      name: string,
       options: Options,
+      storage: Storage,
       editor: Editor,
       type: NodeType,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['onCreate'],
     }) => void) | null,
 
     /**
-     * The selection has changed.
+     * The content has changed.
      */
-     onSelectionUpdate?: ((this: {
+    onUpdate?: ((this: {
+      name: string,
       options: Options,
+      storage: Storage,
       editor: Editor,
       type: NodeType,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['onUpdate'],
     }) => void) | null,
 
     /**
-     * The view has changed.
+     * The selection has changed.
      */
-     onViewUpdate?: ((this: {
+    onSelectionUpdate?: ((this: {
+      name: string,
       options: Options,
+      storage: Storage,
       editor: Editor,
       type: NodeType,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['onSelectionUpdate'],
     }) => void) | null,
 
     /**
@@ -150,9 +220,12 @@ declare module '@tiptap/core' {
      */
     onTransaction?: ((
       this: {
+        name: string,
         options: Options,
+        storage: Storage,
         editor: Editor,
         type: NodeType,
+        parent: ParentConfig<NodeConfig<Options, Storage>>['onTransaction'],
       },
       props: {
         transaction: Transaction,
@@ -164,9 +237,12 @@ declare module '@tiptap/core' {
      */
     onFocus?: ((
       this: {
+        name: string,
         options: Options,
+        storage: Storage,
         editor: Editor,
         type: NodeType,
+        parent: ParentConfig<NodeConfig<Options, Storage>>['onFocus'],
       },
       props: {
         event: FocusEvent,
@@ -178,9 +254,12 @@ declare module '@tiptap/core' {
      */
     onBlur?: ((
       this: {
+        name: string,
         options: Options,
+        storage: Storage,
         editor: Editor,
         type: NodeType,
+        parent: ParentConfig<NodeConfig<Options, Storage>>['onBlur'],
       },
       props: {
         event: FocusEvent,
@@ -191,18 +270,24 @@ declare module '@tiptap/core' {
      * The editor is destroyed.
      */
     onDestroy?: ((this: {
+      name: string,
       options: Options,
+      storage: Storage,
       editor: Editor,
       type: NodeType,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['onDestroy'],
     }) => void) | null,
 
     /**
      * Node View
      */
     addNodeView?: ((this: {
+      name: string,
       options: Options,
+      storage: Storage,
       editor: Editor,
       type: NodeType,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['addNodeView'],
     }) => NodeViewRenderer) | null,
 
     /**
@@ -213,59 +298,122 @@ declare module '@tiptap/core' {
     /**
      * Content
      */
-    content?: NodeSpec['content'] | ((this: { options: Options }) => NodeSpec['content']),
+    content?: NodeSpec['content'] | ((this: {
+      name: string,
+      options: Options,
+      storage: Storage,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['content'],
+    }) => NodeSpec['content']),
 
     /**
      * Marks
      */
-    marks?: NodeSpec['marks'] | ((this: { options: Options }) => NodeSpec['marks']),
+    marks?: NodeSpec['marks'] | ((this: {
+      name: string,
+      options: Options,
+      storage: Storage,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['marks'],
+    }) => NodeSpec['marks']),
 
     /**
      * Group
      */
-    group?: NodeSpec['group'] | ((this: { options: Options }) => NodeSpec['group']),
+    group?: NodeSpec['group'] | ((this: {
+      name: string,
+      options: Options,
+      storage: Storage,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['group'],
+    }) => NodeSpec['group']),
 
     /**
      * Inline
      */
-    inline?: NodeSpec['inline'] | ((this: { options: Options }) => NodeSpec['inline']),
+    inline?: NodeSpec['inline'] | ((this: {
+      name: string,
+      options: Options,
+      storage: Storage,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['inline'],
+    }) => NodeSpec['inline']),
 
     /**
      * Atom
      */
-    atom?: NodeSpec['atom'] | ((this: { options: Options }) => NodeSpec['atom']),
+    atom?: NodeSpec['atom'] | ((this: {
+      name: string,
+      options: Options,
+      storage: Storage,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['atom'],
+    }) => NodeSpec['atom']),
 
     /**
      * Selectable
      */
-    selectable?: NodeSpec['selectable'] | ((this: { options: Options }) => NodeSpec['selectable']),
+    selectable?: NodeSpec['selectable'] | ((this: {
+      name: string,
+      options: Options,
+      storage: Storage,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['selectable'],
+    }) => NodeSpec['selectable']),
 
     /**
      * Draggable
      */
-    draggable?: NodeSpec['draggable'] | ((this: { options: Options }) => NodeSpec['draggable']),
+    draggable?: NodeSpec['draggable'] | ((this: {
+      name: string,
+      options: Options,
+      storage: Storage,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['draggable'],
+    }) => NodeSpec['draggable']),
 
     /**
      * Code
      */
-    code?: NodeSpec['code'] | ((this: { options: Options }) => NodeSpec['code']),
+    code?: NodeSpec['code'] | ((this: {
+      name: string,
+      options: Options,
+      storage: Storage,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['code'],
+    }) => NodeSpec['code']),
+
+    /**
+     * Whitespace
+     */
+    whitespace?: NodeSpec['whitespace'] | ((this: {
+      name: string,
+      options: Options,
+      storage: Storage,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['whitespace'],
+    }) => NodeSpec['whitespace']),
 
     /**
      * Defining
      */
-    defining?: NodeSpec['defining'] | ((this: { options: Options }) => NodeSpec['defining']),
+    defining?: NodeSpec['defining'] | ((this: {
+      name: string,
+      options: Options,
+      storage: Storage,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['defining'],
+    }) => NodeSpec['defining']),
 
     /**
      * Isolating
      */
-    isolating?: NodeSpec['isolating'] | ((this: { options: Options }) => NodeSpec['isolating']),
+    isolating?: NodeSpec['isolating'] | ((this: {
+      name: string,
+      options: Options,
+      storage: Storage,
+      parent: ParentConfig<NodeConfig<Options, Storage>>['isolating'],
+    }) => NodeSpec['isolating']),
 
     /**
      * Parse HTML
      */
     parseHTML?: (
       this: {
+        name: string,
         options: Options,
+        storage: Storage,
+        parent: ParentConfig<NodeConfig<Options, Storage>>['parseHTML'],
       },
     ) => NodeSpec['parseDOM'],
 
@@ -274,11 +422,14 @@ declare module '@tiptap/core' {
      */
     renderHTML?: ((
       this: {
+        name: string,
         options: Options,
+        storage: Storage,
+        parent: ParentConfig<NodeConfig<Options, Storage>>['renderHTML'],
       },
       props: {
         node: ProseMirrorNode,
-        HTMLAttributes: { [key: string]: any },
+        HTMLAttributes: Record<string, any>,
       }
     ) => DOMOutputSpec) | null,
 
@@ -287,12 +438,16 @@ declare module '@tiptap/core' {
      */
     renderText?: ((
       this: {
+        name: string,
         options: Options,
-        editor: Editor,
-        type: NodeType,
+        storage: Storage,
+        parent: ParentConfig<NodeConfig<Options, Storage>>['renderText'],
       },
       props: {
         node: ProseMirrorNode,
+        pos: number,
+        parent: ProseMirrorNode,
+        index: number,
       }
     ) => string) | null,
 
@@ -301,51 +456,123 @@ declare module '@tiptap/core' {
      */
     addAttributes?: (
       this: {
+        name: string,
         options: Options,
+        storage: Storage,
+        parent: ParentConfig<NodeConfig<Options, Storage>>['addAttributes'],
       },
     ) => Attributes | {},
   }
 }
 
-export class Node<Options = any> {
+export class Node<Options = any, Storage = any> {
   type = 'node'
 
+  name = 'node'
+
+  parent: Node | null = null
+
+  child: Node | null = null
+
+  options: Options
+
+  storage: Storage
+
   config: NodeConfig = {
-    name: 'node',
+    name: this.name,
     defaultOptions: {},
   }
 
-  options!: Options
-
-  constructor(config: NodeConfig<Options>) {
+  constructor(config: Partial<NodeConfig<Options, Storage>> = {}) {
     this.config = {
       ...this.config,
       ...config,
     }
 
+    this.name = this.config.name
+
+    if (config.defaultOptions) {
+      console.warn(`[tiptap warn]: BREAKING CHANGE: "defaultOptions" is deprecated. Please use "addOptions" instead. Found in extension: "${this.name}".`)
+    }
+
+    // TODO: remove `addOptions` fallback
     this.options = this.config.defaultOptions
+
+    if (this.config.addOptions) {
+      this.options = callOrReturn(getExtensionField<AnyConfig['addOptions']>(
+        this,
+        'addOptions',
+        {
+          name: this.name,
+        },
+      ))
+    }
+
+    this.storage = callOrReturn(getExtensionField<AnyConfig['addStorage']>(
+      this,
+      'addStorage',
+      {
+        name: this.name,
+        options: this.options,
+      },
+    )) || {}
   }
 
-  static create<O>(config: NodeConfig<O>) {
-    return new Node<O>(config)
+  static create<O = any, S = any>(config: Partial<NodeConfig<O, S>> = {}) {
+    return new Node<O, S>(config)
   }
 
   configure(options: Partial<Options> = {}) {
-    return Node
-      .create<Options>(this.config as NodeConfig<Options>)
-      .#configure(options)
+    // return a new instance so we can use the same extension
+    // with different calls of `configure`
+    const extension = this.extend()
+
+    extension.options = mergeDeep(this.options, options) as Options
+
+    extension.storage = callOrReturn(getExtensionField<AnyConfig['addStorage']>(
+      extension,
+      'addStorage',
+      {
+        name: extension.name,
+        options: extension.options,
+      },
+    ))
+
+    return extension
   }
 
-  #configure = (options: Partial<Options>) => {
-    this.options = mergeDeep(this.config.defaultOptions, options) as Options
+  extend<ExtendedOptions = Options, ExtendedStorage = Storage>(extendedConfig: Partial<NodeConfig<ExtendedOptions, ExtendedStorage>> = {}) {
+    const extension = new Node<ExtendedOptions, ExtendedStorage>(extendedConfig)
 
-    return this
-  }
+    extension.parent = this
 
-  extend<ExtendedOptions = Options>(extendedConfig: Partial<NodeConfig<ExtendedOptions>>) {
-    return new Node<ExtendedOptions>({
-      ...this.config,
-      ...extendedConfig,
-    } as NodeConfig<ExtendedOptions>)
+    this.child = extension
+
+    extension.name = extendedConfig.name
+      ? extendedConfig.name
+      : extension.parent.name
+
+    if (extendedConfig.defaultOptions) {
+      console.warn(`[tiptap warn]: BREAKING CHANGE: "defaultOptions" is deprecated. Please use "addOptions" instead. Found in extension: "${extension.name}".`)
+    }
+
+    extension.options = callOrReturn(getExtensionField<AnyConfig['addOptions']>(
+      extension,
+      'addOptions',
+      {
+        name: extension.name,
+      },
+    ))
+
+    extension.storage = callOrReturn(getExtensionField<AnyConfig['addStorage']>(
+      extension,
+      'addStorage',
+      {
+        name: extension.name,
+        options: extension.options,
+      },
+    ))
+
+    return extension
   }
 }