From b5962af466f5bd52182b08b2a485ce77ec41f6b6 Mon Sep 17 00:00:00 2001
From: Yuri Karamian <yuri@arkhost.com>
Date: Mon, 3 Aug 2026 02:56:42 +0200
Subject: [PATCH] Add collapsible section shortcut (#129)

---
 src/lib/components/Editor.svelte    | 12 +++++++++++-
 src/lib/components/InfoPanel.svelte |  1 +
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index 404c68a..6ce7546 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -4425,6 +4425,16 @@
 							props: {
 								handleDOMEvents: {
 									keydown(view, event) {
+										const isInsertDetails = (event.ctrlKey || event.metaKey)
+											&& !event.shiftKey
+											&& !event.altKey
+											&& event.code === 'Period';
+										if (isInsertDetails) {
+											if (get(readOnly)) return false;
+											event.preventDefault();
+											insertDetails();
+											return true;
+										}
 										const isTab = event.key === 'Tab' && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey;
 										const isEnter = event.key === 'Enter' && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey;
 										if (!isTab && !isEnter) return false;
@@ -6866,7 +6876,7 @@
 				</button>
 
 				<!-- Collapsible Section -->
-				<button class="fmt-btn" class:active={(editorState, editor.isActive('details'))} onclick={() => insertDetails()} title="Collapsible Section">
+				<button class="fmt-btn" class:active={(editorState, editor.isActive('details'))} onclick={() => insertDetails()} title={`Collapsible Section (${modKey}+.)`}>
 					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="13" height="7" x="8" y="3" rx="1"/><path d="m2 9 3 3-3 3"/><rect width="13" height="7" x="8" y="14" rx="1"/></svg>
 				</button>
 
diff --git a/src/lib/components/InfoPanel.svelte b/src/lib/components/InfoPanel.svelte
index f744b8e..920a3c2 100644
--- a/src/lib/components/InfoPanel.svelte
+++ b/src/lib/components/InfoPanel.svelte
@@ -273,6 +273,7 @@
 						<div class="shortcut-row"><span class="shortcut-desc">Strikethrough</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd></span></div>
 						<div class="shortcut-row"><span class="shortcut-desc">Code</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>E</kbd></span></div>
 						<div class="shortcut-row"><span class="shortcut-desc">Link</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>K</kbd></span></div>
+						<div class="shortcut-row"><span class="shortcut-desc">Collapsible section</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>.</kbd></span></div>
 						<div class="shortcut-row"><span class="shortcut-desc">Undo</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Z</kbd></span></div>
 						<div class="shortcut-row"><span class="shortcut-desc">Redo</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd></span></div>
 						<div class="shortcut-row"><span class="shortcut-desc">Move line up / down</span><span class="shortcut-keys"><kbd>Alt</kbd>+<kbd>↑↓</kbd></span></div>