@handlewithcare/react-prosemirror 2.8.0-tiptap.18 → 2.8.0-tiptap.20

package/README.md

@@ -471,6 +471,14 @@ type ProseMirror = (
       customNodeViews?: {
         [nodeType: string]: NodeViewConstructor;
       };
+      markViews?: {
+        [markType: string]: ForwardRefExoticComponent<
+          MarkViewComponentProps & RefAttributes<any>
+        >;
+      };
+      customMarkViews?: {
+        [markType: string]: MarkViewConstructor;
+      };
     }
 ) => JSX.Element;
 ```

package/dist/cjs/components/ChildNodeViews.js

@@ -22,13 +22,13 @@ const _EditorContext = require("../contexts/EditorContext.js");
 const _iterDeco = require("../decorations/iterDeco.js");
 const _useReactKeys = require("../hooks/useReactKeys.js");
 const _props = require("../props.js");
-const _MarkView = require("./MarkView.js");
 const _NativeWidgetView = require("./NativeWidgetView.js");
-const _NodeView = require("./NodeView.js");
 const _SeparatorHackView = require("./SeparatorHackView.js");
 const _TextNodeView = require("./TextNodeView.js");
 const _TrailingHackView = require("./TrailingHackView.js");
 const _WidgetView = require("./WidgetView.js");
+const _MarkView = require("./marks/MarkView.js");
+const _NodeView = require("./nodes/NodeView.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -149,7 +149,8 @@ const InlinePartition = /*#__PURE__*/ (0, _react.memo)(function InlinePartition(
     return /*#__PURE__*/ _react.default.createElement(_MarkView.MarkView, {
         key: firstChild.key,
         mark: firstMark,
-        getPos: getPos
+        getPos: getPos,
+        inline: true
     }, /*#__PURE__*/ _react.default.createElement(InlineView, {
         key: firstChild.key,
         getInnerPos: getInnerPos,
@@ -261,7 +262,8 @@ const ChildElement = /*#__PURE__*/ (0, _react.memo)(function ChildElement(param)
     if (child.type === "node") {
         return child.marks.reduce((element, mark)=>/*#__PURE__*/ _react.default.createElement(_MarkView.MarkView, {
                 mark: mark,
-                getPos: getPos
+                getPos: getPos,
+                inline: false
             }, element), /*#__PURE__*/ _react.default.createElement(_NodeView.NodeView, {
             key: child.key,
             outerDeco: child.outerDeco,

package/dist/cjs/components/ProseMirror.js

@@ -71,21 +71,24 @@ const rootChildDescriptorsContextValue = {
     }
 };
 function ProseMirrorInner(param) {
-    let { className, children, nodeViews, customNodeViews, ...props } = param;
+    let { className, children, nodeViews, customNodeViews, markViews, customMarkViews, ...props } = param;
     const [mount, setMount] = (0, _react.useState)(null);
     const { editor, state } = (0, _useEditor.useEditor)(mount, {
         ...props,
-        nodeViews: customNodeViews
+        nodeViews: customNodeViews,
+        markViews: customMarkViews
     });
     const nodeViewConstructors = editor.view.nodeViews;
     const nodeViewContextValue = (0, _react.useMemo)(()=>{
         return {
             components: {
-                ...nodeViews
+                ...nodeViews,
+                ...markViews
             },
             constructors: nodeViewConstructors
         };
     }, [
+        markViews,
         nodeViewConstructors,
         nodeViews
     ]);

package/dist/cjs/components/ProseMirrorDoc.js

@@ -17,7 +17,7 @@ _export(exports, {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _DocNodeView = require("./DocNodeView.js");
+const _DocNodeView = require("./nodes/DocNodeView.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();

package/dist/cjs/components/marks/CustomMarkView.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CustomMarkView", {
+    enumerable: true,
+    get: function() {
+        return CustomMarkView;
+    }
+});
+const _prosemirrormodel = require("prosemirror-model");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactdom = require("react-dom");
+const _ChildDescriptorsContext = require("../../contexts/ChildDescriptorsContext.js");
+const _useMarkViewDescription = require("../../hooks/useMarkViewDescription.js");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const CustomMarkView = /*#__PURE__*/ (0, _react.memo)(function CustomMarkView(param) {
+    let { constructor, mark, inline, getPos, children } = param;
+    const ref = (0, _react.useRef)(null);
+    const innerRef = (0, _react.useRef)(null);
+    const markProps = (0, _react.useMemo)(()=>({
+            mark,
+            inline,
+            getPos
+        }), [
+        mark,
+        inline,
+        getPos
+    ]);
+    const createMarkView = function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        const markView = constructor(...args);
+        if (!markView || !markView.dom) {
+            const spec = mark.type.spec.toDOM?.(mark, inline);
+            if (!spec) {
+                throw new Error(`Mark spec for ${mark.type.name} is missing toDOM`);
+            }
+            return _prosemirrormodel.DOMSerializer.renderSpec(document, spec, null);
+        }
+        return markView;
+    };
+    const { childContextValue, contentDOM } = (0, _useMarkViewDescription.useMarkViewDescription)(ref, function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        const markView = createMarkView(...args);
+        const dom = markView.dom;
+        const wrapperDOM = innerRef.current ?? ref.current;
+        return {
+            ...markView,
+            destroy () {
+                markView.destroy?.();
+                wrapperDOM.removeChild(dom);
+            },
+            ignoreMutation: markView.ignoreMutation
+        };
+    }, markProps);
+    const Component = inline ? "span" : "div";
+    const props = {
+        ref: innerRef
+    };
+    return /*#__PURE__*/ _react.default.createElement(Component, props, contentDOM ? /*#__PURE__*/ (0, _reactdom.createPortal)(/*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, children), contentDOM) : null);
+});

package/dist/cjs/components/marks/DefaultMarkView.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DefaultMarkView", {
+    enumerable: true,
+    get: function() {
+        return DefaultMarkView;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _OutputSpec = require("../OutputSpec.js");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const DefaultMarkView = /*#__PURE__*/ (0, _react.forwardRef)(function DefaultMarkView(param, ref) {
+    let { markProps: { mark, inline }, children, ...props } = param;
+    const spec = (0, _react.useMemo)(()=>mark.type.spec.toDOM?.(mark, inline), [
+        mark,
+        inline
+    ]);
+    if (!spec) {
+        throw new Error(`Mark spec for ${mark.type.name} is missing toDOM`);
+    }
+    return /*#__PURE__*/ _react.default.createElement(_OutputSpec.OutputSpec, {
+        ...props,
+        outputSpec: spec,
+        ref: ref,
+        isMark: true
+    }, children);
+});

package/dist/cjs/components/marks/MarkView.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MarkView", {
+    enumerable: true,
+    get: function() {
+        return MarkView;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _NodeViewContext = require("../../contexts/NodeViewContext.js");
+const _CustomMarkView = require("./CustomMarkView.js");
+const _DefaultMarkView = require("./DefaultMarkView.js");
+const _ReactMarkView = require("./ReactMarkView.js");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const MarkView = /*#__PURE__*/ (0, _react.memo)(function MarkView(props) {
+    const { components, constructors } = (0, _react.useContext)(_NodeViewContext.NodeViewContext);
+    const component = components[props.mark.type.name] ?? _DefaultMarkView.DefaultMarkView;
+    const constructor = constructors[props.mark.type.name];
+    // Construct a wrapper component so that the mark view remounts when either
+    // its component or constructor changes. A React mark view would remount
+    // if its underlying component changed without this wrapper, but a custom
+    // mark view otherwise uses the same React components for all custom mark views.
+    const Component = (0, _react.useMemo)(()=>{
+        if (constructor) {
+            return function MarkView(props) {
+                return /*#__PURE__*/ _react.default.createElement(_CustomMarkView.CustomMarkView, {
+                    constructor: constructor,
+                    ...props
+                });
+            };
+        }
+        return function NodeView(props) {
+            return /*#__PURE__*/ _react.default.createElement(_ReactMarkView.ReactMarkView, {
+                component: component,
+                ...props
+            });
+        };
+    }, [
+        component,
+        constructor
+    ]);
+    return /*#__PURE__*/ _react.default.createElement(Component, props);
+});

package/dist/cjs/components/marks/MarkViewComponentProps.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/components/marks/OldMarkView.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MarkView", {
+    enumerable: true,
+    get: function() {
+        return MarkView;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _ChildDescriptorsContext = require("../../contexts/ChildDescriptorsContext.js");
+const _useClientLayoutEffect = require("../../hooks/useClientLayoutEffect.js");
+const _viewdesc = require("../../viewdesc.js");
+const _OutputSpec = require("../OutputSpec.js");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const MarkView = /*#__PURE__*/ (0, _react.memo)(/*#__PURE__*/ (0, _react.forwardRef)(function MarkView(param, ref) {
+    let { mark, getPos, children, inline = false } = param;
+    const { siblingsRef, parentRef } = (0, _react.useContext)(_ChildDescriptorsContext.ChildDescriptorsContext);
+    const viewDescRef = (0, _react.useRef)(undefined);
+    const childDescriptors = (0, _react.useRef)([]);
+    const domRef = (0, _react.useRef)(null);
+    (0, _react.useImperativeHandle)(ref, ()=>{
+        return domRef.current;
+    }, []);
+    const outputSpec = (0, _react.useMemo)(()=>mark.type.spec.toDOM?.(mark, inline), [
+        inline,
+        mark
+    ]);
+    if (!outputSpec) throw new Error(`Mark spec for ${mark.type.name} is missing toDOM`);
+    (0, _useClientLayoutEffect.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
+    ]);
+    (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
+        if (!domRef.current) return;
+        const firstChildDesc = childDescriptors.current[0];
+        if (!viewDescRef.current) {
+            viewDescRef.current = new _viewdesc.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(_viewdesc.sortViewDescs);
+        for (const childDesc of childDescriptors.current){
+            childDesc.parent = viewDescRef.current;
+        }
+    });
+    const childContextValue = (0, _react.useMemo)(()=>({
+            parentRef: viewDescRef,
+            siblingsRef: childDescriptors
+        }), [
+        childDescriptors,
+        viewDescRef
+    ]);
+    return /*#__PURE__*/ _react.default.createElement(_OutputSpec.OutputSpec, {
+        ref: domRef,
+        outputSpec: outputSpec,
+        isMark: true
+    }, /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, children));
+}));

package/dist/cjs/components/marks/ReactMarkView.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ReactMarkView", {
+    enumerable: true,
+    get: function() {
+        return ReactMarkView;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _ChildDescriptorsContext = require("../../contexts/ChildDescriptorsContext.js");
+const _IgnoreMutationContext = require("../../contexts/IgnoreMutationContext.js");
+const _useMarkViewDescription = require("../../hooks/useMarkViewDescription.js");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const ReactMarkView = /*#__PURE__*/ (0, _react.memo)(function ReactMarkView(param) {
+    let { component: Component, mark, inline, getPos, children } = param;
+    const ref = (0, _react.useRef)(null);
+    const ignoreMutationRef = (0, _react.useRef)(null);
+    const setIgnoreMutation = (0, _react.useCallback)((handler)=>{
+        ignoreMutationRef.current = handler;
+        return ()=>{
+            ignoreMutationRef.current = null;
+            return ()=>{
+                ignoreMutationRef.current = null;
+            };
+        };
+    }, []);
+    const markProps = (0, _react.useMemo)(()=>({
+            mark,
+            getPos,
+            inline
+        }), [
+        getPos,
+        inline,
+        mark
+    ]);
+    const { childContextValue } = (0, _useMarkViewDescription.useMarkViewDescription)(ref, ()=>({
+            dom: ref.current,
+            ignoreMutation (mutation) {
+                const ignoreMutation = ignoreMutationRef.current;
+                if (ignoreMutation) {
+                    return ignoreMutation(mutation);
+                }
+                return false;
+            }
+        }), markProps);
+    const props = {
+        markProps,
+        ref
+    };
+    return /*#__PURE__*/ _react.default.createElement(_IgnoreMutationContext.IgnoreMutationContext.Provider, {
+        value: setIgnoreMutation
+    }, /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, /*#__PURE__*/ _react.default.createElement(Component, props, children)));
+});