From 4aaf1d27f873be066ff0c52ec784f974adb2c883 Mon Sep 17 00:00:00 2001
From: liufree <liufreeo@gmail.com>
Date: Sat, 1 Mar 2025 23:36:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9B=86=E6=88=90ReactDemo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/{main.ts => main.tsx} | 20 +++++++++++++++++++-
 src/pages/ReactDemo.tsx   | 33 +++++++++++++++++++++++++++++++++
 src/sampleView.ts         |  9 ++++++---
 vite.config.js            |  2 +-
 4 files changed, 59 insertions(+), 5 deletions(-)
 rename src/{main.ts => main.tsx} (84%)
 create mode 100644 src/pages/ReactDemo.tsx

diff --git a/src/main.ts b/src/main.tsx
similarity index 84%
rename from src/main.ts
rename to src/main.tsx
index adca233..b0cde97 100644
--- a/src/main.ts
+++ b/src/main.tsx
@@ -4,6 +4,12 @@ import SampleModal from "./components/SampleModal";
 
 import {SampleView} from "./sampleView";
 import {SAMPLE_VIEW_TYPE} from './constants';
+import React from "react";
+import AntdTableDemo from "./pages/AntdTableDemo";
+import TableDemo from "./pages/TableDemo";
+import {StrictMode} from 'react';
+import ReactDemo from "./pages/ReactDemo";
+import { Root, createRoot } from 'react-dom/client';
 
 interface MyPluginSettings {
 	mySetting: string;
@@ -15,6 +21,7 @@ const DEFAULT_SETTINGS: MyPluginSettings = {
 
 export default class MyPlugin extends Plugin {
 	settings: MyPluginSettings;
+	root: Root | null = null;
 
 	async onload() {
 		await this.loadSettings();
@@ -82,6 +89,17 @@ export default class MyPlugin extends Plugin {
 
 		// When registering intervals, this function will automatically clear the interval when the plugin is disabled.
 		this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));
+
+		// 代码块中标注table的绘制成sampleView
+		this.registerMarkdownCodeBlockProcessor('sample', (source, el, ctx) => {
+		//	插入一个div
+			const container = el.createDiv();
+
+			// 创建一个 MarkdownRenderChild 实例
+			const reactComponent = new ReactDemo(container, source);
+			ctx.addChild(reactComponent);
+
+		});
 	}
 
 	onunload() {
@@ -103,7 +121,7 @@ export default class MyPlugin extends Plugin {
 		//   !Platform.isMobile && workspace.activeLeaf && workspace.activeLeaf.view instanceof FileView,
 		// );
 		const leaf = workspace.getLeaf(false);
-		await leaf.setViewState({ type: SAMPLE_VIEW_TYPE });
+		await leaf.setViewState({type: SAMPLE_VIEW_TYPE});
 		workspace.revealLeaf(leaf);
 
 	}
diff --git a/src/pages/ReactDemo.tsx b/src/pages/ReactDemo.tsx
new file mode 100644
index 0000000..91ac185
--- /dev/null
+++ b/src/pages/ReactDemo.tsx
@@ -0,0 +1,33 @@
+import {App, Plugin, MarkdownRenderChild} from 'obsidian';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import TableDemo from "./TableDemo";
+import AntdTableDemo from "./AntdTableDemo";
+import {createRoot, Root} from "react-dom/client";
+
+export  default class ReactComponent extends MarkdownRenderChild {
+	private sampleComponent: React.ReactElement;
+	root: Root;
+	container: HTMLElement;
+
+
+
+
+	constructor(container: HTMLElement, private source: string) {
+        super(container);
+		this.container = container;
+	}
+
+	onload() {
+		// 渲染 React 组件
+		this.renderReactComponent();
+	}
+
+	renderReactComponent() {
+		// 使用 ReactDOM.render 渲染 React 组件
+
+		// 使用 createRoot 渲染 React 组件
+		const root = createRoot(this.container);
+		root.render(<TableDemo  />);
+	}
+}
diff --git a/src/sampleView.ts b/src/sampleView.ts
index 3435ab7..4db310f 100644
--- a/src/sampleView.ts
+++ b/src/sampleView.ts
@@ -2,16 +2,18 @@ import {HoverPopover, ItemView, WorkspaceLeaf} from 'obsidian';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import type MyPlugin from './main';
-import { createRoot } from 'react-dom/client';
+import { Root,createRoot } from 'react-dom/client';
 
 import FormDemo from "./pages/FormDemo";
 import TableDemo from "./pages/TableDemo";
 import AntdTableDemo from "./pages/AntdTableDemo";
 
+
 export class SampleView extends ItemView {
 	plugin: MyPlugin;
 	hoverPopover: HoverPopover | null;
 	private sampleComponent: React.ReactElement;
+	root: Root;
 
 	constructor(leaf: WorkspaceLeaf, plugin: MyPlugin) {
 		super(leaf);
@@ -35,12 +37,13 @@ export class SampleView extends ItemView {
 	async onOpen(): Promise<void> {
 
 		this.sampleComponent = React.createElement(AntdTableDemo);
-		const root = createRoot(this.contentEl as HTMLElement);
-		root.render(this.sampleComponent);
+		this.root = createRoot(this.contentEl as HTMLElement);
+		this.root.render(this.sampleComponent);
 
 	}
 
 	async onClose() {
 		// Nothing to clean up.
+		this.root.unmount();
 	}
 }
diff --git a/vite.config.js b/vite.config.js
index 6fe77a9..9a0835e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -11,7 +11,7 @@ export default defineConfig(({mode}) => {
 			minify: false,
 			// Use Vite lib mode https://vitejs.dev/guide/build.html#library-mode
 			lib: {
-				entry: path.resolve(__dirname, './src/main.ts'),
+				entry: path.resolve(__dirname, './src/main.tsx'),
 				formats: ['cjs'],
 			},
 			rollupOptions: {