@tiptap/core 2.0.0-beta.21 → 2.0.0-beta.210

package/src/Editor.ts

@@ -1,28 +1,33 @@
+import { MarkType, NodeType, Schema } from '@tiptap/pm/model'
 import {
   EditorState, Plugin, PluginKey, Transaction,
-} from 'prosemirror-state'
-import { EditorView } from 'prosemirror-view'
-import { Schema } from 'prosemirror-model'
-import getNodeAttributes from './helpers/getNodeAttributes'
-import getMarkAttributes from './helpers/getMarkAttributes'
-import isActive from './helpers/isActive'
-import removeElement from './utilities/removeElement'
-import createDocument from './helpers/createDocument'
-import getHTMLFromFragment from './helpers/getHTMLFromFragment'
-import isNodeEmpty from './helpers/isNodeEmpty'
-import createStyleTag from './utilities/createStyleTag'
-import CommandManager from './CommandManager'
-import ExtensionManager from './ExtensionManager'
-import EventEmitter from './EventEmitter'
+} from '@tiptap/pm/state'
+import { EditorView } from '@tiptap/pm/view'
+
+import { CommandManager } from './CommandManager'
+import { EventEmitter } from './EventEmitter'
+import { ExtensionManager } from './ExtensionManager'
+import * as extensions from './extensions'
+import { createDocument } from './helpers/createDocument'
+import { getAttributes } from './helpers/getAttributes'
+import { getHTMLFromFragment } from './helpers/getHTMLFromFragment'
+import { getText } from './helpers/getText'
+import { getTextSerializersFromSchema } from './helpers/getTextSerializersFromSchema'
+import { isActive } from './helpers/isActive'
+import { isNodeEmpty } from './helpers/isNodeEmpty'
+import { resolveFocusPosition } from './helpers/resolveFocusPosition'
+import { style } from './style'
 import {
-  EditorOptions,
   CanCommands,
   ChainedCommands,
+  EditorEvents,
+  EditorOptions,
+  JSONContent,
   SingleCommands,
-  AnyObject,
+  TextSerializer,
 } from './types'
-import * as extensions from './extensions'
-import style from './style'
+import { createStyleTag } from './utilities/createStyleTag'
+import { isFunction } from './utilities/isFunction'
 
 export { extensions }
 
@@ -30,8 +35,7 @@ export interface HTMLElement {
   editor?: Editor
 }
 
-export class Editor extends EventEmitter {
-
+export class Editor extends EventEmitter<EditorEvents> {
   private commandManager!: CommandManager
 
   public extensionManager!: ExtensionManager
@@ -44,12 +48,13 @@ export class Editor extends EventEmitter {
 
   public isFocused = false
 
-  private resizeObserver!: ResizeObserver
+  public extensionStorage: Record<string, any> = {}
 
   public options: EditorOptions = {
     element: document.createElement('div'),
     content: '',
     injectCSS: true,
+    injectNonce: undefined,
     extensions: [],
     autofocus: false,
     editable: true,
@@ -57,13 +62,14 @@ export class Editor extends EventEmitter {
     parseOptions: {},
     enableInputRules: true,
     enablePasteRules: true,
+    enableCoreExtensions: true,
+    onBeforeCreate: () => null,
     onCreate: () => null,
     onUpdate: () => null,
     onSelectionUpdate: () => null,
     onTransaction: () => null,
     onFocus: () => null,
     onBlur: () => null,
-    onResize: () => null,
     onDestroy: () => null,
   }
 
@@ -73,6 +79,8 @@ 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)
@@ -84,38 +92,41 @@ export class Editor extends EventEmitter {
     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()
   }
 
   /**
@@ -123,7 +134,7 @@ export class Editor extends EventEmitter {
    */
   private injectCSS(): void {
     if (this.options.injectCSS && document) {
-      this.css = createStyleTag(style)
+      this.css = createStyleTag(style, this.options.injectNonce)
     }
   }
 
@@ -133,17 +144,30 @@ 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)
   }
 
   /**
    * Update editable state of the editor.
    */
-  public setEditable(editable: boolean): void {
+  public setEditable(editable: boolean, emitUpdate = true): void {
     this.setOptions({ editable })
 
-    if (this.view && this.state && !this.isDestroyed) {
-      this.view.updateState(this.state)
+    if (emitUpdate) {
+      this.emit('update', { editor: this, transaction: this.state.tr })
     }
   }
 
@@ -151,7 +175,10 @@ export class Editor extends EventEmitter {
    * 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
   }
 
   /**
@@ -167,9 +194,12 @@ export class Editor extends EventEmitter {
    * @param plugin A ProseMirror plugin
    * @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'
-      ? handlePlugins(plugin, this.state.plugins)
+  public registerPlugin(
+    plugin: Plugin,
+    handlePlugins?: (newPlugin: Plugin, plugins: Plugin[]) => Plugin[],
+  ): void {
+    const plugins = isFunction(handlePlugins)
+      ? handlePlugins(plugin, [...this.state.plugins])
       : [...this.state.plugins, plugin]
 
     const state = this.state.reconfigure({ plugins })
@@ -180,17 +210,15 @@ 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) {
       return
     }
 
-    const name = typeof nameOrPluginKey === 'string'
-      ? `${nameOrPluginKey}$`
-      // @ts-ignore
-      : nameOrPluginKey.key
+    // @ts-ignore
+    const name = typeof nameOrPluginKey === 'string' ? `${nameOrPluginKey}$` : nameOrPluginKey.key
 
     const state = this.state.reconfigure({
       // @ts-ignore
@@ -204,7 +232,7 @@ 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)
     })
@@ -216,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,
+    })
   }
 
   /**
@@ -230,11 +260,15 @@ export class Editor extends EventEmitter {
    * Creates a ProseMirror view.
    */
   private createView(): void {
+    const doc = createDocument(this.options.content, this.schema, this.options.parseOptions)
+    const selection = resolveFocusPosition(doc, this.options.autofocus)
+
     this.view = new EditorView(this.options.element, {
       ...this.options.editorProps,
       dispatchTransaction: this.dispatchTransaction.bind(this),
       state: EditorState.create({
-        doc: createDocument(this.options.content, this.schema, this.options.parseOptions),
+        doc,
+        selection: selection || undefined,
       }),
     })
 
@@ -251,6 +285,7 @@ export class Editor extends EventEmitter {
     // Let’s store the editor instance in the DOM element.
     // So we’ll have access to it for tests.
     const dom = this.view.dom as HTMLElement
+
     dom.editor = this
   }
 
@@ -285,10 +320,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
@@ -313,6 +344,7 @@ export class Editor extends EventEmitter {
     if (selectionHasChanged) {
       this.emit('selectionUpdate', {
         editor: this,
+        transaction,
       })
     }
 
@@ -323,6 +355,7 @@ export class Editor extends EventEmitter {
       this.emit('focus', {
         editor: this,
         event: focus.event,
+        transaction,
       })
     }
 
@@ -330,6 +363,7 @@ export class Editor extends EventEmitter {
       this.emit('blur', {
         editor: this,
         event: blur.event,
+        transaction,
       })
     }
 
@@ -344,21 +378,10 @@ export class Editor extends EventEmitter {
   }
 
   /**
-   * Get attributes of the currently selected node.
-   *
-   * @param name Name of the node
-   */
-  public getNodeAttributes(name: string): AnyObject {
-    return getNodeAttributes(this.state, name)
-  }
-
-  /**
-   * Get attributes of the currently selected mark.
-   *
-   * @param name Name of the mark
+   * Get attributes of the currently selected node or 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)
   }
 
   /**
@@ -367,16 +390,12 @@ export class Editor extends EventEmitter {
    * @param name Name of the node or mark
    * @param attributes Attributes of the node or mark
    */
-  public isActive(name: string, attributes?: {}): boolean;
-  public isActive(attributes: {}): boolean;
+  public isActive(name: string, attributes?: {}): boolean
+  public isActive(attributes: {}): boolean
   public isActive(nameOrAttributes: string, attributesOrUndefined?: {}): boolean {
-    const name = typeof nameOrAttributes === 'string'
-      ? nameOrAttributes
-      : null
+    const name = typeof nameOrAttributes === 'string' ? nameOrAttributes : null
 
-    const attributes = typeof nameOrAttributes === 'string'
-      ? attributesOrUndefined
-      : nameOrAttributes
+    const attributes = typeof nameOrAttributes === 'string' ? attributesOrUndefined : nameOrAttributes
 
     return isActive(this.state, name, attributes)
   }
@@ -384,7 +403,7 @@ export class Editor extends EventEmitter {
   /**
    * Get the document as JSON.
    */
-  public getJSON(): AnyObject {
+  public getJSON(): JSONContent {
     return this.state.doc.toJSON()
   }
 
@@ -392,7 +411,25 @@ 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,
+        ...getTextSerializersFromSchema(this.schema),
+      },
+    })
   }
 
   /**
@@ -404,8 +441,14 @@ export class Editor extends EventEmitter {
 
   /**
    * Get the number of characters for the current document.
+   *
+   * @deprecated
    */
   public getCharacterCount(): number {
+    console.warn(
+      '[tiptap warn]: "editor.getCharacterCount()" is deprecated. Please use "editor.storage.characterCount.characters()" instead.',
+    )
+
     return this.state.doc.content.size - 2
   }
 
@@ -413,8 +456,6 @@ export class Editor extends EventEmitter {
    * Destroy the editor.
    */
   public destroy(): void {
-    this.resizeObserver?.unobserve(this.view.dom)
-
     this.emit('destroy')
 
     if (this.view) {
@@ -422,7 +463,6 @@ export class Editor extends EventEmitter {
     }
 
     this.removeAllListeners()
-    removeElement(this.css)
   }
 
   /**
@@ -432,5 +472,4 @@ export class Editor extends EventEmitter {
     // @ts-ignore
     return !this.view?.docView
   }
-
 }

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