@tiptap/react 2.5.9 → 3.0.0-next.0

package/dist/index.umd.js

@@ -125,6 +125,17 @@
   });
   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 = {};
@@ -395,25 +406,20 @@
   	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
@@ -429,7 +435,7 @@
   function requireWithSelector_production_min () {
   	if (hasRequiredWithSelector_production_min) return withSelector_production_min;
   	hasRequiredWithSelector_production_min = 1;
-  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;
+  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;
   	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;
@@ -465,7 +471,7 @@
   	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
   	}
   	          var React$1 = React;
-  	var shim = shimExports;
+  	var shim = requireShim();
 
   	/**
   	 * inlined Object.is polyfill to avoid requiring consumers ship their own
@@ -619,75 +625,71 @@
    * 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;
   }
@@ -696,50 +698,25 @@
   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) {
@@ -753,148 +730,55 @@
                   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({
@@ -940,17 +824,16 @@
   }
 
   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.');
@@ -958,30 +841,38 @@
           }
           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.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.createElement("div", { className: props.className }, props.children)), menuEl.current);
+      return (React.createElement(React.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.');
@@ -990,18 +881,25 @@
           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.createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
+      const portal = ReactDOM.createPortal((React.createElement("div", { className: props.className }, props.children)), menuEl.current);
+      return (React.createElement(React.Fragment, null, portal));
   };
 
   const ReactNodeViewContext = React.createContext({