svedit 0.11.1 → 0.13.0

package/package.json

@@ -1,68 +1,70 @@
 {
-	"name": "svedit",
-	"version": "0.11.1",
-	"license": "MIT",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint .",
-		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run"
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*",
-		"src/lib",
-		"!src/lib/**/*.test.*",
-		"!src/lib/**/*.spec.*"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@eslint/compat": "^2.0.3",
-		"@eslint/js": "^10.0.1",
-		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/kit": "^2.55.0",
-		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^7.0.0",
-		"@types/node": "^25.6.0",
-		"@typescript-eslint/eslint-plugin": "^8.57.0",
-		"@typescript-eslint/parser": "^8.57.0",
-		"@vitest/browser": "^4.1.0",
-		"@vitest/browser-preview": "^4.1.0",
-		"eslint": "^10.0.3",
-		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.15.1",
-		"globals": "^17.4.0",
-		"nanoid": "^5.1.6",
-		"prettier": "^3.8.1",
-		"prettier-plugin-svelte": "^3.5.1",
-		"publint": "^0.3.18",
-		"svelte": "^5.53.12",
-		"svelte-check": "^4.4.5",
-		"typescript": "^5.9.3",
-		"vite": "^8.0.0",
-		"vitest": "^4.1.0",
-		"vitest-browser-svelte": "^2.1.0"
-	}
-}
+  "name": "svedit",
+  "version": "0.13.0",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "src/lib",
+    "!src/lib/**/*.test.*",
+    "!src/lib/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.0.3",
+    "@eslint/js": "^10.0.1",
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.55.0",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@types/node": "^25.6.0",
+    "@typescript-eslint/eslint-plugin": "^8.57.0",
+    "@typescript-eslint/parser": "^8.57.0",
+    "@vitest/browser": "^4.1.0",
+    "@vitest/browser-preview": "^4.1.0",
+    "eslint": "^10.0.3",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.15.1",
+    "globals": "^17.4.0",
+    "nanoid": "^5.1.6",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.1",
+    "publint": "^0.3.18",
+    "svelte": "^5.53.12",
+    "svelte-check": "^4.4.5",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.0",
+    "vitest-browser-svelte": "^2.1.0"
+  },
+  "allowScripts": {
+    "fsevents@2.3.3": true
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "check:strict": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.strict.json",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "test:unit": "vitest",
+    "test": "pnpm test:unit --run"
+  }
+}

package/src/lib/{Command.svelte.js → Command.svelte.ts}

@@ -1,6 +1,16 @@
 import { insert_default_node, break_text_node } from './transforms.svelte.js';
-import { can_switch_annotation_type } from './doc_utils.js';
+import { can_switch_mark_type, get_selected_range_types } from './doc_utils.js';
 import { is_selection_collapsed, get_char_length, char_slice } from './utils.js';
+import type Session from './Session.svelte.js';
+
+// Commands operate on sessions with arbitrary application schemas.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type CommandSession = Session<any>;
+
+export type CommandContext = {
+	session: CommandSession;
+	editable: boolean;
+};
 
 /**
  * Base class for commands that can be executed in response to user actions
@@ -25,6 +35,8 @@ import { is_selection_collapsed, get_char_length, char_slice } from './utils.js'
  * ```
  */
 export default class Command {
+	context: CommandContext;
+
 	/**
 	 * Derived state that indicates if the command is disabled.
 	 * Automatically computed from is_enabled().
@@ -34,19 +46,17 @@ export default class Command {
 	/**
 	 * Creates a new Command instance.
 	 *
-	 * @param {any} context - The context object providing access to application state
+	 * @param context - The context object providing access to application state
 	 */
-	constructor(context) {
+	constructor(context: CommandContext) {
 		this.context = context;
 	}
 
 	/**
 	 * Determines if the command can currently be executed.
 	 * Override this method to implement command-specific logic.
-	 *
-	 * @returns {boolean} true if the command can be executed, false otherwise
 	 */
-	is_enabled() {
+	is_enabled(): boolean {
 		return true;
 	}
 
@@ -54,10 +64,8 @@ export default class Command {
 	 * Executes the command.
 	 * Override this method to implement the command's behavior.
 	 * Can be async for commands that need to perform asynchronous operations.
-	 *
-	 * @returns {void | Promise<void>}
 	 */
-	execute() {
+	execute(): void | Promise<void> {
 		throw new Error('Not implemented');
 	}
 }
@@ -94,7 +102,7 @@ export class RedoCommand extends Command {
  */
 export class SelectParentCommand extends Command {
 	is_enabled() {
-		return (
+		return Boolean(
 			this.context.editable &&
 			this.context.session.selection &&
 			this.context.session.selection.path.length > 3
@@ -107,11 +115,16 @@ export class SelectParentCommand extends Command {
 }
 
 /**
- * Generic command that toggles an annotation on the current text selection.
- * Used for simple annotations like bold, italic, highlight, etc.
+ * Generic command that toggles a mark on the current text or node selection.
+ *
+ * Marks are mutually exclusive, so all touched marks compete: same-type marks
+ * are removed, a single touched property-less mark may switch type, and mixed
+ * touched types disable the command. Annotations never affect mark toggling.
  */
-export class ToggleAnnotationCommand extends Command {
-	constructor(node_type, context) {
+export class ToggleMarkCommand extends Command {
+	node_type: string;
+
+	constructor(node_type: string, context: CommandContext) {
 		super(context);
 		this.node_type = node_type;
 	}
@@ -119,34 +132,90 @@ export class ToggleAnnotationCommand extends Command {
 	active = $derived(this.is_active());
 
 	is_active() {
-		return this.context.session.active_annotation(this.node_type);
+		const selected_marks = this.context.session.selected_marks;
+		return (
+			selected_marks.length > 0 && selected_marks.every(({ node }) => node?.type === this.node_type)
+		);
 	}
 
 	is_enabled() {
 		const { session, editable } = this.context;
-		const active_annotation = session.active_annotation();
-		const has_annotation = session.active_annotation(this.node_type);
-		const can_switch_annotation =
-			active_annotation &&
-			!has_annotation &&
-			session.available_annotation_types.includes(this.node_type) &&
-			can_switch_annotation_type(
-				session.schema,
-				session.get(active_annotation.node_id),
-				this.node_type
-			);
-		const no_annotation_and_caret_not_collapsed =
-			!active_annotation && !is_selection_collapsed(session.selection);
+		const selection = session.selection;
+		const is_valid_selection =
+			selection?.type === 'text' ||
+			(selection?.type === 'node' && !is_selection_collapsed(selection));
+		const mark_type_is_allowed = session.available_mark_types.includes(this.node_type);
+		const selected_marks = session.selected_marks;
+		const selected_mark_types = get_selected_range_types(selected_marks);
+
+		if (!editable || !is_valid_selection || !mark_type_is_allowed) return false;
+		if (selected_mark_types.size > 1) return false;
+
+		if (selected_marks.length === 0) {
+			return Boolean(selection && !is_selection_collapsed(selection));
+		}
 
-		return (
-			editable &&
-			session.selection?.type === 'text' &&
-			(has_annotation || can_switch_annotation || no_annotation_and_caret_not_collapsed)
+		const first_selected_mark = selected_marks[0];
+		const selected_mark_type = first_selected_mark.node.type;
+		if (selected_mark_type === this.node_type) return true;
+		if (selected_marks.length !== 1) return false;
+
+		return can_switch_mark_type(session.schema, selected_mark_type, this.node_type);
+	}
+
+	execute() {
+		this.context.session.apply(this.context.session.tr.toggle_mark(this.node_type));
+	}
+}
+
+/**
+ * Generic command that toggles an annotation on the current text or node selection.
+ *
+ * Annotations only compete with touched annotations of the same type: touched
+ * same-type annotations are removed, otherwise a new annotation is created.
+ * Marks and other annotation types never block the toggle.
+ */
+export class ToggleAnnotationCommand extends Command {
+	node_type: string;
+
+	constructor(node_type: string, context: CommandContext) {
+		super(context);
+		this.node_type = node_type;
+	}
+
+	active = $derived(this.is_active());
+
+	// Mirrors the filter in tr.toggle_annotation, so active/enabled match what
+	// execute() does.
+	relevant_annotations() {
+		return this.context.session.selected_annotations.filter(
+			({ node }) => node?.type === this.node_type
 		);
 	}
 
+	is_active() {
+		return this.relevant_annotations().length > 0;
+	}
+
+	is_enabled() {
+		const { session, editable } = this.context;
+		const selection = session.selection;
+		const is_valid_selection =
+			selection?.type === 'text' ||
+			(selection?.type === 'node' && !is_selection_collapsed(selection));
+		const annotation_type_is_allowed = session.available_annotation_types.includes(this.node_type);
+
+		if (!editable || !is_valid_selection || !annotation_type_is_allowed) return false;
+
+		// Removing touched same-type annotations also works from a collapsed
+		// caret inside the annotation; creating a new one requires an expanded
+		// selection.
+		if (this.relevant_annotations().length > 0) return true;
+		return Boolean(selection && !is_selection_collapsed(selection));
+	}
+
 	execute() {
-		this.context.session.apply(this.context.session.tr.annotate_text(this.node_type));
+		this.context.session.apply(this.context.session.tr.toggle_annotation(this.node_type));
 	}
 }
 
@@ -176,10 +245,11 @@ export class AddNewLineCommand extends Command {
 		if (selection.anchor_offset !== selection.focus_offset) {
 			tr.delete_selection();
 		}
+		if (tr.selection.type !== 'text') return;
 
 		const collapsed_offset = tr.selection.anchor_offset;
 		const content = tr.get(tr.selection.path);
-		const text_before_caret = char_slice(content.text, 0, collapsed_offset);
+		const text_before_caret = char_slice(content.content, 0, collapsed_offset);
 		const line_start_index = text_before_caret.lastIndexOf('\n') + 1;
 		const current_line_prefix = text_before_caret.slice(line_start_index);
 		const indentation_match = current_line_prefix.match(/^[\t ]*/);
@@ -222,7 +292,7 @@ export class BreakTextNodeCommand extends Command {
  */
 export class SelectAllCommand extends Command {
 	is_enabled() {
-		return this.context.editable && this.context.session.selection;
+		return Boolean(this.context.editable && this.context.session.selection);
 	}
 
 	execute() {
@@ -235,7 +305,7 @@ export class SelectAllCommand extends Command {
 
 		if (selection.type === 'text') {
 			const text_content = session.get(selection.path);
-			const text_length = get_char_length(text_content.text);
+			const text_length = get_char_length(text_content.content);
 
 			// Check if all text is already selected
 			const is_all_text_selected =
@@ -260,7 +330,7 @@ export class SelectAllCommand extends Command {
 						session.inspect(node_path.slice(0, -1))?.type === 'node_array';
 
 					if (is_inside_node_array) {
-						const node_index = parseInt(node_path.at(-1));
+						const node_index = node_path.at(-1) as number;
 						session.selection = {
 							type: 'node',
 							path: node_path.slice(0, -1),
@@ -278,7 +348,7 @@ export class SelectAllCommand extends Command {
 			// Check if the entire node_array is already selected
 			const is_entire_node_array_selected =
 				Math.min(selection.anchor_offset, selection.focus_offset) === 0 &&
-				Math.max(selection.anchor_offset, selection.focus_offset) === node_array.length;
+				Math.max(selection.anchor_offset, selection.focus_offset) === node_array.nodes.length;
 
 			if (!is_entire_node_array_selected) {
 				// Select the entire node_array
@@ -286,7 +356,7 @@ export class SelectAllCommand extends Command {
 					type: 'node',
 					path: node_array_path,
 					anchor_offset: 0,
-					focus_offset: node_array.length
+					focus_offset: node_array.nodes.length
 				};
 			} else {
 				// Entire node_array is selected, try to move up to parent node_array
@@ -298,7 +368,7 @@ export class SelectAllCommand extends Command {
 						session.inspect(parent_path.slice(0, -1))?.type === 'node_array';
 
 					if (is_parent_node_array) {
-						const parent_node_index = parseInt(parent_path.at(-1));
+						const parent_node_index = parent_path.at(-1) as number;
 						session.selection = {
 							type: 'node',
 							path: parent_path.slice(0, -1),
@@ -318,7 +388,7 @@ export class SelectAllCommand extends Command {
 				const is_inside_node_array = session.inspect(node_path.slice(0, -1))?.type === 'node_array';
 
 				if (is_inside_node_array) {
-					const node_index = parseInt(node_path.at(-1));
+					const node_index = node_path.at(-1) as number;
 					session.selection = {
 						type: 'node',
 						path: node_path.slice(0, -1),

package/src/lib/CustomProperty.svelte

@@ -1,10 +1,8 @@
-<script>
+<script lang="ts">
 	import { serialize_path } from './utils.js';
+	import type { CustomPropertyProps } from './types.js';
 
-	/** @import { CustomPropertyProps } from './types.d.ts'; */
-
-	/** @type {CustomPropertyProps} */
-	let { path, tag = 'div', class: css_class, children, style, ...rest } = $props();
+	let { path, tag = 'div', class: css_class, children, style, ...rest }: CustomPropertyProps = $props();
 	let path_str = $derived(serialize_path(path));
 
 </script>

package/src/lib/{KeyMapper.svelte.js → KeyMapper.svelte.ts}

@@ -1,20 +1,30 @@
 import { is_virtual_keyboard_active } from './utils.js';
 
-const MODIFIER_KEYS = ['meta', 'ctrl', 'alt', 'shift'];
-const MODIFIER_EVENT_KEYS = {
+const MODIFIER_KEYS: readonly string[] = ['meta', 'ctrl', 'alt', 'shift'];
+const MODIFIER_EVENT_KEYS: Record<string, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'> = {
 	meta: 'metaKey',
 	ctrl: 'ctrlKey',
 	alt: 'altKey',
 	shift: 'shiftKey'
 };
 
+/**
+ * A command as required by the key mapper: anything with is_enabled/execute.
+ */
+type KeymapCommand = { is_enabled: () => boolean; execute: () => unknown };
+
+/**
+ * A keymap maps key combo strings to arrays of commands.
+ */
+export type Keymap = Record<string, KeymapCommand[]>;
+
 /**
  * Validates and defines a keymap.
  * Throws an error if any key combo is invalid.
  * Valid formats: 'meta+e,ctrl+e' or 'meta+shift+a'
  * Invalid: 'meta+e+a' (only one non-modifier key allowed)
  */
-export function define_keymap(keymap) {
+export function define_keymap<K extends Keymap>(keymap: K): K {
 	for (const [key_combo] of Object.entries(keymap)) {
 		const alternatives = key_combo.split(',');
 
@@ -36,7 +46,11 @@ export function define_keymap(keymap) {
  * Matches a keyboard event against a key combo string.
  * Example: 'meta+e,ctrl+e' matches either (metaKey && key==='e') OR (ctrlKey && key==='e')
  */
-function matches_key_combo(key_combo, event, virtual_keyboard_active = false) {
+function matches_key_combo(
+	key_combo: string,
+	event: KeyboardEvent,
+	virtual_keyboard_active = false
+): boolean {
 	const alternatives = key_combo.split(',');
 
 	return alternatives.some((alternative) => {
@@ -57,9 +71,9 @@ function matches_key_combo(key_combo, event, virtual_keyboard_active = false) {
 		const no_extra_modifiers = virtual_keyboard_active
 			? true
 			: MODIFIER_KEYS.every((mod) => {
-				if (modifiers.includes(mod)) return true; // This modifier is expected
-				return !event[MODIFIER_EVENT_KEYS[mod]]; // This modifier should NOT be pressed
-			});
+					if (modifiers.includes(mod)) return true; // This modifier is expected
+					return !event[MODIFIER_EVENT_KEYS[mod]]; // This modifier should NOT be pressed
+				});
 
 		// Check if the key matches
 		const key_matches = event.key.toLowerCase() === non_modifier;
@@ -74,7 +88,7 @@ function matches_key_combo(key_combo, event, virtual_keyboard_active = false) {
  * Supports both sync and async commands. For async commands, errors are logged
  * but don't crash the application.
  */
-function handle_key_map(key_map, event) {
+function handle_key_map(key_map: Keymap, event: KeyboardEvent): boolean {
 	const virtual_keyboard_active = is_virtual_keyboard_active();
 
 	for (const [key_combo, commands] of Object.entries(key_map)) {
@@ -114,6 +128,9 @@ function handle_key_map(key_map, event) {
  *   mapper.pop_scope();                   // When editor loses focus
  */
 export class KeyMapper {
+	scope_stack: Keymap[];
+	skip_onkeydown: boolean;
+
 	constructor() {
 		this.scope_stack = [];
 		this.skip_onkeydown = false;
@@ -122,7 +139,7 @@ export class KeyMapper {
 	/**
 	 * Push a new scope onto the stack (becomes highest priority)
 	 */
-	push_scope(keymap) {
+	push_scope(keymap: Keymap): void {
 		// console.log('pushed keymap', keymap);
 		this.scope_stack.push(keymap);
 	}
@@ -130,7 +147,7 @@ export class KeyMapper {
 	/**
 	 * Pop the most recent scope from the stack
 	 */
-	pop_scope() {
+	pop_scope(): Keymap | undefined {
 		const keymap = this.scope_stack.pop();
 		// console.log('popped keymap', keymap);
 		return keymap;
@@ -139,7 +156,7 @@ export class KeyMapper {
 	/**
 	 * Handle keyboard event by trying scopes from top to bottom
 	 */
-	handle_keydown(event) {
+	handle_keydown(event: KeyboardEvent): void {
 		// Key handling temporarily disabled (e.g. while character composition takes place)
 		if (this.skip_onkeydown) return;
 		// console.log('KeyMapper.handle_keydown', event);

package/src/lib/Node.svelte

@@ -1,32 +1,63 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
 	import { serialize_path } from './utils.js';
+	import type {
+		NodeArrayAttachmentContext,
+		NodeArrayRenderContext,
+		NodeProps,
+		SveditRenderContext
+	} from './types.js';
 
-	/** @import { NodeProps } from './types.d.ts'; */
+	const svedit = getContext<SveditRenderContext>('svedit');
 
-	const svedit = getContext('svedit');
-
-	/** @type {NodeProps} */
-	let { path, children, tag = 'div', class: css_class, style = '', ...rest } = $props();
+	let { path, children, tag = 'div', class: css_class, style = '', ...rest }: NodeProps = $props();
 
 	let node = $derived(svedit.session.get(path));
 	let path_str = $derived(serialize_path(path));
 
-	const node_array_meta = getContext('node_array_meta');
-	let child_index = $derived(node_array_meta ? parseInt(String(path.at(-1)), 10) : -1);
+	const node_array_meta = getContext<NodeArrayRenderContext | undefined>('node_array_meta');
+	let child_index = $derived(node_array_meta ? (path.at(-1) as number) : -1);
 	let is_first = $derived(node_array_meta && child_index === 0);
 	let is_last = $derived(node_array_meta && child_index === node_array_meta.length - 1);
+
+	// Marks and annotations covering this node become classes automatically:
+	// `mark-<type>`/`anno-<type>`, plus `-start`/`-end` variants on the run's
+	// first/last covered node. This allows styling ranges (including
+	// annotations, which never render wrapper components) with pure CSS. For
+	// richer rendering, node components still receive the `mark` and
+	// `annotations` props.
+	let range_classes = $derived.by(() => {
+		if (child_index < 0 || !node_array_meta?.annotations_for) return '';
+		const classes: string[] = [];
+
+		const add_classes = (range: NodeArrayAttachmentContext | null | undefined, prefix: string) => {
+			const range_type = range?.node?.type;
+			if (!range_type) return;
+			classes.push(`${prefix}-${range_type}`);
+			if (range.is_start) classes.push(`${prefix}-${range_type}-start`);
+			if (range.is_end) classes.push(`${prefix}-${range_type}-end`);
+		};
+
+		add_classes(node_array_meta.mark_for?.(child_index), 'mark');
+		for (const annotation of node_array_meta.annotations_for(child_index)) {
+			add_classes(annotation, 'anno');
+		}
+		return classes.join(' ');
+	});
 </script>
 
 <svelte:element
 	this={tag}
 	id={node.id}
-	class="node-{node.type} {css_class}{is_first ? ' first' : ''}{is_last ? ' last' : ''}"
+	class="node-{node.type} {css_class}{range_classes ? ` ${range_classes}` : ''}{is_first
+		? ' first'
+		: ''}{is_last ? ' last' : ''}"
 	data-node-id={node.id}
 	data-path={path_str}
 	data-type="node"
 	style="anchor-name: --{path_str};{style}"
 	{...rest}
+	{@attach svedit.visibility_registry.track_node(path_str)}
 >
 	{@render children()}
 </svelte:element>