@fewangsit/wangsvue 1.5.219-alpha.0 → 1.5.219-alpha.2

package/vendor/@tiptap/vue-3/dist/index.es.js

@@ -1,8 +1,8 @@
-import { B as g } from "../../extension-bubble-menu/dist/index.es.js";
-import { ref as u, defineComponent as d, provide as h, markRaw as f, reactive as y, h as a, render as v, shallowRef as C, onMounted as c, onBeforeUnmount as l, getCurrentInstance as b, watchEffect as w, nextTick as S, unref as _, customRef as x } from "vue";
-import { q as N, r as O } from "../../core/dist/index.es.js";
-import { a as P } from "../../extension-floating-menu/dist/index.es.js";
-d({
+import { B as BubbleMenuPlugin } from "../../extension-bubble-menu/dist/index.es.js";
+import { ref, defineComponent, provide, markRaw, reactive, h, render, shallowRef, onMounted, onBeforeUnmount, getCurrentInstance, watchEffect, nextTick, unref, customRef } from "vue";
+import { q as NodeView, r as Editor$1 } from "../../core/dist/index.es.js";
+import { a as FloatingMenuPlugin } from "../../extension-floating-menu/dist/index.es.js";
+defineComponent({
   name: "BubbleMenu",
   props: {
     pluginKey: {
@@ -11,7 +11,7 @@ d({
     },
     editor: {
       type: Object,
-      required: !0
+      required: true
     },
     updateDelay: {
       type: Number,
@@ -26,46 +26,59 @@ d({
       default: null
     }
   },
-  setup(r, { slots: t }) {
-    const n = u(null);
-    return c(() => {
-      const { updateDelay: e, editor: o, pluginKey: i, shouldShow: s, tippyOptions: p } = r;
-      o.registerPlugin(g({
-        updateDelay: e,
-        editor: o,
-        element: n.value,
-        pluginKey: i,
-        shouldShow: s,
-        tippyOptions: p
+  setup(props, { slots }) {
+    const root = ref(null);
+    onMounted(() => {
+      const { updateDelay, editor, pluginKey, shouldShow, tippyOptions } = props;
+      editor.registerPlugin(BubbleMenuPlugin({
+        updateDelay,
+        editor,
+        element: root.value,
+        pluginKey,
+        shouldShow,
+        tippyOptions
       }));
-    }), l(() => {
-      const { pluginKey: e, editor: o } = r;
-      o.unregisterPlugin(e);
-    }), () => {
-      var e;
-      return a("div", { ref: n }, (e = t.default) === null || e === void 0 ? void 0 : e.call(t));
+    });
+    onBeforeUnmount(() => {
+      const { pluginKey, editor } = props;
+      editor.unregisterPlugin(pluginKey);
+    });
+    return () => {
+      var _a;
+      return h("div", { ref: root }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
     };
   }
 });
-function m(r) {
-  return x((t, n) => ({
-    get() {
-      return t(), r;
-    },
-    set(e) {
-      r = e, requestAnimationFrame(() => {
+function useDebouncedRef(value) {
+  return customRef((track, trigger) => {
+    return {
+      get() {
+        track();
+        return value;
+      },
+      set(newValue) {
+        value = newValue;
         requestAnimationFrame(() => {
-          n();
+          requestAnimationFrame(() => {
+            trigger();
+          });
         });
-      });
-    }
-  }));
+      }
+    };
+  });
 }
-class D extends O {
-  constructor(t = {}) {
-    return super(t), this.contentComponent = null, this.appContext = null, this.reactiveState = m(this.view.state), this.reactiveExtensionStorage = m(this.extensionStorage), this.on("beforeTransaction", ({ nextState: n }) => {
-      this.reactiveState.value = n, this.reactiveExtensionStorage.value = this.extensionStorage;
-    }), f(this);
+class Editor extends Editor$1 {
+  constructor(options = {}) {
+    super(options);
+    this.contentComponent = null;
+    this.appContext = null;
+    this.reactiveState = useDebouncedRef(this.view.state);
+    this.reactiveExtensionStorage = useDebouncedRef(this.extensionStorage);
+    this.on("beforeTransaction", ({ nextState }) => {
+      this.reactiveState.value = nextState;
+      this.reactiveExtensionStorage.value = this.extensionStorage;
+    });
+    return markRaw(this);
   }
   get state() {
     return this.reactiveState ? this.reactiveState.value : this.view.state;
@@ -76,19 +89,25 @@ class D extends O {
   /**
    * Register a ProseMirror plugin.
    */
-  registerPlugin(t, n) {
-    const e = super.registerPlugin(t, n);
-    return this.reactiveState && (this.reactiveState.value = e), e;
+  registerPlugin(plugin, handlePlugins) {
+    const nextState = super.registerPlugin(plugin, handlePlugins);
+    if (this.reactiveState) {
+      this.reactiveState.value = nextState;
+    }
+    return nextState;
   }
   /**
    * Unregister a ProseMirror plugin.
    */
-  unregisterPlugin(t) {
-    const n = super.unregisterPlugin(t);
-    return this.reactiveState && n && (this.reactiveState.value = n), n;
+  unregisterPlugin(nameOrPluginKey) {
+    const nextState = super.unregisterPlugin(nameOrPluginKey);
+    if (this.reactiveState && nextState) {
+      this.reactiveState.value = nextState;
+    }
+    return nextState;
   }
 }
-const A = d({
+const EditorContent = defineComponent({
   name: "EditorContent",
   props: {
     editor: {
@@ -96,37 +115,54 @@ const A = d({
       type: Object
     }
   },
-  setup(r) {
-    const t = u(), n = b();
-    return w(() => {
-      const e = r.editor;
-      e && e.options.element && t.value && S(() => {
-        if (!t.value || !e.options.element.firstChild)
-          return;
-        const o = _(t.value);
-        t.value.append(...e.options.element.childNodes), e.contentComponent = n.ctx._, n && (e.appContext = {
-          ...n.appContext,
-          // Vue internally uses prototype chain to forward/shadow injects across the entire component chain
-          // so don't use object spread operator or 'Object.assign' and just set `provides` as is on editor's appContext
-          // @ts-expect-error forward instance's 'provides' into appContext
-          provides: n.provides
-        }), e.setOptions({
-          element: o
-        }), e.createNodeViews();
-      });
-    }), l(() => {
-      const e = r.editor;
-      e && (e.contentComponent = null, e.appContext = null);
-    }), { rootEl: t };
+  setup(props) {
+    const rootEl = ref();
+    const instance = getCurrentInstance();
+    watchEffect(() => {
+      const editor = props.editor;
+      if (editor && editor.options.element && rootEl.value) {
+        nextTick(() => {
+          if (!rootEl.value || !editor.options.element.firstChild) {
+            return;
+          }
+          const element = unref(rootEl.value);
+          rootEl.value.append(...editor.options.element.childNodes);
+          editor.contentComponent = instance.ctx._;
+          if (instance) {
+            editor.appContext = {
+              ...instance.appContext,
+              // Vue internally uses prototype chain to forward/shadow injects across the entire component chain
+              // so don't use object spread operator or 'Object.assign' and just set `provides` as is on editor's appContext
+              // @ts-expect-error forward instance's 'provides' into appContext
+              provides: instance.provides
+            };
+          }
+          editor.setOptions({
+            element
+          });
+          editor.createNodeViews();
+        });
+      }
+    });
+    onBeforeUnmount(() => {
+      const editor = props.editor;
+      if (!editor) {
+        return;
+      }
+      editor.contentComponent = null;
+      editor.appContext = null;
+    });
+    return { rootEl };
   },
   render() {
-    return a("div", {
-      ref: (r) => {
-        this.rootEl = r;
+    return h("div", {
+      ref: (el) => {
+        this.rootEl = el;
       }
     });
   }
-}), U = d({
+});
+const FloatingMenu = defineComponent({
   name: "FloatingMenu",
   props: {
     pluginKey: {
@@ -137,7 +173,7 @@ const A = d({
     },
     editor: {
       type: Object,
-      required: !0
+      required: true
     },
     tippyOptions: {
       type: Object,
@@ -148,27 +184,29 @@ const A = d({
       default: null
     }
   },
-  setup(r, { slots: t }) {
-    const n = u(null);
-    return c(() => {
-      const { pluginKey: e, editor: o, tippyOptions: i, shouldShow: s } = r;
-      o.registerPlugin(P({
-        pluginKey: e,
-        editor: o,
-        element: n.value,
-        tippyOptions: i,
-        shouldShow: s
+  setup(props, { slots }) {
+    const root = ref(null);
+    onMounted(() => {
+      const { pluginKey, editor, tippyOptions, shouldShow } = props;
+      editor.registerPlugin(FloatingMenuPlugin({
+        pluginKey,
+        editor,
+        element: root.value,
+        tippyOptions,
+        shouldShow
       }));
-    }), l(() => {
-      const { pluginKey: e, editor: o } = r;
-      o.unregisterPlugin(e);
-    }), () => {
-      var e;
-      return a("div", { ref: n }, (e = t.default) === null || e === void 0 ? void 0 : e.call(t));
+    });
+    onBeforeUnmount(() => {
+      const { pluginKey, editor } = props;
+      editor.unregisterPlugin(pluginKey);
+    });
+    return () => {
+      var _a;
+      return h("div", { ref: root }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
     };
   }
 });
-d({
+defineComponent({
   name: "NodeViewContent",
   props: {
     as: {
@@ -177,7 +215,7 @@ d({
     }
   },
   render() {
-    return a(this.as, {
+    return h(this.as, {
       style: {
         whiteSpace: "pre-wrap"
       },
@@ -185,7 +223,7 @@ d({
     });
   }
 });
-const K = d({
+const NodeViewWrapper = defineComponent({
   name: "NodeViewWrapper",
   props: {
     as: {
@@ -195,8 +233,8 @@ const K = d({
   },
   inject: ["onDragStart", "decorationClasses"],
   render() {
-    var r, t;
-    return a(this.as, {
+    var _a, _b;
+    return h(this.as, {
       // @ts-ignore
       class: this.decorationClasses,
       style: {
@@ -205,115 +243,141 @@ const K = d({
       "data-node-view-wrapper": "",
       // @ts-ignore (https://github.com/vuejs/vue-next/issues/3031)
       onDragstart: this.onDragStart
-    }, (t = (r = this.$slots).default) === null || t === void 0 ? void 0 : t.call(r));
+    }, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a));
   }
-}), L = (r = {}) => {
-  const t = C();
-  return c(() => {
-    t.value = new D(r);
-  }), l(() => {
-    var n, e, o;
-    const i = (n = t.value) === null || n === void 0 ? void 0 : n.options.element, s = i == null ? void 0 : i.cloneNode(!0);
-    (e = i == null ? void 0 : i.parentNode) === null || e === void 0 || e.replaceChild(s, i), (o = t.value) === null || o === void 0 || o.destroy();
-  }), t;
+});
+const useEditor = (options = {}) => {
+  const editor = shallowRef();
+  onMounted(() => {
+    editor.value = new Editor(options);
+  });
+  onBeforeUnmount(() => {
+    var _a, _b, _c;
+    const nodes = (_a = editor.value) === null || _a === void 0 ? void 0 : _a.options.element;
+    const newEl = nodes === null || nodes === void 0 ? void 0 : nodes.cloneNode(true);
+    (_b = nodes === null || nodes === void 0 ? void 0 : nodes.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(newEl, nodes);
+    (_c = editor.value) === null || _c === void 0 ? void 0 : _c.destroy();
+  });
+  return editor;
 };
-class E {
-  constructor(t, { props: n = {}, editor: e }) {
-    this.editor = e, this.component = f(t), this.el = document.createElement("div"), this.props = y(n), this.renderedComponent = this.renderComponent();
+class VueRenderer {
+  constructor(component, { props = {}, editor }) {
+    this.editor = editor;
+    this.component = markRaw(component);
+    this.el = document.createElement("div");
+    this.props = reactive(props);
+    this.renderedComponent = this.renderComponent();
   }
   get element() {
     return this.renderedComponent.el;
   }
   get ref() {
-    var t, n, e, o;
-    return !((n = (t = this.renderedComponent.vNode) === null || t === void 0 ? void 0 : t.component) === null || n === void 0) && n.exposed ? this.renderedComponent.vNode.component.exposed : (o = (e = this.renderedComponent.vNode) === null || e === void 0 ? void 0 : e.component) === null || o === void 0 ? void 0 : o.proxy;
+    var _a, _b, _c, _d;
+    if ((_b = (_a = this.renderedComponent.vNode) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.exposed) {
+      return this.renderedComponent.vNode.component.exposed;
+    }
+    return (_d = (_c = this.renderedComponent.vNode) === null || _c === void 0 ? void 0 : _c.component) === null || _d === void 0 ? void 0 : _d.proxy;
   }
   renderComponent() {
-    let t = a(this.component, this.props);
-    return this.editor.appContext && (t.appContext = this.editor.appContext), typeof document < "u" && this.el && v(t, this.el), { vNode: t, destroy: () => {
-      this.el && v(null, this.el), this.el = null, t = null;
-    }, el: this.el ? this.el.firstElementChild : null };
+    let vNode = h(this.component, this.props);
+    if (this.editor.appContext) {
+      vNode.appContext = this.editor.appContext;
+    }
+    if (typeof document !== "undefined" && this.el) {
+      render(vNode, this.el);
+    }
+    const destroy = () => {
+      if (this.el) {
+        render(null, this.el);
+      }
+      this.el = null;
+      vNode = null;
+    };
+    return { vNode, destroy, el: this.el ? this.el.firstElementChild : null };
   }
-  updateProps(t = {}) {
-    Object.entries(t).forEach(([n, e]) => {
-      this.props[n] = e;
-    }), this.renderComponent();
+  updateProps(props = {}) {
+    Object.entries(props).forEach(([key, value]) => {
+      this.props[key] = value;
+    });
+    this.renderComponent();
   }
   destroy() {
     this.renderedComponent.destroy();
   }
 }
-const R = {
+const nodeViewProps = {
   editor: {
     type: Object,
-    required: !0
+    required: true
   },
   node: {
     type: Object,
-    required: !0
+    required: true
   },
   decorations: {
     type: Object,
-    required: !0
+    required: true
   },
   selected: {
     type: Boolean,
-    required: !0
+    required: true
   },
   extension: {
     type: Object,
-    required: !0
+    required: true
   },
   getPos: {
     type: Function,
-    required: !0
+    required: true
   },
   updateAttributes: {
     type: Function,
-    required: !0
+    required: true
   },
   deleteNode: {
     type: Function,
-    required: !0
+    required: true
   },
   view: {
     type: Object,
-    required: !0
+    required: true
   },
   innerDecorations: {
     type: Object,
-    required: !0
+    required: true
   },
   HTMLAttributes: {
     type: Object,
-    required: !0
+    required: true
   }
 };
-class j extends N {
+class VueNodeView extends NodeView {
   mount() {
-    const t = {
+    const props = {
       editor: this.editor,
       node: this.node,
       decorations: this.decorations,
       innerDecorations: this.innerDecorations,
       view: this.view,
-      selected: !1,
+      selected: false,
       extension: this.extension,
       HTMLAttributes: this.HTMLAttributes,
       getPos: () => this.getPos(),
-      updateAttributes: (o = {}) => this.updateAttributes(o),
+      updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
       deleteNode: () => this.deleteNode()
-    }, n = this.onDragStart.bind(this);
-    this.decorationClasses = u(this.getDecorationClasses());
-    const e = d({
+    };
+    const onDragStart = this.onDragStart.bind(this);
+    this.decorationClasses = ref(this.getDecorationClasses());
+    const extendedComponent = defineComponent({
       extends: { ...this.component },
-      props: Object.keys(t),
+      props: Object.keys(props),
       template: this.component.template,
-      setup: (o) => {
-        var i, s;
-        return h("onDragStart", n), h("decorationClasses", this.decorationClasses), (s = (i = this.component).setup) === null || s === void 0 ? void 0 : s.call(i, o, {
-          expose: () => {
-          }
+      setup: (reactiveProps) => {
+        var _a, _b;
+        provide("onDragStart", onDragStart);
+        provide("decorationClasses", this.decorationClasses);
+        return (_b = (_a = this.component).setup) === null || _b === void 0 ? void 0 : _b.call(_a, reactiveProps, {
+          expose: () => void 0
         });
       },
       // add support for scoped styles
@@ -332,9 +396,11 @@ class j extends N {
       // eslint-disable-next-line
       __file: this.component.__file
     });
-    this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this), this.editor.on("selectionUpdate", this.handleSelectionUpdate), this.renderer = new E(e, {
+    this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this);
+    this.editor.on("selectionUpdate", this.handleSelectionUpdate);
+    this.renderer = new VueRenderer(extendedComponent, {
       editor: this.editor,
-      props: t
+      props
     });
   }
   /**
@@ -342,8 +408,9 @@ class j extends N {
    * This is the element that will be used to display the node view.
    */
   get dom() {
-    if (!this.renderer.element || !this.renderer.element.hasAttribute("data-node-view-wrapper"))
+    if (!this.renderer.element || !this.renderer.element.hasAttribute("data-node-view-wrapper")) {
       throw Error("Please use the NodeViewWrapper component for your node view.");
+    }
     return this.renderer.element;
   }
   /**
@@ -351,46 +418,70 @@ class j extends N {
    * 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.dom.querySelector("[data-node-view-content]");
+    if (this.node.isLeaf) {
+      return null;
+    }
+    return this.dom.querySelector("[data-node-view-content]");
   }
   /**
    * On editor selection update, check if the node is selected.
    * If it is, call `selectNode`, otherwise call `deselectNode`.
    */
   handleSelectionUpdate() {
-    const { from: t, to: n } = this.editor.state.selection, e = this.getPos();
-    if (typeof e == "number")
-      if (t <= e && n >= e + this.node.nodeSize) {
-        if (this.renderer.props.selected)
-          return;
-        this.selectNode();
-      } else {
-        if (!this.renderer.props.selected)
-          return;
-        this.deselectNode();
+    const { from, to } = this.editor.state.selection;
+    const pos = this.getPos();
+    if (typeof pos !== "number") {
+      return;
+    }
+    if (from <= pos && to >= pos + 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(t, n, e) {
-    const o = (i) => {
-      this.decorationClasses.value = this.getDecorationClasses(), this.renderer.updateProps(i);
+  update(node, decorations, innerDecorations) {
+    const rerenderComponent = (props) => {
+      this.decorationClasses.value = this.getDecorationClasses();
+      this.renderer.updateProps(props);
     };
-    if (typeof this.options.update == "function") {
-      const i = this.node, s = this.decorations, p = this.innerDecorations;
-      return this.node = t, this.decorations = n, this.innerDecorations = e, this.options.update({
-        oldNode: i,
-        oldDecorations: s,
-        newNode: t,
-        newDecorations: n,
-        oldInnerDecorations: p,
-        innerDecorations: e,
-        updateProps: () => o({ node: t, decorations: n, innerDecorations: e })
+    if (typeof this.options.update === "function") {
+      const oldNode = this.node;
+      const oldDecorations = this.decorations;
+      const oldInnerDecorations = this.innerDecorations;
+      this.node = node;
+      this.decorations = decorations;
+      this.innerDecorations = innerDecorations;
+      return this.options.update({
+        oldNode,
+        oldDecorations,
+        newNode: node,
+        newDecorations: decorations,
+        oldInnerDecorations,
+        innerDecorations,
+        updateProps: () => rerenderComponent({ node, decorations, innerDecorations })
       });
     }
-    return t.type !== this.node.type ? !1 : (t === this.node && this.decorations === n && this.innerDecorations === e || (this.node = t, this.decorations = n, this.innerDecorations = e, o({ node: t, decorations: n, innerDecorations: e })), !0);
+    if (node.type !== this.node.type) {
+      return false;
+    }
+    if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {
+      return true;
+    }
+    this.node = node;
+    this.decorations = decorations;
+    this.innerDecorations = innerDecorations;
+    rerenderComponent({ node, decorations, innerDecorations });
+    return true;
   }
   /**
    * Select the node.
@@ -398,8 +489,11 @@ class j extends N {
    */
   selectNode() {
     this.renderer.updateProps({
-      selected: !0
-    }), this.renderer.element && this.renderer.element.classList.add("ProseMirror-selectednode");
+      selected: true
+    });
+    if (this.renderer.element) {
+      this.renderer.element.classList.add("ProseMirror-selectednode");
+    }
   }
   /**
    * Deselect the node.
@@ -407,30 +501,35 @@ class j extends N {
    */
   deselectNode() {
     this.renderer.updateProps({
-      selected: !1
-    }), this.renderer.element && this.renderer.element.classList.remove("ProseMirror-selectednode");
+      selected: false
+    });
+    if (this.renderer.element) {
+      this.renderer.element.classList.remove("ProseMirror-selectednode");
+    }
   }
   getDecorationClasses() {
-    return this.decorations.map((t) => t.type.attrs.class).flat().join(" ");
+    return this.decorations.map((item) => item.type.attrs.class).flat().join(" ");
   }
   destroy() {
-    this.renderer.destroy(), this.editor.off("selectionUpdate", this.handleSelectionUpdate);
+    this.renderer.destroy();
+    this.editor.off("selectionUpdate", this.handleSelectionUpdate);
   }
 }
-function B(r, t) {
-  return (n) => {
-    if (!n.editor.contentComponent)
+function VueNodeViewRenderer(component, options) {
+  return (props) => {
+    if (!props.editor.contentComponent) {
       return {};
-    const e = typeof r == "function" && "__vccOpts" in r ? r.__vccOpts : r;
-    return new j(e, n, t);
+    }
+    const normalizedComponent = typeof component === "function" && "__vccOpts" in component ? component.__vccOpts : component;
+    return new VueNodeView(normalizedComponent, props, options);
   };
 }
 export {
-  A as E,
-  U as F,
-  K as N,
-  B as V,
-  E as a,
-  R as n,
-  L as u
+  EditorContent as E,
+  FloatingMenu as F,
+  NodeViewWrapper as N,
+  VueNodeViewRenderer as V,
+  VueRenderer as a,
+  nodeViewProps as n,
+  useEditor as u
 };