@milkdown/vue 6.3.1 → 6.4.1

package/lib/Editor.d.ts

@@ -1,12 +1,11 @@
-import { ComponentInternalInstance, DefineComponent, InjectionKey } from 'vue';
+import { DefineComponent, InjectionKey } from 'vue';
 import { EditorRef } from './EditorComponent';
 import { EditorInfo, EditorInfoCtx } from './types';
-export declare const getRootInstance: () => ComponentInternalInstance | null;
 export declare const editorInfoCtxKey: InjectionKey<EditorInfoCtx>;
 export declare const VueEditor: DefineComponent<{
     editor: EditorInfo;
     editorRef?: EditorRef | undefined;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     editor: EditorInfo;
     editorRef?: EditorRef | undefined;
 }>, {}>;

package/lib/Editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../src/Editor.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,yBAAyB,EACzB,eAAe,EAKf,YAAY,EAMf,MAAM,KAAK,CAAC;AAEb,OAAO,EAAmB,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AASpD,eAAO,MAAM,eAAe,wCAE3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,aAAa,CAAY,CAAC;AA4BtE,eAAO,MAAM,SAAS;YAA6B,UAAU;;;YAAV,UAAU;;OA0D3D,CAAC"}
+{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../src/Editor.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,eAAe,EAKf,YAAY,EAOf,MAAM,KAAK,CAAC;AAEb,OAAO,EAAmB,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIpD,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,aAAa,CAAY,CAAC;AA4BtE,eAAO,MAAM,SAAS;YAA6B,UAAU;;;YAAV,UAAU;;OA4D3D,CAAC"}

package/lib/EditorComponent.d.ts

@@ -3,7 +3,7 @@ import { GetEditor } from './types';
 export declare const EditorComponent: import("vue").DefineComponent<{
     editor: GetEditor;
     editorRef?: EditorRef | undefined;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     editor: GetEditor;
     editorRef?: EditorRef | undefined;
 }>, {}>;

package/lib/VueNode.d.ts

@@ -12,14 +12,14 @@ export declare type NodeContext<T extends Node | Mark = Node | Mark> = {
 export declare const nodeMetadata: InjectionKey<NodeContext>;
 export declare type UseNodeCtx = <T extends Node | Mark = Node | Mark>() => NodeContext<T>;
 export declare const useNodeCtx: UseNodeCtx;
-export declare const VueNodeContainer: import("vue").DefineComponent<NodeContext<Mark | Node> & {
+export declare const VueNodeContainer: import("vue").DefineComponent<NodeContext<Node | Mark> & {
     as: string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<NodeContext<Mark | Node> & {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<NodeContext<Node | Mark> & {
     as: string;
 }>, {}>;
 export declare const Content: import("vue").DefineComponent<{
     isInline?: boolean | undefined;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     isInline?: boolean | undefined;
 }>, {}>;
 //# sourceMappingURL=VueNode.d.ts.map

package/lib/VueNodeView.d.ts

@@ -1,15 +1,16 @@
 import { Ctx } from '@milkdown/core';
 import { Mark, Node } from '@milkdown/prose/model';
 import type { Decoration, DecorationSource, EditorView, MarkViewConstructor, NodeView, NodeViewConstructor } from '@milkdown/prose/view';
-import { DefineComponent } from 'vue';
+import { ComponentInternalInstance, DefineComponent, Ref } from 'vue';
 export declare type RenderOptions = Partial<{
     as: string;
     update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean;
 } & Pick<NodeView, 'ignoreMutation' | 'deselectNode' | 'selectNode' | 'destroy'>>;
-export declare const createVueView: (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) => (component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => NodeViewConstructor | MarkViewConstructor;
+export declare const createVueView: (rootInstance: Ref<null | ComponentInternalInstance>, addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) => (component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => NodeViewConstructor | MarkViewConstructor;
 export declare class VueNodeView implements NodeView {
     private ctx;
     private component;
+    private rootInstance;
     private addPortal;
     private removePortalByKey;
     private options;
@@ -20,7 +21,7 @@ export declare class VueNodeView implements NodeView {
     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[]);
+    constructor(ctx: Ctx, component: DefineComponent, rootInstance: Ref<null | ComponentInternalInstance>, 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;

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,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"}
+{"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,yBAAyB,EAAE,eAAe,EAA+B,GAAG,EAAiB,MAAM,KAAK,CAAC;AAMlH,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,iBAEJ,IAAI,IAAI,GAAG,yBAAyB,CAAC,sBAC/B,eAAe,OAAO,MAAM,KAAK,IAAI,2BAChC,MAAM,KAAK,IAAI,iBAG7B,eAAe,YACjB,aAAa,WAChB,GAAG,KAAK,mBAAmB,GAAG,mBAcnC,CAAC;AAEV,qBAAa,WAAY,YAAW,QAAQ;IAYpC,OAAO,CAAC,GAAG;IACX,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,YAAY;IACpB,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,iBAAiB;IACzB,OAAO,CAAC,OAAO;IAEf,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,MAAM;IAnBlB,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,YAAY,EAAE,GAAG,CAAC,IAAI,GAAG,yBAAyB,CAAC,EACnD,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,92 +1,92 @@
-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";
+var R = Object.defineProperty;
+var S = (o, e, t) => e in o ? R(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var g = (o, e, t) => (S(o, typeof e != "symbol" ? e + "" : e, t), t);
+import { inject as y, ref as u, onMounted as j, onUnmounted as C, defineComponent as v, createVNode as l, provide as k, h as K, markRaw as M, 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, () => {
+  const e = y(E, () => {
     throw z();
-  }), { dom: t, loading: i, editor: a } = g(O, {}), s = u(!1);
+  }), { dom: t, loading: n, editor: s } = y(O, {}), a = 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;
+    !r || a.value || (n.value = !0, a.value = !0, r.create().then((i) => {
+      s.value = i;
     }).finally(() => {
-      i.value = !1, s.value = !1;
-    }).catch((n) => console.error(n)));
+      n.value = !1, a.value = !1;
+    }).catch((i) => console.error(i)));
   }), 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();
+    var d, c, m;
+    const r = (d = s.value) == null ? void 0 : d.action((f) => f.get(G)), i = (c = s.value) == null ? void 0 : c.action((f) => f.get(T));
+    (m = i == null ? void 0 : i.firstChild) == null || m.remove(), r == null || r.destroy();
   });
-}, V = p({
+}, V = v({
   name: "milkdown-dom-root",
   setup: (o, {
     slots: e
   }) => {
     J(o.editor);
-    const t = g(O, {});
+    const t = y(O, {});
     return o.editorRef && (o.editorRef.get = () => t.editor.value, o.editorRef.dom = () => t.dom.value), () => {
-      var i;
-      return c("div", {
+      var n;
+      return l("div", {
         ref: t.dom
-      }, [(i = e.default) == null ? void 0 : i.call(e)]);
+      }, [(n = e.default) == null ? void 0 : n.call(e)]);
     };
   }
 });
 V.props = ["editor", "editorRef"];
-const b = Symbol(), de = () => g(b), x = p({
+const b = Symbol(), ae = () => y(b), x = v({
   name: "milkdown-node-container",
   setup: ({
     node: o,
     view: e,
     getPos: t,
-    decorations: i,
-    ctx: a,
-    as: s
-  }, r) => (w(b, {
-    ctx: a,
+    decorations: n,
+    ctx: s,
+    as: a
+  }, r) => (k(b, {
+    ctx: s,
     node: o,
     view: e,
     getPos: t,
-    decorations: i
+    decorations: n
   }), () => {
-    var n, d;
-    return K(s, {
+    var i, d;
+    return K(a, {
       "data-view-container": !0
-    }, (d = (n = r.slots).default) == null ? void 0 : d.call(n));
+    }, (d = (i = r.slots).default) == null ? void 0 : d.call(i));
   })
 });
 x.props = ["ctx", "editor", "node", "view", "getPos", "decorations", "as"];
-const R = p({
+const N = v({
   name: "milkdown-content",
   setup: ({
     isInline: o
-  }) => () => o ? c("span", {
+  }) => () => o ? l("span", {
     "data-view-content": !0
-  }, null) : c("div", {
+  }, null) : l("div", {
     "data-view-content": !0
   }, null)
 });
-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);
+N.props = ["isInline"];
+const Q = H("abcedfghicklmn", 10), W = (o, e, t) => (n, s = {}) => (a) => (r, i, d, c) => new X(a, n, o, e, t, s, r, i, d, c);
 var P, D;
 class X {
-  constructor(e, t, i, a, s, r, n, d, f) {
-    v(this, "getPortal", () => {
+  constructor(e, t, n, s, a, r, i, d, c, m) {
+    g(this, "getPortal", () => {
       const e = this.component, t = this.options.as ? this.options.as : this.isInlineOrMark ? "span" : "div";
-      return k(p({
+      return M(v({
         name: "milkdown-portal",
-        setup: () => () => c(U, {
+        setup: () => () => l(U, {
           key: this.key,
           to: this.teleportDOM
         }, {
-          default: () => [c(x, {
+          default: () => [l(x, {
             as: t,
             ctx: this.ctx,
             node: this.node,
@@ -94,8 +94,8 @@ class X {
             getPos: this.getPos,
             decorations: this.decorations
           }, {
-            default: () => [c(e, null, {
-              default: () => [c(R, {
+            default: () => [l(e, null, {
+              default: () => [l(N, {
                 isInline: this.isInlineOrMark
               }, null)]
             })]
@@ -103,11 +103,11 @@ class X {
         })
       }));
     });
-    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();
+    g(this, "selectNode", (P = this.options) == null ? void 0 : P.selectNode);
+    g(this, "deselectNode", (D = this.options) == null ? void 0 : D.deselectNode);
+    this.ctx = e, this.component = t, this.rootInstance = n, this.addPortal = s, this.removePortalByKey = a, this.options = r, this.view = d, this.getPos = c, this.key = Q(), this.node = u(i), this.decorations = u(m);
+    const f = r.as ? r.as : this.isInlineOrMark ? "span" : "div";
+    this.teleportDOM = document.createElement(f), this.renderPortal();
   }
   get isInlineOrMark() {
     return this.node.value instanceof F || this.node.value.isInline;
@@ -124,7 +124,7 @@ class X {
       return;
     const e = this.getPortal();
     this.addPortal(e, this.key);
-    const t = Z();
+    const t = this.rootInstance.value;
     t && t.update();
   }
   destroy() {
@@ -134,11 +134,11 @@ class X {
   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(e, t, i) {
+  update(e, t, n) {
     return (() => {
-      var r, n;
+      var r, i;
       if (this.options.update) {
-        const d = (n = (r = this.options).update) == null ? void 0 : n.call(r, e, t, i);
+        const d = (i = (r = this.options).update) == null ? void 0 : i.call(r, e, t, n);
         if (d != null)
           return d;
       }
@@ -149,9 +149,7 @@ class X {
 function Y(o) {
   return typeof o == "function" || Object.prototype.toString.call(o) === "[object Object]" && !q(o);
 }
-const M = {
-  instance: null
-}, Z = () => M.instance, O = Symbol(), $ = `
+const O = Symbol(), Z = `
 @milkdown/vue:
 Passing ref to VueEditor will soon be deprecated, please use:
 
@@ -165,77 +163,76 @@ effect(() => {
 })
 
 <VueEditor editor={editor} />
-`, ee = `
+`, $ = `
 @milkdown/vue:
 Passing editor directly to VueEditor will soon be deprecated, please use:
 
 const { editor } = useEditor(/* creator */);
 
 <VueEditor editor={editor} />
-`, te = p({
+`, ee = v({
   name: "milkdown-vue-root",
   setup: (o) => {
-    const e = B([]), t = A();
+    const e = B([]), t = A(), n = u(null);
     L(() => {
-      M.instance = t.ctx._;
+      n.value = t.ctx._;
     }), C(() => {
-      M.instance = null;
+      n.value = null;
     });
-    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;
+    const s = M((h, p) => {
+      e.push([p, h]);
+    }), a = M((h) => {
+      const p = e.findIndex((w) => w[0] === h);
+      e.splice(p, 1);
+    }), r = W(n, s, a);
+    k(E, r);
+    const i = Object.hasOwnProperty.call(o.editor, "getInstance"), {
+      getEditorCallback: d,
+      dom: c,
+      editor: m,
+      loading: f
+    } = i ? o.editor.editor : o.editor;
     return _(() => {
-      r && console.warn(ee), o.editorRef && console.warn($);
-    }), w(O, {
-      dom: d,
-      editor: f,
-      loading: h
+      i && console.warn($), o.editorRef && console.warn(Z);
+    }), k(O, {
+      dom: c,
+      editor: m,
+      loading: f
     }), () => {
-      const l = e.map(([m, y]) => c(y, {
-        key: m
+      const h = e.map(([p, w]) => l(w, {
+        key: p
       }, null));
-      return c(V, {
+      return l(V, {
         editorRef: o.editorRef,
-        editor: n.value
-      }, Y(l) ? l : {
-        default: () => [l]
+        editor: d.value
+      }, Y(h) ? h : {
+        default: () => [h]
       });
     };
   }
 });
-te.props = ["editor", "editorRef"];
-const le = (o) => {
-  const e = u(null), t = u(), i = u(!0), a = u((...s) => o(...s));
+ee.props = ["editor", "editorRef"];
+const de = (o) => {
+  const e = u(null), t = u(), n = u(!0), s = u((...a) => o(...a));
   return {
-    loading: i,
+    loading: n,
     getInstance: () => t.value,
     getDom: () => e.value,
     editor: {
-      getEditorCallback: a,
+      getEditorCallback: s,
       dom: e,
       editor: t,
-      loading: i
+      loading: n
     }
   };
 };
 export {
-  R as Content,
-  te as VueEditor,
+  N as Content,
+  ee as VueEditor,
   x as VueNodeContainer,
   O as editorInfoCtxKey,
-  Z as getRootInstance,
   b as nodeMetadata,
-  le as useEditor,
-  de as useNodeCtx
+  de as useEditor,
+  ae 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 { 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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"}
+{"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 { ComponentInternalInstance, DefineComponent, defineComponent, h, markRaw, Ref, ref, Teleport } from 'vue';\n\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    (\n        rootInstance: Ref<null | ComponentInternalInstance>,\n        addPortal: (portal: DefineComponent, key: string) => void,\n        removePortalByKey: (key: string) => void,\n    ) =>\n    (\n        component: DefineComponent,\n        options: RenderOptions = {},\n    ): ((ctx: Ctx) => NodeViewConstructor | MarkViewConstructor) =>\n    (ctx) =>\n    (node, view, getPos, decorations) =>\n        new VueNodeView(\n            ctx,\n            component,\n            rootInstance,\n            addPortal,\n            removePortalByKey,\n            options,\n            node,\n            view,\n            getPos,\n            decorations,\n        );\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 rootInstance: Ref<null | ComponentInternalInstance>,\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 = this.rootInstance.value;\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    ref,\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\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        const rootInstance = ref<null | ComponentInternalInstance>(null);\n\n        onBeforeMount(() => {\n            rootInstance.value = (instance as ComponentInternalInstance & { ctx: { _: ComponentInternalInstance } }).ctx\n                ._ as ComponentInternalInstance;\n        });\n\n        onUnmounted(() => {\n            rootInstance.value = 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(rootInstance, 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","rootInstance","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","update","destroy","remove","ignoreMutation","mutation","isAtom","type","contains","target","innerDecorations","innerUpdate","result","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/package.json

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

package/src/Editor.tsx

@@ -11,6 +11,7 @@ import {
     onBeforeMount,
     onUnmounted,
     provide,
+    ref,
     shallowReactive,
 } from 'vue';
 
@@ -19,15 +20,6 @@ import { EditorInfo, EditorInfoCtx } from './types';
 import { rendererKey } from './useGetEditor';
 import { createVueView } from './VueNodeView';
 
-const rootInstance: {
-    instance: null | ComponentInternalInstance;
-} = {
-    instance: null,
-};
-export const getRootInstance = () => {
-    return rootInstance.instance;
-};
-
 export const editorInfoCtxKey: InjectionKey<EditorInfoCtx> = Symbol();
 
 const refDeprecatedInfo = `
@@ -63,13 +55,15 @@ export const VueEditor = defineComponent<{ editor: EditorInfo; editorRef?: Edito
 
         const instance = getCurrentInstance();
 
+        const rootInstance = ref<null | ComponentInternalInstance>(null);
+
         onBeforeMount(() => {
-            rootInstance.instance = (instance as ComponentInternalInstance & { ctx: { _: ComponentInternalInstance } })
-                .ctx._ as ComponentInternalInstance;
+            rootInstance.value = (instance as ComponentInternalInstance & { ctx: { _: ComponentInternalInstance } }).ctx
+                ._ as ComponentInternalInstance;
         });
 
         onUnmounted(() => {
-            rootInstance.instance = null;
+            rootInstance.value = null;
         });
 
         const addPortal = markRaw((component: DefineComponent, key: string) => {
@@ -79,7 +73,7 @@ export const VueEditor = defineComponent<{ editor: EditorInfo; editorRef?: Edito
             const index = portals.findIndex((p) => p[0] === key);
             portals.splice(index, 1);
         });
-        const renderVue = createVueView(addPortal, removePortalByKey);
+        const renderVue = createVueView(rootInstance, addPortal, removePortalByKey);
 
         provide(rendererKey, renderVue);
 

package/src/VueNodeView.tsx

@@ -10,9 +10,8 @@ import type {
     NodeViewConstructor,
 } from '@milkdown/prose/view';
 import { customAlphabet } from 'nanoid';
-import { DefineComponent, defineComponent, h, markRaw, Ref, ref, Teleport } from 'vue';
+import { ComponentInternalInstance, DefineComponent, defineComponent, h, markRaw, Ref, ref, Teleport } from 'vue';
 
-import { getRootInstance } from '.';
 import { Content, VueNodeContainer } from './VueNode';
 
 const nanoid = customAlphabet('abcedfghicklmn', 10);
@@ -25,14 +24,29 @@ export type RenderOptions = Partial<
 >;
 
 export const createVueView =
-    (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) =>
+    (
+        rootInstance: Ref<null | ComponentInternalInstance>,
+        addPortal: (portal: DefineComponent, key: string) => void,
+        removePortalByKey: (key: string) => void,
+    ) =>
     (
         component: DefineComponent,
         options: RenderOptions = {},
     ): ((ctx: Ctx) => NodeViewConstructor | MarkViewConstructor) =>
     (ctx) =>
     (node, view, getPos, decorations) =>
-        new VueNodeView(ctx, component, addPortal, removePortalByKey, options, node, view, getPos, decorations);
+        new VueNodeView(
+            ctx,
+            component,
+            rootInstance,
+            addPortal,
+            removePortalByKey,
+            options,
+            node,
+            view,
+            getPos,
+            decorations,
+        );
 
 export class VueNodeView implements NodeView {
     teleportDOM: HTMLElement;
@@ -48,6 +62,7 @@ export class VueNodeView implements NodeView {
     constructor(
         private ctx: Ctx,
         private component: DefineComponent,
+        private rootInstance: Ref<null | ComponentInternalInstance>,
         private addPortal: (portal: DefineComponent, key: string) => void,
         private removePortalByKey: (key: string) => void,
         private options: RenderOptions,
@@ -109,7 +124,7 @@ export class VueNodeView implements NodeView {
 
         const Portal = this.getPortal();
         this.addPortal(Portal, this.key);
-        const instance = getRootInstance();
+        const instance = this.rootInstance.value;
         if (instance) {
             instance.update();
         }