chore: add preview

Author: sylingd

demo/basic.md demo/index.tsxdemo/basic.md renamed to demo/index.tsx

@@ -1,15 +1,8 @@
----
-title: Simple Usage
-order: 1
----
-
-本 Demo 演示基本用法。
-
-```jsx
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import ReactMarkdown from 'react-markdown';
-import MdEditor, { Plugins } from 'react-markdown-editor-lite';
+import MdEditor, { Plugins } from '../src';
+import '../src/index.less';
 
 const PLUGINS = undefined;
 // const PLUGINS = ['header', 'divider', 'image', 'divider', 'font-bold', 'full-screen'];
@@ -23,14 +16,18 @@ MdEditor.use(Plugins.TabInsert, {
   tabMapValue: 1, // note that 1 means a '\t' instead of ' '.
 });
 
-class Demo extends React.Component {
-  mdEditor = undefined;
+interface State {
+  value: string;
+}
+
+class Demo extends Component<{}, State> {
+  mdEditor: MdEditor | undefined = undefined;
 
   constructor(props) {
     super(props);
     this.renderHTML = this.renderHTML.bind(this);
     this.state = {
-      value: "# Hello",
+      value: '# Hello',
     };
   }
 
@@ -41,17 +38,17 @@ class Demo extends React.Component {
     });
   };
 
-  handleImageUpload = (file) => {
+  handleImageUpload = file => {
     return new Promise(resolve => {
       const reader = new FileReader();
       reader.onload = data => {
-        resolve(data.target.result);
+        resolve((data.target as any).result);
       };
       reader.readAsDataURL(file);
     });
   };
 
-  onCustomImageUpload = (event) => {
+  onCustomImageUpload = event => {
     console.log('onCustomImageUpload', event);
     return new Promise((resolve, reject) => {
       const result = window.prompt('Please enter image url here...');
@@ -82,15 +79,15 @@ class Demo extends React.Component {
 
   handleSetValue = () => {
     const text = window.prompt('Content');
-    this.setState({
-      value: text,
-    });
+    if (text) {
+      this.setState({
+        value: text,
+      });
+    }
   };
 
   renderHTML(text) {
-    return React.createElement(ReactMarkdown, {
-      source: text,
-    });
+    return <ReactMarkdown>{text}</ReactMarkdown>;
   }
 
   render() {
@@ -104,7 +101,9 @@ class Demo extends React.Component {
         </nav>
         <div className="editor-wrap" style={{ marginTop: '30px' }}>
           <MdEditor
-            ref={node => (this.mdEditor = node || undefined)}
+            ref={node => {
+              this.mdEditor = node || undefined;
+            }}
             value={this.state.value}
             style={{ height: '500px', width: '100%' }}
             renderHTML={this.renderHTML}
@@ -155,7 +154,12 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render((
-  <Demo />
-), mountNode);
-```
+const rootEl = document.getElementById('root');
+if (rootEl) {
+  const root = ReactDOM.createRoot(rootEl);
+  root.render(
+    <React.StrictMode>
+      <Demo />
+    </React.StrictMode>,
+  );
+}

package.json

@@ -17,7 +17,9 @@
   "scripts": {
     "build": "rslib build",
     "check": "biome check --write",
-    "dev": "rslib build --watch",
+    "build:watch": "rslib build --watch",
+    "dev": "rsbuild dev",
+    "build:demo": "rsbuild build",
     "format": "biome format --write",
     "test": "mocha",
     "coverage": "nyc mocha"
@@ -44,6 +46,7 @@
   "homepage": "https://unpkg.com/react-markdown-editor-lite@1.2.5-8/build/index.html",
   "devDependencies": {
     "@biomejs/biome": "2.1.3",
+    "@rsbuild/core": "^1.5.0",
     "@rsbuild/plugin-less": "^1.5.0",
     "@rsbuild/plugin-react": "^1.3.5",
     "@rslib/core": "^0.12.2",
@@ -67,7 +70,7 @@
     "nyc": "^15.1.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-markdown": "^4.3.1",
+    "react-markdown": "^10.1.0",
     "simple-git-hooks": "^2.13.0",
     "source-map-support": "^0.5.21",
     "tsx": "^4.20.5",