@handlewithcare/react-prosemirror 2.0.0

package/dist/esm/decorations/viewDecorations.js

@@ -0,0 +1,163 @@
+import { DecorationSet } from "prosemirror-view";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const none = [], noSpec = {};
+const empty = DecorationSet.empty;
+// An abstraction that allows the code dealing with decorations to
+// treat multiple DecorationSet objects as if it were a single object
+// with (a subset of) the same interface.
+let DecorationGroup = class DecorationGroup {
+    members;
+    constructor(members){
+        this.members = members;
+    }
+    map(mapping, doc) {
+        const mappedDecos = this.members.map((member)=>member.map(mapping, doc, noSpec));
+        return DecorationGroup.from(mappedDecos);
+    }
+    forChild(offset, child) {
+        if (child.isLeaf) return DecorationSet.empty;
+        let found = [];
+        for(let i = 0; i < this.members.length; i++){
+            const result = this.members[i].forChild(offset, child);
+            if (result == empty) continue;
+            if (result instanceof DecorationGroup) found = found.concat(result.members);
+            else found.push(result);
+        }
+        return DecorationGroup.from(found);
+    }
+    eq(other) {
+        if (!(other instanceof DecorationGroup) || other.members.length != this.members.length) return false;
+        for(let i = 0; i < this.members.length; i++)if (!this.members[i].eq(other.members[i])) return false;
+        return true;
+    }
+    locals(node) {
+        let result, sorted = true;
+        for(let i = 0; i < this.members.length; i++){
+            const locals = this.members[i].localsInner(node);
+            if (!locals.length) continue;
+            if (!result) {
+                result = locals;
+            } else {
+                if (sorted) {
+                    result = result.slice();
+                    sorted = false;
+                }
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                for(let j = 0; j < locals.length; j++)result.push(locals[j]);
+            }
+        }
+        return result ? removeOverlap(sorted ? result : result.sort(byPos)) : none;
+    }
+    // Create a group for the given array of decoration sets, or return
+    // a single set when possible.
+    static from(members) {
+        switch(members.length){
+            case 0:
+                return empty;
+            case 1:
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                return members[0];
+            default:
+                return new DecorationGroup(members.every((m)=>m instanceof DecorationSet) ? members : members.reduce((r, m)=>r.concat(m instanceof DecorationSet ? m : m.members), []));
+        }
+    }
+    forEachSet(f) {
+        for(let i = 0; i < this.members.length; i++)// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this.members[i].forEachSet(f);
+    }
+};
+// Used to sort decorations so that ones with a low start position
+// come first, and within a set with the same start position, those
+// with an smaller end position come first.
+function byPos(a, b) {
+    return a.from - b.from || a.to - b.to;
+}
+// Scan a sorted array of decorations for partially overlapping spans,
+// and split those so that only fully overlapping spans are left (to
+// make subsequent rendering easier). Will return the input array if
+// no partially overlapping spans are found (the common case).
+function removeOverlap(spans) {
+    let working = spans;
+    for(let i = 0; i < working.length - 1; i++){
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const span = working[i];
+        if (span.from != span.to) for(let j = i + 1; j < working.length; j++){
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const next = working[j];
+            if (next.from == span.from) {
+                if (next.to != span.to) {
+                    if (working == spans) working = spans.slice();
+                    // Followed by a partially overlapping larger span. Split that
+                    // span.
+                    working[j] = next.copy(next.from, span.to);
+                    insertAhead(working, j + 1, next.copy(span.to, next.to));
+                }
+                continue;
+            } else {
+                if (next.from < span.to) {
+                    if (working == spans) working = spans.slice();
+                    // The end of this one overlaps with a subsequent span. Split
+                    // this one.
+                    working[i] = span.copy(span.from, next.from);
+                    insertAhead(working, j, span.copy(next.from, span.to));
+                }
+                break;
+            }
+        }
+    }
+    return working;
+}
+function insertAhead(array, i, deco) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    while(i < array.length && byPos(deco, array[i]) > 0)i++;
+    array.splice(i, 0, deco);
+}
+const ViewDecorationsCache = new WeakMap();
+/**
+ * Produces the DecorationSource for the current state, based
+ * on the decorations editor prop.
+ *
+ * The return value of this function is memoized; if it is to
+ * return an equivalent value to the last time it was called for
+ * a given EditorView, it will return exactly that previous value.
+ *
+ * This makes it safe to call in a React render function, even
+ * if its result is used in a dependencies array for a hook.
+ */ export function viewDecorations(view, cursorWrapper) {
+    const found = [];
+    view.someProp("decorations", (f)=>{
+        const result = f(view.state);
+        if (result && result != empty) found.push(result);
+    });
+    // We don't have access to types for view.cursorWrapper here
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (cursorWrapper) {
+        found.push(// eslint-disable-next-line @typescript-eslint/no-explicit-any
+        DecorationSet.create(view.state.doc, [
+            cursorWrapper
+        ]));
+    }
+    const previous = ViewDecorationsCache.get(view);
+    if (!previous) {
+        const result = DecorationGroup.from(found);
+        ViewDecorationsCache.set(view, result);
+        return result;
+    }
+    let numPrevious = 0;
+    let areSetsEqual = true;
+    previous.forEachSet((set)=>{
+        const next = found[numPrevious++];
+        if (next !== set) {
+            areSetsEqual = false;
+        }
+    });
+    if (numPrevious !== found.length) {
+        areSetsEqual = false;
+    }
+    if (!areSetsEqual) {
+        const result = DecorationGroup.from(found);
+        ViewDecorationsCache.set(view, result);
+        return result;
+    }
+    return previous;
+}

package/dist/esm/dom.js

@@ -0,0 +1,105 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-non-null-assertion */ export const domIndex = function(node) {
+    for(let index = 0;; index++){
+        node = node.previousSibling;
+        if (!node) return index;
+    }
+};
+export const parentNode = function(node) {
+    const parent = node.assignedSlot || node.parentNode;
+    return parent && parent.nodeType == 11 ? parent.host : parent;
+};
+let reusedRange = null;
+// Note that this will always return the same range, because DOM range
+// objects are every expensive, and keep slowing down subsequent DOM
+// updates, for some reason.
+export const textRange = function(node, from, to) {
+    const range = reusedRange || (reusedRange = document.createRange());
+    range.setEnd(node, to == null ? node.nodeValue.length : to);
+    range.setStart(node, from || 0);
+    return range;
+};
+// Scans forward and backward through DOM positions equivalent to the
+// given one to see if the two are in the same place (i.e. after a
+// text node vs at the end of that text node)
+export const isEquivalentPosition = function(node, off, targetNode, targetOff) {
+    return targetNode && (scanFor(node, off, targetNode, targetOff, -1) || scanFor(node, off, targetNode, targetOff, 1));
+};
+const atomElements = /^(img|br|input|textarea|hr)$/i;
+function scanFor(node, off, targetNode, targetOff, dir) {
+    for(;;){
+        if (node == targetNode && off == targetOff) return true;
+        if (off == (dir < 0 ? 0 : nodeSize(node))) {
+            const parent = node.parentNode;
+            if (!parent || parent.nodeType != 1 || hasBlockDesc(node) || atomElements.test(node.nodeName) || node.contentEditable == "false") return false;
+            off = domIndex(node) + (dir < 0 ? 0 : 1);
+            node = parent;
+        } else if (node.nodeType == 1) {
+            node = node.childNodes[off + (dir < 0 ? -1 : 0)];
+            if (node.contentEditable == "false") return false;
+            off = dir < 0 ? nodeSize(node) : 0;
+        } else {
+            return false;
+        }
+    }
+}
+export function nodeSize(node) {
+    return node.nodeType == 3 ? node.nodeValue.length : node.childNodes.length;
+}
+export function isOnEdge(node, offset, parent) {
+    for(let atStart = offset == 0, atEnd = offset == nodeSize(node); atStart || atEnd;){
+        if (node == parent) return true;
+        const index = domIndex(node);
+        node = node.parentNode;
+        if (!node) return false;
+        atStart = atStart && index == 0;
+        atEnd = atEnd && index == nodeSize(node);
+    }
+    return false;
+}
+export function hasBlockDesc(dom) {
+    let desc;
+    for(let cur = dom; cur; cur = cur.parentNode)if (desc = cur.pmViewDesc) break;
+    return desc && desc.node && desc.node.isBlock && (desc.dom == dom || desc.contentDOM == dom);
+}
+// Work around Chrome issue https://bugs.chromium.org/p/chromium/issues/detail?id=447523
+// (isCollapsed inappropriately returns true in shadow dom)
+export const selectionCollapsed = function(domSel) {
+    return domSel.focusNode && isEquivalentPosition(domSel.focusNode, domSel.focusOffset, domSel.anchorNode, domSel.anchorOffset);
+};
+export function keyEvent(keyCode, key) {
+    const event = document.createEvent("Event");
+    event.initEvent("keydown", true, true);
+    event.keyCode = keyCode;
+    event.key = event.code = key;
+    return event;
+}
+export function deepActiveElement(doc) {
+    let elt = doc.activeElement;
+    while(elt && elt.shadowRoot)elt = elt.shadowRoot.activeElement;
+    return elt;
+}
+export function caretFromPoint(doc, x, y) {
+    if (doc.caretPositionFromPoint) {
+        try {
+            // Firefox throws for this call in hard-to-predict circumstances (#994)
+            const pos = doc.caretPositionFromPoint(x, y);
+            // Clip the offset, because Chrome will return a text offset
+            // into <input> nodes, which can't be treated as a regular DOM
+            // offset
+            if (pos) return {
+                node: pos.offsetNode,
+                offset: Math.min(nodeSize(pos.offsetNode), pos.offset)
+            };
+        } catch (_) {
+        // pass
+        }
+    }
+    if (doc.caretRangeFromPoint) {
+        const range = doc.caretRangeFromPoint(x, y);
+        if (range) return {
+            node: range.startContainer,
+            offset: Math.min(nodeSize(range.startContainer), range.startOffset)
+        };
+    }
+    return;
+}

package/dist/esm/hooks/__tests__/useEditorViewLayoutEffect.test.js

@@ -0,0 +1,99 @@
+/* eslint-disable @typescript-eslint/no-empty-function */ import { render } from "@testing-library/react";
+import React from "react";
+import { LayoutGroup } from "../../components/LayoutGroup.js";
+import { EditorContext } from "../../contexts/EditorContext.js";
+import { EditorStateContext } from "../../contexts/EditorStateContext.js";
+import { useEditorEffect } from "../useEditorEffect.js";
+function TestComponent(param) {
+    let { effect , dependencies =[]  } = param;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEditorEffect(effect, dependencies);
+    return null;
+}
+describe("useEditorViewLayoutEffect", ()=>{
+    it("should run the effect", ()=>{
+        const effect = jest.fn();
+        const editorView = {};
+        const editorState = {};
+        const registerEventListener = ()=>{};
+        const unregisterEventListener = ()=>{};
+        render(/*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(EditorContext.Provider, {
+            value: {
+                view: editorView,
+                registerEventListener,
+                unregisterEventListener
+            }
+        }, /*#__PURE__*/ React.createElement(EditorStateContext.Provider, {
+            value: editorState
+        }, /*#__PURE__*/ React.createElement(TestComponent, {
+            effect: effect
+        })))));
+        expect(effect).toHaveBeenCalled();
+        expect(effect).toHaveBeenCalledWith(editorView);
+    });
+    it("should not re-run the effect if no dependencies change", ()=>{
+        const effect = jest.fn();
+        const editorView = {};
+        const editorState = {};
+        const registerEventListener = ()=>{};
+        const unregisterEventListener = ()=>{};
+        const contextValue = {
+            view: editorView,
+            registerEventListener,
+            unregisterEventListener
+        };
+        const { rerender  } = render(/*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(EditorContext.Provider, {
+            value: contextValue
+        }, /*#__PURE__*/ React.createElement(EditorStateContext.Provider, {
+            value: editorState
+        }, /*#__PURE__*/ React.createElement(TestComponent, {
+            effect: effect,
+            dependencies: []
+        })), " ")));
+        rerender(/*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(EditorContext.Provider, {
+            value: contextValue
+        }, /*#__PURE__*/ React.createElement(EditorStateContext.Provider, {
+            value: editorState
+        }, /*#__PURE__*/ React.createElement(TestComponent, {
+            effect: effect,
+            dependencies: []
+        })))));
+        expect(effect).toHaveBeenCalledTimes(1);
+    });
+    it("should re-run the effect if dependencies change", ()=>{
+        const effect = jest.fn();
+        const editorView = {};
+        const editorState = {};
+        const registerEventListener = ()=>{};
+        const unregisterEventListener = ()=>{};
+        const { rerender  } = render(/*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(EditorContext.Provider, {
+            value: {
+                view: editorView,
+                registerEventListener,
+                unregisterEventListener
+            }
+        }, /*#__PURE__*/ React.createElement(EditorStateContext.Provider, {
+            value: editorState
+        }, /*#__PURE__*/ React.createElement(TestComponent, {
+            effect: effect,
+            dependencies: [
+                "one"
+            ]
+        })))));
+        rerender(/*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(EditorContext.Provider, {
+            value: {
+                view: editorView,
+                registerEventListener,
+                unregisterEventListener
+            }
+        }, /*#__PURE__*/ React.createElement(EditorStateContext.Provider, {
+            value: editorState
+        }, /*#__PURE__*/ React.createElement(TestComponent, {
+            effect: effect,
+            dependencies: [
+                "two"
+            ]
+        })))));
+        expect(effect).toHaveBeenCalledTimes(2);
+    });
+});

package/dist/esm/hooks/useClientOnly.js

@@ -0,0 +1,8 @@
+import { useEffect, useState } from "react";
+export function useClientOnly() {
+    const [render, setRender] = useState(false);
+    useEffect(()=>{
+        setRender(true);
+    }, []);
+    return render;
+}

package/dist/esm/hooks/useComponentEventListeners.js

@@ -0,0 +1,54 @@
+/* Copyright (c) The New York Times Company */ import { useCallback, useMemo, useState } from "react";
+import { componentEventListeners } from "../plugins/componentEventListeners.js";
+/**
+ * Produces a plugin that can be used with ProseMirror to handle DOM
+ * events at the EditorView.dom element.
+ *
+ * - `reactEventsPlugin` is a ProseMirror plugin for handling DOM events
+ * at the EditorView.dom element. It should be passed to `useEditorView`,
+ * along with any other plugins.
+ *
+ * - `registerEventListener` and `unregisterEventListener` should be
+ * passed to `EditorContext.Provider`.
+ *
+ * @privateRemarks
+ *
+ * This hook uses a combination of mutable and immutable updates to give
+ * us precise control over when we re-create the ProseMirror plugin.
+ *
+ * The plugin has a mutable reference to the set of handlers for each
+ * event type, but the set of event types is static. This means that we
+ * need to produce a new ProseMirror plugin whenever a new event type is
+ * registered. We avoid producing a new ProseMirrer plugin in any other
+ * scenario to avoid the performance overhead of reconfiguring the plugins
+ * in the EditorView.
+ *
+ * To accomplish this, we shallowly clone the registry whenever a new event
+ * type is registered.
+ */ export function useComponentEventListeners() {
+    const [registry, setRegistry] = useState(new Map());
+    const registerEventListener = useCallback((eventType, handler)=>{
+        const handlers = registry.get(eventType) ?? [];
+        handlers.unshift(handler);
+        if (!registry.has(eventType)) {
+            registry.set(eventType, handlers);
+            setRegistry(new Map(registry));
+        }
+    }, [
+        registry
+    ]);
+    const unregisterEventListener = useCallback((eventType, handler)=>{
+        const handlers = registry.get(eventType);
+        handlers?.splice(handlers.indexOf(handler), 1);
+    }, [
+        registry
+    ]);
+    const componentEventListenersPlugin = useMemo(()=>componentEventListeners(registry), [
+        registry
+    ]);
+    return {
+        registerEventListener,
+        unregisterEventListener,
+        componentEventListenersPlugin
+    };
+}