feat: dynamic plugins support

package.json

@@ -92,11 +92,13 @@
     "@jswork/next-compose": "^1.0.0",
     "@jswork/next-css-text": "^1.0.1",
     "@jswork/next-is-empty": "^1.0.0",
+    "@jswork/next-plugin-manager": "^1.0.4",
     "@jswork/next-slate-defaults": "^1.0.5",
     "@jswork/next-slate-deserialize": "^1.0.7",
     "@jswork/next-slate-plugin": "^1.0.13",
     "@jswork/next-slate-serialize": "^1.0.6",
-    "@jswork/noop": "^1.0.0"
+    "@jswork/noop": "^1.0.0",
+    "fast-deep-equal": "^3.1.3"
   },
   "publishConfig": {
     "access": "public",

public/index.js

@@ -20,6 +20,7 @@ import ForceLayout from './plugins/force-layout';
 import BetterDelete from './plugins/better-delete';
 import ExtEditor from './plugins/ext-editor';
 import Paragraph from './plugins/paragraph';
+import Default from './plugins/default';
 import './assets/style.scss';
 import { ReactEditor } from 'slate-react';
 import { createEditor, Editor, Element, Transforms } from 'slate';
@@ -50,7 +51,26 @@ class App extends React.Component {
   constructor(inProps) {
     super(inProps);
     this.state = {
-      value: `<p style="text-align:right;">Are <code>you</code> ok?</p><blockquote style="text-align:right;"><span style="font-weight: bold;">hello world</span></blockquote><p><i><u><span style="font-weight: bold;">Are</span></u></i> <span style="color: rgb(255, 0, 0);">you</span> ok?</p><ul><li><u><span>thanks</span></u></li><li>and you?</li></ul>`
+      value: `<p style="text-align:right;">Are <code>you</code> ok?</p><blockquote style="text-align:right;"><span style="font-weight: bold;">hello world</span></blockquote><p><i><u><span style="font-weight: bold;">Are</span></u></i> <span style="color: rgb(255, 0, 0);">you</span> ok?</p><ul><li><u><span>thanks</span></u></li><li>and you?</li></ul>`,
+      plugins: [
+        Bold,
+        Italic,
+        Underline,
+        Strikethrough,
+        Code,
+        Heading,
+        Blockquote,
+        Color,
+        BackgroundColor,
+        NumberedList,
+        BulletedList,
+        ListItem,
+        // PasteHtml,
+        // // ForceLayout,
+        // BetterDelete,
+        ExtEditor,
+        Paragraph
+      ]
     };
   }
 
@@ -62,40 +82,32 @@ class App extends React.Component {
     window.Transforms = Transforms;
   };
 
-  handleClick = (e) => {
+  handleClick1 = (e) => {
     this.setState({ value: '<p style="text-align:right;">Are you ok?</p>' });
   };
 
+  handleClick2 = (e) => {
+    this.setState({
+      plugins: [
+        Default,
+      ]
+    });
+  };
+
   render() {
     return (
-      <ReactDemokit
-        className="p-3 app-container"
-        url="https://github.com/afeiship/react-rte-slate">
-        <button className="button is-primary mb-2" onClick={this.handleClick}>
+      <ReactDemokit className="p-3 app-container" url="https://github.com/afeiship/react-rte-slate">
+        <button className="button is-primary mb-2 mr-2" onClick={this.handleClick1}>
           Update a value.
         </button>
+
+        <button className="button is-primary mb-2" onClick={this.handleClick2}>
+          Update plugins.
+        </button>
         {this.headerView}
         <ReactRteSlate
           placeholder="type your text."
-          plugins={[
-            Bold,
-            Italic,
-            Underline,
-            Strikethrough,
-            Code,
-            Heading,
-            Blockquote,
-            Color,
-            BackgroundColor,
-            NumberedList,
-            BulletedList,
-            ListItem,
-            // PasteHtml,
-            // // ForceLayout,
-            // BetterDelete,
-            ExtEditor,
-            Paragraph
-          ]}
+          plugins={this.state.plugins}
           value={this.state.value}
           onInit={this.handleInit}
           onChange={(e) => {

public/plugins/default.js

@@ -22,10 +22,14 @@ export default NxSlatePlugin.define({
     },
     output: (node, children) => {
       const { style } = node;
-      return `<p${style}>${children}</p>`;
+      return `<div${style} class='react-rte__default'>${children}</div>`;
     }
   },
   render: (_, { attributes, children, element }) => {
-    return <p {...attributes}>{children}</p>;
+    return (
+      <div className="react-rte__default" {...attributes}>
+        {children}
+      </div>
+    );
   }
 });

src/components/index.js

@@ -13,6 +13,8 @@ import NxSlateDeserialize from '@jswork/next-slate-deserialize';
 import NxSlateDefaults from '@jswork/next-slate-defaults';
 import NxCssText from '@jswork/next-css-text';
 import NxSlatePlugin from '@jswork/next-slate-plugin';
+import NxPluginManager from '@jswork/next-plugin-manager';
+import deepEqual from 'fast-deep-equal';
 
 const CLASS_NAME = 'react-rte-slate';
 
@@ -66,13 +68,14 @@ export default class ReactRteSlate extends Component {
   constructor(inProps) {
     super(inProps);
     this.initialStatics();
-    const { onInit } = inProps;
+    const { onInit, plugins } = inProps;
     const html = inProps.value;
     const composite = this.withDecorator;
     const value = this.fromHtml(html);
     this.editor = composite(createEditor());
     this.state = { value };
-    onInit({ target: { context: this, value: this.editor } });
+    this.manager = NxPluginManager.getInstance(plugins);
+    onInit({ target: { manager: this.manager, value: this.editor } });
   }
 
   shouldComponentUpdate(inProps) {
@@ -81,6 +84,12 @@ export default class ReactRteSlate extends Component {
     if (html !== value) {
       this.setState({ value: this.fromHtml(html) });
     }
+
+    if (!deepEqual(inProps.plugins, this.props.plugins)) {
+      this.manager.setOption({ entities: inProps.plugins });
+      this.forceUpdate();
+    }
+
     return true;
   }
 
@@ -91,7 +100,7 @@ export default class ReactRteSlate extends Component {
    */
   getActivePlugin(inNode) {
     const { plugins } = this.props;
-    return NxSlatePlugin.actived(inNode, plugins);
+    return NxSlatePlugin.actived(inNode, plugins) || this.manager.get('default');
   }
 
   /**