fix: target el update

public/index.js

@@ -5,6 +5,8 @@ import ReactRteSlate from '../src/main';
 import { Toolbar, ButtonGroup, Button } from '@jswork/react-rte-ui';
 import Bold from './plugins/bold';
 import Italic from './plugins/italic';
+import Underline from './plugins/underline';
+import Strikethrough from './plugins/strikethrough';
 import './assets/style.scss';
 
 class App extends React.Component {
@@ -49,7 +51,7 @@ class App extends React.Component {
         <ReactRteSlate
           placeholder="type your text."
           header={this.headerView}
-          plugins={[Bold, Italic]}
+          plugins={[Bold, Italic, Underline, Strikethrough]}
           value={this.state.value}
           onChange={(e) => {
             this.setState({ value: e.target.value });

public/plugins/strikethrough.js

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

public/plugins/underline.js

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

src/components/index.js

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