feat: block support

public/assets/style.scss

@@ -11,5 +11,20 @@
     width: 60%;
     max-width: 600px;
     margin: 0 auto;
+    h1,
+    h2,
+    h3 {
+      font-weight: bold;
+    }
+
+    h1 {
+      font-size: 18px;
+    }
+    h2 {
+      font-size: 16px;
+    }
+    h3 {
+      font-size: 14px;
+    }
   }
 }

public/index.js

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

public/plugins/bold.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import { jsx } from 'slate-hyperscript';
 
+/**
+ * @usage:
+ * Editor.addMark(editor,'bold', true)
+ */
+
 export default {
   name: 'bold',
   importer: (el, children) => {

public/plugins/code.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import { jsx } from 'slate-hyperscript';
 
+/**
+ * @usage:
+ * Editor.addMark(editor,'code', true)
+ */
+
 export default {
   name: 'code',
   importer: (el, children) => {

public/plugins/heading.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { jsx } from 'slate-hyperscript';
+
+/**
+ * @usage:
+ * Transforms.setNodes(editor, { type:'heading', value: 1})
+ */
+
+const HEADING_RE = /h([1-6])$/;
+
+const isHeading = (tag) => {
+  return HEADING_RE.test(tag);
+};
+
+export default {
+  name: 'heading',
+  importer: (el, children) => {
+    const nodeName = el.nodeName.toLowerCase();
+    if (isHeading(nodeName)) {
+      const num = HEADING_RE.exec(nodeName);
+      return jsx('element', { type: 'heading', value: num }, children);
+    }
+  },
+  exporter: (node, children) => {
+    const { type, value } = node;
+    return `<h${value}>${children}</h${value}>`;
+  },
+  hooks: {
+    element: (_, { attributes, children, element }) => {
+      if (element.type === 'heading') {
+        return React.createElement(`h${element.value}`, null, children);
+      }
+    }
+  }
+};

public/plugins/italic.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import { jsx } from 'slate-hyperscript';
 
+/**
+ * @usage:
+ * Editor.addMark(editor,'italic', true)
+ */
+
+
 export default {
   name: 'italic',
   importer: (el, children) => {

public/plugins/strikethrough.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import { jsx } from 'slate-hyperscript';
 
+/**
+ * @usage:
+ * Editor.addMark(editor,'strikethrough', true)
+ */
+
 export default {
   name: 'strikethrough',
   importer: (el, children) => {

public/plugins/underline.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import { jsx } from 'slate-hyperscript';
 
+/**
+ * @usage:
+ * Editor.addMark(editor,'underline', true)
+ */
+
 export default {
   name: 'underline',
   importer: (el, children) => {

src/components/index.js

@@ -2,7 +2,7 @@ import noop from '@jswork/noop';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { createEditor, Editor, Text } from 'slate';
+import { createEditor, Editor, Text, Transforms } from 'slate';
 import nxCompose from '@jswork/next-compose';
 import NxSlateSerialize from '@jswork/next-slate-serialize';
 import NxDeslateSerialize from '@jswork/next-slate-deserialize';
@@ -86,6 +86,7 @@ export default class ReactRteSlate extends Component {
 
     window.editor = this.editor;
     window.Editor = Editor;
+    window.Transforms = Transforms;
   }
 
   shouldComponentUpdate(inProps) {
@@ -165,8 +166,14 @@ export default class ReactRteSlate extends Component {
             return node[name] && exporter(el);
           }, el);
           return target.outerHTML;
+        } else {
+          // element
+          const { plugins } = this.props;
+          const target = plugins.find((plugin) => plugin.name === node.type);
+          return target
+            ? target.exporter(node, children)
+            : NxSlateDefaults.exporter(node, children);
         }
-        return NxSlateDefaults.exporter(node, children);
       }
     });
   };