@milkdown/vue 6.1.4 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milkdown/vue",
-  "version": "6.1.4",
+  "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.1.4",
-    "nanoid": "^3.1.25",
-    "tslib": "^2.3.1"
+    "@milkdown/utils": "6.3.0",
+    "@milkdown/exception": "6.3.0",
+    "nanoid": "^4.0.0",
+    "tslib": "^2.4.0"
   },
   "peerDependencies": {
     "@milkdown/core": "^6.0.1",
@@ -26,8 +27,8 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@milkdown/core": "6.1.4",
-    "@milkdown/prose": "6.1.4",
+    "@milkdown/core": "6.3.0",
+    "@milkdown/prose": "6.3.0",
     "vue": "^3.0.0"
   },
   "nx": {

package/src/Editor.tsx

@@ -1,83 +1,23 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { Ctx, Editor, editorViewCtx, rootCtx } from '@milkdown/core';
-import { ViewFactory } from '@milkdown/prose';
 import {
     ComponentInternalInstance,
     DefineComponent,
     defineComponent,
+    effect,
     getCurrentInstance,
     h,
-    inject,
     InjectionKey,
     markRaw,
     onBeforeMount,
-    onMounted,
     onUnmounted,
     provide,
-    Ref,
-    ref,
     shallowReactive,
 } from 'vue';
 
-import { AnyVueComponent } from './utils';
-import { createVueView, RenderOptions } from './VueNodeView';
-
-const rendererKey: InjectionKey<(component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => ViewFactory> =
-    Symbol();
-
-type GetEditor = (
-    container: HTMLDivElement,
-    renderVue: (Component: AnyVueComponent, options?: RenderOptions) => (ctx: Ctx) => ViewFactory,
-) => Editor;
-
-const useGetEditor = (getEditor: GetEditor) => {
-    const divRef = ref<HTMLDivElement | null>(null);
-    const renderVue = inject<(Component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => ViewFactory>(
-        rendererKey,
-        () => {
-            throw new Error();
-        },
-    );
-    const editorRef = markRaw<{ editor?: Editor }>({});
-    onMounted(() => {
-        if (!divRef.value) return;
-
-        getEditor(divRef.value, renderVue)
-            .create()
-            .then((editor) => {
-                editorRef.editor = editor;
-                return;
-            })
-            .catch((e) => console.error(e));
-    });
-    onUnmounted(() => {
-        const view = editorRef.editor?.action((ctx) => ctx.get(editorViewCtx));
-        const root = editorRef.editor?.action((ctx) => ctx.get(rootCtx)) as HTMLElement;
-
-        root?.firstChild?.remove();
-        view?.destroy();
-    });
-
-    return { divRef, editorRef };
-};
-
-export const EditorComponent = defineComponent<{ editor: GetEditor; editorRef?: Ref<EditorRef> }>({
-    name: 'milkdown-dom-root',
-    setup: (props, { slots }) => {
-        const refs = useGetEditor(props.editor);
-        if (props.editorRef) {
-            props.editorRef.value = {
-                get: () => refs.editorRef.editor,
-                dom: () => refs.divRef.value,
-            };
-        }
-
-        return () => <div ref={refs.divRef}>{slots['default']?.()}</div>;
-    },
-});
-EditorComponent['props'] = ['editor', 'editorRef'];
-
-export type EditorRef = { get: () => Editor | undefined; dom: () => HTMLDivElement | null };
+import { EditorComponent, EditorRef } from './EditorComponent';
+import { EditorInfo, EditorInfoCtx } from './types';
+import { rendererKey } from './useGetEditor';
+import { createVueView } from './VueNodeView';
 
 const rootInstance: {
     instance: null | ComponentInternalInstance;
@@ -88,8 +28,35 @@ export const getRootInstance = () => {
     return rootInstance.instance;
 };
 
+export const editorInfoCtxKey: InjectionKey<EditorInfoCtx> = Symbol();
+
+const refDeprecatedInfo = `
+@milkdown/vue:
+Passing ref to VueEditor will soon be deprecated, please use:
+
+const { editor, getInstance, getDom, loading } = useEditor(/* creator */);
+
+effect(() => {
+    if (!loading) {
+        const editor = getInstance();
+        const rootDOM = getDom();
+    }
+})
+
+<VueEditor editor={editor} />
+`;
+
+const compositionDeprecatedInfo = `
+@milkdown/vue:
+Passing editor directly to VueEditor will soon be deprecated, please use:
+
+const { editor } = useEditor(/* creator */);
+
+<VueEditor editor={editor} />
+`;
+
 type PortalPair = [key: string, component: DefineComponent];
-export const VueEditor = defineComponent<{ editor: GetEditor; editorRef?: Ref<EditorRef> }>({
+export const VueEditor = defineComponent<{ editor: EditorInfo; editorRef?: EditorRef }>({
     name: 'milkdown-vue-root',
     setup: (props) => {
         const portals = shallowReactive<PortalPair[]>([]);
@@ -113,12 +80,35 @@ export const VueEditor = defineComponent<{ editor: GetEditor; editorRef?: Ref<Ed
             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
+            ? // @ts-expect-error deprecated old composition API
+              (props.editor.editor as EditorInfo)
+            : 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]) => <P key={id} />);
             return (
-                <EditorComponent editorRef={props.editorRef} editor={props.editor}>
+                <EditorComponent editorRef={props.editorRef} editor={getEditorCallback.value}>
                     {portalElements}
                 </EditorComponent>
             );
@@ -126,7 +116,3 @@ export const VueEditor = defineComponent<{ editor: GetEditor; editorRef?: Ref<Ed
     },
 });
 VueEditor['props'] = ['editor', 'editorRef'];
-
-export const useEditor = (getEditor: GetEditor) => {
-    return (...args: Parameters<GetEditor>) => getEditor(...args);
-};

package/src/EditorComponent.tsx

@@ -0,0 +1,25 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { Editor } from '@milkdown/core';
+import { defineComponent, h, inject } from 'vue';
+
+import { editorInfoCtxKey } from './Editor';
+import { EditorInfoCtx, GetEditor } from './types';
+import { useGetEditor } from './useGetEditor';
+
+export const EditorComponent = defineComponent<{ editor: GetEditor; editorRef?: EditorRef }>({
+    name: 'milkdown-dom-root',
+    setup: (props, { slots }) => {
+        useGetEditor(props.editor);
+        const ctx = inject(editorInfoCtxKey, {} as EditorInfoCtx);
+
+        if (props.editorRef) {
+            props.editorRef.get = () => ctx.editor.value;
+            props.editorRef.dom = () => ctx.dom.value;
+        }
+
+        return () => <div ref={ctx.dom}>{slots['default']?.()}</div>;
+    },
+});
+EditorComponent['props'] = ['editor', 'editorRef'];
+
+export type EditorRef = { get: () => Editor | undefined; dom: () => HTMLDivElement | null };

package/src/VueNode.tsx

@@ -2,18 +2,21 @@
 import { Ctx } from '@milkdown/core';
 import { Mark, Node } from '@milkdown/prose/model';
 import { Decoration, EditorView } from '@milkdown/prose/view';
-import { defineComponent, h, InjectionKey, provide } from 'vue';
+import { defineComponent, h, inject, InjectionKey, provide, Ref } from 'vue';
 
-export type NodeContext = {
+export type NodeContext<T extends Node | Mark = Node | Mark> = {
     ctx: Ctx;
-    node: Node | Mark;
+    node: Ref<T>;
     view: EditorView;
-    getPos: boolean | (() => number);
-    decorations: Decoration[];
+    getPos: T extends Mark ? boolean : T extends Node ? () => number : boolean | (() => number);
+    decorations: Ref<readonly Decoration[]>;
 };
 
 export const nodeMetadata: InjectionKey<NodeContext> = Symbol();
 
+export type UseNodeCtx = <T extends Node | Mark = Node | Mark>() => NodeContext<T>;
+export const useNodeCtx: UseNodeCtx = () => inject(nodeMetadata) as NodeContext<never>;
+
 export const VueNodeContainer = defineComponent<NodeContext & { as: string }>({
     name: 'milkdown-node-container',
     setup: ({ node, view, getPos, decorations, ctx, as }, context) => {

package/src/VueNodeView.tsx

@@ -1,10 +1,16 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { Ctx } from '@milkdown/core';
-import type { ViewFactory } from '@milkdown/prose';
 import { Mark, Node } from '@milkdown/prose/model';
-import type { Decoration, DecorationSet, EditorView, NodeView } from '@milkdown/prose/view';
+import type {
+    Decoration,
+    DecorationSource,
+    EditorView,
+    MarkViewConstructor,
+    NodeView,
+    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';
@@ -14,12 +20,16 @@ const nanoid = customAlphabet('abcedfghicklmn', 10);
 export type RenderOptions = Partial<
     {
         as: string;
-    } & Pick<NodeView, 'ignoreMutation' | 'deselectNode' | 'selectNode' | 'destroy' | 'update'>
+        update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean;
+    } & Pick<NodeView, 'ignoreMutation' | 'deselectNode' | 'selectNode' | 'destroy'>
 >;
 
 export const createVueView =
     (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) =>
-    (component: DefineComponent, options: RenderOptions = {}): ((ctx: Ctx) => ViewFactory) =>
+    (
+        component: DefineComponent,
+        options: RenderOptions = {},
+    ): ((ctx: Ctx) => NodeViewConstructor | MarkViewConstructor) =>
     (ctx) =>
     (node, view, getPos, decorations) =>
         new VueNodeView(ctx, component, addPortal, removePortalByKey, options, node, view, getPos, decorations);
@@ -29,65 +39,76 @@ 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: 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();
     }
 
     get dom() {
-        return this.teleportDOM.firstElementChild || this.teleportDOM;
+        return (this.teleportDOM.firstElementChild || this.teleportDOM) as HTMLElement;
     }
 
     get contentDOM() {
         if (this.node instanceof Node && this.node.isLeaf) {
-            return null;
+            return undefined;
         }
 
-        return this.teleportDOM.querySelector('[data-view-content]') || this.dom;
+        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();
@@ -96,10 +117,11 @@ export class VueNodeView implements NodeView {
 
     destroy() {
         this.options.destroy?.();
+        this.teleportDOM.remove();
         this.removePortalByKey(this.key);
     }
 
-    ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
+    ignoreMutation(mutation: MutationRecord) {
         if (this.options.ignoreMutation) {
             return this.options.ignoreMutation(mutation);
         }
@@ -113,7 +135,7 @@ export class VueNodeView implements NodeView {
             }
         }
 
-        if (mutation.type === 'selection') {
+        if ((mutation as unknown as { type: string }).type === 'selection') {
             return false;
         }
 
@@ -128,24 +150,30 @@ export class VueNodeView implements NodeView {
         return true;
     }
 
-    update(node: Node, decorations: Decoration[], innerDecorations: DecorationSet) {
-        if (this.options.update) {
-            const result = this.options.update?.(node, decorations, innerDecorations);
-            if (result != null) {
-                return result;
+    update(node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) {
+        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/index.ts

@@ -1,3 +1,5 @@
 /* Copyright 2021, Milkdown by Mirone. */
 export * from './Editor';
-export { nodeMetadata } from './VueNode';
+export * from './types';
+export * from './useEditor';
+export * from './VueNode';

package/src/types.ts

@@ -0,0 +1,50 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { Ctx, Editor } from '@milkdown/core';
+import type { Mark, Node } from '@milkdown/prose/model';
+import { Decoration, DecorationSource, MarkViewConstructor, NodeView, NodeViewConstructor } from '@milkdown/prose/view';
+import { Ref } from 'vue';
+
+import { AnyVueComponent } from './utils';
+
+export type RenderOptions = Partial<
+    {
+        as: string;
+        update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean;
+    } & Pick<NodeView, 'ignoreMutation' | 'deselectNode' | 'selectNode' | 'destroy'>
+>;
+
+export type RenderVue<U = never> = <T extends Node | Mark = Node | Mark>(
+    Component: AnyVueComponent,
+    options?: RenderOptions,
+) => (
+    ctx: Ctx,
+) => U extends never
+    ? T extends Node
+        ? NodeViewConstructor
+        : T extends Mark
+        ? MarkViewConstructor
+        : NodeViewConstructor & MarkViewConstructor
+    : U extends Node
+    ? NodeViewConstructor
+    : U extends Mark
+    ? MarkViewConstructor
+    : NodeViewConstructor & MarkViewConstructor;
+
+export type GetEditor = (container: HTMLDivElement, renderVue: RenderVue) => Editor;
+
+export type EditorInfoCtx = {
+    dom: Ref<HTMLDivElement | null>;
+    editor: Ref<Editor | undefined>;
+    loading: Ref<boolean>;
+};
+
+export type EditorInfo = {
+    getEditorCallback: Ref<GetEditor>;
+} & EditorInfoCtx;
+
+export type UseEditorReturn = {
+    loading: Ref<boolean>;
+    getInstance: () => Editor | undefined;
+    getDom: () => HTMLDivElement | null;
+    editor: EditorInfo;
+};

package/src/useEditor.ts

@@ -0,0 +1,25 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { Editor } from '@milkdown/core';
+import { ref } from 'vue';
+
+import { GetEditor, UseEditorReturn } from './types';
+
+export const useEditor = (getEditor: GetEditor): UseEditorReturn => {
+    const dom = ref<HTMLDivElement | null>(null);
+    const editor = ref<Editor>();
+    const loading = ref(true);
+    const getEditorCallback = ref<GetEditor>((...args) => getEditor(...args));
+
+    return {
+        loading,
+        getInstance: () => editor.value,
+        getDom: () => dom.value,
+        editor: {
+            getEditorCallback,
+            dom,
+            editor,
+            loading,
+        },
+    };
+};

package/src/useGetEditor.ts

@@ -0,0 +1,51 @@
+/* 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';
+
+import { editorInfoCtxKey } from '.';
+import { EditorInfoCtx, GetEditor, RenderOptions, RenderVue } from './types';
+
+export const rendererKey: InjectionKey<
+    (component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => NodeViewConstructor | MarkViewConstructor
+> = Symbol();
+
+export const useGetEditor = (getEditor: GetEditor) => {
+    const renderVue = inject<RenderVue>(rendererKey, () => {
+        throw vueRendererCallOutOfScope();
+    });
+    const { dom, loading, editor: editorRef } = inject(editorInfoCtxKey, {} as EditorInfoCtx);
+    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((editor) => {
+                editorRef.value = editor;
+                return;
+            })
+            .finally(() => {
+                loading.value = false;
+                lock.value = false;
+            })
+            .catch((e) => console.error(e));
+    });
+    onUnmounted(() => {
+        const view = editorRef.value?.action((ctx) => ctx.get(editorViewCtx));
+        const root = editorRef.value?.action((ctx) => ctx.get(rootCtx)) as HTMLElement;
+
+        root?.firstChild?.remove();
+        view?.destroy();
+    });
+};