@tiptap/core 2.0.0-beta.99 → 2.0.0-rc.2

package/src/EventEmitter.ts

@@ -1,8 +1,18 @@
-export default class EventEmitter {
+type StringKeyOf<T> = Extract<keyof T, string>
+type CallbackType<
+  T extends Record<string, any>,
+  EventName extends StringKeyOf<T>,
+> = T[EventName] extends any[] ? T[EventName] : [T[EventName]]
+type CallbackFunction<
+  T extends Record<string, any>,
+  EventName extends StringKeyOf<T>,
+> = (...props: CallbackType<T, EventName>) => any
+
+export class EventEmitter<T extends Record<string, any>> {
 
   private callbacks: { [key: string]: Function[] } = {}
 
-  public on(event: string, fn: Function): this {
+  public on<EventName extends StringKeyOf<T>>(event: EventName, fn: CallbackFunction<T, EventName>): this {
     if (!this.callbacks[event]) {
       this.callbacks[event] = []
     }
@@ -12,7 +22,7 @@ export default class EventEmitter {
     return this
   }
 
-  protected emit(event: string, ...args: any): this {
+  protected emit<EventName extends StringKeyOf<T>>(event: EventName, ...args: CallbackType<T, EventName>): this {
     const callbacks = this.callbacks[event]
 
     if (callbacks) {
@@ -22,7 +32,7 @@ export default class EventEmitter {
     return this
   }
 
-  public off(event: string, fn?: Function): this {
+  public off<EventName extends StringKeyOf<T>>(event: EventName, fn?: CallbackFunction<T, EventName>): this {
     const callbacks = this.callbacks[event]
 
     if (callbacks) {

package/src/Extension.ts

@@ -1,229 +1,288 @@
-import { Plugin, Transaction } from 'prosemirror-state'
-import { InputRule } from 'prosemirror-inputrules'
+import { Plugin, Transaction } from '@tiptap/pm/state'
+
+import { ExtensionConfig } from '.'
 import { Editor } from './Editor'
-import { Node } from './Node'
+import { getExtensionField } from './helpers/getExtensionField'
+import { InputRule } from './InputRule'
 import { Mark } from './Mark'
-import mergeDeep from './utilities/mergeDeep'
+import { Node } from './Node'
+import { PasteRule } from './PasteRule'
 import {
+  AnyConfig,
   Extensions,
   GlobalAttributes,
-  RawCommands,
-  ParentConfig,
   KeyboardShortcutCommand,
+  ParentConfig,
+  RawCommands,
 } from './types'
-import { ExtensionConfig } from '.'
+import { callOrReturn } from './utilities/callOrReturn'
+import { mergeDeep } from './utilities/mergeDeep'
 
 declare module '@tiptap/core' {
-  interface ExtensionConfig<Options = any> {
-    [key: string]: any;
+  interface ExtensionConfig<Options = any, Storage = any> {
+    [key: string]: any
 
     /**
      * Name
      */
-    name: string,
+    name: string
 
     /**
      * Priority
      */
-    priority?: number,
+    priority?: number
 
     /**
      * Default options
      */
-    defaultOptions?: Options,
+    defaultOptions?: Options
+
+    /**
+     * Default Options
+     */
+    addOptions?: (this: {
+      name: string
+      parent: Exclude<ParentConfig<ExtensionConfig<Options, Storage>>['addOptions'], undefined>
+    }) => Options
+
+    /**
+     * Default Storage
+     */
+    addStorage?: (this: {
+      name: string
+      options: Options
+      parent: Exclude<ParentConfig<ExtensionConfig<Options, Storage>>['addStorage'], undefined>
+    }) => Storage
 
     /**
      * Global attributes
      */
     addGlobalAttributes?: (this: {
-      name: string,
-      options: Options,
-      parent: ParentConfig<ExtensionConfig<Options>>['addGlobalAttributes'],
-    }) => GlobalAttributes | {},
+      name: string
+      options: Options
+      storage: Storage
+      parent: ParentConfig<ExtensionConfig<Options, Storage>>['addGlobalAttributes']
+    }) => GlobalAttributes | {}
 
     /**
      * Raw
      */
     addCommands?: (this: {
-      name: string,
-      options: Options,
-      editor: Editor,
-      parent: ParentConfig<ExtensionConfig<Options>>['addCommands'],
-    }) => Partial<RawCommands>,
+      name: string
+      options: Options
+      storage: Storage
+      editor: Editor
+      parent: ParentConfig<ExtensionConfig<Options, Storage>>['addCommands']
+    }) => Partial<RawCommands>
 
     /**
      * Keyboard shortcuts
      */
     addKeyboardShortcuts?: (this: {
-      name: string,
-      options: Options,
-      editor: Editor,
-      parent: ParentConfig<ExtensionConfig<Options>>['addKeyboardShortcuts'],
+      name: string
+      options: Options
+      storage: Storage
+      editor: Editor
+      parent: ParentConfig<ExtensionConfig<Options, Storage>>['addKeyboardShortcuts']
     }) => {
-      [key: string]: KeyboardShortcutCommand,
-    },
+      [key: string]: KeyboardShortcutCommand
+    }
 
     /**
      * Input rules
      */
     addInputRules?: (this: {
-      name: string,
-      options: Options,
-      editor: Editor,
-      parent: ParentConfig<ExtensionConfig<Options>>['addInputRules'],
-    }) => InputRule[],
+      name: string
+      options: Options
+      storage: Storage
+      editor: Editor
+      parent: ParentConfig<ExtensionConfig<Options, Storage>>['addInputRules']
+    }) => InputRule[]
 
     /**
      * Paste rules
      */
     addPasteRules?: (this: {
-      name: string,
-      options: Options,
-      editor: Editor,
-      parent: ParentConfig<ExtensionConfig<Options>>['addPasteRules'],
-    }) => Plugin[],
+      name: string
+      options: Options
+      storage: Storage
+      editor: Editor
+      parent: ParentConfig<ExtensionConfig<Options, Storage>>['addPasteRules']
+    }) => PasteRule[]
 
     /**
      * ProseMirror plugins
      */
     addProseMirrorPlugins?: (this: {
-      name: string,
-      options: Options,
-      editor: Editor,
-      parent: ParentConfig<ExtensionConfig<Options>>['addProseMirrorPlugins'],
-    }) => Plugin[],
+      name: string
+      options: Options
+      storage: Storage
+      editor: Editor
+      parent: ParentConfig<ExtensionConfig<Options, Storage>>['addProseMirrorPlugins']
+    }) => Plugin[]
 
     /**
      * Extensions
      */
     addExtensions?: (this: {
-      name: string,
-      options: Options,
-      parent: ParentConfig<ExtensionConfig<Options>>['addExtensions'],
-    }) => Extensions,
+      name: string
+      options: Options
+      storage: Storage
+      parent: ParentConfig<ExtensionConfig<Options, Storage>>['addExtensions']
+    }) => Extensions
 
     /**
      * Extend Node Schema
      */
-    extendNodeSchema?: ((
-      this: {
-        name: string,
-        options: Options,
-        parent: ParentConfig<ExtensionConfig<Options>>['extendNodeSchema'],
-      },
-      extension: Node,
-    ) => Record<string, any>) | null,
+    extendNodeSchema?:
+      | ((
+          this: {
+            name: string
+            options: Options
+            storage: Storage
+            parent: ParentConfig<ExtensionConfig<Options, Storage>>['extendNodeSchema']
+          },
+          extension: Node,
+        ) => Record<string, any>)
+      | null
 
     /**
      * Extend Mark Schema
      */
-    extendMarkSchema?: ((
-      this: {
-        name: string,
-        options: Options,
-        parent: ParentConfig<ExtensionConfig<Options>>['extendMarkSchema'],
-      },
-      extension: Mark,
-    ) => Record<string, any>) | null,
+    extendMarkSchema?:
+      | ((
+          this: {
+            name: string
+            options: Options
+            storage: Storage
+            parent: ParentConfig<ExtensionConfig<Options, Storage>>['extendMarkSchema']
+          },
+          extension: Mark,
+        ) => Record<string, any>)
+      | null
 
     /**
      * The editor is not ready yet.
      */
-    onBeforeCreate?: ((this: {
-      name: string,
-      options: Options,
-      editor: Editor,
-      parent: ParentConfig<ExtensionConfig<Options>>['onBeforeCreate'],
-    }) => void) | null,
+    onBeforeCreate?:
+      | ((this: {
+          name: string
+          options: Options
+          storage: Storage
+          editor: Editor
+          parent: ParentConfig<ExtensionConfig<Options, Storage>>['onBeforeCreate']
+        }) => void)
+      | null
 
     /**
      * The editor is ready.
      */
-    onCreate?: ((this: {
-      name: string,
-      options: Options,
-      editor: Editor,
-      parent: ParentConfig<ExtensionConfig<Options>>['onCreate'],
-    }) => void) | null,
+    onCreate?:
+      | ((this: {
+          name: string
+          options: Options
+          storage: Storage
+          editor: Editor
+          parent: ParentConfig<ExtensionConfig<Options, Storage>>['onCreate']
+        }) => void)
+      | null
 
     /**
      * The content has changed.
      */
-    onUpdate?: ((this: {
-      name: string,
-      options: Options,
-      editor: Editor,
-      parent: ParentConfig<ExtensionConfig<Options>>['onUpdate'],
-    }) => void) | null,
+    onUpdate?:
+      | ((this: {
+          name: string
+          options: Options
+          storage: Storage
+          editor: Editor
+          parent: ParentConfig<ExtensionConfig<Options, Storage>>['onUpdate']
+        }) => void)
+      | null
 
     /**
      * The selection has changed.
      */
-    onSelectionUpdate?: ((this: {
-      name: string,
-      options: Options,
-      editor: Editor,
-      parent: ParentConfig<ExtensionConfig<Options>>['onSelectionUpdate'],
-    }) => void) | null,
+    onSelectionUpdate?:
+      | ((this: {
+          name: string
+          options: Options
+          storage: Storage
+          editor: Editor
+          parent: ParentConfig<ExtensionConfig<Options, Storage>>['onSelectionUpdate']
+        }) => void)
+      | null
 
     /**
      * The editor state has changed.
      */
-    onTransaction?: ((
-      this: {
-        name: string,
-        options: Options,
-        editor: Editor,
-        parent: ParentConfig<ExtensionConfig<Options>>['onTransaction'],
-      },
-      props: {
-        transaction: Transaction,
-      },
-    ) => void) | null,
+    onTransaction?:
+      | ((
+          this: {
+            name: string
+            options: Options
+            storage: Storage
+            editor: Editor
+            parent: ParentConfig<ExtensionConfig<Options, Storage>>['onTransaction']
+          },
+          props: {
+            transaction: Transaction
+          },
+        ) => void)
+      | null
 
     /**
      * The editor is focused.
      */
-    onFocus?: ((
-      this: {
-        name: string,
-        options: Options,
-        editor: Editor,
-        parent: ParentConfig<ExtensionConfig<Options>>['onFocus'],
-      },
-      props: {
-        event: FocusEvent,
-      },
-    ) => void) | null,
+    onFocus?:
+      | ((
+          this: {
+            name: string
+            options: Options
+            storage: Storage
+            editor: Editor
+            parent: ParentConfig<ExtensionConfig<Options, Storage>>['onFocus']
+          },
+          props: {
+            event: FocusEvent
+          },
+        ) => void)
+      | null
 
     /**
      * The editor isn’t focused anymore.
      */
-    onBlur?: ((
-      this: {
-        name: string,
-        options: Options,
-        editor: Editor,
-        parent: ParentConfig<ExtensionConfig<Options>>['onBlur'],
-      },
-      props: {
-        event: FocusEvent,
-      },
-    ) => void) | null,
+    onBlur?:
+      | ((
+          this: {
+            name: string
+            options: Options
+            storage: Storage
+            editor: Editor
+            parent: ParentConfig<ExtensionConfig<Options, Storage>>['onBlur']
+          },
+          props: {
+            event: FocusEvent
+          },
+        ) => void)
+      | null
 
     /**
      * The editor is destroyed.
      */
-    onDestroy?: ((this: {
-      name: string,
-      options: Options,
-      editor: Editor,
-      parent: ParentConfig<ExtensionConfig<Options>>['onDestroy'],
-    }) => void) | null,
+    onDestroy?:
+      | ((this: {
+          name: string
+          options: Options
+          storage: Storage
+          editor: Editor
+          parent: ParentConfig<ExtensionConfig<Options, Storage>>['onDestroy']
+        }) => void)
+      | null
   }
 }
 
-export class Extension<Options = any> {
+export class Extension<Options = any, Storage = any> {
   type = 'extension'
 
   name = 'extension'
@@ -234,23 +293,48 @@ export class Extension<Options = any> {
 
   options: Options
 
+  storage: Storage
+
   config: ExtensionConfig = {
     name: this.name,
     defaultOptions: {},
   }
 
-  constructor(config: Partial<ExtensionConfig<Options>> = {}) {
+  constructor(config: Partial<ExtensionConfig<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: Partial<ExtensionConfig<O>> = {}) {
-    return new Extension<O>(config)
+  static create<O = any, S = any>(config: Partial<ExtensionConfig<O, S>> = {}) {
+    return new Extension<O, S>(config)
   }
 
   configure(options: Partial<Options> = {}) {
@@ -258,25 +342,47 @@ export class Extension<Options = any> {
     // with different calls of `configure`
     const extension = this.extend()
 
-    extension.options = mergeDeep(this.options, options) as Options
+    extension.options = mergeDeep(this.options as Record<string, any>, options) as Options
+
+    extension.storage = callOrReturn(
+      getExtensionField<AnyConfig['addStorage']>(extension, 'addStorage', {
+        name: extension.name,
+        options: extension.options,
+      }),
+    )
 
     return extension
   }
 
-  extend<ExtendedOptions = Options>(extendedConfig: Partial<ExtensionConfig<ExtendedOptions>> = {}) {
-    const extension = new Extension<ExtendedOptions>(extendedConfig)
+  extend<ExtendedOptions = Options, ExtendedStorage = Storage>(
+    extendedConfig: Partial<ExtensionConfig<ExtendedOptions, ExtendedStorage>> = {},
+  ) {
+    const extension = new Extension<ExtendedOptions, ExtendedStorage>(extendedConfig)
 
     extension.parent = this
 
     this.child = extension
 
-    extension.name = extendedConfig.name
-      ? extendedConfig.name
-      : extension.parent.name
+    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 = extendedConfig.defaultOptions
-      ? extendedConfig.defaultOptions
-      : extension.parent.options
+    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
   }