Toggle block by apoorv-mishra · Pull Request #8317 · outline/outline

apoorv-mishra · 2025-01-28T16:54:04Z

tommoor

There's a lot of code here, I can't really dive into all the specifics yet - it might be best to get the UX right first and then iterate on the code that's left? Amazing how involved this has ended up, so nice work!

A couple of key things that don't quite feel right from a UX point of view just yet:

When you create a new toggle block it should start opened so that you can hit enter after typing the title and go straight into adding the content.
An empty content area should always show at least one paragraph with a placeholder so that you can see where you should be typing. We might be able to tweak/reuse the logic on the existing placeholder?
Cmd+Enter could toggle the current toggle block open/closed
We can set up a +++ input rule as a shortcut to add a new toggle block

tommoor · 2025-05-09T02:08:48Z

    box-sizing: border-box;
  }

+  html {


I'm not really following why all these additions were needed on this branch?

apoorv-mishra · 2025-05-18T14:27:53Z

We can set up a +++ input rule as a shortcut to add a new toggle block

What about > ? I know it's already used for blockquote, we can change that to " and use > for toggle block instead? Fewer keystrokes compared to +++.

tommoor · 2025-05-18T22:51:51Z

We can't change blockquote as it's based on markdown, also been that way for 6 years so there's a lot of muscle memory!

apoorv-mishra · 2025-05-19T03:48:01Z

We can't change blockquote as it's based on markdown

I meant just the input rule, not the corresponding markdown token.

also been that way for 6 years so there's a lot of muscle memory!

Makes sense. Fine, will keep it at +++ then.

tommoor · 2025-05-19T03:51:24Z

Yep, but the input rule is based on people writing markdown naturally :)

apoorv-mishra · 2025-05-19T03:53:33Z

So, the muscle memory is much older than 6 years then... ;)

… content

…hin the body

tommoor

I did a significant merge and refactor, seems ready to go.

Getting this out before the 1y anniversary hits 😆

This PR contains the following updates: | Package | Update | Change | |---|---|---| | [outline/outline](https://github.com/outline/outline) | minor | `1.3.0` → `1.4.0` | --- ### Release Notes <details> <summary>outline/outline (outline/outline)</summary> ### [`v1.4.0`](https://github.com/outline/outline/releases/tag/v1.4.0) [Compare Source](outline/outline@v1.3.0...v1.4.0) #### What's Changed ##### Highlights - New **"Toggle blocks"** allow creating content that is collapsed by default in [#8317](outline/outline#8317) - Table cells can now have a custom background color set in [#10930](outline/outline#10930) - Search results are now highlighted in the document when navigating from search in [#11262](outline/outline#11262) ##### Other improvements - A new Figma integration allows unfurling information about Figma links in documents by [@hmacr](https://github.com/hmacr) in [#11044](outline/outline#11044) - Added support for sorting dates in table columns by [@lucawimmer](https://github.com/lucawimmer) in [#11198](outline/outline#11198) - Document changes made through the API are now synced to clients in realtime in [#11186](outline/outline#11186) - The rate limiter now prefers user ID over ip address for logged in sessions, prevents issues on larger office networks in [#11215](outline/outline#11215) - The markdown importer now supports more file layouts in [#11278](outline/outline#11278) ##### Fixes - Fixed some typos comments and messages by [@NAM-MAN](https://github.com/NAM-MAN) in [#11203](outline/outline#11203) - Fixed an issue where mentions would sometimes break when using drag and drop in a list in [#11208](outline/outline#11208) - The edit diagram control no longer appears in read-only mode in [#11207](outline/outline#11207) - Infinite recursion in `dd-trace` dependency causes memory issues in [#11211](outline/outline#11211) - Imported content now gracefully handles HTTP links in [#11210](outline/outline#11210) - Editor suggestions on mobile now uses a drawer in [#11213](outline/outline#11213) - When importing markdown checkboxes are now supported in table cells in [#11217](outline/outline#11217) - GCS uniform bucket-level access now supported by [@maycuatroi1](https://github.com/maycuatroi1) in [#11222](outline/outline#11222) - Fixed a hanging read stream handle causing excessive memory usage on export in [#11237](outline/outline#11237) - Fixed mermaid diagrams do not render when pasting markdown in [#11243](outline/outline#11243) - Remote edits no longer exit Mermaid editing state in [#11244](outline/outline#11244) - Table row is now inserted correctly with merged first column cells in [#11245](outline/outline#11245) - Allow http\:// loopback redirect URIs for native OAuth apps (RFC 8252) in [#11255](outline/outline#11255) - "Split cell" option now works without accurate selection in [#11256](outline/outline#11256) - Adding text below images is now easier as trailing paragraph is enforcedd by [@RudraPrasad001](https://github.com/RudraPrasad001) in [#11257](outline/outline#11257) - Tooltip in editor toolbar with submenu is now hidden when submenu is open in [#11263](outline/outline#11263) - Non-platform passkeys such as Yubikey and mobile QRcode are now allowed in [#11265](outline/outline#11265) - diagrams.net theme now matches editor theme by [@Twometer](https://github.com/Twometer) in [#11267](outline/outline#11267) - Custom emoji characters are now displayed correctly in TOC in [#11275](outline/outline#11275) - Fixed an issue where the policy for documents restore was too broad in [#11279](outline/outline#11279) - Passkey setup is now available to non-admin users by [@Raphmatt](https://github.com/Raphmatt) in [#11286](outline/outline#11286) #### New Contributors - [@NAM-MAN](https://github.com/NAM-MAN) made their first contribution in [#11203](outline/outline#11203) - [@lucawimmer](https://github.com/lucawimmer) made their first contribution in [#11198](outline/outline#11198) - [@maycuatroi1](https://github.com/maycuatroi1) made their first contribution in [#11222](outline/outline#11222) - [@RudraPrasad001](https://github.com/RudraPrasad001) made their first contribution in [#11257](outline/outline#11257) - [@Twometer](https://github.com/Twometer) made their first contribution in [#11267](outline/outline#11267) - [@Raphmatt](https://github.com/Raphmatt) made their first contribution in [#11286](outline/outline#11286) **Full Changelog**: <outline/outline@v1.3.0...v1.4.0> </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Reviewed-on: https://gitea.alexlebens.dev/alexlebens/infrastructure/pulls/3546 Co-authored-by: Renovate Bot <renovate-bot@alexlebens.net> Co-committed-by: Renovate Bot <renovate-bot@alexlebens.net>

This PR contains the following updates: | Package | Update | Change | |---|---|---| | [outlinewiki/outline](https://github.com/outline/outline) | minor | `1.3.0` → `1.4.0` | --- ### Release Notes <details> <summary>outline/outline (outlinewiki/outline)</summary> ### [`v1.4.0`](https://github.com/outline/outline/releases/tag/v1.4.0) [Compare Source](outline/outline@v1.3.0...v1.4.0) ##### What's Changed ##### Highlights - New **"Toggle blocks"** allow creating content that is collapsed by default in [#8317](outline/outline#8317) - Table cells can now have a custom background color set in [#10930](outline/outline#10930) - Search results are now highlighted in the document when navigating from search in [#11262](outline/outline#11262) ##### Other improvements - A new Figma integration allows unfurling information about Figma links in documents by [@hmacr](https://github.com/hmacr) in [#11044](outline/outline#11044) - Added support for sorting dates in table columns by [@lucawimmer](https://github.com/lucawimmer) in [#11198](outline/outline#11198) - Document changes made through the API are now synced to clients in realtime in [#11186](outline/outline#11186) - The rate limiter now prefers user ID over ip address for logged in sessions, prevents issues on larger office networks in [#11215](outline/outline#11215) - The markdown importer now supports more file layouts in [#11278](outline/outline#11278) ##### Fixes - Fixed some typos comments and messages by [@NAM-MAN](https://github.com/NAM-MAN) in [#11203](outline/outline#11203) - Fixed an issue where mentions would sometimes break when using drag and drop in a list in [#11208](outline/outline#11208) - The edit diagram control no longer appears in read-only mode in [#11207](outline/outline#11207) - Infinite recursion in `dd-trace` dependency causes memory issues in [#11211](outline/outline#11211) - Imported content now gracefully handles HTTP links in [#11210](outline/outline#11210) - Editor suggestions on mobile now uses a drawer in [#11213](outline/outline#11213) - When importing markdown checkboxes are now supported in table cells in [#11217](outline/outline#11217) - GCS uniform bucket-level access now supported by [@maycuatroi1](https://github.com/maycuatroi1) in [#11222](outline/outline#11222) - Fixed a hanging read stream handle causing excessive memory usage on export in [#11237](outline/outline#11237) - Fixed mermaid diagrams do not render when pasting markdown in [#11243](outline/outline#11243) - Remote edits no longer exit Mermaid editing state in [#11244](outline/outline#11244) - Table row is now inserted correctly with merged first column cells in [#11245](outline/outline#11245) - Allow http\:// loopback redirect URIs for native OAuth apps (RFC 8252) in [#11255](outline/outline#11255) - "Split cell" option now works without accurate selection in [#11256](outline/outline#11256) - Adding text below images is now easier as trailing paragraph is enforcedd by [@RudraPrasad001](https://github.com/RudraPrasad001) in [#11257](outline/outline#11257) - Tooltip in editor toolbar with submenu is now hidden when submenu is open in [#11263](outline/outline#11263) - Non-platform passkeys such as Yubikey and mobile QRcode are now allowed in [#11265](outline/outline#11265) - diagrams.net theme now matches editor theme by [@Twometer](https://github.com/Twometer) in [#11267](outline/outline#11267) - Custom emoji characters are now displayed correctly in TOC in [#11275](outline/outline#11275) - Fixed an issue where the policy for documents restore was too broad in [#11279](outline/outline#11279) - Passkey setup is now available to non-admin users by [@Raphmatt](https://github.com/Raphmatt) in [#11286](outline/outline#11286) ##### New Contributors - [@NAM-MAN](https://github.com/NAM-MAN) made their first contribution in [#11203](outline/outline#11203) - [@lucawimmer](https://github.com/lucawimmer) made their first contribution in [#11198](outline/outline#11198) - [@maycuatroi1](https://github.com/maycuatroi1) made their first contribution in [#11222](outline/outline#11222) - [@RudraPrasad001](https://github.com/RudraPrasad001) made their first contribution in [#11257](outline/outline#11257) - [@Twometer](https://github.com/Twometer) made their first contribution in [#11267](outline/outline#11267) - [@Raphmatt](https://github.com/Raphmatt) made their first contribution in [#11286](outline/outline#11286) **Full Changelog**: <outline/outline@v1.3.0...v1.4.0> </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Reviewed-on: https://gitea.alexlebens.dev/alexlebens/infrastructure/pulls/3547 Co-authored-by: Renovate Bot <renovate-bot@alexlebens.net> Co-committed-by: Renovate Bot <renovate-bot@alexlebens.net>

alexhillnz · 2026-01-30T06:37:35Z

This is missing a tooltip in the formatting menu. Wouldn't know what the button does if I hadn't seen the feature in the changelog

ados8 · 2026-01-30T07:52:02Z

Been waiting for auto collapsing blocks for ages, but this doesn't seem to be it? Unless I'm mistaken, it requires the keyboard shortcut or mouse click to close. Was really hoping for the behaviour of every time you leave/navigate away the blocks auto close.

tommoor · 2026-01-30T10:48:03Z

This is missing a tooltip in the formatting menu. Wouldn't know what the button does if I hadn't seen the feature in the changelog

Yea, spotted and fixed already.

Was really hoping for the behaviour of every time you leave/navigate away the blocks auto close.

I don't know of any similar implementation that does that, but it could be an interesting user preference

ados8 · 2026-01-31T03:50:23Z

Another app I used had that by default.
The general reason to use collapsible sections is density and neatness.
Having to manual collapse them is inefficient and in my opinion against its core purpose.

tommoor · 2026-01-31T12:46:06Z

Cmd+Enter allows you to toggle quickly. Which app?

ados8 · 2026-02-01T11:35:49Z

Problem is the keyboard shortcut only work when editing. If you navigate to the page and expand a bunch of blocks you need to compress them manually or they remain expanded.
The app was Bookstack from memory.
There's many features I miss from that app, some unique functions.

notfounnd · 2026-02-04T15:27:49Z

@tommoor @apoorv-mishra great feature!

I'm checking this enhanced in Outline docs guide and I get this behaviour.

When collapse an area that have toggles block, the component not fold with the collapsed area. Is it expected?

https://docs.getoutline.com/s/guide/doc/toggles-LNZgXe0o2b

tommoor · 2026-02-04T17:01:18Z

Those toggleable headers will be going away very soon as they are too similar to the new toggles but work differently (and worse).

This does seem like a bug, but probably not worth fixing given that

apoorv-mishra commented Jan 28, 2025

View reviewed changes

Comment thread shared/editor/nodes/Heading.ts Outdated

apoorv-mishra commented Jan 29, 2025

View reviewed changes

Comment thread app/editor/menus/block.tsx Outdated

apoorv-mishra force-pushed the feat/7676/toggle-block branch from f5a8ec4 to da97a87 Compare February 12, 2025 12:15

apoorv-mishra commented Feb 19, 2025

View reviewed changes

Comment thread shared/editor/nodes/ToggleBlock.ts Outdated

apoorv-mishra commented Mar 10, 2025

View reviewed changes

Comment thread shared/editor/nodes/ToggleBlock.ts Outdated

apoorv-mishra commented Mar 10, 2025

View reviewed changes

Comment thread shared/editor/components/Styles.ts Outdated

apoorv-mishra force-pushed the feat/7676/toggle-block branch from 6709633 to 70a922d Compare March 10, 2025 11:06

apoorv-mishra force-pushed the feat/7676/toggle-block branch 4 times, most recently from 6f7a64b to 8501e61 Compare May 8, 2025 17:11

apoorv-mishra marked this pull request as ready for review May 8, 2025 17:16

auto-assign Bot requested a review from tommoor May 8, 2025 17:16

tommoor reviewed May 9, 2025

View reviewed changes

apoorv-mishra mentioned this pull request May 15, 2025

Refactor Placeholder plugin to make it configurable #9224

Merged

apoorv-mishra force-pushed the feat/7676/toggle-block branch 2 times, most recently from 6ef9d75 to c6bc545 Compare May 19, 2025 18:23

apoorv-mishra requested a review from tommoor May 19, 2025 18:43

apoorv-mishra force-pushed the feat/7676/toggle-block branch from 91360b5 to c481155 Compare May 20, 2025 06:04

Uriziel01 mentioned this pull request May 29, 2025

adding expandable code block #9067

Closed

apoorv-mishra force-pushed the feat/7676/toggle-block branch from fff5b0e to c3989f1 Compare May 30, 2025 05:41

This comment was marked as resolved.

Sign in to view

This comment was marked as duplicate.

Sign in to view

This comment was marked as resolved.

Sign in to view

apoorv-mishra force-pushed the feat/7676/toggle-block branch from e9cb168 to 6b8d35f Compare June 2, 2025 10:50

tommoor added 17 commits January 25, 2026 13:39

Remove getUtils

5f0ff10

fix: Default new toggle blocks to closed

a8e7932

fix: Infinite loop

515acf9

refactor: Separate ToggleBlockView

25ac15e

Centralize class names

6a1df3c

fix: Align nested headings with lists

fe99612

fix: Toggle block disclosure different sizes

5c17937

fix: Toggle flash when clicking fold button while focus within toggle…

01fb55b

… content

refactor: Plugin keys

5a53927

Exit toggle block when pressing Enter in the last empty paragraph wit…

66f004f

…hin the body

Placeholders

932a84b

fix: Fallback line-height, font-size for empty title

138770d

fix: Incorrect decoration on title node change

8418c88

doc

a5d0fb5

fix: Enter in last list item in toggle body exits

0a23e68

fix: Allow toggling headings in diff viewer

77b892e

fix: Toggle button animation on first load

df59d13

tommoor approved these changes Jan 26, 2026

View reviewed changes

tommoor merged commit e9ed1ba into main Jan 26, 2026
15 checks passed

tommoor deleted the feat/7676/toggle-block branch January 26, 2026 23:26

Uh oh!

Conversation

apoorv-mishra commented Jan 28, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tommoor left a comment

Choose a reason for hiding this comment

Uh oh!

tommoor May 9, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

apoorv-mishra commented May 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tommoor commented May 18, 2025

Uh oh!

apoorv-mishra commented May 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tommoor commented May 19, 2025

Uh oh!

apoorv-mishra commented May 19, 2025

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as duplicate.

Uh oh!

This comment was marked as resolved.

Uh oh!

tommoor left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alexhillnz commented Jan 30, 2026

Uh oh!

ados8 commented Jan 30, 2026

Uh oh!

tommoor commented Jan 30, 2026

Uh oh!

ados8 commented Jan 31, 2026

Uh oh!

tommoor commented Jan 31, 2026

Uh oh!

ados8 commented Feb 1, 2026

Uh oh!

notfounnd commented Feb 4, 2026

Uh oh!

tommoor commented Feb 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

apoorv-mishra commented May 18, 2025 •

edited

Loading

apoorv-mishra commented May 19, 2025 •

edited

Loading

tommoor left a comment •

edited

Loading