feat: add issue

build/TEMPLATE.md

@@ -44,6 +44,10 @@ __GENERATE_DAPP__
 - [ ] shift+enter 强行插入新行
 - [ ] 将一个block 分成两个block
 - [ ] 删除的时候，只剩下一个 li 标签，比较奇怪。
+- [ ] 如何在不同的标签上添加 style，text-align: left/right/center 类似对齐功能的完美实现
+
+## resources
+- https://stackoverflow.com/questions/65288303/in-slate-styling-an-element-without-changing-his-type
 
 ## license
 Code released under [the MIT license](https://github.com/afeiship/react-rte-slate/blob/master/LICENSE.txt).

public/index.js

@@ -1,6 +1,7 @@
 import ReactDemokit from '@jswork/react-demokit';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Node } from 'slate';
 import ReactRteSlate from '../src/main';
 import { Toolbar, ButtonGroup, Button } from '@jswork/react-rte-ui';
 import Bold from './plugins/bold';
@@ -21,6 +22,8 @@ import ForceLayout from './plugins/force-layout';
 import BetterDelete from './plugins/better-delete';
 import ExtEditor from './plugins/ext-editor';
 import './assets/style.scss';
+import { Transforms } from 'slate';
+import { ReactEditor } from 'slate-react';
 
 class App extends React.Component {
   get headerView() {
@@ -53,7 +56,31 @@ class App extends React.Component {
   }
 
   handleClick1 = (e) => {
-    this.setState({ value: '<p>Are you ok?</p>' });
+    console.log(editor.children);
+    var key = ReactEditor.findKey(editor, {
+      type: 'paragraph',
+      children: [
+        {
+          text: 'Are you ok?'
+        }
+      ]
+    });
+    var path = ReactEditor.findPath(
+      editor,
+      Node({
+        type: 'paragraph',
+        children: [
+          {
+            text: 'Are you ok?'
+          }
+        ]
+      })
+    );
+    console.log(key,path);
+    // Transforms.select(editor, [0,0]);
+    // ReactEditor.deselect(editor);
+    // ReactEditor.focus(editor);
+    // this.setState({ value: '<p>Are you ok?</p>' });
   };
 
   render() {
@@ -82,7 +109,7 @@ class App extends React.Component {
             BulletedList,
             ListItem,
             // PasteHtml,
-            ForceLayout,
+            // ForceLayout,
             BetterDelete,
             ExtEditor
           ]}

public/plugins/alignment.js

@@ -1,6 +1,13 @@
 import React from 'react';
+import { Path, Node } from 'slate';
 import { jsx } from 'slate-hyperscript';
-
+import {
+  Slate,
+  Editable,
+  withReact,
+  DefaultElement,
+  ReactEditor
+} from 'slate-react';
 /**
  * @usage:
  * Transforms.setNodes(editor, { type:'alignment', value: 'right'});
@@ -21,8 +28,11 @@ export default {
     return `<div style="text-align: ${node.value}">${children}</div>`;
   },
   hooks: {
-    element: (_, { attributes, children, element }) => {
+    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}

src/components/index.js

@@ -7,7 +7,13 @@ import nxCompose from '@jswork/next-compose';
 import NxSlateSerialize from '@jswork/next-slate-serialize';
 import NxDeslateSerialize from '@jswork/next-slate-deserialize';
 import NxSlateDefaults from '@jswork/next-slate-defaults';
-import { Slate, Editable, withReact, DefaultElement } from 'slate-react';
+import {
+  Slate,
+  Editable,
+  withReact,
+  DefaultElement,
+  ReactEditor
+} from 'slate-react';
 import isHotkey from 'is-hotkey';
 
 const CLASS_NAME = 'react-rte-slate';
@@ -97,6 +103,7 @@ export default class ReactRteSlate extends Component {
 
     window.editor = this.editor;
     window.Editor = Editor;
+    window.ReactEditor = ReactEditor;
     window.Transforms = Transforms;
   }