@tiptap/react 2.5.9 → 2.6.0

package/dist/index.umd.js

@@ -4,127 +4,6 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@tiptap/react"] = {}, global.extensionBubbleMenu, global.React, global.ReactDOM, global.core, global.extensionFloatingMenu));
 })(this, (function (exports, extensionBubbleMenu, React, ReactDOM, core, extensionFloatingMenu) { 'use strict';
 
-  const mergeRefs = (...refs) => {
-      return (node) => {
-          refs.forEach(ref => {
-              if (typeof ref === 'function') {
-                  ref(node);
-              }
-              else if (ref) {
-                  ref.current = node;
-              }
-          });
-      };
-  };
-  const Portals = ({ renderers }) => {
-      return (React.createElement(React.Fragment, null, Object.entries(renderers).map(([key, renderer]) => {
-          return ReactDOM.createPortal(renderer.reactElement, renderer.element, key);
-      })));
-  };
-  class PureEditorContent extends React.Component {
-      constructor(props) {
-          super(props);
-          this.editorContentRef = React.createRef();
-          this.initialized = false;
-          this.state = {
-              renderers: {},
-          };
-      }
-      componentDidMount() {
-          this.init();
-      }
-      componentDidUpdate() {
-          this.init();
-      }
-      init() {
-          const { editor } = this.props;
-          if (editor && !editor.isDestroyed && editor.options.element) {
-              if (editor.contentComponent) {
-                  return;
-              }
-              const element = this.editorContentRef.current;
-              element.append(...editor.options.element.childNodes);
-              editor.setOptions({
-                  element,
-              });
-              editor.contentComponent = this;
-              editor.createNodeViews();
-              this.initialized = true;
-          }
-      }
-      maybeFlushSync(fn) {
-          // Avoid calling flushSync until the editor is initialized.
-          // Initialization happens during the componentDidMount or componentDidUpdate
-          // lifecycle methods, and React doesn't allow calling flushSync from inside
-          // a lifecycle method.
-          if (this.initialized) {
-              ReactDOM.flushSync(fn);
-          }
-          else {
-              fn();
-          }
-      }
-      setRenderer(id, renderer) {
-          this.maybeFlushSync(() => {
-              this.setState(({ renderers }) => ({
-                  renderers: {
-                      ...renderers,
-                      [id]: renderer,
-                  },
-              }));
-          });
-      }
-      removeRenderer(id) {
-          this.maybeFlushSync(() => {
-              this.setState(({ renderers }) => {
-                  const nextRenderers = { ...renderers };
-                  delete nextRenderers[id];
-                  return { renderers: nextRenderers };
-              });
-          });
-      }
-      componentWillUnmount() {
-          const { editor } = this.props;
-          if (!editor) {
-              return;
-          }
-          this.initialized = false;
-          if (!editor.isDestroyed) {
-              editor.view.setProps({
-                  nodeViews: {},
-              });
-          }
-          editor.contentComponent = null;
-          if (!editor.options.element.firstChild) {
-              return;
-          }
-          const newElement = document.createElement('div');
-          newElement.append(...editor.options.element.childNodes);
-          editor.setOptions({
-              element: newElement,
-          });
-      }
-      render() {
-          const { editor, innerRef, ...rest } = this.props;
-          return (React.createElement(React.Fragment, null,
-              React.createElement("div", { ref: mergeRefs(innerRef, this.editorContentRef), ...rest }),
-              React.createElement(Portals, { renderers: this.state.renderers })));
-      }
-  }
-  // EditorContent should be re-created whenever the Editor instance changes
-  const EditorContentWithKey = React.forwardRef((props, ref) => {
-      const key = React.useMemo(() => {
-          return Math.floor(Math.random() * 0xFFFFFFFF).toString();
-      }, [props.editor]);
-      // Can't use JSX here because it conflicts with the type definition of Vue's JSX, so use createElement
-      return React.createElement(PureEditorContent, {
-          key,
-          innerRef: ref,
-          ...props,
-      });
-  });
-  const EditorContent = React.memo(EditorContentWithKey);
-
   var shim = {exports: {}};
 
   var useSyncExternalStoreShim_production_min = {};
@@ -403,12 +282,161 @@
 
   var shimExports = shim.exports;
 
-  class Editor extends core.Editor {
-      constructor() {
-          super(...arguments);
-          this.contentComponent = null;
+  const mergeRefs = (...refs) => {
+      return (node) => {
+          refs.forEach(ref => {
+              if (typeof ref === 'function') {
+                  ref(node);
+              }
+              else if (ref) {
+                  ref.current = node;
+              }
+          });
+      };
+  };
+  /**
+   * This component renders all of the editor's node views.
+   */
+  const Portals = ({ contentComponent, }) => {
+      // For performance reasons, we render the node view portals on state changes only
+      const renderers = shimExports.useSyncExternalStore(contentComponent.subscribe, contentComponent.getSnapshot, contentComponent.getServerSnapshot);
+      // This allows us to directly render the portals without any additional wrapper
+      return (React.createElement(React.Fragment, null, Object.values(renderers)));
+  };
+  function getInstance() {
+      const subscribers = new Set();
+      let renderers = {};
+      return {
+          /**
+           * Subscribe to the editor instance's changes.
+           */
+          subscribe(callback) {
+              subscribers.add(callback);
+              return () => {
+                  subscribers.delete(callback);
+              };
+          },
+          getSnapshot() {
+              return renderers;
+          },
+          getServerSnapshot() {
+              return renderers;
+          },
+          /**
+           * Adds a new NodeView Renderer to the editor.
+           */
+          setRenderer(id, renderer) {
+              renderers = {
+                  ...renderers,
+                  [id]: ReactDOM.createPortal(renderer.reactElement, renderer.element, id),
+              };
+              subscribers.forEach(subscriber => subscriber());
+          },
+          /**
+           * Removes a NodeView Renderer from the editor.
+           */
+          removeRenderer(id) {
+              const nextRenderers = { ...renderers };
+              delete nextRenderers[id];
+              renderers = nextRenderers;
+              subscribers.forEach(subscriber => subscriber());
+          },
+      };
+  }
+  class PureEditorContent extends React.Component {
+      constructor(props) {
+          var _a;
+          super(props);
+          this.editorContentRef = React.createRef();
+          this.initialized = false;
+          this.state = {
+              hasContentComponentInitialized: Boolean((_a = props.editor) === null || _a === void 0 ? void 0 : _a.contentComponent),
+          };
+      }
+      componentDidMount() {
+          this.init();
+      }
+      componentDidUpdate() {
+          this.init();
+      }
+      init() {
+          const { editor } = this.props;
+          if (editor && !editor.isDestroyed && editor.options.element) {
+              if (editor.contentComponent) {
+                  return;
+              }
+              const element = this.editorContentRef.current;
+              element.append(...editor.options.element.childNodes);
+              editor.setOptions({
+                  element,
+              });
+              editor.contentComponent = getInstance();
+              // Has the content component been initialized?
+              if (!this.state.hasContentComponentInitialized) {
+                  // Subscribe to the content component
+                  this.unsubscribeToContentComponent = editor.contentComponent.subscribe(() => {
+                      this.setState(prevState => {
+                          if (!prevState.hasContentComponentInitialized) {
+                              return {
+                                  hasContentComponentInitialized: true,
+                              };
+                          }
+                          return prevState;
+                      });
+                      // Unsubscribe to previous content component
+                      if (this.unsubscribeToContentComponent) {
+                          this.unsubscribeToContentComponent();
+                      }
+                  });
+              }
+              editor.createNodeViews();
+              this.initialized = true;
+          }
+      }
+      componentWillUnmount() {
+          const { editor } = this.props;
+          if (!editor) {
+              return;
+          }
+          this.initialized = false;
+          if (!editor.isDestroyed) {
+              editor.view.setProps({
+                  nodeViews: {},
+              });
+          }
+          if (this.unsubscribeToContentComponent) {
+              this.unsubscribeToContentComponent();
+          }
+          editor.contentComponent = null;
+          if (!editor.options.element.firstChild) {
+              return;
+          }
+          const newElement = document.createElement('div');
+          newElement.append(...editor.options.element.childNodes);
+          editor.setOptions({
+              element: newElement,
+          });
+      }
+      render() {
+          const { editor, innerRef, ...rest } = this.props;
+          return (React.createElement(React.Fragment, null,
+              React.createElement("div", { ref: mergeRefs(innerRef, this.editorContentRef), ...rest }),
+              (editor === null || editor === void 0 ? void 0 : editor.contentComponent) && React.createElement(Portals, { contentComponent: editor.contentComponent })));
       }
   }
+  // EditorContent should be re-created whenever the Editor instance changes
+  const EditorContentWithKey = React.forwardRef((props, ref) => {
+      const key = React.useMemo(() => {
+          return Math.floor(Math.random() * 0xffffffff).toString();
+      }, [props.editor]);
+      // Can't use JSX here because it conflicts with the type definition of Vue's JSX, so use createElement
+      return React.createElement(PureEditorContent, {
+          key,
+          innerRef: ref,
+          ...props,
+      });
+  });
+  const EditorContent = React.memo(EditorContentWithKey);
 
   var withSelector = {exports: {}};
 
@@ -768,17 +796,20 @@
        * 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); });
+          const optionsToApply = {
+              ...this.options.current,
+              // Always call the most recent version of the callback function by default
+              onBeforeCreate: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onBeforeCreate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
+              onBlur: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
+              onCreate: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onCreate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
+              onDestroy: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onDestroy) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
+              onFocus: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
+              onSelectionUpdate: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onSelectionUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
+              onTransaction: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onTransaction) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
+              onUpdate: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
+              onContentError: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onContentError) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
+          };
+          const editor = new core.Editor(optionsToApply);
           // no need to keep track of the event listeners, they will be removed when the editor is destroyed
           return editor;
       }
@@ -970,6 +1001,13 @@
       return (React.createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
   };
 
+  class Editor extends core.Editor {
+      constructor() {
+          super(...arguments);
+          this.contentComponent = null;
+      }
+  }
+
   const FloatingMenu = (props) => {
       const [element, setElement] = React.useState(null);
       const { editor: currentEditor } = useCurrentEditor();
@@ -1021,7 +1059,9 @@
   const NodeViewWrapper = React.forwardRef((props, ref) => {
       const { onDragStart } = useReactNodeView();
       const Tag = props.as || 'div';
-      return (React.createElement(Tag, { ...props, ref: ref, "data-node-view-wrapper": "", onDragStart: onDragStart, style: {
+      return (
+      // @ts-ignore
+      React.createElement(Tag, { ...props, ref: ref, "data-node-view-wrapper": "", onDragStart: onDragStart, style: {
               whiteSpace: 'normal',
               ...props.style,
           } }));
@@ -1075,7 +1115,16 @@
                   this.element.setAttribute(key, attrs[key]);
               });
           }
-          this.render();
+          if (this.editor.isInitialized) {
+              // On first render, we need to flush the render synchronously
+              // Renders afterwards can be async, but this fixes a cursor positioning issue
+              ReactDOM.flushSync(() => {
+                  this.render();
+              });
+          }
+          else {
+              this.render();
+          }
       }
       render() {
           var _a, _b;
@@ -1086,7 +1135,7 @@
                   this.ref = ref;
               };
           }
-          this.reactElement = React.createElement(Component, { ...props });
+          this.reactElement = React.createElement(Component, props);
           (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) === null || _b === void 0 ? void 0 : _b.setRenderer(this.id, this);
       }
       updateProps(props = {}) {
@@ -1120,18 +1169,19 @@
               };
               this.component.displayName = capitalizeFirstChar(this.extension.name);
           }
-          const ReactNodeViewProvider = componentProps => {
-              const Component = this.component;
-              const onDragStart = this.onDragStart.bind(this);
-              const nodeViewContentRef = element => {
-                  if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {
-                      element.appendChild(this.contentDOMElement);
-                  }
-              };
-              return (React.createElement(React.Fragment, null,
-                  React.createElement(ReactNodeViewContext.Provider, { value: { onDragStart, nodeViewContentRef } },
-                      React.createElement(Component, { ...componentProps }))));
+          const onDragStart = this.onDragStart.bind(this);
+          const nodeViewContentRef = element => {
+              if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {
+                  element.appendChild(this.contentDOMElement);
+              }
           };
+          const context = { onDragStart, nodeViewContentRef };
+          const Component = this.component;
+          // For performance reasons, we memoize the provider component
+          // And all of the things it requires are declared outside of the component, so it doesn't need to re-render
+          const ReactNodeViewProvider = React.memo(componentProps => {
+              return (React.createElement(ReactNodeViewContext.Provider, { value: context }, React.createElement(Component, componentProps)));
+          });
           ReactNodeViewProvider.displayName = 'ReactNodeView';
           if (this.node.isLeaf) {
               this.contentDOMElement = null;