feat: 集成ReactDemo

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);
 
 	}

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  />);
+	}
+}

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();
 	}
 }

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: {