feat: alignment

public/index.js

@@ -11,6 +11,7 @@ import Code from './plugins/code';
 import Heading from './plugins/heading';
 import Blockquote from './plugins/blockquote';
 import Color from './plugins/color';
+import Alignment from './plugins/alignment';
 import BackgroundColor from './plugins/background-color';
 import './assets/style.scss';
 
@@ -65,6 +66,7 @@ class App extends React.Component {
             Heading,
             Blockquote,
             Color,
+            Alignment,
             BackgroundColor
           ]}
           value={this.state.value}

public/plugins/alignment.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { jsx } from 'slate-hyperscript';
+
+/**
+ * @usage:
+ * Transforms.setNodes(editor, { type:'alignment', value: 'right'});
+ *
+ * <div style="text-align:center">
+ *  <p>xxx</p>
+ * </div>
+ */
+
+export default {
+  name: 'alignment',
+  importer: (el, children) => {
+    if (el.style.textAlign) {
+      return jsx('element', { textAlign: el.style.textAlign }, children);
+    }
+  },
+  exporter: (node, children) => {
+    return `<div style="text-align: ${node.value}">${children}</div>`;
+  },
+  hooks: {
+    element: (_, { attributes, children, element }) => {
+      const { value } = element;
+      return (
+        <div style={{ textAlign: value }} {...attributes}>
+          {children}
+        </div>
+      );
+    }
+  }
+};