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

package/src/useEditor.ts

@@ -1,5 +1,6 @@
-import { useState, useEffect, DependencyList } from 'react'
 import { EditorOptions } from '@tiptap/core'
+import { DependencyList, useEffect, useState } from 'react'
+
 import { Editor } from './Editor'
 
 function useForceUpdate() {
@@ -10,9 +11,71 @@ function useForceUpdate() {
 
 export const useEditor = (options: Partial<EditorOptions> = {}, deps: DependencyList = []) => {
   const [editor, setEditor] = useState<Editor | null>(null)
+
   const forceUpdate = useForceUpdate()
 
+  const {
+    onBeforeCreate,
+    onBlur,
+    onCreate,
+    onDestroy,
+    onFocus,
+    onSelectionUpdate,
+    onTransaction,
+    onUpdate,
+  } = options
+
+  // This effect will handle updating the editor instance
+  // when the event handlers change.
   useEffect(() => {
+    if (!editor) {
+      return
+    }
+
+    if (onBeforeCreate) {
+      editor.off('beforeCreate')
+      editor.on('beforeCreate', onBeforeCreate)
+    }
+
+    if (onBlur) {
+      editor.off('blur')
+      editor.on('blur', onBlur)
+    }
+
+    if (onCreate) {
+      editor.off('create')
+      editor.on('create', onCreate)
+    }
+
+    if (onDestroy) {
+      editor.off('destroy')
+      editor.on('destroy', onDestroy)
+    }
+
+    if (onFocus) {
+      editor.off('focus')
+      editor.on('focus', onFocus)
+    }
+
+    if (onSelectionUpdate) {
+      editor.off('selectionUpdate')
+      editor.on('selectionUpdate', onSelectionUpdate)
+    }
+
+    if (onTransaction) {
+      editor.off('transaction')
+      editor.on('transaction', onTransaction)
+    }
+
+    if (onUpdate) {
+      editor.off('update')
+      editor.on('update', onUpdate)
+    }
+  }, [onBeforeCreate, onBlur, onCreate, onDestroy, onFocus, onSelectionUpdate, onTransaction, onUpdate])
+
+  useEffect(() => {
+    let isMounted = true
+
     const instance = new Editor(options)
 
     setEditor(instance)
@@ -20,13 +83,16 @@ export const useEditor = (options: Partial<EditorOptions> = {}, deps: Dependency
     instance.on('transaction', () => {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          forceUpdate()
+          if (isMounted) {
+            forceUpdate()
+          }
         })
       })
     })
 
     return () => {
       instance.destroy()
+      isMounted = false
     }
   }, deps)
 

package/LICENSE.md

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021, überdosis GbR
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/packages/core/src/CommandManager.d.ts

@@ -1,20 +0,0 @@
-import { EditorState, Transaction } from 'prosemirror-state';
-import { Editor } from './Editor';
-import { SingleCommands, ChainedCommands, CanCommands, AnyCommands, CommandProps } from './types';
-export declare class CommandManager {
-    editor: Editor;
-    rawCommands: AnyCommands;
-    customState?: EditorState;
-    constructor(props: {
-        editor: Editor;
-        state?: EditorState;
-    });
-    get hasCustomState(): boolean;
-    get state(): EditorState;
-    get commands(): SingleCommands;
-    get chain(): () => ChainedCommands;
-    get can(): () => CanCommands;
-    createChain(startTr?: Transaction, shouldDispatch?: boolean): ChainedCommands;
-    createCan(startTr?: Transaction): CanCommands;
-    buildProps(tr: Transaction, shouldDispatch?: boolean): CommandProps;
-}

package/dist/packages/core/src/Editor.d.ts

@@ -1,147 +0,0 @@
-import { EditorState, Plugin, PluginKey, Transaction } from 'prosemirror-state';
-import { EditorView } from 'prosemirror-view';
-import { Schema, MarkType, NodeType } from 'prosemirror-model';
-import { ExtensionManager } from './ExtensionManager';
-import { EventEmitter } from './EventEmitter';
-import { EditorOptions, CanCommands, ChainedCommands, JSONContent, SingleCommands, TextSerializer, EditorEvents } from './types';
-import * as extensions from './extensions';
-export { extensions };
-export interface HTMLElement {
-    editor?: Editor;
-}
-export declare class Editor extends EventEmitter<EditorEvents> {
-    private commandManager;
-    extensionManager: ExtensionManager;
-    private css;
-    schema: Schema;
-    view: EditorView;
-    isFocused: boolean;
-    extensionStorage: Record<string, any>;
-    options: EditorOptions;
-    constructor(options?: Partial<EditorOptions>);
-    /**
-     * Returns the editor storage.
-     */
-    get storage(): Record<string, any>;
-    /**
-     * An object of all registered commands.
-     */
-    get commands(): SingleCommands;
-    /**
-     * Create a command chain to call multiple commands at once.
-     */
-    chain(): ChainedCommands;
-    /**
-     * Check if a command or a command chain can be executed. Without executing it.
-     */
-    can(): CanCommands;
-    /**
-     * Inject CSS styles.
-     */
-    private injectCSS;
-    /**
-     * Update editor options.
-     *
-     * @param options A list of options
-     */
-    setOptions(options?: Partial<EditorOptions>): void;
-    /**
-     * Update editable state of the editor.
-     */
-    setEditable(editable: boolean): void;
-    /**
-     * Returns whether the editor is editable.
-     */
-    get isEditable(): boolean;
-    /**
-     * Returns the editor state.
-     */
-    get state(): EditorState;
-    /**
-     * Register a ProseMirror plugin.
-     *
-     * @param plugin A ProseMirror plugin
-     * @param handlePlugins Control how to merge the plugin into the existing plugins.
-     */
-    registerPlugin(plugin: Plugin, handlePlugins?: (newPlugin: Plugin, plugins: Plugin[]) => Plugin[]): void;
-    /**
-     * Unregister a ProseMirror plugin.
-     *
-     * @param nameOrPluginKey The plugins name
-     */
-    unregisterPlugin(nameOrPluginKey: string | PluginKey): void;
-    /**
-     * Creates an extension manager.
-     */
-    private createExtensionManager;
-    /**
-     * Creates an command manager.
-     */
-    private createCommandManager;
-    /**
-     * Creates a ProseMirror schema.
-     */
-    private createSchema;
-    /**
-     * Creates a ProseMirror view.
-     */
-    private createView;
-    /**
-     * Creates all node views.
-     */
-    createNodeViews(): void;
-    isCapturingTransaction: boolean;
-    private capturedTransaction;
-    captureTransaction(fn: Function): Transaction<any> | null;
-    /**
-     * The callback over which to send transactions (state updates) produced by the view.
-     *
-     * @param transaction An editor state transaction
-     */
-    private dispatchTransaction;
-    /**
-     * Get attributes of the currently selected node or mark.
-     */
-    getAttributes(nameOrType: string | NodeType | MarkType): Record<string, any>;
-    /**
-     * Returns if the currently selected node or mark is active.
-     *
-     * @param name Name of the node or mark
-     * @param attributes Attributes of the node or mark
-     */
-    isActive(name: string, attributes?: {}): boolean;
-    isActive(attributes: {}): boolean;
-    /**
-     * Get the document as JSON.
-     */
-    getJSON(): JSONContent;
-    /**
-     * Get the document as HTML.
-     */
-    getHTML(): string;
-    /**
-     * Get the document as text.
-     */
-    getText(options?: {
-        blockSeparator?: string;
-        textSerializers?: Record<string, TextSerializer>;
-    }): string;
-    /**
-     * Check if there is no content.
-     */
-    get isEmpty(): boolean;
-    /**
-     * Get the number of characters for the current document.
-     *
-     * @deprecated
-     */
-    getCharacterCount(): number;
-    /**
-     * Destroy the editor.
-     */
-    destroy(): void;
-    /**
-     * Check if the editor is already destroyed.
-     */
-    get isDestroyed(): boolean;
-}

package/dist/packages/core/src/EventEmitter.d.ts

@@ -1,11 +0,0 @@
-declare type StringKeyOf<T> = Extract<keyof T, string>;
-declare type CallbackType<T extends Record<string, any>, EventName extends StringKeyOf<T>> = T[EventName] extends any[] ? T[EventName] : [T[EventName]];
-declare type CallbackFunction<T extends Record<string, any>, EventName extends StringKeyOf<T>> = (...props: CallbackType<T, EventName>) => any;
-export declare class EventEmitter<T extends Record<string, any>> {
-    private callbacks;
-    on<EventName extends StringKeyOf<T>>(event: EventName, fn: CallbackFunction<T, EventName>): this;
-    protected emit<EventName extends StringKeyOf<T>>(event: EventName, ...args: CallbackType<T, EventName>): this;
-    off<EventName extends StringKeyOf<T>>(event: EventName, fn?: CallbackFunction<T, EventName>): this;
-    protected removeAllListeners(): void;
-}
-export {};

package/dist/packages/core/src/Extension.d.ts

@@ -1,227 +0,0 @@
-import { Plugin, Transaction } from 'prosemirror-state';
-import { InputRule } from './InputRule';
-import { PasteRule } from './PasteRule';
-import { Editor } from './Editor';
-import { Node } from './Node';
-import { Mark } from './Mark';
-import { Extensions, GlobalAttributes, RawCommands, ParentConfig, KeyboardShortcutCommand } from './types';
-import { ExtensionConfig } from '.';
-declare module '@tiptap/core' {
-    interface ExtensionConfig<Options = any, Storage = any> {
-        [key: string]: any;
-        /**
-         * Name
-         */
-        name: string;
-        /**
-         * Priority
-         */
-        priority?: number;
-        /**
-         * Default 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;
-            storage: Storage;
-            parent: ParentConfig<ExtensionConfig<Options, Storage>>['addGlobalAttributes'];
-        }) => GlobalAttributes | {};
-        /**
-         * Raw
-         */
-        addCommands?: (this: {
-            name: string;
-            options: Options;
-            storage: Storage;
-            editor: Editor;
-            parent: ParentConfig<ExtensionConfig<Options, Storage>>['addCommands'];
-        }) => Partial<RawCommands>;
-        /**
-         * Keyboard shortcuts
-         */
-        addKeyboardShortcuts?: (this: {
-            name: string;
-            options: Options;
-            storage: Storage;
-            editor: Editor;
-            parent: ParentConfig<ExtensionConfig<Options, Storage>>['addKeyboardShortcuts'];
-        }) => {
-            [key: string]: KeyboardShortcutCommand;
-        };
-        /**
-         * Input rules
-         */
-        addInputRules?: (this: {
-            name: string;
-            options: Options;
-            storage: Storage;
-            editor: Editor;
-            parent: ParentConfig<ExtensionConfig<Options, Storage>>['addInputRules'];
-        }) => InputRule[];
-        /**
-         * Paste rules
-         */
-        addPasteRules?: (this: {
-            name: string;
-            options: Options;
-            storage: Storage;
-            editor: Editor;
-            parent: ParentConfig<ExtensionConfig<Options, Storage>>['addPasteRules'];
-        }) => PasteRule[];
-        /**
-         * ProseMirror plugins
-         */
-        addProseMirrorPlugins?: (this: {
-            name: string;
-            options: Options;
-            storage: Storage;
-            editor: Editor;
-            parent: ParentConfig<ExtensionConfig<Options, Storage>>['addProseMirrorPlugins'];
-        }) => Plugin[];
-        /**
-         * Extensions
-         */
-        addExtensions?: (this: {
-            name: string;
-            options: Options;
-            storage: Storage;
-            parent: ParentConfig<ExtensionConfig<Options, Storage>>['addExtensions'];
-        }) => Extensions;
-        /**
-         * Extend Node Schema
-         */
-        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;
-            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;
-            storage: Storage;
-            editor: Editor;
-            parent: ParentConfig<ExtensionConfig<Options, Storage>>['onBeforeCreate'];
-        }) => void) | null;
-        /**
-         * The editor is ready.
-         */
-        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;
-            storage: Storage;
-            editor: Editor;
-            parent: ParentConfig<ExtensionConfig<Options, Storage>>['onUpdate'];
-        }) => void) | null;
-        /**
-         * The selection has changed.
-         */
-        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;
-            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;
-            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;
-            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;
-            storage: Storage;
-            editor: Editor;
-            parent: ParentConfig<ExtensionConfig<Options, Storage>>['onDestroy'];
-        }) => void) | null;
-    }
-}
-export declare class Extension<Options = any, Storage = any> {
-    type: string;
-    name: string;
-    parent: Extension | null;
-    child: Extension | null;
-    options: Options;
-    storage: Storage;
-    config: ExtensionConfig;
-    constructor(config?: Partial<ExtensionConfig<Options, Storage>>);
-    static create<O = any, S = any>(config?: Partial<ExtensionConfig<O, S>>): Extension<O, S>;
-    configure(options?: Partial<Options>): Extension<Options, Storage>;
-    extend<ExtendedOptions = Options, ExtendedStorage = Storage>(extendedConfig?: Partial<ExtensionConfig<ExtendedOptions, ExtendedStorage>>): Extension<ExtendedOptions, ExtendedStorage>;
-}

package/dist/packages/core/src/ExtensionManager.d.ts

@@ -1,18 +0,0 @@
-import { Schema } from 'prosemirror-model';
-import { Plugin } from 'prosemirror-state';
-import { Editor } from './Editor';
-import { Extensions, RawCommands } from './types';
-export declare class ExtensionManager {
-    editor: Editor;
-    schema: Schema;
-    extensions: Extensions;
-    splittableMarks: string[];
-    constructor(extensions: Extensions, editor: Editor);
-    static resolve(extensions: Extensions): Extensions;
-    static flatten(extensions: Extensions): Extensions;
-    static sort(extensions: Extensions): Extensions;
-    get commands(): RawCommands;
-    get plugins(): Plugin[];
-    get attributes(): import("@tiptap/core").ExtensionAttribute[];
-    get nodeViews(): any;
-}

package/dist/packages/core/src/InputRule.d.ts

@@ -1,42 +0,0 @@
-import { EditorState, Plugin } from 'prosemirror-state';
-import { Editor } from './Editor';
-import { Range, ExtendedRegExpMatchArray, SingleCommands, ChainedCommands, CanCommands } from './types';
-export declare type InputRuleMatch = {
-    index: number;
-    text: string;
-    replaceWith?: string;
-    match?: RegExpMatchArray;
-    data?: Record<string, any>;
-};
-export declare type InputRuleFinder = RegExp | ((text: string) => InputRuleMatch | null);
-export declare class InputRule {
-    find: InputRuleFinder;
-    handler: (props: {
-        state: EditorState;
-        range: Range;
-        match: ExtendedRegExpMatchArray;
-        commands: SingleCommands;
-        chain: () => ChainedCommands;
-        can: () => CanCommands;
-    }) => void;
-    constructor(config: {
-        find: InputRuleFinder;
-        handler: (props: {
-            state: EditorState;
-            range: Range;
-            match: ExtendedRegExpMatchArray;
-            commands: SingleCommands;
-            chain: () => ChainedCommands;
-            can: () => CanCommands;
-        }) => void;
-    });
-}
-/**
- * Create an input rules plugin. When enabled, it will cause text
- * input that matches any of the given rules to trigger the rule’s
- * action.
- */
-export declare function inputRulesPlugin(props: {
-    editor: Editor;
-    rules: InputRule[];
-}): Plugin;