feat: update tips

afeiship · Feb 3, 2021 · 0270d77 · 0270d77
1 parent d6a3859
commit 0270d77
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 5 deletions.
diff --git a/public/index.js b/public/index.js
@@ -3,6 +3,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactRteSlate from '../src/main';
 import { Toolbar, ButtonGroup, Button } from '@jswork/react-rte-ui';
+import Bold from './plugins/bold';
+import Italic from './plugins/italic';
 import './assets/style.scss';
 
 class App extends React.Component {
@@ -29,11 +31,11 @@ class App extends React.Component {
 
   constructor(inProps) {
     super(inProps);
-    this.state = { value: '<p>aaa</p>' };
+    this.state = { value: '<p>hello world</p>' };
   }
 
   handleClick1 = (e) => {
-    this.setState({ value: '<p>abcd</p>' });
+    this.setState({ value: '<p>Are you ok?</p>' });
   };
 
   render() {
@@ -47,6 +49,7 @@ class App extends React.Component {
         <ReactRteSlate
           placeholder="type your text."
           header={this.headerView}
+          plugins={[Bold, Italic]}
           value={this.state.value}
           onChange={(e) => {
             this.setState({ value: e.target.value });

diff --git a/public/plugins/bold.js b/public/plugins/bold.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 export default {
   name: 'bold',
   hooks: {

diff --git a/public/plugins/italic.js b/public/plugins/italic.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 export default {
   name: 'italic',
   hooks: {

diff --git a/src/components/index.js b/src/components/index.js
@@ -101,8 +101,9 @@ export default class ReactRteSlate extends Component {
     this.editor = composite(createEditor());
     this.state = { value: this.initialValue };
     onInit({ target: { value: this.editor } });
-    // window.editor = this.editor;
-    // window.Editor = Editor;
+
+    window.editor = this.editor;
+    window.Editor = Editor;
   }
 
   shouldComponentUpdate(inProps) {
@@ -119,7 +120,29 @@ export default class ReactRteSlate extends Component {
   };
 
   renderLeaf = (inProps) => {
-    return this.renderHooks('leaf', inProps);
+    const { plugins } = this.props;
+    const { attributes, children, leaf } = inProps;
+
+    let formatArr = [];
+
+    for (let key in inProps.leaf) {
+      if (key !== 'text') {
+        let plugin = plugins.find((v) => v.name === key);
+        if (plugin) {
+          formatArr.push(plugin.hooks.leaf);
+        }
+      }
+    }
+
+    console.log('ActiveFormats:', formatArr);
+
+    return (
+      <span {...attributes}>
+        {formatArr.reduce((child, handler) => {
+          return handler(this, { children: child, leaf, attributes });
+        }, children)}
+      </span>
+    );
   };
 
   handleSerialize(inRole, inValue) {