@stesura/react-prosemirror 3.2.11-stesura.1

package/dist/esm/props.js

@@ -0,0 +1,267 @@
+import cx from "classnames";
+let patched = false;
+function patchConsoleError() {
+    if (patched) return;
+    /* eslint-disable no-console */ const consoleError = console.error;
+    console.error = function() {
+        for(var _len = arguments.length, data = new Array(_len), _key = 0; _key < _len; _key++){
+            data[_key] = arguments[_key];
+        }
+        const [message, prop, correction] = data;
+        if (typeof message === "string" && message.includes("Invalid DOM property `%s`. Did you mean `%s`?") && prop === "STYLE" && correction === "style") {
+            return;
+        }
+        consoleError(...data);
+    };
+    patched = true;
+/* eslint-enable no-console */ }
+function mergeStyleProps(a, b) {
+    if (!("STYLE" in a) || typeof a.STYLE !== "string") {
+        if (!("STYLE" in b) || typeof b.STYLE !== "string") {
+            return undefined;
+        }
+        return b.STYLE;
+    }
+    if (!("STYLE" in b) || typeof b.STYLE !== "string") {
+        return a.STYLE;
+    }
+    return `${a.STYLE.match(/;\s*$/) ? a.STYLE : `${a.STYLE};`} ${b.STYLE}`;
+}
+/**
+ * Merges two sets of React props. Class names
+ * will be concatenated and style objects
+ * will be merged.
+ */ export function mergeReactProps(a, b) {
+    return {
+        ...a,
+        ...b,
+        className: cx(a.className, b.className),
+        STYLE: mergeStyleProps(a, b),
+        style: {
+            ...a.style,
+            ...b.style
+        }
+    };
+}
+/**
+ * Given a record of HTML attributes, returns tho
+ * equivalent React props.
+ */ export function htmlAttrsToReactProps(attrs) {
+    patchConsoleError();
+    const props = {};
+    for (const [attrName, attrValue] of Object.entries(attrs)){
+        switch(attrName.toLowerCase()){
+            case "class":
+                {
+                    props.className = attrValue;
+                    break;
+                }
+            case "style":
+                {
+                    // HACK: React expects the `style` prop to be an
+                    // object mapping from CSS property name to value.
+                    // However, it will pass un-recognized props through
+                    // to the underlying DOM element, and HTML attributes
+                    // are case insensitive. So we use `STYLE` instead,
+                    // which React doesn't intercept, but the DOM treats
+                    // as `style`
+                    props.STYLE = attrValue;
+                    break;
+                }
+            case "autocapitalize":
+                {
+                    props.autoCapitalize = attrValue;
+                    break;
+                }
+            case "contenteditable":
+                {
+                    if (attrValue === "" || attrValue === "true") {
+                        props.contentEditable = true;
+                        break;
+                    }
+                    if (attrValue === "false") {
+                        props.contentEditable = false;
+                        break;
+                    }
+                    if (attrValue === "plaintext-only") {
+                        props.contentEditable = "plaintext-only";
+                        break;
+                    }
+                    props.contentEditable = null;
+                    break;
+                }
+            case "draggable":
+                {
+                    props.draggable = attrValue != null;
+                    break;
+                }
+            case "enterkeyhint":
+                {
+                    props.enterKeyHint = attrValue;
+                    break;
+                }
+            case "for":
+                {
+                    props.htmlFor = attrValue;
+                    break;
+                }
+            case "hidden":
+                {
+                    props.hidden = attrValue;
+                    break;
+                }
+            case "inputmode":
+                {
+                    props.inputMode = attrValue;
+                    break;
+                }
+            case "itemprop":
+                {
+                    props.itemProp = attrValue;
+                    break;
+                }
+            case "spellcheck":
+                {
+                    if (attrValue === "" || attrValue === "true") {
+                        props.spellCheck = true;
+                        break;
+                    }
+                    if (attrValue === "false") {
+                        props.spellCheck = false;
+                        break;
+                    }
+                    props.spellCheck = null;
+                    break;
+                }
+            case "tabindex":
+                {
+                    const numValue = parseInt(attrValue, 10);
+                    if (!Number.isNaN(numValue)) {
+                        props.tabIndex = numValue;
+                    }
+                    break;
+                }
+            case "autocomplete":
+                {
+                    props.autoComplete = attrValue;
+                    break;
+                }
+            case "autofocus":
+                {
+                    props.autoFocus = attrValue != null;
+                    break;
+                }
+            case "formaction":
+                {
+                    props.formAction = attrValue;
+                    break;
+                }
+            case "formenctype":
+                {
+                    props.formEnctype = attrValue;
+                    break;
+                }
+            case "formmethod":
+                {
+                    props.formMethod = attrValue;
+                    break;
+                }
+            case "formnovalidate":
+                {
+                    props.formNoValidate = attrValue;
+                    break;
+                }
+            case "formtarget":
+                {
+                    props.formTarget = attrValue;
+                    break;
+                }
+            case "maxlength":
+                {
+                    const numValue = parseInt(attrValue, 10);
+                    if (!Number.isNaN(numValue)) {
+                        props.maxLength = attrValue;
+                    }
+                    break;
+                }
+            case "minlength":
+                {
+                    const numValue = parseInt(attrValue, 10);
+                    if (!Number.isNaN(numValue)) {
+                        props.minLength = attrValue;
+                    }
+                    break;
+                }
+            case "max":
+                {
+                    const numValue = parseInt(attrValue, 10);
+                    if (!Number.isNaN(numValue)) {
+                        props.max = attrValue;
+                    }
+                    break;
+                }
+            case "min":
+                {
+                    const numValue = parseInt(attrValue, 10);
+                    if (!Number.isNaN(numValue)) {
+                        props.min = attrValue;
+                    }
+                    break;
+                }
+            case "multiple":
+                {
+                    props.multiple = attrValue != null;
+                    break;
+                }
+            case "readonly":
+                {
+                    props.readOnly = attrValue != null;
+                    break;
+                }
+            case "required":
+                {
+                    props.required = attrValue != null;
+                    break;
+                }
+            case "size":
+                {
+                    const numValue = parseInt(attrValue, 10);
+                    if (!Number.isNaN(numValue)) {
+                        props.size = attrValue;
+                    }
+                    break;
+                }
+            case "step":
+                {
+                    if (attrValue === "any") {
+                        props.step = attrValue;
+                        break;
+                    }
+                    const numValue = parseInt(attrValue, 10);
+                    if (!Number.isNaN(numValue) && numValue > 0) {
+                        props.step = attrValue;
+                    }
+                    break;
+                }
+            case "disabled":
+                {
+                    props.disabled = attrValue != null;
+                    break;
+                }
+            case "rows":
+                {
+                    const numValue = parseInt(attrValue, 10);
+                    if (!Number.isNaN(numValue)) {
+                        props.rows = attrValue;
+                    }
+                    break;
+                }
+            default:
+                {
+                    props[attrName] = attrValue;
+                    break;
+                }
+        }
+    }
+    return props;
+}

package/dist/esm/refs.js

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+export function useMergedDOMRefs() {
+    for(var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++){
+        refs[_key] = arguments[_key];
+    }
+    return useCallback((value)=>{
+        refs.forEach((ref)=>{
+            if (typeof ref === "function") {
+                ref(value);
+                return;
+            }
+            if (ref) {
+                ref.current = value;
+            }
+        });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, refs);
+}

package/dist/esm/testing/editorViewTestHelpers.js

@@ -0,0 +1,86 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */ import { render } from "@testing-library/react";
+import { expect } from "expect";
+import { Node } from "prosemirror-model";
+import { EditorState, TextSelection } from "prosemirror-state";
+import { doc, eq, p, schema } from "prosemirror-test-builder";
+import React from "react";
+import { ProseMirror } from "../components/ProseMirror.js";
+import { ProseMirrorDoc } from "../components/ProseMirrorDoc.js";
+import { useEditorEffect } from "../hooks/useEditorEffect.js";
+import { reactKeys } from "../plugins/reactKeys.js";
+const toEqualNode = function(actual, expected) {
+    if (!(actual instanceof Node && expected instanceof Node)) {
+        throw new Error("Must be comparing nodes");
+    }
+    const pass = eq(actual, expected);
+    return {
+        message: ()=>// `this` context will have correct typings
+            `expected ${this.utils.printReceived(actual)} ${pass ? "not " : ""}to equal ${this.utils.printExpected(expected)}`,
+        pass
+    };
+};
+expect.extend({
+    toEqualNode
+});
+export function tempEditor(param) {
+    let { doc: startDoc, selection, controlled, plugins, ...props } = param;
+    startDoc = startDoc ?? doc(p());
+    const state = EditorState.create({
+        doc: startDoc,
+        schema,
+        selection: selection ?? (startDoc.tag?.a ? TextSelection.create(startDoc, startDoc.tag.a, startDoc.tag?.b) : undefined),
+        plugins: [
+            ...plugins ?? [],
+            reactKeys()
+        ]
+    });
+    let view = null;
+    function Test() {
+        useEditorEffect((v)=>{
+            view = v;
+        });
+        return null;
+    }
+    const { rerender, unmount } = render(/*#__PURE__*/ React.createElement(ProseMirror, {
+        ...controlled ? {
+            state
+        } : {
+            defaultState: state
+        },
+        ...props
+    }, /*#__PURE__*/ React.createElement(Test, null), /*#__PURE__*/ React.createElement(ProseMirrorDoc, null)));
+    function rerenderEditor() {
+        let { ...newProps } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+        rerender(/*#__PURE__*/ React.createElement(ProseMirror, {
+            ...controlled ? {
+                state
+            } : {
+                defaultState: state
+            },
+            ...props,
+            ...newProps
+        }, /*#__PURE__*/ React.createElement(Test, null), /*#__PURE__*/ React.createElement(ProseMirrorDoc, null)));
+        return view;
+    }
+    return {
+        view: view,
+        rerender: rerenderEditor,
+        unmount
+    };
+}
+function findTextNodeInner(node, text) {
+    if (node.nodeType == 3) {
+        if (node.nodeValue == text) return node;
+    } else if (node.nodeType == 1) {
+        for(let ch = node.firstChild; ch; ch = ch.nextSibling){
+            const found = findTextNodeInner(ch, text);
+            if (found) return found;
+        }
+    }
+    return undefined;
+}
+export function findTextNode(node, text) {
+    const found = findTextNodeInner(node, text);
+    if (found) return found;
+    throw new Error("Unable to find matching text node");
+}

package/dist/esm/testing/setupProseMirrorView.js

@@ -0,0 +1,76 @@
+/* Copyright (c) The New York Times Company */ let oldElementFromPoint;
+let oldGetClientRects;
+let oldGetBoundingClientRect;
+const mockElementFromPoint = ()=>globalThis.document.body;
+const mockGetBoundingClientRect = ()=>{
+    return {
+        bottom: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+        width: 0,
+        x: 0,
+        y: 0,
+        toJSON () {
+            return {
+                bottom: 0,
+                height: 0,
+                left: 0,
+                right: 0,
+                top: 0,
+                width: 0,
+                x: 0,
+                y: 0
+            };
+        }
+    };
+};
+const mockGetClientRects = ()=>{
+    const list = [
+        {
+            bottom: 0,
+            height: 0,
+            left: 0,
+            right: 0,
+            top: 0,
+            width: 0,
+            x: 0,
+            y: 0,
+            toJSON () {
+                return {
+                    bottom: 0,
+                    height: 0,
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    width: 0,
+                    x: 0,
+                    y: 0
+                };
+            }
+        }
+    ];
+    const domRectList = Object.assign(list, {
+        item (index) {
+            return list[index] ?? null;
+        }
+    });
+    return domRectList;
+};
+export function setupProseMirrorView() {
+    oldElementFromPoint = Document.prototype.elementFromPoint;
+    Document.prototype.elementFromPoint = mockElementFromPoint;
+    oldGetClientRects = Range.prototype.getClientRects;
+    Range.prototype.getClientRects = mockGetClientRects;
+    oldGetBoundingClientRect = Range.prototype.getBoundingClientRect;
+    Range.prototype.getBoundingClientRect = mockGetBoundingClientRect;
+}
+export function teardownProseMirrorView() {
+    // @ts-expect-error jsdom actually doesn't implement these, so they might be undefined
+    Document.prototype.elementFromPoint = oldElementFromPoint;
+    // @ts-expect-error jsdom actually doesn't implement these, so they might be undefined
+    Range.prototype.getClientRects = oldGetClientRects;
+    // @ts-expect-error jsdom actually doesn't implement these, so they might be undefined
+    Range.prototype.getBoundingClientRect = oldGetBoundingClientRect;
+}

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 contentDOM 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,99 @@
+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());
+        }
+    };
+}
+/**
+ * Renders the actual editable ProseMirror document.
+ *
+ * This **must** be passed as a child to the `TiptapEditorView`
+ * component. It may be wrapped in other components, and other
+ * childern may be passed before or after. It must be passed the
+ * same `editor` as is passed to the `TiptapEditorView`.
+ */ 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;
+            editor.destroy();
+            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,76 @@
+import { EditorContext } from "@tiptap/react";
+import cx from "classnames";
+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, nodeViewComponents, markViewComponents, children, static: isStatic = false } = param;
+    const [isEditorInitialized, setIsEditorInitialized] = useState(editor.isInitialized);
+    const attributesProp = editor.options.editorProps?.attributes;
+    const [attributes, setAttributes] = useState(typeof attributesProp === "function" ? attributesProp(editor.state) : attributesProp);
+    const forceUpdate = useForceUpdate();
+    const dispatchTransaction = useCallback((tr)=>{
+        // @ts-expect-error calling private method
+        editor.dispatchTransaction(tr);
+        if (typeof attributesProp === "function") {
+            setAttributes(attributesProp(editor.state));
+        }
+        // Tiptap's dispatchTransaction doesn't trigger
+        // a re-render, so we need to manually force
+        // one to ensure that React stays in sync.
+        forceUpdate();
+    }, [
+        attributesProp,
+        editor,
+        forceUpdate
+    ]);
+    const editorProps = {
+        ...editor.options.editorProps,
+        attributes: {
+            role: "textbox",
+            ...attributes,
+            class: cx(attributes?.class, "tiptap")
+        }
+    };
+    const { nodeViews, markViews } = 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,
+        ...editorProps,
+        markViewComponents: markViewComponents,
+        markViews: markViews,
+        nodeViewComponents: nodeViewComponents,
+        nodeViews: nodeViews,
+        state: editor.state,
+        dispatchTransaction: dispatchTransaction
+    }, /*#__PURE__*/ React.createElement(EditorContext.Provider, {
+        value: contextValue
+    }, /*#__PURE__*/ React.createElement(TiptapEditorContext.Provider, {
+        value: tiptapEditorContextValue
+    }, children)));
+}

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

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