@tiptap/core 2.0.0-beta.14 → 2.0.0-beta.143

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.143",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
     "headless",
     "wysiwyg",
-    "text editor"
+    "text editor",
+    "prosemirror"
   ],
   "license": "MIT",
   "funding": {
@@ -17,7 +18,6 @@
   "main": "dist/tiptap-core.cjs.js",
   "umd": "dist/tiptap-core.umd.js",
   "module": "dist/tiptap-core.esm.js",
-  "unpkg": "dist/tiptap-core.bundle.umd.min.js",
   "types": "dist/packages/core/src/index.d.ts",
   "files": [
     "src",
@@ -25,21 +25,24 @@
   ],
   "dependencies": {
     "@types/prosemirror-commands": "^1.0.4",
-    "@types/prosemirror-inputrules": "^1.0.4",
     "@types/prosemirror-keymap": "^1.0.4",
-    "@types/prosemirror-model": "^1.13.0",
+    "@types/prosemirror-model": "^1.13.2",
     "@types/prosemirror-schema-list": "^1.0.3",
-    "@types/prosemirror-state": "^1.2.6",
-    "@types/prosemirror-transform": "^1.1.2",
-    "@types/prosemirror-view": "^1.17.1",
-    "prosemirror-commands": "^1.1.7",
-    "prosemirror-inputrules": "^1.1.3",
-    "prosemirror-keymap": "^1.1.3",
-    "prosemirror-model": "^1.13.3",
-    "prosemirror-schema-list": "^1.1.4",
+    "@types/prosemirror-state": "^1.2.8",
+    "@types/prosemirror-transform": "^1.1.4",
+    "@types/prosemirror-view": "^1.19.1",
+    "prosemirror-commands": "^1.1.12",
+    "prosemirror-keymap": "^1.1.5",
+    "prosemirror-model": "^1.15.0",
+    "prosemirror-schema-list": "^1.1.6",
     "prosemirror-state": "^1.3.4",
-    "prosemirror-transform": "^1.2.12",
-    "prosemirror-view": "^1.18.2"
+    "prosemirror-transform": "^1.3.3",
+    "prosemirror-view": "^1.23.1"
   },
-  "gitHead": "5faf1ab10f1f11b28a6738d0373a224b4bab4b91"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/core"
+  },
+  "gitHead": "7a04a32f1a11de0bc2e39d9c6d15626e158a4e39"
 }

package/src/CommandManager.ts

@@ -1,10 +1,11 @@
 import { EditorState, Transaction } from 'prosemirror-state'
 import { Editor } from './Editor'
+import createChainableState from './helpers/createChainableState'
 import {
   SingleCommands,
   ChainedCommands,
   CanCommands,
-  RawCommands,
+  AnyCommands,
   CommandProps,
 } from './types'
 
@@ -12,26 +13,40 @@ export default class CommandManager {
 
   editor: Editor
 
-  commands: RawCommands
+  rawCommands: AnyCommands
 
-  constructor(editor: Editor, commands: RawCommands) {
-    this.editor = editor
-    this.commands = commands
+  customState?: EditorState
+
+  constructor(props: {
+    editor: Editor,
+    state?: EditorState,
+  }) {
+    this.editor = props.editor
+    this.rawCommands = this.editor.extensionManager.commands
+    this.customState = props.state
+  }
+
+  get hasCustomState(): boolean {
+    return !!this.customState
+  }
+
+  get state(): EditorState {
+    return this.customState || this.editor.state
   }
 
-  public createCommands(): SingleCommands {
-    const { commands, editor } = this
-    const { state, view } = editor
+  get commands(): SingleCommands {
+    const { rawCommands, editor, state } = this
+    const { view } = editor
     const { tr } = state
     const props = this.buildProps(tr)
 
     return Object.fromEntries(Object
-      .entries(commands)
+      .entries(rawCommands)
       .map(([name, command]) => {
-        const method = (...args: any) => {
+        const method = (...args: any[]) => {
           const callback = command(...args)(props)
 
-          if (!tr.getMeta('preventDispatch')) {
+          if (!tr.getMeta('preventDispatch') && !this.hasCustomState) {
             view.dispatch(tr)
           }
 
@@ -39,27 +54,40 @@ export default class CommandManager {
         }
 
         return [name, method]
-      })) as SingleCommands
+      })) as unknown as SingleCommands
+  }
+
+  get chain(): () => ChainedCommands {
+    return () => this.createChain()
+  }
+
+  get can(): () => CanCommands {
+    return () => this.createCan()
   }
 
   public createChain(startTr?: Transaction, shouldDispatch = true): ChainedCommands {
-    const { commands, editor } = this
-    const { state, view } = editor
+    const { rawCommands, editor, state } = this
+    const { view } = editor
     const callbacks: boolean[] = []
     const hasStartTransaction = !!startTr
     const tr = startTr || state.tr
 
     const run = () => {
-      if (!hasStartTransaction && shouldDispatch && !tr.getMeta('preventDispatch')) {
+      if (
+        !hasStartTransaction
+        && shouldDispatch
+        && !tr.getMeta('preventDispatch')
+        && !this.hasCustomState
+      ) {
         view.dispatch(tr)
       }
 
-      return () => callbacks.every(callback => callback === true)
+      return callbacks.every(callback => callback === true)
     }
 
     const chain = {
-      ...Object.fromEntries(Object.entries(commands).map(([name, command]) => {
-        const chainedCommand = (...args: any[]) => {
+      ...Object.fromEntries(Object.entries(rawCommands).map(([name, command]) => {
+        const chainedCommand = (...args: never[]) => {
           const props = this.buildProps(tr, shouldDispatch)
           const callback = command(...args)(props)
 
@@ -77,16 +105,15 @@ export default class CommandManager {
   }
 
   public createCan(startTr?: Transaction): CanCommands {
-    const { commands, editor } = this
-    const { state } = editor
+    const { rawCommands, state } = this
     const dispatch = undefined
     const tr = startTr || state.tr
     const props = this.buildProps(tr, dispatch)
     const formattedCommands = Object.fromEntries(Object
-      .entries(commands)
+      .entries(rawCommands)
       .map(([name, command]) => {
-        return [name, (...args: any[]) => command(...args)({ ...props, dispatch })]
-      })) as SingleCommands
+        return [name, (...args: never[]) => command(...args)({ ...props, dispatch })]
+      })) as unknown as SingleCommands
 
     return {
       ...formattedCommands,
@@ -95,8 +122,8 @@ export default class CommandManager {
   }
 
   public buildProps(tr: Transaction, shouldDispatch = true): CommandProps {
-    const { editor, commands } = this
-    const { state, view } = editor
+    const { rawCommands, editor, state } = this
+    const { view } = editor
 
     if (state.storedMarks) {
       tr.setStoredMarks(state.storedMarks)
@@ -106,7 +133,10 @@ export default class CommandManager {
       tr,
       editor,
       view,
-      state: this.chainableState(tr, state),
+      state: createChainableState({
+        state,
+        transaction: tr,
+      }),
       dispatch: shouldDispatch
         ? () => undefined
         : undefined,
@@ -114,46 +144,14 @@ export default class CommandManager {
       can: () => this.createCan(tr),
       get commands() {
         return Object.fromEntries(Object
-          .entries(commands)
+          .entries(rawCommands)
           .map(([name, command]) => {
-            return [name, (...args: any[]) => command(...args)(props)]
-          })) as SingleCommands
+            return [name, (...args: never[]) => command(...args)(props)]
+          })) as unknown as SingleCommands
       },
     }
 
     return props
   }
 
-  public chainableState(tr: Transaction, state: EditorState): EditorState {
-    let { selection } = tr
-    let { doc } = tr
-    let { storedMarks } = tr
-
-    return {
-      ...state,
-      schema: state.schema,
-      plugins: state.plugins,
-      apply: state.apply.bind(state),
-      applyTransaction: state.applyTransaction.bind(state),
-      reconfigure: state.reconfigure.bind(state),
-      toJSON: state.toJSON.bind(state),
-      get storedMarks() {
-        return storedMarks
-      },
-      get selection() {
-        return selection
-      },
-      get doc() {
-        return doc
-      },
-      get tr() {
-        selection = tr.selection
-        doc = tr.doc
-        storedMarks = tr.storedMarks
-
-        return tr
-      },
-    }
-  }
-
 }

package/src/Editor.ts

@@ -1,26 +1,31 @@
 import {
-  EditorState, Plugin, PluginKey, Transaction,
+  EditorState,
+  Plugin,
+  PluginKey,
+  Transaction,
 } from 'prosemirror-state'
 import { EditorView } from 'prosemirror-view'
-import { Schema, DOMParser, Node } from 'prosemirror-model'
-import elementFromString from './utilities/elementFromString'
-import getNodeAttributes from './helpers/getNodeAttributes'
-import getMarkAttributes from './helpers/getMarkAttributes'
+import { Schema, MarkType, NodeType } from 'prosemirror-model'
+import getAttributes from './helpers/getAttributes'
 import isActive from './helpers/isActive'
-import removeElement from './utilities/removeElement'
+import createDocument from './helpers/createDocument'
 import getHTMLFromFragment from './helpers/getHTMLFromFragment'
+import getText from './helpers/getText'
 import isNodeEmpty from './helpers/isNodeEmpty'
+import getTextSeralizersFromSchema from './helpers/getTextSeralizersFromSchema'
 import createStyleTag from './utilities/createStyleTag'
+import isFunction from './utilities/isFunction'
 import CommandManager from './CommandManager'
 import ExtensionManager from './ExtensionManager'
 import EventEmitter from './EventEmitter'
 import {
   EditorOptions,
-  Content,
   CanCommands,
   ChainedCommands,
+  JSONContent,
   SingleCommands,
-  AnyObject,
+  TextSerializer,
+  EditorEvents,
 } from './types'
 import * as extensions from './extensions'
 import style from './style'
@@ -31,7 +36,7 @@ export interface HTMLElement {
   editor?: Editor
 }
 
-export class Editor extends EventEmitter {
+export class Editor extends EventEmitter<EditorEvents> {
 
   private commandManager!: CommandManager
 
@@ -45,7 +50,7 @@ export class Editor extends EventEmitter {
 
   public isFocused = false
 
-  private resizeObserver!: ResizeObserver
+  public extensionStorage: Record<string, any> = {}
 
   public options: EditorOptions = {
     element: document.createElement('div'),
@@ -58,14 +63,14 @@ export class Editor extends EventEmitter {
     parseOptions: {},
     enableInputRules: true,
     enablePasteRules: true,
+    enableCoreExtensions: true,
+    onBeforeCreate: () => null,
     onCreate: () => null,
     onUpdate: () => null,
     onSelectionUpdate: () => null,
-    onViewUpdate: () => null,
     onTransaction: () => null,
     onFocus: () => null,
     onBlur: () => null,
-    onResize: () => null,
     onDestroy: () => null,
   }
 
@@ -75,50 +80,54 @@ export class Editor extends EventEmitter {
     this.createExtensionManager()
     this.createCommandManager()
     this.createSchema()
+    this.on('beforeCreate', this.options.onBeforeCreate)
+    this.emit('beforeCreate', { editor: this })
     this.createView()
     this.injectCSS()
     this.on('create', this.options.onCreate)
     this.on('update', this.options.onUpdate)
     this.on('selectionUpdate', this.options.onSelectionUpdate)
-    this.on('viewUpdate', this.options.onViewUpdate)
     this.on('transaction', this.options.onTransaction)
     this.on('focus', this.options.onFocus)
     this.on('blur', this.options.onBlur)
     this.on('destroy', this.options.onDestroy)
 
     window.setTimeout(() => {
+      if (this.isDestroyed) {
+        return
+      }
+
       this.commands.focus(this.options.autofocus)
       this.emit('create', { editor: this })
-
-      if (window.ResizeObserver) {
-        this.resizeObserver = new ResizeObserver(() => {
-          this.emit('resize', { editor: this })
-        })
-        this.resizeObserver.observe(this.view.dom)
-      }
     }, 0)
+  }
 
+  /**
+   * Returns the editor storage.
+   */
+  public get storage(): Record<string, any> {
+    return this.extensionStorage
   }
 
   /**
    * An object of all registered commands.
    */
   public get commands(): SingleCommands {
-    return this.commandManager.createCommands()
+    return this.commandManager.commands
   }
 
   /**
    * Create a command chain to call multiple commands at once.
    */
   public chain(): ChainedCommands {
-    return this.commandManager.createChain()
+    return this.commandManager.chain()
   }
 
   /**
    * Check if a command or a command chain can be executed. Without executing it.
    */
   public can(): CanCommands {
-    return this.commandManager.createCan()
+    return this.commandManager.can()
   }
 
   /**
@@ -136,7 +145,20 @@ export class Editor extends EventEmitter {
    * @param options A list of options
    */
   public setOptions(options: Partial<EditorOptions> = {}): void {
-    this.options = { ...this.options, ...options }
+    this.options = {
+      ...this.options,
+      ...options,
+    }
+
+    if (!this.view || !this.state || this.isDestroyed) {
+      return
+    }
+
+    if (this.options.editorProps) {
+      this.view.setProps(this.options.editorProps)
+    }
+
+    this.view.updateState(this.state)
   }
 
   /**
@@ -144,17 +166,18 @@ export class Editor extends EventEmitter {
    */
   public setEditable(editable: boolean): void {
     this.setOptions({ editable })
-
-    if (this.view && this.state && !this.isDestroyed) {
-      this.view.updateState(this.state)
-    }
   }
 
   /**
    * Returns whether the editor is editable.
    */
   public get isEditable(): boolean {
-    return this.view && this.view.editable
+    // since plugins are applied after creating the view
+    // `editable` is always `true` for one tick.
+    // that’s why we also have to check for `options.editable`
+    return this.options.editable
+      && this.view
+      && this.view.editable
   }
 
   /**
@@ -171,7 +194,7 @@ export class Editor extends EventEmitter {
    * @param handlePlugins Control how to merge the plugin into the existing plugins.
    */
   public registerPlugin(plugin: Plugin, handlePlugins?: (newPlugin: Plugin, plugins: Plugin[]) => Plugin[]): void {
-    const plugins = typeof handlePlugins === 'function'
+    const plugins = isFunction(handlePlugins)
       ? handlePlugins(plugin, this.state.plugins)
       : [...this.state.plugins, plugin]
 
@@ -183,7 +206,7 @@ export class Editor extends EventEmitter {
   /**
    * Unregister a ProseMirror plugin.
    *
-   * @param name The plugins name
+   * @param nameOrPluginKey The plugins name
    */
   public unregisterPlugin(nameOrPluginKey: string | PluginKey): void {
     if (this.isDestroyed) {
@@ -207,7 +230,9 @@ export class Editor extends EventEmitter {
    * Creates an extension manager.
    */
   private createExtensionManager(): void {
-    const coreExtensions = Object.entries(extensions).map(([, extension]) => extension)
+    const coreExtensions = this.options.enableCoreExtensions
+      ? Object.values(extensions)
+      : []
     const allExtensions = [...coreExtensions, ...this.options.extensions].filter(extension => {
       return ['extension', 'node', 'mark'].includes(extension?.type)
     })
@@ -219,7 +244,9 @@ export class Editor extends EventEmitter {
    * Creates an command manager.
    */
   private createCommandManager(): void {
-    this.commandManager = new CommandManager(this, this.extensionManager.commands)
+    this.commandManager = new CommandManager({
+      editor: this,
+    })
   }
 
   /**
@@ -237,23 +264,14 @@ export class Editor extends EventEmitter {
       ...this.options.editorProps,
       dispatchTransaction: this.dispatchTransaction.bind(this),
       state: EditorState.create({
-        doc: this.createDocument(this.options.content),
+        doc: createDocument(this.options.content, this.schema, this.options.parseOptions),
       }),
     })
 
     // `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({
-      plugins: [
-        new Plugin({
-          view: () => ({
-            update: () => this.emit('viewUpdate', {
-              editor: this,
-            }),
-          }),
-        }),
-        ...this.extensionManager.plugins,
-      ],
+      plugins: this.extensionManager.plugins,
     })
 
     this.view.updateState(newState)
@@ -275,34 +293,6 @@ export class Editor extends EventEmitter {
     })
   }
 
-  /**
-   * Creates a ProseMirror document.
-   */
-  public createDocument = (content: Content, parseOptions = this.options.parseOptions): Node => {
-    if (content && typeof content === 'object') {
-      try {
-        return this.schema.nodeFromJSON(content)
-      } catch (error) {
-        console.warn(
-          '[tiptap warn]: Invalid content.',
-          'Passed value:',
-          content,
-          'Error:',
-          error,
-        )
-        return this.createDocument('')
-      }
-    }
-
-    if (typeof content === 'string') {
-      return DOMParser
-        .fromSchema(this.schema)
-        .parse(elementFromString(content), parseOptions)
-    }
-
-    return this.createDocument('')
-  }
-
   public isCapturingTransaction = false
 
   private capturedTransaction: Transaction | null = null
@@ -325,10 +315,6 @@ export class Editor extends EventEmitter {
    * @param transaction An editor state transaction
    */
   private dispatchTransaction(transaction: Transaction): void {
-    if (transaction.docChanged && !this.isEditable) {
-      return
-    }
-
     if (this.isCapturingTransaction) {
       if (!this.capturedTransaction) {
         this.capturedTransaction = transaction
@@ -353,6 +339,7 @@ export class Editor extends EventEmitter {
     if (selectionHasChanged) {
       this.emit('selectionUpdate', {
         editor: this,
+        transaction,
       })
     }
 
@@ -363,6 +350,7 @@ export class Editor extends EventEmitter {
       this.emit('focus', {
         editor: this,
         event: focus.event,
+        transaction,
       })
     }
 
@@ -370,6 +358,7 @@ export class Editor extends EventEmitter {
       this.emit('blur', {
         editor: this,
         event: blur.event,
+        transaction,
       })
     }
 
@@ -384,21 +373,10 @@ export class Editor extends EventEmitter {
   }
 
   /**
-   * Get attributes of the currently selected node.
-   *
-   * @param name Name of the node
+   * Get attributes of the currently selected node or mark.
    */
-  public getNodeAttributes(name: string): AnyObject {
-    return getNodeAttributes(this.state, name)
-  }
-
-  /**
-   * Get attributes of the currently selected mark.
-   *
-   * @param name Name of the mark
-   */
-  public getMarkAttributes(name: string): AnyObject {
-    return getMarkAttributes(this.state, name)
+  public getAttributes(nameOrType: string | NodeType | MarkType): Record<string, any> {
+    return getAttributes(this.state, nameOrType)
   }
 
   /**
@@ -424,7 +402,7 @@ export class Editor extends EventEmitter {
   /**
    * Get the document as JSON.
    */
-  public getJSON(): AnyObject {
+  public getJSON(): JSONContent {
     return this.state.doc.toJSON()
   }
 
@@ -432,7 +410,28 @@ export class Editor extends EventEmitter {
    * Get the document as HTML.
    */
   public getHTML(): string {
-    return getHTMLFromFragment(this.state.doc, this.schema)
+    return getHTMLFromFragment(this.state.doc.content, this.schema)
+  }
+
+  /**
+   * Get the document as text.
+   */
+  public getText(options?: {
+    blockSeparator?: string,
+    textSerializers?: Record<string, TextSerializer>,
+  }): string {
+    const {
+      blockSeparator = '\n\n',
+      textSerializers = {},
+    } = options || {}
+
+    return getText(this.state.doc, {
+      blockSeparator,
+      textSerializers: {
+        ...textSerializers,
+        ...getTextSeralizersFromSchema(this.schema),
+      },
+    })
   }
 
   /**
@@ -453,8 +452,6 @@ export class Editor extends EventEmitter {
    * Destroy the editor.
    */
   public destroy(): void {
-    this.resizeObserver?.unobserve(this.view.dom)
-
     this.emit('destroy')
 
     if (this.view) {
@@ -462,7 +459,6 @@ export class Editor extends EventEmitter {
     }
 
     this.removeAllListeners()
-    removeElement(this.css)
   }
 
   /**

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 default 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) {