refactor: get active marks

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

Hide file tree

Showing 2 changed files with 31 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     "@jswork/webpack-lib-kits": "^1.0.2",
     "@jswork/wsui-rte-icons": "^1.0.0",
     "@testing-library/react": "^11.0.4",
-    "autoprefixer": "^10.0.1",
+    "autoprefixer": "^9.0.0",
     "babel-loader": "^8.1.0",
     "balloon-css": "^1.2.0",
     "cross-env": "^7.0.2",
@@ -97,4 +97,4 @@
     "access": "public",
     "registry": "https://registry.npmjs.org"
   }
-}
+}
diff --git a/src/components/index.js b/src/components/index.js
@@ -7,19 +7,9 @@ import nxCompose from '@jswork/next-compose';
 import NxSlateSerialize from '@jswork/next-slate-serialize';
 import NxDeslateSerialize from '@jswork/next-slate-deserialize';
 import NxSlateDefaults from '@jswork/next-slate-defaults';
-import {
-  Slate,
-  Editable,
-  withReact,
-  DefaultElement,
-  DefaultLeaf
-} from 'slate-react';
+import { Slate, Editable, withReact, DefaultElement } from 'slate-react';
 
 const CLASS_NAME = 'react-rte-slate';
-const DEFAULT_ELEMENTS = {
-  element: DefaultElement,
-  leaf: DefaultLeaf
-};
 
 export default class ReactRteSlate extends Component {
   static displayName = CLASS_NAME;
@@ -80,26 +70,18 @@ export default class ReactRteSlate extends Component {
     return plugins.filter((plugin) => plugin.hooks);
   }
 
-  renderHooks(inRole, inProps) {
-    const DefaultComponent = DEFAULT_ELEMENTS[inRole];
-    const handlers = this.hooks
-      .map((item) => item.hooks[inRole])
-      .filter(Boolean);
-    const handler = handlers.find((fn) => fn(this, inProps));
-    return handler ? handler(this, inProps) : <DefaultComponent {...inProps} />;
-  }
-
   toSlateNodes(inValue) {
     return this.handleSerialize('importer', inValue);
   }
 
   constructor(inProps) {
     super(inProps);
-    const { value, onInit } = inProps;
+    const { onInit } = inProps;
+    const html = inProps.value;
     const composite = this.withDecorators;
-    this.initialValue = this.toSlateNodes(value);
+    const value = this.handleSerialize('importer', html);
     this.editor = composite(createEditor());
-    this.state = { value: this.initialValue };
+    this.state = { value };
     onInit({ target: { value: this.editor } });
 
     window.editor = this.editor;
@@ -116,35 +98,42 @@ export default class ReactRteSlate extends Component {
   }
 
   renderElement = (inProps) => {
-    return this.renderHooks('element', inProps);
+    const handlers = this.hooks
+      .map((item) => item.hooks.element)
+      .filter(Boolean);
+    const handler = handlers.find((fn) => fn(this, inProps));
+    return handler ? handler(this, inProps) : <DefaultElement {...inProps} />;
   };
 
   renderLeaf = (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);
+    const activeMarks = this.getActiveMarks(inProps);
 
     return (
       <span {...attributes}>
-        {formatArr.reduce((child, handler) => {
-          return handler(this, { children: child, leaf, attributes });
+        {activeMarks.reduce((child, mark) => {
+          const { name, fn } = mark;
+          return leaf[name] && fn(this, { ...inProps, children: child });
         }, children)}
       </span>
     );
   };
 
+  getActiveMarks(inProps) {
+    const { plugins } = this.props;
+    const results = [];
+    for (let key in inProps.leaf) {
+      if (key === 'text') continue;
+      const plugin = plugins.find((plugin) => plugin.name === key);
+      plugin &&
+        results.push({
+          name: plugin.name,
+          fn: plugin.hooks.leaf
+        });
+    }
+    return results;
+  }
+
   handleSerialize(inRole, inValue) {
     const { plugins } = this.props;
     const handlers = plugins.map((plugin) => plugin[inRole]).filter(Boolean);