@tiptap/react 2.5.9 → 3.0.0-next.0

package/dist/index.cjs

@@ -132,6 +132,17 @@ const EditorContentWithKey = React.forwardRef((props, ref) => {
 });
 const EditorContent = React__default.default.memo(EditorContentWithKey);
 
+class Editor extends core.Editor {
+    constructor() {
+        super(...arguments);
+        this.contentComponent = null;
+    }
+}
+
+var withSelector = {exports: {}};
+
+var withSelector_production_min = {};
+
 var shim = {exports: {}};
 
 var useSyncExternalStoreShim_production_min = {};
@@ -402,25 +413,20 @@ function requireUseSyncExternalStoreShim_development () {
 	return useSyncExternalStoreShim_development;
 }
 
-if (process.env.NODE_ENV === 'production') {
-  shim.exports = requireUseSyncExternalStoreShim_production_min();
-} else {
-  shim.exports = requireUseSyncExternalStoreShim_development();
-}
+var hasRequiredShim;
 
-var shimExports = shim.exports;
+function requireShim () {
+	if (hasRequiredShim) return shim.exports;
+	hasRequiredShim = 1;
 
-class Editor extends core.Editor {
-    constructor() {
-        super(...arguments);
-        this.contentComponent = null;
-    }
+	if (process.env.NODE_ENV === 'production') {
+	  shim.exports = requireUseSyncExternalStoreShim_production_min();
+	} else {
+	  shim.exports = requireUseSyncExternalStoreShim_development();
+	}
+	return shim.exports;
 }
 
-var withSelector = {exports: {}};
-
-var withSelector_production_min = {};
-
 /**
  * @license React
  * use-sync-external-store-shim/with-selector.production.min.js
@@ -436,7 +442,7 @@ var hasRequiredWithSelector_production_min;
 function requireWithSelector_production_min () {
 	if (hasRequiredWithSelector_production_min) return withSelector_production_min;
 	hasRequiredWithSelector_production_min = 1;
-var h=React__default.default,n=shimExports;function p(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var q="function"===typeof Object.is?Object.is:p,r=n.useSyncExternalStore,t=h.useRef,u=h.useEffect,v=h.useMemo,w=h.useDebugValue;
+var h=React__default.default,n=requireShim();function p(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var q="function"===typeof Object.is?Object.is:p,r=n.useSyncExternalStore,t=h.useRef,u=h.useEffect,v=h.useMemo,w=h.useDebugValue;
 	withSelector_production_min.useSyncExternalStoreWithSelector=function(a,b,e,l,g){var c=t(null);if(null===c.current){var f={hasValue:!1,value:null};c.current=f;}else f=c.current;c=v(function(){function a(a){if(!c){c=!0;d=a;a=l(a);if(void 0!==g&&f.hasValue){var b=f.value;if(g(b,a))return k=b}return k=a}b=k;if(q(d,a))return b;var e=l(a);if(void 0!==g&&g(b,e))return b;d=a;return k=e}var c=!1,d,k,m=void 0===e?null:e;return [function(){return a(b())},null===m?void 0:function(){return a(m())}]},[b,e,l,g]);var d=r(a,c[0],c[1]);
 	u(function(){f.hasValue=!0;f.value=d;},[d]);w(d);return d};
 	return withSelector_production_min;
@@ -472,7 +478,7 @@ function requireWithSelector_development () {
 	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
 	}
 	          var React = React__default.default;
-	var shim = shimExports;
+	var shim = requireShim();
 
 	/**
 	 * inlined Object.is polyfill to avoid requiring consumers ship their own
@@ -626,75 +632,71 @@ var withSelectorExports = withSelector.exports;
  * To synchronize the editor instance with the component state,
  * we need to create a separate instance that is not affected by the component re-renders.
  */
-class EditorStateManager {
-    constructor(initialEditor) {
-        this.transactionNumber = 0;
-        this.lastTransactionNumber = 0;
-        this.subscribers = new Set();
-        this.editor = initialEditor;
-        this.lastSnapshot = { editor: initialEditor, transactionNumber: 0 };
-        this.getSnapshot = this.getSnapshot.bind(this);
-        this.getServerSnapshot = this.getServerSnapshot.bind(this);
-        this.watch = this.watch.bind(this);
-        this.subscribe = this.subscribe.bind(this);
-    }
-    /**
-     * Get the current editor instance.
-     */
-    getSnapshot() {
-        if (this.transactionNumber === this.lastTransactionNumber) {
-            return this.lastSnapshot;
-        }
-        this.lastTransactionNumber = this.transactionNumber;
-        this.lastSnapshot = { editor: this.editor, transactionNumber: this.transactionNumber };
-        return this.lastSnapshot;
-    }
-    /**
-     * Always disable the editor on the server-side.
-     */
-    getServerSnapshot() {
-        return { editor: null, transactionNumber: 0 };
-    }
-    /**
-     * Subscribe to the editor instance's changes.
-     */
-    subscribe(callback) {
-        this.subscribers.add(callback);
-        return () => {
-            this.subscribers.delete(callback);
-        };
-    }
-    /**
-     * Watch the editor instance for changes.
-     */
-    watch(nextEditor) {
-        this.editor = nextEditor;
-        if (this.editor) {
-            /**
-             * This will force a re-render when the editor state changes.
-             * This is to support things like `editor.can().toggleBold()` in components that `useEditor`.
-             * This could be more efficient, but it's a good trade-off for now.
-             */
-            const fn = () => {
-                this.transactionNumber += 1;
-                this.subscribers.forEach(callback => callback());
-            };
-            const currentEditor = this.editor;
-            currentEditor.on('transaction', fn);
+function makeEditorStateInstance(initialEditor) {
+    let transactionNumber = 0;
+    let lastTransactionNumber = 0;
+    let lastSnapshot = { editor: initialEditor, transactionNumber: 0 };
+    let editor = initialEditor;
+    const subscribers = new Set();
+    const editorInstance = {
+        /**
+         * Get the current editor instance.
+         */
+        getSnapshot() {
+            if (transactionNumber === lastTransactionNumber) {
+                return lastSnapshot;
+            }
+            lastTransactionNumber = transactionNumber;
+            lastSnapshot = { editor, transactionNumber };
+            return lastSnapshot;
+        },
+        /**
+         * Always disable the editor on the server-side.
+         */
+        getServerSnapshot() {
+            return { editor: null, transactionNumber: 0 };
+        },
+        /**
+         * Subscribe to the editor instance's changes.
+         */
+        subscribe(callback) {
+            subscribers.add(callback);
             return () => {
-                currentEditor.off('transaction', fn);
+                subscribers.delete(callback);
             };
-        }
-        return undefined;
-    }
+        },
+        /**
+         * Watch the editor instance for changes.
+         */
+        watch(nextEditor) {
+            editor = nextEditor;
+            if (editor) {
+                /**
+                 * This will force a re-render when the editor state changes.
+                 * This is to support things like `editor.can().toggleBold()` in components that `useEditor`.
+                 * This could be more efficient, but it's a good trade-off for now.
+                 */
+                const fn = () => {
+                    transactionNumber += 1;
+                    subscribers.forEach(callback => callback());
+                };
+                const currentEditor = editor;
+                currentEditor.on('transaction', fn);
+                return () => {
+                    currentEditor.off('transaction', fn);
+                };
+            }
+        },
+    };
+    return editorInstance;
 }
 function useEditorState(options) {
-    const [editorInstance] = React.useState(() => new EditorStateManager(options.editor));
+    const [editorInstance] = React.useState(() => makeEditorStateInstance(options.editor));
     // Using the `useSyncExternalStore` hook to sync the editor instance with the component state
     const selectedState = withSelectorExports.useSyncExternalStoreWithSelector(editorInstance.subscribe, editorInstance.getSnapshot, editorInstance.getServerSnapshot, options.selector, options.equalityFn);
     React.useEffect(() => {
         return editorInstance.watch(options.editor);
-    }, [options.editor, editorInstance]);
+    }, [options.editor]);
     React.useDebugValue(selectedState);
     return selectedState;
 }
@@ -703,50 +705,25 @@ const isDev = process.env.NODE_ENV !== 'production';
 const isSSR = typeof window === 'undefined';
 const isNext = isSSR || Boolean(typeof window !== 'undefined' && window.next);
 /**
- * This class handles the creation, destruction, and re-creation of the editor instance.
+ * Create a new editor instance. And attach event listeners.
  */
-class EditorInstanceManager {
-    constructor(options) {
-        /**
-         * The current editor instance.
-         */
-        this.editor = null;
-        /**
-         * The subscriptions to notify when the editor instance
-         * has been created or destroyed.
-         */
-        this.subscriptions = new Set();
-        /**
-         * Whether the editor has been mounted.
-         */
-        this.isComponentMounted = false;
-        /**
-         * The most recent dependencies array.
-         */
-        this.previousDeps = null;
-        /**
-         * The unique instance ID. This is used to identify the editor instance. And will be re-generated for each new instance.
-         */
-        this.instanceId = '';
-        this.options = options;
-        this.subscriptions = new Set();
-        this.setEditor(this.getInitialEditor());
-        this.getEditor = this.getEditor.bind(this);
-        this.getServerSnapshot = this.getServerSnapshot.bind(this);
-        this.subscribe = this.subscribe.bind(this);
-        this.refreshEditorInstance = this.refreshEditorInstance.bind(this);
-        this.scheduleDestroy = this.scheduleDestroy.bind(this);
-        this.onRender = this.onRender.bind(this);
-        this.createEditor = this.createEditor.bind(this);
-    }
-    setEditor(editor) {
-        this.editor = editor;
-        this.instanceId = Math.random().toString(36).slice(2, 9);
-        // Notify all subscribers that the editor instance has been created
-        this.subscriptions.forEach(cb => cb());
-    }
-    getInitialEditor() {
-        if (this.options.current.immediatelyRender === undefined) {
+function createEditor(options) {
+    const editor = new Editor(options.current);
+    editor.on('beforeCreate', (...args) => { var _a, _b; return (_b = (_a = options.current).onBeforeCreate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
+    editor.on('blur', (...args) => { var _a, _b; return (_b = (_a = options.current).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
+    editor.on('create', (...args) => { var _a, _b; return (_b = (_a = options.current).onCreate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
+    editor.on('destroy', (...args) => { var _a, _b; return (_b = (_a = options.current).onDestroy) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
+    editor.on('focus', (...args) => { var _a, _b; return (_b = (_a = options.current).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
+    editor.on('selectionUpdate', (...args) => { var _a, _b; return (_b = (_a = options.current).onSelectionUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
+    editor.on('transaction', (...args) => { var _a, _b; return (_b = (_a = options.current).onTransaction) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
+    editor.on('update', (...args) => { var _a, _b; return (_b = (_a = options.current).onUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
+    editor.on('contentError', (...args) => { var _a, _b; return (_b = (_a = options.current).onContentError) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
+    return editor;
+}
+function useEditor(options = {}, deps = []) {
+    const mostRecentOptions = React.useRef(options);
+    const [editor, setEditor] = React.useState(() => {
+        if (options.immediatelyRender === undefined) {
             if (isSSR || isNext) {
                 // TODO in the next major release, we should throw an error here
                 if (isDev) {
@@ -760,148 +737,55 @@ class EditorInstanceManager {
                 return null;
             }
             // Default to immediately rendering when client-side rendering
-            return this.createEditor();
+            return createEditor(mostRecentOptions);
         }
-        if (this.options.current.immediatelyRender && isSSR && isDev) {
+        if (options.immediatelyRender && isSSR && isDev) {
             // Warn in development, to make sure the developer is aware that tiptap cannot be SSR'd, set `immediatelyRender` to `false` to avoid hydration mismatches.
             throw new Error('Tiptap Error: SSR has been detected, and `immediatelyRender` has been set to `true` this is an unsupported configuration that may result in errors, explicitly set `immediatelyRender` to `false` to avoid hydration mismatches.');
         }
-        if (this.options.current.immediatelyRender) {
-            return this.createEditor();
+        if (options.immediatelyRender) {
+            return createEditor(mostRecentOptions);
         }
         return null;
-    }
-    /**
-     * Create a new editor instance. And attach event listeners.
-     */
-    createEditor() {
-        const editor = new Editor(this.options.current);
-        // Always call the most recent version of the callback function by default
-        editor.on('beforeCreate', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onBeforeCreate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
-        editor.on('blur', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
-        editor.on('create', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onCreate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
-        editor.on('destroy', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onDestroy) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
-        editor.on('focus', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
-        editor.on('selectionUpdate', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onSelectionUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
-        editor.on('transaction', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onTransaction) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
-        editor.on('update', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
-        editor.on('contentError', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onContentError) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
-        // no need to keep track of the event listeners, they will be removed when the editor is destroyed
-        return editor;
-    }
-    /**
-     * Get the current editor instance.
-     */
-    getEditor() {
-        return this.editor;
-    }
-    /**
-     * Always disable the editor on the server-side.
-     */
-    getServerSnapshot() {
-        return null;
-    }
-    /**
-     * Subscribe to the editor instance's changes.
-     */
-    subscribe(onStoreChange) {
-        this.subscriptions.add(onStoreChange);
-        return () => {
-            this.subscriptions.delete(onStoreChange);
-        };
-    }
-    /**
-     * On each render, we will create, update, or destroy the editor instance.
-     * @param deps The dependencies to watch for changes
-     * @returns A cleanup function
-     */
-    onRender(deps) {
-        // The returned callback will run on each render
-        return () => {
-            this.isComponentMounted = true;
-            // Cleanup any scheduled destructions, since we are currently rendering
-            clearTimeout(this.scheduledDestructionTimeout);
-            if (this.editor && !this.editor.isDestroyed && deps.length === 0) {
-                // if the editor does exist & deps are empty, we don't need to re-initialize the editor
-                // we can fast-path to update the editor options on the existing instance
-                this.editor.setOptions(this.options.current);
-            }
-            else {
-                // When the editor:
-                // - does not yet exist
-                // - is destroyed
-                // - the deps array changes
-                // We need to destroy the editor instance and re-initialize it
-                this.refreshEditorInstance(deps);
+    });
+    const mostRecentEditor = React.useRef(editor);
+    mostRecentEditor.current = editor;
+    React.useDebugValue(editor);
+    // This effect will handle creating/updating the editor instance
+    React.useEffect(() => {
+        const destroyUnusedEditor = (editorInstance) => {
+            if (editorInstance) {
+                // We need to destroy the editor asynchronously to avoid memory leaks
+                // because the editor instance is still being used in the component.
+                setTimeout(() => {
+                    // re-use the editor instance if it hasn't been replaced yet
+                    // otherwise, asynchronously destroy the old editor instance
+                    if (editorInstance !== mostRecentEditor.current && !editorInstance.isDestroyed) {
+                        editorInstance.destroy();
+                    }
+                });
             }
-            return () => {
-                this.isComponentMounted = false;
-                this.scheduleDestroy();
-            };
         };
-    }
-    /**
-     * Recreate the editor instance if the dependencies have changed.
-     */
-    refreshEditorInstance(deps) {
-        if (this.editor && !this.editor.isDestroyed) {
-            // Editor instance already exists
-            if (this.previousDeps === null) {
-                // If lastDeps has not yet been initialized, reuse the current editor instance
-                this.previousDeps = deps;
-                return;
-            }
-            const depsAreEqual = this.previousDeps.length === deps.length
-                && this.previousDeps.every((dep, index) => dep === deps[index]);
-            if (depsAreEqual) {
-                // deps exist and are equal, no need to recreate
-                return;
-            }
+        let editorInstance = mostRecentEditor.current;
+        if (!editorInstance) {
+            editorInstance = createEditor(mostRecentOptions);
+            setEditor(editorInstance);
+            return () => destroyUnusedEditor(editorInstance);
         }
-        if (this.editor && !this.editor.isDestroyed) {
-            // Destroy the editor instance if it exists
-            this.editor.destroy();
+        if (!Array.isArray(deps) || deps.length === 0) {
+            // if the editor does exist & deps are empty, we don't need to re-initialize the editor
+            // we can fast-path to update the editor options on the existing instance
+            editorInstance.setOptions(options);
+            return () => destroyUnusedEditor(editorInstance);
         }
-        this.setEditor(this.createEditor());
-        // Update the lastDeps to the current deps
-        this.previousDeps = deps;
-    }
-    /**
-     * Schedule the destruction of the editor instance.
-     * This will only destroy the editor if it was not mounted on the next tick.
-     * This is to avoid destroying the editor instance when it's actually still mounted.
-     */
-    scheduleDestroy() {
-        const currentInstanceId = this.instanceId;
-        const currentEditor = this.editor;
-        // Wait a tick to see if the component is still mounted
-        this.scheduledDestructionTimeout = setTimeout(() => {
-            if (this.isComponentMounted && this.instanceId === currentInstanceId) {
-                // If still mounted on the next tick, with the same instanceId, do not destroy the editor
-                if (currentEditor) {
-                    // just re-apply options as they might have changed
-                    currentEditor.setOptions(this.options.current);
-                }
-                return;
-            }
-            if (currentEditor && !currentEditor.isDestroyed) {
-                currentEditor.destroy();
-                if (this.instanceId === currentInstanceId) {
-                    this.setEditor(null);
-                }
-            }
-        }, 0);
-    }
-}
-function useEditor(options = {}, deps = []) {
-    const mostRecentOptions = React.useRef(options);
-    mostRecentOptions.current = options;
-    const [instanceManager] = React.useState(() => new EditorInstanceManager(mostRecentOptions));
-    const editor = shimExports.useSyncExternalStore(instanceManager.subscribe, instanceManager.getEditor, instanceManager.getServerSnapshot);
-    React.useDebugValue(editor);
-    // This effect will handle creating/updating the editor instance
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    React.useEffect(instanceManager.onRender(deps));
+        // We need to destroy the editor instance and re-initialize it
+        // when the deps array changes
+        editorInstance.destroy();
+        // the deps array is used to re-initialize the editor instance
+        editorInstance = createEditor(mostRecentOptions);
+        setEditor(editorInstance);
+        return () => destroyUnusedEditor(editorInstance);
+    }, deps);
     // The default behavior is to re-render on each transaction
     // This is legacy behavior that will be removed in future versions
     useEditorState({
@@ -947,17 +831,16 @@ function EditorProvider({ children, slotAfter, slotBefore, ...editorOptions }) {
 }
 
 const BubbleMenu = (props) => {
-    const [element, setElement] = React.useState(null);
+    const menuEl = React.useRef(document.createElement('div'));
     const { editor: currentEditor } = useCurrentEditor();
     React.useEffect(() => {
         var _a;
-        if (!element) {
-            return;
-        }
+        menuEl.current.style.visibility = 'hidden';
+        menuEl.current.style.position = 'absolute';
         if (((_a = props.editor) === null || _a === void 0 ? void 0 : _a.isDestroyed) || (currentEditor === null || currentEditor === void 0 ? void 0 : currentEditor.isDestroyed)) {
             return;
         }
-        const { pluginKey = 'bubbleMenu', editor, tippyOptions = {}, updateDelay, shouldShow = null, } = props;
+        const { pluginKey = 'bubbleMenu', editor, updateDelay, resizeDelay, shouldShow = null, } = props;
         const menuEditor = editor || currentEditor;
         if (!menuEditor) {
             console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.');
@@ -965,30 +848,38 @@ const BubbleMenu = (props) => {
         }
         const plugin = extensionBubbleMenu.BubbleMenuPlugin({
             updateDelay,
+            resizeDelay,
             editor: menuEditor,
-            element,
+            element: menuEl.current,
             pluginKey,
             shouldShow,
-            tippyOptions,
+            options: props.options,
         });
         menuEditor.registerPlugin(plugin);
-        return () => menuEditor.unregisterPlugin(pluginKey);
-    }, [props.editor, currentEditor, element]);
-    return (React__default.default.createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
+        return () => {
+            menuEditor.unregisterPlugin(pluginKey);
+            window.requestAnimationFrame(() => {
+                if (menuEl.current.parentNode) {
+                    menuEl.current.parentNode.removeChild(menuEl.current);
+                }
+            });
+        };
+    }, [props.editor, currentEditor]);
+    const portal = ReactDOM.createPortal((React__default.default.createElement("div", { className: props.className }, props.children)), menuEl.current);
+    return (React__default.default.createElement(React__default.default.Fragment, null, portal));
 };
 
 const FloatingMenu = (props) => {
-    const [element, setElement] = React.useState(null);
+    const menuEl = React.useRef(document.createElement('div'));
     const { editor: currentEditor } = useCurrentEditor();
     React.useEffect(() => {
         var _a;
-        if (!element) {
-            return;
-        }
+        menuEl.current.style.visibility = 'hidden';
+        menuEl.current.style.position = 'absolute';
         if (((_a = props.editor) === null || _a === void 0 ? void 0 : _a.isDestroyed) || (currentEditor === null || currentEditor === void 0 ? void 0 : currentEditor.isDestroyed)) {
             return;
         }
-        const { pluginKey = 'floatingMenu', editor, tippyOptions = {}, shouldShow = null, } = props;
+        const { pluginKey = 'floatingMenu', editor, options, shouldShow = null, } = props;
         const menuEditor = editor || currentEditor;
         if (!menuEditor) {
             console.warn('FloatingMenu component is not rendered inside of an editor component or does not have editor prop.');
@@ -997,18 +888,25 @@ const FloatingMenu = (props) => {
         const plugin = extensionFloatingMenu.FloatingMenuPlugin({
             pluginKey,
             editor: menuEditor,
-            element,
-            tippyOptions,
+            element: menuEl.current,
+            options,
             shouldShow,
         });
         menuEditor.registerPlugin(plugin);
-        return () => menuEditor.unregisterPlugin(pluginKey);
+        return () => {
+            menuEditor.unregisterPlugin(pluginKey);
+            window.requestAnimationFrame(() => {
+                if (menuEl.current.parentNode) {
+                    menuEl.current.parentNode.removeChild(menuEl.current);
+                }
+            });
+        };
     }, [
         props.editor,
         currentEditor,
-        element,
     ]);
-    return (React__default.default.createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
+    const portal = ReactDOM.createPortal((React__default.default.createElement("div", { className: props.className }, props.children)), menuEl.current);
+    return (React__default.default.createElement(React__default.default.Fragment, null, portal));
 };
 
 const ReactNodeViewContext = React.createContext({