feat: background

public/index.js

@@ -10,6 +10,8 @@ import Strikethrough from './plugins/strikethrough';
 import Code from './plugins/code';
 import Heading from './plugins/heading';
 import Blockquote from './plugins/blockquote';
+import Color from './plugins/color';
+import BackgroundColor from './plugins/background-color';
 import './assets/style.scss';
 
 class App extends React.Component {
@@ -61,7 +63,9 @@ class App extends React.Component {
             Strikethrough,
             Code,
             Heading,
-            Blockquote
+            Blockquote,
+            Color,
+            BackgroundColor
           ]}
           value={this.state.value}
           onChange={(e) => {

public/plugins/background-color.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { jsx } from 'slate-hyperscript';
+
+/**
+ * @usage:
+ * Editor.addMark(editor,'backgroundColor', 'lightgreen');
+ */
+
+export default {
+  name: 'backgroundColor',
+  importer: (el, children) => {
+    const nodeName = el.nodeName.toLowerCase();
+    if (nodeName === 'span' && el.style.backgroundColor) {
+      return jsx(
+        'text',
+        { backgroundColor: el.style.backgroundColor },
+        children
+      );
+    }
+  },
+  exporter: (el, node) => {
+    el.style.backgroundColor = node.backgroundColor;
+    return el;
+  },
+  hooks: {
+    leaf: (_, { attributes, children, leaf }) => {
+      const { backgroundColor } = leaf;
+      return (
+        <span style={{ backgroundColor }} {...attributes}>
+          {children}
+        </span>
+      );
+    }
+  }
+};

public/plugins/color.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { jsx } from 'slate-hyperscript';
+
+/**
+ * @usage:
+ * Editor.addMark(editor,'color', '#f00')
+ */
+
+export default {
+  name: 'color',
+  importer: (el, children) => {
+    const nodeName = el.nodeName.toLowerCase();
+    if (nodeName === 'span' && el.style.color) {
+      return jsx('text', { color: el.style.color }, children);
+    }
+  },
+  exporter: (el, node) => {
+    el.style.color = node.color;
+    return el;
+  },
+  hooks: {
+    leaf: (_, { attributes, children, leaf }) => {
+      const { color } = leaf;
+      return (
+        <span style={{ color }} {...attributes}>
+          {children}
+        </span>
+      );
+    }
+  }
+};

src/components/index.js

@@ -163,9 +163,11 @@ export default class ReactRteSlate extends Component {
           el.innerText = node.text;
           const target = activePlugins.reduce((el, mark) => {
             const { exporter, name } = mark;
-            return node[name] && exporter(el);
+            return node[name] && exporter && exporter(el, node);
           }, el);
-          return target.outerHTML;
+          return target
+            ? target.outerHTML
+            : NxSlateDefaults.exporter(node, children);
         } else {
           // element
           const { plugins } = this.props;