From 94235f45751fe3ac8409f1e6b009297676f13b96 Mon Sep 17 00:00:00 2001
From: Mirone Saul <Saul-Mirone@outlook.com>
Date: Wed, 8 Jun 2022 13:40:34 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20extend=20from=20a=20facto?=
 =?UTF-8?q?ry=20cannot=20inject=20slice?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/vue/App.vue                          |  14 +
 examples/vue/CodeFence/CodeFence.ts           | 180 ++++++++++
 examples/vue/CodeFence/CodeFence.vue          | 137 ++++++++
 examples/vue/Milkdown.vue                     |  68 ++++
 examples/vue/VueEditor.tsx                    |   8 +-
 examples/vue/index.html                       |   5 +-
 examples/vue/main.ts                          |   6 +
 examples/vue/main.tsx                         |  58 ----
 examples/vue/package.json                     |  10 +-
 examples/vue/shim.d.ts                        |   2 +
 examples/vue/tsconfig.json                    |   2 +-
 examples/vue/vite.config.ts                   |   3 +-
 .../pages/plugins/plugin-factories/index.md   |   2 +-
 package.json                                  |   6 +-
 packages/utils/src/factory/common.ts          |  12 +-
 packages/utils/src/index.ts                   |   2 +-
 packages/utils/src/types.ts                   |   8 +-
 packages/vue/src/Editor.tsx                   |   6 +-
 pnpm-lock.yaml                                | 326 +++++-------------
 19 files changed, 542 insertions(+), 313 deletions(-)
 create mode 100644 examples/vue/App.vue
 create mode 100644 examples/vue/CodeFence/CodeFence.ts
 create mode 100644 examples/vue/CodeFence/CodeFence.vue
 create mode 100644 examples/vue/Milkdown.vue
 create mode 100644 examples/vue/main.ts
 delete mode 100644 examples/vue/main.tsx
 create mode 100644 examples/vue/shim.d.ts

diff --git a/examples/vue/App.vue b/examples/vue/App.vue
new file mode 100644
index 00000000000..cfacdc8aaa0
--- /dev/null
+++ b/examples/vue/App.vue
@@ -0,0 +1,14 @@
+<template>
+    <Milkdown />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Milkdown from './Milkdown.vue';
+export default defineComponent({
+    name: 'App',
+    components: {
+        Milkdown,
+    },
+});
+</script>
diff --git a/examples/vue/CodeFence/CodeFence.ts b/examples/vue/CodeFence/CodeFence.ts
new file mode 100644
index 00000000000..3fcd0c172b9
--- /dev/null
+++ b/examples/vue/CodeFence/CodeFence.ts
@@ -0,0 +1,180 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { createSlice, editorViewCtx } from '@milkdown/core';
+import { codeFence as originalCodeFence } from '@milkdown/preset-commonmark';
+import { Fragment } from '@milkdown/prose/model';
+import { RenderVue } from '@milkdown/vue';
+
+const languageOptions = [
+    '',
+    'javascript',
+    'typescript',
+    'bash',
+    'sql',
+    'json',
+    'html',
+    'css',
+    'c',
+    'cpp',
+    'java',
+    'ruby',
+    'python',
+    'go',
+    'rust',
+    'markdown',
+];
+
+const id = 'fence';
+
+export const languageListSlice = createSlice([] as string[], 'languageList');
+
+export const codeFence: (view: ReturnType<RenderVue>) => typeof originalCodeFence = (view) =>
+    originalCodeFence.extend(
+        (original, utils, options) => {
+            const languageList = options?.languageList || languageOptions;
+            return {
+                ...original,
+                schema: (ctx) => {
+                    return {
+                        ...original.schema(ctx),
+                        attrs: {
+                            language: {
+                                default: '',
+                            },
+                            filename: {
+                                default: '',
+                            },
+                            fold: {
+                                default: true,
+                            },
+                            showInput: {
+                                default: false,
+                            },
+                        },
+                        parseDOM: [
+                            {
+                                tag: 'div.code-fence-container',
+                                preserveWhitespace: 'full',
+                                getAttrs: (dom) => {
+                                    if (!(dom instanceof HTMLElement)) {
+                                        throw new Error('Parse DOM error.');
+                                    }
+                                    const pre = dom.querySelector('pre');
+                                    return {
+                                        language: pre?.dataset['language'],
+                                        filename: pre?.dataset['filename'],
+                                    };
+                                },
+                                getContent: (dom, schema) => {
+                                    if (!(dom instanceof HTMLElement)) {
+                                        throw new Error('Parse DOM error.');
+                                    }
+                                    const textNode = schema.text(dom.querySelector('pre')?.textContent ?? '');
+                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                    return Fragment.from<any>(textNode);
+                                },
+                            },
+                            {
+                                tag: 'pre',
+                                preserveWhitespace: 'full',
+                                getAttrs: (dom) => {
+                                    if (!(dom instanceof HTMLElement)) {
+                                        throw new Error('Parse DOM error.');
+                                    }
+                                    return { language: dom.dataset['language'], filename: dom.dataset['filename'] };
+                                },
+                            },
+                        ],
+                        toDOM: (node) => {
+                            const select = document.createElement('select');
+                            languageList.forEach((lang) => {
+                                const option = document.createElement('option');
+                                option.value = lang;
+                                option.innerText = !lang ? '--' : lang;
+                                if (lang === node.attrs['language']) {
+                                    option.selected = true;
+                                }
+                                select.appendChild(option);
+                            });
+                            select.onchange = (e) => {
+                                const target = e.target;
+                                if (!(target instanceof HTMLSelectElement)) {
+                                    return;
+                                }
+                                const view = ctx.get(editorViewCtx);
+                                if (!view.editable) {
+                                    target.value = node.attrs['language'];
+                                    return;
+                                }
+
+                                const { top, left } = target.getBoundingClientRect();
+                                const result = view.posAtCoords({ top, left });
+                                if (!result) return;
+
+                                const { tr } = view.state;
+
+                                view.dispatch(
+                                    tr.setNodeMarkup(result.inside, undefined, {
+                                        ...node.attrs,
+                                        language: target.value,
+                                    }),
+                                );
+                            };
+                            return [
+                                'div',
+                                {
+                                    class: 'code-fence-container',
+                                },
+                                ['span', node.attrs['filename']],
+                                select,
+                                [
+                                    'pre',
+                                    {
+                                        'data-language': node.attrs['language'],
+                                        'data-filename': node.attrs['filename'],
+                                        class: utils.getClassName(node.attrs, 'code-fence'),
+                                    },
+                                    ['code', { spellCheck: 'false' }, 0],
+                                ],
+                            ];
+                        },
+                        parseMarkdown: {
+                            match: ({ type }) => type === 'code',
+                            runner: (state, node, type) => {
+                                const meta = node['meta'] as string;
+                                let filename = '';
+                                if (meta) {
+                                    const match = meta.match(/^\[(\w+)\]$/);
+                                    if (match) {
+                                        filename = match[1] || '';
+                                    }
+                                }
+                                const language = node['lang'] as string;
+                                const value = node['value'] as string;
+                                state.openNode(type, { language, filename });
+                                if (value) {
+                                    state.addText(value);
+                                }
+                                state.closeNode();
+                            },
+                        },
+                        toMarkdown: {
+                            match: (node) => node.type.name === id,
+                            runner: (state, node) => {
+                                const filename = node.attrs['filename'];
+                                const meta = filename ? `[${filename}]` : '';
+                                state.addNode('code', undefined, node.content.firstChild?.text || '', {
+                                    lang: node.attrs['language'],
+                                    meta,
+                                });
+                            },
+                        },
+                    };
+                },
+                view: (ctx) => {
+                    ctx.set(languageListSlice, languageList);
+                    return view(ctx);
+                },
+            };
+        },
+        [languageListSlice],
+    );
diff --git a/examples/vue/CodeFence/CodeFence.vue b/examples/vue/CodeFence/CodeFence.vue
new file mode 100644
index 00000000000..67408ad6a98
--- /dev/null
+++ b/examples/vue/CodeFence/CodeFence.vue
@@ -0,0 +1,137 @@
+<script lang="ts">
+import { nodeMetadata } from '@milkdown/vue';
+import { defineComponent, inject } from 'vue';
+import { languageListSlice } from './CodeFence';
+
+export default defineComponent({
+    name: 'CodeFence',
+});
+</script>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const metadata = inject(nodeMetadata);
+const attrs = metadata?.node.attrs;
+const languages = metadata?.ctx.get(languageListSlice) ?? [];
+
+const filename = ref(attrs?.['filename'] ?? '');
+const lang = attrs?.['language'] ?? '';
+
+const showInput = ref(attrs?.['showInput'] ?? false);
+
+const onChange = (e: Event) => {
+    const view = metadata?.view;
+    const node = metadata?.node;
+    const getPos = metadata?.getPos as () => number;
+    const { target } = e;
+    if (!(target instanceof HTMLSelectElement) || !view || !node) {
+        return;
+    }
+    const { value } = target;
+    console.log(target.value);
+    if (!view.editable) {
+        target.value = node.attrs['language'];
+        return;
+    }
+    const { tr } = view.state;
+    view.dispatch(
+        tr.setNodeMarkup(getPos(), undefined, {
+            ...node.attrs,
+            language: value,
+        }),
+    );
+};
+
+const toggleInput = () => {
+    const view = metadata?.view;
+    const node = metadata?.node;
+    const getPos = metadata?.getPos as () => number;
+    if (!view || !node) {
+        return;
+    }
+    if (!view.editable) {
+        return;
+    }
+    const show = node.attrs['showInput'];
+    const { tr } = view.state;
+    view.dispatch(
+        tr.setNodeMarkup(getPos(), undefined, {
+            ...node.attrs,
+            showInput: !show,
+        }),
+    );
+    showInput.value = !show;
+};
+
+const onKeydown = (e: KeyboardEvent) => {
+    e.stopPropagation();
+};
+
+const onFilenameChange = (e: Event) => {
+    const view = metadata?.view;
+    const node = metadata?.node;
+    const getPos = metadata?.getPos as () => number;
+
+    const { target } = e;
+    if (!(target instanceof HTMLInputElement)) return;
+    if (!view || !node) {
+        return;
+    }
+    if (!view.editable) {
+        return;
+    }
+    const { value } = target;
+
+    const { tr } = view.state;
+    view.dispatch(
+        tr.setNodeMarkup(getPos(), undefined, {
+            ...node.attrs,
+            filename: value,
+            showInput: false,
+        }),
+    );
+    showInput.value = false;
+    filename.value = value;
+};
+</script>
+
+<template>
+    <div class="code-fence">
+        <div class="control">
+            <span class="filename">
+                {{ filename }}
+                <input v-if="showInput" @keydown="onKeydown" @change="onFilenameChange" />
+                <button v-else @click="toggleInput">edit</button>
+            </span>
+            <select @change="onChange">
+                <option v-for="language in languages" :selected="language === lang" :value="language">
+                    {{ language }}
+                </option>
+            </select>
+        </div>
+        <div class="code">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.code-fence {
+    border: 1px solid #ccc;
+    padding: 10px;
+}
+
+.control {
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.code {
+    background: #ccc;
+    margin: 0 auto !important;
+    white-space: pre;
+    border-radius: 4px;
+    padding: 10px;
+}
+</style>
diff --git a/examples/vue/Milkdown.vue b/examples/vue/Milkdown.vue
new file mode 100644
index 00000000000..3fdd4a7c579
--- /dev/null
+++ b/examples/vue/Milkdown.vue
@@ -0,0 +1,68 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { VueEditor, useEditor } from '@milkdown/vue';
+
+export default defineComponent({
+    name: 'Milkdown',
+    components: {
+        VueEditor,
+    },
+});
+</script>
+<script lang="ts" setup>
+import { effect, ref } from 'vue';
+import { Editor, rootCtx, defaultValueCtx, editorCtx } from '@milkdown/core';
+import { nord } from '@milkdown/theme-nord';
+import { codeFence as cmCodeFence, commonmark } from '@milkdown/preset-commonmark';
+import { emoji } from '@milkdown/plugin-emoji';
+import { prism } from '@milkdown/plugin-prism';
+import { listener, listenerCtx } from '@milkdown/plugin-listener';
+import { codeFence } from './CodeFence/CodeFence';
+import CodeFence from './CodeFence/CodeFence.vue';
+
+const editorRef = ref<Editor | null>(null);
+const mounted = ref(false);
+
+effect(() => {
+    if (mounted.value && editorRef.value) {
+        mounted.value = true;
+        editorRef.value.action((ctx) => {
+            ctx;
+            // console.log(ctx.get(editorStateCtx).doc);
+            // your action here
+        });
+    }
+});
+
+const value = `
+# Milkdown 💖 Vue
+\`\`\`typescript [Source]
+const foo = 'bar';
+\`\`\`
+`;
+
+const editor = useEditor((root, renderVue) =>
+    Editor.make()
+        .config((ctx) => {
+            ctx.set(rootCtx, root);
+            ctx.set(defaultValueCtx, value);
+            ctx.get(listenerCtx)
+                .mounted((ctx) => {
+                    editorRef.value = ctx.get(editorCtx);
+                    mounted.value = true;
+                })
+                .markdownUpdated((_, markdown) => {
+                    console.log(markdown);
+                });
+        })
+        .use(nord)
+        .use(emoji)
+        .use(commonmark.replace(cmCodeFence, codeFence(renderVue(CodeFence))()))
+        .use(prism)
+        .use(listener),
+);
+</script>
+
+<template>
+    <VueEditor :editor="editor" />
+</template>
diff --git a/examples/vue/VueEditor.tsx b/examples/vue/VueEditor.tsx
index 5b226de34f8..46fa594f924 100644
--- a/examples/vue/VueEditor.tsx
+++ b/examples/vue/VueEditor.tsx
@@ -43,6 +43,11 @@ export const MyEditor = defineComponent<{ markdown: string }>({
     name: 'my-editor',
     setup: (props) => {
         const editorRef = ref<EditorRef>({ get: () => undefined, dom: () => null });
+        // effect(() => {
+        //     setTimeout(() => {
+        //         console.log(editorRef.value.get());
+        //     }, 100);
+        // });
         const editor = useEditor((root, renderVue) => {
             const nodes = commonmarkNodes
                 .configure(heading, {
@@ -57,9 +62,6 @@ export const MyEditor = defineComponent<{ markdown: string }>({
                 .configure(image, {
                     view: renderVue(MyImage),
                 });
-            // setTimeout(() => {
-            //     console.log(editorRef.value.get());
-            // }, 100);
             return Editor.make()
                 .config((ctx) => {
                     ctx.set(rootCtx, root);
diff --git a/examples/vue/index.html b/examples/vue/index.html
index ecdc2c81d22..4988fac25cf 100644
--- a/examples/vue/index.html
+++ b/examples/vue/index.html
@@ -4,15 +4,18 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Milkdown Vue</title>
+
         <link
             rel="stylesheet"
             href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
         />
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" />
+
+        <link rel="stylesheet" href="https://unpkg.com/prism-themes/themes/prism-nord.css" />
     </head>
     <body>
         <div id="app"></div>
-        <script type="module" src="/main.tsx"></script>
+        <script type="module" src="/main.ts"></script>
     </body>
 </html>
diff --git a/examples/vue/main.ts b/examples/vue/main.ts
new file mode 100644
index 00000000000..0761d0233f7
--- /dev/null
+++ b/examples/vue/main.ts
@@ -0,0 +1,6 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { createApp } from 'vue';
+
+import App from './App.vue';
+
+createApp(App).mount('#app');
diff --git a/examples/vue/main.tsx b/examples/vue/main.tsx
deleted file mode 100644
index fbe92d04f1f..00000000000
--- a/examples/vue/main.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import './style.css';
-
-import { createApp, h } from 'vue';
-
-import { MyEditor } from './VueEditor';
-
-const markdown = `
-# Milkdown Test
-
-## Blockquote
-
-> Milkdown is an editor.
-
-## Marks Paragraph
-
-Hello, ***milkdown* nice \`to\` meet *you***!  
-There should be a line break before this.
-
----
-
-## Image and Link
-
-**Of course you can add image! ![cat](https://images.news18.com/ibnlive/uploads/2021/06/1623900306_untitled-design-2021-06-17t085747.057.png "kitty")**
-
-Your *[link is here](https://bing.com "bing")*, have a look.
-
-## Lists
-
-* list item 1
-    1. is this the real life
-    2. is this just fantasy
-* list item 2
-    * sub list item 1
-
-        some explain
-
-    * sub list item 2
-* list item 3
-
-## Code
-
-\`\`\`javascript
-const milkdown = new Milkdown();
-milkdown.create();
-\`\`\`
-
----
-
-Now you can play!
-`;
-
-const app = createApp({
-    render() {
-        return <MyEditor markdown={markdown} />;
-    },
-});
-app.mount('#app');
diff --git a/examples/vue/package.json b/examples/vue/package.json
index 16f48dfc1e5..e8e95f55d0a 100644
--- a/examples/vue/package.json
+++ b/examples/vue/package.json
@@ -7,11 +7,15 @@
         "start": "vite"
     },
     "dependencies": {
-        "vue": "^3.0.0",
         "@milkdown/core": "workspace:*",
-        "@milkdown/preset-commonmark": "workspace:*",
+        "@milkdown/plugin-emoji": "workspace:*",
+        "@milkdown/plugin-listener": "workspace:*",
+        "@milkdown/plugin-prism": "workspace:*",
         "@milkdown/plugin-slash": "workspace:*",
+        "@milkdown/preset-commonmark": "workspace:*",
+        "@milkdown/prose": "workspace:*",
+        "@milkdown/theme-nord": "workspace:*",
         "@milkdown/vue": "workspace:*",
-        "@milkdown/theme-nord": "workspace:*"
+        "vue": "^3.0.0"
     }
 }
diff --git a/examples/vue/shim.d.ts b/examples/vue/shim.d.ts
new file mode 100644
index 00000000000..18c8d7d4488
--- /dev/null
+++ b/examples/vue/shim.d.ts
@@ -0,0 +1,2 @@
+/* Copyright 2021, Milkdown by Mirone. */
+declare module '*.vue';
diff --git a/examples/vue/tsconfig.json b/examples/vue/tsconfig.json
index 26021a9034a..d94be427a3b 100644
--- a/examples/vue/tsconfig.json
+++ b/examples/vue/tsconfig.json
@@ -1,7 +1,7 @@
 {
     "extends": "../../tsconfig.base.json",
     "compilerOptions": {
-        "jsx": "react",
+        "jsx": "preserve",
         "jsxFactory": "h",
         "jsxFragmentFactory": "Fragment",
         "types": ["vue"]
diff --git a/examples/vue/vite.config.ts b/examples/vue/vite.config.ts
index 0a457c40155..6bda36d6568 100644
--- a/examples/vue/vite.config.ts
+++ b/examples/vue/vite.config.ts
@@ -1,9 +1,10 @@
 /* Copyright 2021, Milkdown by Mirone. */
+import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-    plugins: [vueJsx()],
+    plugins: [vueJsx(), vue()],
     esbuild: {
         jsxFactory: 'h',
         jsxFragment: 'Fragment',
diff --git a/gh-pages/pages/plugins/plugin-factories/index.md b/gh-pages/pages/plugins/plugin-factories/index.md
index c4e38e14ad6..22cabe08102 100644
--- a/gh-pages/pages/plugins/plugin-factories/index.md
+++ b/gh-pages/pages/plugins/plugin-factories/index.md
@@ -482,7 +482,7 @@ Editor.use(mySyntaxPlugin.remove(node1));
 
 // Replace one plugin:
 const myNode1 = node1.extend(/* ... */);
-Editor.use(mySyntaxPlugin.replace(node1, myNode1));
+Editor.use(mySyntaxPlugin.replace(node1, myNode1()));
 ```
 
 ## Real World Examples
diff --git a/package.json b/package.json
index a81153fbc60..be5f1adc6d2 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
         "@typescript-eslint/eslint-plugin": "^5.14.0",
         "@typescript-eslint/parser": "^5.14.0",
         "@vitejs/plugin-react-refresh": "^1.3.3",
+        "@vitejs/plugin-vue": "^2.3.3",
         "@vitejs/plugin-vue-jsx": "^1.1.5",
         "@vitest/ui": "^0.14.0",
         "concurrently": "^7.0.0",
@@ -66,7 +67,7 @@
         "jsdom": "^19.0.0",
         "lint-staged": "^13.0.0",
         "nx": "latest",
-        "prettier": "^2.4.0",
+        "prettier": "^2.6.2",
         "rimraf": "^3.0.2",
         "rollup": "^2.72.0",
         "rollup-plugin-auto-external": "^2.0.0",
@@ -87,7 +88,8 @@
                 "@babel/core",
                 "babel-runtime",
                 "cypress",
-                "jest"
+                "jest",
+                "vue"
             ],
             "allowedVersions": {
                 "react": "18",
diff --git a/packages/utils/src/factory/common.ts b/packages/utils/src/factory/common.ts
index ca64d7492e4..4f2ef63cb53 100644
--- a/packages/utils/src/factory/common.ts
+++ b/packages/utils/src/factory/common.ts
@@ -9,6 +9,7 @@ import {
     inputRulesCtx,
     prosePluginsCtx,
     remarkPluginsCtx,
+    Slice,
     themeManagerCtx,
 } from '@milkdown/core';
 import { themeMustInstalled } from '@milkdown/exception';
@@ -119,12 +120,17 @@ export const addMetadata = <SupportedKeys extends string = string, Options exten
 export const withExtend = <SupportedKeys extends string, Options extends UnknownRecord, Type, Rest>(
     factory: Factory<SupportedKeys, Options, Type, Rest>,
     origin: AddMetadata<SupportedKeys, Options>,
-    creator: (factory: Factory<SupportedKeys, Options, Type, Rest>) => WithExtend<SupportedKeys, Options, Type, Rest>,
+    creator: (
+        factory: Factory<SupportedKeys, Options, Type, Rest>,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        inject?: Slice<any>[],
+    ) => WithExtend<SupportedKeys, Options, Type, Rest>,
 ): WithExtend<SupportedKeys, Options, Type, Rest> => {
     type Ext = WithExtend<SupportedKeys, Options, Type, Rest>;
     const next = origin as Ext;
-    const extend = (extendFactory: Parameters<Ext['extend']>[0]) =>
-        creator((...args) => extendFactory(factory(...args), ...args));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const extend = (extendFactory: Parameters<Ext['extend']>[0], inject?: Slice<any>[]) =>
+        creator((...args) => extendFactory(factory(...args), ...args), inject);
 
     next.extend = extend as Ext['extend'];
 
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 8d1aa3c42c7..f2c194349e6 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -3,4 +3,4 @@ export * from './atom';
 export * from './composable';
 export * from './factory';
 export * from './macro';
-export type { CommonOptions, Methods, UnknownRecord, Utils } from './types';
+export * from './types';
diff --git a/packages/utils/src/types.ts b/packages/utils/src/types.ts
index e9597a2e7a0..ff0978546ef 100644
--- a/packages/utils/src/types.ts
+++ b/packages/utils/src/types.ts
@@ -23,8 +23,6 @@ export type CommonOptions<SupportedKeys extends string = string, Obj = UnknownRe
 };
 
 export type Methods<Keys extends string, Type> = {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    inject?: Slice<any>[];
     remarkPlugins?: (ctx: Ctx) => RemarkPlugin[];
     inputRules?: (types: Type, ctx: Ctx) => InputRule[];
     prosePlugins?: (types: Type, ctx: Ctx) => Plugin[];
@@ -61,8 +59,10 @@ export type WithExtend<SupportedKeys extends string, Options extends UnknownReco
         extendFactory: (
             ...args: [
                 original: Spec<SupportedKeys, Type, Rest>,
-                ...rest: Parameters<Factory<ExtendedSupportedKeys, ExtendedOptions, ExtendedType, ExtendedRest>>
+                ...rest: Parameters<Factory<ExtendedSupportedKeys, ExtendedOptions, ExtendedType, ExtendedRest>>,
             ]
         ) => Spec<ExtendedSupportedKeys, ExtendedType, ExtendedRest>,
-    ) => AddMetadata<ExtendedSupportedKeys, ExtendedOptions>;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        inject?: Slice<any>[],
+    ) => WithExtend<ExtendedSupportedKeys, ExtendedOptions, Type, Rest>;
 };
diff --git a/packages/vue/src/Editor.tsx b/packages/vue/src/Editor.tsx
index c7eef62e4d5..e0b2f9c6650 100644
--- a/packages/vue/src/Editor.tsx
+++ b/packages/vue/src/Editor.tsx
@@ -25,10 +25,8 @@ 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;
+export type RenderVue = (Component: AnyVueComponent, options?: RenderOptions) => (ctx: Ctx) => ViewFactory;
+export type GetEditor = (container: HTMLDivElement, renderVue: RenderVue) => Editor;
 
 const useGetEditor = (getEditor: GetEditor) => {
     const divRef = ref<HTMLDivElement | null>(null);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d30b5138e76..c09341406bb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,7 @@ importers:
       '@typescript-eslint/eslint-plugin': ^5.14.0
       '@typescript-eslint/parser': ^5.14.0
       '@vitejs/plugin-react-refresh': ^1.3.3
+      '@vitejs/plugin-vue': ^2.3.3
       '@vitejs/plugin-vue-jsx': ^1.1.5
       '@vitest/ui': ^0.14.0
       concurrently: ^7.0.0
@@ -39,7 +40,7 @@ importers:
       jsdom: ^19.0.0
       lint-staged: ^13.0.0
       nx: latest
-      prettier: ^2.4.0
+      prettier: ^2.6.2
       rimraf: ^3.0.2
       rollup: ^2.72.0
       rollup-plugin-auto-external: ^2.0.0
@@ -54,10 +55,10 @@ importers:
       '@changesets/cli': 2.22.0
       '@commitlint/cli': 17.0.0
       '@commitlint/config-conventional': 17.0.0
-      '@nrwl/cli': 14.1.9
-      '@nrwl/nx-cloud': 14.0.5
-      '@nrwl/tao': 14.1.9
-      '@nrwl/workspace': 14.1.9_olllqumueb3v7rts5ghh64o4um
+      '@nrwl/cli': 14.2.1
+      '@nrwl/nx-cloud': 14.0.8
+      '@nrwl/tao': 14.2.1
+      '@nrwl/workspace': 14.2.1_honiro6c5vkwsf7dg74kchntcq
       '@rollup/plugin-commonjs': 22.0.0_rollup@2.72.0
       '@rollup/plugin-json': 4.1.0_rollup@2.72.0
       '@rollup/plugin-node-resolve': 13.3.0_rollup@2.72.0
@@ -67,6 +68,7 @@ importers:
       '@typescript-eslint/eslint-plugin': 5.14.0_txofz6cgi65wc6toklmbngqhbu
       '@typescript-eslint/parser': 5.14.0_hhfj2cqslfove3mebc4baoycai
       '@vitejs/plugin-react-refresh': 1.3.6
+      '@vitejs/plugin-vue': 2.3.3_vite@2.8.4
       '@vitejs/plugin-vue-jsx': 1.3.7
       '@vitest/ui': 0.14.0
       concurrently: 7.0.0
@@ -76,7 +78,7 @@ importers:
       eslint-config-prettier: 8.4.0_eslint@8.9.0
       eslint-plugin-header: 3.1.1_eslint@8.9.0
       eslint-plugin-import: 2.25.4_4mjqznjzsf6u3ndxu5v75yht4u
-      eslint-plugin-prettier: 4.0.0_t5rlqxhdzybjjhn5fth7z27jl4
+      eslint-plugin-prettier: 4.0.0_4yxulvuuzstbd25cduzg4o4cmy
       eslint-plugin-promise: 6.0.0_eslint@8.9.0
       eslint-plugin-react-hooks: 4.3.0_eslint@8.9.0
       eslint-plugin-simple-import-sort: 7.0.0_eslint@8.9.0
@@ -85,8 +87,8 @@ importers:
       husky: 8.0.1
       jsdom: 19.0.0
       lint-staged: 13.0.0
-      nx: 14.1.9
-      prettier: 2.5.1
+      nx: 14.2.1
+      prettier: 2.6.2
       rimraf: 3.0.2
       rollup: 2.72.0
       rollup-plugin-auto-external: 2.0.0_rollup@2.72.0
@@ -192,15 +194,23 @@ importers:
   examples/vue:
     specifiers:
       '@milkdown/core': workspace:*
+      '@milkdown/plugin-emoji': workspace:*
+      '@milkdown/plugin-listener': workspace:*
+      '@milkdown/plugin-prism': workspace:*
       '@milkdown/plugin-slash': workspace:*
       '@milkdown/preset-commonmark': workspace:*
+      '@milkdown/prose': workspace:*
       '@milkdown/theme-nord': workspace:*
       '@milkdown/vue': workspace:*
       vue: ^3.0.0
     dependencies:
       '@milkdown/core': link:../../packages/core
+      '@milkdown/plugin-emoji': link:../../packages/plugin-emoji
+      '@milkdown/plugin-listener': link:../../packages/plugin-listener
+      '@milkdown/plugin-prism': link:../../packages/plugin-prism
       '@milkdown/plugin-slash': link:../../packages/plugin-slash
       '@milkdown/preset-commonmark': link:../../packages/preset-commonmark
+      '@milkdown/prose': link:../../packages/prose
       '@milkdown/theme-nord': link:../../packages/theme-nord
       '@milkdown/vue': link:../../packages/vue
       vue: 3.2.33
@@ -840,7 +850,7 @@ packages:
       '@babel/traverse': 7.17.10
       '@babel/types': 7.17.10
       convert-source-map: 1.8.0
-      debug: 4.3.3
+      debug: 4.3.4
       gensync: 1.0.0-beta.2
       json5: 2.2.1
       semver: 6.3.0
@@ -2414,33 +2424,34 @@ packages:
       fastq: 1.13.0
     dev: true
 
-  /@nrwl/cli/14.1.9:
-    resolution: {integrity: sha512-7T03yVUNxXXR478L9TRRYlg1gsxvERpikSa1dppW+YjL0K4L2PLkZEPJqDMbrPmyAryeZpUCn9vLVOIThW47rA==}
+  /@nrwl/cli/14.2.1:
+    resolution: {integrity: sha512-U17p5eFxmvgkEBPjKxQUxgXXaMMki634QZS/0iKyqJLnzr9NettF3O4dqHnOJlu7xeWHUjU53DZdODYXfn4ESA==}
     dependencies:
-      nx: 14.1.9
+      nx: 14.2.1
     transitivePeerDependencies:
-      - supports-color
+      - '@swc-node/register'
+      - '@swc/core'
     dev: true
 
-  /@nrwl/devkit/14.1.9_nx@14.1.9:
-    resolution: {integrity: sha512-y+gqtluiOZ/wiAXb5Z4FfzroyB/+cLP5zHXQTNuuuVC9U25RiuGK8RL+Wg91VWzHCu7E+oMtCToNw7MWDRGFDg==}
+  /@nrwl/devkit/14.2.1_nx@14.2.1:
+    resolution: {integrity: sha512-Il+ok+HtL/fVx1SikO93ga475q62pCErP/Ut/q2BEDTIijeossdm9wwa7oEf+Cfm7awtv78RvCmVnS7NLnVzVg==}
     peerDependencies:
       nx: '>= 13.10 <= 15'
     dependencies:
       ejs: 3.1.7
       ignore: 5.2.0
-      nx: 14.1.9
+      nx: 14.2.1
       rxjs: 6.6.7
       semver: 7.3.4
       tslib: 2.3.1
     dev: true
 
-  /@nrwl/jest/14.1.9_nx@14.1.9+typescript@4.6.2:
-    resolution: {integrity: sha512-rZ/+X7OzhW8nKLaYOpbIwUKzEAIDLlQd/m6qndAKU1rbSOZZVa7ZwHRQpzBMooyXCQB/wJLTM+epAI6vWjCiNg==}
+  /@nrwl/jest/14.2.1_nx@14.2.1+typescript@4.6.2:
+    resolution: {integrity: sha512-O5HDq8u9WJ4VDK8F2mdMTbXTwy8i7qP/HjVl+GShjcdgUgNxJAZ/n/kbp275ONrF5vPQVpQc6cghU3hqJaUxiQ==}
     dependencies:
       '@jest/reporters': 27.5.1
       '@jest/test-result': 27.5.1
-      '@nrwl/devkit': 14.1.9_nx@14.1.9
+      '@nrwl/devkit': 14.2.1_nx@14.2.1
       '@phenomnomnominal/tsquery': 4.1.1_typescript@4.6.2
       chalk: 4.1.0
       identity-obj-proxy: 3.0.0
@@ -2461,33 +2472,35 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@nrwl/linter/14.1.9_gt4gfk4pbync76x2fre2mj4cqi:
-    resolution: {integrity: sha512-QgXTNWl1xzbEJuGbcOPJcvp58Tycd3yWTA1JnrAc3ZdOsouL0EphP5n1+JCePzR7mVo+kmfNhYbJhvpc8c4WEQ==}
+  /@nrwl/linter/14.2.1_hhfj2cqslfove3mebc4baoycai:
+    resolution: {integrity: sha512-FYnC2TycrrtVq707NRsChGuvTlQNyyL7Z1libaq5CDmOpH/HC4qUEKKwddpdrh1dGh8Io4pKIu3GF8/PEHuWhQ==}
     peerDependencies:
       eslint: ^8.0.0
     peerDependenciesMeta:
       eslint:
         optional: true
     dependencies:
-      '@nrwl/devkit': 14.1.9_nx@14.1.9
-      '@nrwl/jest': 14.1.9_nx@14.1.9+typescript@4.6.2
+      '@nrwl/devkit': 14.2.1_nx@14.2.1
+      '@nrwl/jest': 14.2.1_nx@14.2.1+typescript@4.6.2
       '@phenomnomnominal/tsquery': 4.1.1_typescript@4.6.2
       eslint: 8.9.0
+      nx: 14.2.1
       tmp: 0.2.1
       tslib: 2.3.1
     transitivePeerDependencies:
+      - '@swc-node/register'
+      - '@swc/core'
       - bufferutil
       - canvas
       - node-notifier
-      - nx
       - supports-color
       - ts-node
       - typescript
       - utf-8-validate
     dev: true
 
-  /@nrwl/nx-cloud/14.0.5:
-    resolution: {integrity: sha512-ADLGWiorW7sHT9hJw1OrxCG9JE9ALYfzNtXWJbvn4ulERul3hSsj+7P+uyUBtflpCrG1bmw5SxkQ77EH/DkY5A==}
+  /@nrwl/nx-cloud/14.0.8:
+    resolution: {integrity: sha512-OOqJrDSo6kyGALdo3fWoZtn8VmHKmVi23ODkJYPQDR+41v15wHiKq7cMFqc9fCaJGYhilBUPFeNOXIhlvQMCDw==}
     hasBin: true
     dependencies:
       axios: 0.21.4
@@ -2499,26 +2512,27 @@ packages:
       - debug
     dev: true
 
-  /@nrwl/tao/14.1.9:
-    resolution: {integrity: sha512-XUmnYJIrLd2Lui94LsVbXteFhWpNHTjIDDlt/krysEJD8lqE8uoD44uvjKaqIMZXTH8AOH1M4leWraqBSVU0ig==}
+  /@nrwl/tao/14.2.1:
+    resolution: {integrity: sha512-ozwMhR1zUEtHFvIvjPUdd/1EHGW1woqmzo+6NCoYiMEgkIJzOy1o5v5AovUNu7OCCWH804FGjWdXYhgsQ7+XTQ==}
     hasBin: true
     dependencies:
-      nx: 14.1.9
+      nx: 14.2.1
     transitivePeerDependencies:
-      - supports-color
+      - '@swc-node/register'
+      - '@swc/core'
     dev: true
 
-  /@nrwl/workspace/14.1.9_olllqumueb3v7rts5ghh64o4um:
-    resolution: {integrity: sha512-zb7/EgT0P7UN8EDrxd9+5yR2RfPvBDGwtuoa9Sl4FO3jnNr5o+qBf33408BtchigN4y885+9S9SoXq9mSfzhDg==}
+  /@nrwl/workspace/14.2.1_honiro6c5vkwsf7dg74kchntcq:
+    resolution: {integrity: sha512-UjraM1UHFtqfaLG5X2co/AWlXpi5iaqiJiAXhQY0iVDNbbMzl0c2pMoewm4QCiXY5ceKy2kLU5nWud/HNsunmQ==}
     peerDependencies:
-      prettier: ^2.5.1
+      prettier: ^2.6.2
     peerDependenciesMeta:
       prettier:
         optional: true
     dependencies:
-      '@nrwl/devkit': 14.1.9_nx@14.1.9
-      '@nrwl/jest': 14.1.9_nx@14.1.9+typescript@4.6.2
-      '@nrwl/linter': 14.1.9_gt4gfk4pbync76x2fre2mj4cqi
+      '@nrwl/devkit': 14.2.1_nx@14.2.1
+      '@nrwl/jest': 14.2.1_nx@14.2.1+typescript@4.6.2
+      '@nrwl/linter': 14.2.1_hhfj2cqslfove3mebc4baoycai
       '@parcel/watcher': 2.0.4
       chalk: 4.1.0
       chokidar: 3.5.3
@@ -2531,11 +2545,11 @@ packages:
       fs-extra: 10.1.0
       glob: 7.1.4
       ignore: 5.2.0
-      minimatch: 3.0.4
+      minimatch: 3.0.5
       npm-run-path: 4.0.1
-      nx: 14.1.9
+      nx: 14.2.1
       open: 8.4.0
-      prettier: 2.5.1
+      prettier: 2.6.2
       rxjs: 6.6.7
       semver: 7.3.4
       tmp: 0.2.1
@@ -2543,6 +2557,8 @@ packages:
       yargs: 17.4.0
       yargs-parser: 21.0.1
     transitivePeerDependencies:
+      - '@swc-node/register'
+      - '@swc/core'
       - bufferutil
       - canvas
       - eslint
@@ -2684,170 +2700,6 @@ packages:
       '@sinonjs/commons': 1.8.3
     dev: true
 
-  /@swc-node/core/1.8.2:
-    resolution: {integrity: sha512-IoJ7tGHQ6JOMSmFe4VhP64uLmFKMNasS0QEgUrLFQ0h/dTvpQMynnoGBEJoPL6LfsebZ/q4uKqbpWrth6/yrAA==}
-    engines: {node: '>= 10'}
-    dependencies:
-      '@swc/core': 1.2.174
-    dev: true
-
-  /@swc-node/register/1.4.2:
-    resolution: {integrity: sha512-wLZz0J7BTO//1Eq7e4eBQjKF380Hr2eVemz849msQSKcVM1D7UJUt/dP2TinEVGx++/BXJ/0q37i6n9Iw0EM0w==}
-    dependencies:
-      '@swc-node/core': 1.8.2
-      '@swc-node/sourcemap-support': 0.1.11
-      chalk: 4.1.2
-      debug: 4.3.4
-      pirates: 4.0.5
-      tslib: 2.3.1
-      typescript: 4.6.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@swc-node/sourcemap-support/0.1.11:
-    resolution: {integrity: sha512-b+Mn3oQl+7nUSt7hPzIbY9B30YhcFo1PT4kd9P4QmD6raycmIealOAhAdZID/JevphzsOXHQB4OqJm7Yi5tMcA==}
-    dependencies:
-      source-map-support: 0.5.21
-    dev: true
-
-  /@swc/core-android-arm-eabi/1.2.174:
-    resolution: {integrity: sha512-sxH6jIq57wnZ8LyLKN8SXM4DhMo4aTq0mClo+zBMPTyHzNO5AEAwh5nqs+d51Dycs3epur/8iv/J6xDv+cKkfw==}
-    engines: {node: '>=10'}
-    cpu: [arm]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@swc/core-android-arm64/1.2.174:
-    resolution: {integrity: sha512-gGXBuY8Zs93eNduyrhm+rB+K/smF535uwmamHB1+7BrkuUtt/Lrk3vDTc4D61GMA/vBOqus9IXKHBc+EFmBbog==}
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@swc/core-darwin-arm64/1.2.174:
-    resolution: {integrity: sha512-dFxu2o8dR55A+d0Qf/Ai0yKnGjon/UT1hWnBY9tcyvgo7XsiFRB/P83tlbVohqq9N+SDVxdBg9bMAR2i8rDTHg==}
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@swc/core-darwin-x64/1.2.174:
-    resolution: {integrity: sha512-LsANlfBkqfJobPvfojTbUY9xw0ZwTxTicdwaK6BC5TLmYXVfvxvMpmhsvIe3bNlx4jV1z0IrFaJ0YxDSc1s6vw==}
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@swc/core-freebsd-x64/1.2.174:
-    resolution: {integrity: sha512-IG0qc9/qUHmiqC6fqT3yq4iBwNRHN1zYbGpzQm4DU/d7DTwsV7D2A+1McFUKmnUOvBG7zdgg5ee91QxUVOCZTQ==}
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@swc/core-linux-arm-gnueabihf/1.2.174:
-    resolution: {integrity: sha512-nK4U8s9++e5AVEhWz3W6V0tUsPPjYJlMsb4ZzZR2qhYe53YBURCznFIhUDwe0ib/f6T773Tn7sr52uemcQBu8A==}
-    engines: {node: '>=10'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@swc/core-linux-arm64-gnu/1.2.174:
-    resolution: {integrity: sha512-Tf6Ths472ul9Z4p8uFP7vMJXLmBS2h4PQL/zDj3g3N+9D8hs6+tnnBNrkEm6jXs09gO4bvaN+706QxmZUEgyPg==}
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@swc/core-linux-arm64-musl/1.2.174:
-    resolution: {integrity: sha512-vsQjxyCe3+qRMQSuDlYwmFxbRILIycRC8OB/tBhTJXYuwIh4zvpxc+zvSuERbd4cmMWwM/JtXIlP5grSNjgH6A==}
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@swc/core-linux-x64-gnu/1.2.174:
-    resolution: {integrity: sha512-CFEL2WMIQ1mZvvDguaVGgwan9X7Ah7ctHG8SOa+mFaWXdAyVXOWp8sdNMJbqvwYAv980CENfYioI8yL0z1heWA==}
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@swc/core-linux-x64-musl/1.2.174:
-    resolution: {integrity: sha512-qulTJ3GYE8gUR0yfIOJVfo8SSl/AgLKAplskIHJu/cP0JtRpHL8B598mfny6SuD+ZabBjUvAz6d8ACL9JdhYTw==}
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@swc/core-win32-arm64-msvc/1.2.174:
-    resolution: {integrity: sha512-ZogvH4sOVk3pLguYLlc+3lBlGwJ4WOi375VUqDSb92TirBFPjhX98xDn/Xus1fyRKofSGp1zoAs4w80F6hkX6g==}
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@swc/core-win32-ia32-msvc/1.2.174:
-    resolution: {integrity: sha512-QcnXBs2L0O5BiV61orDxJqZsmk2wPUscTTY4upfW5++eCI6IpDYVyfQmtQ9OdVCXWfVEPrhQKuUxLZEjoKxdNQ==}
-    engines: {node: '>=10'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@swc/core-win32-x64-msvc/1.2.174:
-    resolution: {integrity: sha512-9aFcbPTFA5jtiTQbOsq+/QN29F/YNpOrhcwsUa2Haqq0+2h71rMiBn7oluUERFQ+/se9J0C00iSC0QXif4pfuQ==}
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@swc/core/1.2.174:
-    resolution: {integrity: sha512-PbBwwaqrBCyOae+hZV9QK+QeR1azqb+MGKvuk6SVxsk3Rvh1HSX4CieMnuhcmX+Sm4L58eQv9l37ZLCu2hBZcA==}
-    engines: {node: '>=10'}
-    hasBin: true
-    optionalDependencies:
-      '@swc/core-android-arm-eabi': 1.2.174
-      '@swc/core-android-arm64': 1.2.174
-      '@swc/core-darwin-arm64': 1.2.174
-      '@swc/core-darwin-x64': 1.2.174
-      '@swc/core-freebsd-x64': 1.2.174
-      '@swc/core-linux-arm-gnueabihf': 1.2.174
-      '@swc/core-linux-arm64-gnu': 1.2.174
-      '@swc/core-linux-arm64-musl': 1.2.174
-      '@swc/core-linux-x64-gnu': 1.2.174
-      '@swc/core-linux-x64-musl': 1.2.174
-      '@swc/core-win32-arm64-msvc': 1.2.174
-      '@swc/core-win32-ia32-msvc': 1.2.174
-      '@swc/core-win32-x64-msvc': 1.2.174
-    dev: true
-
   /@tootallnate/once/1.1.2:
     resolution: {integrity: sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==}
     engines: {node: '>= 6'}
@@ -3401,6 +3253,19 @@ packages:
       - supports-color
     dev: true
 
+  /@vitejs/plugin-vue/2.3.3_vite@2.8.4:
+    resolution: {integrity: sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      vite: ^2.5.10
+      vue: ^3.2.25
+    peerDependenciesMeta:
+      vue:
+        optional: true
+    dependencies:
+      vite: 2.8.4
+    dev: true
+
   /@vitest/ui/0.14.0:
     resolution: {integrity: sha512-YJW8NxRm1zKuoCik8+khqyaLvydNqCLqd6AwxaJ47anCFWrYmMRul5uClHlmZuggRni8Gl0N/QcRgsMVjQwIvQ==}
     dependencies:
@@ -3493,6 +3358,9 @@ packages:
     resolution: {integrity: sha512-4jpJHRD4ORv8PlbYi+/MfP8ec1okz6rybe36MdpkDrGIdEItHEUyaHSKvz+ptNEyQpALmmVfRteHkU9F8vxOew==}
     peerDependencies:
       vue: 3.2.33
+    peerDependenciesMeta:
+      vue:
+        optional: true
     dependencies:
       '@vue/compiler-ssr': 3.2.33
       '@vue/shared': 3.2.33
@@ -5918,7 +5786,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-prettier/4.0.0_t5rlqxhdzybjjhn5fth7z27jl4:
+  /eslint-plugin-prettier/4.0.0_4yxulvuuzstbd25cduzg4o4cmy:
     resolution: {integrity: sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==}
     engines: {node: '>=6.0.0'}
     peerDependencies:
@@ -5931,7 +5799,7 @@ packages:
     dependencies:
       eslint: 8.9.0
       eslint-config-prettier: 8.4.0_eslint@8.9.0
-      prettier: 2.5.1
+      prettier: 2.6.2
       prettier-linter-helpers: 1.0.0
     dev: true
 
@@ -6246,7 +6114,7 @@ packages:
       '@nodelib/fs.walk': 1.2.8
       glob-parent: 5.1.2
       merge2: 1.4.1
-      micromatch: 4.0.4
+      micromatch: 4.0.5
     dev: true
 
   /fast-glob/3.2.7:
@@ -6495,7 +6363,7 @@ packages:
     dev: true
 
   /fs.realpath/1.0.0:
-    resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=}
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
   /fsevents/2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
@@ -6917,7 +6785,7 @@ packages:
       safer-buffer: 2.1.2
 
   /identity-obj-proxy/3.0.0:
-    resolution: {integrity: sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==}
+    resolution: {integrity: sha1-lNK9qWCERT7zb7xarsN+D3nx/BQ=}
     engines: {node: '>=4'}
     dependencies:
       harmony-reflect: 1.6.2
@@ -6959,7 +6827,7 @@ packages:
     dev: true
 
   /inflight/1.0.6:
-    resolution: {integrity: sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=}
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     dependencies:
       once: 1.4.0
       wrappy: 1.0.2
@@ -8812,14 +8680,6 @@ packages:
       - supports-color
     dev: false
 
-  /micromatch/4.0.4:
-    resolution: {integrity: sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==}
-    engines: {node: '>=8.6'}
-    dependencies:
-      braces: 3.0.2
-      picomatch: 2.3.1
-    dev: true
-
   /micromatch/4.0.5:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
     engines: {node: '>=8.6'}
@@ -8855,8 +8715,8 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /minimatch/3.0.4:
-    resolution: {integrity: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==}
+  /minimatch/3.0.5:
+    resolution: {integrity: sha512-tUpxzX0VAzJHjLu0xUfFv1gwVp9ba3IOuRAVH2EGuRW8a5emA2FlACLqiT/lDVtS1W+TGNwqz3sWaNyLgDJWuw==}
     dependencies:
       brace-expansion: 1.1.11
     dev: true
@@ -9058,16 +8918,22 @@ packages:
     resolution: {integrity: sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==}
     dev: true
 
-  /nx/14.1.9:
-    resolution: {integrity: sha512-O+zpqtGrJkiTNqh4qK4MwXN1OLgWXCm7YWNO+F7y9kKGfOlGC/krx2lmSSGbMEOPgIP4Z2MMTXGlVULqZyRVHw==}
+  /nx/14.2.1:
+    resolution: {integrity: sha512-7MXhchJqLPk4NTJ20yd7j9U1JhCr6mBl93uEuJ4wu2Lf5meTqbl6Mh7D6Yd7y/vfH4W3MCzxF9DC18L8Frp0mA==}
     hasBin: true
     requiresBuild: true
+    peerDependencies:
+      '@swc-node/register': ^1.4.2
+      '@swc/core': ^1.2.173
+    peerDependenciesMeta:
+      '@swc-node/register':
+        optional: true
+      '@swc/core':
+        optional: true
     dependencies:
-      '@nrwl/cli': 14.1.9
-      '@nrwl/tao': 14.1.9
+      '@nrwl/cli': 14.2.1
+      '@nrwl/tao': 14.2.1
       '@parcel/watcher': 2.0.4
-      '@swc-node/register': 1.4.2
-      '@swc/core': 1.2.174
       chalk: 4.1.0
       chokidar: 3.5.3
       cli-cursor: 3.1.0
@@ -9082,7 +8948,7 @@ packages:
       glob: 7.1.4
       ignore: 5.2.0
       jsonc-parser: 3.0.0
-      minimatch: 3.0.4
+      minimatch: 3.0.5
       npm-run-path: 4.0.1
       open: 8.4.0
       semver: 7.3.4
@@ -9094,8 +8960,6 @@ packages:
       v8-compile-cache: 2.3.0
       yargs: 17.4.0
       yargs-parser: 21.0.1
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /object-assign/4.1.1:
@@ -9341,7 +9205,7 @@ packages:
     dev: true
 
   /path-is-absolute/1.0.1:
-    resolution: {integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18=}
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
 
   /path-key/2.0.1:
@@ -9650,8 +9514,8 @@ packages:
     hasBin: true
     dev: true
 
-  /prettier/2.5.1:
-    resolution: {integrity: sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==}
+  /prettier/2.6.2:
+    resolution: {integrity: sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==}
     engines: {node: '>=10.13.0'}
     hasBin: true
     dev: true