@handlewithcare/react-prosemirror 2.8.0 → 2.9.0-tiptap.24

package/dist/esm/components/DocNodeView.js

@@ -0,0 +1,45 @@
+import React, { cloneElement, createElement, forwardRef, memo, useImperativeHandle, useMemo, useRef } from "react";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
+import { ChildNodeViews, wrapInDeco } from "./ChildNodeViews.js";
+export const DocNodeView = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function DocNodeView(param, ref) {
+    let { as, node, getPos, decorations, innerDecorations, setMount, ...elementProps } = param;
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, ()=>innerRef.current);
+    useImperativeHandle(setMount, ()=>innerRef.current);
+    const nodeProps = useMemo(()=>({
+            node,
+            getPos,
+            decorations,
+            innerDecorations
+        }), [
+        node,
+        getPos,
+        decorations,
+        innerDecorations
+    ]);
+    const { childContextValue } = useNodeViewDescriptor(innerRef, ()=>{
+        const dom = innerRef.current;
+        return {
+            dom,
+            contentDOM: dom,
+            update () {
+                return true;
+            }
+        };
+    }, nodeProps);
+    const children = /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
+        getPos: getPos,
+        node: node,
+        innerDecorations: innerDecorations
+    }));
+    const props = {
+        ...elementProps,
+        suppressContentEditableWarning: true,
+        ref: innerRef
+    };
+    const element = as ? /*#__PURE__*/ cloneElement(as, props, children) : /*#__PURE__*/ createElement("div", props, children);
+    return nodeProps.decorations.reduce(wrapInDeco, element);
+}));

package/dist/esm/components/MarkView.js

@@ -0,0 +1,68 @@
+import React, { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from "react";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
+import { MarkViewDesc, sortViewDescs } from "../viewdesc.js";
+import { OutputSpec } from "./OutputSpec.js";
+export const MarkView = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function MarkView(param, ref) {
+    let { mark, getPos, children } = param;
+    const { siblingsRef, parentRef } = useContext(ChildDescriptorsContext);
+    const viewDescRef = useRef(undefined);
+    const childDescriptors = useRef([]);
+    const domRef = useRef(null);
+    useImperativeHandle(ref, ()=>{
+        return domRef.current;
+    }, []);
+    const outputSpec = useMemo(()=>mark.type.spec.toDOM?.(mark, true), [
+        mark
+    ]);
+    if (!outputSpec) throw new Error(`Mark spec for ${mark.type.name} is missing toDOM`);
+    useClientLayoutEffect(()=>{
+        const siblings = siblingsRef.current;
+        return ()=>{
+            if (!viewDescRef.current) return;
+            if (siblings.includes(viewDescRef.current)) {
+                const index = siblings.indexOf(viewDescRef.current);
+                siblings.splice(index, 1);
+            }
+        };
+    }, [
+        siblingsRef
+    ]);
+    useClientLayoutEffect(()=>{
+        if (!domRef.current) return;
+        const firstChildDesc = childDescriptors.current[0];
+        if (!viewDescRef.current) {
+            viewDescRef.current = new MarkViewDesc(parentRef.current, childDescriptors.current, getPos, mark, domRef.current, firstChildDesc?.dom.parentElement ?? domRef.current, {
+                dom: domRef.current,
+                contentDOM: firstChildDesc?.dom.parentElement ?? domRef.current
+            });
+        } else {
+            viewDescRef.current.parent = parentRef.current;
+            viewDescRef.current.spec.dom = viewDescRef.current.dom = domRef.current;
+            viewDescRef.current.children = childDescriptors.current;
+            viewDescRef.current.spec.contentDOM = viewDescRef.current.contentDOM = firstChildDesc?.dom.parentElement ?? domRef.current;
+            viewDescRef.current.mark = mark;
+        }
+        if (!siblingsRef.current.includes(viewDescRef.current)) {
+            siblingsRef.current.push(viewDescRef.current);
+        }
+        siblingsRef.current.sort(sortViewDescs);
+        for (const childDesc of childDescriptors.current){
+            childDesc.parent = viewDescRef.current;
+        }
+    });
+    const childContextValue = useMemo(()=>({
+            parentRef: viewDescRef,
+            siblingsRef: childDescriptors
+        }), [
+        childDescriptors,
+        viewDescRef
+    ]);
+    return /*#__PURE__*/ React.createElement(OutputSpec, {
+        ref: domRef,
+        outputSpec: outputSpec,
+        isMark: true
+    }, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, children));
+}));

package/dist/esm/components/NodeView.js

@@ -0,0 +1,35 @@
+import React, { memo, useContext, useMemo } from "react";
+import { NodeViewContext } from "../contexts/NodeViewContext.js";
+import { CustomNodeView } from "./CustomNodeView.js";
+import { DefaultNodeView } from "./DefaultNodeView.js";
+import { ReactNodeView } from "./ReactNodeView.js";
+export const NodeView = /*#__PURE__*/ memo(function NodeView(props) {
+    const { components, constructors } = useContext(NodeViewContext);
+    const component = components[props.node.type.name] ?? DefaultNodeView;
+    const constructor = constructors[props.node.type.name];
+    // Construct a wrapper component so that the node view remounts when either
+    // its component or constructor changes. A React node view would remount if
+    // its underlying component changed without this wrapper, but a custom node
+    // view otherwise uses the same React components for all custom node views.
+    const Component = useMemo(()=>{
+        if (constructor) {
+            return function NodeView(props) {
+                return /*#__PURE__*/ React.createElement(CustomNodeView, {
+                    constructor: constructor,
+                    ...props
+                });
+            };
+        } else {
+            return function NodeView(props) {
+                return /*#__PURE__*/ React.createElement(ReactNodeView, {
+                    component: component,
+                    ...props
+                });
+            };
+        }
+    }, [
+        constructor,
+        component
+    ]);
+    return /*#__PURE__*/ React.createElement(Component, props);
+});

package/dist/esm/components/NodeViewComponentProps.js

@@ -0,0 +1 @@
+export { };

package/dist/esm/components/ReactNodeView.js

@@ -0,0 +1,123 @@
+import React, { cloneElement, memo, useCallback, useMemo, useRef, useState } from "react";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { IgnoreMutationContext } from "../contexts/IgnoreMutationContext.js";
+import { SelectNodeContext } from "../contexts/SelectNodeContext.js";
+import { StopEventContext } from "../contexts/StopEventContext.js";
+import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
+import { ChildNodeViews, wrapInDeco } from "./ChildNodeViews.js";
+export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
+    let { component: Component, outerDeco, getPos, node, innerDeco } = param;
+    const [hasCustomSelectNode, setHasCustomSelectNode] = useState(false);
+    const [selected, setSelected] = useState(false);
+    const ref = useRef(null);
+    const innerRef = useRef(null);
+    const selectNodeRef = useRef(null);
+    const deselectNodeRef = useRef(null);
+    const stopEventRef = useRef(null);
+    const ignoreMutationRef = useRef(null);
+    const setSelectNode = useCallback((selectHandler, deselectHandler)=>{
+        selectNodeRef.current = selectHandler;
+        deselectNodeRef.current = deselectHandler;
+        setHasCustomSelectNode(true);
+        return ()=>{
+            selectNodeRef.current = null;
+            deselectNodeRef.current = null;
+            setHasCustomSelectNode(false);
+        };
+    }, []);
+    const setStopEvent = useCallback((handler)=>{
+        stopEventRef.current = handler;
+        return ()=>{
+            stopEventRef.current = null;
+        };
+    }, []);
+    const setIgnoreMutation = useCallback((handler)=>{
+        ignoreMutationRef.current = handler;
+        return ()=>{
+            ignoreMutationRef.current = null;
+            return ()=>{
+                ignoreMutationRef.current = null;
+            };
+        };
+    }, []);
+    const nodeProps = useMemo(()=>({
+            node: node,
+            getPos: getPos,
+            decorations: outerDeco,
+            innerDecorations: innerDeco
+        }), [
+        getPos,
+        innerDeco,
+        node,
+        outerDeco
+    ]);
+    const { childContextValue, contentDOM, nodeDOM } = useNodeViewDescriptor(ref, ()=>{
+        setSelected(false);
+        return {
+            dom: innerRef.current ?? ref.current,
+            update () {
+                return true;
+            },
+            multiType: true,
+            selectNode () {
+                const selectNode = selectNodeRef.current;
+                if (selectNode) {
+                    selectNode.call(this);
+                }
+                setSelected(true);
+            },
+            deselectNode () {
+                const deselectNode = deselectNodeRef.current;
+                if (deselectNode) {
+                    deselectNode.call(this);
+                }
+                setSelected(false);
+            },
+            stopEvent (event) {
+                const stopEvent = stopEventRef.current;
+                if (stopEvent) {
+                    return stopEvent.call(this, event);
+                }
+                return false;
+            },
+            ignoreMutation (mutation) {
+                const ignoreMutation = ignoreMutationRef.current;
+                if (ignoreMutation) {
+                    return ignoreMutation.call(this, mutation);
+                }
+                return false;
+            }
+        };
+    }, nodeProps);
+    const props = {
+        nodeProps,
+        ...!contentDOM && !nodeProps.node.isText && nodeDOM?.nodeName !== "BR" ? {
+            contentEditable: false,
+            suppressContentEditableWarning: true
+        } : null,
+        ...!hasCustomSelectNode && selected ? {
+            className: "ProseMirror-selectednode"
+        } : null,
+        ...!hasCustomSelectNode && selected || node.type.spec.draggable ? {
+            draggable: true
+        } : null,
+        ref: innerRef
+    };
+    const children = !node.isLeaf ? /*#__PURE__*/ React.createElement(ChildNodeViews, {
+        getPos: getPos,
+        node: node,
+        innerDecorations: innerDeco
+    }) : null;
+    const element = /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, /*#__PURE__*/ React.createElement(Component, props, children)), {
+        ref
+    });
+    return /*#__PURE__*/ React.createElement(SelectNodeContext.Provider, {
+        value: setSelectNode
+    }, /*#__PURE__*/ React.createElement(StopEventContext.Provider, {
+        value: setStopEvent
+    }, /*#__PURE__*/ React.createElement(IgnoreMutationContext.Provider, {
+        value: setIgnoreMutation
+    }, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, element))));
+});

package/dist/esm/components/nodes/ReactNodeView.js

@@ -62,28 +62,28 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
             selectNode () {
                 const selectNode = selectNodeRef.current;
                 if (selectNode) {
-                    selectNode();
+                    selectNode.call(this);
                 }
                 setSelected(true);
             },
             deselectNode () {
                 const deselectNode = deselectNodeRef.current;
                 if (deselectNode) {
-                    deselectNode();
+                    deselectNode.call(this);
                 }
                 setSelected(false);
             },
             stopEvent (event) {
                 const stopEvent = stopEventRef.current;
                 if (stopEvent) {
-                    return stopEvent(event);
+                    return stopEvent.call(this, event);
                 }
                 return false;
             },
             ignoreMutation (mutation) {
                 const ignoreMutation = ignoreMutationRef.current;
                 if (ignoreMutation) {
-                    return ignoreMutation(mutation);
+                    return ignoreMutation.call(this, mutation);
                 }
                 return false;
             }

package/dist/esm/hooks/useEditor.js

@@ -101,7 +101,11 @@ let didWarnValueDefaultValue = false;
         // running effects. Running effects will reattach selection
         // change listeners if the EditorView has been destroyed.
         if (view instanceof ReactEditorView && !view.isDestroyed) {
+            // Plugins might dispatch transactions from their
+            // view update lifecycle hooks
+            flushSyncRef.current = false;
             view.commitPendingEffects();
+            flushSyncRef.current = true;
         }
     });
     view.update(directEditorProps);

package/dist/esm/hooks/useEditorEffect.js

@@ -15,6 +15,10 @@ import { useLayoutGroupEffect } from "./useLayoutGroupEffect.js";
  * synchronously after all DOM mutations, but they do so
  * _after_ the EditorView has been updated, even when the
  * EditorView lives in an ancestor component.
+ *
+ * This hook can only be used in a component that is mounted
+ * as a child of the TiptapEditorView component, including
+ * React node view components.
  */ export function useEditorEffect(effect, dependencies) {
     const { view, flushSyncRef } = useContext(EditorContext);
     // The rules of hooks want `effect` to be included in the

package/dist/esm/hooks/useEditorEventCallback.js

@@ -15,11 +15,9 @@ function assertIsReactEditorView(view) {
  * The callback will be called with the EditorView instance
  * as its first argument.
  *
- * This hook is dependent on both the
- * `EditorViewContext.Provider` and the
- * `DeferredLayoutEffectProvider`. It can only be used in a
- * component that is mounted as a child of both of these
- * providers.
+ * This hook can only be used in a component that is mounted
+ * as a child of the TiptapEditorView component, including
+ * React node view components.
  */ export function useEditorEventCallback(callback) {
     const ref = useRef(callback);
     const { view } = useContext(EditorContext);
@@ -33,7 +31,7 @@ function assertIsReactEditorView(view) {
             args[_key] = arguments[_key];
         }
         assertIsReactEditorView(view);
-        return ref.current(view, ...args);
+        return ref.current.call(this, view, ...args);
     }, [
         view
     ]);

package/dist/esm/tiptap/ReactProseMirrorNodeView.js

@@ -0,0 +1,22 @@
+import { NodeView } from "@tiptap/core";
+/**
+ * Subclass of Tiptap's NodeView to be used in tiptapNodeView.
+ *
+ * Allows us to pass in an existing dom and contentODM from React ProseMirror's
+ * ViewDesc, so that we can call Tiptap's default stopEvent and ignoreMutation
+ * methods
+ */ export class ReactProseMirrorNodeView extends NodeView {
+    _dom;
+    _contentDOM;
+    constructor(component, props, dom, contentDOM, options){
+        super(component, props, options);
+        this._dom = dom;
+        this._contentDOM = contentDOM;
+    }
+    get dom() {
+        return this._dom;
+    }
+    get contentDOM() {
+        return this._contentDOM;
+    }
+}

package/dist/esm/tiptap/TiptapEditor.js

@@ -0,0 +1,24 @@
+import { Editor } from "@tiptap/core";
+import { EditorState } from "prosemirror-state";
+import { StaticEditorView } from "../StaticEditorView.js";
+export class TiptapEditor extends Editor {
+    constructor(options = {}){
+        super({
+            ...options,
+            element: null
+        });
+    }
+    get view() {
+        return(// @ts-expect-error private property
+        this.editorView ?? new StaticEditorView({
+            state: EditorState.create({
+                schema: this.extensionManager.schema
+            }),
+            ...this.options.editorProps,
+            attributes: {
+                role: "textbox",
+                ...this.options.editorProps.attributes
+            }
+        }));
+    }
+}

package/dist/esm/tiptap/TiptapEditorContent.js

@@ -0,0 +1,91 @@
+import React, { useContext, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+import { ProseMirrorDoc } from "../components/ProseMirrorDoc.js";
+import { useEditorEffect } from "../hooks/useEditorEffect.js";
+import { TiptapEditorContext } from "./contexts/TiptapEditorContext.js";
+/**
+ * This component renders all of the editor's registered "React renderers".
+ */ const Portals = (param)=>{
+    let { contentComponent } = param;
+    const renderers = useSyncExternalStore(contentComponent.subscribe, contentComponent.getSnapshot, contentComponent.getServerSnapshot);
+    return /*#__PURE__*/ 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 React Renderer to the editor.
+     */ setRenderer (id, renderer) {
+            renderers = {
+                ...renderers,
+                [id]: /*#__PURE__*/ createPortal(renderer.reactElement, renderer.element, id)
+            };
+            subscribers.forEach((subscriber)=>subscriber());
+        },
+        /**
+     * Removes a React Renderer from the editor.
+     */ removeRenderer (id) {
+            const nextRenderers = {
+                ...renderers
+            };
+            delete nextRenderers[id];
+            renderers = nextRenderers;
+            subscribers.forEach((subscriber)=>subscriber());
+        }
+    };
+}
+export function TiptapEditorContent(param) {
+    let { editor: editorProp, ...props } = param;
+    const editor = editorProp;
+    const { onEditorInitialize, onEditorDeinitialize } = useContext(TiptapEditorContext);
+    useEditorEffect((view)=>{
+        if (editor.view === view) {
+            return;
+        }
+        // @ts-expect-error private property
+        editor.editorView = view;
+        editor.contentComponent = getInstance();
+        // @ts-expect-error private method
+        editor.injectCSS();
+        const dom = view.dom;
+        dom.editor = editor;
+        setTimeout(()=>{
+            if (editor.isDestroyed) {
+                return;
+            }
+            editor.commands.focus(editor.options.autofocus);
+            editor.emit("create", {
+                editor
+            });
+            editor.isInitialized = true;
+            onEditorInitialize();
+        });
+        return ()=>{
+            editor.isInitialized = false;
+            editor.contentComponent = null;
+            onEditorDeinitialize();
+        };
+    }, [
+        editor,
+        onEditorDeinitialize,
+        onEditorInitialize
+    ]);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ProseMirrorDoc, props), editor?.contentComponent && /*#__PURE__*/ React.createElement(Portals, {
+        contentComponent: editor.contentComponent
+    }));
+}

package/dist/esm/tiptap/TiptapEditorView.js

@@ -0,0 +1,69 @@
+import { EditorContext } from "@tiptap/react";
+import React, { useCallback, useMemo, useState } from "react";
+import { ProseMirror } from "../components/ProseMirror.js";
+import { useForceUpdate } from "../hooks/useForceUpdate.js";
+import { TiptapEditorContext } from "./contexts/TiptapEditorContext.js";
+/**
+ * Render a Tiptap-compatible React ProseMirror editor.
+ */ export function TiptapEditorView(param) {
+    let { editor, nodeViews, markViews, children, static: isStatic = false } = param;
+    const [isEditorInitialized, setIsEditorInitialized] = useState(editor.isInitialized);
+    const forceUpdate = useForceUpdate();
+    const dispatchTransaction = useCallback((tr)=>{
+        // @ts-expect-error calling private method
+        editor.dispatchTransaction(tr);
+        // Tiptap's dispatchTransaction doesn't trigger
+        // a re-render, so we need to manually force
+        // one to ensure that React stays in sync.
+        forceUpdate();
+    }, [
+        editor,
+        forceUpdate
+    ]);
+    const initialEditorProps = {
+        ...editor.options.editorProps,
+        attributes: {
+            role: "textbox",
+            ...editor.options.editorProps?.attributes
+        }
+    };
+    const { nodeViews: customNodeViews, markViews: customMarkViews } = editor.isDestroyed ? {
+        nodeViews: undefined,
+        markViews: undefined
+    } : editor.view.props;
+    const contextValue = useMemo(()=>({
+            editor
+        }), [
+        editor
+    ]);
+    const onEditorInitialize = useCallback(()=>{
+        setIsEditorInitialized(true);
+    }, []);
+    const onEditorDeinitialize = useCallback(()=>{
+        setIsEditorInitialized(false);
+    }, []);
+    const tiptapEditorContextValue = useMemo(()=>({
+            isEditorInitialized,
+            onEditorInitialize,
+            onEditorDeinitialize
+        }), [
+        isEditorInitialized,
+        onEditorDeinitialize,
+        onEditorInitialize
+    ]);
+    return /*#__PURE__*/ React.createElement(ProseMirror, {
+        static: isStatic,
+        className: "tiptap",
+        ...initialEditorProps,
+        markViews: markViews,
+        customMarkViews: customMarkViews,
+        nodeViews: nodeViews,
+        customNodeViews: customNodeViews,
+        state: editor.state,
+        dispatchTransaction: dispatchTransaction
+    }, /*#__PURE__*/ React.createElement(EditorContext.Provider, {
+        value: contextValue
+    }, /*#__PURE__*/ React.createElement(TiptapEditorContext.Provider, {
+        value: tiptapEditorContextValue
+    }, children)));
+}

package/dist/esm/tiptap/TiptapNodeView.js

@@ -0,0 +1,22 @@
+import { NodeView } from "@tiptap/core";
+/**
+ * Subclass of Tiptap's NodeView to be used in tiptapNodeView.
+ *
+ * Allows us to pass in an existing dom and contentODM from React ProseMirror's
+ * ViewDesc, so that we can call Tiptap's default stopEvent and ignoreMutation
+ * methods
+ */ export class ReactProseMirrorNodeView extends NodeView {
+    _dom;
+    _contentDOM;
+    constructor(component, props, dom, contentDOM, options){
+        super(component, props, options);
+        this._dom = dom;
+        this._contentDOM = contentDOM;
+    }
+    get dom() {
+        return this._dom;
+    }
+    get contentDOM() {
+        return this._contentDOM;
+    }
+}

package/dist/esm/tiptap/contexts/TiptapEditorContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const TiptapEditorContext = createContext(null);

package/dist/esm/tiptap/extensions/ReactProseMirror.js

@@ -0,0 +1,30 @@
+import { Extension } from "@tiptap/core";
+import { reorderSiblingsOnTransaction } from "../../commands/reorderSiblings.js";
+import { reactKeys } from "../../plugins/reactKeys.js";
+export const ReactProseMirror = Extension.create({
+    name: "@handlewithcare/react-prosemirror/reactKeys",
+    addProseMirrorPlugins () {
+        return [
+            reactKeys()
+        ];
+    },
+    addCommands () {
+        return {
+            /**
+       * Command that reorders the adjacent nodes starting
+       * at the provided position.
+       *
+       * @param pos - The `start` position of the parent of the nodes being reordered
+       * @param order - The new order for the nodes, expressed as an array of indices. For
+       *                example, to swap the first two nodes in a set of three, `order`
+       *                would be set to `[1, 0, 2]`. To move the first node to the end,
+       *                and keep the other two in relative order, set `order` to `[1, 2, 0]`.
+       */ reorderSiblings (initialPos, order) {
+                return function reorderSiblingsCommand(param) {
+                    let { tr, state, dispatch } = param;
+                    return reorderSiblingsOnTransaction(initialPos, order, tr, state, dispatch);
+                };
+            }
+        };
+    }
+});

package/dist/esm/tiptap/hooks/useIsInReactProseMirror.js

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+import { EditorContext } from "../../contexts/EditorContext.js";
+export function useIsInReactProseMirror() {
+    return useContext(EditorContext) !== null;
+}

package/dist/esm/tiptap/hooks/useTiptapEditor.js

@@ -0,0 +1,33 @@
+import { useEditor } from "@tiptap/react";
+import { StaticEditorView } from "../../StaticEditorView.js";
+export function useTiptapEditor(options, deps) {
+    const editor = useEditor({
+        ...options,
+        element: null
+    }, deps);
+    // @ts-expect-error private property
+    editor.editorView ??= new StaticEditorView({
+        // @ts-expect-error private property
+        state: editor.editorState,
+        ...editor.options.editorProps,
+        attributes: {
+            role: "textbox",
+            ...editor.options.editorProps.attributes
+        }
+    });
+    // @ts-expect-error private property
+    const stateHasPlugins = !!editor.editorState.plugins.length;
+    const stateNeedsReconfigure = !stateHasPlugins && !editor.isDestroyed;
+    if (stateNeedsReconfigure) {
+        const managerPlugins = editor.extensionManager.plugins;
+        if (managerPlugins.length) {
+            // @ts-expect-error private property
+            editor.editorState = editor.editorState.reconfigure({
+                plugins: editor.extensionManager.plugins
+            });
+            // @ts-expect-error private property
+            editor.editorView.updateState(editor.editorState);
+        }
+    }
+    return editor;
+}