@mind-kit/outline-editor NPM

@mind-kit/outlineEditor

大纲编辑器。

react 技术栈。类似于幕布，workflowy，roamResearch，roamEdit等大纲类笔记所用。

如何运行

运行一个例子。git clone 并 npm start。

使用组件 -

 import { EditableTree } from "./EditableTree";
 import { data } from "./data";
 function App() {
     return <EditableTree treeData={data} 
         onDataChange={data=>console.log(data)}
     />;
 }

TODO 🏃，作为Component发布。进一步设计封装好props、event，做好storybook之类的东西。

如何工作

节点内容（待编辑内容）以treeData属性传入。
节点内容借助react-sorted-tree展现。
当树节点获得焦点时，转换到可编辑状态，节点内容可以编辑，变化以onDataChange事件传出。
TODO 🏃，当退出可编辑状态，特殊含义的文字转换为可操作的交互元素，比如链接，使editor可以直接用于相应交互操作。

操作说明

键盘操作

键盘操作	编辑中状态	未在编辑中
上、下方向	变化选中的节点，本节点退出编辑状态，编辑生效	变化选中的节点
空格	输入空格符	进入编辑中状态
esc	退出编辑状态，编辑生效
enter	退出编辑状态，编辑生效。生成新节点，位于本节点之下，同本节点同级。	生成新节点，位于本节点之下，同本节点同级。
tab、shift+tab	变化本节点的级别，tab为缩进，即级别+1。shift+tab为反缩进，级别-1。	变化本节点的级别，tab为缩进，即级别+1。shift+tab为反缩进，级别-1。

鼠标操作

鼠标操作	编辑中状态	未在编辑中
点击节点中部，文字部分		选中点击的节点，并进入编辑状态。
点击节点右端	退出编辑状态，编辑生效。	选中点击的节点。
拖动左侧圆点	退出编辑状态，编辑生效，拖动节点移动。	拖动节点移动。

参考

props
treeData		TreeNode[] 必须，待编辑的初始内容。一级节点的数组。
	TreeNode.id	string，必须，节点id，需要唯一。
	TreeNode.text	string，必须，节点文本，用于被编辑，和展示。
	TreeNode.children	TreeNode[]，可选，节点的子节点。
	TreeNode.expanded	boolean，可选，初始时节点是否展开。
onDataChange		(TreeNode[])=>void，事件监听，当内容变动时触发。

使用到的技术

react-sort-tree https://github.com/frontend-collective/react-sortable-tree
react-contenteditabl https://github.com/lovasoa/react-contenteditable 由于一个中文输入法相关的bug，已强改，暂未单独开源。见 ./src/ContentEditable.ts

路线图/需要帮助

展现为可交互。当退出可编辑状态，特殊含义的文字转换为可操作的交互元素，比如链接，使editor可以直接用于相应交互操作。
多行或者说变高度的node没有考虑。
嵌入网页等复杂内容。
需要大量测试和debug。目前测试很有限。
storybook之类的封装。
contentediable部分可以进一步封装为一个组件。