adding listitem convertion

apps/notes/src/Editor.css

@@ -22,11 +22,26 @@
   /* padding: 0 10px; */
   border: 1px dashed #777;
   border-radius: 4px;
+  display: flex;
+  flex-direction: column;
 }
 
 
+.toolbar {
+  flex-grow: 0;
+  padding: 5px;
+  border-bottom: 1px solid #777;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 5px;
+}
+
+
+
 .editable {
-  height: 100%;
+  /* height: 100%; */
+  flex-grow: 1;
   overflow-y: scroll;
 }
 

apps/notes/src/SlateCommands.js

@@ -23,6 +23,22 @@ const toggleBold = (editor) => {
 
 // TODO 需要分清转换之前是什么类型，转换为什么类型，目标类型是否支持保留样式
 
+
+
+// const commonConvert = (editor, dropMarks=false) => {
+//   if (dropMarks) {
+//     Editor.removeMark(editor, 'bold');
+//     Editor.removeMark(editor, 'italic');
+//     Editor.removeMark(editor, 'strikeout');
+//   }
+
+//   Transforms.setNodes(editor, {
+//     type:
+//   })
+// };
+
+
+
 // 将文本包一层 codeblock，原来的 block 变成 codeline，去掉样式
 const toCodeBlock = (editor) => {
   Transforms.wrapNodes(editor, { type: 'codeblock', lang: 'py' }, {
@@ -66,11 +82,28 @@ const toggleCode = (editor) => {
 };
 
 
+const LINE_TYPES = [
+  'paragraph', 'codeline', 'listline'
+];
+
+
+// 将正文转换为列表
+// 如果选中部分包含几行 codeline，需要把这些 codeline 从 codeblock 里移除
+const toListBlock = (editor) => {
+  Transforms.setNodes(editor, { type: 'listline' }, {
+    match: n => Element.isElement(n) && (LINE_TYPES.indexOf(n.type) !== -1),
+  });
+  Transforms.wrapNodes(editor, { type: 'listblock' }, {
+    match: n => Element.isElement(n) && n.type === 'listline',
+  });
+};
+
+
 
 
 
 
 export {
   toggleBold,
-  toCodeBlock, toParagraph, toggleCode,
+  toCodeBlock, toParagraph, toggleCode, toListBlock,
 };

apps/notes/src/SlateEdit.js

@@ -2,7 +2,7 @@
 
 import { createEditor, Editor } from 'slate';
 import { withHistory } from 'slate-history';
-import { Slate, Editable, withReact } from 'slate-react';
+import { Slate, Editable, withReact, useSlate } from 'slate-react';
 import { useCallback, useMemo } from 'react';
 
 import { SlateCodeBlock, SlateCodeLine } from './elements/SlateCode';
@@ -46,10 +46,22 @@ const renderLeaf = props => <span {...props.attributes} style={{
 }}>{props.children}</span>;
 
 
+// 工具条
+const ToolBar = () => {
+  const editor = useSlate();
+
+  return <div className="toolbar">
+    <button onClick={() => cmd.toParagraph(editor)}>para</button>
+    <button onClick={() => cmd.toCodeBlock(editor)}>code</button>
+    <button onClick={() => cmd.toListBlock(editor)}>list</button>
+  </div>;
+};
+
+
 // 核心编辑器
 const SlateEdit = () => {
-  // const editor = useMemo(() => withHistory(withReact(createEditor())), []);
-  const editor = useMemo(() => withReact(createEditor()), []);
+  const editor = useMemo(() => withHistory(withReact(createEditor())), []);
+  // const editor = useMemo(() => withReact(createEditor()), []);
 
   const initialValue = useMemo(() => {
     const content = localStorage.getItem('content');
@@ -106,7 +118,8 @@ const SlateEdit = () => {
 
   return <Slate editor={editor} initialValue={initialValue} onChange={handleChange}>
     <div className="fullscreen">
-      <Editable style={{ height: '100%' }}
+      <ToolBar />
+      <Editable className="editable"
         renderElement={renderElement}
         renderLeaf={renderLeaf}
         onKeyDown={handleKeyDown} />