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

package/dist/packages/core/src/utilities/mergeAttributes.d.ts

@@ -1 +1 @@
-export default function mergeAttributes(...objects: Record<string, any>[]): Record<string, any>;
+export declare function mergeAttributes(...objects: Record<string, any>[]): Record<string, any>;

package/dist/packages/core/src/utilities/mergeDeep.d.ts

@@ -1 +1 @@
-export default function mergeDeep(target: Record<string, any>, source: Record<string, any>): Record<string, any>;
+export declare function mergeDeep(target: Record<string, any>, source: Record<string, any>): Record<string, any>;

package/dist/packages/core/src/utilities/minMax.d.ts

@@ -1 +1 @@
-export default function minMax(value?: number, min?: number, max?: number): number;
+export declare function minMax(value?: number, min?: number, max?: number): number;

package/dist/packages/core/src/utilities/objectIncludes.d.ts

@@ -3,4 +3,6 @@
  * @param object1 Object
  * @param object2 Object
  */
-export default function objectIncludes(object1: Record<string, any>, object2: Record<string, any>): boolean;
+export declare function objectIncludes(object1: Record<string, any>, object2: Record<string, any>, options?: {
+    strict: boolean;
+}): boolean;

package/dist/packages/core/src/utilities/removeDuplicates.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Removes duplicated values within an array.
+ * Supports numbers, strings and objects.
+ */
+export declare function removeDuplicates<T>(array: T[], by?: {
+    (value: any, replacer?: ((this: any, key: string, value: any) => any) | undefined, space?: string | number | undefined): string;
+    (value: any, replacer?: (string | number)[] | null | undefined, space?: string | number | undefined): string;
+}): T[];

package/package.json

@@ -1,49 +1,50 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "2.0.0-beta.99",
+  "version": "2.0.0-rc.1",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
     "headless",
     "wysiwyg",
-    "text editor"
+    "text editor",
+    "prosemirror"
   ],
   "license": "MIT",
   "funding": {
     "type": "github",
     "url": "https://github.com/sponsors/ueberdosis"
   },
-  "main": "dist/tiptap-core.cjs.js",
-  "umd": "dist/tiptap-core.umd.js",
-  "module": "dist/tiptap-core.esm.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/packages/core/src/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "umd": "dist/index.umd.js",
   "types": "dist/packages/core/src/index.d.ts",
   "files": [
     "src",
     "dist"
   ],
-  "dependencies": {
-    "@types/prosemirror-commands": "^1.0.4",
-    "@types/prosemirror-inputrules": "^1.0.4",
-    "@types/prosemirror-keymap": "^1.0.4",
-    "@types/prosemirror-model": "^1.13.1",
-    "@types/prosemirror-schema-list": "^1.0.3",
-    "@types/prosemirror-state": "^1.2.7",
-    "@types/prosemirror-transform": "^1.1.4",
-    "@types/prosemirror-view": "^1.17.2",
-    "prosemirror-commands": "^1.1.10",
-    "prosemirror-inputrules": "^1.1.3",
-    "prosemirror-keymap": "^1.1.3",
-    "prosemirror-model": "^1.14.3",
-    "prosemirror-schema-list": "^1.1.5",
-    "prosemirror-state": "^1.3.4",
-    "prosemirror-transform": "^1.3.2",
-    "prosemirror-view": "^1.19.0"
+  "peerDependencies": {
+    "@tiptap/pm": "2.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@tiptap/pm": "2.0.0-rc.1"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/ueberdosis/tiptap",
     "directory": "packages/core"
   },
-  "gitHead": "903220b86bc7f20df420410e5c9a70c79b1171fc"
-}
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && rollup -c"
+  }
+}

package/src/CommandManager.ts

@@ -1,37 +1,44 @@
-import { EditorState, Transaction } from 'prosemirror-state'
+import { EditorState, Transaction } from '@tiptap/pm/state'
+
 import { Editor } from './Editor'
+import { createChainableState } from './helpers/createChainableState'
 import {
-  SingleCommands,
-  ChainedCommands,
-  CanCommands,
-  AnyCommands,
-  CommandProps,
+  AnyCommands, CanCommands, ChainedCommands, CommandProps, SingleCommands,
 } from './types'
 
-export default class CommandManager {
-
+export class CommandManager {
   editor: Editor
 
-  commands: AnyCommands
+  rawCommands: AnyCommands
+
+  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
+  }
 
-  constructor(editor: Editor, commands: AnyCommands) {
-    this.editor = editor
-    this.commands = commands
+  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)
-      .map(([name, command]) => {
+    return Object.fromEntries(
+      Object.entries(rawCommands).map(([name, command]) => {
         const method = (...args: any[]) => {
           const callback = command(...args)(props)
 
-          if (!tr.getMeta('preventDispatch')) {
+          if (!tr.getMeta('preventDispatch') && !this.hasCustomState) {
             view.dispatch(tr)
           }
 
@@ -39,18 +46,32 @@ export default class CommandManager {
         }
 
         return [name, method]
-      })) as unknown 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)
       }
 
@@ -58,18 +79,20 @@ export default class CommandManager {
     }
 
     const chain = {
-      ...Object.fromEntries(Object.entries(commands).map(([name, command]) => {
-        const chainedCommand = (...args: never[]) => {
-          const props = this.buildProps(tr, shouldDispatch)
-          const callback = command(...args)(props)
+      ...Object.fromEntries(
+        Object.entries(rawCommands).map(([name, command]) => {
+          const chainedCommand = (...args: never[]) => {
+            const props = this.buildProps(tr, shouldDispatch)
+            const callback = command(...args)(props)
 
-          callbacks.push(callback)
+            callbacks.push(callback)
 
-          return chain
-        }
+            return chain
+          }
 
-        return [name, chainedCommand]
-      })),
+          return [name, chainedCommand]
+        }),
+      ),
       run,
     } as unknown as ChainedCommands
 
@@ -77,16 +100,15 @@ export default class CommandManager {
   }
 
   public createCan(startTr?: Transaction): CanCommands {
-    const { commands, editor } = this
-    const { state } = editor
-    const dispatch = undefined
+    const { rawCommands, state } = this
+    const dispatch = false
     const tr = startTr || state.tr
     const props = this.buildProps(tr, dispatch)
-    const formattedCommands = Object.fromEntries(Object
-      .entries(commands)
-      .map(([name, command]) => {
-        return [name, (...args: never[]) => command(...args)({ ...props, dispatch })]
-      })) as unknown as SingleCommands
+    const formattedCommands = Object.fromEntries(
+      Object.entries(rawCommands).map(([name, command]) => {
+        return [name, (...args: never[]) => command(...args)({ ...props, dispatch: undefined })]
+      }),
+    ) as unknown as SingleCommands
 
     return {
       ...formattedCommands,
@@ -95,8 +117,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,54 +128,22 @@ export default class CommandManager {
       tr,
       editor,
       view,
-      state: this.chainableState(tr, state),
-      dispatch: shouldDispatch
-        ? () => undefined
-        : undefined,
+      state: createChainableState({
+        state,
+        transaction: tr,
+      }),
+      dispatch: shouldDispatch ? () => undefined : undefined,
       chain: () => this.createChain(tr),
       can: () => this.createCan(tr),
       get commands() {
-        return Object.fromEntries(Object
-          .entries(commands)
-          .map(([name, command]) => {
+        return Object.fromEntries(
+          Object.entries(rawCommands).map(([name, command]) => {
             return [name, (...args: never[]) => command(...args)(props)]
-          })) as unknown as SingleCommands
+          }),
+        ) 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,29 +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, 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 isNodeEmpty from './helpers/isNodeEmpty'
-import createStyleTag from './utilities/createStyleTag'
-import CommandManager from './CommandManager'
-import ExtensionManager from './ExtensionManager'
-import EventEmitter from './EventEmitter'
+  EditorState, Plugin, PluginKey, Transaction,
+} 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,
+  TextSerializer,
 } from './types'
-import * as extensions from './extensions'
-import style from './style'
+import { createStyleTag } from './utilities/createStyleTag'
+import { isFunction } from './utilities/isFunction'
 
 export { extensions }
 
@@ -31,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
@@ -45,10 +48,13 @@ export class Editor extends EventEmitter {
 
   public isFocused = false
 
+  public extensionStorage: Record<string, any> = {}
+
   public options: EditorOptions = {
     element: document.createElement('div'),
     content: '',
     injectCSS: true,
+    injectNonce: undefined,
     extensions: [],
     autofocus: false,
     editable: true,
@@ -56,6 +62,7 @@ export class Editor extends EventEmitter {
     parseOptions: {},
     enableInputRules: true,
     enablePasteRules: true,
+    enableCoreExtensions: true,
     onBeforeCreate: () => null,
     onCreate: () => null,
     onUpdate: () => null,
@@ -94,25 +101,32 @@ export class Editor extends EventEmitter {
     }, 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()
   }
 
   /**
@@ -120,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)
     }
   }
 
@@ -149,8 +163,12 @@ export class Editor extends EventEmitter {
   /**
    * Update editable state of the editor.
    */
-  public setEditable(editable: boolean): void {
+  public setEditable(editable: boolean, emitUpdate = true): void {
     this.setOptions({ editable })
+
+    if (emitUpdate) {
+      this.emit('update', { editor: this, transaction: this.state.tr })
+    }
   }
 
   /**
@@ -160,9 +178,7 @@ export class Editor extends EventEmitter {
     // 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
+    return this.options.editable && this.view && this.view.editable
   }
 
   /**
@@ -178,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 })
@@ -191,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
@@ -215,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)
     })
@@ -227,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,
+    })
   }
 
   /**
@@ -241,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,
       }),
     })
 
@@ -262,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
   }
 
@@ -296,6 +320,12 @@ export class Editor extends EventEmitter {
    * @param transaction An editor state transaction
    */
   private dispatchTransaction(transaction: Transaction): void {
+    // if the editor / the view of the editor was destroyed
+    // the transaction should not be dispatched as there is no view anymore.
+    if (this.view.isDestroyed) {
+      return
+    }
+
     if (this.isCapturingTransaction) {
       if (!this.capturedTransaction) {
         this.capturedTransaction = transaction
@@ -366,16 +396,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)
   }
@@ -383,7 +409,7 @@ export class Editor extends EventEmitter {
   /**
    * Get the document as JSON.
    */
-  public getJSON(): Record<string, any> {
+  public getJSON(): JSONContent {
     return this.state.doc.toJSON()
   }
 
@@ -391,7 +417,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: {
+        ...getTextSerializersFromSchema(this.schema),
+        ...textSerializers,
+      },
+    })
   }
 
   /**
@@ -403,8 +447,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
   }
 
@@ -419,7 +469,6 @@ export class Editor extends EventEmitter {
     }
 
     this.removeAllListeners()
-    removeElement(this.css)
   }
 
   /**
@@ -429,5 +478,4 @@ export class Editor extends EventEmitter {
     // @ts-ignore
     return !this.view?.docView
   }
-
 }