mirror of
https://gitlab.com/ArkHost/HelixNotes.git
synced 2026-09-19 17:37:29 +02:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6dfea864f3 | ||
|
|
070590bd2a | ||
|
|
d453bbfc3c | ||
|
|
8acbb872dd | ||
|
|
d695931502 | ||
|
|
f6eff80e43 | ||
|
|
f688cf4bd4 | ||
|
|
a95e240bcd | ||
|
|
bbcca553ce | ||
|
|
6a40f553f1 |
@@ -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.6_amd64.AppImage](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.0.6/HelixNotes_1.0.6_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.6_amd64.deb](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.0.6/HelixNotes_1.0.6_amd64.deb) | Ubuntu 22.04+ |
|
||||||
| macOS | Coming soon |
|
| Windows | [HelixNotes_1.0.6_x64-setup.exe](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.0.6/HelixNotes_1.0.6_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)
|
||||||
|
|
||||||
|
|||||||
+1
-1
@@ -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.1",
|
"version": "1.0.7",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite dev",
|
"dev": "vite dev",
|
||||||
|
|||||||
Generated
+1
-1
@@ -1778,7 +1778,7 @@ checksum = "2304e00983f87ffb38b55b444b5e3b60a884b5d30c0fca7d82fe33449bbe55ea"
|
|||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "helixnotes"
|
name = "helixnotes"
|
||||||
version = "1.0.1"
|
version = "1.0.7"
|
||||||
dependencies = [
|
dependencies = [
|
||||||
"chrono",
|
"chrono",
|
||||||
"dirs",
|
"dirs",
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
[package]
|
[package]
|
||||||
name = "helixnotes"
|
name = "helixnotes"
|
||||||
version = "1.0.1"
|
version = "1.0.7"
|
||||||
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"
|
||||||
|
|||||||
@@ -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 ──
|
||||||
@@ -195,8 +196,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(¬e_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(¬e_path)
|
||||||
|
.strip_prefix(vault_path)
|
||||||
|
.map(|p| p.to_string_lossy().to_string())
|
||||||
|
.unwrap_or_default();
|
||||||
|
|
||||||
|
let new_full_path = operations::move_note(¬e_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 +469,13 @@ pub fn remove_quick_access(
|
|||||||
operations::remove_quick_access(vault_path, ¬e_relative)
|
operations::remove_quick_access(vault_path, ¬e_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())?;
|
||||||
@@ -1341,3 +1380,18 @@ fn save_app_config(config: &AppConfig) -> Result<(), String> {
|
|||||||
std::fs::write(path, data).map_err(|e| e.to_string())?;
|
std::fs::write(path, data).map_err(|e| e.to_string())?;
|
||||||
Ok(())
|
Ok(())
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ── Install Type Detection ──
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
pub fn get_install_type() -> String {
|
||||||
|
if cfg!(target_os = "windows") {
|
||||||
|
"windows".to_string()
|
||||||
|
} else if std::env::var("APPIMAGE").is_ok() {
|
||||||
|
"appimage".to_string()
|
||||||
|
} else if std::path::Path::new("/var/lib/dpkg/info/helix-notes.list").exists() {
|
||||||
|
"deb".to_string()
|
||||||
|
} else {
|
||||||
|
"native".to_string()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -79,6 +79,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,
|
||||||
@@ -94,6 +95,7 @@ pub fn run() {
|
|||||||
commands::set_ai_settings,
|
commands::set_ai_settings,
|
||||||
commands::test_ai_connection,
|
commands::test_ai_connection,
|
||||||
commands::ai_ask,
|
commands::ai_ask,
|
||||||
|
commands::get_install_type,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
if close_to_tray {
|
if close_to_tray {
|
||||||
|
|||||||
@@ -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.1",
|
"version": "1.0.7",
|
||||||
"identifier": "com.helixnotes.app",
|
"identifier": "com.helixnotes.app",
|
||||||
"build": {
|
"build": {
|
||||||
"frontendDist": "../build",
|
"frontendDist": "../build",
|
||||||
|
|||||||
+10
-1
@@ -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;
|
||||||
|
}
|
||||||
|
|||||||
@@ -213,6 +213,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");
|
||||||
}
|
}
|
||||||
@@ -309,3 +313,7 @@ export async function aiAsk(
|
|||||||
): Promise<void> {
|
): Promise<void> {
|
||||||
return invoke("ai_ask", { action, text, customPrompt, requestId });
|
return invoke("ai_ask", { action, text, customPrompt, requestId });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function getInstallType(): Promise<string> {
|
||||||
|
return invoke("get_install_type");
|
||||||
|
}
|
||||||
|
|||||||
@@ -20,11 +20,15 @@
|
|||||||
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';
|
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 +36,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 +106,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 +129,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 +152,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,7 +206,7 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:window onkeydown={handleKeydown} />
|
<svelte:window onkeydown={handleKeydown} onmousedown={handleMouseDown} />
|
||||||
|
|
||||||
<div class="app-shell">
|
<div class="app-shell">
|
||||||
{#if $focusMode}
|
{#if $focusMode}
|
||||||
|
|||||||
@@ -63,6 +63,17 @@
|
|||||||
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);
|
||||||
|
|
||||||
// AI
|
// AI
|
||||||
@@ -93,6 +104,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);
|
||||||
@@ -267,6 +286,31 @@
|
|||||||
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',
|
||||||
addProseMirrorPlugins() {
|
addProseMirrorPlugins() {
|
||||||
@@ -334,6 +378,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 +410,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 +443,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 +457,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 +503,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 +723,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;
|
||||||
@@ -1038,9 +1107,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[] = [];
|
||||||
@@ -1125,7 +1197,15 @@
|
|||||||
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 '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 +1224,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 +1368,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 +1476,10 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 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>');
|
src = src.replace(/^- \[x\][^\S\n]+(.+)$/gm, '- <tiptask checked="true">$1</tiptask>');
|
||||||
src = src.replace(/^- \[ \]\s+(.+)$/gm, '- <tiptask checked="false">$1</tiptask>');
|
src = src.replace(/^- \[x\][^\S\n]*$/gm, '- <tiptask checked="true"> </tiptask>');
|
||||||
|
src = src.replace(/^- \[ \][^\S\n]+(.+)$/gm, '- <tiptask checked="false">$1</tiptask>');
|
||||||
|
src = src.replace(/^- \[ \][^\S\n]*$/gm, '- <tiptask checked="false"> </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);
|
||||||
@@ -1353,6 +1521,19 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
});
|
||||||
|
|
||||||
// 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,6 +1599,7 @@
|
|||||||
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,
|
||||||
@@ -1579,7 +1761,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 +2476,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 +2593,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
|
||||||
@@ -2470,6 +2697,7 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if editorReady && !$sourceMode}
|
{#if editorReady && !$sourceMode}
|
||||||
@@ -2478,37 +2706,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 +2748,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 +2766,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 +2809,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 +2878,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 +2886,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 +2912,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 +2924,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 +3412,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 +3441,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 +3830,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;
|
||||||
@@ -4199,9 +4486,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) {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { showSettings, theme, appConfig } from '$lib/stores/app';
|
import { showSettings, theme, appConfig, updateAvailable as globalUpdateAvailable, 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';
|
||||||
@@ -24,6 +24,23 @@
|
|||||||
}
|
}
|
||||||
loadAppVersion();
|
loadAppVersion();
|
||||||
|
|
||||||
|
// Switch to requested tab if set externally (e.g. from update badge)
|
||||||
|
$effect(() => {
|
||||||
|
const tab = $settingsTab;
|
||||||
|
if (tab) {
|
||||||
|
activeTab = tab as Tab;
|
||||||
|
$settingsTab = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Pre-populate from global store if update was already detected at startup
|
||||||
|
$effect(() => {
|
||||||
|
const global = $globalUpdateAvailable;
|
||||||
|
if (global && !updateAvailable) {
|
||||||
|
updateAvailable = { version: global.version, body: global.body };
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
async function handleCheckUpdate() {
|
async function handleCheckUpdate() {
|
||||||
updateChecking = true;
|
updateChecking = true;
|
||||||
updateMessage = null;
|
updateMessage = null;
|
||||||
@@ -33,6 +50,7 @@
|
|||||||
if (update) {
|
if (update) {
|
||||||
updateObj = update;
|
updateObj = 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 });
|
||||||
updateMessage = { type: 'info', text: `Version ${update.version} is available!` };
|
updateMessage = { type: 'info', text: `Version ${update.version} is available!` };
|
||||||
} else {
|
} else {
|
||||||
updateMessage = { type: 'success', text: 'You are on the latest version.' };
|
updateMessage = { type: 'success', text: 'You are on the latest version.' };
|
||||||
@@ -1034,6 +1052,7 @@
|
|||||||
<div class="update-notes">{updateAvailable.body}</div>
|
<div class="update-notes">{updateAvailable.body}</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
{#if $installType === 'appimage' || $installType === 'windows'}
|
||||||
<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>
|
||||||
@@ -1050,6 +1069,19 @@
|
|||||||
<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}
|
||||||
|
<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">
|
||||||
|
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>
|
||||||
|
</svg>
|
||||||
|
Download from Codeberg
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
@@ -1918,6 +1950,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;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { getCurrentWindow } from '@tauri-apps/api/window';
|
import { getCurrentWindow } from '@tauri-apps/api/window';
|
||||||
import { vaultReady, focusMode } from '$lib/stores/app';
|
import { vaultReady, focusMode, updateAvailable, showSettings, settingsTab } from '$lib/stores/app';
|
||||||
|
|
||||||
let { onNewNote = () => {} }: {
|
let { onNewNote = () => {} }: {
|
||||||
onNewNote?: () => void;
|
onNewNote?: () => void;
|
||||||
@@ -71,6 +71,12 @@
|
|||||||
<line x1="29" y1="18" x2="19" y2="30" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.7" />
|
<line x1="29" y1="18" x2="19" y2="30" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.7" />
|
||||||
</svg>
|
</svg>
|
||||||
<span class="titlebar-title">HelixNotes</span>
|
<span class="titlebar-title">HelixNotes</span>
|
||||||
|
{#if $updateAvailable}
|
||||||
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||||
|
<button class="update-badge" onmousedown={(e) => e.stopPropagation()} onclick={() => { $settingsTab = 'updates'; $showSettings = true; }}>
|
||||||
|
v{$updateAvailable.version} available
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="titlebar-actions">
|
<div class="titlebar-actions">
|
||||||
<button class="switch-vault-btn" onclick={() => ($vaultReady = false)} title="Switch Vault">
|
<button class="switch-vault-btn" onclick={() => ($vaultReady = false)} title="Switch Vault">
|
||||||
@@ -144,6 +150,25 @@
|
|||||||
color: var(--text-tertiary);
|
color: var(--text-tertiary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.update-badge {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--accent);
|
||||||
|
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
||||||
|
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 1px 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
pointer-events: auto;
|
||||||
|
-webkit-app-region: no-drag;
|
||||||
|
transition: background 0.15s, border-color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.update-badge:hover {
|
||||||
|
background: color-mix(in srgb, var(--accent) 20%, transparent);
|
||||||
|
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
.titlebar-actions {
|
.titlebar-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
+48
-22
@@ -23,6 +23,7 @@ export const searchQuery = writable("");
|
|||||||
export const showCommandPalette = writable(false);
|
export const showCommandPalette = writable(false);
|
||||||
export const showSearch = writable(false);
|
export const showSearch = writable(false);
|
||||||
export const showSettings = writable(false);
|
export const showSettings = writable(false);
|
||||||
|
export const settingsTab = writable<string | null>(null);
|
||||||
export const showInfo = writable(false);
|
export const showInfo = writable(false);
|
||||||
export const notebookIcons = writable<Record<string, string>>({});
|
export const notebookIcons = writable<Record<string, string>>({});
|
||||||
export const quickAccessPaths = writable<string[]>([]);
|
export const quickAccessPaths = writable<string[]>([]);
|
||||||
@@ -45,31 +46,56 @@ export const focusMode = writable(false);
|
|||||||
// Theme
|
// Theme
|
||||||
export const theme = writable<string>("system");
|
export const theme = writable<string>("system");
|
||||||
|
|
||||||
// Derived
|
// Update state
|
||||||
export const sortedNotes = derived([notes, sortMode], ([$notes, $sortMode]) => {
|
export const updateAvailable = writable<{
|
||||||
const pinned = $notes.filter((n) => n.meta.pinned);
|
version: string;
|
||||||
const unpinned = $notes.filter((n) => !n.meta.pinned);
|
body?: string;
|
||||||
|
} | null>(null);
|
||||||
|
export const installType = writable<string>("native");
|
||||||
|
|
||||||
const sortFn = (a: NoteEntry, b: NoteEntry) => {
|
export async function checkForUpdate() {
|
||||||
switch ($sortMode) {
|
try {
|
||||||
case "title":
|
const { check } = await import("@tauri-apps/plugin-updater");
|
||||||
return a.meta.title.localeCompare(b.meta.title);
|
const update = await check();
|
||||||
case "created":
|
if (update) {
|
||||||
return (
|
updateAvailable.set({ version: update.version, body: update.body });
|
||||||
new Date(b.meta.created).getTime() -
|
|
||||||
new Date(a.meta.created).getTime()
|
|
||||||
);
|
|
||||||
case "modified":
|
|
||||||
default:
|
|
||||||
return (
|
|
||||||
new Date(b.meta.modified).getTime() -
|
|
||||||
new Date(a.meta.modified).getTime()
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
};
|
} catch {
|
||||||
|
// Silent fail — don't disrupt app startup
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return [...pinned.sort(sortFn), ...unpinned.sort(sortFn)];
|
// Derived
|
||||||
});
|
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 unpinned = $notes.filter((n) => !n.meta.pinned);
|
||||||
|
|
||||||
|
const sortFn = (a: NoteEntry, b: NoteEntry) => {
|
||||||
|
switch ($sortMode) {
|
||||||
|
case "title":
|
||||||
|
return a.meta.title.localeCompare(b.meta.title);
|
||||||
|
case "created":
|
||||||
|
return (
|
||||||
|
new Date(b.meta.created).getTime() -
|
||||||
|
new Date(a.meta.created).getTime()
|
||||||
|
);
|
||||||
|
case "modified":
|
||||||
|
default:
|
||||||
|
return (
|
||||||
|
new Date(b.meta.modified).getTime() -
|
||||||
|
new Date(a.meta.modified).getTime()
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return [...pinned.sort(sortFn), ...unpinned.sort(sortFn)];
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
export const vaultState = derived(
|
export const vaultState = derived(
|
||||||
[
|
[
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import '../app.css';
|
import '../app.css';
|
||||||
import { theme, appConfig, activeNotePath } from '$lib/stores/app';
|
import { theme, appConfig, activeNotePath, installType, checkForUpdate } from '$lib/stores/app';
|
||||||
import { openUrl } from '@tauri-apps/plugin-opener';
|
import { openUrl } from '@tauri-apps/plugin-opener';
|
||||||
import { openFile } from '$lib/api';
|
import { openFile, getInstallType } from '$lib/api';
|
||||||
import { get } from 'svelte/store';
|
import { get } from 'svelte/store';
|
||||||
|
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
@@ -31,6 +31,12 @@
|
|||||||
return resolved.join('/');
|
return resolved.join('/');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Detect install type and check for updates on startup
|
||||||
|
onMount(() => {
|
||||||
|
getInstallType().then(t => installType.set(t)).catch(() => {});
|
||||||
|
checkForUpdate();
|
||||||
|
});
|
||||||
|
|
||||||
// Intercept all link clicks in capture phase to prevent webview navigation
|
// Intercept all link clicks in capture phase to prevent webview navigation
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
function handleLinkClick(e: MouseEvent) {
|
function handleLinkClick(e: MouseEvent) {
|
||||||
|
|||||||
Reference in New Issue
Block a user