reactjs-tiptap-editor 0.4.2 → 1.0.0

package/lib/index-DzcKxutn.js

@@ -0,0 +1,632 @@
+import O, { useContext as W, createContext as B, createRef as k, memo as Y, createElement as X, version as I, forwardRef as J } from "react";
+import Q, { flushSync as Z } from "react-dom";
+import { jsx as w, jsxs as ee, Fragment as K } from "react/jsx-runtime";
+import { X as te, Y as ne } from "./index-DnWWK9F_.js";
+var L = { exports: {} }, A = {};
+/**
+ * @license React
+ * use-sync-external-store-shim.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var x;
+function re() {
+  if (x) return A;
+  x = 1;
+  var e = O;
+  function t(u, d) {
+    return u === d && (u !== 0 || 1 / u === 1 / d) || u !== u && d !== d;
+  }
+  var n = typeof Object.is == "function" ? Object.is : t, a = e.useState, s = e.useEffect, v = e.useLayoutEffect, m = e.useDebugValue;
+  function S(u, d) {
+    var r = d(), o = a({ inst: { value: r, getSnapshot: d } }), i = o[0].inst, h = o[1];
+    return v(
+      function() {
+        i.value = r, i.getSnapshot = d, l(i) && h({ inst: i });
+      },
+      [u, r, d]
+    ), s(
+      function() {
+        return l(i) && h({ inst: i }), u(function() {
+          l(i) && h({ inst: i });
+        });
+      },
+      [u]
+    ), m(r), r;
+  }
+  function l(u) {
+    var d = u.getSnapshot;
+    u = u.value;
+    try {
+      var r = d();
+      return !n(u, r);
+    } catch {
+      return !0;
+    }
+  }
+  function c(u, d) {
+    return d();
+  }
+  var f = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? c : S;
+  return A.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : f, A;
+}
+var M = {};
+/**
+ * @license React
+ * use-sync-external-store-shim.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var j;
+function oe() {
+  return j || (j = 1, process.env.NODE_ENV !== "production" && (function() {
+    function e(r, o) {
+      return r === o && (r !== 0 || 1 / r === 1 / o) || r !== r && o !== o;
+    }
+    function t(r, o) {
+      f || s.startTransition === void 0 || (f = !0, console.error(
+        "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
+      ));
+      var i = o();
+      if (!u) {
+        var h = o();
+        v(i, h) || (console.error(
+          "The result of getSnapshot should be cached to avoid an infinite loop"
+        ), u = !0);
+      }
+      h = m({
+        inst: { value: i, getSnapshot: o }
+      });
+      var _ = h[0].inst, y = h[1];
+      return l(
+        function() {
+          _.value = i, _.getSnapshot = o, n(_) && y({ inst: _ });
+        },
+        [r, i, o]
+      ), S(
+        function() {
+          return n(_) && y({ inst: _ }), r(function() {
+            n(_) && y({ inst: _ });
+          });
+        },
+        [r]
+      ), c(i), i;
+    }
+    function n(r) {
+      var o = r.getSnapshot;
+      r = r.value;
+      try {
+        var i = o();
+        return !v(r, i);
+      } catch {
+        return !0;
+      }
+    }
+    function a(r, o) {
+      return o();
+    }
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+    var s = O, v = typeof Object.is == "function" ? Object.is : e, m = s.useState, S = s.useEffect, l = s.useLayoutEffect, c = s.useDebugValue, f = !1, u = !1, d = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? a : t;
+    M.useSyncExternalStore = s.useSyncExternalStore !== void 0 ? s.useSyncExternalStore : d, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+  })()), M;
+}
+var P;
+function N() {
+  return P || (P = 1, process.env.NODE_ENV === "production" ? L.exports = re() : L.exports = oe()), L.exports;
+}
+var ie = N(), V = { exports: {} }, g = {};
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var U;
+function se() {
+  if (U) return g;
+  U = 1;
+  var e = O, t = N();
+  function n(c, f) {
+    return c === f && (c !== 0 || 1 / c === 1 / f) || c !== c && f !== f;
+  }
+  var a = typeof Object.is == "function" ? Object.is : n, s = t.useSyncExternalStore, v = e.useRef, m = e.useEffect, S = e.useMemo, l = e.useDebugValue;
+  return g.useSyncExternalStoreWithSelector = function(c, f, u, d, r) {
+    var o = v(null);
+    if (o.current === null) {
+      var i = { hasValue: !1, value: null };
+      o.current = i;
+    } else i = o.current;
+    o = S(
+      function() {
+        function _(p) {
+          if (!y) {
+            if (y = !0, R = p, p = d(p), r !== void 0 && i.hasValue) {
+              var E = i.value;
+              if (r(E, p))
+                return C = E;
+            }
+            return C = p;
+          }
+          if (E = C, a(R, p)) return E;
+          var D = d(p);
+          return r !== void 0 && r(E, D) ? (R = p, E) : (R = p, C = D);
+        }
+        var y = !1, R, C, b = u === void 0 ? null : u;
+        return [
+          function() {
+            return _(f());
+          },
+          b === null ? void 0 : function() {
+            return _(b());
+          }
+        ];
+      },
+      [f, u, d, r]
+    );
+    var h = s(c, o[0], o[1]);
+    return m(
+      function() {
+        i.hasValue = !0, i.value = h;
+      },
+      [h]
+    ), l(h), h;
+  }, g;
+}
+var T = {};
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var $;
+function ae() {
+  return $ || ($ = 1, process.env.NODE_ENV !== "production" && (function() {
+    function e(c, f) {
+      return c === f && (c !== 0 || 1 / c === 1 / f) || c !== c && f !== f;
+    }
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+    var t = O, n = N(), a = typeof Object.is == "function" ? Object.is : e, s = n.useSyncExternalStore, v = t.useRef, m = t.useEffect, S = t.useMemo, l = t.useDebugValue;
+    T.useSyncExternalStoreWithSelector = function(c, f, u, d, r) {
+      var o = v(null);
+      if (o.current === null) {
+        var i = { hasValue: !1, value: null };
+        o.current = i;
+      } else i = o.current;
+      o = S(
+        function() {
+          function _(p) {
+            if (!y) {
+              if (y = !0, R = p, p = d(p), r !== void 0 && i.hasValue) {
+                var E = i.value;
+                if (r(E, p))
+                  return C = E;
+              }
+              return C = p;
+            }
+            if (E = C, a(R, p))
+              return E;
+            var D = d(p);
+            return r !== void 0 && r(E, D) ? (R = p, E) : (R = p, C = D);
+          }
+          var y = !1, R, C, b = u === void 0 ? null : u;
+          return [
+            function() {
+              return _(f());
+            },
+            b === null ? void 0 : function() {
+              return _(b());
+            }
+          ];
+        },
+        [f, u, d, r]
+      );
+      var h = s(c, o[0], o[1]);
+      return m(
+        function() {
+          i.hasValue = !0, i.value = h;
+        },
+        [h]
+      ), l(h), h;
+    }, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+  })()), T;
+}
+var G;
+function ue() {
+  return G || (G = 1, process.env.NODE_ENV === "production" ? V.exports = se() : V.exports = ae()), V.exports;
+}
+ue();
+var de = (...e) => (t) => {
+  e.forEach((n) => {
+    typeof n == "function" ? n(t) : n && (n.current = t);
+  });
+}, ce = ({ contentComponent: e }) => {
+  const t = ie.useSyncExternalStore(
+    e.subscribe,
+    e.getSnapshot,
+    e.getServerSnapshot
+  );
+  return /* @__PURE__ */ w(K, { children: Object.values(t) });
+};
+function le() {
+  const e = /* @__PURE__ */ new Set();
+  let t = {};
+  return {
+    /**
+     * Subscribe to the editor instance's changes.
+     */
+    subscribe(n) {
+      return e.add(n), () => {
+        e.delete(n);
+      };
+    },
+    getSnapshot() {
+      return t;
+    },
+    getServerSnapshot() {
+      return t;
+    },
+    /**
+     * Adds a new NodeView Renderer to the editor.
+     */
+    setRenderer(n, a) {
+      t = {
+        ...t,
+        [n]: Q.createPortal(a.reactElement, a.element, n)
+      }, e.forEach((s) => s());
+    },
+    /**
+     * Removes a NodeView Renderer from the editor.
+     */
+    removeRenderer(n) {
+      const a = { ...t };
+      delete a[n], t = a, e.forEach((s) => s());
+    }
+  };
+}
+var fe = class extends O.Component {
+  constructor(e) {
+    var t;
+    super(e), this.editorContentRef = O.createRef(), this.initialized = !1, this.state = {
+      hasContentComponentInitialized: !!((t = e.editor) != null && t.contentComponent)
+    };
+  }
+  componentDidMount() {
+    this.init();
+  }
+  componentDidUpdate() {
+    this.init();
+  }
+  init() {
+    const e = this.props.editor;
+    if (e && !e.isDestroyed && e.options.element) {
+      if (e.contentComponent)
+        return;
+      const t = this.editorContentRef.current;
+      t.append(e.view.dom), e.setOptions({
+        element: t
+      }), e.contentComponent = le(), this.state.hasContentComponentInitialized || (this.unsubscribeToContentComponent = e.contentComponent.subscribe(() => {
+        this.setState((n) => n.hasContentComponentInitialized ? n : {
+          hasContentComponentInitialized: !0
+        }), this.unsubscribeToContentComponent && this.unsubscribeToContentComponent();
+      })), e.createNodeViews(), this.initialized = !0;
+    }
+  }
+  componentWillUnmount() {
+    var e;
+    const t = this.props.editor;
+    if (t) {
+      this.initialized = !1, t.isDestroyed || t.view.setProps({
+        nodeViews: {}
+      }), this.unsubscribeToContentComponent && this.unsubscribeToContentComponent(), t.contentComponent = null;
+      try {
+        if (!((e = t.view.dom) != null && e.firstChild))
+          return;
+        const n = document.createElement("div");
+        n.append(t.view.dom), t.setOptions({
+          element: n
+        });
+      } catch {
+      }
+    }
+  }
+  render() {
+    const { editor: e, innerRef: t, ...n } = this.props;
+    return /* @__PURE__ */ ee(K, { children: [
+      /* @__PURE__ */ w("div", { ref: de(t, this.editorContentRef), ...n }),
+      (e == null ? void 0 : e.contentComponent) && /* @__PURE__ */ w(ce, { contentComponent: e.contentComponent })
+    ] });
+  }
+}, he = J(
+  (e, t) => {
+    const n = O.useMemo(() => Math.floor(Math.random() * 4294967295).toString(), [e.editor]);
+    return O.createElement(fe, {
+      key: n,
+      innerRef: t,
+      ...e
+    });
+  }
+);
+O.memo(he);
+process.env.NODE_ENV;
+var q = B({
+  editor: null
+});
+q.Consumer;
+var we = () => W(q), F = B({
+  onDragStart: () => {
+  },
+  nodeViewContentChildren: void 0,
+  nodeViewContentRef: () => {
+  }
+}), pe = () => W(F), be = O.forwardRef((e, t) => {
+  const { onDragStart: n } = pe(), a = e.as || "div";
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ w(
+      a,
+      {
+        ...e,
+        ref: t,
+        "data-node-view-wrapper": "",
+        onDragStart: n,
+        style: {
+          whiteSpace: "normal",
+          ...e.style
+        }
+      }
+    )
+  );
+});
+function z(e) {
+  return !!(typeof e == "function" && e.prototype && e.prototype.isReactComponent);
+}
+function H(e) {
+  return !!(typeof e == "object" && e.$$typeof && (e.$$typeof.toString() === "Symbol(react.forward_ref)" || e.$$typeof.description === "react.forward_ref"));
+}
+function me(e) {
+  return !!(typeof e == "object" && e.$$typeof && (e.$$typeof.toString() === "Symbol(react.memo)" || e.$$typeof.description === "react.memo"));
+}
+function ve(e) {
+  if (z(e) || H(e))
+    return !0;
+  if (me(e)) {
+    const t = e.type;
+    if (t)
+      return z(t) || H(t);
+  }
+  return !1;
+}
+function _e() {
+  try {
+    if (I)
+      return parseInt(I.split(".")[0], 10) >= 19;
+  } catch {
+  }
+  return !1;
+}
+var Ee = class {
+  /**
+   * Immediately creates element and renders the provided React component.
+   */
+  constructor(e, { editor: t, props: n = {}, as: a = "div", className: s = "" }) {
+    this.ref = null, this.id = Math.floor(Math.random() * 4294967295).toString(), this.component = e, this.editor = t, this.props = n, this.element = document.createElement(a), this.element.classList.add("react-renderer"), s && this.element.classList.add(...s.split(" ")), this.editor.isInitialized ? Z(() => {
+      this.render();
+    }) : queueMicrotask(() => {
+      this.render();
+    });
+  }
+  /**
+   * Render the React component.
+   */
+  render() {
+    var e;
+    const t = this.component, n = this.props, a = this.editor, s = _e(), v = ve(t), m = { ...n };
+    m.ref && !(s || v) && delete m.ref, !m.ref && (s || v) && (m.ref = (S) => {
+      this.ref = S;
+    }), this.reactElement = /* @__PURE__ */ w(t, { ...m }), (e = a == null ? void 0 : a.contentComponent) == null || e.setRenderer(this.id, this);
+  }
+  /**
+   * Re-renders the React component with new props.
+   */
+  updateProps(e = {}) {
+    this.props = {
+      ...this.props,
+      ...e
+    }, this.render();
+  }
+  /**
+   * Destroy the React component.
+   */
+  destroy() {
+    var e;
+    const t = this.editor;
+    (e = t == null ? void 0 : t.contentComponent) == null || e.removeRenderer(this.id);
+    try {
+      this.element && this.element.parentNode && this.element.parentNode.removeChild(this.element);
+    } catch {
+    }
+  }
+  /**
+   * Update the attributes of the element that holds the React component.
+   */
+  updateAttributes(e) {
+    Object.keys(e).forEach((t) => {
+      this.element.setAttribute(t, e[t]);
+    });
+  }
+};
+O.createContext({
+  markViewContentRef: () => {
+  }
+});
+var Se = class extends te {
+  constructor(e, t, n) {
+    if (super(e, t, n), this.selectionRafId = null, !this.node.isLeaf) {
+      this.options.contentDOMElementTag ? this.contentDOMElement = document.createElement(this.options.contentDOMElementTag) : this.contentDOMElement = document.createElement(this.node.isInline ? "span" : "div"), this.contentDOMElement.dataset.nodeViewContentReact = "", this.contentDOMElement.dataset.nodeViewWrapper = "", this.contentDOMElement.style.whiteSpace = "inherit";
+      const a = this.dom.querySelector("[data-node-view-content]");
+      if (!a)
+        return;
+      a.appendChild(this.contentDOMElement);
+    }
+  }
+  /**
+   * Setup the React component.
+   * Called on initialization.
+   */
+  mount() {
+    const e = {
+      editor: this.editor,
+      node: this.node,
+      decorations: this.decorations,
+      innerDecorations: this.innerDecorations,
+      view: this.view,
+      selected: !1,
+      extension: this.extension,
+      HTMLAttributes: this.HTMLAttributes,
+      getPos: () => this.getPos(),
+      updateAttributes: (l = {}) => this.updateAttributes(l),
+      deleteNode: () => this.deleteNode(),
+      ref: k()
+    };
+    if (!this.component.displayName) {
+      const l = (c) => c.charAt(0).toUpperCase() + c.substring(1);
+      this.component.displayName = l(this.extension.name);
+    }
+    const a = { onDragStart: this.onDragStart.bind(this), nodeViewContentRef: (l) => {
+      l && this.contentDOMElement && l.firstChild !== this.contentDOMElement && (l.hasAttribute("data-node-view-wrapper") && l.removeAttribute("data-node-view-wrapper"), l.appendChild(this.contentDOMElement));
+    } }, s = this.component, v = Y((l) => /* @__PURE__ */ w(F.Provider, { value: a, children: X(s, l) }));
+    v.displayName = "ReactNodeView";
+    let m = this.node.isInline ? "span" : "div";
+    this.options.as && (m = this.options.as);
+    const { className: S = "" } = this.options;
+    this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this), this.renderer = new Ee(v, {
+      editor: this.editor,
+      props: e,
+      as: m,
+      className: `node-${this.node.type.name} ${S}`.trim()
+    }), this.editor.on("selectionUpdate", this.handleSelectionUpdate), this.updateElementAttributes();
+  }
+  /**
+   * Return the DOM element.
+   * This is the element that will be used to display the node view.
+   */
+  get dom() {
+    var e;
+    if (this.renderer.element.firstElementChild && !((e = this.renderer.element.firstElementChild) != null && e.hasAttribute("data-node-view-wrapper")))
+      throw Error("Please use the NodeViewWrapper component for your node view.");
+    return this.renderer.element;
+  }
+  /**
+   * Return the content DOM element.
+   * This is the element that will be used to display the rich-text content of the node.
+   */
+  get contentDOM() {
+    return this.node.isLeaf ? null : this.contentDOMElement;
+  }
+  /**
+   * On editor selection update, check if the node is selected.
+   * If it is, call `selectNode`, otherwise call `deselectNode`.
+   */
+  handleSelectionUpdate() {
+    this.selectionRafId && (cancelAnimationFrame(this.selectionRafId), this.selectionRafId = null), this.selectionRafId = requestAnimationFrame(() => {
+      this.selectionRafId = null;
+      const { from: e, to: t } = this.editor.state.selection, n = this.getPos();
+      if (typeof n == "number")
+        if (e <= n && t >= n + this.node.nodeSize) {
+          if (this.renderer.props.selected)
+            return;
+          this.selectNode();
+        } else {
+          if (!this.renderer.props.selected)
+            return;
+          this.deselectNode();
+        }
+    });
+  }
+  /**
+   * On update, update the React component.
+   * To prevent unnecessary updates, the `update` option can be used.
+   */
+  update(e, t, n) {
+    const a = (s) => {
+      this.renderer.updateProps(s), typeof this.options.attrs == "function" && this.updateElementAttributes();
+    };
+    if (e.type !== this.node.type)
+      return !1;
+    if (typeof this.options.update == "function") {
+      const s = this.node, v = this.decorations, m = this.innerDecorations;
+      return this.node = e, this.decorations = t, this.innerDecorations = n, this.options.update({
+        oldNode: s,
+        oldDecorations: v,
+        newNode: e,
+        newDecorations: t,
+        oldInnerDecorations: m,
+        innerDecorations: n,
+        updateProps: () => a({ node: e, decorations: t, innerDecorations: n })
+      });
+    }
+    return e === this.node && this.decorations === t && this.innerDecorations === n || (this.node = e, this.decorations = t, this.innerDecorations = n, a({ node: e, decorations: t, innerDecorations: n })), !0;
+  }
+  /**
+   * Select the node.
+   * Add the `selected` prop and the `ProseMirror-selectednode` class.
+   */
+  selectNode() {
+    this.renderer.updateProps({
+      selected: !0
+    }), this.renderer.element.classList.add("ProseMirror-selectednode");
+  }
+  /**
+   * Deselect the node.
+   * Remove the `selected` prop and the `ProseMirror-selectednode` class.
+   */
+  deselectNode() {
+    this.renderer.updateProps({
+      selected: !1
+    }), this.renderer.element.classList.remove("ProseMirror-selectednode");
+  }
+  /**
+   * Destroy the React component instance.
+   */
+  destroy() {
+    this.renderer.destroy(), this.editor.off("selectionUpdate", this.handleSelectionUpdate), this.contentDOMElement = null, this.selectionRafId && (cancelAnimationFrame(this.selectionRafId), this.selectionRafId = null);
+  }
+  /**
+   * Update the attributes of the top-level element that holds the React component.
+   * Applying the attributes defined in the `attrs` option.
+   */
+  updateElementAttributes() {
+    if (this.options.attrs) {
+      let e = {};
+      if (typeof this.options.attrs == "function") {
+        const t = this.editor.extensionManager.attributes, n = ne(this.node, t);
+        e = this.options.attrs({ node: this.node, HTMLAttributes: n });
+      } else
+        e = this.options.attrs;
+      this.renderer.updateAttributes(e);
+    }
+  }
+};
+function De(e, t) {
+  return (n) => n.editor.contentComponent ? new Se(e, n, t) : {};
+}
+export {
+  be as N,
+  De as R,
+  Ee as a,
+  ie as s,
+  we as u
+};