feat: udpate

build/TEMPLATE.md

@@ -39,6 +39,11 @@ __GENERATE_DAPP__
 - [ ] 最后 export 的html里可能会有一个多余的空的 span 标签
 - [ ] paste html 如果<p><blockquote>xxx</p> 会无法成功
 - [ ] mark/block 元素的 exporter 参数暂时不统一
+- [ ] 清空文档
+- [ ] 最近2个为空，即插入一个新行
+- [ ] shift+enter 强行插入新行
+- [ ] 将一个block 分成两个block
+- [ ] 删除的时候，只剩下一个 li 标签，比较奇怪。
 
 ## license
 Code released under [the MIT license](https://github.com/afeiship/react-rte-slate/blob/master/LICENSE.txt).

public/index.js

@@ -17,6 +17,9 @@ import BulletedList from './plugins/bulleted-list';
 import NumberedList from './plugins/numbered-list';
 import ListItem from './plugins/list-item';
 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 './assets/style.scss';
 
 class App extends React.Component {
@@ -78,12 +81,15 @@ class App extends React.Component {
             NumberedList,
             BulletedList,
             ListItem,
-            // PasteHtml
+            // PasteHtml,
+            ForceLayout,
+            BetterDelete,
+            ExtEditor
           ]}
           value={this.state.value}
           onChange={(e) => {
             this.setState({ value: e.target.value });
-            console.log('html:', e.target.value);
+            // console.log('html:', e.target.value);
           }}
           className="mb-5"
         />

public/plugins/better-delete.js

@@ -0,0 +1,33 @@
+import { createEditor, Editor, Text, Transforms } from 'slate';
+import { Path } from 'slate';
+import { useSelected, ReactEditor, useSlate } from 'slate-react';
+
+export default {
+  name: 'better-delete',
+  decorator: (editor) => {
+    const { deleteBackward } = editor;
+    editor.deleteBackward = (...args) => {
+      // console.log('args:', args);
+      deleteBackward(...args);
+
+
+      // const match = Editor.above(editor, {
+      //   match: (n) => ['list-item', 'blockquote'].includes(n.type)
+      // });
+
+      // if (match) {
+      //   console.log('match...', match);
+      //   const [node, at] = match;
+      //   if (Editor.isEmpty(editor, node)) {
+      //   }else{
+      //     deleteBackward(...args);
+      //   }
+      //   console.log(node, at, Editor.isEmpty(editor, node));
+      //   // if(node.children)
+      //   // quick fix for list item
+      //   // Transforms.setNodes(editor, { type: 'paragraph' });
+      // }
+    };
+    return editor;
+  }
+};

public/plugins/clean-content.js

@@ -0,0 +1,8 @@
+export default {
+  name: 'clean-content',
+  statics: {
+    empty: () => {
+      console.log('empty to document');
+    }
+  }
+};

public/plugins/ext-editor.js

@@ -0,0 +1,10 @@
+/**
+Statics: 这个key 订是扩展 Editor 的方法
+其实也可以直接 Object.assign(Editor, { 这样的方式去扩展 })
+ */
+export default {
+  name: 'ext-editor',
+  statics: {
+    version: '1.0.0'
+  }
+};

public/plugins/force-layout.js

@@ -3,9 +3,43 @@
 const paragraph = { type: 'paragraph', children: [{ text: '' }] }
 Transforms.insertNodes(editor, paragraph)
 */
+import { createEditor, Editor, Text, Transforms } from 'slate';
+import { Path,Node } from 'slate';
+import { useSelected, ReactEditor, useSlate } from 'slate-react';
+
 export default {
   name: 'force-layout',
   decorator: (editor) => {
+    const { normalizeNode } = editor;
+    editor.normalizeNode = ([node, path]) => {
+      // const path1 = ReactEditor.findPath(editor, node);
+      // console.log(path, path1);
+      console.log(node, path);
+
+      if (path.length > 2) {
+        // Editor.previous
+        // const nextPath = Path.next(path);
+
+        // console.log(Node.get(node, nextPath));
+        // const previous = Editor.above(editor);
+        // const el = previous[0];
+        // console.log(el);
+
+        // if(!node.text) {
+        //   console.log('tow emtny');
+        // }
+        // const previousNode = Editor
+        // console.log(node, path, previousPath);
+      }
+      // console.log(node, Editor.previous(editor, { at: Path.previous(path) }));
+      // if (path.length === 0) {
+      //   if (editor.children.length < 2) {
+      //     const paragraph = { type: 'paragraph', children: [{ text: '' }] };
+      //     Transforms.insertNodes(editor, paragraph);
+      //   }
+      // }
+      return normalizeNode([node, path]);
+    };
     return editor;
   }
 };

src/components/index.js

@@ -86,9 +86,12 @@ export default class ReactRteSlate extends Component {
     const { onInit } = inProps;
     const html = inProps.value;
     const composite = this.withDecorators;
+    // 注意这个应该放在比较前面
+    this.initialStatics();
     const value = this.handleSerialize('importer', html);
     this.editor = composite(createEditor());
-    this.editor.context = this;
+    // JSON.string
+    // this.editor.context = this;
     this.state = { value };
     onInit({ target: { value: this.editor } });
 
@@ -97,6 +100,12 @@ export default class ReactRteSlate extends Component {
     window.Transforms = Transforms;
   }
 
+  initialStatics() {
+    const { plugins } = this.props;
+    const members = plugins.map((plugin) => plugin.statics).filter(Boolean);
+    Object.assign(Editor, ...members);
+  }
+
   shouldComponentUpdate(inProps) {
     const html = inProps.value;
     const value = this.handleExporter(this.state.value);