feat: add code plugin

public/index.js

@@ -7,6 +7,7 @@ import Bold from './plugins/bold';
 import Italic from './plugins/italic';
 import Underline from './plugins/underline';
 import Strikethrough from './plugins/strikethrough';
+import Code from './plugins/code';
 import './assets/style.scss';
 
 class App extends React.Component {
@@ -51,7 +52,7 @@ class App extends React.Component {
         <ReactRteSlate
           placeholder="type your text."
           header={this.headerView}
-          plugins={[Bold, Italic, Underline, Strikethrough]}
+          plugins={[Bold, Italic, Underline, Strikethrough, Code]}
           value={this.state.value}
           onChange={(e) => {
             this.setState({ value: e.target.value });

public/plugins/code.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { jsx } from 'slate-hyperscript';
+
+export default {
+  name: 'code',
+  importer: (el, children) => {
+    const nodeName = el.nodeName.toLowerCase();
+    if (nodeName === 'code') {
+      return jsx('text', { code: true }, children);
+    }
+  },
+  exporter: (el) => {
+    const code = document.createElement('code');
+    code.appendChild(el);
+    return code;
+  },
+  hooks: {
+    leaf: (_, { attributes, children, leaf }) => {
+      return <code {...attributes}>{children}</code>;
+    }
+  }
+};

public/plugins/strikethrough.js

@@ -5,7 +5,7 @@ export default {
   name: 'strikethrough',
   importer: (el, children) => {
     const nodeName = el.nodeName.toLowerCase();
-    if (nodeName === 'span' && el.style.textDecoration === 'line-through') {
+    if (nodeName === 's') {
       return jsx('text', { strikethrough: true }, children);
     }
   },

public/plugins/underline.js

@@ -5,7 +5,7 @@ export default {
   name: 'underline',
   importer: (el, children) => {
     const nodeName = el.nodeName.toLowerCase();
-    if (nodeName === 'span' && el.style.textDecoration === 'underline') {
+    if (nodeName === 'u') {
       return jsx('text', { underline: true }, children);
     }
   },

src/components/index.js

@@ -158,7 +158,7 @@ export default class ReactRteSlate extends Component {
         if (!children) {
           // pure text:
           if (!activePlugins.length) return node.text;
-          const el = document.createElement('span'); /** props: serialze:{ tag:'span' } */
+          const el = document.createElement('span');
           el.innerText = node.text;
           const target = activePlugins.reduce((el, mark) => {
             const { exporter, name } = mark;