outline
adding expandable code block
Heyy , this is to adress the enhancement in #7829 ,I though it was really great so I worked on it . I kept is pretty simple, I gave code blocks a default max height of 20 lines and added a button to expand and collapse it , all using css, and toggle button that updates a new expanded attribute on the node. Like so :
https://github.com/user-attachments/assets/316838b7-e0e4-4033-bc3d-f5752da7d4ea
Hope this helps
Unfortunately this won't work well as anything in the attrs is synced between editors including other users. Whether the code block is collapsed or not should only affect the current browser window
Heyy, so I changed the logic a little bit here, I added a plugin to manage the decorations for expanding and collapsing , and made the button toggle a local flag that way it is sure to be user specific and won't sync across users. Hope this works.
The condition to change the code-block class to expanded includes the block being selected AND expanded being true , so even when multiple code blocks exist only the selected one would expand. Plus, the suggested solution of storing the flag in the node's attribute is exactly what we've een trying to avoid :) . Frankly I think this solution works well enough unless I am missing something else.
This is a new version, I tried to avoid all the previously discussed issues:
- It does not use the node's attrs so it does not sync across users.
- There is no one global flag for all nodes so there wouln't be any conflicts.
Instead of the previous flag, I made a map that appends a seperate flag for every code-fence node, the flag still toggles with the expandCodeBlock command , and the plugin checks for all true expanded flags and assigns the expanded class to them. I tried it and made sure it will be consistent for all cases, we can:
- have all blocks collapsed.
- have two or more expanded at the same time, and some others collapsed.
- have all blocks expanded.
I hope I am not missing anything else, please do let me know if so 😊.
@tommoor Do you think this is mergeable as is right now? I have some documents with multiple 100+ lines code blocks, scrolling through them is not really usable in my case.
I'm also thinking about different approach, could we just have a simple generic /spoiler block? Not dedicated to any particular content type like code block. There's already supported spoiler syntax in Markdown used in StackOverflow, Discord or Reddit.
>! This way everything would be easily collapsible, long tables, quotations, extensive lists, large embeds. WDYT? Would you accept such PR if up to standards and whatnot? Or you don't want to use anything outside of basic syntax?
NVM apparently I'm blind, just found https://github.com/outline/outline/pull/8317 and this is EXACTLY what I need in my case.
