ArkHost/HelixNotes
1
0
Fork 0
mirror of https://gitlab.com/ArkHost/HelixNotes.git synced 2026-07-24 07:45:57 +02:00
Code Issues Projects Releases Wiki Activity

Fix heading submenu clipped in context menu, flip on narrow screens (#113)

Browse Source
This commit is contained in:
Yuri Karamian
2026-06-18 13:20:35 +02:00
parent c14ad6387d
commit 32e056dc24
1 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Editor.svelte
+12 -3
View File
@@ -276,7 +276,7 @@
if (!q || q.startsWith('http://') || q.startsWith('https://') || q.startsWith('mailto:')) return []; if (!q || q.startsWith('http://') || q.startsWith('https://') || q.startsWith('mailto:')) return [];
return linkSuggestTitles.filter(e => e.title.toLowerCase().includes(q)).slice(0, 8); return linkSuggestTitles.filter(e => e.title.toLowerCase().includes(q)).slice(0, 8);
}); });
let textContextMenu = $state<{ x: number; y: number } | null>(null); let textContextMenu = $state<{ x: number; y: number; submenuLeft: boolean } | null>(null);
let tableContextMenu = $state<{ x: number; y: number } | null>(null); let tableContextMenu = $state<{ x: number; y: number } | null>(null);
let tablePickerOpen = $state(false); let tablePickerOpen = $state(false);
let tablePickerHover = $state({ rows: 0, cols: 0 }); let tablePickerHover = $state({ rows: 0, cols: 0 });
@@ -3949,7 +3949,9 @@
if (y + menuHeight > window.innerHeight) y = window.innerHeight - menuHeight - 8; if (y + menuHeight > window.innerHeight) y = window.innerHeight - menuHeight - 8;
if (x < 4) x = 4; if (x < 4) x = 4;
if (y < 4) y = 4; if (y < 4) y = 4;
textContextMenu = { x, y }; const submenuWidth = 150;
const submenuLeft = x + menuWidth + submenuWidth > window.innerWidth;
textContextMenu = { x, y, submenuLeft };
} }
function closeTextContextMenu() { function closeTextContextMenu() {
@@ -5784,7 +5786,7 @@
<svg class="submenu-arrow" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 6 15 12 9 18"/></svg> <svg class="submenu-arrow" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 6 15 12 9 18"/></svg>
</button> </button>
{#if ctxHeadingSubmenu} {#if ctxHeadingSubmenu}
<div class="text-ctx-submenu"> <div class="text-ctx-submenu" class:flip-left={textContextMenu?.submenuLeft}>
<button class:active={(editorState, editor?.isActive('heading', { level: 1 }))} onclick={() => ctxSetHeading(1)}>Heading 1</button> <button class:active={(editorState, editor?.isActive('heading', { level: 1 }))} onclick={() => ctxSetHeading(1)}>Heading 1</button>
<button class:active={(editorState, editor?.isActive('heading', { level: 2 }))} onclick={() => ctxSetHeading(2)}>Heading 2</button> <button class:active={(editorState, editor?.isActive('heading', { level: 2 }))} onclick={() => ctxSetHeading(2)}>Heading 2</button>
<button class:active={(editorState, editor?.isActive('heading', { level: 3 }))} onclick={() => ctxSetHeading(3)}>Heading 3</button> <button class:active={(editorState, editor?.isActive('heading', { level: 3 }))} onclick={() => ctxSetHeading(3)}>Heading 3</button>
@@ -8685,6 +8687,13 @@
z-index: 1502; z-index: 1502;
} }
.text-ctx-submenu.flip-left {
left: auto;
right: 100%;
margin-left: 0;
margin-right: 2px;
}
.text-ctx-submenu button { .text-ctx-submenu button {
display: flex; display: flex;
align-items: center; align-items: center;