feat: block quote

package.json

@@ -85,7 +85,7 @@
   },
   "dependencies": {
     "@jswork/next-compose": "^1.0.0",
-    "@jswork/next-slate-defaults": "^1.0.0",
+    "@jswork/next-slate-defaults": "^1.0.1",
     "@jswork/next-slate-deserialize": "^1.0.7",
     "@jswork/next-slate-serialize": "^1.0.6",
     "@jswork/noop": "^1.0.0",

public/assets/style.scss

@@ -26,5 +26,11 @@
     h3 {
       font-size: 14px;
     }
+
+    blockquote{
+      border-left: 3px solid #ccc;
+      padding: 10px;
+      background: #eee;
+    }
   }
 }

public/index.js

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

public/plugins/blockquote.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { jsx } from 'slate-hyperscript';
+
+/**
+ * @usage:
+ * Transforms.setNodes(editor, { type:'blockquote' })
+ */
+
+export default {
+  name: 'blockquote',
+  importer: (el, children) => {
+    const nodeName = el.nodeName.toLowerCase();
+    if (nodeName === 'blockquote') {
+      return jsx('element', { type: 'blockquote' }, children);
+    }
+  },
+  exporter: (node, children) => {
+    return `<blockquote>${children}</blockquote>`;
+  },
+  hooks: {
+    element: (_, { attributes, children, element }) => {
+      return <blockquote {...attributes}>{children}</blockquote>;
+    }
+  }
+};

public/plugins/heading.js

@@ -27,9 +27,7 @@ export default {
   },
   hooks: {
     element: (_, { attributes, children, element }) => {
-      if (element.type === 'heading') {
-        return React.createElement(`h${element.value}`, null, children);
-      }
+      return React.createElement(`h${element.value}`, attributes, children);
     }
   }
 };

src/components/index.js

@@ -99,11 +99,11 @@ export default class ReactRteSlate extends Component {
   }
 
   renderElement = (inProps) => {
-    const handlers = this.hooks
-      .map((item) => item.hooks.element)
-      .filter(Boolean);
-    const handler = handlers.find((fn) => fn(this, inProps));
-    return handler ? handler(this, inProps) : <DefaultElement {...inProps} />;
+    const { element } = inProps;
+    const { plugins } = this.props;
+    const plugin = plugins.find((plg) => plg.name === element.type);
+    if (!plugin) return <DefaultElement {...inProps} />;
+    return plugin.hooks.element(this, inProps);
   };
 
   renderLeaf = (inProps) => {