fix: middle dash prop

build/TEMPLATE.md

@@ -35,6 +35,15 @@ __GENERATE_DAPP__
 ## documentation
 - https://afeiship.github.io/react-rte-slate/
 
+## plugins
+- [x] slate-plugin-default
+- [x] slate-plugin-bold
+- [x] slate-plugin-underline
+- [x] slate-plugin-color
+- [x] slate-plugin-italic
+- [x] slate-plugin-code
+- [x] slate-plugin-strikethrough
+
 ## todo list
 - [ ] 最后 export 的html里可能会有一个多余的空的 span 标签
 - [ ] paste html 如果<p><blockquote>xxx</p> 会无法成功

public/plugins/background-color.js

@@ -4,27 +4,27 @@ import NxSlatePlugin from '@jswork/next-slate-plugin';
 
 /**
  * @usage:
- * Editor.addMark(editor,'backgroundColor', 'lightgreen');
+ * Editor.addMark(editor,'background-color', 'lightgreen');
  */
 
 export default NxSlatePlugin.define({
-  id: 'backgroundColor',
+  id: 'background-color',
   serialize: {
     input: ({ el }, children) => {
       const nodeName = el.nodeName.toLowerCase();
       if (nodeName === 'span' && el.style.backgroundColor) {
         return jsx('text', { backgroundColor: el.style.backgroundColor }, children);
       }
     },
-    output: ({ el }, node) => {
-      el.style.backgroundColor = node.backgroundColor;
+    output: (node, children) => {
+      const el = node.el;
+      el.style.backgroundColor = node['background-color'];
       return el;
     }
   },
   render: (_, { attributes, children, leaf }) => {
-    const { backgroundColor } = leaf;
     return (
-      <span style={{ backgroundColor }} {...attributes}>
+      <span style={{ backgroundColor: leaf['background-color'] }} {...attributes}>
         {children}
       </span>
     );

public/plugins/list-item.js

@@ -16,8 +16,8 @@ export default NxSlatePlugin.define({
         return jsx('element', { type: 'list-item' }, children);
       }
     },
-    output: (node, children) => {
-      return `<li>${children}</li>`;
+    output: ({ style }, children) => {
+      return `<li${style}>${children}</li>`;
     }
   },
   render: (_, { attributes, children, element }) => {