@tiptap/react 2.5.7 → 2.5.9

package/dist/index.umd.js

@@ -125,17 +125,6 @@
   });
   const EditorContent = React.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 = {};
@@ -406,20 +395,25 @@
   	return useSyncExternalStoreShim_development;
   }
 
-  var hasRequiredShim;
+  if (process.env.NODE_ENV === 'production') {
+    shim.exports = requireUseSyncExternalStoreShim_production_min();
+  } else {
+    shim.exports = requireUseSyncExternalStoreShim_development();
+  }
 
-  function requireShim () {
-  	if (hasRequiredShim) return shim.exports;
-  	hasRequiredShim = 1;
+  var shimExports = shim.exports;
 
-  	if (process.env.NODE_ENV === 'production') {
-  	  shim.exports = requireUseSyncExternalStoreShim_production_min();
-  	} else {
-  	  shim.exports = requireUseSyncExternalStoreShim_development();
-  	}
-  	return shim.exports;
+  class Editor extends core.Editor {
+      constructor() {
+          super(...arguments);
+          this.contentComponent = null;
+      }
   }
 
+  var withSelector = {exports: {}};
+
+  var withSelector_production_min = {};
+
   /**
    * @license React
    * use-sync-external-store-shim/with-selector.production.min.js
@@ -435,7 +429,7 @@
   function requireWithSelector_production_min () {
   	if (hasRequiredWithSelector_production_min) return withSelector_production_min;
   	hasRequiredWithSelector_production_min = 1;
-  var h=React,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;
+  var h=React,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;
   	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;
@@ -471,7 +465,7 @@
   	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
   	}
   	          var React$1 = React;
-  	var shim = requireShim();
+  	var shim = shimExports;
 
   	/**
   	 * inlined Object.is polyfill to avoid requiring consumers ship their own
@@ -625,71 +619,75 @@
    * 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.
    */
-  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);
+  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);
               return () => {
-                  subscribers.delete(callback);
+                  currentEditor.off('transaction', fn);
               };
-          },
-          /**
-           * 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;
+          }
+          return undefined;
+      }
   }
   function useEditorState(options) {
-      const [editorInstance] = React.useState(() => makeEditorStateInstance(options.editor));
+      const [editorInstance] = React.useState(() => new EditorStateManager(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]);
+      }, [options.editor, editorInstance]);
       React.useDebugValue(selectedState);
       return selectedState;
   }
@@ -697,10 +695,51 @@
   const isDev = process.env.NODE_ENV !== 'production';
   const isSSR = typeof window === 'undefined';
   const isNext = isSSR || Boolean(typeof window !== 'undefined' && window.next);
-  function useEditor(options = {}, deps = []) {
-      const isMounted = React.useRef(false);
-      const [editor, setEditor] = React.useState(() => {
-          if (options.immediatelyRender === undefined) {
+  /**
+   * This class handles the creation, destruction, and re-creation of the editor instance.
+   */
+  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) {
               if (isSSR || isNext) {
                   // TODO in the next major release, we should throw an error here
                   if (isDev) {
@@ -714,137 +753,148 @@
                   return null;
               }
               // Default to immediately rendering when client-side rendering
-              return new Editor(options);
+              return this.createEditor();
           }
-          if (options.immediatelyRender && isSSR && isDev) {
+          if (this.options.current.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 (options.immediatelyRender) {
-              return new Editor(options);
+          if (this.options.current.immediatelyRender) {
+              return this.createEditor();
           }
           return null;
-      });
-      React.useDebugValue(editor);
-      // This effect will handle creating/updating the editor instance
-      React.useEffect(() => {
-          let editorInstance = editor;
-          if (!editorInstance) {
-              editorInstance = new Editor(options);
-              // instantiate the editor if it doesn't exist
-              // for ssr, this is the first time the editor is created
-              setEditor(editorInstance);
-          }
-          else if (Array.isArray(deps) && deps.length) {
-              // 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 = new Editor(options);
-              setEditor(editorInstance);
-          }
-          else {
-              // 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);
-          }
-      }, deps);
-      const { onBeforeCreate, onBlur, onCreate, onDestroy, onFocus, onSelectionUpdate, onTransaction, onUpdate, onContentError, } = options;
-      const onBeforeCreateRef = React.useRef(onBeforeCreate);
-      const onBlurRef = React.useRef(onBlur);
-      const onCreateRef = React.useRef(onCreate);
-      const onDestroyRef = React.useRef(onDestroy);
-      const onFocusRef = React.useRef(onFocus);
-      const onSelectionUpdateRef = React.useRef(onSelectionUpdate);
-      const onTransactionRef = React.useRef(onTransaction);
-      const onUpdateRef = React.useRef(onUpdate);
-      const onContentErrorRef = React.useRef(onContentError);
-      // This effect will handle updating the editor instance
-      // when the event handlers change.
-      React.useEffect(() => {
-          if (!editor) {
-              return;
-          }
-          if (onBeforeCreate) {
-              editor.off('beforeCreate', onBeforeCreateRef.current);
-              editor.on('beforeCreate', onBeforeCreate);
-              onBeforeCreateRef.current = onBeforeCreate;
-          }
-          if (onBlur) {
-              editor.off('blur', onBlurRef.current);
-              editor.on('blur', onBlur);
-              onBlurRef.current = onBlur;
-          }
-          if (onCreate) {
-              editor.off('create', onCreateRef.current);
-              editor.on('create', onCreate);
-              onCreateRef.current = onCreate;
-          }
-          if (onDestroy) {
-              editor.off('destroy', onDestroyRef.current);
-              editor.on('destroy', onDestroy);
-              onDestroyRef.current = onDestroy;
-          }
-          if (onFocus) {
-              editor.off('focus', onFocusRef.current);
-              editor.on('focus', onFocus);
-              onFocusRef.current = onFocus;
-          }
-          if (onSelectionUpdate) {
-              editor.off('selectionUpdate', onSelectionUpdateRef.current);
-              editor.on('selectionUpdate', onSelectionUpdate);
-              onSelectionUpdateRef.current = onSelectionUpdate;
-          }
-          if (onTransaction) {
-              editor.off('transaction', onTransactionRef.current);
-              editor.on('transaction', onTransaction);
-              onTransactionRef.current = onTransaction;
-          }
-          if (onUpdate) {
-              editor.off('update', onUpdateRef.current);
-              editor.on('update', onUpdate);
-              onUpdateRef.current = onUpdate;
-          }
-          if (onContentError) {
-              editor.off('contentError', onContentErrorRef.current);
-              editor.on('contentError', onContentError);
-              onContentErrorRef.current = onContentError;
-          }
-      }, [
-          onBeforeCreate,
-          onBlur,
-          onCreate,
-          onDestroy,
-          onFocus,
-          onSelectionUpdate,
-          onTransaction,
-          onUpdate,
-          onContentError,
-          editor,
-      ]);
+      }
       /**
-       * Destroy the editor instance when the component completely unmounts
-       * As opposed to the cleanup function in the effect above, this will
-       * only be called when the component is removed from the DOM, since it has no deps.
-       * */
-      React.useEffect(() => {
-          isMounted.current = true;
+       * 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 () => {
-              isMounted.current = false;
-              if (editor) {
-                  // 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 destroyed yet
-                      // and the component is still mounted
-                      // otherwise, asynchronously destroy the editor instance
-                      if (!isMounted.current && !editor.isDestroyed) {
-                          editor.destroy();
-                      }
-                  });
+              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);
               }
+              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;
+              }
+          }
+          if (this.editor && !this.editor.isDestroyed) {
+              // Destroy the editor instance if it exists
+              this.editor.destroy();
+          }
+          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));
       // The default behavior is to re-render on each transaction
       // This is legacy behavior that will be removed in future versions
       useEditorState({