Skip to content

feat: Toggle blocks #1707

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 38 commits into from
Jun 20, 2025
Merged

feat: Toggle blocks #1707

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
d893c6a
Added toggle heading
matthewlipski May 21, 2025
d77eca5
Changed collapsible heading to toggle and added react implementation
matthewlipski May 21, 2025
ec26e4d
Removed duplicate code
matthewlipski May 21, 2025
00fbdae
Small changes
matthewlipski May 21, 2025
9d148ae
Extracted toggle to separate component
matthewlipski Jun 10, 2025
7a7a2db
Added missing export
matthewlipski Jun 10, 2025
a484779
Added vanilla toggle heading block
matthewlipski Jun 10, 2025
7ce587d
Added translations
matthewlipski Jun 10, 2025
cb159d6
Typing fix
matthewlipski Jun 10, 2025
d7a6d7d
Made heading custom block to extend for toggle heading
matthewlipski Jun 11, 2025
a3a88f9
Small fix
matthewlipski Jun 11, 2025
2c12f1b
Removed toggle heading block and added `isTogglable` prop to regular …
matthewlipski Jun 11, 2025
238843a
Slightly changed how the toggle wrapper works
matthewlipski Jun 11, 2025
9378ef0
Changed heading block to again use `createStronglyTypedTiptapNode` in…
matthewlipski Jun 11, 2025
c603d4c
Added toggle list item default block
matthewlipski Jun 11, 2025
1f78656
Merge branch 'main' into toggle-blocks
matthewlipski Jun 11, 2025
1c2786e
Updated lock file
matthewlipski Jun 11, 2025
9b27b94
Updated unit tests
matthewlipski Jun 11, 2025
ff157b3
Updated PW tests
matthewlipski Jun 11, 2025
0b0f210
fix tests
YousefED Jun 12, 2025
90a029d
Merge branch 'main' into toggle-blocks
matthewlipski Jun 12, 2025
d322a9f
update snaps
YousefED Jun 12, 2025
b1848f3
Merge remote-tracking branch 'origin/main' into toggle-blocks
YousefED Jun 12, 2025
88bb5c3
Small cleanup
matthewlipski Jun 12, 2025
cbf23a2
Merge branch 'toggle-blocks' of github.com:TypeCellOS/BlockNote into …
matthewlipski Jun 12, 2025
860bcd5
Improved keyboard handling
matthewlipski Jun 12, 2025
c3b2f58
Updated `ToggleWrapper` keyboard handling
matthewlipski Jun 12, 2025
3533091
Skip AI tests
matthewlipski Jun 12, 2025
7ee4788
Updated PW snap
matthewlipski Jun 12, 2025
1b0cced
Implemented PR feedback
matthewlipski Jun 13, 2025
66c4e42
Implemented PR feedback
matthewlipski Jun 16, 2025
9767c52
Updated lockfile
matthewlipski Jun 16, 2025
09608a5
Updated PW snaps
matthewlipski Jun 16, 2025
33912b8
Implemented PR feedback
matthewlipski Jun 16, 2025
df3c678
Updated PW snaps
matthewlipski Jun 17, 2025
6f31924
Implemented PR feedback
matthewlipski Jun 18, 2025
c8df257
chore: update translations
nperez0111 Jun 20, 2025
5435942
chore: update translations
nperez0111 Jun 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/01-basic/04-default-blocks/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export default function App() {
content: "Check List Item",
},
{
id: "toggle-list-item",
type: "toggleListItem",
content: "Toggle List Item",
},
Expand Down
5 changes: 3 additions & 2 deletions packages/core/src/editor/Block.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ NESTED BLOCKS
*/

.bn-block-group .bn-block-group {
margin-left: 1.5em;
margin-left: 24px;
}

.bn-block-group .bn-block-group > .bn-block-outer {
Expand Down Expand Up @@ -271,6 +271,7 @@ NESTED BLOCKS
}

.bn-toggle-button {
color: var(--bn-colors-editor-text);
padding: 3px;
}

Expand All @@ -289,14 +290,14 @@ NESTED BLOCKS
font-weight: normal;
margin-left: 22px;
padding-inline: 2px;
width: fit-content;
}

.bn-toggle-button,
.bn-toggle-add-block-button {
background: none;
border: none;
border-radius: var(--bn-border-radius-small);
color: var(--bn-colors-editor-text);
cursor: pointer;
display: flex;
user-select: none;
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/ar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export const ar: Dictionary = {
placeholders: {
default: "أدخل نصًا أو اكتب '/' للأوامر",
heading: "عنوان",
toggleList: "طيّ",
toggleListItem: "طيّ",
bulletListItem: "قائمة",
numberedListItem: "قائمة",
checkListItem: "قائمة",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/de.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ export const de: Dictionary = {
placeholders: {
default: "Text eingeben oder '/' für Befehle tippen",
heading: "Überschrift",
toggleList: "Umschalten",
toggleListItem: "Umschalten",
bulletListItem: "Liste",
numberedListItem: "Liste",
checkListItem: "Liste",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export const en = {
placeholders: {
default: "Enter text or type '/' for commands",
heading: "Heading",
toggleList: "Toggle",
toggleListItem: "Toggle",
bulletListItem: "List",
numberedListItem: "List",
checkListItem: "List",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ export const es: Dictionary = {
placeholders: {
default: "Escribe o teclea '/' para comandos",
heading: "Encabezado",
toggleList: "Alternar",
toggleListItem: "Alternar",
bulletListItem: "Lista",
numberedListItem: "Lista",
checkListItem: "Lista",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/fr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ export const fr: Dictionary = {
default:
"Entrez du texte ou tapez '/' pour faire apparaître les options de mise en page",
heading: "Titre",
toggleList: "Basculer",
toggleListItem: "Basculer",
bulletListItem: "Liste",
numberedListItem: "Liste",
checkListItem: "Liste",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/hr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export const hr: Dictionary = {
placeholders: {
default: "Unesi tekst ili upiši ‘/’ za naredbe",
heading: "Naslov",
toggleList: "Prebaciti",
toggleListItem: "Prebaciti",
bulletListItem: "Lista",
numberedListItem: "Lista",
checkListItem: "Lista",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/is.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export const is: Dictionary = {
placeholders: {
default: "Sláðu inn texta eða skrifaðu '/' fyrir skipanir",
heading: "Fyrirsögn",
toggleList: "Víxla",
toggleListItem: "Víxla",
bulletListItem: "Listi",
numberedListItem: "Listi",
checkListItem: "Listi",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/it.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ export const it: Dictionary = {
placeholders: {
default: "Inserisci testo o digita '/' per i comandi",
heading: "Intestazione",
toggleList: "Attiva/Disattiva",
toggleListItem: "Attiva/Disattiva",
bulletListItem: "Elenco",
numberedListItem: "Elenco",
checkListItem: "Elenco",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/ja.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ export const ja: Dictionary = {
placeholders: {
default: "テキストを入力するか'/' を入力してコマンド選択",
heading: "見出し",
toggleList: "トグル",
toggleListItem: "トグル",
bulletListItem: "リストを追加",
numberedListItem: "リストを追加",
checkListItem: "リストを追加",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/ko.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export const ko: Dictionary = {
placeholders: {
default: "텍스트를 입력하거나 /를 입력하여 명령을 입력하세요.",
heading: "제목",
toggleList: "토글",
toggleListItem: "토글",
bulletListItem: "목록",
numberedListItem: "목록",
checkListItem: "목록",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/nl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ export const nl: Dictionary = {
placeholders: {
default: "Voer tekst in of type '/' voor commando's",
heading: "Kop",
toggleList: "Schakelaar",
toggleListItem: "Schakelaar",
Copy link
Collaborator

@YousefED YousefED Jun 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This word means "switch" (as in, "light switch" / "light toggle").

Can we give your AI some extra context to improve the translations?

Copy link
Collaborator Author

@matthewlipski matthewlipski Jun 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I'm just using Copilot built into VSCode so it should at least have the context of the english translation file, any way I can add to this?

Copy link
Collaborator

@YousefED YousefED Jun 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you can @ mention specific files in the chat? It also helps to just chat explanation of what the toggle is (i.e.: a block that expands in a document editor)

bulletListItem: "Lijst",
numberedListItem: "Lijst",
checkListItem: "Lijst",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/no.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ export const no: Dictionary = {
placeholders: {
default: "Skriv tekst eller skriv '/' for å vise kommandoer",
heading: "Overskrift",
toggleList: "Veksle",
toggleListItem: "Veksle",
bulletListItem: "Liste",
numberedListItem: "Liste",
checkListItem: "Liste",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/pl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ export const pl: Dictionary = {
placeholders: {
default: "Wprowadź tekst lub wpisz '/' aby użyć poleceń",
heading: "Nagłówek",
toggleList: "Przełącz",
toggleListItem: "Przełącz",
bulletListItem: "Lista",
numberedListItem: "Lista",
checkListItem: "Lista",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/pt.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export const pt: Dictionary = {
placeholders: {
default: "Digite texto ou use '/' para comandos",
heading: "Título",
toggleList: "Alternar",
toggleListItem: "Alternar",
bulletListItem: "Lista",
numberedListItem: "Lista",
checkListItem: "Lista",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/ru.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ export const ru: Dictionary = {
placeholders: {
default: "Введите текст или введите «/» для команд",
heading: "Заголовок",
toggleList: "Переключить",
toggleListItem: "Переключить",
bulletListItem: "Список",
numberedListItem: "Список",
checkListItem: "Список",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/sk.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export const sk = {
placeholders: {
default: "Zadajte text alebo napíšte '/' pre príkazy",
heading: "Nadpis",
toggleList: "Prepnúť",
toggleListItem: "Prepnúť",
bulletListItem: "Zoznam",
numberedListItem: "Zoznam",
checkListItem: "Zoznam",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/uk.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ export const uk: Dictionary = {
placeholders: {
default: "Введіть текст або наберіть '/' для команд",
heading: "Заголовок",
toggleList: "Перемикач",
toggleListItem: "Перемикач",
bulletListItem: "Список",
numberedListItem: "Список",
checkListItem: "Список",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/vi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export const vi: Dictionary = {
placeholders: {
default: "Nhập văn bản hoặc gõ '/' để thêm định dạng",
heading: "Tiêu đề",
toggleList: "Chuyển đổi",
toggleListItem: "Chuyển đổi",
bulletListItem: "Danh sách",
numberedListItem: "Danh sách",
checkListItem: "Danh sách",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/zh-tw.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ export const zhTW: Dictionary = {
placeholders: {
default: "輸入 '/' 以使用指令",
heading: "標題",
toggleList: "切換",
toggleListItem: "切換",
bulletListItem: "列表",
numberedListItem: "列表",
checkListItem: "列表",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/i18n/locales/zh.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ export const zh: Dictionary = {
placeholders: {
default: "输入 '/' 以使用命令",
heading: "标题",
toggleList: "切换",
toggleListItem: "切换",
bulletListItem: "列表",
numberedListItem: "列表",
checkListItem: "列表",
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/editor/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@

/* Indent line styling */
.bn-block-group
.bn-block:not(:has(.bn-toggle-wrapper))
.bn-block-group
.bn-block-outer:not([data-prev-depth-changed])::before {
border-left: 1px solid var(--bn-colors-side-menu);
Expand Down
Loading