@milkdown/vue 6.2.0 → 6.3.0

package/lib/VueNode.d.ts

@@ -1,13 +1,13 @@
 import { Ctx } from '@milkdown/core';
 import { Mark, Node } from '@milkdown/prose/model';
 import { Decoration, EditorView } from '@milkdown/prose/view';
-import { InjectionKey } from 'vue';
+import { InjectionKey, Ref } from 'vue';
 export declare type NodeContext<T extends Node | Mark = Node | Mark> = {
     ctx: Ctx;
-    node: T;
+    node: Ref<T>;
     view: EditorView;
     getPos: T extends Mark ? boolean : T extends Node ? () => number : boolean | (() => number);
-    decorations: readonly Decoration[];
+    decorations: Ref<readonly Decoration[]>;
 };
 export declare const nodeMetadata: InjectionKey<NodeContext>;
 export declare type UseNodeCtx = <T extends Node | Mark = Node | Mark>() => NodeContext<T>;

package/lib/VueNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VueNode.d.ts","sourceRoot":"","sources":["../src/VueNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAA8B,YAAY,EAAW,MAAM,KAAK,CAAC;AAExE,oBAAY,WAAW,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,IAAI;IAC3D,GAAG,EAAE,GAAG,CAAC;IACT,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,CAAC,SAAS,IAAI,GAAG,OAAO,GAAG,CAAC,SAAS,IAAI,GAAG,MAAM,MAAM,GAAG,OAAO,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IAC5F,WAAW,EAAE,SAAS,UAAU,EAAE,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,WAAW,CAAY,CAAC;AAEhE,oBAAY,UAAU,GAAG,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC;AACnF,eAAO,MAAM,UAAU,EAAE,UAA6D,CAAC;AAEvF,eAAO,MAAM,gBAAgB;QAAuC,MAAM;;QAAN,MAAM;OAYxE,CAAC;AAGH,eAAO,MAAM,OAAO;;;;OAKlB,CAAC"}
+{"version":3,"file":"VueNode.d.ts","sourceRoot":"","sources":["../src/VueNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAA8B,YAAY,EAAW,GAAG,EAAE,MAAM,KAAK,CAAC;AAE7E,oBAAY,WAAW,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,IAAI;IAC3D,GAAG,EAAE,GAAG,CAAC;IACT,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IACb,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,CAAC,SAAS,IAAI,GAAG,OAAO,GAAG,CAAC,SAAS,IAAI,GAAG,MAAM,MAAM,GAAG,OAAO,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IAC5F,WAAW,EAAE,GAAG,CAAC,SAAS,UAAU,EAAE,CAAC,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,WAAW,CAAY,CAAC;AAEhE,oBAAY,UAAU,GAAG,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC;AACnF,eAAO,MAAM,UAAU,EAAE,UAA6D,CAAC;AAEvF,eAAO,MAAM,gBAAgB;QAAuC,MAAM;;QAAN,MAAM;OAYxE,CAAC;AAGH,eAAO,MAAM,OAAO;;;;OAKlB,CAAC"}

package/lib/VueNodeView.d.ts

@@ -13,16 +13,17 @@ export declare class VueNodeView implements NodeView {
     private addPortal;
     private removePortalByKey;
     private options;
-    private node;
     private view;
     private getPos;
-    private decorations;
     teleportDOM: HTMLElement;
     key: string;
     get isInlineOrMark(): boolean;
+    private node;
+    private decorations;
     constructor(ctx: Ctx, component: DefineComponent, addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void, options: RenderOptions, node: Node | Mark, view: EditorView, getPos: boolean | (() => number), decorations: readonly Decoration[]);
     get dom(): HTMLElement;
     get contentDOM(): HTMLElement | undefined;
+    getPortal: () => DefineComponent;
     renderPortal(): void;
     destroy(): void;
     ignoreMutation(mutation: MutationRecord): boolean;

package/lib/VueNodeView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VueNodeView.d.ts","sourceRoot":"","sources":["../src/VueNodeView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,KAAK,EACR,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,mBAAmB,EACnB,QAAQ,EACR,mBAAmB,EACtB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,eAAe,EAAyC,MAAM,KAAK,CAAC;AAO7E,oBAAY,aAAa,GAAG,OAAO,CAC/B;IACI,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,UAAU,EAAE,EAAE,gBAAgB,EAAE,gBAAgB,KAAK,OAAO,CAAC;CAC5G,GAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,GAAG,cAAc,GAAG,YAAY,GAAG,SAAS,CAAC,CACnF,CAAC;AAEF,eAAO,MAAM,aAAa,uBACD,eAAe,OAAO,MAAM,KAAK,IAAI,2BAA2B,MAAM,KAAK,IAAI,iBAErF,eAAe,YACjB,aAAa,WAChB,GAAG,KAAK,mBAAmB,GAAG,mBAGmE,CAAC;AAEhH,qBAAa,WAAY,YAAW,QAAQ;IASpC,OAAO,CAAC,GAAG;IACX,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,iBAAiB;IACzB,OAAO,CAAC,OAAO;IACf,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,WAAW;IAhBvB,WAAW,EAAE,WAAW,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;IAEZ,IAAI,cAAc,YAEjB;gBAGW,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,SAAS,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,EACzD,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,EACxC,OAAO,EAAE,aAAa,EACtB,IAAI,EAAE,IAAI,GAAG,IAAI,EACjB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,OAAO,GAAG,CAAC,MAAM,MAAM,CAAC,EAChC,WAAW,EAAE,SAAS,UAAU,EAAE;IAQ9C,IAAI,GAAG,gBAEN;IAED,IAAI,UAAU,4BAMb;IAED,YAAY;IAiCZ,OAAO;IAMP,cAAc,CAAC,QAAQ,EAAE,cAAc;IA6BvC,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,UAAU,EAAE,EAAE,gBAAgB,EAAE,gBAAgB;IAoBzF,UAAU,2BAA4B;IAEtC,YAAY,2BAA8B;CAC7C"}
+{"version":3,"file":"VueNodeView.d.ts","sourceRoot":"","sources":["../src/VueNodeView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,KAAK,EACR,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,mBAAmB,EACnB,QAAQ,EACR,mBAAmB,EACtB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,eAAe,EAAmD,MAAM,KAAK,CAAC;AAOvF,oBAAY,aAAa,GAAG,OAAO,CAC/B;IACI,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,UAAU,EAAE,EAAE,gBAAgB,EAAE,gBAAgB,KAAK,OAAO,CAAC;CAC5G,GAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,GAAG,cAAc,GAAG,YAAY,GAAG,SAAS,CAAC,CACnF,CAAC;AAEF,eAAO,MAAM,aAAa,uBACD,eAAe,OAAO,MAAM,KAAK,IAAI,2BAA2B,MAAM,KAAK,IAAI,iBAErF,eAAe,YACjB,aAAa,WAChB,GAAG,KAAK,mBAAmB,GAAG,mBAGmE,CAAC;AAEhH,qBAAa,WAAY,YAAW,QAAQ;IAYpC,OAAO,CAAC,GAAG;IACX,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,iBAAiB;IACzB,OAAO,CAAC,OAAO;IAEf,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,MAAM;IAlBlB,WAAW,EAAE,WAAW,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;IAEZ,IAAI,cAAc,YAEjB;IAED,OAAO,CAAC,IAAI,CAAmB;IAC/B,OAAO,CAAC,WAAW,CAA6B;gBAGpC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,SAAS,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,EACzD,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,EACxC,OAAO,EAAE,aAAa,EAC9B,IAAI,EAAE,IAAI,GAAG,IAAI,EACT,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,OAAO,GAAG,CAAC,MAAM,MAAM,CAAC,EACxC,WAAW,EAAE,SAAS,UAAU,EAAE;IAUtC,IAAI,GAAG,gBAEN;IAED,IAAI,UAAU,4BAMb;IAED,SAAS,QAAO,eAAe,CA0B7B;IAEF,YAAY;IAWZ,OAAO;IAMP,cAAc,CAAC,QAAQ,EAAE,cAAc;IA6BvC,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,UAAU,EAAE,EAAE,gBAAgB,EAAE,gBAAgB;IA0BzF,UAAU,2BAA4B;IAEtC,YAAY,2BAA8B;CAC7C"}

package/lib/index.es.js

@@ -1,234 +1,157 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-var _a, _b;
-import { inject, ref, onMounted, onUnmounted, defineComponent, createVNode, provide, h, Teleport, markRaw, shallowReactive, getCurrentInstance, onBeforeMount, effect, isVNode } from "vue";
-import { editorViewCtx, rootCtx } from "@milkdown/core";
-import { Mark, Node } from "@milkdown/prose/model";
-import { customAlphabet } from "nanoid";
-const rendererKey = Symbol();
-const useGetEditor = (getEditor) => {
-  const renderVue = inject(rendererKey, () => {
-    throw new Error();
-  });
-  const { dom, loading, editor: editorRef } = inject(editorInfoCtxKey, {});
-  const lock = ref(false);
-  onMounted(() => {
-    if (!dom.value)
-      return;
-    const editor = getEditor(dom.value, renderVue);
-    if (!editor)
-      return;
-    if (lock.value)
-      return;
-    loading.value = true;
-    lock.value = true;
-    editor.create().then((editor2) => {
-      editorRef.value = editor2;
+var N = Object.defineProperty;
+var S = (o, e, t) => e in o ? N(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var v = (o, e, t) => (S(o, typeof e != "symbol" ? e + "" : e, t), t);
+import { inject as g, ref as u, onMounted as j, onUnmounted as C, defineComponent as p, createVNode as c, provide as w, h as K, markRaw as k, Teleport as U, shallowReactive as B, getCurrentInstance as A, onBeforeMount as L, effect as _, isVNode as q } from "vue";
+import { editorViewCtx as G, rootCtx as T } from "@milkdown/core";
+import { vueRendererCallOutOfScope as z } from "@milkdown/exception";
+import { Mark as F, Node as I } from "@milkdown/prose/model";
+import { customAlphabet as H } from "nanoid";
+const E = Symbol(), J = (o) => {
+  const e = g(E, () => {
+    throw z();
+  }), { dom: t, loading: i, editor: a } = g(O, {}), s = u(!1);
+  j(() => {
+    if (!t.value)
       return;
+    const r = o(t.value, e);
+    !r || s.value || (i.value = !0, s.value = !0, r.create().then((n) => {
+      a.value = n;
     }).finally(() => {
-      loading.value = false;
-      lock.value = false;
-    }).catch((e) => console.error(e));
-  });
-  onUnmounted(() => {
-    var _a2, _b2, _c;
-    const view = (_a2 = editorRef.value) == null ? void 0 : _a2.action((ctx) => ctx.get(editorViewCtx));
-    const root = (_b2 = editorRef.value) == null ? void 0 : _b2.action((ctx) => ctx.get(rootCtx));
-    (_c = root == null ? void 0 : root.firstChild) == null ? void 0 : _c.remove();
-    view == null ? void 0 : view.destroy();
+      i.value = !1, s.value = !1;
+    }).catch((n) => console.error(n)));
+  }), C(() => {
+    var d, f, h;
+    const r = (d = a.value) == null ? void 0 : d.action((l) => l.get(G)), n = (f = a.value) == null ? void 0 : f.action((l) => l.get(T));
+    (h = n == null ? void 0 : n.firstChild) == null || h.remove(), r == null || r.destroy();
   });
-};
-const EditorComponent = defineComponent({
+}, V = p({
   name: "milkdown-dom-root",
-  setup: (props, {
-    slots
+  setup: (o, {
+    slots: e
   }) => {
-    useGetEditor(props.editor);
-    const ctx = inject(editorInfoCtxKey, {});
-    if (props.editorRef) {
-      props.editorRef.get = () => ctx.editor.value;
-      props.editorRef.dom = () => ctx.dom.value;
-    }
-    return () => {
-      var _a2;
-      return createVNode("div", {
-        "ref": ctx.dom
-      }, [(_a2 = slots["default"]) == null ? void 0 : _a2.call(slots)]);
+    J(o.editor);
+    const t = g(O, {});
+    return o.editorRef && (o.editorRef.get = () => t.editor.value, o.editorRef.dom = () => t.dom.value), () => {
+      var i;
+      return c("div", {
+        ref: t.dom
+      }, [(i = e.default) == null ? void 0 : i.call(e)]);
     };
   }
 });
-EditorComponent["props"] = ["editor", "editorRef"];
-const nodeMetadata = Symbol();
-const useNodeCtx = () => inject(nodeMetadata);
-const VueNodeContainer = defineComponent({
+V.props = ["editor", "editorRef"];
+const b = Symbol(), de = () => g(b), x = p({
   name: "milkdown-node-container",
   setup: ({
-    node,
-    view,
-    getPos,
-    decorations,
-    ctx,
-    as
-  }, context) => {
-    provide(nodeMetadata, {
-      ctx,
-      node,
-      view,
-      getPos,
-      decorations
-    });
-    return () => {
-      var _a2, _b2;
-      return h(as, {
-        "data-view-container": true
-      }, (_b2 = (_a2 = context.slots)["default"]) == null ? void 0 : _b2.call(_a2));
-    };
-  }
+    node: o,
+    view: e,
+    getPos: t,
+    decorations: i,
+    ctx: a,
+    as: s
+  }, r) => (w(b, {
+    ctx: a,
+    node: o,
+    view: e,
+    getPos: t,
+    decorations: i
+  }), () => {
+    var n, d;
+    return K(s, {
+      "data-view-container": !0
+    }, (d = (n = r.slots).default) == null ? void 0 : d.call(n));
+  })
 });
-VueNodeContainer["props"] = ["ctx", "editor", "node", "view", "getPos", "decorations", "as"];
-const Content = defineComponent({
+x.props = ["ctx", "editor", "node", "view", "getPos", "decorations", "as"];
+const R = p({
   name: "milkdown-content",
   setup: ({
-    isInline
-  }) => {
-    return () => isInline ? createVNode("span", {
-      "data-view-content": true
-    }, null) : createVNode("div", {
-      "data-view-content": true
-    }, null);
-  }
+    isInline: o
+  }) => () => o ? c("span", {
+    "data-view-content": !0
+  }, null) : c("div", {
+    "data-view-content": !0
+  }, null)
 });
-Content["props"] = ["isInline"];
-const nanoid = customAlphabet("abcedfghicklmn", 10);
-const createVueView = (addPortal, removePortalByKey) => (component, options = {}) => (ctx) => (node, view, getPos, decorations) => new VueNodeView(ctx, component, addPortal, removePortalByKey, options, node, view, getPos, decorations);
-class VueNodeView {
-  constructor(ctx, component, addPortal, removePortalByKey, options, node, view, getPos, decorations) {
-    __publicField(this, "selectNode", (_a = this.options) == null ? void 0 : _a.selectNode);
-    __publicField(this, "deselectNode", (_b = this.options) == null ? void 0 : _b.deselectNode);
-    this.ctx = ctx;
-    this.component = component;
-    this.addPortal = addPortal;
-    this.removePortalByKey = removePortalByKey;
-    this.options = options;
-    this.node = node;
-    this.view = view;
-    this.getPos = getPos;
-    this.decorations = decorations;
-    this.key = nanoid();
-    const elementName = options.as ? options.as : this.isInlineOrMark ? "span" : "div";
-    this.teleportDOM = document.createElement(elementName);
-    this.renderPortal();
+R.props = ["isInline"];
+const Q = H("abcedfghicklmn", 10), W = (o, e) => (t, i = {}) => (a) => (s, r, n, d) => new X(a, t, o, e, i, s, r, n, d);
+var P, D;
+class X {
+  constructor(e, t, i, a, s, r, n, d, f) {
+    v(this, "getPortal", () => {
+      const e = this.component, t = this.options.as ? this.options.as : this.isInlineOrMark ? "span" : "div";
+      return k(p({
+        name: "milkdown-portal",
+        setup: () => () => c(U, {
+          key: this.key,
+          to: this.teleportDOM
+        }, {
+          default: () => [c(x, {
+            as: t,
+            ctx: this.ctx,
+            node: this.node,
+            view: this.view,
+            getPos: this.getPos,
+            decorations: this.decorations
+          }, {
+            default: () => [c(e, null, {
+              default: () => [c(R, {
+                isInline: this.isInlineOrMark
+              }, null)]
+            })]
+          })]
+        })
+      }));
+    });
+    v(this, "selectNode", (P = this.options) == null ? void 0 : P.selectNode);
+    v(this, "deselectNode", (D = this.options) == null ? void 0 : D.deselectNode);
+    this.ctx = e, this.component = t, this.addPortal = i, this.removePortalByKey = a, this.options = s, this.view = n, this.getPos = d, this.key = Q(), this.node = u(r), this.decorations = u(f);
+    const h = s.as ? s.as : this.isInlineOrMark ? "span" : "div";
+    this.teleportDOM = document.createElement(h), this.renderPortal();
   }
   get isInlineOrMark() {
-    return this.node instanceof Mark || this.node.isInline;
+    return this.node.value instanceof F || this.node.value.isInline;
   }
   get dom() {
     return this.teleportDOM.firstElementChild || this.teleportDOM;
   }
   get contentDOM() {
-    if (this.node instanceof Node && this.node.isLeaf) {
-      return void 0;
-    }
-    return this.teleportDOM.querySelector("[data-view-content]") || this.dom;
+    if (!(this.node instanceof I && this.node.isLeaf))
+      return this.teleportDOM.querySelector("[data-view-content]") || this.dom;
   }
   renderPortal() {
     if (!this.teleportDOM)
       return;
-    const CustomComponent = this.component;
-    const elementName = this.options.as ? this.options.as : this.isInlineOrMark ? "span" : "div";
-    const Portal = defineComponent({
-      name: "milkdown-portal",
-      setup: () => {
-        return () => createVNode(Teleport, {
-          "key": this.key,
-          "to": this.teleportDOM
-        }, {
-          default: () => [createVNode(VueNodeContainer, {
-            "as": elementName,
-            "ctx": this.ctx,
-            "node": this.node,
-            "view": this.view,
-            "getPos": this.getPos,
-            "decorations": this.decorations
-          }, {
-            default: () => [createVNode(CustomComponent, null, {
-              default: () => [createVNode(Content, {
-                "isInline": this.isInlineOrMark
-              }, null)]
-            })]
-          })]
-        });
-      }
-    });
-    this.addPortal(markRaw(Portal), this.key);
-    const instance = getRootInstance();
-    if (instance) {
-      instance.update();
-    }
+    const e = this.getPortal();
+    this.addPortal(e, this.key);
+    const t = Z();
+    t && t.update();
   }
   destroy() {
-    var _a2, _b2;
-    (_b2 = (_a2 = this.options).destroy) == null ? void 0 : _b2.call(_a2);
-    this.teleportDOM.remove();
-    this.removePortalByKey(this.key);
+    var e, t;
+    (t = (e = this.options).destroy) == null || t.call(e), this.teleportDOM.remove(), this.removePortalByKey(this.key);
   }
-  ignoreMutation(mutation) {
-    if (this.options.ignoreMutation) {
-      return this.options.ignoreMutation(mutation);
-    }
-    if (!this.dom || !this.contentDOM) {
-      return true;
-    }
-    if (this.node instanceof Node) {
-      if (this.node.isLeaf || this.node.isAtom) {
-        return true;
-      }
-    }
-    if (mutation.type === "selection") {
-      return false;
-    }
-    if (this.contentDOM === this.dom) {
-      return false;
-    }
-    if (this.contentDOM.contains(mutation.target)) {
-      return false;
-    }
-    return true;
+  ignoreMutation(e) {
+    return this.options.ignoreMutation ? this.options.ignoreMutation(e) : !this.dom || !this.contentDOM || this.node instanceof I && (this.node.isLeaf || this.node.isAtom) ? !0 : !(e.type === "selection" || this.contentDOM === this.dom || this.contentDOM.contains(e.target));
   }
-  update(node, decorations, innerDecorations) {
-    var _a2, _b2;
-    if (this.options.update) {
-      const result = (_b2 = (_a2 = this.options).update) == null ? void 0 : _b2.call(_a2, node, decorations, innerDecorations);
-      if (result != null) {
-        return result;
+  update(e, t, i) {
+    return (() => {
+      var r, n;
+      if (this.options.update) {
+        const d = (n = (r = this.options).update) == null ? void 0 : n.call(r, e, t, i);
+        if (d != null)
+          return d;
       }
-    }
-    if (this.node.type !== node.type) {
-      return false;
-    }
-    if (node === this.node && this.decorations === decorations) {
-      return true;
-    }
-    this.node = node;
-    this.decorations = decorations;
-    return true;
+      return this.node.value.type !== e.type ? !1 : (e === this.node.value && this.decorations.value === t || (this.node.value = e, this.decorations.value = t), !0);
+    })();
   }
 }
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+function Y(o) {
+  return typeof o == "function" || Object.prototype.toString.call(o) === "[object Object]" && !q(o);
 }
-const rootInstance = {
+const M = {
   instance: null
-};
-const getRootInstance = () => {
-  return rootInstance.instance;
-};
-const editorInfoCtxKey = Symbol();
-const refDeprecatedInfo = `
+}, Z = () => M.instance, O = Symbol(), $ = `
 @milkdown/vue:
 Passing ref to VueEditor will soon be deprecated, please use:
 
@@ -242,85 +165,77 @@ effect(() => {
 })
 
 <VueEditor editor={editor} />
-`;
-const compositionDeprecatedInfo = `
+`, ee = `
 @milkdown/vue:
 Passing editor directly to VueEditor will soon be deprecated, please use:
 
 const { editor } = useEditor(/* creator */);
 
 <VueEditor editor={editor} />
-`;
-const VueEditor = defineComponent({
+`, te = p({
   name: "milkdown-vue-root",
-  setup: (props) => {
-    const portals = shallowReactive([]);
-    const instance = getCurrentInstance();
-    onBeforeMount(() => {
-      rootInstance.instance = instance.ctx._;
-    });
-    onUnmounted(() => {
-      rootInstance.instance = null;
-    });
-    const addPortal = markRaw((component, key) => {
-      portals.push([key, component]);
+  setup: (o) => {
+    const e = B([]), t = A();
+    L(() => {
+      M.instance = t.ctx._;
+    }), C(() => {
+      M.instance = null;
     });
-    const removePortalByKey = markRaw((key) => {
-      const index = portals.findIndex((p) => p[0] === key);
-      portals.splice(index, 1);
-    });
-    const renderVue = createVueView(addPortal, removePortalByKey);
-    provide(rendererKey, renderVue);
-    const usingDeprecatedCompositionAPI = Object.hasOwnProperty.call(props.editor, "getInstance");
-    const {
-      getEditorCallback,
-      dom,
-      editor,
-      loading
-    } = usingDeprecatedCompositionAPI ? props.editor.editor : props.editor;
-    effect(() => {
-      if (usingDeprecatedCompositionAPI) {
-        console.warn(compositionDeprecatedInfo);
-      }
-      if (props.editorRef) {
-        console.warn(refDeprecatedInfo);
-      }
-    });
-    provide(editorInfoCtxKey, {
-      dom,
-      editor,
-      loading
-    });
-    return () => {
-      const portalElements = portals.map(([id, P]) => createVNode(P, {
-        "key": id
+    const i = k((l, m) => {
+      e.push([m, l]);
+    }), a = k((l) => {
+      const m = e.findIndex((y) => y[0] === l);
+      e.splice(m, 1);
+    }), s = W(i, a);
+    w(E, s);
+    const r = Object.hasOwnProperty.call(o.editor, "getInstance"), {
+      getEditorCallback: n,
+      dom: d,
+      editor: f,
+      loading: h
+    } = r ? o.editor.editor : o.editor;
+    return _(() => {
+      r && console.warn(ee), o.editorRef && console.warn($);
+    }), w(O, {
+      dom: d,
+      editor: f,
+      loading: h
+    }), () => {
+      const l = e.map(([m, y]) => c(y, {
+        key: m
       }, null));
-      return createVNode(EditorComponent, {
-        "editorRef": props.editorRef,
-        "editor": getEditorCallback.value
-      }, _isSlot(portalElements) ? portalElements : {
-        default: () => [portalElements]
+      return c(V, {
+        editorRef: o.editorRef,
+        editor: n.value
+      }, Y(l) ? l : {
+        default: () => [l]
       });
     };
   }
 });
-VueEditor["props"] = ["editor", "editorRef"];
-const useEditor = (getEditor) => {
-  const dom = ref(null);
-  const editor = ref();
-  const loading = ref(true);
-  const getEditorCallback = ref((...args) => getEditor(...args));
+te.props = ["editor", "editorRef"];
+const le = (o) => {
+  const e = u(null), t = u(), i = u(!0), a = u((...s) => o(...s));
   return {
-    loading,
-    getInstance: () => editor.value,
-    getDom: () => dom.value,
+    loading: i,
+    getInstance: () => t.value,
+    getDom: () => e.value,
     editor: {
-      getEditorCallback,
-      dom,
-      editor,
-      loading
+      getEditorCallback: a,
+      dom: e,
+      editor: t,
+      loading: i
     }
   };
 };
-export { Content, VueEditor, VueNodeContainer, editorInfoCtxKey, getRootInstance, nodeMetadata, useEditor, useNodeCtx };
+export {
+  R as Content,
+  te as VueEditor,
+  x as VueNodeContainer,
+  O as editorInfoCtxKey,
+  Z as getRootInstance,
+  b as nodeMetadata,
+  le as useEditor,
+  de as useNodeCtx
+};
 //# sourceMappingURL=index.es.js.map

package/lib/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/useGetEditor.ts","../src/EditorComponent.tsx","../src/VueNode.tsx","../src/VueNodeView.tsx","../src/Editor.tsx","../src/useEditor.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport { Ctx, editorViewCtx, rootCtx } from '@milkdown/core';\nimport { MarkViewConstructor, NodeViewConstructor } from '@milkdown/prose/view';\nimport { DefineComponent, inject, InjectionKey, onMounted, onUnmounted, ref } from 'vue';\n\nimport { editorInfoCtxKey } from '.';\nimport { EditorInfoCtx, GetEditor, RenderOptions, RenderVue } from './types';\n\nexport const rendererKey: InjectionKey<\n    (component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => NodeViewConstructor | MarkViewConstructor\n> = Symbol();\n\nexport const useGetEditor = (getEditor: GetEditor) => {\n    const renderVue = inject<RenderVue>(rendererKey, () => {\n        throw new Error();\n    });\n    const { dom, loading, editor: editorRef } = inject(editorInfoCtxKey, {} as EditorInfoCtx);\n    const lock = ref(false);\n\n    onMounted(() => {\n        if (!dom.value) return;\n\n        const editor = getEditor(dom.value, renderVue);\n        if (!editor) return;\n\n        if (lock.value) return;\n\n        loading.value = true;\n        lock.value = true;\n\n        editor\n            .create()\n            .then((editor) => {\n                editorRef.value = editor;\n                return;\n            })\n            .finally(() => {\n                loading.value = false;\n                lock.value = false;\n            })\n            .catch((e) => console.error(e));\n    });\n    onUnmounted(() => {\n        const view = editorRef.value?.action((ctx) => ctx.get(editorViewCtx));\n        const root = editorRef.value?.action((ctx) => ctx.get(rootCtx)) as HTMLElement;\n\n        root?.firstChild?.remove();\n        view?.destroy();\n    });\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Editor } from '@milkdown/core';\nimport { defineComponent, h, inject } from 'vue';\n\nimport { editorInfoCtxKey } from './Editor';\nimport { EditorInfoCtx, GetEditor } from './types';\nimport { useGetEditor } from './useGetEditor';\n\nexport const EditorComponent = defineComponent<{ editor: GetEditor; editorRef?: EditorRef }>({\n    name: 'milkdown-dom-root',\n    setup: (props, { slots }) => {\n        useGetEditor(props.editor);\n        const ctx = inject(editorInfoCtxKey, {} as EditorInfoCtx);\n\n        if (props.editorRef) {\n            props.editorRef.get = () => ctx.editor.value;\n            props.editorRef.dom = () => ctx.dom.value;\n        }\n\n        return () => <div ref={ctx.dom}>{slots['default']?.()}</div>;\n    },\n});\nEditorComponent['props'] = ['editor', 'editorRef'];\n\nexport type EditorRef = { get: () => Editor | undefined; dom: () => HTMLDivElement | null };\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Ctx } from '@milkdown/core';\nimport { Mark, Node } from '@milkdown/prose/model';\nimport { Decoration, EditorView } from '@milkdown/prose/view';\nimport { defineComponent, h, inject, InjectionKey, provide } from 'vue';\n\nexport type NodeContext<T extends Node | Mark = Node | Mark> = {\n    ctx: Ctx;\n    node: T;\n    view: EditorView;\n    getPos: T extends Mark ? boolean : T extends Node ? () => number : boolean | (() => number);\n    decorations: readonly Decoration[];\n};\n\nexport const nodeMetadata: InjectionKey<NodeContext> = Symbol();\n\nexport type UseNodeCtx = <T extends Node | Mark = Node | Mark>() => NodeContext<T>;\nexport const useNodeCtx: UseNodeCtx = () => inject(nodeMetadata) as NodeContext<never>;\n\nexport const VueNodeContainer = defineComponent<NodeContext & { as: string }>({\n    name: 'milkdown-node-container',\n    setup: ({ node, view, getPos, decorations, ctx, as }, context) => {\n        provide(nodeMetadata, {\n            ctx,\n            node,\n            view,\n            getPos,\n            decorations,\n        });\n        return () => h(as, { 'data-view-container': true }, context.slots['default']?.());\n    },\n});\nVueNodeContainer['props'] = ['ctx', 'editor', 'node', 'view', 'getPos', 'decorations', 'as'];\n\nexport const Content = defineComponent<{ isInline?: boolean }>({\n    name: 'milkdown-content',\n    setup: ({ isInline }) => {\n        return () => (isInline ? <span data-view-content /> : <div data-view-content />);\n    },\n});\nContent['props'] = ['isInline'];\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Ctx } from '@milkdown/core';\nimport { Mark, Node } from '@milkdown/prose/model';\nimport type {\n    Decoration,\n    DecorationSource,\n    EditorView,\n    MarkViewConstructor,\n    NodeView,\n    NodeViewConstructor,\n} from '@milkdown/prose/view';\nimport { customAlphabet } from 'nanoid';\nimport { DefineComponent, defineComponent, h, markRaw, Teleport } from 'vue';\n\nimport { getRootInstance } from '.';\nimport { Content, VueNodeContainer } from './VueNode';\n\nconst nanoid = customAlphabet('abcedfghicklmn', 10);\n\nexport type RenderOptions = Partial<\n    {\n        as: string;\n        update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean;\n    } & Pick<NodeView, 'ignoreMutation' | 'deselectNode' | 'selectNode' | 'destroy'>\n>;\n\nexport const createVueView =\n    (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) =>\n    (\n        component: DefineComponent,\n        options: RenderOptions = {},\n    ): ((ctx: Ctx) => NodeViewConstructor | MarkViewConstructor) =>\n    (ctx) =>\n    (node, view, getPos, decorations) =>\n        new VueNodeView(ctx, component, addPortal, removePortalByKey, options, node, view, getPos, decorations);\n\nexport class VueNodeView implements NodeView {\n    teleportDOM: HTMLElement;\n    key: string;\n\n    get isInlineOrMark() {\n        return this.node instanceof Mark || this.node.isInline;\n    }\n\n    constructor(\n        private ctx: Ctx,\n        private component: DefineComponent,\n        private addPortal: (portal: DefineComponent, key: string) => void,\n        private removePortalByKey: (key: string) => void,\n        private options: RenderOptions,\n        private node: Node | Mark,\n        private view: EditorView,\n        private getPos: boolean | (() => number),\n        private decorations: readonly Decoration[],\n    ) {\n        this.key = nanoid();\n        const elementName = options.as ? options.as : this.isInlineOrMark ? 'span' : 'div';\n        this.teleportDOM = document.createElement(elementName);\n        this.renderPortal();\n    }\n\n    get dom() {\n        return (this.teleportDOM.firstElementChild || this.teleportDOM) as HTMLElement;\n    }\n\n    get contentDOM() {\n        if (this.node instanceof Node && this.node.isLeaf) {\n            return undefined;\n        }\n\n        return this.teleportDOM.querySelector<HTMLElement>('[data-view-content]') || this.dom;\n    }\n\n    renderPortal() {\n        if (!this.teleportDOM) return;\n\n        const CustomComponent = this.component;\n        const elementName = this.options.as ? this.options.as : this.isInlineOrMark ? 'span' : 'div';\n        const Portal = defineComponent({\n            name: 'milkdown-portal',\n            setup: () => {\n                return () => (\n                    <Teleport key={this.key} to={this.teleportDOM}>\n                        <VueNodeContainer\n                            as={elementName}\n                            ctx={this.ctx}\n                            node={this.node}\n                            view={this.view}\n                            getPos={this.getPos}\n                            decorations={this.decorations}\n                        >\n                            <CustomComponent>\n                                <Content isInline={this.isInlineOrMark} />\n                            </CustomComponent>\n                        </VueNodeContainer>\n                    </Teleport>\n                );\n            },\n        });\n        this.addPortal(markRaw(Portal) as DefineComponent, this.key);\n        const instance = getRootInstance();\n        if (instance) {\n            instance.update();\n        }\n    }\n\n    destroy() {\n        this.options.destroy?.();\n        this.teleportDOM.remove();\n        this.removePortalByKey(this.key);\n    }\n\n    ignoreMutation(mutation: MutationRecord) {\n        if (this.options.ignoreMutation) {\n            return this.options.ignoreMutation(mutation);\n        }\n        if (!this.dom || !this.contentDOM) {\n            return true;\n        }\n\n        if (this.node instanceof Node) {\n            if (this.node.isLeaf || this.node.isAtom) {\n                return true;\n            }\n        }\n\n        if ((mutation as unknown as { type: string }).type === 'selection') {\n            return false;\n        }\n\n        if (this.contentDOM === this.dom) {\n            return false;\n        }\n\n        if (this.contentDOM.contains(mutation.target)) {\n            return false;\n        }\n\n        return true;\n    }\n\n    update(node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) {\n        if (this.options.update) {\n            const result = this.options.update?.(node, decorations, innerDecorations);\n            if (result != null) {\n                return result;\n            }\n        }\n        if (this.node.type !== node.type) {\n            return false;\n        }\n\n        if (node === this.node && this.decorations === decorations) {\n            return true;\n        }\n\n        this.node = node;\n        this.decorations = decorations;\n        return true;\n    }\n\n    selectNode = this.options?.selectNode;\n\n    deselectNode = this.options?.deselectNode;\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport {\n    ComponentInternalInstance,\n    DefineComponent,\n    defineComponent,\n    effect,\n    getCurrentInstance,\n    h,\n    InjectionKey,\n    markRaw,\n    onBeforeMount,\n    onUnmounted,\n    provide,\n    shallowReactive,\n} from 'vue';\n\nimport { EditorComponent, EditorRef } from './EditorComponent';\nimport { EditorInfo, EditorInfoCtx } from './types';\nimport { rendererKey } from './useGetEditor';\nimport { createVueView } from './VueNodeView';\n\nconst rootInstance: {\n    instance: null | ComponentInternalInstance;\n} = {\n    instance: null,\n};\nexport const getRootInstance = () => {\n    return rootInstance.instance;\n};\n\nexport const editorInfoCtxKey: InjectionKey<EditorInfoCtx> = Symbol();\n\nconst refDeprecatedInfo = `\n@milkdown/vue:\nPassing ref to VueEditor will soon be deprecated, please use:\n\nconst { editor, getInstance, getDom, loading } = useEditor(/* creator */);\n\neffect(() => {\n    if (!loading) {\n        const editor = getInstance();\n        const rootDOM = getDom();\n    }\n})\n\n<VueEditor editor={editor} />\n`;\n\nconst compositionDeprecatedInfo = `\n@milkdown/vue:\nPassing editor directly to VueEditor will soon be deprecated, please use:\n\nconst { editor } = useEditor(/* creator */);\n\n<VueEditor editor={editor} />\n`;\n\ntype PortalPair = [key: string, component: DefineComponent];\nexport const VueEditor = defineComponent<{ editor: EditorInfo; editorRef?: EditorRef }>({\n    name: 'milkdown-vue-root',\n    setup: (props) => {\n        const portals = shallowReactive<PortalPair[]>([]);\n\n        const instance = getCurrentInstance();\n\n        onBeforeMount(() => {\n            rootInstance.instance = (instance as ComponentInternalInstance & { ctx: { _: ComponentInternalInstance } })\n                .ctx._ as ComponentInternalInstance;\n        });\n\n        onUnmounted(() => {\n            rootInstance.instance = null;\n        });\n\n        const addPortal = markRaw((component: DefineComponent, key: string) => {\n            portals.push([key, component]);\n        });\n        const removePortalByKey = markRaw((key: string) => {\n            const index = portals.findIndex((p) => p[0] === key);\n            portals.splice(index, 1);\n        });\n        const renderVue = createVueView(addPortal, removePortalByKey);\n\n        provide(rendererKey, renderVue);\n\n        const usingDeprecatedCompositionAPI = Object.hasOwnProperty.call(props.editor, 'getInstance');\n\n        const { getEditorCallback, dom, editor, loading } = usingDeprecatedCompositionAPI\n            ? // @ts-expect-error deprecated old composition API\n              (props.editor.editor as EditorInfo)\n            : props.editor;\n\n        effect(() => {\n            if (usingDeprecatedCompositionAPI) {\n                console.warn(compositionDeprecatedInfo);\n            }\n            if (props.editorRef) {\n                console.warn(refDeprecatedInfo);\n            }\n        });\n\n        provide(editorInfoCtxKey, {\n            dom,\n            editor,\n            loading,\n        });\n\n        return () => {\n            const portalElements = portals.map(([id, P]) => <P key={id} />);\n            return (\n                <EditorComponent editorRef={props.editorRef} editor={getEditorCallback.value}>\n                    {portalElements}\n                </EditorComponent>\n            );\n        };\n    },\n});\nVueEditor['props'] = ['editor', 'editorRef'];\n","/* Copyright 2021, Milkdown by Mirone. */\n\nimport { Editor } from '@milkdown/core';\nimport { ref } from 'vue';\n\nimport { GetEditor, UseEditorReturn } from './types';\n\nexport const useEditor = (getEditor: GetEditor): UseEditorReturn => {\n    const dom = ref<HTMLDivElement | null>(null);\n    const editor = ref<Editor>();\n    const loading = ref(true);\n    const getEditorCallback = ref<GetEditor>((...args) => getEditor(...args));\n\n    return {\n        loading,\n        getInstance: () => editor.value,\n        getDom: () => dom.value,\n        editor: {\n            getEditorCallback,\n            dom,\n            editor,\n            loading,\n        },\n    };\n};\n"],"names":["EditorComponent","defineComponent","name","setup","props","slots","useGetEditor","editor","ctx","inject","editorInfoCtxKey","editorRef","get","value","dom","_createVNode","nodeMetadata","Symbol","useNodeCtx","VueNodeContainer","node","view","getPos","decorations","as","context","provide","h","Content","isInline","nanoid","customAlphabet","createVueView","addPortal","removePortalByKey","component","options","VueNodeView","constructor","selectNode","deselectNode","key","elementName","isInlineOrMark","teleportDOM","document","createElement","renderPortal","Mark","firstElementChild","contentDOM","Node","isLeaf","undefined","querySelector","CustomComponent","Portal","markRaw","instance","getRootInstance","update","destroy","remove","ignoreMutation","mutation","isAtom","type","contains","target","innerDecorations","result","rootInstance","refDeprecatedInfo","compositionDeprecatedInfo","VueEditor","portals","shallowReactive","getCurrentInstance","onBeforeMount","_","onUnmounted","push","index","findIndex","p","splice","renderVue","rendererKey","usingDeprecatedCompositionAPI","Object","hasOwnProperty","call","getEditorCallback","loading","effect","console","warn","portalElements","map","id","P"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../src/useGetEditor.ts","../src/EditorComponent.tsx","../src/VueNode.tsx","../src/VueNodeView.tsx","../src/Editor.tsx","../src/useEditor.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport { Ctx, editorViewCtx, rootCtx } from '@milkdown/core';\nimport { vueRendererCallOutOfScope } from '@milkdown/exception';\nimport { MarkViewConstructor, NodeViewConstructor } from '@milkdown/prose/view';\nimport { DefineComponent, inject, InjectionKey, onMounted, onUnmounted, ref } from 'vue';\n\nimport { editorInfoCtxKey } from '.';\nimport { EditorInfoCtx, GetEditor, RenderOptions, RenderVue } from './types';\n\nexport const rendererKey: InjectionKey<\n    (component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => NodeViewConstructor | MarkViewConstructor\n> = Symbol();\n\nexport const useGetEditor = (getEditor: GetEditor) => {\n    const renderVue = inject<RenderVue>(rendererKey, () => {\n        throw vueRendererCallOutOfScope();\n    });\n    const { dom, loading, editor: editorRef } = inject(editorInfoCtxKey, {} as EditorInfoCtx);\n    const lock = ref(false);\n\n    onMounted(() => {\n        if (!dom.value) return;\n\n        const editor = getEditor(dom.value, renderVue);\n        if (!editor) return;\n\n        if (lock.value) return;\n\n        loading.value = true;\n        lock.value = true;\n\n        editor\n            .create()\n            .then((editor) => {\n                editorRef.value = editor;\n                return;\n            })\n            .finally(() => {\n                loading.value = false;\n                lock.value = false;\n            })\n            .catch((e) => console.error(e));\n    });\n    onUnmounted(() => {\n        const view = editorRef.value?.action((ctx) => ctx.get(editorViewCtx));\n        const root = editorRef.value?.action((ctx) => ctx.get(rootCtx)) as HTMLElement;\n\n        root?.firstChild?.remove();\n        view?.destroy();\n    });\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Editor } from '@milkdown/core';\nimport { defineComponent, h, inject } from 'vue';\n\nimport { editorInfoCtxKey } from './Editor';\nimport { EditorInfoCtx, GetEditor } from './types';\nimport { useGetEditor } from './useGetEditor';\n\nexport const EditorComponent = defineComponent<{ editor: GetEditor; editorRef?: EditorRef }>({\n    name: 'milkdown-dom-root',\n    setup: (props, { slots }) => {\n        useGetEditor(props.editor);\n        const ctx = inject(editorInfoCtxKey, {} as EditorInfoCtx);\n\n        if (props.editorRef) {\n            props.editorRef.get = () => ctx.editor.value;\n            props.editorRef.dom = () => ctx.dom.value;\n        }\n\n        return () => <div ref={ctx.dom}>{slots['default']?.()}</div>;\n    },\n});\nEditorComponent['props'] = ['editor', 'editorRef'];\n\nexport type EditorRef = { get: () => Editor | undefined; dom: () => HTMLDivElement | null };\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Ctx } from '@milkdown/core';\nimport { Mark, Node } from '@milkdown/prose/model';\nimport { Decoration, EditorView } from '@milkdown/prose/view';\nimport { defineComponent, h, inject, InjectionKey, provide, Ref } from 'vue';\n\nexport type NodeContext<T extends Node | Mark = Node | Mark> = {\n    ctx: Ctx;\n    node: Ref<T>;\n    view: EditorView;\n    getPos: T extends Mark ? boolean : T extends Node ? () => number : boolean | (() => number);\n    decorations: Ref<readonly Decoration[]>;\n};\n\nexport const nodeMetadata: InjectionKey<NodeContext> = Symbol();\n\nexport type UseNodeCtx = <T extends Node | Mark = Node | Mark>() => NodeContext<T>;\nexport const useNodeCtx: UseNodeCtx = () => inject(nodeMetadata) as NodeContext<never>;\n\nexport const VueNodeContainer = defineComponent<NodeContext & { as: string }>({\n    name: 'milkdown-node-container',\n    setup: ({ node, view, getPos, decorations, ctx, as }, context) => {\n        provide(nodeMetadata, {\n            ctx,\n            node,\n            view,\n            getPos,\n            decorations,\n        });\n        return () => h(as, { 'data-view-container': true }, context.slots['default']?.());\n    },\n});\nVueNodeContainer['props'] = ['ctx', 'editor', 'node', 'view', 'getPos', 'decorations', 'as'];\n\nexport const Content = defineComponent<{ isInline?: boolean }>({\n    name: 'milkdown-content',\n    setup: ({ isInline }) => {\n        return () => (isInline ? <span data-view-content /> : <div data-view-content />);\n    },\n});\nContent['props'] = ['isInline'];\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Ctx } from '@milkdown/core';\nimport { Mark, Node } from '@milkdown/prose/model';\nimport type {\n    Decoration,\n    DecorationSource,\n    EditorView,\n    MarkViewConstructor,\n    NodeView,\n    NodeViewConstructor,\n} from '@milkdown/prose/view';\nimport { customAlphabet } from 'nanoid';\nimport { DefineComponent, defineComponent, h, markRaw, Ref, ref, Teleport } from 'vue';\n\nimport { getRootInstance } from '.';\nimport { Content, VueNodeContainer } from './VueNode';\n\nconst nanoid = customAlphabet('abcedfghicklmn', 10);\n\nexport type RenderOptions = Partial<\n    {\n        as: string;\n        update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean;\n    } & Pick<NodeView, 'ignoreMutation' | 'deselectNode' | 'selectNode' | 'destroy'>\n>;\n\nexport const createVueView =\n    (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) =>\n    (\n        component: DefineComponent,\n        options: RenderOptions = {},\n    ): ((ctx: Ctx) => NodeViewConstructor | MarkViewConstructor) =>\n    (ctx) =>\n    (node, view, getPos, decorations) =>\n        new VueNodeView(ctx, component, addPortal, removePortalByKey, options, node, view, getPos, decorations);\n\nexport class VueNodeView implements NodeView {\n    teleportDOM: HTMLElement;\n    key: string;\n\n    get isInlineOrMark() {\n        return this.node.value instanceof Mark || this.node.value.isInline;\n    }\n\n    private node: Ref<Node | Mark>;\n    private decorations: Ref<readonly Decoration[]>;\n\n    constructor(\n        private ctx: Ctx,\n        private component: DefineComponent,\n        private addPortal: (portal: DefineComponent, key: string) => void,\n        private removePortalByKey: (key: string) => void,\n        private options: RenderOptions,\n        node: Node | Mark,\n        private view: EditorView,\n        private getPos: boolean | (() => number),\n        decorations: readonly Decoration[],\n    ) {\n        this.key = nanoid();\n        this.node = ref(node);\n        this.decorations = ref(decorations);\n        const elementName = options.as ? options.as : this.isInlineOrMark ? 'span' : 'div';\n        this.teleportDOM = document.createElement(elementName);\n        this.renderPortal();\n    }\n\n    get dom() {\n        return (this.teleportDOM.firstElementChild || this.teleportDOM) as HTMLElement;\n    }\n\n    get contentDOM() {\n        if (this.node instanceof Node && this.node.isLeaf) {\n            return undefined;\n        }\n\n        return this.teleportDOM.querySelector<HTMLElement>('[data-view-content]') || this.dom;\n    }\n\n    getPortal = (): DefineComponent => {\n        const CustomComponent = this.component;\n        const elementName = this.options.as ? this.options.as : this.isInlineOrMark ? 'span' : 'div';\n        return markRaw(\n            defineComponent({\n                name: 'milkdown-portal',\n                setup: () => {\n                    return () => (\n                        <Teleport key={this.key} to={this.teleportDOM}>\n                            <VueNodeContainer\n                                as={elementName}\n                                ctx={this.ctx}\n                                node={this.node}\n                                view={this.view}\n                                getPos={this.getPos}\n                                decorations={this.decorations}\n                            >\n                                <CustomComponent>\n                                    <Content isInline={this.isInlineOrMark} />\n                                </CustomComponent>\n                            </VueNodeContainer>\n                        </Teleport>\n                    );\n                },\n            }) as DefineComponent,\n        );\n    };\n\n    renderPortal() {\n        if (!this.teleportDOM) return;\n\n        const Portal = this.getPortal();\n        this.addPortal(Portal, this.key);\n        const instance = getRootInstance();\n        if (instance) {\n            instance.update();\n        }\n    }\n\n    destroy() {\n        this.options.destroy?.();\n        this.teleportDOM.remove();\n        this.removePortalByKey(this.key);\n    }\n\n    ignoreMutation(mutation: MutationRecord) {\n        if (this.options.ignoreMutation) {\n            return this.options.ignoreMutation(mutation);\n        }\n        if (!this.dom || !this.contentDOM) {\n            return true;\n        }\n\n        if (this.node instanceof Node) {\n            if (this.node.isLeaf || this.node.isAtom) {\n                return true;\n            }\n        }\n\n        if ((mutation as unknown as { type: string }).type === 'selection') {\n            return false;\n        }\n\n        if (this.contentDOM === this.dom) {\n            return false;\n        }\n\n        if (this.contentDOM.contains(mutation.target)) {\n            return false;\n        }\n\n        return true;\n    }\n\n    update(node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) {\n        const innerUpdate = () => {\n            if (this.options.update) {\n                const result = this.options.update?.(node, decorations, innerDecorations);\n                if (result != null) {\n                    return result;\n                }\n            }\n            if (this.node.value.type !== node.type) {\n                return false;\n            }\n\n            if (node === this.node.value && this.decorations.value === decorations) {\n                return true;\n            }\n\n            this.node.value = node;\n            this.decorations.value = decorations;\n            return true;\n        };\n\n        const shouldUpdate = innerUpdate();\n\n        return shouldUpdate;\n    }\n\n    selectNode = this.options?.selectNode;\n\n    deselectNode = this.options?.deselectNode;\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport {\n    ComponentInternalInstance,\n    DefineComponent,\n    defineComponent,\n    effect,\n    getCurrentInstance,\n    h,\n    InjectionKey,\n    markRaw,\n    onBeforeMount,\n    onUnmounted,\n    provide,\n    shallowReactive,\n} from 'vue';\n\nimport { EditorComponent, EditorRef } from './EditorComponent';\nimport { EditorInfo, EditorInfoCtx } from './types';\nimport { rendererKey } from './useGetEditor';\nimport { createVueView } from './VueNodeView';\n\nconst rootInstance: {\n    instance: null | ComponentInternalInstance;\n} = {\n    instance: null,\n};\nexport const getRootInstance = () => {\n    return rootInstance.instance;\n};\n\nexport const editorInfoCtxKey: InjectionKey<EditorInfoCtx> = Symbol();\n\nconst refDeprecatedInfo = `\n@milkdown/vue:\nPassing ref to VueEditor will soon be deprecated, please use:\n\nconst { editor, getInstance, getDom, loading } = useEditor(/* creator */);\n\neffect(() => {\n    if (!loading) {\n        const editor = getInstance();\n        const rootDOM = getDom();\n    }\n})\n\n<VueEditor editor={editor} />\n`;\n\nconst compositionDeprecatedInfo = `\n@milkdown/vue:\nPassing editor directly to VueEditor will soon be deprecated, please use:\n\nconst { editor } = useEditor(/* creator */);\n\n<VueEditor editor={editor} />\n`;\n\ntype PortalPair = [key: string, component: DefineComponent];\nexport const VueEditor = defineComponent<{ editor: EditorInfo; editorRef?: EditorRef }>({\n    name: 'milkdown-vue-root',\n    setup: (props) => {\n        const portals = shallowReactive<PortalPair[]>([]);\n\n        const instance = getCurrentInstance();\n\n        onBeforeMount(() => {\n            rootInstance.instance = (instance as ComponentInternalInstance & { ctx: { _: ComponentInternalInstance } })\n                .ctx._ as ComponentInternalInstance;\n        });\n\n        onUnmounted(() => {\n            rootInstance.instance = null;\n        });\n\n        const addPortal = markRaw((component: DefineComponent, key: string) => {\n            portals.push([key, component]);\n        });\n        const removePortalByKey = markRaw((key: string) => {\n            const index = portals.findIndex((p) => p[0] === key);\n            portals.splice(index, 1);\n        });\n        const renderVue = createVueView(addPortal, removePortalByKey);\n\n        provide(rendererKey, renderVue);\n\n        const usingDeprecatedCompositionAPI = Object.hasOwnProperty.call(props.editor, 'getInstance');\n\n        const { getEditorCallback, dom, editor, loading } = usingDeprecatedCompositionAPI\n            ? // @ts-expect-error deprecated old composition API\n              (props.editor.editor as EditorInfo)\n            : props.editor;\n\n        effect(() => {\n            if (usingDeprecatedCompositionAPI) {\n                console.warn(compositionDeprecatedInfo);\n            }\n            if (props.editorRef) {\n                console.warn(refDeprecatedInfo);\n            }\n        });\n\n        provide(editorInfoCtxKey, {\n            dom,\n            editor,\n            loading,\n        });\n\n        return () => {\n            const portalElements = portals.map(([id, P]) => <P key={id} />);\n            return (\n                <EditorComponent editorRef={props.editorRef} editor={getEditorCallback.value}>\n                    {portalElements}\n                </EditorComponent>\n            );\n        };\n    },\n});\nVueEditor['props'] = ['editor', 'editorRef'];\n","/* Copyright 2021, Milkdown by Mirone. */\n\nimport { Editor } from '@milkdown/core';\nimport { ref } from 'vue';\n\nimport { GetEditor, UseEditorReturn } from './types';\n\nexport const useEditor = (getEditor: GetEditor): UseEditorReturn => {\n    const dom = ref<HTMLDivElement | null>(null);\n    const editor = ref<Editor>();\n    const loading = ref(true);\n    const getEditorCallback = ref<GetEditor>((...args) => getEditor(...args));\n\n    return {\n        loading,\n        getInstance: () => editor.value,\n        getDom: () => dom.value,\n        editor: {\n            getEditorCallback,\n            dom,\n            editor,\n            loading,\n        },\n    };\n};\n"],"names":["EditorComponent","defineComponent","name","setup","props","slots","useGetEditor","editor","ctx","inject","editorInfoCtxKey","editorRef","get","value","dom","_createVNode","nodeMetadata","Symbol","useNodeCtx","VueNodeContainer","node","view","getPos","decorations","as","context","provide","h","Content","isInline","nanoid","customAlphabet","createVueView","addPortal","removePortalByKey","component","options","VueNodeView","constructor","getPortal","CustomComponent","elementName","isInlineOrMark","markRaw","key","teleportDOM","selectNode","deselectNode","ref","document","createElement","renderPortal","Mark","firstElementChild","contentDOM","Node","isLeaf","querySelector","Portal","instance","getRootInstance","update","destroy","remove","ignoreMutation","mutation","isAtom","type","contains","target","innerDecorations","innerUpdate","result","rootInstance","refDeprecatedInfo","compositionDeprecatedInfo","VueEditor","portals","shallowReactive","getCurrentInstance","onBeforeMount","_","onUnmounted","push","index","findIndex","p","splice","renderVue","rendererKey","usingDeprecatedCompositionAPI","Object","hasOwnProperty","call","getEditorCallback","loading","effect","console","warn","portalElements","map","id","P"],"mappings":"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"}

package/lib/useGetEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGetEditor.d.ts","sourceRoot":"","sources":["../src/useGetEditor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAA0B,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,eAAe,EAAU,YAAY,EAA+B,MAAM,KAAK,CAAC;AAGzF,OAAO,EAAiB,SAAS,EAAE,aAAa,EAAa,MAAM,SAAS,CAAC;AAE7E,eAAO,MAAM,WAAW,EAAE,YAAY,CAClC,CAAC,SAAS,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,aAAa,KAAK,CAAC,GAAG,EAAE,GAAG,KAAK,mBAAmB,GAAG,mBAAmB,CACxG,CAAC;AAEb,eAAO,MAAM,YAAY,cAAe,SAAS,SAqChD,CAAC"}
+{"version":3,"file":"useGetEditor.d.ts","sourceRoot":"","sources":["../src/useGetEditor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAA0B,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,eAAe,EAAU,YAAY,EAA+B,MAAM,KAAK,CAAC;AAGzF,OAAO,EAAiB,SAAS,EAAE,aAAa,EAAa,MAAM,SAAS,CAAC;AAE7E,eAAO,MAAM,WAAW,EAAE,YAAY,CAClC,CAAC,SAAS,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,aAAa,KAAK,CAAC,GAAG,EAAE,GAAG,KAAK,mBAAmB,GAAG,mBAAmB,CACxG,CAAC;AAEb,eAAO,MAAM,YAAY,cAAe,SAAS,SAqChD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milkdown/vue",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "type": "module",
   "main": "./lib/index.es.js",
   "types": "./lib/index.d.ts",
@@ -16,9 +16,10 @@
     "vue"
   ],
   "dependencies": {
-    "@milkdown/utils": "6.2.0",
+    "@milkdown/utils": "6.3.0",
+    "@milkdown/exception": "6.3.0",
     "nanoid": "^4.0.0",
-    "tslib": "^2.3.1"
+    "tslib": "^2.4.0"
   },
   "peerDependencies": {
     "@milkdown/core": "^6.0.1",
@@ -26,8 +27,8 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@milkdown/core": "6.2.0",
-    "@milkdown/prose": "6.2.0",
+    "@milkdown/core": "6.3.0",
+    "@milkdown/prose": "6.3.0",
     "vue": "^3.0.0"
   },
   "nx": {

package/src/VueNode.tsx

@@ -2,14 +2,14 @@
 import { Ctx } from '@milkdown/core';
 import { Mark, Node } from '@milkdown/prose/model';
 import { Decoration, EditorView } from '@milkdown/prose/view';
-import { defineComponent, h, inject, InjectionKey, provide } from 'vue';
+import { defineComponent, h, inject, InjectionKey, provide, Ref } from 'vue';
 
 export type NodeContext<T extends Node | Mark = Node | Mark> = {
     ctx: Ctx;
-    node: T;
+    node: Ref<T>;
     view: EditorView;
     getPos: T extends Mark ? boolean : T extends Node ? () => number : boolean | (() => number);
-    decorations: readonly Decoration[];
+    decorations: Ref<readonly Decoration[]>;
 };
 
 export const nodeMetadata: InjectionKey<NodeContext> = Symbol();

package/src/VueNodeView.tsx

@@ -10,7 +10,7 @@ import type {
     NodeViewConstructor,
 } from '@milkdown/prose/view';
 import { customAlphabet } from 'nanoid';
-import { DefineComponent, defineComponent, h, markRaw, Teleport } from 'vue';
+import { DefineComponent, defineComponent, h, markRaw, Ref, ref, Teleport } from 'vue';
 
 import { getRootInstance } from '.';
 import { Content, VueNodeContainer } from './VueNode';
@@ -39,21 +39,26 @@ export class VueNodeView implements NodeView {
     key: string;
 
     get isInlineOrMark() {
-        return this.node instanceof Mark || this.node.isInline;
+        return this.node.value instanceof Mark || this.node.value.isInline;
     }
 
+    private node: Ref<Node | Mark>;
+    private decorations: Ref<readonly Decoration[]>;
+
     constructor(
         private ctx: Ctx,
         private component: DefineComponent,
         private addPortal: (portal: DefineComponent, key: string) => void,
         private removePortalByKey: (key: string) => void,
         private options: RenderOptions,
-        private node: Node | Mark,
+        node: Node | Mark,
         private view: EditorView,
         private getPos: boolean | (() => number),
-        private decorations: readonly Decoration[],
+        decorations: readonly Decoration[],
     ) {
         this.key = nanoid();
+        this.node = ref(node);
+        this.decorations = ref(decorations);
         const elementName = options.as ? options.as : this.isInlineOrMark ? 'span' : 'div';
         this.teleportDOM = document.createElement(elementName);
         this.renderPortal();
@@ -71,33 +76,39 @@ export class VueNodeView implements NodeView {
         return this.teleportDOM.querySelector<HTMLElement>('[data-view-content]') || this.dom;
     }
 
+    getPortal = (): DefineComponent => {
+        const CustomComponent = this.component;
+        const elementName = this.options.as ? this.options.as : this.isInlineOrMark ? 'span' : 'div';
+        return markRaw(
+            defineComponent({
+                name: 'milkdown-portal',
+                setup: () => {
+                    return () => (
+                        <Teleport key={this.key} to={this.teleportDOM}>
+                            <VueNodeContainer
+                                as={elementName}
+                                ctx={this.ctx}
+                                node={this.node}
+                                view={this.view}
+                                getPos={this.getPos}
+                                decorations={this.decorations}
+                            >
+                                <CustomComponent>
+                                    <Content isInline={this.isInlineOrMark} />
+                                </CustomComponent>
+                            </VueNodeContainer>
+                        </Teleport>
+                    );
+                },
+            }) as DefineComponent,
+        );
+    };
+
     renderPortal() {
         if (!this.teleportDOM) return;
 
-        const CustomComponent = this.component;
-        const elementName = this.options.as ? this.options.as : this.isInlineOrMark ? 'span' : 'div';
-        const Portal = defineComponent({
-            name: 'milkdown-portal',
-            setup: () => {
-                return () => (
-                    <Teleport key={this.key} to={this.teleportDOM}>
-                        <VueNodeContainer
-                            as={elementName}
-                            ctx={this.ctx}
-                            node={this.node}
-                            view={this.view}
-                            getPos={this.getPos}
-                            decorations={this.decorations}
-                        >
-                            <CustomComponent>
-                                <Content isInline={this.isInlineOrMark} />
-                            </CustomComponent>
-                        </VueNodeContainer>
-                    </Teleport>
-                );
-            },
-        });
-        this.addPortal(markRaw(Portal) as DefineComponent, this.key);
+        const Portal = this.getPortal();
+        this.addPortal(Portal, this.key);
         const instance = getRootInstance();
         if (instance) {
             instance.update();
@@ -140,23 +151,29 @@ export class VueNodeView implements NodeView {
     }
 
     update(node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) {
-        if (this.options.update) {
-            const result = this.options.update?.(node, decorations, innerDecorations);
-            if (result != null) {
-                return result;
+        const innerUpdate = () => {
+            if (this.options.update) {
+                const result = this.options.update?.(node, decorations, innerDecorations);
+                if (result != null) {
+                    return result;
+                }
+            }
+            if (this.node.value.type !== node.type) {
+                return false;
+            }
+
+            if (node === this.node.value && this.decorations.value === decorations) {
+                return true;
             }
-        }
-        if (this.node.type !== node.type) {
-            return false;
-        }
 
-        if (node === this.node && this.decorations === decorations) {
+            this.node.value = node;
+            this.decorations.value = decorations;
             return true;
-        }
+        };
 
-        this.node = node;
-        this.decorations = decorations;
-        return true;
+        const shouldUpdate = innerUpdate();
+
+        return shouldUpdate;
     }
 
     selectNode = this.options?.selectNode;

package/src/useGetEditor.ts

@@ -1,5 +1,6 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { Ctx, editorViewCtx, rootCtx } from '@milkdown/core';
+import { vueRendererCallOutOfScope } from '@milkdown/exception';
 import { MarkViewConstructor, NodeViewConstructor } from '@milkdown/prose/view';
 import { DefineComponent, inject, InjectionKey, onMounted, onUnmounted, ref } from 'vue';
 
@@ -12,7 +13,7 @@ export const rendererKey: InjectionKey<
 
 export const useGetEditor = (getEditor: GetEditor) => {
     const renderVue = inject<RenderVue>(rendererKey, () => {
-        throw new Error();
+        throw vueRendererCallOutOfScope();
     });
     const { dom, loading, editor: editorRef } = inject(editorInfoCtxKey, {} as EditorInfoCtx);
     const lock = ref(false);