feat: 1.support vue codeblock

JuckZ · Feb 21, 2023 · 2b7d66f · 2b7d66f
1 parent 73bc793
commit 2b7d66f
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git a/src/main.ts b/src/main.ts
@@ -600,6 +600,7 @@ export default class AwesomeBrainManagerPlugin extends Plugin {
         this.setupCommands();
         this.registerMarkdownPostProcessor(codeEmoji);
         this.registerMarkdownCodeBlockProcessor('plantuml', this.process.UMLProcess);
+        this.registerMarkdownCodeBlockProcessor('vue', this.process.VueProcess);
 
         this.spacesDBPath = normalizePath(app.vault.configDir + '/plugins/awesome-brain-manager/ObsidianManager.mdb');
         this.spaceDB = await getDB(await loadSQL(), this.spacesDBPath);

diff --git a/src/process/Process.ts b/src/process/Process.ts
@@ -3,7 +3,7 @@ import { debounce, request } from 'obsidian';
 import plantuml from 'plantuml-encoder';
 import { v4 as uuidv4 } from 'uuid';
 import type AwesomeBrainManagerPlugin from '../main';
-import { insertImageWithMap } from '../utils/content';
+import { insertImageWithMap, insertVueComponent } from '../utils/content';
 
 export default class Process {
     plugin: AwesomeBrainManagerPlugin;
@@ -12,6 +12,17 @@ export default class Process {
         this.plugin = plugin;
     }
 
+    VueProcess = async (source, el, ctx) => {
+        const closestLeaf = ctx.containerEl.closest('.workspace-leaf-content') as HTMLElement;
+        console.log(source);
+        if (closestLeaf && closestLeaf.dataset['mode'] === 'source' && !el.closest('.cm-line')) {
+            console.log(closestLeaf.dataset['mode']);
+        } else {
+            // insertVueComponent(el, ctx, `<Markdown src={${JSON.stringify('```tsx\n' + source + '\n```')}}/>`);
+        }
+        insertVueComponent(el, ctx, source);
+    };
+
     UMLProcess = async (source: string, el: HTMLElement, ctx: MarkdownPostProcessorContext) => {
         const debounceMap = new Map<string, Debouncer<[string, HTMLElement, MarkdownPostProcessorContext], any>>();
         const processor = async (source: string, el: HTMLElement, _: MarkdownPostProcessorContext) => {

diff --git a/src/utils/content.ts b/src/utils/content.ts
@@ -1,3 +1,6 @@
+import type { MarkdownPostProcessorContext } from 'obsidian';
+import { createApp, VueApp } from 'vue/dist/vue.esm-bundler.js';
+import Title from '../ui/Title';
 import Logger from '../utils/logger';
 
 interface MContent {
@@ -168,3 +171,24 @@ export function insertSvgImage(el: HTMLElement, image: string) {
 
     el.insertAdjacentHTML('beforeend', svg.documentElement.outerHTML);
 }
+
+export function registerVueComponent(vueApp: VueApp) {
+    // TODO 扫描并注册某个文件夹下所有的组件
+    vueApp.component('Title', Title);
+}
+
+export function insertVueComponent(el: HTMLElement, ctx: MarkdownPostProcessorContext, source: string) {
+    const vueApp = createApp({
+        data() {
+            return {
+                message: `ignore this place`,
+            };
+        },
+        template: source,
+    });
+    // TODO 优化方向1，根据source进行有选择的注入组件，而非全部注入；优化方向2：只使用一个实例，通过定位等方式在不同元素上使用是否可行
+    registerVueComponent(vueApp);
+    const container = document.createElement('span');
+    vueApp.mount(container);
+    el.replaceChildren(container);
+}