Collapse / Toggle Block Type

[gotjoshua]

• Agree on relevance
• Agree on style
• Agree that it belongs here in packages/blocks/src
• Agree that it is an appropriate task for a first time contributor

Example from Workflowy	Example from Notion

[doodlewind]

Hi, thanks for your feedback!

I think this is a very interesting feature, and it's also something we are going to partially covered! In our design of the DatabaseBlock (see #629), we will be able to render nest-able blocks (e.g., nested list) as sub-row in table. Folding and unfolding the row could naturally be supported when evolving the DatabaseBlock (and ListBlock).

But to my knowledge, it may be a bit hard for a first -time contributor to get things right in this feature for now, since there will also be some non-trivial modification required in the containers (e.g., page block and database block) UI and selection (deciding which block should be picked, we handle this in a more "manual" way in selection.ts).

So before developing this feature, I think this could be better to collect more feedback in discussion, so I'm going to convert it. Hope to see more thoughts about this!

[gotjoshua]

a bit hard for a first -time contributor

i'm super happy if the team takes it on!
I think a pure collapse/toggle component is needed and will need to be able to perform within a normal text context and within a database row rendering context..

agreed?

[gotjoshua]

Couldn't it be an additional type for the list block?

blocksuite/packages/blocks/src/list-block/utils/get-list-icon.ts

Line 34 in ff10b69

case 'todo':

[HeJiachen-PM]

Well i think any nested list can be a mix of elements that play nice together

Eg top level collapse with task list(s) as children

True

[doodlewind]

Yep things will be easier if we use a standalone list type, instead of making the current list types foldable.

[gotjoshua]

i have a starting point for that on my fork...

#908

i know you closed it as not planned... but i want to play around anyway. No expectations.
Let it serve as a discussion piece.

[gotjoshua]

Vercel preview

typing '>>' [space] will create the collapse element

i still need to toggle open/closed correctly on click (for now it only choses the correct icon if the node already has a child when you type >>

[gotjoshua]

[gotjoshua]

Here is another UI example from Logseq - similar to workflowy, except that the arrow is only shown on hover (in this example on the 3rd line "Collapsed with kids"

note: the pathway to the currently focussed block is a plugin.

[houjoe0829]

We shared a discussion about Toggle design in the community, please take a look and feel free to leave your comments.
https://community.affine.pro/c/build-in-public/what-is-affine-s-toggle-block