feat: new alignment

public/index.js

@@ -21,6 +21,7 @@ import PasteHtml from './plugins/paste-html';
 import ForceLayout from './plugins/force-layout';
 import BetterDelete from './plugins/better-delete';
 import ExtEditor from './plugins/ext-editor';
+import Paragraph from './plugins/paragraph';
 import './assets/style.scss';
 import { Transforms } from 'slate';
 import { ReactEditor } from 'slate-react';
@@ -98,7 +99,8 @@ class App extends React.Component {
             // PasteHtml,
             // ForceLayout,
             BetterDelete,
-            ExtEditor
+            ExtEditor,
+            Paragraph
           ]}
           value={this.state.value}
           onChange={(e) => {

public/plugins/alignment.js

@@ -10,7 +10,7 @@ import {
 } from 'slate-react';
 /**
  * @usage:
- Transforms.setNodes(editor, { alignment: 'right'});
+ Transforms.setNodes(editor, { style: { textAlign: 'right' } });
  *
  * <div style="text-align:center">
  *  <p>xxx</p>
@@ -19,25 +19,5 @@ import {
 
 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: (inContext, { attributes, children, element }) => {
-      const { value } = element;
-      const path = ReactEditor.findPath(inContext.editor, element);
-
-      // console.log( Node.get(Path.parent(path), path));
-      return (
-        <div style={{ textAlign: value }} {...attributes}>
-          {children}
-        </div>
-      );
-    }
-  }
+  // 这个不能直接这么实现。
 };

public/plugins/paragraph.js

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

src/components/index.js

@@ -124,11 +124,16 @@ export default class ReactRteSlate extends Component {
   }
 
   renderElement = (inProps) => {
-    const { element } = inProps;
+    const { element, children, attributes } = 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);
+    const newProps = {
+      element,
+      children,
+      attributes: { ...attributes, style: element.style }
+    };
+    // if (!plugin) return <DefaultElement {...newProps} />;
+    return plugin.hooks.element(this, newProps);
   };
 
   renderLeaf = (inProps) => {