@handlewithcare/react-prosemirror 2.8.0-tiptap.16 → 2.8.0-tiptap.17

package/dist/cjs/plugins/beforeInputPlugin.js

@@ -16,15 +16,9 @@ function insertText(view, eventData) {
     if (eventData === null) return false;
     const from = options.from ?? view.state.selection.from;
     const to = options.to ?? view.state.selection.to;
-    // if (
-    //   view.someProp("handleTextInput", (f) =>
-    //     f(view, from, to, eventData, () =>
-    //       view.state.tr.insertText(eventData, from, to)
-    //     )
-    //   )
-    // ) {
-    //   return true;
-    // }
+    if (view.someProp("handleTextInput", (f)=>f(view, from, to, eventData, ()=>view.state.tr.insertText(eventData, from, to)))) {
+        return true;
+    }
     const { tr } = view.state;
     if (options.marks) tr.ensureMarks(options.marks);
     tr.insertText(eventData, from, to);

package/dist/cjs/tiptap/TiptapEditorContent.js

@@ -10,8 +10,10 @@ Object.defineProperty(exports, "TiptapEditorContent", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _reactdom = require("react-dom");
+const _ReactEditorView = require("../ReactEditorView.js");
 const _ProseMirrorDoc = require("../components/ProseMirrorDoc.js");
-const _useEditorEffect = require("../hooks/useEditorEffect.js");
+const _EditorContext = require("../contexts/EditorContext.js");
+const _useClientLayoutEffect = require("../hooks/useClientLayoutEffect.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -102,8 +104,9 @@ function getInstance() {
 function TiptapEditorContent(param) {
     let { editor: editorProp, ...props } = param;
     const editor = editorProp;
-    (0, _useEditorEffect.useEditorEffect)((view)=>{
-        if (editor.view === view) {
+    const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
+    (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
+        if (!(view instanceof _ReactEditorView.ReactEditorView) || editor.view === view) {
             return;
         }
         // @ts-expect-error private property
@@ -128,7 +131,8 @@ function TiptapEditorContent(param) {
             editor.contentComponent = null;
         };
     }, [
-        editor
+        editor,
+        view
     ]);
     return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_ProseMirrorDoc.ProseMirrorDoc, props), editor?.contentComponent && /*#__PURE__*/ _react.default.createElement(Portals, {
         contentComponent: editor.contentComponent

package/dist/cjs/tiptap/TiptapNodeView.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ReactProseMirrorNodeView", {
+    enumerable: true,
+    get: function() {
+        return ReactProseMirrorNodeView;
+    }
+});
+const _core = require("@tiptap/core");
+let ReactProseMirrorNodeView = class ReactProseMirrorNodeView extends _core.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/cjs/tiptap/extensions/ReactProseMirror.js

@@ -16,5 +16,64 @@ const ReactProseMirror = _core.Extension.create({
         return [
             (0, _reactKeys.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, dispatch } = param;
+                    const pos = tr.mapping.map(initialPos);
+                    const $pos = tr.doc.resolve(pos);
+                    if ($pos.start() !== pos) {
+                        return false;
+                    }
+                    if (!dispatch) return true;
+                    const nodes = $pos.parent.children;
+                    const reordered = nodes.map((node, i)=>[
+                            node,
+                            i
+                        ]).sort((param, param1)=>{
+                        let [, a] = param, [, b] = param1;
+                        return order[a] - order[b];
+                    }).map((param)=>{
+                        let [node] = param;
+                        return node;
+                    });
+                    tr.replaceWith(pos, $pos.parent.content.size + pos, reordered);
+                    const meta = {
+                        overrides: {}
+                    };
+                    const oldPositions = [];
+                    let start = pos;
+                    for (const node of nodes){
+                        oldPositions.push(start);
+                        start += node.nodeSize;
+                    }
+                    start = pos;
+                    const newPositions = [];
+                    for(let i = 0; i < reordered.length; i++){
+                        const node = reordered[i];
+                        newPositions[order[i]] = start;
+                        start += node.nodeSize;
+                    }
+                    for(let i = 0; i < oldPositions.length; i++){
+                        const oldPosition = oldPositions[i];
+                        const newPosition = newPositions[i];
+                        meta.overrides[oldPosition] = newPosition;
+                    }
+                    tr.setMeta(_reactKeys.reactKeysPluginKey, meta);
+                    return true;
+                };
+            }
+        };
     }
 });

package/dist/esm/plugins/beforeInputPlugin.js

@@ -6,15 +6,9 @@ function insertText(view, eventData) {
     if (eventData === null) return false;
     const from = options.from ?? view.state.selection.from;
     const to = options.to ?? view.state.selection.to;
-    // if (
-    //   view.someProp("handleTextInput", (f) =>
-    //     f(view, from, to, eventData, () =>
-    //       view.state.tr.insertText(eventData, from, to)
-    //     )
-    //   )
-    // ) {
-    //   return true;
-    // }
+    if (view.someProp("handleTextInput", (f)=>f(view, from, to, eventData, ()=>view.state.tr.insertText(eventData, from, to)))) {
+        return true;
+    }
     const { tr } = view.state;
     if (options.marks) tr.ensureMarks(options.marks);
     tr.insertText(eventData, from, to);

package/dist/esm/tiptap/TiptapEditorContent.js

@@ -1,7 +1,9 @@
-import React, { useSyncExternalStore } from "react";
+import React, { useContext, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
+import { ReactEditorView } from "../ReactEditorView.js";
 import { ProseMirrorDoc } from "../components/ProseMirrorDoc.js";
-import { useEditorEffect } from "../hooks/useEditorEffect.js";
+import { EditorContext } from "../contexts/EditorContext.js";
+import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
 /**
  * This component renders all of the editor's registered "React renderers".
  */ const Portals = (param)=>{
@@ -51,8 +53,9 @@ function getInstance() {
 export function TiptapEditorContent(param) {
     let { editor: editorProp, ...props } = param;
     const editor = editorProp;
-    useEditorEffect((view)=>{
-        if (editor.view === view) {
+    const { view } = useContext(EditorContext);
+    useClientLayoutEffect(()=>{
+        if (!(view instanceof ReactEditorView) || editor.view === view) {
             return;
         }
         // @ts-expect-error private property
@@ -77,7 +80,8 @@ export function TiptapEditorContent(param) {
             editor.contentComponent = null;
         };
     }, [
-        editor
+        editor,
+        view
     ]);
     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/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/extensions/ReactProseMirror.js

@@ -1,11 +1,69 @@
 import { Extension } from "@tiptap/core";
-import { // ReactKeysPluginMeta,
-reactKeys } from "../../plugins/reactKeys.js";
+import { reactKeys, reactKeysPluginKey } 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, dispatch } = param;
+                    const pos = tr.mapping.map(initialPos);
+                    const $pos = tr.doc.resolve(pos);
+                    if ($pos.start() !== pos) {
+                        return false;
+                    }
+                    if (!dispatch) return true;
+                    const nodes = $pos.parent.children;
+                    const reordered = nodes.map((node, i)=>[
+                            node,
+                            i
+                        ]).sort((param, param1)=>{
+                        let [, a] = param, [, b] = param1;
+                        return order[a] - order[b];
+                    }).map((param)=>{
+                        let [node] = param;
+                        return node;
+                    });
+                    tr.replaceWith(pos, $pos.parent.content.size + pos, reordered);
+                    const meta = {
+                        overrides: {}
+                    };
+                    const oldPositions = [];
+                    let start = pos;
+                    for (const node of nodes){
+                        oldPositions.push(start);
+                        start += node.nodeSize;
+                    }
+                    start = pos;
+                    const newPositions = [];
+                    for(let i = 0; i < reordered.length; i++){
+                        const node = reordered[i];
+                        newPositions[order[i]] = start;
+                        start += node.nodeSize;
+                    }
+                    for(let i = 0; i < oldPositions.length; i++){
+                        const oldPosition = oldPositions[i];
+                        const newPosition = newPositions[i];
+                        meta.overrides[oldPosition] = newPosition;
+                    }
+                    tr.setMeta(reactKeysPluginKey, meta);
+                    return true;
+                };
+            }
+        };
     }
 });