Update develop.tid

src/slate-write/develop.tid

@@ -11,17 +11,18 @@ type: text/vnd.tiddlywiki
 # Transform AST to Slate JSON using transformers in src/transform, see `src/transform/README.md` for details. This also transform Slate JSON back to the wikiast and then serialize to wikitext.
 ## we add some type of wikiast to [[tw5-typed|https://github.com/tiddly-gittly/TW5-Typed]], based on the real json output of `$tw.wiki.parseText('text/vnd.tiddlywiki', input).tree`
 ## This is imported in editor by `import { deserialize, serialize } from '../../src/transform/serialize';`, and those serialize and deserialize functions uses things in the `src/transform`
-## All supported wikitext syntax are tested in the `test` folder, and the tests are run with `npm run test`, you should also add test if you are adding new transformers for new syntax.
-# handle keyboard shortcut and basic elements' rendering using slatejs plugins from [[Udecode's Plate framework|https://plate.udecode.io]].
-## our custom keyboard shortcuts are configured in `src/config/autoformat`
+## All supported wikitext syntax are tested in the `test` folder of [[wikiast|https://github.com/tiddly-gittly/wikiast]], and the tests are run with `npm run test` on that repo, you should also add test if you are adding new transformers for new syntax in that repo.
+# handle keyboard shortcut and basic elements' rendering using slatejs plugins from [[Udecode's Plate framework|https://platejs.org/]].
+## Code in `src/slate-write/editor/components/plate-ui` are generated by plate cli, see `src/slate-write/editor/components/plate-ui/Readme.md` for details
+## our custom keyboard shortcuts are configured in `src/editor/config/autoformat`
 ## re-support `/` menu in [[Gk0Wk/TW5-CodeMirror-Enhanced|https://github.com/Gk0Wk/TW5-CodeMirror-Enhanced]] to add snippets and advanced elements like table and widget and any wikitext source code
-### `/` menu component is at `src/editor/components/SnippetCombobox.tsx`, and snippets are loaded in `src/editor/config/snippets.ts`
-# There will be a floating toolbar when you selecting text, and you can click on the toolbar to change the text's decoration, this is a react component defined in `src/config/components/Toolbars.tsx`
-# When hover on the left of a block, there will be a Drag and drop handle, render by `src/editor/components/withStyledDraggables.tsx`
+### `/` menu component is at `src/editor/components/combobox/SnippetCombobox.tsx`, and snippets are loaded in `src/editor/config/snippets.ts`
+# There will be a floating toolbar when you selecting text, and you can click on the toolbar to change the text's decoration, this is a react component defined in `src/slate-write/editor/components/Toolbars.tsx`
+# When hover on the left of a block, there will be a Drag and drop handle, render by `src/slate-write/editor/config/draggableComponents.ts` and `src/slate-write/editor/components/plate-ui/draggable.tsx`
 ## Different block have different line height, so we need to add different padding here to align drag handle with the block.
 ## allow drag to reorder blocks, onDrop listeners are in `src/editor/plugins/dnd/hooks` that copied from plate's source
 ### code are copy from udecode/plate's repo to `src/editor/plugins/dnd` folder, and have modification in `src/editor/plugins/dnd/hooks/useDragBlock.ts` to set `$tw.dragInProgress = true`
-## support drag to reorder list items and widget, components registered in `src/editor/components/index.ts` will be draggable
+## support drag to reorder list items and widget, see `src/slate-write/editor/plugins/dnd/postDropNormalize.ts` for how we fix dragged list item, by wrapping it with a `ol` or `ul` parent on drop.
 # autocomplete `[[`'s and `{{`'s linkable tiddlers result
 ## the code handles special `auto_complete_input` node that contains text to search after typing `/` or `[[` is copied from plate to `src/editor/plugins/autoComplete`
 ## `src/editor/plugins/autoComplete/withAutoComplete.ts` will put text in the `auto_complete_input` node to the redux (zustand npm package) store `useAutoCompletePluginStore`
@@ -30,7 +31,7 @@ type: text/vnd.tiddlywiki
 ## autocomplete `<<`'s available macros as discussed in [[TiddlyWiki5/discussions/6706|https://github.com/Jermolene/TiddlyWiki5/discussions/6706]]
 ## autocomplete `<$`'s available widget and fields, see `src/editor/components/combobox/WidgetCombobox.tsx`, in `widgetItems`, text field is the text that will be inserted, this logic is at `src/editor/plugins/comboBox/getAutoCompleteOnSelectItem.ts`
 # Only import needed components from their ''deepest package'' to achieve "tree shaking" to reduce bundle size
-## e.g., `import { PlateElement, PlateElementProps } from '@udecode/plate-utils';` instead of `import { PlateElement, PlateElementProps } from '@udecode/plate-common';`
+## e.g., `import { PlateElement, PlateElementProps } from '@udecode/plate-utils';` instead of `import { PlateElement, PlateElementProps } from '@udecode/plate-common';` where `@udecode/plate-common` is much larger.
 ## Some element from plate are not needed, like ImageElement can be replaced by tw's own image widget, so don't import it. And for code-block, we use our own codemirror based element located in `src/editor/plugins/codeblock/CodeBlockElement/CodeBlockElement.tsx`
 
 !! TODO
@@ -46,15 +47,17 @@ type: text/vnd.tiddlywiki
 # TODO: add more selection operation, or maybe in command palette, like "refactor to new tiddler"
 # TODO: insert latex math using `$$` or `￥￥` shortcut
 # TODO: open context aware autocomplete using `ctrl+space`, show corresponding dropdown menu using prefix of the selection
-# TODO: add excalidraw widget support
+# TODO: add tldraw widget support
 
 !! Development
 
 Install and run
 
+(See [[https://npmmirror.com/]] for how to speed up in China)
+
 ```sh
-npm i
-npm run dev
+pnpm i
+pnpm run dev
 ```
 
 Run tests
@@ -63,13 +66,13 @@ Run tests
 npm test
 ```
 
-Test JSON plugin
+Auto generate barrel files (index.ts files).
 
 ```sh
-npm run dev-html
+npm run generate-barrels
 ```
 
-Make production build: See `.github/workflows/release.yml`, adding a tag like `v0.1.1` to a commit and push to github will make a build.
+Make production build: See `.github/workflows/release.yml`, so adding a tag like `v0.1.1` to a commit and push to github will make a build.
 
 !!! Modify build scripts