Compare commits

..
13 Commits
Author SHA1 Message Date
Yuri Karamian a88fcbefba notebook drag-and-drop, nested list fix, macOS updates, search bar auto-close 2026-02-13 23:35:30 +01:00
Yuri Karamian f32f77dcd5 v1.0.8 - Fix task list checkbox loss and empty line preservation on markdown roundtrip 2026-02-13 13:11:54 +01:00
Yuri Karamian ea323e508b Add macOS native titlebar support 2026-02-13 01:30:10 +01:00
Yuri Karamian 6dfea864f3 v1.0.7 - Virtual scroll, context menu fix, wiki-link cache fix 2026-02-11 15:08:28 +01:00
Yuri Karamian 070590bd2a Update README download links to v1.0.6 2026-02-11 00:34:35 +01:00
Yuri Karamian d453bbfc3c v1.0.6 - Editor toolbar & UX improvements
BUG FIXES:
- Slash command panel no longer triggers on existing unix paths (e.g. /usr/local/bin)
- Formatting dropdowns (Insert, Color, Highlight, etc.) now dismiss when clicking outside

ENHANCEMENTS:
- All toolbar icons replaced with official Lucide icons for consistent style
- Bold icon now visually appears bold
- Ordered list icon no longer has overlapping numbers
- Highlight marker padding balanced (top/bottom/sides)
- Version bump to 1.0.6
2026-02-11 00:28:57 +01:00
Yuri Karamian 8acbb872dd Update README download links to v1.0.5 2026-02-10 22:47:17 +01:00
Yuri Karamian d695931502 v1.0.5 - Fix version history panel alignment 2026-02-10 22:37:39 +01:00
Yuri Karamian f6eff80e43 Update README download links to v1.0.4 2026-02-10 21:46:45 +01:00
Yuri Karamian f688cf4bd4 v1.0.4 - Quick Access reorder, performance improvements, search fixes
- Quick Access drag-to-reorder: drag notes to rearrange, order persists
- Quick Access preserves order when moving notes between notebooks
- In-note search: debounced input, proper scroll-to-match
- Panel resize: RAF-batched updates, editor containment during resize
- Thinner resize handles (3px)
- Note list: removed transition, added CSS containment for 1200+ notes
- Escape closes Settings and Info panels
- Fix Quick Access cache invalidation on remove
2026-02-10 21:14:50 +01:00
Yuri Karamian a95e240bcd Update README download links to v1.0.3 2026-02-10 20:17:49 +01:00
Yuri Karamian bbcca553ce v1.0.3 - In-note search, note history navigation, keyboard shortcuts
- Find in note (Ctrl+F): search within current note with match highlighting and navigation
- Global vault search moved to Ctrl+Shift+F
- Note history navigation: Alt+Left/Right and mouse back/forward buttons
- Search icon added to editor toolbar
- Escape closes Settings and Info panels
- Updated Info panel with new keyboard shortcuts
- Deb install type detection with APT upgrade instructions
2026-02-10 19:38:51 +01:00
Yuri Karamian 6a40f553f1 v1.0.2 - Update banner, smart updater, install type detection 2026-02-10 01:31:54 +01:00
20 changed files with 1058 additions and 152 deletions
+7 -5
View File
@@ -6,11 +6,12 @@ Your notes are stored as standard Markdown files on your local filesystem. No cl
## Download ## Download
| Platform | Download | | Platform | Download | Notes |
|----------|----------| |----------|----------|-------|
| Linux | [HelixNotes_1.0.1_amd64.AppImage](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.0.1/HelixNotes_1.0.1_amd64.AppImage) | | Linux (Arch/rolling) | [HelixNotes_1.0.9_amd64.AppImage](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.0.9/HelixNotes_1.0.9_amd64.AppImage) | Best for Arch, Fedora, openSUSE |
| Windows | [HelixNotes_1.0.1_x64-setup.exe](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.0.1/HelixNotes_1.0.1_x64-setup.exe) | | Linux (Debian/Ubuntu/Mint) | [HelixNotes_1.0.9_amd64.deb](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.0.9/HelixNotes_1.0.9_amd64.deb) | Ubuntu 22.04+ |
| macOS | Coming soon | | Windows | [HelixNotes_1.0.9_x64-setup.exe](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.0.9/HelixNotes_1.0.9_x64-setup.exe) | Windows 10/11 |
| macOS | Coming soon | |
See all releases: [codeberg.org/ArkHost/HelixNotes/releases](https://codeberg.org/ArkHost/HelixNotes/releases) See all releases: [codeberg.org/ArkHost/HelixNotes/releases](https://codeberg.org/ArkHost/HelixNotes/releases)
@@ -24,6 +25,7 @@ See all releases: [codeberg.org/ArkHost/HelixNotes/releases](https://codeberg.or
- **Version history** — per-note snapshots with diff view - **Version history** — per-note snapshots with diff view
- **Backups** — automatic zip-based vault backups - **Backups** — automatic zip-based vault backups
- **PDF preview** — inline rendering of embedded PDFs - **PDF preview** — inline rendering of embedded PDFs
- **Drag-and-drop** — move notes between notebooks, reorganize notebooks by dragging
- **Obsidian import** — convert Obsidian wiki-links to standard markdown - **Obsidian import** — convert Obsidian wiki-links to standard markdown
- **Themes** — light/dark mode with customizable accent colors and fonts - **Themes** — light/dark mode with customizable accent colors and fonts
- **Focus mode** — distraction-free writing - **Focus mode** — distraction-free writing
+1 -1
View File
@@ -2,7 +2,7 @@
"name": "helixnotes", "name": "helixnotes",
"private": true, "private": true,
"license": "AGPL-3.0-or-later", "license": "AGPL-3.0-or-later",
"version": "1.0.2", "version": "1.0.9",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
+17 -1
View File
@@ -1778,7 +1778,7 @@ checksum = "2304e00983f87ffb38b55b444b5e3b60a884b5d30c0fca7d82fe33449bbe55ea"
[[package]] [[package]]
name = "helixnotes" name = "helixnotes"
version = "1.0.2" version = "1.0.9"
dependencies = [ dependencies = [
"chrono", "chrono",
"dirs", "dirs",
@@ -1799,6 +1799,7 @@ dependencies = [
"tauri-plugin-fs", "tauri-plugin-fs",
"tauri-plugin-log", "tauri-plugin-log",
"tauri-plugin-opener", "tauri-plugin-opener",
"tauri-plugin-single-instance",
"tauri-plugin-updater", "tauri-plugin-updater",
"tokio", "tokio",
"uuid", "uuid",
@@ -5081,6 +5082,21 @@ dependencies = [
"zbus", "zbus",
] ]
[[package]]
name = "tauri-plugin-single-instance"
version = "2.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "dc61e4822b8f74d68278e09161d3e3fdd1b14b9eb781e24edccaabf10c420e8c"
dependencies = [
"serde",
"serde_json",
"tauri",
"thiserror 2.0.18",
"tracing",
"windows-sys 0.60.2",
"zbus",
]
[[package]] [[package]]
name = "tauri-plugin-updater" name = "tauri-plugin-updater"
version = "2.10.0" version = "2.10.0"
+2 -1
View File
@@ -1,6 +1,6 @@
[package] [package]
name = "helixnotes" name = "helixnotes"
version = "1.0.2" version = "1.0.9"
description = "Local-first markdown note-taking app" description = "Local-first markdown note-taking app"
authors = ["HelixNotes"] authors = ["HelixNotes"]
license = "AGPL-3.0-or-later" license = "AGPL-3.0-or-later"
@@ -38,3 +38,4 @@ zip = { version = "2", default-features = false, features = ["deflate"] }
reqwest = { version = "0.12", features = ["json", "stream"] } reqwest = { version = "0.12", features = ["json", "stream"] }
futures = "0.3" futures = "0.3"
rayon = "1" rayon = "1"
tauri-plugin-single-instance = "2"
+125 -3
View File
@@ -2,6 +2,7 @@ use crate::search::SearchIndex;
use crate::state::AppState; use crate::state::AppState;
use crate::types::*; use crate::types::*;
use crate::vault::{operations, watcher}; use crate::vault::{operations, watcher};
use std::path::Path;
use tauri::{AppHandle, Manager, State}; use tauri::{AppHandle, Manager, State};
// ── Vault Management ── // ── Vault Management ──
@@ -101,6 +102,77 @@ pub fn rename_notebook(path: String, new_name: String) -> Result<String, String>
operations::rename_notebook(&path, &new_name) operations::rename_notebook(&path, &new_name)
} }
#[tauri::command]
pub fn move_notebook(
state: State<'_, AppState>,
notebook_path: String,
dest_parent: String,
) -> Result<String, String> {
let config = state.config.lock().map_err(|e| e.to_string())?;
let vault_path = config.active_vault.as_ref().ok_or("No active vault")?;
let old_relative = Path::new(&notebook_path)
.strip_prefix(vault_path.as_str())
.map(|p| p.to_string_lossy().to_string())
.unwrap_or_default();
let new_full_path = operations::move_notebook(&notebook_path, &dest_parent)?;
let new_relative = Path::new(&new_full_path)
.strip_prefix(vault_path.as_str())
.map(|p| p.to_string_lossy().to_string())
.unwrap_or_default();
// Update Quick Access paths for all notes inside the moved notebook
if let Ok(mut qa) = operations::load_quick_access(vault_path) {
let old_prefix = format!("{}/", old_relative);
let mut changed = false;
for path in qa.iter_mut() {
if path.starts_with(&old_prefix) {
*path = format!("{}/{}", new_relative, &path[old_prefix.len()..]);
changed = true;
}
}
if changed {
let _ = operations::save_quick_access(vault_path, &qa);
}
}
// Update notebook icon mappings
if let Ok(icons) = operations::load_notebook_icons(vault_path) {
let old_prefix = format!("{}/", old_relative);
let mut new_icons = std::collections::HashMap::new();
let mut changed = false;
for (key, value) in &icons {
if *key == old_relative {
new_icons.insert(new_relative.clone(), value.clone());
changed = true;
} else if key.starts_with(&old_prefix) {
let new_key = format!("{}/{}", new_relative, &key[old_prefix.len()..]);
new_icons.insert(new_key, value.clone());
changed = true;
} else {
new_icons.insert(key.clone(), value.clone());
}
}
if changed {
let icons_path = operations::helixnotes_dir(vault_path).join("notebook_icons.json");
if let Ok(data) = serde_json::to_string_pretty(&new_icons) {
let _ = std::fs::write(&icons_path, data);
}
}
}
// Rebuild search index (paths changed for all contained notes)
if let Ok(search_guard) = state.search_index.lock() {
if let Some(ref search) = *search_guard {
let _ = search.rebuild(vault_path);
}
}
Ok(new_full_path)
}
#[tauri::command] #[tauri::command]
pub fn delete_notebook(state: State<'_, AppState>, path: String) -> Result<(), String> { pub fn delete_notebook(state: State<'_, AppState>, path: String) -> Result<(), String> {
let config = state.config.lock().map_err(|e| e.to_string())?; let config = state.config.lock().map_err(|e| e.to_string())?;
@@ -195,8 +267,39 @@ pub fn delete_note(state: State<'_, AppState>, path: String) -> Result<(), Strin
} }
#[tauri::command] #[tauri::command]
pub fn move_note(note_path: String, dest_notebook: String) -> Result<String, String> { pub fn move_note(
operations::move_note(&note_path, &dest_notebook) state: State<'_, AppState>,
note_path: String,
dest_notebook: String,
) -> Result<String, String> {
let config = state.config.lock().map_err(|e| e.to_string())?;
let vault_path = config.active_vault.as_ref().ok_or("No active vault")?;
// Compute old relative path before move
let old_relative = Path::new(&note_path)
.strip_prefix(vault_path)
.map(|p| p.to_string_lossy().to_string())
.unwrap_or_default();
let new_full_path = operations::move_note(&note_path, &dest_notebook)?;
// Update quick access if the moved note was in it
if !old_relative.is_empty() {
if let Ok(mut qa) = operations::load_quick_access(vault_path) {
if let Some(pos) = qa.iter().position(|p| *p == old_relative) {
let new_relative = Path::new(&new_full_path)
.strip_prefix(vault_path)
.map(|p| p.to_string_lossy().to_string())
.unwrap_or_default();
if !new_relative.is_empty() {
qa[pos] = new_relative;
let _ = operations::save_quick_access(vault_path, &qa);
}
}
}
}
Ok(new_full_path)
} }
// ── Tags ── // ── Tags ──
@@ -437,6 +540,13 @@ pub fn remove_quick_access(
operations::remove_quick_access(vault_path, &note_relative) operations::remove_quick_access(vault_path, &note_relative)
} }
#[tauri::command]
pub fn reorder_quick_access(state: State<'_, AppState>, paths: Vec<String>) -> Result<(), String> {
let config = state.config.lock().map_err(|e| e.to_string())?;
let vault_path = config.active_vault.as_ref().ok_or("No active vault")?;
operations::save_quick_access(vault_path, &paths)
}
#[tauri::command] #[tauri::command]
pub fn get_vault_stats(state: State<'_, AppState>) -> Result<VaultStats, String> { pub fn get_vault_stats(state: State<'_, AppState>) -> Result<VaultStats, String> {
let config = state.config.lock().map_err(|e| e.to_string())?; let config = state.config.lock().map_err(|e| e.to_string())?;
@@ -1346,10 +1456,22 @@ fn save_app_config(config: &AppConfig) -> Result<(), String> {
#[tauri::command] #[tauri::command]
pub fn get_install_type() -> String { pub fn get_install_type() -> String {
if cfg!(target_os = "windows") { if cfg!(target_os = "macos") {
"macos".to_string()
} else if cfg!(target_os = "windows") {
"windows".to_string() "windows".to_string()
} else if std::env::var("APPIMAGE").is_ok() { } else if std::env::var("APPIMAGE").is_ok() {
"appimage".to_string() "appimage".to_string()
} else if std::path::Path::new("/var/lib/dpkg/info/helix-notes.list").exists() {
"deb".to_string()
} else if std::path::Path::new("/var/lib/pacman/local").exists()
&& std::process::Command::new("pacman")
.args(["-Q", "helixnotes"])
.output()
.map(|o| o.status.success())
.unwrap_or(false)
{
"aur".to_string()
} else { } else {
"native".to_string() "native".to_string()
} }
+9
View File
@@ -23,6 +23,13 @@ pub fn run() {
let app_state = AppState::new(config); let app_state = AppState::new(config);
let mut builder = tauri::Builder::default() let mut builder = tauri::Builder::default()
.plugin(tauri_plugin_single_instance::init(|app, _args, _cwd| {
if let Some(window) = app.get_webview_window("main") {
let _ = window.show();
let _ = window.unminimize();
let _ = window.set_focus();
}
}))
.plugin(tauri_plugin_dialog::init()) .plugin(tauri_plugin_dialog::init())
.plugin(tauri_plugin_fs::init()) .plugin(tauri_plugin_fs::init())
.plugin(tauri_plugin_opener::init()) .plugin(tauri_plugin_opener::init())
@@ -54,6 +61,7 @@ pub fn run() {
commands::create_notebook, commands::create_notebook,
commands::rename_notebook, commands::rename_notebook,
commands::delete_notebook, commands::delete_notebook,
commands::move_notebook,
commands::get_notes, commands::get_notes,
commands::read_note, commands::read_note,
commands::save_note, commands::save_note,
@@ -79,6 +87,7 @@ pub fn run() {
commands::get_quick_access, commands::get_quick_access,
commands::add_quick_access, commands::add_quick_access,
commands::remove_quick_access, commands::remove_quick_access,
commands::reorder_quick_access,
commands::get_vault_stats, commands::get_vault_stats,
commands::import_obsidian, commands::import_obsidian,
commands::open_file, commands::open_file,
+32
View File
@@ -432,6 +432,38 @@ pub fn move_note(note_path: &str, dest_notebook: &str) -> Result<String, String>
Ok(dest.to_string_lossy().to_string()) Ok(dest.to_string_lossy().to_string())
} }
pub fn move_notebook(notebook_path: &str, dest_parent: &str) -> Result<String, String> {
let src = Path::new(notebook_path);
if !src.exists() || !src.is_dir() {
return Err("Notebook does not exist".to_string());
}
let dest_parent_path = Path::new(dest_parent);
if !dest_parent_path.is_dir() {
return Err("Destination does not exist".to_string());
}
// No-op if already in that parent
if src.parent() == Some(dest_parent_path) {
return Err("Notebook is already in that location".to_string());
}
let dir_name = src.file_name().unwrap_or_default();
let dest = dest_parent_path.join(dir_name);
// Prevent moving into itself or a descendant
if dest.starts_with(src) {
return Err("Cannot move a notebook into itself or its descendants".to_string());
}
if dest.exists() {
return Err("A notebook with that name already exists in the destination".to_string());
}
fs::rename(src, &dest).map_err(|e| e.to_string())?;
Ok(dest.to_string_lossy().to_string())
}
pub fn get_trash_notes(vault_path: &str) -> Result<Vec<NoteEntry>, String> { pub fn get_trash_notes(vault_path: &str) -> Result<Vec<NoteEntry>, String> {
let trash_dir = helixnotes_dir(vault_path).join("trash"); let trash_dir = helixnotes_dir(vault_path).join("trash");
if !trash_dir.exists() { if !trash_dir.exists() {
+1 -1
View File
@@ -1,7 +1,7 @@
{ {
"$schema": "../node_modules/@tauri-apps/cli/config.schema.json", "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
"productName": "HelixNotes", "productName": "HelixNotes",
"version": "1.0.2", "version": "1.0.9",
"identifier": "com.helixnotes.app", "identifier": "com.helixnotes.app",
"build": { "build": {
"frontendDist": "../build", "frontendDist": "../build",
+16
View File
@@ -0,0 +1,16 @@
{
"app": {
"windows": [
{
"label": "main",
"decorations": true,
"titleBarStyle": "Overlay",
"hiddenTitle": true,
"trafficLightPosition": {
"x": 12,
"y": 10
}
}
]
}
}
+10 -1
View File
@@ -31,7 +31,7 @@
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
--sidebar-width: 220px; --sidebar-width: 220px;
--notelist-width: 280px; --notelist-width: 280px;
--panel-resize-handle: 4px; --panel-resize-handle: 3px;
} }
:root.dark { :root.dark {
@@ -149,3 +149,12 @@ body {
.resize-handle.active { .resize-handle.active {
background: var(--accent); background: var(--accent);
} }
body.resizing .ProseMirror {
pointer-events: none;
contain: strict;
}
body.resizing {
user-select: none;
}
+11
View File
@@ -60,6 +60,13 @@ export async function deleteNotebook(path: string): Promise<void> {
return invoke("delete_notebook", { path }); return invoke("delete_notebook", { path });
} }
export async function moveNotebook(
notebookPath: string,
destParent: string,
): Promise<string> {
return invoke("move_notebook", { notebookPath, destParent });
}
export async function getNotes( export async function getNotes(
notebookPath: string | null, notebookPath: string | null,
): Promise<NoteEntry[]> { ): Promise<NoteEntry[]> {
@@ -213,6 +220,10 @@ export async function removeQuickAccess(noteRelative: string): Promise<void> {
return invoke("remove_quick_access", { noteRelative }); return invoke("remove_quick_access", { noteRelative });
} }
export async function reorderQuickAccess(paths: string[]): Promise<void> {
return invoke("reorder_quick_access", { paths });
}
export async function getVaultStats(): Promise<VaultStats> { export async function getVaultStats(): Promise<VaultStats> {
return invoke("get_vault_stats"); return invoke("get_vault_stats");
} }
+77 -6
View File
@@ -20,11 +20,16 @@
showCommandPalette, showCommandPalette,
theme, theme,
focusMode, focusMode,
activeNote activeNote,
activeNotePath,
editorDirty,
showInfo,
showSettings
} from '$lib/stores/app'; } from '$lib/stores/app';
const appWindow = getCurrentWindow(); const appWindow = getCurrentWindow();
import { loadVaultState, saveVaultState } from '$lib/api'; const isMac = navigator.platform.startsWith('Mac');
import { loadVaultState, saveVaultState, readNote } from '$lib/api';
import { debounce } from '$lib/utils/debounce'; import { debounce } from '$lib/utils/debounce';
import type { VaultState, FileEvent } from '$lib/types'; import type { VaultState, FileEvent } from '$lib/types';
@@ -32,6 +37,39 @@
let noteList: NoteList; let noteList: NoteList;
let editor: Editor; let editor: Editor;
let unlistenFileChange: (() => void) | null = null; let unlistenFileChange: (() => void) | null = null;
let navigatingFromHistory = false;
let noteHistory: string[] = [];
let noteHistoryIndex = -1;
// Track note navigation in history stack
$effect(() => {
const path = $activeNotePath;
if (navigatingFromHistory) {
navigatingFromHistory = false;
return;
}
if (path) {
// Trim forward history and push
noteHistory = [...noteHistory.slice(0, noteHistoryIndex + 1), path];
noteHistoryIndex = noteHistory.length - 1;
}
});
function navigateHistory(direction: -1 | 1) {
const newIndex = noteHistoryIndex + direction;
if (newIndex < 0 || newIndex >= noteHistory.length) return;
const path = noteHistory[newIndex];
noteHistoryIndex = newIndex;
navigatingFromHistory = true;
readNote(path).then((content) => {
$activeNote = content;
$activeNotePath = path;
$editorDirty = false;
editor?.loadNote(path, content.content);
}).catch(() => {
// Note may have been deleted, ignore
});
}
const persistState = debounce(async () => { const persistState = debounce(async () => {
const state: VaultState = { const state: VaultState = {
@@ -69,7 +107,22 @@
editor?.focusTitle(); editor?.focusTitle();
} }
function handleMouseDown(e: MouseEvent) {
if (e.button === 3) { e.preventDefault(); navigateHistory(-1); }
if (e.button === 4) { e.preventDefault(); navigateHistory(1); }
}
function handleKeydown(e: KeyboardEvent) { function handleKeydown(e: KeyboardEvent) {
if (e.altKey && e.key === 'ArrowLeft') {
e.preventDefault();
navigateHistory(-1);
return;
}
if (e.altKey && e.key === 'ArrowRight') {
e.preventDefault();
navigateHistory(1);
return;
}
if (e.ctrlKey && !e.shiftKey && e.key === 'n') { if (e.ctrlKey && !e.shiftKey && e.key === 'n') {
e.preventDefault(); e.preventDefault();
createAndFocusNote(); createAndFocusNote();
@@ -77,9 +130,19 @@
if (e.ctrlKey && e.shiftKey && e.key === 'N') { if (e.ctrlKey && e.shiftKey && e.key === 'N') {
e.preventDefault(); e.preventDefault();
} }
if (e.ctrlKey && e.key === 'f') { if (e.ctrlKey && e.shiftKey && e.key === 'F') {
e.preventDefault(); e.preventDefault();
$showSearch = true; $showSearch = true;
return;
}
if (e.ctrlKey && !e.shiftKey && e.key === 'f') {
e.preventDefault();
if ($activeNotePath) {
editor?.openNoteSearch();
} else {
$showSearch = true;
}
return;
} }
if (e.ctrlKey && e.key === 'p') { if (e.ctrlKey && e.key === 'p') {
e.preventDefault(); e.preventDefault();
@@ -90,7 +153,9 @@
editor?.forceSave(); editor?.forceSave();
} }
if (e.key === 'Escape') { if (e.key === 'Escape') {
if ($focusMode) $focusMode = false; if ($showSettings) $showSettings = false;
else if ($showInfo) $showInfo = false;
else if ($focusMode) $focusMode = false;
else if ($showSearch) $showSearch = false; else if ($showSearch) $showSearch = false;
else if ($showCommandPalette) $showCommandPalette = false; else if ($showCommandPalette) $showCommandPalette = false;
} }
@@ -142,12 +207,12 @@
}); });
</script> </script>
<svelte:window onkeydown={handleKeydown} /> <svelte:window onkeydown={handleKeydown} onmousedown={handleMouseDown} />
<div class="app-shell"> <div class="app-shell">
{#if $focusMode} {#if $focusMode}
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="focus-topbar" onmousedown={(e) => { if (!(e.target as HTMLElement).closest('button')) appWindow.startDragging(); }}> <div class="focus-topbar" class:macos={isMac} onmousedown={(e) => { if (!(e.target as HTMLElement).closest('button')) appWindow.startDragging(); }}>
<span class="focus-title">{$activeNote?.meta.title || 'Untitled'}</span> <span class="focus-title">{$activeNote?.meta.title || 'Untitled'}</span>
<div class="focus-controls"> <div class="focus-controls">
<button class="focus-btn focus-active" onclick={() => ($focusMode = false)} title="Exit focus mode (Escape)"> <button class="focus-btn focus-active" onclick={() => ($focusMode = false)} title="Exit focus mode (Escape)">
@@ -155,6 +220,7 @@
<path d="M8 3v3a2 2 0 01-2 2H3m18 0h-3a2 2 0 01-2-2V3m0 18v-3a2 2 0 012-2h3M3 16h3a2 2 0 012 2v3"/> <path d="M8 3v3a2 2 0 01-2 2H3m18 0h-3a2 2 0 01-2-2V3m0 18v-3a2 2 0 012-2h3M3 16h3a2 2 0 012 2v3"/>
</svg> </svg>
</button> </button>
{#if !isMac}
<button class="focus-btn" onmousedown={(e) => e.stopPropagation()} onclick={() => appWindow.minimize()} title="Minimize"> <button class="focus-btn" onmousedown={(e) => e.stopPropagation()} onclick={() => appWindow.minimize()} title="Minimize">
<svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="9" y2="5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg> <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="9" y2="5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
</button> </button>
@@ -164,6 +230,7 @@
<button class="focus-btn focus-close" onmousedown={(e) => e.stopPropagation()} onclick={() => appWindow.close()} title="Close"> <button class="focus-btn focus-close" onmousedown={(e) => e.stopPropagation()} onclick={() => appWindow.close()} title="Close">
<svg width="10" height="10" viewBox="0 0 10 10"><line x1="1.5" y1="1.5" x2="8.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><line x1="8.5" y1="1.5" x2="1.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg> <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1.5" y1="1.5" x2="8.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><line x1="8.5" y1="1.5" x2="1.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
</button> </button>
{/if}
</div> </div>
</div> </div>
{:else} {:else}
@@ -285,4 +352,8 @@
background: #e81123; background: #e81123;
color: white; color: white;
} }
.focus-topbar.macos {
padding-left: 78px;
}
</style> </style>
+466 -92
View File
@@ -63,7 +63,19 @@
let highlightDropdown = $state(false); let highlightDropdown = $state(false);
let alignDropdown = $state(false); let alignDropdown = $state(false);
let insertDropdown = $state(false); let insertDropdown = $state(false);
function closeAllDropdowns() {
headingDropdown = false;
colorDropdown = false;
highlightDropdown = false;
alignDropdown = false;
insertDropdown = false;
tablePickerOpen = false;
}
let anyDropdownOpen = $derived(headingDropdown || colorDropdown || highlightDropdown || alignDropdown || insertDropdown || tablePickerOpen);
let editorState = $state(0); let editorState = $state(0);
let editorStateRaf = 0; // RAF handle for batching toolbar updates
// AI // AI
let aiMenu = $state<{ x: number; y: number } | null>(null); let aiMenu = $state<{ x: number; y: number } | null>(null);
@@ -93,6 +105,14 @@
let historySelected = $state<VersionEntry | null>(null); let historySelected = $state<VersionEntry | null>(null);
let historyLoading = $state(false); let historyLoading = $state(false);
// In-note search
let noteSearchOpen = $state(false);
let noteSearchQuery = $state('');
let noteSearchIndex = $state(0);
let noteSearchResults = $state<{from: number, to: number}[]>([]);
let noteSearchInput = $state<HTMLInputElement>(null!);
const noteSearchPluginKey = new PluginKey('noteSearch');
// Slash commands // Slash commands
let slashMenu = $state<{ x: number; y: number; query: string; from: number; to: number } | null>(null); let slashMenu = $state<{ x: number; y: number; query: string; from: number; to: number } | null>(null);
let slashSelectedIndex = $state(0); let slashSelectedIndex = $state(0);
@@ -150,6 +170,8 @@
.use(markdownItMark) .use(markdownItMark)
.use(markdownItSup) .use(markdownItSup)
.use(markdownItSub); .use(markdownItSub);
// Disable indented code blocks — tab-indented text should stay as text, not become code
mdit.disable('code');
function normalizePath(p: string): string { function normalizePath(p: string): string {
const parts = p.split('/'); const parts = p.split('/');
@@ -267,39 +289,87 @@
codeLangDropdown = null; codeLangDropdown = null;
} }
// ── In-note search extension ──
const NoteSearchExtension = Extension.create({
name: 'noteSearch',
addProseMirrorPlugins() {
return [
new Plugin({
key: noteSearchPluginKey,
state: {
init() { return DecorationSet.empty; },
apply(tr, old) {
const meta = tr.getMeta(noteSearchPluginKey);
if (meta !== undefined) return meta;
return old.map(tr.mapping, tr.doc);
},
},
props: {
decorations(state) {
return this.getState(state);
},
},
}),
];
},
});
const CodeBlockLanguageSelect = Extension.create({ const CodeBlockLanguageSelect = Extension.create({
name: 'codeBlockLanguageSelect', name: 'codeBlockLanguageSelect',
addGlobalAttributes() {
return [{
types: ['codeBlock'],
attributes: {
language: {
renderHTML: (attributes) => {
return { 'data-language': attributes.language || '' };
},
},
},
}];
},
addProseMirrorPlugins() { addProseMirrorPlugins() {
return [ return [
new Plugin({ new Plugin({
key: new PluginKey('codeBlockLanguageSelect'), key: new PluginKey('codeBlockLanguageSelect'),
props: { props: {
decorations: (state) => { handleDOMEvents: {
const decorations: Decoration[] = []; click: (view, event) => {
state.doc.descendants((node, pos) => { const target = event.target as HTMLElement;
if (node.type.name === 'codeBlock') { const pre = target.closest('pre');
const wrapper = document.createElement('div'); if (!pre) return false;
wrapper.className = 'code-lang-wrapper'; // Check if click is in the top-right corner (language button area)
const rect = pre.getBoundingClientRect();
const btn = document.createElement('button'); if (event.clientX < rect.right - 70 || event.clientY > rect.top + 30) return false;
btn.className = 'code-lang-btn'; // Find the code block position
if (node.attrs.language) { const pos = view.posAtDOM(pre, 0);
btn.textContent = node.attrs.language; const resolved = view.state.doc.resolve(pos);
} else { let cbNode = resolved.parent;
btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>'; let cbPos = resolved.before(resolved.depth);
if (cbNode.type.name !== 'codeBlock') {
for (let d = resolved.depth; d >= 0; d--) {
if (resolved.node(d).type.name === 'codeBlock') {
cbNode = resolved.node(d);
cbPos = resolved.before(d);
break;
} }
btn.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
openCodeLangDropdown(pos + 1, node.attrs.language || '', btn);
});
btn.addEventListener('mousedown', (e) => e.stopPropagation());
wrapper.appendChild(btn);
decorations.push(Decoration.widget(pos + 1, wrapper, { side: -1, ignoreSelection: true }));
} }
}
if (cbNode.type.name !== 'codeBlock') return false;
event.preventDefault();
event.stopPropagation();
// Virtual trigger for dropdown positioning
const triggerEl = document.createElement('div');
triggerEl.getBoundingClientRect = () => ({
top: rect.top + 6, bottom: rect.top + 26,
left: rect.right - 60, right: rect.right - 6,
width: 54, height: 20,
x: rect.right - 60, y: rect.top + 6,
toJSON() { return this; },
}); });
return DecorationSet.create(state.doc, decorations); openCodeLangDropdown(cbPos + 1, cbNode.attrs.language || '', triggerEl as any);
return true;
},
}, },
}, },
}), }),
@@ -334,6 +404,9 @@
closeSlashMenu(); closeSlashMenu();
} }
// Track whether the user just typed a slash (vs cursor moving into existing text)
let slashTypedByUser = false;
function closeSlashMenu() { function closeSlashMenu() {
slashMenu = null; slashMenu = null;
slashSelectedIndex = 0; slashSelectedIndex = 0;
@@ -363,6 +436,13 @@
return; return;
} }
// Only open the menu if the user typed the slash, or the menu is already open
// This prevents triggering when clicking/arrowing into existing paths like /usr/local/bin
if (!slashMenu && !slashTypedByUser) {
return;
}
slashTypedByUser = false;
const query = match[2]; const query = match[2];
const slashOffset = textBefore.length - match[0].length + (match[1].length); // position of "/" const slashOffset = textBefore.length - match[0].length + (match[1].length); // position of "/"
const from = resolvedFrom.start() + slashOffset; const from = resolvedFrom.start() + slashOffset;
@@ -389,6 +469,12 @@
new Plugin({ new Plugin({
key: new PluginKey('slashCommands'), key: new PluginKey('slashCommands'),
props: { props: {
handleTextInput: (_view, _from, _to, text) => {
if (text === '/') {
slashTypedByUser = true;
}
return false;
},
handleKeyDown: (_view, event) => { handleKeyDown: (_view, event) => {
if (!slashMenu) return false; if (!slashMenu) return false;
if (slashTablePicker) { if (slashTablePicker) {
@@ -397,7 +483,14 @@
closeSlashMenu(); closeSlashMenu();
return true; return true;
} }
if (event.key === 'ArrowRight' || event.key === 'Tab') { if (event.key === 'Tab') {
event.preventDefault();
if (slashTableHover.rows > 0 && slashTableHover.cols > 0) {
slashInsertTable(slashTableHover.rows, slashTableHover.cols);
}
return true;
}
if (event.key === 'ArrowRight') {
event.preventDefault(); event.preventDefault();
slashTableHover = { rows: Math.max(1, slashTableHover.rows), cols: Math.min(10, (slashTableHover.cols || 0) + 1) }; slashTableHover = { rows: Math.max(1, slashTableHover.rows), cols: Math.min(10, (slashTableHover.cols || 0) + 1) };
return true; return true;
@@ -436,7 +529,7 @@
slashSelectedIndex = (slashSelectedIndex - 1 + slashFiltered.length) % Math.max(1, slashFiltered.length); slashSelectedIndex = (slashSelectedIndex - 1 + slashFiltered.length) % Math.max(1, slashFiltered.length);
return true; return true;
} }
if (event.key === 'Enter') { if (event.key === 'Enter' || event.key === 'Tab') {
if (slashFiltered.length > 0) { if (slashFiltered.length > 0) {
event.preventDefault(); event.preventDefault();
executeSlashCommand(slashSelectedIndex); executeSlashCommand(slashSelectedIndex);
@@ -656,6 +749,8 @@
closeWikiLinkMenu(); closeWikiLinkMenu();
return; return;
} }
// Refresh titles when the menu first opens so newly created notes are found
if (!wikiLinkMenu) refreshWikiLinkTitles();
const query = match[1]; const query = match[1];
const bracketOffset = textBefore.length - match[0].length; const bracketOffset = textBefore.length - match[0].length;
const from = resolvedFrom.start() + bracketOffset; const from = resolvedFrom.start() + bracketOffset;
@@ -1002,14 +1097,23 @@
} }
function prosemirrorToMarkdown(doc: any): string { function prosemirrorToMarkdown(doc: any): string {
const listTypes = new Set(['bulletList', 'orderedList', 'taskList']);
const parts: string[] = []; const parts: string[] = [];
let prevType = ''; let prevType = '';
let preserveEmptyParas = false;
doc.forEach((node: any) => { doc.forEach((node: any) => {
// Skip empty paragraphs right after code blocks (TipTap cursor placeholder) const isEmpty = node.type.name === 'paragraph' && node.childCount === 0;
if (node.type.name === 'paragraph' && node.childCount === 0 && prevType === 'codeBlock') { // After a list, code block, or blockquote, preserve empty paragraphs as HTML comments
// so markdown-it doesn't merge adjacent blocks or collapse spacing
if (listTypes.has(prevType) || prevType === 'codeBlock' || prevType === 'blockquote') {
preserveEmptyParas = true;
}
if (isEmpty && preserveEmptyParas) {
parts.push('<!-- -->');
prevType = node.type.name; prevType = node.type.name;
return; return;
} }
preserveEmptyParas = false;
parts.push(serializeNode(node)); parts.push(serializeNode(node));
prevType = node.type.name; prevType = node.type.name;
}); });
@@ -1038,9 +1142,12 @@
return '```' + lang + '\n' + code + '\n```\n'; return '```' + lang + '\n' + code + '\n```\n';
} }
case 'blockquote': { case 'blockquote': {
const inner: string[] = []; const blocks: string[] = [];
node.forEach((child: any) => inner.push(serializeNode(child))); node.forEach((child: any) => {
return inner.join('').split('\n').filter((l: string) => l !== '').map((l: string) => '> ' + l).join('\n') + '\n'; const lines = serializeNode(child).replace(/\n$/, '').split('\n');
blocks.push(lines.map((l: string) => '> ' + l).join('\n'));
});
return blocks.join('\n>\n') + '\n';
} }
case 'bulletList': { case 'bulletList': {
const items: string[] = []; const items: string[] = [];
@@ -1102,6 +1209,12 @@
node.forEach((child: any) => { node.forEach((child: any) => {
if (child.type.name === 'paragraph') { if (child.type.name === 'paragraph') {
parts.push(serializeInline(child)); parts.push(serializeInline(child));
} else if (child.type.name === 'bulletList' || child.type.name === 'orderedList' || child.type.name === 'taskList') {
// Indent nested lists so markdown parsers recognize nesting
// Use 4 spaces — works for both bullet (- ) and ordered (1. ) parent markers
const nested = serializeNode(child).replace(/\n$/, '');
const indented = nested.split('\n').map((line: string) => ' ' + line).join('\n');
parts.push(indented);
} else { } else {
parts.push(serializeNode(child)); parts.push(serializeNode(child));
} }
@@ -1112,9 +1225,15 @@
function serializeInline(node: any): string { function serializeInline(node: any): string {
if (node.childCount === 0) return ''; if (node.childCount === 0) return '';
const parts: string[] = []; const parts: string[] = [];
node.forEach((child: any) => { node.forEach((child: any, _offset: number, index: number) => {
if (child.isText) { if (child.isText) {
let text = child.text || ''; let text = child.text || '';
// Preserve leading tabs/em-spaces as HTML entities so they survive markdown roundtrip
// (markdown parsers strip tab whitespace, but &emsp; passes through as HTML)
// Tabs come from initial indent; em-spaces (U+2003) come from prior &emsp; roundtrips
if (index === 0) {
text = text.replace(/^[\t\u2003]+/, (ws) => '&emsp;'.repeat(ws.length));
}
// Apply marks // Apply marks
for (const mark of child.marks) { for (const mark of child.marks) {
switch (mark.type.name) { switch (mark.type.name) {
@@ -1125,7 +1244,20 @@
case 'underline': text = `<u>${text}</u>`; break; case 'underline': text = `<u>${text}</u>`; break;
case 'subscript': text = `~${text}~`; break; case 'subscript': text = `~${text}~`; break;
case 'superscript': text = `^${text}^`; break; case 'superscript': text = `^${text}^`; break;
case 'highlight': text = `==${text}==`; break; case 'highlight': {
const color = mark.attrs?.color;
if (color) {
text = `<mark data-color="${color}">${text}</mark>`;
} else {
text = `==${text}==`;
}
break;
}
case 'textStyle': {
const c = mark.attrs?.color;
if (c) text = `<span style="color: ${c}">${text}</span>`;
break;
}
case 'link': text = `[${text}](${mark.attrs.href})`; break; case 'link': text = `[${text}](${mark.attrs.href})`; break;
case 'wikiLink': text = `[[${mark.attrs.title || text}]]`; break; case 'wikiLink': text = `[[${mark.attrs.title || text}]]`; break;
} }
@@ -1144,6 +1276,91 @@
return parts.join(''); return parts.join('');
} }
function autofocus(el: HTMLElement) {
requestAnimationFrame(() => el.focus());
}
// ── In-note search functions ──
let noteSearchTimer: ReturnType<typeof setTimeout> | null = null;
function updateNoteSearch(query: string) {
if (noteSearchTimer) clearTimeout(noteSearchTimer);
if (!editor) return;
if (!query) {
noteSearchResults = [];
noteSearchIndex = 0;
const tr = editor.state.tr.setMeta(noteSearchPluginKey, DecorationSet.empty);
editor.view.dispatch(tr);
return;
}
noteSearchTimer = setTimeout(() => {
if (!editor) return;
const results: {from: number, to: number}[] = [];
const lowerQuery = query.toLowerCase();
editor.state.doc.descendants((node, pos) => {
if (!node.isText || !node.text) return;
const text = node.text.toLowerCase();
let idx = text.indexOf(lowerQuery);
while (idx !== -1) {
results.push({ from: pos + idx, to: pos + idx + query.length });
idx = text.indexOf(lowerQuery, idx + 1);
}
});
noteSearchResults = results;
if (noteSearchIndex >= results.length) noteSearchIndex = 0;
applySearchDecorations();
}, 100);
}
function applySearchDecorations() {
if (!editor) return;
const decorations = noteSearchResults.map((m, i) =>
Decoration.inline(m.from, m.to, { class: i === noteSearchIndex ? 'note-search-match note-search-active' : 'note-search-match' })
);
const decoSet = DecorationSet.create(editor.state.doc, decorations);
const tr = editor.state.tr.setMeta(noteSearchPluginKey, decoSet);
editor.view.dispatch(tr);
scrollToCurrentMatch();
}
function scrollToCurrentMatch() {
if (!editor || noteSearchResults.length === 0) return;
requestAnimationFrame(() => {
const el = editor?.view.dom.querySelector('.note-search-active');
if (el) {
el.scrollIntoView({ block: 'center', behavior: 'smooth' });
}
});
}
function noteSearchNext() {
if (noteSearchResults.length === 0) return;
noteSearchIndex = (noteSearchIndex + 1) % noteSearchResults.length;
applySearchDecorations();
}
function noteSearchPrev() {
if (noteSearchResults.length === 0) return;
noteSearchIndex = (noteSearchIndex - 1 + noteSearchResults.length) % noteSearchResults.length;
applySearchDecorations();
}
export function openNoteSearch() {
noteSearchOpen = true;
}
function closeNoteSearch() {
noteSearchOpen = false;
noteSearchQuery = '';
noteSearchResults = [];
noteSearchIndex = 0;
if (editor) {
const tr = editor.state.tr.setMeta(noteSearchPluginKey, DecorationSet.empty);
editor.view.dispatch(tr);
editor.commands.focus();
}
}
function stripAssetSrc(src: string): string { function stripAssetSrc(src: string): string {
// blob: URLs are not persistable — they were temporary browser references // blob: URLs are not persistable — they were temporary browser references
if (src.startsWith('blob:')) return ''; if (src.startsWith('blob:')) return '';
@@ -1203,6 +1420,7 @@
md = md.replace(/<sub>(.*?)<\/sub>/gi, '~$1~'); md = md.replace(/<sub>(.*?)<\/sub>/gi, '~$1~');
md = md.replace(/<sup>(.*?)<\/sup>/gi, '^$1^'); md = md.replace(/<sup>(.*?)<\/sup>/gi, '^$1^');
md = md.replace(/<code>(.*?)<\/code>/gi, '`$1`'); md = md.replace(/<code>(.*?)<\/code>/gi, '`$1`');
md = md.replace(/<mark data-color="([^"]*)">(.*?)<\/mark>/gi, '<mark data-color="$1">$2</mark>');
md = md.replace(/<mark>(.*?)<\/mark>/gi, '==$1=='); md = md.replace(/<mark>(.*?)<\/mark>/gi, '==$1==');
md = md.replace(/<blockquote[^>]*>([\s\S]*?)<\/blockquote>/gi, (_, content) => { md = md.replace(/<blockquote[^>]*>([\s\S]*?)<\/blockquote>/gi, (_, content) => {
return content return content
@@ -1310,8 +1528,11 @@
}); });
// Pre-process: convert task list syntax before markdown-it (it doesn't know TipTap's format) // Pre-process: convert task list syntax before markdown-it (it doesn't know TipTap's format)
src = src.replace(/^- \[x\]\s+(.+)$/gm, '- <tiptask checked="true">$1</tiptask>'); // Support indented (nested) and blockquoted task lists too
src = src.replace(/^- \[ \]\s+(.+)$/gm, '- <tiptask checked="false">$1</tiptask>'); src = src.replace(/^([\s>]*)-\s\[x\][^\S\n]+(.+)$/gm, '$1- <tiptask checked="true">$2</tiptask>');
src = src.replace(/^([\s>]*)-\s\[x\][^\S\n]*$/gm, '$1- <tiptask checked="true">&nbsp;</tiptask>');
src = src.replace(/^([\s>]*)-\s\[ \][^\S\n]+(.+)$/gm, '$1- <tiptask checked="false">$2</tiptask>');
src = src.replace(/^([\s>]*)-\s\[ \][^\S\n]*$/gm, '$1- <tiptask checked="false">&nbsp;</tiptask>');
// Run markdown-it (single-pass parser — handles headings, bold, italic, strike, code, blockquote, lists, links, images, hr, tables, raw HTML) // Run markdown-it (single-pass parser — handles headings, bold, italic, strike, code, blockquote, lists, links, images, hr, tables, raw HTML)
let html = mdit.render(src); let html = mdit.render(src);
@@ -1320,11 +1541,15 @@
html = html.replace(/<code([^>]*)>\n?/g, '<code$1>'); html = html.replace(/<code([^>]*)>\n?/g, '<code$1>');
html = html.replace(/\n<\/code>/g, '</code>'); html = html.replace(/\n<\/code>/g, '</code>');
// Post-process: convert list-separator comments back to empty paragraphs for TipTap
html = html.replace(/<!-- -->/g, '<p></p>');
// Post-process: convert task list items to TipTap format // Post-process: convert task list items to TipTap format
html = html.replace(/<li><tiptask checked="(true|false)">([\s\S]*?)<\/tiptask><\/li>/gi, (_, checked, content) => { // Convert opening <li> + <tiptask> into data-attributed <li>, handles both tight and loose (with <p>) lists
return `<li data-type="taskItem" data-checked="${checked}">${content}</li>`; html = html.replace(/<li>(\s*(?:<p>)?)\s*<tiptask checked="(true|false)">([\s\S]*?)<\/tiptask>\s*(?:<\/p>)?/gi, (_, _pre, checked, text) => {
return `<li data-type="taskItem" data-checked="${checked}">${text}`;
}); });
html = html.replace(/<ul>\s*(<li data-type="taskItem")/gi, '<ul data-type="taskList">$1'); html = html.replace(/<ul>(\s*<li data-type="taskItem")/gi, '<ul data-type="taskList">$1');
// Post-process: resolve image src paths and parse size attribute // Post-process: resolve image src paths and parse size attribute
html = html.replace(/<img\s+src="([^"]*)"(?:\s+alt="([^"]*)")?[^>]*\/?>/gi, (_, imgSrc, altRaw) => { html = html.replace(/<img\s+src="([^"]*)"(?:\s+alt="([^"]*)")?[^>]*\/?>/gi, (_, imgSrc, altRaw) => {
@@ -1353,6 +1578,32 @@
} }
}); });
// Close formatting dropdowns when clicking outside the formatting bar
$effect(() => {
if (!anyDropdownOpen) return;
function onClickAway(e: MouseEvent) {
const bar = document.querySelector('.editor-formatting-bar');
if (bar && !bar.contains(e.target as Node)) {
closeAllDropdowns();
}
}
document.addEventListener('mousedown', onClickAway);
return () => document.removeEventListener('mousedown', onClickAway);
});
// Close in-note search when switching notes
let prevSearchPath = '';
$effect(() => {
const path = $activeNotePath ?? '';
if (prevSearchPath && path !== prevSearchPath) {
noteSearchOpen = false;
noteSearchQuery = '';
noteSearchResults = [];
noteSearchIndex = 0;
}
prevSearchPath = path;
});
// React to activeNotePath changes from external sources (e.g. search panel) // React to activeNotePath changes from external sources (e.g. search panel)
$effect(() => { $effect(() => {
const path = $activeNotePath; const path = $activeNotePath;
@@ -1418,16 +1669,37 @@
DetailsContent, DetailsContent,
TextAlign.configure({ types: ['heading', 'paragraph'] }), TextAlign.configure({ types: ['heading', 'paragraph'] }),
SlashCommands, SlashCommands,
NoteSearchExtension,
...($appConfig?.enable_wiki_links ? [WikiLink, WikiLinkAutocomplete] : []), ...($appConfig?.enable_wiki_links ? [WikiLink, WikiLinkAutocomplete] : []),
], ],
content: html, content: html,
editorProps: { editorProps: {
attributes: { class: 'editor-content' }, attributes: { class: 'editor-content' },
handleDOMEvents: {
// Prevent details toggle button from stealing focus, which causes scroll-to-top.
// Also pre-focus the editor with preventScroll so TipTap's focus command
// sees hasFocus()=true and skips its scrolling view.focus() call.
mousedown: (view, event) => {
const target = event.target as HTMLElement;
if (target.closest('[data-type="details"] > button')) {
event.preventDefault();
if (!view.hasFocus()) {
(view.dom as HTMLElement).focus({ preventScroll: true });
}
}
},
},
handleDrop: (_view, event) => handleFileDrop(event), handleDrop: (_view, event) => handleFileDrop(event),
handlePaste: (_view, event) => handleFilePaste(event), handlePaste: (_view, event) => handleFilePaste(event),
}, },
onTransaction: () => { onTransaction: () => {
// Batch toolbar state updates to once per frame — avoids ~35 isActive() calls per transaction during selection drag
if (!editorStateRaf) {
editorStateRaf = requestAnimationFrame(() => {
editorStateRaf = 0;
editorState++; editorState++;
});
}
updateSlashMenu(); updateSlashMenu();
updateWikiLinkMenu(); updateWikiLinkMenu();
}, },
@@ -1579,7 +1851,7 @@
let x = event.clientX; let x = event.clientX;
let y = event.clientY; let y = event.clientY;
const menuWidth = 220; const menuWidth = 220;
const menuHeight = 640; const menuHeight = 740;
if (x + menuWidth > window.innerWidth) x = window.innerWidth - menuWidth - 8; if (x + menuWidth > window.innerWidth) x = window.innerWidth - menuWidth - 8;
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;
@@ -2294,6 +2566,16 @@
{#if readOnly} {#if readOnly}
<span class="readonly-indicator">View Mode</span> <span class="readonly-indicator">View Mode</span>
{/if} {/if}
<button
class="icon-btn"
class:active={noteSearchOpen}
onclick={() => noteSearchOpen ? closeNoteSearch() : openNoteSearch()}
title="Find in note (Ctrl+F)"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
</button>
<button <button
class="icon-btn" class="icon-btn"
class:active={readOnly} class:active={readOnly}
@@ -2401,6 +2683,41 @@
</div> </div>
<div class="editor-body-wrapper"> <div class="editor-body-wrapper">
{#if noteSearchOpen}
<div class="note-search-bar">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.5;flex-shrink:0"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input
bind:this={noteSearchInput}
type="text"
class="note-search-input"
placeholder="Find in note..."
bind:value={noteSearchQuery}
oninput={() => updateNoteSearch(noteSearchQuery)}
onkeydown={(e) => {
if (e.key === 'Enter') { e.preventDefault(); e.shiftKey ? noteSearchPrev() : noteSearchNext(); }
if (e.key === 'Escape') { e.preventDefault(); closeNoteSearch(); }
}}
use:autofocus
/>
<span class="note-search-count">
{#if noteSearchQuery && noteSearchResults.length > 0}
{noteSearchIndex + 1} / {noteSearchResults.length}
{:else if noteSearchQuery}
No results
{/if}
</span>
<button class="note-search-btn" onclick={noteSearchPrev} title="Previous (Shift+Enter)">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
</button>
<button class="note-search-btn" onclick={noteSearchNext} title="Next (Enter)">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
</button>
<button class="note-search-btn" onclick={closeNoteSearch} title="Close (Esc)">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
{/if}
<div class="editor-body-row">
<div class="editor-body"> <div class="editor-body">
{#if $sourceMode} {#if $sourceMode}
<textarea <textarea
@@ -2471,6 +2788,7 @@
</div> </div>
{/if} {/if}
</div> </div>
</div>
{#if editorReady && !$sourceMode} {#if editorReady && !$sourceMode}
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -2478,37 +2796,37 @@
<!-- Insert (+) dropdown --> <!-- Insert (+) dropdown -->
<div class="fmt-dropdown-wrap"> <div class="fmt-dropdown-wrap">
<button class="fmt-btn insert-btn" onclick={(e) => { e.stopPropagation(); insertDropdown = !insertDropdown; headingDropdown = false; colorDropdown = false; highlightDropdown = false; tablePickerOpen = false; alignDropdown = false; }} title="Insert"> <button class="fmt-btn insert-btn" onclick={(e) => { e.stopPropagation(); insertDropdown = !insertDropdown; headingDropdown = false; colorDropdown = false; highlightDropdown = false; tablePickerOpen = false; alignDropdown = false; }} title="Insert">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
</button> </button>
{#if insertDropdown} {#if insertDropdown}
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="fmt-dropdown insert-dropdown" onclick={(e) => e.stopPropagation()}> <div class="fmt-dropdown insert-dropdown" onclick={(e) => e.stopPropagation()}>
<button onclick={() => { insertDropdown = false; document.querySelector<HTMLInputElement>('#insert-image-input')?.click(); }}> <button onclick={() => { insertDropdown = false; document.querySelector<HTMLInputElement>('#insert-image-input')?.click(); }}>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 00-2.828 0L6 21"/></svg>
Image Image
</button> </button>
<button onclick={() => { insertDropdown = false; document.querySelector<HTMLInputElement>('#insert-file-input')?.click(); }}> <button onclick={() => { insertDropdown = false; document.querySelector<HTMLInputElement>('#insert-file-input')?.click(); }}>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"/><polyline points="13 2 13 9 20 9"/></svg> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 01-2-2V4a2 2 0 012-2h8a2.4 2.4 0 011.704.706l3.588 3.588A2.4 2.4 0 0120 8v12a2 2 0 01-2 2z"/><path d="M14 2v5a1 1 0 001 1h5"/></svg>
File File
</button> </button>
<button onclick={() => { insertDropdown = false; tablePickerOpen = true; }}> <button onclick={() => { insertDropdown = false; tablePickerOpen = true; }}>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>
Table Table
</button> </button>
<button onclick={() => { insertDropdown = false; editor?.chain().focus().setHorizontalRule().run(); }}> <button onclick={() => { insertDropdown = false; editor?.chain().focus().setHorizontalRule().run(); }}>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="12" x2="21" y2="12"/></svg> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14"/></svg>
Horizontal Rule Horizontal Rule
</button> </button>
<button onclick={() => { insertDropdown = false; editor?.chain().focus().toggleCodeBlock().run(); }}> <button onclick={() => { insertDropdown = false; editor?.chain().focus().toggleCodeBlock().run(); }}>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m10 9-3 3 3 3"/><path d="m14 15 3-3-3-3"/><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
Code Block Code Block
</button> </button>
<button onclick={() => { insertDropdown = false; editor?.chain().focus().toggleBlockquote().run(); }}> <button onclick={() => { insertDropdown = false; editor?.chain().focus().toggleBlockquote().run(); }}>
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M3 6h4v4l-2 6H3l2-6H3V6zm10 0h4v4l-2 6h-2l2-6h-2V6z"/></svg> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 5H3"/><path d="M21 12H8"/><path d="M21 19H8"/><path d="M3 12v7"/></svg>
Quote Quote
</button> </button>
<button onclick={() => { insertDropdown = false; editor?.chain().focus().setDetails().run(); }}> <button onclick={() => { insertDropdown = false; editor?.chain().focus().setDetails().run(); }}>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><polyline points="10 8 14 12 10 16"/></svg> <svg width="15" height="15" 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>
Collapsible Section Collapsible Section
</button> </button>
</div> </div>
@@ -2520,7 +2838,7 @@
<!-- Heading dropdown --> <!-- Heading dropdown -->
<div class="fmt-dropdown-wrap"> <div class="fmt-dropdown-wrap">
<button class="fmt-btn" class:active={(editorState, editor.isActive('heading'))} onclick={(e) => { e.stopPropagation(); headingDropdown = !headingDropdown; colorDropdown = false; highlightDropdown = false; tablePickerOpen = false; alignDropdown = false; insertDropdown = false; }} title="Heading"> <button class="fmt-btn" class:active={(editorState, editor.isActive('heading'))} onclick={(e) => { e.stopPropagation(); headingDropdown = !headingDropdown; colorDropdown = false; highlightDropdown = false; tablePickerOpen = false; alignDropdown = false; insertDropdown = false; }} title="Heading">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16M4 6v12M20 6v12"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12h12"/><path d="M6 20V4"/><path d="M18 20V4"/></svg>
</button> </button>
{#if headingDropdown} {#if headingDropdown}
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -2538,22 +2856,22 @@
<!-- Text formatting --> <!-- Text formatting -->
<button class="fmt-btn" class:active={(editorState, editor.isActive('bold'))} onclick={() => editor?.chain().focus().toggleBold().run()} title="Bold (Ctrl+B)"> <button class="fmt-btn" class:active={(editorState, editor.isActive('bold'))} onclick={() => editor?.chain().focus().toggleBold().run()} title="Bold (Ctrl+B)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M6 4h8a4 4 0 014 4 4 4 0 01-4 4H6zm0 8h9a4 4 0 014 4 4 4 0 01-4 4H6z" stroke="currentColor" stroke-width="1" fill="none"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12h9a4 4 0 010 8H7a1 1 0 01-1-1V5a1 1 0 011-1h7a4 4 0 010 8"/></svg>
</button> </button>
<button class="fmt-btn" class:active={(editorState, editor.isActive('italic'))} onclick={() => editor?.chain().focus().toggleItalic().run()} title="Italic (Ctrl+I)"> <button class="fmt-btn" class:active={(editorState, editor.isActive('italic'))} onclick={() => editor?.chain().focus().toggleItalic().run()} title="Italic (Ctrl+I)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
</button> </button>
<button class="fmt-btn" class:active={(editorState, editor.isActive('underline'))} onclick={() => editor?.chain().focus().toggleUnderline().run()} title="Underline (Ctrl+U)"> <button class="fmt-btn" class:active={(editorState, editor.isActive('underline'))} onclick={() => editor?.chain().focus().toggleUnderline().run()} title="Underline (Ctrl+U)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v7a6 6 0 006 6 6 6 0 006-6V3"/><line x1="4" y1="21" x2="20" y2="21"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0012 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
</button> </button>
<button class="fmt-btn" class:active={(editorState, editor.isActive('strike'))} onclick={() => editor?.chain().focus().toggleStrike().run()} title="Strikethrough (Ctrl+Shift+X)"> <button class="fmt-btn" class:active={(editorState, editor.isActive('strike'))} onclick={() => editor?.chain().focus().toggleStrike().run()} title="Strikethrough (Ctrl+Shift+X)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 00-3 3 3 3 0 003 3h6"/><line x1="4" y1="12" x2="20" y2="12"/><path d="M8 20h7a3 3 0 003-3 3 3 0 00-3-3H8"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 00-2.83 4"/><path d="M14 12a4 4 0 010 8H6"/><line x1="4" x2="20" y1="12" y2="12"/></svg>
</button> </button>
<!-- Text color --> <!-- Text color -->
<div class="fmt-dropdown-wrap"> <div class="fmt-dropdown-wrap">
<button class="fmt-btn" onclick={(e) => { e.stopPropagation(); colorDropdown = !colorDropdown; headingDropdown = false; highlightDropdown = false; tablePickerOpen = false; alignDropdown = false; insertDropdown = false; }} title="Text Color"> <button class="fmt-btn" onclick={(e) => { e.stopPropagation(); colorDropdown = !colorDropdown; headingDropdown = false; highlightDropdown = false; tablePickerOpen = false; alignDropdown = false; insertDropdown = false; }} title="Text Color">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 2l5 0M12 2l-5 17M17 19H5M15 7l4 12"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16"/><path d="m6 16 6-12 6 12"/><path d="M8 12h8"/></svg>
<span class="color-indicator" style="background: {editor.getAttributes('textStyle').color || 'var(--accent)'}"></span> <span class="color-indicator" style="background: {editor.getAttributes('textStyle').color || 'var(--accent)'}"></span>
</button> </button>
{#if colorDropdown} {#if colorDropdown}
@@ -2581,49 +2899,49 @@
<!-- Lists --> <!-- Lists -->
<button class="fmt-btn" class:active={(editorState, editor.isActive('bulletList'))} onclick={() => editor?.chain().focus().toggleBulletList().run()} title="Bullet List (Ctrl+Shift+8)"> <button class="fmt-btn" class:active={(editorState, editor.isActive('bulletList'))} onclick={() => editor?.chain().focus().toggleBulletList().run()} title="Bullet List (Ctrl+Shift+8)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="3.5" cy="6" r="1.5" fill="currentColor"/><circle cx="3.5" cy="12" r="1.5" fill="currentColor"/><circle cx="3.5" cy="18" r="1.5" fill="currentColor"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>
</button> </button>
<button class="fmt-btn" class:active={(editorState, editor.isActive('orderedList'))} onclick={() => editor?.chain().focus().toggleOrderedList().run()} title="Ordered List (Ctrl+Shift+7)"> <button class="fmt-btn" class:active={(editorState, editor.isActive('orderedList'))} onclick={() => editor?.chain().focus().toggleOrderedList().run()} title="Ordered List (Ctrl+Shift+7)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><text x="1" y="8" font-size="8" fill="currentColor" stroke="none" font-weight="600">1</text><text x="1" y="14" font-size="8" fill="currentColor" stroke="none" font-weight="600">2</text><text x="1" y="20" font-size="8" fill="currentColor" stroke="none" font-weight="600">3</text></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5h10"/><path d="M11 12h10"/><path d="M11 19h10"/><path d="M4 4h1v5"/><path d="M4 9h2"/><path d="M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 00-2.6-1.02"/></svg>
</button> </button>
<button class="fmt-btn" class:active={(editorState, editor.isActive('taskList'))} onclick={() => editor?.chain().focus().toggleTaskList().run()} title="Task List (Ctrl+Shift+9)"> <button class="fmt-btn" class:active={(editorState, editor.isActive('taskList'))} onclick={() => editor?.chain().focus().toggleTaskList().run()} title="Task List (Ctrl+Shift+9)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><polyline points="4.5 6.5 6 8 8.5 4.5"/><line x1="13" y1="6.5" x2="21" y2="6.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><line x1="13" y1="17.5" x2="21" y2="17.5"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 5h8"/><path d="M13 12h8"/><path d="M13 19h8"/><path d="m3 17 2 2 4-4"/><path d="m3 7 2 2 4-4"/></svg>
</button> </button>
<div class="fmt-sep"></div> <div class="fmt-sep"></div>
<!-- Undo / Redo --> <!-- Undo / Redo -->
<button class="fmt-btn" onclick={() => editor?.chain().focus().undo().run()} title="Undo (Ctrl+Z)"> <button class="fmt-btn" onclick={() => editor?.chain().focus().undo().run()} title="Undo (Ctrl+Z)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 015.5 5.5 5.5 5.5 0 01-5.5 5.5H11"/></svg>
</button> </button>
<button class="fmt-btn" onclick={() => editor?.chain().focus().redo().run()} title="Redo (Ctrl+Shift+Z)"> <button class="fmt-btn" onclick={() => editor?.chain().focus().redo().run()} title="Redo (Ctrl+Shift+Z)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.13-9.36L23 10"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 14 5-5-5-5"/><path d="M20 9H9.5A5.5 5.5 0 004 14.5 5.5 5.5 0 009.5 20H13"/></svg>
</button> </button>
<div class="fmt-sep"></div> <div class="fmt-sep"></div>
<!-- Code & Code Block --> <!-- Code & Code Block -->
<button class="fmt-btn" class:active={(editorState, editor.isActive('code'))} onclick={() => editor?.chain().focus().toggleCode().run()} title="Inline Code (Ctrl+E)"> <button class="fmt-btn" class:active={(editorState, editor.isActive('code'))} onclick={() => editor?.chain().focus().toggleCode().run()} title="Inline Code (Ctrl+E)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/></svg>
</button> </button>
<button class="fmt-btn" class:active={(editorState, editor.isActive('codeBlock'))} onclick={() => editor?.chain().focus().toggleCodeBlock().run()} title="Code Block (Ctrl+Alt+C)"> <button class="fmt-btn" class:active={(editorState, editor.isActive('codeBlock'))} onclick={() => editor?.chain().focus().toggleCodeBlock().run()} title="Code Block (Ctrl+Alt+C)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><polyline points="9 8 5 12 9 16"/><polyline points="15 8 19 12 15 16"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m10 9-3 3 3 3"/><path d="m14 15 3-3-3-3"/><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
</button> </button>
<!-- Blockquote --> <!-- Blockquote -->
<button class="fmt-btn" class:active={(editorState, editor.isActive('blockquote'))} onclick={() => editor?.chain().focus().toggleBlockquote().run()} title="Quote (Ctrl+Shift+B)"> <button class="fmt-btn" class:active={(editorState, editor.isActive('blockquote'))} onclick={() => editor?.chain().focus().toggleBlockquote().run()} title="Quote (Ctrl+Shift+B)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M3 6h4v4l-2 6H3l2-6H3V6zm10 0h4v4l-2 6h-2l2-6h-2V6z"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 5H3"/><path d="M21 12H8"/><path d="M21 19H8"/><path d="M3 12v7"/></svg>
</button> </button>
<!-- Collapsible Section --> <!-- Collapsible Section -->
<button class="fmt-btn" class:active={(editorState, editor.isActive('details'))} onclick={() => editor?.chain().focus().setDetails().run()} title="Collapsible Section"> <button class="fmt-btn" class:active={(editorState, editor.isActive('details'))} onclick={() => editor?.chain().focus().setDetails().run()} title="Collapsible Section">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><polyline points="10 8 14 12 10 16"/></svg> <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> </button>
<!-- Table --> <!-- Table -->
<div class="fmt-dropdown-wrap"> <div class="fmt-dropdown-wrap">
<button class="fmt-btn" onclick={(e) => { e.stopPropagation(); tablePickerOpen = !tablePickerOpen; headingDropdown = false; colorDropdown = false; highlightDropdown = false; alignDropdown = false; insertDropdown = false; }} title="Insert Table"> <button class="fmt-btn" onclick={(e) => { e.stopPropagation(); tablePickerOpen = !tablePickerOpen; headingDropdown = false; colorDropdown = false; highlightDropdown = false; alignDropdown = false; insertDropdown = false; }} title="Insert Table">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>
</button> </button>
{#if tablePickerOpen} {#if tablePickerOpen}
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -2650,7 +2968,7 @@
<!-- Horizontal Rule --> <!-- Horizontal Rule -->
<button class="fmt-btn" onclick={() => editor?.chain().focus().setHorizontalRule().run()} title="Horizontal Rule"> <button class="fmt-btn" onclick={() => editor?.chain().focus().setHorizontalRule().run()} title="Horizontal Rule">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="12" x2="21" y2="12"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14"/></svg>
</button> </button>
<div class="fmt-sep"></div> <div class="fmt-sep"></div>
@@ -2658,7 +2976,7 @@
<!-- Highlight --> <!-- Highlight -->
<div class="fmt-dropdown-wrap"> <div class="fmt-dropdown-wrap">
<button class="fmt-btn" class:active={(editorState, editor.isActive('highlight'))} onclick={(e) => { e.stopPropagation(); highlightDropdown = !highlightDropdown; headingDropdown = false; colorDropdown = false; tablePickerOpen = false; alignDropdown = false; insertDropdown = false; }} title="Highlight (Ctrl+Shift+H)"> <button class="fmt-btn" class:active={(editorState, editor.isActive('highlight'))} onclick={(e) => { e.stopPropagation(); highlightDropdown = !highlightDropdown; headingDropdown = false; colorDropdown = false; tablePickerOpen = false; alignDropdown = false; insertDropdown = false; }} title="Highlight (Ctrl+Shift+H)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/><path d="M15 5l3 3"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 01-2.8 0l-5.2-5.2a2 2 0 010-2.8L14 4"/></svg>
<span class="color-indicator" style="background: {editor.getAttributes('highlight').color || 'var(--accent)'}"></span> <span class="color-indicator" style="background: {editor.getAttributes('highlight').color || 'var(--accent)'}"></span>
</button> </button>
{#if highlightDropdown} {#if highlightDropdown}
@@ -2684,10 +3002,10 @@
<!-- Subscript & Superscript --> <!-- Subscript & Superscript -->
<button class="fmt-btn" class:active={(editorState, editor.isActive('subscript'))} onclick={() => editor?.chain().focus().toggleSubscript().run()} title="Subscript"> <button class="fmt-btn" class:active={(editorState, editor.isActive('subscript'))} onclick={() => editor?.chain().focus().toggleSubscript().run()} title="Subscript">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><text x="2" y="14" font-size="14" fill="currentColor" stroke="none" font-weight="600">x</text><text x="14" y="20" font-size="10" fill="currentColor" stroke="none">2</text></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m4 5 8 8"/><path d="m12 5-8 8"/><path d="M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-.47-.17-.93-.48-1.29a2.11 2.11 0 00-2.62-.44c-.42.24-.74.62-.9 1.07"/></svg>
</button> </button>
<button class="fmt-btn" class:active={(editorState, editor.isActive('superscript'))} onclick={() => editor?.chain().focus().toggleSuperscript().run()} title="Superscript"> <button class="fmt-btn" class:active={(editorState, editor.isActive('superscript'))} onclick={() => editor?.chain().focus().toggleSuperscript().run()} title="Superscript">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><text x="2" y="16" font-size="14" fill="currentColor" stroke="none" font-weight="600">x</text><text x="14" y="10" font-size="10" fill="currentColor" stroke="none">2</text></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m4 19 8-8"/><path d="m12 19-8-8"/><path d="M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 00-2.617-.436c-.42.239-.738.614-.899 1.06"/></svg>
</button> </button>
<div class="fmt-sep"></div> <div class="fmt-sep"></div>
@@ -2696,32 +3014,32 @@
<div class="fmt-dropdown-wrap"> <div class="fmt-dropdown-wrap">
<button class="fmt-btn" onclick={(e) => { e.stopPropagation(); alignDropdown = !alignDropdown; headingDropdown = false; colorDropdown = false; highlightDropdown = false; tablePickerOpen = false; insertDropdown = false; }} title="Text Alignment"> <button class="fmt-btn" onclick={(e) => { e.stopPropagation(); alignDropdown = !alignDropdown; headingDropdown = false; colorDropdown = false; highlightDropdown = false; tablePickerOpen = false; insertDropdown = false; }} title="Text Alignment">
{#if (editorState, editor.isActive({ textAlign: 'center' }))} {#if (editorState, editor.isActive({ textAlign: 'center' }))}
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="10" x2="18" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/><line x1="6" y1="18" x2="18" y2="18"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 5H3"/><path d="M17 12H7"/><path d="M19 19H5"/></svg>
{:else if (editorState, editor.isActive({ textAlign: 'right' }))} {:else if (editorState, editor.isActive({ textAlign: 'right' }))}
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="9" y1="10" x2="21" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/><line x1="9" y1="18" x2="21" y2="18"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 5H3"/><path d="M21 12H9"/><path d="M21 19H7"/></svg>
{:else if (editorState, editor.isActive({ textAlign: 'justify' }))} {:else if (editorState, editor.isActive({ textAlign: 'justify' }))}
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/><line x1="3" y1="18" x2="21" y2="18"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h18"/><path d="M3 12h18"/><path d="M3 19h18"/></svg>
{:else} {:else}
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="10" x2="15" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/><line x1="3" y1="18" x2="15" y2="18"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 5H3"/><path d="M15 12H3"/><path d="M17 19H3"/></svg>
{/if} {/if}
</button> </button>
{#if alignDropdown} {#if alignDropdown}
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="fmt-dropdown align-dropdown" onclick={(e) => e.stopPropagation()}> <div class="fmt-dropdown align-dropdown" onclick={(e) => e.stopPropagation()}>
<button class:active={(editorState, editor.isActive({ textAlign: 'left' }))} onclick={() => { editor?.chain().focus().setTextAlign('left').run(); alignDropdown = false; }}> <button class:active={(editorState, editor.isActive({ textAlign: 'left' }))} onclick={() => { editor?.chain().focus().setTextAlign('left').run(); alignDropdown = false; }}>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="10" x2="15" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/><line x1="3" y1="18" x2="15" y2="18"/></svg> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 5H3"/><path d="M15 12H3"/><path d="M17 19H3"/></svg>
Left Left
</button> </button>
<button class:active={(editorState, editor.isActive({ textAlign: 'center' }))} onclick={() => { editor?.chain().focus().setTextAlign('center').run(); alignDropdown = false; }}> <button class:active={(editorState, editor.isActive({ textAlign: 'center' }))} onclick={() => { editor?.chain().focus().setTextAlign('center').run(); alignDropdown = false; }}>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="10" x2="18" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/><line x1="6" y1="18" x2="18" y2="18"/></svg> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 5H3"/><path d="M17 12H7"/><path d="M19 19H5"/></svg>
Center Center
</button> </button>
<button class:active={(editorState, editor.isActive({ textAlign: 'right' }))} onclick={() => { editor?.chain().focus().setTextAlign('right').run(); alignDropdown = false; }}> <button class:active={(editorState, editor.isActive({ textAlign: 'right' }))} onclick={() => { editor?.chain().focus().setTextAlign('right').run(); alignDropdown = false; }}>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="9" y1="10" x2="21" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/><line x1="9" y1="18" x2="21" y2="18"/></svg> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 5H3"/><path d="M21 12H9"/><path d="M21 19H7"/></svg>
Right Right
</button> </button>
<button class:active={(editorState, editor.isActive({ textAlign: 'justify' }))} onclick={() => { editor?.chain().focus().setTextAlign('justify').run(); alignDropdown = false; }}> <button class:active={(editorState, editor.isActive({ textAlign: 'justify' }))} onclick={() => { editor?.chain().focus().setTextAlign('justify').run(); alignDropdown = false; }}>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/><line x1="3" y1="18" x2="21" y2="18"/></svg> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h18"/><path d="M3 12h18"/><path d="M3 19h18"/></svg>
Justify Justify
</button> </button>
</div> </div>
@@ -3184,6 +3502,7 @@
placeholder="Tell AI what to do with the selected text..." placeholder="Tell AI what to do with the selected text..."
bind:value={aiCustomPrompt} bind:value={aiCustomPrompt}
onkeydown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); runAiAction('custom', aiCustomPrompt); } }} onkeydown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); runAiAction('custom', aiCustomPrompt); } }}
use:autofocus
></textarea> ></textarea>
<button class="ai-custom-submit" onclick={() => runAiAction('custom', aiCustomPrompt)} disabled={!aiCustomPrompt.trim()}> <button class="ai-custom-submit" onclick={() => runAiAction('custom', aiCustomPrompt)} disabled={!aiCustomPrompt.trim()}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" /></svg> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" /></svg>
@@ -3212,6 +3531,7 @@
placeholder="Describe the note you want to create..." placeholder="Describe the note you want to create..."
bind:value={aiCustomPrompt} bind:value={aiCustomPrompt}
onkeydown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); runAiAction('custom', aiCustomPrompt); } }} onkeydown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); runAiAction('custom', aiCustomPrompt); } }}
use:autofocus
></textarea> ></textarea>
<button class="ai-custom-submit" onclick={() => runAiAction('custom', aiCustomPrompt)} disabled={!aiCustomPrompt.trim()}> <button class="ai-custom-submit" onclick={() => runAiAction('custom', aiCustomPrompt)} disabled={!aiCustomPrompt.trim()}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4l-2-2"/><rect x="4" y="8" width="16" height="12" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M9 13v2"/><path d="M15 13v2"/></svg> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4l-2-2"/><rect x="4" y="8" width="16" height="12" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M9 13v2"/><path d="M15 13v2"/></svg>
@@ -3600,9 +3920,66 @@
.editor-body-wrapper { .editor-body-wrapper {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column;
overflow: hidden; overflow: hidden;
} }
.note-search-bar {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.note-search-input {
flex: 1;
background: transparent;
border: none;
color: var(--text-primary);
font-size: 13px;
outline: none;
min-width: 0;
}
.note-search-input::placeholder {
color: var(--text-secondary);
}
.note-search-count {
font-size: 12px;
color: var(--text-secondary);
white-space: nowrap;
}
.note-search-btn {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 2px;
border-radius: 4px;
display: flex;
align-items: center;
}
.note-search-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
:global(.note-search-match) {
background: rgba(255, 200, 0, 0.3);
border-radius: 2px;
}
:global(.note-search-active) {
background: rgba(255, 150, 0, 0.6);
}
.editor-body-row {
flex: 1;
display: flex;
flex-direction: row;
overflow: hidden;
min-height: 0;
}
.editor-body { .editor-body {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
@@ -3824,48 +4201,43 @@
border-radius: 8px; border-radius: 8px;
padding: 16px; padding: 16px;
margin: 1em 0; margin: 1em 0;
overflow-x: auto;
position: relative; position: relative;
} }
:global(.tiptap-wrapper .tiptap pre code) { :global(.tiptap-wrapper .tiptap pre code) {
display: block;
overflow-x: auto;
background: none; background: none;
padding: 0; padding: 0;
font-size: 13px; font-size: 13px;
line-height: 1.5; line-height: 1.5;
} }
:global(.tiptap-wrapper .tiptap pre .code-lang-wrapper) { :global(.tiptap-wrapper .tiptap pre)::after {
content: attr(data-language);
position: absolute; position: absolute;
top: 6px; top: 6px;
right: 6px; right: 6px;
z-index: 1;
}
:global(.tiptap-wrapper .tiptap pre .code-lang-btn) {
padding: 2px 6px; padding: 2px 6px;
border: none;
border-radius: 4px; border-radius: 4px;
background: transparent; background: transparent;
color: var(--text-tertiary); color: var(--text-tertiary);
font-size: 11px; font-size: 11px;
font-family: 'JetBrains Mono', 'Fira Code', monospace; font-family: 'JetBrains Mono', 'Fira Code', monospace;
cursor: pointer; cursor: pointer;
outline: none; opacity: 0;
opacity: 0.4; pointer-events: none;
transition: opacity 0.15s, background 0.15s, color 0.15s; z-index: 1;
} }
:global(.tiptap-wrapper .tiptap pre:hover .code-lang-btn) { :global(.tiptap-wrapper .tiptap pre[data-language=""])::after {
content: '•••';
}
:global(.tiptap-wrapper .tiptap pre:hover)::after {
opacity: 0.7; opacity: 0.7;
} }
:global(.tiptap-wrapper .tiptap pre .code-lang-btn:hover) {
opacity: 1;
background: color-mix(in srgb, var(--text-primary) 10%, transparent);
color: var(--text-secondary);
}
.code-lang-overlay { .code-lang-overlay {
position: fixed; position: fixed;
inset: 0; inset: 0;
@@ -4199,9 +4571,11 @@
} }
:global(.tiptap-wrapper .tiptap mark) { :global(.tiptap-wrapper .tiptap mark) {
padding: 1px 3px; padding: 0px 5px 2px;
border-radius: 3px; border-radius: 3px;
color: #333 !important; color: #333 !important;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
} }
:global(.dark .tiptap-wrapper .tiptap mark) { :global(.dark .tiptap-wrapper .tiptap mark) {
+4 -1
View File
@@ -114,13 +114,16 @@
<h4 class="shortcuts-group-title">Keyboard Shortcuts</h4> <h4 class="shortcuts-group-title">Keyboard Shortcuts</h4>
<div class="shortcut-row"><span class="shortcut-desc">New note</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>N</kbd></span></div> <div class="shortcut-row"><span class="shortcut-desc">New note</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>N</kbd></span></div>
<div class="shortcut-row"><span class="shortcut-desc">Quick open</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>P</kbd></span></div> <div class="shortcut-row"><span class="shortcut-desc">Quick open</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>P</kbd></span></div>
<div class="shortcut-row"><span class="shortcut-desc">Search</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>F</kbd></span></div> <div class="shortcut-row"><span class="shortcut-desc">Find in note</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>F</kbd></span></div>
<div class="shortcut-row"><span class="shortcut-desc">Search vault</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>F</kbd></span></div>
<div class="shortcut-row"><span class="shortcut-desc">Save</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>S</kbd></span></div> <div class="shortcut-row"><span class="shortcut-desc">Save</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>S</kbd></span></div>
<div class="shortcut-row"><span class="shortcut-desc">Bold</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>B</kbd></span></div> <div class="shortcut-row"><span class="shortcut-desc">Bold</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>B</kbd></span></div>
<div class="shortcut-row"><span class="shortcut-desc">Italic</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>I</kbd></span></div> <div class="shortcut-row"><span class="shortcut-desc">Italic</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>I</kbd></span></div>
<div class="shortcut-row"><span class="shortcut-desc">Underline</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>U</kbd></span></div> <div class="shortcut-row"><span class="shortcut-desc">Underline</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>U</kbd></span></div>
<div class="shortcut-row"><span class="shortcut-desc">Undo</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>Z</kbd></span></div> <div class="shortcut-row"><span class="shortcut-desc">Undo</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>Z</kbd></span></div>
<div class="shortcut-row"><span class="shortcut-desc">Redo</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd></span></div> <div class="shortcut-row"><span class="shortcut-desc">Redo</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd></span></div>
<div class="shortcut-row"><span class="shortcut-desc">Go back</span><span class="shortcut-keys"><kbd>Alt</kbd>+<kbd></kbd></span></div>
<div class="shortcut-row"><span class="shortcut-desc">Go forward</span><span class="shortcut-keys"><kbd>Alt</kbd>+<kbd></kbd></span></div>
<div class="shortcut-row"><span class="shortcut-desc">Exit focus mode</span><span class="shortcut-keys"><kbd>Esc</kbd></span></div> <div class="shortcut-row"><span class="shortcut-desc">Exit focus mode</span><span class="shortcut-keys"><kbd>Esc</kbd></span></div>
<h4 class="shortcuts-group-title">Editor Commands</h4> <h4 class="shortcuts-group-title">Editor Commands</h4>
+101 -5
View File
@@ -26,6 +26,7 @@
getQuickAccess, getQuickAccess,
addQuickAccess, addQuickAccess,
removeQuickAccess, removeQuickAccess,
reorderQuickAccess,
moveNote moveNote
} from '$lib/api'; } from '$lib/api';
import { formatRelativeTime } from '$lib/utils/time'; import { formatRelativeTime } from '$lib/utils/time';
@@ -48,16 +49,52 @@
let lastClickedPath = $state<string | null>(null); let lastClickedPath = $state<string | null>(null);
let batchMovePicker = $state(false); let batchMovePicker = $state(false);
// Quick Access drag-to-reorder
let qaDragFrom = $state<number | null>(null);
let qaDragOver = $state<number | null>(null);
let qaDragHalf = $state<'top' | 'bottom'>('bottom');
// Virtual scroll
let listContainer = $state<HTMLDivElement>(null!);
let scrollTop = $state(0);
let containerHeight = $state(600);
let itemHeight = $derived(compact ? 33 : 62);
const BUFFER = 10;
let totalHeight = $derived($sortedNotes.length * itemHeight);
let startIndex = $derived(Math.max(0, Math.floor(scrollTop / itemHeight) - BUFFER));
let endIndex = $derived(Math.min($sortedNotes.length, Math.ceil((scrollTop + containerHeight) / itemHeight) + BUFFER));
let visibleNotes = $derived($sortedNotes.slice(startIndex, endIndex));
let topPad = $derived(startIndex * itemHeight);
let bottomPad = $derived(Math.max(0, ($sortedNotes.length - endIndex) * itemHeight));
function onListScroll(e: Event) {
const el = e.currentTarget as HTMLDivElement;
scrollTop = el.scrollTop;
}
function clearSelection() { function clearSelection() {
selectedPaths = new Set(); selectedPaths = new Set();
lastClickedPath = null; lastClickedPath = null;
batchMovePicker = false; batchMovePicker = false;
} }
// Clear selection when view/notebook changes // Clear selection and reset scroll when view/notebook changes
$effect(() => { $effect(() => {
const _ = [$viewMode, $activeNotebook, $activeTag]; const _ = [$viewMode, $activeNotebook, $activeTag];
clearSelection(); clearSelection();
scrollTop = 0;
if (listContainer) listContainer.scrollTop = 0;
});
// Track container height via ResizeObserver
$effect(() => {
if (!listContainer) return;
const ro = new ResizeObserver((entries) => {
containerHeight = entries[0].contentRect.height;
});
ro.observe(listContainer);
return () => ro.disconnect();
}); });
interface FlatNotebook { name: string; path: string; depth: number; } interface FlatNotebook { name: string; path: string; depth: number; }
@@ -260,12 +297,33 @@
await removeQuickAccess(note.relative_path); await removeQuickAccess(note.relative_path);
const qaNotes = await getQuickAccess(); const qaNotes = await getQuickAccess();
$quickAccessPaths = qaNotes.map(n => n.relative_path); $quickAccessPaths = qaNotes.map(n => n.relative_path);
if ($viewMode === 'quickaccess') await refresh(); if ($viewMode === 'quickaccess') await refresh(true);
} catch (e) { } catch (e) {
console.error('Failed to remove from quick access:', e); console.error('Failed to remove from quick access:', e);
} }
} }
async function handleQaDrop(targetIndex: number) {
if (qaDragFrom === null) { qaDragFrom = null; qaDragOver = null; return; }
// Compute the actual insert position based on which half we're hovering
let insertAt = qaDragHalf === 'bottom' ? targetIndex + 1 : targetIndex;
if (qaDragFrom === insertAt || qaDragFrom + 1 === insertAt) {
qaDragFrom = null; qaDragOver = null; return;
}
const arr = [...$sortedNotes];
const [moved] = arr.splice(qaDragFrom, 1);
if (insertAt > qaDragFrom) insertAt--;
arr.splice(insertAt, 0, moved);
$notes = arr;
qaDragFrom = null;
qaDragOver = null;
try {
await reorderQuickAccess(arr.map(n => n.relative_path));
} catch (e) {
console.error('Failed to reorder quick access:', e);
}
}
async function handleMoveNote(note: NoteEntry, destPath: string) { async function handleMoveNote(note: NoteEntry, destPath: string) {
contextMenu = null; contextMenu = null;
movePickerNote = null; movePickerNote = null;
@@ -479,7 +537,7 @@
</div> </div>
{/if} {/if}
<div class="list-content"> <div class="list-content" bind:this={listContainer} onscroll={onListScroll}>
{#if $sortedNotes.length === 0} {#if $sortedNotes.length === 0}
<div class="empty-state"> <div class="empty-state">
{#if $viewMode === 'trash'} {#if $viewMode === 'trash'}
@@ -491,7 +549,9 @@
</div> </div>
{/if} {/if}
{#each $sortedNotes as note (note.path)} <div style="height: {topPad}px"></div>
{#each visibleNotes as note, i (note.path)}
{@const noteIndex = startIndex + i}
{#if editingNote === note.path} {#if editingNote === note.path}
<div class="note-item active"> <div class="note-item active">
<input <input
@@ -512,6 +572,8 @@
class:selected={selectedPaths.has(note.path)} class:selected={selectedPaths.has(note.path)}
class:pinned={note.meta.pinned} class:pinned={note.meta.pinned}
class:compact={compact} class:compact={compact}
class:qa-drag-above={$viewMode === 'quickaccess' && qaDragOver === noteIndex && qaDragFrom !== null && qaDragHalf === 'top'}
class:qa-drag-below={$viewMode === 'quickaccess' && qaDragOver === noteIndex && qaDragFrom !== null && qaDragHalf === 'bottom'}
onclick={(e) => handleNoteClick(e, note)} onclick={(e) => handleNoteClick(e, note)}
oncontextmenu={(e) => { oncontextmenu={(e) => {
e.preventDefault(); e.preventDefault();
@@ -528,6 +590,12 @@
}} }}
draggable="true" draggable="true"
ondragstart={(e) => { ondragstart={(e) => {
if ($viewMode === 'quickaccess') {
qaDragFrom = noteIndex;
e.dataTransfer!.setData('text/plain', note.path);
e.dataTransfer!.effectAllowed = 'move';
return;
}
if (selectedPaths.size > 1 && selectedPaths.has(note.path)) { if (selectedPaths.size > 1 && selectedPaths.has(note.path)) {
e.dataTransfer!.setData('text/plain', [...selectedPaths].join('\n')); e.dataTransfer!.setData('text/plain', [...selectedPaths].join('\n'));
} else { } else {
@@ -535,6 +603,25 @@
} }
e.dataTransfer!.effectAllowed = 'move'; e.dataTransfer!.effectAllowed = 'move';
}} }}
ondragover={(e) => {
if ($viewMode === 'quickaccess' && qaDragFrom !== null) {
e.preventDefault();
e.dataTransfer!.dropEffect = 'move';
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
qaDragHalf = e.clientY < rect.top + rect.height / 2 ? 'top' : 'bottom';
qaDragOver = noteIndex;
}
}}
ondragleave={() => {
if (qaDragOver === noteIndex) qaDragOver = null;
}}
ondrop={(e) => {
if ($viewMode === 'quickaccess' && qaDragFrom !== null) {
e.preventDefault();
handleQaDrop(noteIndex);
}
}}
ondragend={() => { qaDragFrom = null; qaDragOver = null; }}
> >
{#if compact} {#if compact}
<div class="note-compact-row"> <div class="note-compact-row">
@@ -572,6 +659,7 @@
</button> </button>
{/if} {/if}
{/each} {/each}
<div style="height: {bottomPad}px"></div>
</div> </div>
</div> </div>
@@ -761,8 +849,8 @@
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
transition: background 0.1s;
margin-bottom: 1px; margin-bottom: 1px;
contain: content;
} }
.note-item:hover { .note-item:hover {
@@ -1133,4 +1221,12 @@
color: var(--accent); color: var(--accent);
font-size: 14px; font-size: 14px;
} }
.note-item.qa-drag-above {
border-top: 2px solid var(--accent);
}
.note-item.qa-drag-below {
border-bottom: 2px solid var(--accent);
}
</style> </style>
+14 -2
View File
@@ -2,23 +2,35 @@
let { onResize }: { onResize: (delta: number) => void } = $props(); let { onResize }: { onResize: (delta: number) => void } = $props();
let active = $state(false); let active = $state(false);
let startX = 0; let startX = 0;
let rafId = 0;
let pendingDelta = 0;
function onMouseDown(e: MouseEvent) { function onMouseDown(e: MouseEvent) {
e.preventDefault(); e.preventDefault();
active = true; active = true;
startX = e.clientX; startX = e.clientX;
document.body.classList.add('resizing');
window.addEventListener('mousemove', onMouseMove); window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp); window.addEventListener('mouseup', onMouseUp);
} }
function onMouseMove(e: MouseEvent) { function onMouseMove(e: MouseEvent) {
const delta = e.clientX - startX; pendingDelta += e.clientX - startX;
startX = e.clientX; startX = e.clientX;
onResize(delta); if (!rafId) {
rafId = requestAnimationFrame(() => {
onResize(pendingDelta);
pendingDelta = 0;
rafId = 0;
});
}
} }
function onMouseUp() { function onMouseUp() {
active = false; active = false;
document.body.classList.remove('resizing');
if (rafId) { cancelAnimationFrame(rafId); rafId = 0; }
if (pendingDelta) { onResize(pendingDelta); pendingDelta = 0; }
window.removeEventListener('mousemove', onMouseMove); window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp); window.removeEventListener('mouseup', onMouseUp);
} }
+38 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { showSettings, theme, appConfig, updateAvailable as globalUpdateAvailable, installType, settingsTab } from '$lib/stores/app'; import { showSettings, theme, appConfig, updateAvailable as globalUpdateAvailable, updateObj as globalUpdateObj, installType, settingsTab } from '$lib/stores/app';
import { setTheme, setAccentColor, setFontSize, setFontFamily, setGeneralSettings, importObsidian, createBackup, listBackups, restoreBackup, deleteBackup, setBackupSettings, setAiSettings, testAiConnection } from '$lib/api'; import { setTheme, setAccentColor, setFontSize, setFontFamily, setGeneralSettings, importObsidian, createBackup, listBackups, restoreBackup, deleteBackup, setBackupSettings, setAiSettings, testAiConnection } from '$lib/api';
import { open as openDialog } from '@tauri-apps/plugin-dialog'; import { open as openDialog } from '@tauri-apps/plugin-dialog';
import { listen } from '@tauri-apps/api/event'; import { listen } from '@tauri-apps/api/event';
@@ -41,6 +41,14 @@
} }
}); });
// Pre-populate updater object from global store so Download & Install works without manual check
$effect(() => {
const obj = $globalUpdateObj;
if (obj && !updateObj) {
updateObj = obj;
}
});
async function handleCheckUpdate() { async function handleCheckUpdate() {
updateChecking = true; updateChecking = true;
updateMessage = null; updateMessage = null;
@@ -49,6 +57,7 @@
const update = await checkUpdate(); const update = await checkUpdate();
if (update) { if (update) {
updateObj = update; updateObj = update;
$globalUpdateObj = update;
updateAvailable = { version: update.version, body: update.body, date: update.date }; updateAvailable = { version: update.version, body: update.body, date: update.date };
globalUpdateAvailable.set({ version: update.version, body: update.body }); globalUpdateAvailable.set({ version: update.version, body: update.body });
updateMessage = { type: 'info', text: `Version ${update.version} is available!` }; updateMessage = { type: 'info', text: `Version ${update.version} is available!` };
@@ -1052,7 +1061,7 @@
<div class="update-notes">{updateAvailable.body}</div> <div class="update-notes">{updateAvailable.body}</div>
{/if} {/if}
</div> </div>
{#if $installType === 'appimage' || $installType === 'windows'} {#if $installType === 'appimage' || $installType === 'windows' || $installType === 'macos'}
<button class="update-install-btn" onclick={handleDownloadAndInstall} disabled={updateDownloading}> <button class="update-install-btn" onclick={handleDownloadAndInstall} disabled={updateDownloading}>
{#if updateDownloading} {#if updateDownloading}
<svg class="spinner-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" opacity="0.25" /><path d="M12 2a10 10 0 019.95 9" /></svg> <svg class="spinner-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" opacity="0.25" /><path d="M12 2a10 10 0 019.95 9" /></svg>
@@ -1069,6 +1078,16 @@
<div class="update-progress-fill" style="width: {updateProgress}%"></div> <div class="update-progress-fill" style="width: {updateProgress}%"></div>
</div> </div>
{/if} {/if}
{:else if $installType === 'deb'}
<div class="update-apt-info">
<p>Update via your package manager:</p>
<code>sudo apt update && sudo apt upgrade helix-notes</code>
</div>
{:else if $installType === 'aur'}
<div class="update-apt-info">
<p>Update via your AUR helper:</p>
<code>yay -Syu helixnotes</code>
</div>
{:else} {:else}
<a class="update-install-btn" href="https://codeberg.org/ArkHost/HelixNotes/releases" target="_blank" rel="noopener"> <a class="update-install-btn" href="https://codeberg.org/ArkHost/HelixNotes/releases" target="_blank" rel="noopener">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -1945,6 +1964,23 @@
cursor: not-allowed; cursor: not-allowed;
} }
.update-apt-info {
margin-top: 8px;
}
.update-apt-info p {
margin: 0 0 6px 0;
font-size: 13px;
color: var(--text-secondary);
}
.update-apt-info code {
display: block;
padding: 8px 12px;
background: var(--bg-secondary);
border-radius: 6px;
font-size: 12px;
user-select: all;
}
.update-progress-bar { .update-progress-bar {
margin-top: 10px; margin-top: 10px;
height: 6px; height: 6px;
+85 -5
View File
@@ -17,7 +17,7 @@
quickAccessPaths, quickAccessPaths,
collapsedNotebooks collapsedNotebooks
} from '$lib/stores/app'; } from '$lib/stores/app';
import { getNotebooks, getAllTags, createNotebook, deleteNotebook, renameNotebook, getNotebookIcons, setNotebookIcon, saveAttachment, getQuickAccess, addQuickAccess, removeQuickAccess, emptyTrash, moveNote, readNote, getNotes } from '$lib/api'; import { getNotebooks, getAllTags, createNotebook, deleteNotebook, renameNotebook, moveNotebook, getNotebookIcons, setNotebookIcon, saveAttachment, getQuickAccess, addQuickAccess, removeQuickAccess, emptyTrash, moveNote, readNote, getNotes } from '$lib/api';
import { open as openDialog } from '@tauri-apps/plugin-dialog'; import { open as openDialog } from '@tauri-apps/plugin-dialog';
import { readFile } from '@tauri-apps/plugin-fs'; import { readFile } from '@tauri-apps/plugin-fs';
import { convertFileSrc } from '@tauri-apps/api/core'; import { convertFileSrc } from '@tauri-apps/api/core';
@@ -32,6 +32,7 @@
let newNotebookName = $state(''); let newNotebookName = $state('');
let showNewNotebook = $state(false); let showNewNotebook = $state(false);
let dropTargetPath = $state<string | null>(null); let dropTargetPath = $state<string | null>(null);
let draggedNotebookPath = $state<string | null>(null);
let contextMenu = $state<{ x: number; y: number; notebook: NotebookEntry } | null>(null); let contextMenu = $state<{ x: number; y: number; notebook: NotebookEntry } | null>(null);
let trashContextMenu = $state<{ x: number; y: number } | null>(null); let trashContextMenu = $state<{ x: number; y: number } | null>(null);
function toggleCollapse(path: string, e: MouseEvent) { function toggleCollapse(path: string, e: MouseEvent) {
@@ -150,6 +151,43 @@
} }
} }
async function handleNotebookDrop(e: DragEvent, destPath: string) {
e.preventDefault();
dropTargetPath = null;
const srcPath = e.dataTransfer?.getData('text/plain');
if (!srcPath) return;
draggedNotebookPath = null;
// Don't move onto self or descendant
if (destPath === srcPath || destPath.startsWith(srcPath + '/')) return;
// Don't move if already in that parent
const parentDir = srcPath.substring(0, srcPath.lastIndexOf('/'));
if (parentDir === destPath) return;
try {
const oldName = srcPath.split('/').pop() || '';
const newBasePath = destPath + '/' + oldName;
await moveNotebook(srcPath, destPath);
// Update collapsedNotebooks paths
$collapsedNotebooks = $collapsedNotebooks.map(p => {
if (p === srcPath) return newBasePath;
if (p.startsWith(srcPath + '/')) return newBasePath + p.slice(srcPath.length);
return p;
});
// Update active notebook/note if inside the moved notebook
if ($activeNotebook?.path === srcPath || $activeNotebook?.path.startsWith(srcPath + '/')) {
selectAllNotes();
}
if ($activeNotePath && $activeNotePath.startsWith(srcPath + '/')) {
const newNotePath = newBasePath + $activeNotePath.slice(srcPath.length);
$activeNotePath = newNotePath;
$activeNote = await readNote(newNotePath);
}
$notebookIcons = await getNotebookIcons();
await refresh();
} catch (e) {
console.error('Failed to move notebook:', e);
}
}
function startRename(nb: NotebookEntry) { function startRename(nb: NotebookEntry) {
contextMenu = null; contextMenu = null;
editingNotebook = nb.path; editingNotebook = nb.path;
@@ -292,7 +330,25 @@
</nav> </nav>
<div class="section"> <div class="section">
<div class="section-header"> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div
class="section-header"
class:drop-target={dropTargetPath === '__root__'}
ondragover={(e) => {
if (draggedNotebookPath) {
e.preventDefault();
e.dataTransfer!.dropEffect = 'move';
dropTargetPath = '__root__';
}
}}
ondragleave={() => { if (dropTargetPath === '__root__') dropTargetPath = null; }}
ondrop={(e) => {
if (draggedNotebookPath) {
const vaultRoot = $appConfig?.active_vault;
if (vaultRoot) handleNotebookDrop(e, vaultRoot);
}
}}
>
<span class="section-title">Notebooks</span> <span class="section-title">Notebooks</span>
<button class="icon-btn-sm" onclick={() => (showNewNotebook = !showNewNotebook)} title="New notebook"> <button class="icon-btn-sm" onclick={() => (showNewNotebook = !showNewNotebook)} title="New notebook">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -423,11 +479,34 @@
class:active={$viewMode === 'notebook' && $activeNotebook?.path === nb.path} class:active={$viewMode === 'notebook' && $activeNotebook?.path === nb.path}
class:drop-target={dropTargetPath === nb.path} class:drop-target={dropTargetPath === nb.path}
style="padding-left: {8 + depth * 16}px" style="padding-left: {8 + depth * 16}px"
draggable="true"
onclick={() => selectNotebook(nb)} onclick={() => selectNotebook(nb)}
oncontextmenu={(e) => onContextMenu(e, nb)} oncontextmenu={(e) => onContextMenu(e, nb)}
ondragover={(e) => { e.preventDefault(); e.dataTransfer!.dropEffect = 'move'; dropTargetPath = nb.path; }} ondragstart={(e) => { draggedNotebookPath = nb.path; e.dataTransfer!.setData('text/plain', nb.path); e.dataTransfer!.effectAllowed = 'move'; }}
ondragend={() => { draggedNotebookPath = null; }}
ondragover={(e) => {
e.preventDefault();
if (draggedNotebookPath) {
// Prevent drop on self or descendant
if (nb.path === draggedNotebookPath || nb.path.startsWith(draggedNotebookPath + '/')) {
e.dataTransfer!.dropEffect = 'none';
return;
}
// Prevent no-op (already in this parent)
const parentDir = draggedNotebookPath.substring(0, draggedNotebookPath.lastIndexOf('/'));
if (parentDir === nb.path) { e.dataTransfer!.dropEffect = 'none'; return; }
}
e.dataTransfer!.dropEffect = 'move';
dropTargetPath = nb.path;
}}
ondragleave={() => { if (dropTargetPath === nb.path) dropTargetPath = null; }} ondragleave={() => { if (dropTargetPath === nb.path) dropTargetPath = null; }}
ondrop={(e) => handleNoteDrop(e, nb)} ondrop={(e) => {
if (draggedNotebookPath) {
handleNotebookDrop(e, nb.path);
} else {
handleNoteDrop(e, nb);
}
}}
> >
{#if hasChildren} {#if hasChildren}
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -610,7 +689,8 @@
color: var(--text-accent); color: var(--text-accent);
} }
.notebook-item.drop-target { .notebook-item.drop-target,
.section-header.drop-target {
background: color-mix(in srgb, var(--accent) 20%, transparent); background: color-mix(in srgb, var(--accent) 20%, transparent);
outline: 2px dashed var(--accent); outline: 2px dashed var(--accent);
outline-offset: -2px; outline-offset: -2px;
+10 -2
View File
@@ -7,6 +7,7 @@
} = $props(); } = $props();
const appWindow = getCurrentWindow(); const appWindow = getCurrentWindow();
const isMac = navigator.platform.startsWith('Mac');
let maximized = $state(false); let maximized = $state(false);
async function checkMaximized() { async function checkMaximized() {
@@ -59,7 +60,7 @@
</script> </script>
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="titlebar" onmousedown={handleMouseDown}> <div class="titlebar" class:macos={isMac} onmousedown={handleMouseDown}>
<div class="titlebar-brand"> <div class="titlebar-brand">
<svg width="18" height="18" viewBox="0 0 48 48" fill="none"> <svg width="18" height="18" viewBox="0 0 48 48" fill="none">
<rect width="48" height="48" rx="12" fill="var(--accent)" /> <rect width="48" height="48" rx="12" fill="var(--accent)" />
@@ -96,6 +97,7 @@
New Note New Note
</button> </button>
</div> </div>
{#if !isMac}
<div class="titlebar-controls"> <div class="titlebar-controls">
<button class="titlebar-btn" onclick={minimize} title="Minimize"> <button class="titlebar-btn" onclick={minimize} title="Minimize">
<svg width="10" height="10" viewBox="0 0 10 10"> <svg width="10" height="10" viewBox="0 0 10 10">
@@ -121,6 +123,7 @@
</svg> </svg>
</button> </button>
</div> </div>
{/if}
</div> </div>
<style> <style>
@@ -203,7 +206,7 @@
padding: 4px 12px 4px 10px; padding: 4px 12px 4px 10px;
border: none; border: none;
border-radius: 7px; border-radius: 7px;
background: var(--accent); background: color-mix(in srgb, var(--accent) 85%, black);
color: white; color: white;
font-size: 11.5px; font-size: 11.5px;
font-weight: 600; font-weight: 600;
@@ -252,4 +255,9 @@
background: #e81123; background: #e81123;
color: white; color: white;
} }
/* macOS: add left padding for native traffic light buttons */
.titlebar.macos .titlebar-brand {
padding-left: 78px;
}
</style> </style>
+10 -2
View File
@@ -51,6 +51,7 @@ export const updateAvailable = writable<{
version: string; version: string;
body?: string; body?: string;
} | null>(null); } | null>(null);
export const updateObj = writable<any>(null);
export const installType = writable<string>("native"); export const installType = writable<string>("native");
export async function checkForUpdate() { export async function checkForUpdate() {
@@ -59,6 +60,7 @@ export async function checkForUpdate() {
const update = await check(); const update = await check();
if (update) { if (update) {
updateAvailable.set({ version: update.version, body: update.body }); updateAvailable.set({ version: update.version, body: update.body });
updateObj.set(update);
} }
} catch { } catch {
// Silent fail — don't disrupt app startup // Silent fail — don't disrupt app startup
@@ -66,7 +68,12 @@ export async function checkForUpdate() {
} }
// Derived // Derived
export const sortedNotes = derived([notes, sortMode], ([$notes, $sortMode]) => { export const sortedNotes = derived(
[notes, sortMode, viewMode],
([$notes, $sortMode, $viewMode]) => {
// Quick Access preserves stored order
if ($viewMode === "quickaccess") return $notes;
const pinned = $notes.filter((n) => n.meta.pinned); const pinned = $notes.filter((n) => n.meta.pinned);
const unpinned = $notes.filter((n) => !n.meta.pinned); const unpinned = $notes.filter((n) => !n.meta.pinned);
@@ -89,7 +96,8 @@ export const sortedNotes = derived([notes, sortMode], ([$notes, $sortMode]) => {
}; };
return [...pinned.sort(sortFn), ...unpinned.sort(sortFn)]; return [...pinned.sort(sortFn), ...unpinned.sort(sortFn)];
}); },
);
export const vaultState = derived( export const vaultState = derived(
[ [