feat(edgeless): new TOC

[donteatfriedrice]

New TOC:

https://www.figma.com/file/ry2HHWu5XafpuXBD2XOvKd/%F0%9F%9B%96-2023.S4?node-id=4435%3A113950&mode=dev

Screen.Recording.2023-11-30.at.20.18.17.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
blocksuite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 1, 2023 7:35am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
blocksuite-docs	⬜️ Ignored (Inspect)	Visit Preview		Dec 1, 2023 7:35am

[zanwei]

Had a discussion with @donteatfriedrice internally. There are still some details that need to be fixed.

[zanwei]

Approved. Looks good to me

[doodlewind]

Thanks for the feat!

[zanwei]

Had a discussion internally with @donteatfriedrice. There'a modification needs to be update

1. table of content When the text is not cut, it is necessary to click the corresponding block and jump to the target position. The corresponding block text is highlighted and returns to the default state after 1 second.
2. Placeholder block display type name

[zanwei]

We've further discussion about TOC and we like to have an update.

1. Check whether the user has written content in the block. If there is no content, it will not be displayed in the TOC.
2. TOC when the text is not cut, it is necessary to click the corresponding block and jump to the target position. The corresponding block text is highlighted and returns to the default state after 1 second.
3. Placeholder block display type name

UI update

1. Please update the font size from 15px(base) to 14px(sm)
2. Please update the top&bot padding from 8px to 6px

4. Please update the indentation of different types of blocks
5. Please update the index number font size from 12px to 14px

6. Change the title from a full-write to the first letter uppercase

cc @donteatfriedrice

[donteatfriedrice]

Doc mode:

1. Display text outline.
2. Click to navigate to specific block.
3. Update outline in realtime.

Screen.Recording.2023-12-15.at.17.40.18.mov

[donteatfriedrice]

Edgeless mode:

1. Display outline by note level (including doc-mode visible and hidden notes).
2. Click to select note on edgeless mode.
3. Shift-click to multi-select.
4. Double Click to navigate to specific note.
5. Update panel in real-time.
6. Dnd to reorder notes sequence. This will change the order notes show in doc mode.

Screen.Recording.2023-12-15.at.17.41.00.mov

Screen.Recording.2023-12-15.at.17.51.08.mov

[donteatfriedrice]

Settings:

1. Support hiding block type icons.

Screen.Recording.2023-12-15.at.17.41.53.mov