fix: optimze block style

.prettierrc

@@ -1,7 +1,7 @@
 {
   "trailingComma": "none",
   "arrowParens": "always",
-  "printWidth": 80,
+  "printWidth": 100,
   "bracketSpacing": true,
   "jsxBracketSameLine": true,
   "tabWidth": 2,

package.json

@@ -88,9 +88,10 @@
     "slate-react": "^0.59.0"
   },
   "dependencies": {
-    "@jswork/next-compact-object": "^1.0.0",
+    "@jswork/next-compact-object": "^1.0.1",
     "@jswork/next-compose": "^1.0.0",
     "@jswork/next-css-text": "^1.0.0",
+    "@jswork/next-is-empty": "^1.0.0",
     "@jswork/next-slate-defaults": "^1.0.2",
     "@jswork/next-slate-deserialize": "^1.0.7",
     "@jswork/next-slate-plugin": "^1.0.6",

public/assets/style.scss

@@ -7,6 +7,9 @@
 @import "~balloon-css";
 
 .react-demokit {
+  > .is-header{
+    display: none;
+  }
   .is-body {
     width: 60%;
     max-width: 600px;

public/index.js

@@ -50,7 +50,7 @@ class App extends React.Component {
   constructor(inProps) {
     super(inProps);
     this.state = {
-      value: `<p style="text-align:right;">Are <code>you</code> ok?</p><blockquote><span style="font-weight: bold;">hello world</span></blockquote><p style=""><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>`
     };
   }
 
@@ -63,7 +63,7 @@ class App extends React.Component {
   };
 
   handleClick = (e) => {
-    this.setState({ value: '<p>Are you ok?</p>' });
+    this.setState({ value: '<p style="text-align:right;">Are you ok?</p>' });
   };
 
   render() {
@@ -100,7 +100,7 @@ class App extends React.Component {
           onInit={this.handleInit}
           onChange={(e) => {
             this.setState({ value: e.target.value });
-            // console.log('html:', e.target.value);
+            console.log('html:', e.target.value);
           }}
           className="mb-5"
         />

public/plugins/background-color.js

@@ -10,14 +10,10 @@ import NxSlatePlugin from '@jswork/next-slate-plugin';
 export default NxSlatePlugin.define({
   id: 'backgroundColor',
   serialize: {
-    input: (el, children) => {
+    input: ({ el }, children) => {
       const nodeName = el.nodeName.toLowerCase();
       if (nodeName === 'span' && el.style.backgroundColor) {
-        return jsx(
-          'text',
-          { backgroundColor: el.style.backgroundColor },
-          children
-        );
+        return jsx('text', { backgroundColor: el.style.backgroundColor }, children);
       }
     },
     output: ({ el }, node) => {

public/plugins/blockquote.js

@@ -10,14 +10,14 @@ import NxSlatePlugin from '@jswork/next-slate-plugin';
 export default NxSlatePlugin.define({
   id: 'blockquote',
   serialize: {
-    input: (el, children) => {
+    input: ({ el, style }, children) => {
       const nodeName = el.nodeName.toLowerCase();
       if (nodeName === 'blockquote') {
-        return jsx('element', { type: 'blockquote' }, children);
+        return jsx('element', { type: 'blockquote', style }, children);
       }
     },
-    output: (node, children) => {
-      return `<blockquote>${children}</blockquote>`;
+    output: ({ style }, children) => {
+      return `<blockquote${style}>${children}</blockquote>`;
     }
   },
   render: (_, { attributes, children, element }) => {

public/plugins/bold.js

@@ -10,16 +10,8 @@ import NxSlatePlugin from '@jswork/next-slate-plugin';
 export default NxSlatePlugin.define({
   id: 'bold',
   hotkey: 'mod+b',
-  events: {
-    keydown(sender, event) {
-      const cmd = sender.commands['bold'];
-      if (cmd.isHotkey(event)) {
-        cmd.toggle(true);
-      }
-    }
-  },
   serialize: {
-    input: (el, children) => {
+    input: ({ el }, children) => {
       const nodeName = el.nodeName.toLowerCase();
       if (nodeName === 'span' && el.style.fontWeight === 'bold') {
         return jsx('text', { bold: true }, children);

public/plugins/bulleted-list.js

@@ -27,7 +27,7 @@ import NxSlatePlugin from '@jswork/next-slate-plugin';
 export default NxSlatePlugin.define({
   id: 'bulleted-list',
   serialize: {
-    input: (el, children) => {
+    input: ({ el }, children) => {
       const nodeName = el.nodeName.toLowerCase();
       if (nodeName === 'ul') {
         return jsx('element', { type: 'bulleted-list' }, children);

public/plugins/code.js

@@ -10,7 +10,7 @@ import NxSlatePlugin from '@jswork/next-slate-plugin';
 export default NxSlatePlugin.define({
   id: 'code',
   serialize: {
-    input: (el, children) => {
+    input: ({ el }, children) => {
       const nodeName = el.nodeName.toLowerCase();
       if (nodeName === 'code') {
         return jsx('text', { code: true }, children);

public/plugins/color.js

@@ -9,8 +9,14 @@ import NxSlatePlugin from '@jswork/next-slate-plugin';
 
 export default NxSlatePlugin.define({
   id: 'color',
+  hotkey: 'mod+c',
+  commands: {
+    activate() {
+      Editor.addMark(editor, 'color', 'red');
+    }
+  },
   serialize: {
-    input: (el, children) => {
+    input: ({ el }, children) => {
       const nodeName = el.nodeName.toLowerCase();
       if (nodeName === 'span' && el.style.color) {
         return jsx('text', { color: el.style.color }, children);

public/plugins/heading.js

@@ -16,7 +16,7 @@ const isHeading = (tag) => {
 export default NxSlatePlugin.define({
   id: 'heading',
   serialize: {
-    input: (el, children) => {
+    input: ({ el }, children) => {
       const nodeName = el.nodeName.toLowerCase();
       if (isHeading(nodeName)) {
         const num = HEADING_RE.exec(nodeName);

public/plugins/italic.js

@@ -15,7 +15,7 @@ export default NxSlatePlugin.define({
     }
   },
   serialize: {
-    input: (el, children) => {
+    input: ({ el }, children) => {
       const nodeName = el.nodeName.toLowerCase();
       if (nodeName === 'i') {
         return jsx('text', { italic: true }, children);

public/plugins/list-item.js

@@ -10,7 +10,7 @@ import NxSlatePlugin from '@jswork/next-slate-plugin';
 export default NxSlatePlugin.define({
   id: 'list-item',
   serialize: {
-    input: (el, children) => {
+    input: ({ el }, children) => {
       const nodeName = el.nodeName.toLowerCase();
       if (nodeName === 'li') {
         return jsx('element', { type: 'list-item' }, children);

public/plugins/numbered-list.js

@@ -22,7 +22,7 @@ Transforms.setNodes(editor, { type:'paragraph' })
 export default NxSlatePlugin.define({
   id: 'numbered-list',
   serialize: {
-    input: (el, children) => {
+    input: ({ el }, children) => {
       const nodeName = el.nodeName.toLowerCase();
       if (nodeName === 'ol') {
         return jsx('element', { type: 'numbered-list' }, children);

public/plugins/paragraph.js

@@ -5,22 +5,24 @@ import NxCssText from '@jswork/next-css-text';
 /**
  * @usage:
  * Transforms.setNodes(editor, { type:'blockquote' })
+ *
+ * 注意这里的 style处理，所有的 block 元素，都有可能被直接设置 style;
+ * input/output 都需要针对style写一些代码
  */
 
 export default NxSlatePlugin.define({
   id: 'paragraph',
   serialize: {
-    input: (el, children) => {
+    input: ({ el }, children) => {
       const nodeName = el.nodeName.toLowerCase();
       if (nodeName === 'p') {
         const css = el.style.cssText;
-        const style = css ? NxCssText.css2obj(css) : null;
-        return jsx('element', { type: 'paragraph', style }, children);
+        return jsx('element', { type: 'paragraph', style: NxCssText.css2obj(css) }, children);
       }
     },
     output: (node, children) => {
       const { style } = node;
-      return `<p style="${NxCssText.obj2css(style)}">${children}</p>`;
+      return `<p${style}>${children}</p>`;
     }
   },
   render: (_, { attributes, children, element }) => {

public/plugins/strikethrough.js

@@ -9,7 +9,7 @@ import NxSlatePlugin from '@jswork/next-slate-plugin';
 export default NxSlatePlugin.define({
   id: 'strikethrough',
   serialize: {
-    input: (el, children) => {
+    input: ({ el }, children) => {
       const nodeName = el.nodeName.toLowerCase();
       if (nodeName === 's') {
         return jsx('text', { strikethrough: true }, children);

public/plugins/underline.js

@@ -11,7 +11,7 @@ export default NxSlatePlugin.define({
   id: 'underline',
   type: 'format',
   serialize: {
-    input: (el, children) => {
+    input: ({ el }, children) => {
       const nodeName = el.nodeName.toLowerCase();
       if (nodeName === 'u') {
         return jsx('text', { underline: true }, children);

src/components/index.js

@@ -7,6 +7,7 @@ import { Slate, Editable, withReact } from 'slate-react';
 import nx from '@jswork/next';
 import nxCompose from '@jswork/next-compose';
 import nxDeepAssign from '@jswork/next-deep-assign';
+import nxIsEmpty from '@jswork/next-is-empty';
 import nxCompactObject from '@jswork/next-compact-object';
 import NxSlateSerialize from '@jswork/next-slate-serialize';
 import NxSlateDeserialize from '@jswork/next-slate-deserialize';
@@ -73,7 +74,7 @@ export default class ReactRteSlate extends Component {
     this.commands = {};
     this.editor = composite(createEditor());
     this.state = { value };
-    this.initialCommands();
+    this.initialSchema();
     onInit({ target: { value: this.editor } });
   }
 
@@ -105,17 +106,12 @@ export default class ReactRteSlate extends Component {
   }
 
   /**
-   * @schema: commands
+   * @schema:(commands/events)
    */
-  initialCommands() {
+  initialSchema() {
     const { plugins } = this.props;
-    plugins.forEach((plugin) => {
-      const { id } = plugin;
-      this.commands[id] = nx.mix(
-        NxSlateDefaults.commands(this, plugin),
-        plugin.commands
-      );
-    });
+    NxSlateDefaults.commands(this, plugins);
+    NxSlateDefaults.events(this, plugins);
   }
 
   /**
@@ -125,20 +121,13 @@ export default class ReactRteSlate extends Component {
   renderElement = (inProps) => {
     const { element, children, attributes } = inProps;
     const plugin = this.getActivePlugin(element);
-    const style = NxCssText.css2obj(
-      nx.get(attributes, 'ref.current.style.cssText')
+    const style = NxCssText.css2obj(nx.get(attributes, 'ref.current.style.cssText'));
+    const attrs = nx.mix(
+      null,
+      attributes,
+      nxCompactObject({ style: nx.mix(style, element.style) }, nxIsEmpty)
     );
-    const props = {
-      element,
-      children,
-      attributes: nx.mix(
-        null,
-        attributes,
-        nxCompactObject({
-          style: nx.mix(style, element.style)
-        })
-      )
-    };
+    const props = { element, children, attributes: attrs };
     return plugin.render(this, props);
   };
 
@@ -166,9 +155,11 @@ export default class ReactRteSlate extends Component {
     const { plugins } = this.props;
     const handlers = plugins.map((plugin) => plugin.serialize.input);
     const process = (node, children) => {
-      const handler = handlers.find((fn) => fn(node, children));
+      const style = NxSlateDefaults.style(node.style.cssText);
+      const args = [{ el: node, style }, children];
+      const handler = handlers.find((fn) => fn.apply(null, args));
       const input = handler || NxSlateDefaults.importer;
-      return input(node, children);
+      return input.apply(null, args);
     };
     return NxSlateDeserialize.parse(inValue, { process });
   }
@@ -190,7 +181,10 @@ export default class ReactRteSlate extends Component {
           }, el);
           return target.outerHTML;
         }
-        return actived.serialize.output(node, children);
+        return actived.serialize.output(
+          { ...node, style: NxSlateDefaults.style(node.style) },
+          children
+        );
       }
     });
   };
@@ -205,16 +199,9 @@ export default class ReactRteSlate extends Component {
   };
 
   handleKeyDown = (inEvent) => {
-    // todo: refactor
     const { plugins } = this.props;
     plugins.forEach((plugin) => {
       plugin.events.keydown(this, inEvent);
-      if (plugin.events.keydown === nx.noop && plugin.hotkey) {
-        const cmd = this.commands[plugin.id];
-        if (cmd.isHotkey(inEvent)) {
-          cmd.toggle(true);
-        }
-      }
     });
   };
 
@@ -231,13 +218,8 @@ export default class ReactRteSlate extends Component {
     } = this.props;
 
     return (
-      <section
-        data-component={CLASS_NAME}
-        className={classNames(CLASS_NAME, className)}>
-        <Slate
-          editor={this.editor}
-          value={this.state.value}
-          onChange={this.handleChange}>
+      <section data-component={CLASS_NAME} className={classNames(CLASS_NAME, className)}>
+        <Slate editor={this.editor} value={this.state.value} onChange={this.handleChange}>
           <Editable
             placeholder={placeholder}
             renderLeaf={this.renderLeaf}