@tiptap/react 2.5.9 → 2.6.0

package/dist/index.js

@@ -5,127 +5,6 @@ import { Editor as Editor$1, NodeView } from '@tiptap/core';
 export * from '@tiptap/core';
 import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu';
 
-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) {
-            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 = 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 = {};
@@ -404,12 +283,161 @@ if (process.env.NODE_ENV === 'production') {
 
 var shimExports = shim.exports;
 
-class Editor extends Editor$1 {
-    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 = 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: {}};
 
@@ -769,17 +797,20 @@ class EditorInstanceManager {
      * 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 Editor$1(optionsToApply);
         // no need to keep track of the event listeners, they will be removed when the editor is destroyed
         return editor;
     }
@@ -971,6 +1002,13 @@ const BubbleMenu = (props) => {
     return (React.createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
 };
 
+class Editor extends Editor$1 {
+    constructor() {
+        super(...arguments);
+        this.contentComponent = null;
+    }
+}
+
 const FloatingMenu = (props) => {
     const [element, setElement] = useState(null);
     const { editor: currentEditor } = useCurrentEditor();
@@ -1022,7 +1060,9 @@ const NodeViewContent = props => {
 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,
         } }));
@@ -1076,7 +1116,16 @@ class ReactRenderer {
                 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
+            flushSync(() => {
+                this.render();
+            });
+        }
+        else {
+            this.render();
+        }
     }
     render() {
         var _a, _b;
@@ -1087,7 +1136,7 @@ class ReactRenderer {
                 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 = {}) {
@@ -1121,18 +1170,19 @@ class ReactNodeView extends NodeView {
             };
             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;