@milkdown/vue 6.5.0 → 6.5.3

package/src/Editor.tsx

@@ -1,26 +1,29 @@
 /* Copyright 2021, Milkdown by Mirone. */
+import type {
+  ComponentInternalInstance,
+  DefineComponent,
+  InjectionKey,
+} from 'vue'
 import {
-    ComponentInternalInstance,
-    DefineComponent,
-    defineComponent,
-    effect,
-    getCurrentInstance,
-    h,
-    InjectionKey,
-    markRaw,
-    onBeforeMount,
-    onUnmounted,
-    provide,
-    ref,
-    shallowReactive,
-} from 'vue';
-
-import { EditorComponent, EditorRef } from './EditorComponent';
-import { EditorInfo, EditorInfoCtx } from './types';
-import { rendererKey } from './useGetEditor';
-import { createVueView } from './VueNodeView';
-
-export const editorInfoCtxKey: InjectionKey<EditorInfoCtx> = Symbol();
+  defineComponent,
+  effect,
+  getCurrentInstance,
+  h,
+  markRaw,
+  onBeforeMount,
+  onUnmounted,
+  provide,
+  ref,
+  shallowReactive,
+} from 'vue'
+
+import type { EditorRef } from './EditorComponent'
+import { EditorComponent } from './EditorComponent'
+import type { EditorInfo, EditorInfoCtx } from './types'
+import { rendererKey } from './useGetEditor'
+import { createVueView } from './VueNodeView'
+
+export const editorInfoCtxKey: InjectionKey<EditorInfoCtx> = Symbol('editorInfoCtxKey')
 
 const refDeprecatedInfo = `
 @milkdown/vue:
@@ -36,7 +39,7 @@ effect(() => {
 })
 
 <VueEditor editor={editor} />
-`;
+`
 
 const compositionDeprecatedInfo = `
 @milkdown/vue:
@@ -45,68 +48,67 @@ Passing editor directly to VueEditor will soon be deprecated, please use:
 const { editor } = useEditor(/* creator */);
 
 <VueEditor editor={editor} />
-`;
+`
 
-type PortalPair = [key: string, component: DefineComponent];
+type PortalPair = [key: string, component: DefineComponent]
 export const VueEditor = defineComponent<{ editor: EditorInfo; editorRef?: EditorRef }>({
-    name: 'milkdown-vue-root',
-    setup: (props) => {
-        const portals = shallowReactive<PortalPair[]>([]);
-
-        const instance = getCurrentInstance();
-
-        const rootInstance = ref<null | ComponentInternalInstance>(null);
-
-        onBeforeMount(() => {
-            rootInstance.value = (instance as ComponentInternalInstance & { ctx: { _: ComponentInternalInstance } }).ctx
-                ._ as ComponentInternalInstance;
-        });
-
-        onUnmounted(() => {
-            rootInstance.value = null;
-        });
-
-        const addPortal = markRaw((component: DefineComponent, key: string) => {
-            portals.push([key, component]);
-        });
-        const removePortalByKey = markRaw((key: string) => {
-            const index = portals.findIndex((p) => p[0] === key);
-            portals.splice(index, 1);
-        });
-        const renderVue = createVueView(rootInstance, 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 (
+  name: 'MilkdownVueRoot',
+  setup: (props) => {
+    const portals = shallowReactive<PortalPair[]>([])
+
+    const instance = getCurrentInstance()
+
+    const rootInstance = ref<null | ComponentInternalInstance>(null)
+
+    onBeforeMount(() => {
+      rootInstance.value = (instance as ComponentInternalInstance & { ctx: { _: ComponentInternalInstance } }).ctx
+        ._ as ComponentInternalInstance
+    })
+
+    onUnmounted(() => {
+      rootInstance.value = null
+    })
+
+    const addPortal = markRaw((component: DefineComponent, key: string) => {
+      portals.push([key, component])
+    })
+    const removePortalByKey = markRaw((key: string) => {
+      const index = portals.findIndex(p => p[0] === key)
+      portals.splice(index, 1)
+    })
+    const renderVue = createVueView(rootInstance, 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={getEditorCallback.value}>
                     {portalElements}
                 </EditorComponent>
-            );
-        };
-    },
-});
-VueEditor['props'] = ['editor', 'editorRef'];
+      )
+    }
+  },
+})
+VueEditor.props = ['editor', 'editorRef']

package/src/EditorComponent.tsx

@@ -1,25 +1,27 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { Editor } from '@milkdown/core';
-import { defineComponent, h, inject } from 'vue';
+import type { Editor } from '@milkdown/core'
+import { defineComponent, h, inject } from 'vue'
 
-import { editorInfoCtxKey } from './Editor';
-import { EditorInfoCtx, GetEditor } from './types';
-import { useGetEditor } from './useGetEditor';
+import { editorInfoCtxKey } from './Editor'
+import type { 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);
+  name: 'MilkdownDomRoot',
+  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;
-        }
+    if (props.editorRef) {
+      // eslint-disable-next-line vue/no-mutating-props
+      props.editorRef.get = () => ctx.editor.value
+      // eslint-disable-next-line vue/no-mutating-props
+      props.editorRef.dom = () => ctx.dom.value
+    }
 
-        return () => <div ref={ctx.dom}>{slots['default']?.()}</div>;
-    },
-});
-EditorComponent['props'] = ['editor', 'editorRef'];
+    return () => <div ref={ctx.dom}>{slots.default?.()}</div>
+  },
+})
+EditorComponent.props = ['editor', 'editorRef']
 
-export type EditorRef = { get: () => Editor | undefined; dom: () => HTMLDivElement | null };
+export interface EditorRef { get: () => Editor | undefined; dom: () => HTMLDivElement | null }

package/src/VueNode.tsx

@@ -1,41 +1,43 @@
 /* Copyright 2021, Milkdown by Mirone. */
-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, Ref } from 'vue';
+/* eslint-disable vue/one-component-per-file */
+import type { Ctx } from '@milkdown/core'
+import type { Mark, Node } from '@milkdown/prose/model'
+import type { Decoration, EditorView } from '@milkdown/prose/view'
+import type { InjectionKey, Ref } from 'vue'
+import { defineComponent, h, inject, provide } from 'vue'
 
-export type NodeContext<T extends Node | Mark = Node | Mark> = {
-    ctx: Ctx;
-    node: Ref<T>;
-    view: EditorView;
-    getPos: T extends Mark ? boolean : T extends Node ? () => number : boolean | (() => number);
-    decorations: Ref<readonly Decoration[]>;
-};
+export interface NodeContext<T extends Node | Mark = Node | Mark> {
+  ctx: Ctx
+  node: Ref<T>
+  view: EditorView
+  getPos: T extends Mark ? boolean : T extends Node ? () => number : boolean | (() => number)
+  decorations: Ref<readonly Decoration[]>
+}
 
-export const nodeMetadata: InjectionKey<NodeContext> = Symbol();
+export const nodeMetadata: InjectionKey<NodeContext> = Symbol('nodeMetadata')
 
-export type UseNodeCtx = <T extends Node | Mark = Node | Mark>() => NodeContext<T>;
-export const useNodeCtx: UseNodeCtx = () => inject(nodeMetadata) as NodeContext<never>;
+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) => {
-        provide(nodeMetadata, {
-            ctx,
-            node,
-            view,
-            getPos,
-            decorations,
-        });
-        return () => h(as, { 'data-view-container': true }, context.slots['default']?.());
-    },
-});
-VueNodeContainer['props'] = ['ctx', 'editor', 'node', 'view', 'getPos', 'decorations', 'as'];
+  name: 'MilkdownNodeContainer',
+  setup: ({ node, view, getPos, decorations, ctx, as }, context) => {
+    provide(nodeMetadata, {
+      ctx,
+      node,
+      view,
+      getPos,
+      decorations,
+    })
+    return () => h(as, { 'data-view-container': true }, context.slots.default?.())
+  },
+})
+VueNodeContainer.props = ['ctx', 'editor', 'node', 'view', 'getPos', 'decorations', 'as']
 
 export const Content = defineComponent<{ isInline?: boolean }>({
-    name: 'milkdown-content',
-    setup: ({ isInline }) => {
-        return () => (isInline ? <span data-view-content /> : <div data-view-content />);
-    },
-});
-Content['props'] = ['isInline'];
+  name: 'MilkdownContent',
+  setup: ({ isInline }) => {
+    return () => (isInline ? <span data-view-content /> : <div data-view-content />)
+  },
+})
+Content.props = ['isInline']

package/src/VueNodeView.tsx

@@ -1,104 +1,104 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { Ctx } from '@milkdown/core';
-import { Mark, Node } from '@milkdown/prose/model';
+import type { Ctx } from '@milkdown/core'
+import { Mark, Node } from '@milkdown/prose/model'
 import type {
-    Decoration,
-    DecorationSource,
-    EditorView,
-    MarkViewConstructor,
-    NodeView,
-    NodeViewConstructor,
-} from '@milkdown/prose/view';
-import { customAlphabet } from 'nanoid';
-import { ComponentInternalInstance, DefineComponent, defineComponent, h, markRaw, Ref, ref, Teleport } from 'vue';
+  Decoration,
+  DecorationSource,
+  EditorView,
+  MarkViewConstructor,
+  NodeView,
+  NodeViewConstructor,
+} from '@milkdown/prose/view'
+import { customAlphabet } from 'nanoid'
+import type { ComponentInternalInstance, DefineComponent, Ref } from 'vue'
+import { Teleport, defineComponent, h, markRaw, ref } from 'vue'
 
-import { Content, VueNodeContainer } from './VueNode';
+import { Content, VueNodeContainer } from './VueNode'
 
-const nanoid = customAlphabet('abcedfghicklmn', 10);
+const nanoid = customAlphabet('abcedfghicklmn', 10)
 
 export type RenderOptions = Partial<
     {
-        as: string;
-        update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean;
+      as: string
+      update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean
     } & Pick<NodeView, 'ignoreMutation' | 'deselectNode' | 'selectNode' | 'destroy'>
->;
+>
 
-export const createVueView =
-    (
-        rootInstance: Ref<null | ComponentInternalInstance>,
-        addPortal: (portal: DefineComponent, key: string) => void,
-        removePortalByKey: (key: string) => void,
+export const createVueView
+    = (
+      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,
-            rootInstance,
-            addPortal,
-            removePortalByKey,
-            options,
-            node,
-            view,
-            getPos,
-            decorations,
-        );
+      ): ((ctx: Ctx) => NodeViewConstructor | MarkViewConstructor) =>
+        ctx =>
+          (node, view, getPos, decorations) =>
+            new VueNodeView(
+              ctx,
+              component,
+              rootInstance,
+              addPortal,
+              removePortalByKey,
+              options,
+              node,
+              view,
+              getPos,
+              decorations,
+            )
 
 export class VueNodeView implements NodeView {
-    teleportDOM: HTMLElement;
-    key: string;
-
-    get isInlineOrMark() {
-        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 rootInstance: Ref<null | ComponentInternalInstance>,
-        private addPortal: (portal: DefineComponent, key: string) => void,
-        private removePortalByKey: (key: string) => void,
-        private options: RenderOptions,
-        node: Node | Mark,
-        private view: EditorView,
-        private getPos: boolean | (() => number),
-        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) as HTMLElement;
-    }
-
-    get contentDOM() {
-        if (this.node instanceof Node && this.node.isLeaf) {
-            return undefined;
-        }
-
-        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 () => (
+  teleportDOM: HTMLElement
+  key: string
+
+  get isInlineOrMark() {
+    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 rootInstance: Ref<null | ComponentInternalInstance>,
+    private addPortal: (portal: DefineComponent, key: string) => void,
+    private removePortalByKey: (key: string) => void,
+    private options: RenderOptions,
+    node: Node | Mark,
+    private view: EditorView,
+    private getPos: boolean | (() => number),
+    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) as HTMLElement
+  }
+
+  get contentDOM() {
+    if (this.node instanceof Node && this.node.isLeaf)
+      return undefined
+
+    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: 'MilkdownPortal',
+        setup: () => {
+          return () => (
                         <Teleport key={this.key} to={this.teleportDOM}>
                             <VueNodeContainer
                                 as={elementName}
@@ -113,85 +113,77 @@ export class VueNodeView implements NodeView {
                                 </CustomComponent>
                             </VueNodeContainer>
                         </Teleport>
-                    );
-                },
-            }) as DefineComponent,
-        );
-    };
-
-    renderPortal() {
-        if (!this.teleportDOM) return;
-
-        const Portal = this.getPortal();
-        this.addPortal(Portal, this.key);
-        const instance = this.rootInstance.value;
-        if (instance) {
-            instance.update();
-        }
+          )
+        },
+      }) as DefineComponent,
+    )
+  }
+
+  renderPortal() {
+    if (!this.teleportDOM)
+      return
+
+    const Portal = this.getPortal()
+    this.addPortal(Portal, this.key)
+    const instance = this.rootInstance.value
+    if (instance)
+      instance.update()
+  }
+
+  destroy() {
+    this.options.destroy?.()
+    this.teleportDOM.remove()
+    this.removePortalByKey(this.key)
+  }
+
+  ignoreMutation(mutation: MutationRecord) {
+    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
     }
 
-    destroy() {
-        this.options.destroy?.();
-        this.teleportDOM.remove();
-        this.removePortalByKey(this.key);
-    }
+    if ((mutation as unknown as { type: string }).type === 'selection')
+      return false
 
-    ignoreMutation(mutation: MutationRecord) {
-        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 as unknown as { type: string }).type === 'selection') {
-            return false;
-        }
-
-        if (this.contentDOM === this.dom) {
-            return false;
-        }
-
-        if (this.contentDOM.contains(mutation.target)) {
-            return false;
-        }
-
-        return true;
-    }
+    if (this.contentDOM === this.dom)
+      return false
+
+    if (this.contentDOM.contains(mutation.target))
+      return false
+
+    return true
+  }
 
-    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;
-            }
-
-            this.node.value = node;
-            this.decorations.value = decorations;
-            return true;
-        };
-
-        const shouldUpdate = innerUpdate();
-
-        return shouldUpdate;
+  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
+
+      this.node.value = node
+      this.decorations.value = decorations
+      return true
     }
 
-    selectNode = this.options?.selectNode;
+    const shouldUpdate = innerUpdate()
+
+    return shouldUpdate
+  }
+
+  selectNode = this.options?.selectNode
 
-    deselectNode = this.options?.deselectNode;
+  deselectNode = this.options?.deselectNode
 }