svedit 0.5.0 → 0.6.0

package/src/lib/Command.svelte.js

@@ -0,0 +1,314 @@
+import { insert_default_node, break_text_node } from './transforms.svelte.js';
+import { is_selection_collapsed, is_mobile_browser, get_char_length } from './utils.js';
+
+/**
+ * Base class for commands that can be executed in response to user actions
+ * like keyboard shortcuts, menu items, or toolbar buttons.
+ *
+ * Commands are stateful and UI-aware, unlike transforms which are pure functions.
+ * They can have derived state (like is_active for toggle commands) or their own
+ * state (like form inputs for prompt-based commands).
+ *
+ * @example
+ * ```js
+ * class SaveCommand extends Command {
+ *   is_enabled() {
+ *     return this.context.editable;
+ *   }
+ *
+ *   async execute() {
+ *     await update_document(this.context.session);
+ *     this.context.editable = false;
+ *   }
+ * }
+ * ```
+ */
+export default class Command {
+	/**
+	 * Derived state that indicates if the command is disabled.
+	 * Automatically computed from is_enabled().
+	 */
+	disabled = $derived(!this.is_enabled());
+
+	/**
+	 * Creates a new Command instance.
+	 *
+	 * @param {any} context - The context object providing access to application state
+	 */
+	constructor(context) {
+		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() {
+		return true;
+	}
+
+	/**
+	 * 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() {
+		throw new Error('Not implemented');
+	}
+}
+
+/**
+ * Command that undoes the last change to the document.
+ */
+export class UndoCommand extends Command {
+	is_enabled() {
+		return this.context.editable && this.context.session.can_undo;
+	}
+
+	execute() {
+		this.context.session.undo();
+	}
+}
+
+/**
+ * Command that redoes the last undone change to the document.
+ */
+export class RedoCommand extends Command {
+	is_enabled() {
+		return this.context.editable && this.context.session.can_redo;
+	}
+
+	execute() {
+		this.context.session.redo();
+	}
+}
+
+/**
+ * Command that selects the parent of the current selection.
+ * Useful for navigating up the document hierarchy.
+ */
+export class SelectParentCommand extends Command {
+	is_enabled() {
+		return this.context.editable && this.context.session.selection;
+	}
+
+	execute() {
+		this.context.session.select_parent();
+	}
+}
+
+/**
+ * Generic command that toggles an annotation on the current text selection.
+ * Used for simple annotations like bold, italic, highlight, etc.
+ */
+export class ToggleAnnotationCommand extends Command {
+	constructor(node_type, context) {
+		super(context);
+		this.node_type = node_type;
+	}
+
+	active = $derived(this.is_active());
+
+	is_active() {
+		return this.context.session.active_annotation(this.node_type);
+	}
+
+	is_enabled() {
+		const { session, editable } = this.context;
+		const has_annotation = session.active_annotation(this.node_type);
+		const no_annotation_and_cursor_not_collapsed =
+			!session.active_annotation() && !is_selection_collapsed(session.selection);
+
+		return (
+			editable &&
+			session.selection?.type === 'text' &&
+			(has_annotation || no_annotation_and_cursor_not_collapsed)
+		);
+	}
+
+	execute() {
+		this.context.session.apply(this.context.session.tr.annotate_text(this.node_type));
+	}
+}
+
+/**
+ * Command that adds a new line character at the current cursor position.
+ * Only works in text selections where newlines are allowed.
+ * Disabled on mobile browsers where Shift+Enter has different behavior.
+ */
+export class AddNewLineCommand extends Command {
+	is_enabled() {
+		const session = this.context.session;
+		const selection = session.selection;
+
+		return (
+			this.context.editable &&
+			!is_mobile_browser() &&
+			selection?.type === 'text' &&
+			session.inspect(selection.path).allow_newlines
+		);
+	}
+
+	execute() {
+		this.context.session.apply(this.context.session.tr.insert_text('\n'));
+	}
+}
+
+/**
+ * Command that breaks a text node at the cursor position.
+ * Creates a new node and splits the content between the current and new node.
+ * Only works in text selections.
+ */
+export class BreakTextNodeCommand extends Command {
+	is_enabled() {
+		return this.context.editable && this.context.session.selection?.type === 'text';
+	}
+
+	execute() {
+		const tr = this.context.session.tr;
+		if (break_text_node(tr)) {
+			this.context.session.apply(tr);
+		}
+	}
+}
+
+/**
+ * Command that selects all content in the current context.
+ * Progressively expands selection from text → node → parent node array.
+ */
+export class SelectAllCommand extends Command {
+	is_enabled() {
+		return this.context.editable && this.context.session.selection;
+	}
+
+	execute() {
+		const session = this.context.session;
+		const selection = session.selection;
+
+		if (!selection) {
+			return;
+		}
+
+		if (selection.type === 'text') {
+			const text_content = session.get(selection.path);
+			const text_length = get_char_length(text_content.text);
+
+			// Check if all text is already selected
+			const is_all_text_selected =
+				Math.min(selection.anchor_offset, selection.focus_offset) === 0 &&
+				Math.max(selection.anchor_offset, selection.focus_offset) === text_length;
+
+			if (!is_all_text_selected) {
+				// Select all text in the current text node
+				session.selection = {
+					type: 'text',
+					path: selection.path,
+					anchor_offset: 0,
+					focus_offset: text_length
+				};
+			} else {
+				// All text is selected, move up to select the containing node
+				const node_path = selection.path.slice(0, -1); // Remove the property name (e.g., 'content')
+
+				// Check if we have enough path segments and if we're inside a node_array
+				if (node_path.length >= 2) {
+					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));
+						session.selection = {
+							type: 'node',
+							path: node_path.slice(0, -1),
+							anchor_offset: node_index,
+							focus_offset: node_index + 1
+						};
+					}
+				}
+				// Stop expanding - text is not in a selectable node_array
+			}
+		} else if (selection.type === 'node') {
+			const node_array_path = selection.path;
+			const node_array = session.get(node_array_path);
+
+			// 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;
+
+			if (!is_entire_node_array_selected) {
+				// Select the entire node_array
+				session.selection = {
+					type: 'node',
+					path: node_array_path,
+					anchor_offset: 0,
+					focus_offset: node_array.length
+				};
+			} else {
+				// Entire node_array is selected, try to move up to parent node_array
+				const parent_path = node_array_path.slice(0, -1);
+
+				// Check if we have enough path segments and if parent is a valid node_array
+				if (parent_path.length >= 2) {
+					const is_parent_node_array =
+						session.inspect(parent_path.slice(0, -1))?.type === 'node_array';
+
+					if (is_parent_node_array) {
+						const parent_node_index = parseInt(parent_path.at(-1));
+						session.selection = {
+							type: 'node',
+							path: parent_path.slice(0, -1),
+							anchor_offset: parent_node_index,
+							focus_offset: parent_node_index + 1
+						};
+					}
+				}
+				// Stop expanding - we've reached the top level
+			}
+		} else if (selection.type === 'property') {
+			// For property selections, select the containing node
+			const node_path = selection.path.slice(0, -1);
+
+			// Check if we have enough path segments and if we're inside a node_array
+			if (node_path.length >= 2) {
+				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));
+					session.selection = {
+						type: 'node',
+						path: node_path.slice(0, -1),
+						anchor_offset: node_index,
+						focus_offset: node_index + 1
+					};
+				}
+			}
+			// Stop expanding - property is not in a selectable node_array
+		}
+	}
+}
+
+/**
+ * Command that inserts a default node at the current cursor position.
+ * Only works when a collapsed node selection is active.
+ */
+export class InsertDefaultNodeCommand extends Command {
+	is_enabled() {
+		const selection = this.context.session.selection;
+		return (
+			this.context.editable &&
+			selection?.type === 'node' &&
+			selection.anchor_offset === selection.focus_offset
+		);
+	}
+
+	execute() {
+		const tr = this.context.session.tr;
+		insert_default_node(tr);
+		this.context.session.apply(tr);
+	}
+}

package/src/lib/CustomProperty.svelte

@@ -1,51 +1,40 @@
 <script>
-  import { getContext } from 'svelte';
+	import { getContext } from 'svelte';
 
-  /** @import { CustomPropertyProps } from './types.d.ts'; */
+	/** @import { CustomPropertyProps } from './types.d.ts'; */
+	const svedit = getContext('svedit');
 
-  const svedit = getContext('svedit');
-
-  /** @type {CustomPropertyProps} */
-  let {
-    path,
-    class: css_class,
-    children,
-  } = $props();
+	/** @type {CustomPropertyProps} */
+	let { path, tag = 'div', class: css_class, children } = $props();
 </script>
 
-{#if svedit.editable}
-  <!-- NOTE: It's super crucial that there is no extra whitespace, to not introduce additional cursor positions in contenteditable -->
-  <div
-    class="property {css_class}"
-    data-type="property"
-    data-path={path.join('.')}
-    style="anchor-name: --{path.join('-')};"
-  >
-    <div class="cursor-trap">
-      <div class="svedit-selectable"><br/></div>
-    </div>
+<svelte:element
+	this={tag}
+	class={css_class}
+	data-type="property"
+	data-path={path.join('.')}
+	style="anchor-name: --{path.join('-')};"
+>
+	{#if svedit.editable}
+		<div class="cursor-trap">
+			<div class="svedit-selectable"><br /></div>
+		</div>
+	{/if}
 
-    <div class="property-content" contenteditable="false">{@render children()}</div>
-  </div>
-{:else}
-  {@render children()}
-{/if}
+	{@render children()}
+</svelte:element>
 
 <style>
-  .property {
-    position: relative;
-  }
-  .cursor-trap {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1;
-    outline: none;
-  }
-  .property-content {
-    width: 100%;
-    height: 100%;
-  }
+	[data-type='property'] {
+		position: relative;
+	}
+	.cursor-trap {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 1;
+		outline: none;
+	}
 </style>

package/src/lib/KeyMapper.svelte.js

@@ -0,0 +1,141 @@
+const MODIFIER_KEYS = ['meta', 'ctrl', 'alt', 'shift'];
+const MODIFIER_EVENT_KEYS = {
+	meta: 'metaKey',
+	ctrl: 'ctrlKey',
+	alt: 'altKey',
+	shift: 'shiftKey'
+};
+
+/**
+ * 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) {
+	for (const [key_combo] of Object.entries(keymap)) {
+		const alternatives = key_combo.split(',');
+
+		for (const alternative of alternatives) {
+			const parts = alternative.trim().toLowerCase().split('+');
+			const non_modifiers = parts.filter((part) => !MODIFIER_KEYS.includes(part));
+
+			if (non_modifiers.length !== 1) {
+				throw new Error(
+					`Invalid key combo: "${alternative}". Must have exactly one non-modifier key. Found: ${non_modifiers.length}`
+				);
+			}
+		}
+	}
+	return 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) {
+	const alternatives = key_combo.split(',');
+
+	return alternatives.some((alternative) => {
+		const parts = alternative.trim().toLowerCase().split('+');
+		const modifiers = parts.filter((part) => MODIFIER_KEYS.includes(part));
+		const non_modifier = parts.find((part) => !MODIFIER_KEYS.includes(part));
+
+		// Check if all specified modifiers are pressed
+		const modifiers_match = modifiers.every((mod) => event[MODIFIER_EVENT_KEYS[mod]]);
+
+		// Check if no unspecified modifiers are pressed
+		const no_extra_modifiers = 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
+		});
+
+		// Check if the key matches
+		const key_matches = event.key.toLowerCase() === non_modifier;
+		return modifiers_match && no_extra_modifiers && key_matches;
+	});
+}
+
+/**
+ * Handles a key map by matching keyboard event against registered key combos
+ * and executing the first enabled command.
+ *
+ * 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) {
+	for (const [key_combo, commands] of Object.entries(key_map)) {
+		if (matches_key_combo(key_combo, event)) {
+			// Find the first enabled command and execute it
+			const enabled_command = commands.find((cmd) => cmd.is_enabled());
+			if (enabled_command) {
+				event.preventDefault();
+
+				// Execute command (may be sync or async)
+				const result = enabled_command.execute();
+
+				// If it's a promise, handle errors (fire-and-forget)
+				if (result instanceof Promise) {
+					result.catch((err) => {
+						console.error('Command execution failed:', err);
+					});
+				}
+
+				return true;
+			}
+		}
+	}
+	return false;
+}
+
+/**
+ * KeyMapper manages keyboard shortcuts using a stack-based scope system.
+ *
+ * Scopes are tried from top to bottom (most specific to most general).
+ * This makes it completely general-purpose - no knowledge of specific contexts.
+ *
+ * Usage:
+ *   const mapper = new KeyMapper();
+ *   mapper.push_scope(app_keymap);        // Base layer
+ *   mapper.push_scope(editor_keymap);     // When editor gains focus
+ *   mapper.pop_scope();                   // When editor loses focus
+ */
+export class KeyMapper {
+	constructor() {
+		this.scope_stack = [];
+		this.skip_onkeydown = false;
+	}
+
+	/**
+	 * Push a new scope onto the stack (becomes highest priority)
+	 */
+	push_scope(keymap) {
+		// console.log('pushed keymap', keymap);
+		this.scope_stack.push(keymap);
+	}
+
+	/**
+	 * Pop the most recent scope from the stack
+	 */
+	pop_scope() {
+		const keymap = this.scope_stack.pop();
+		// console.log('popped keymap', keymap);
+		return keymap;
+	}
+
+	/**
+	 * Handle keyboard event by trying scopes from top to bottom
+	 */
+	handle_keydown(event) {
+		// Key handling temporarily disabled (e.g. while character composition takes place)
+		if (this.skip_onkeydown) return;
+		// console.log('KeyMapper.handle_keydown', event);
+		// Try from most specific (top of stack) to most general (bottom)
+		for (let i = this.scope_stack.length - 1; i >= 0; i--) {
+			if (handle_key_map(this.scope_stack[i], event)) {
+				return;
+			}
+		}
+	}
+}

package/src/lib/Node.svelte

@@ -1,45 +1,43 @@
 <script>
-  import { getContext } from 'svelte';
+	import { getContext } from 'svelte';
 
-  /** @import { NodeProps } from './types.d.ts'; */
+	/** @import { NodeProps } from './types.d.ts'; */
 
-  const svedit = getContext('svedit');
-  let NodeCursorTrap = $derived(svedit.doc.config.system_components.NodeCursorTrap);
+	const svedit = getContext('svedit');
+	let NodeCursorTrap = $derived(svedit.session.config.system_components.NodeCursorTrap);
 
-  /** @type {NodeProps} */
-  let {
-    path,
-    children
-  } = $props();
+	/** @type {NodeProps} */
+	let { path, children, tag = 'div', class: css_class } = $props();
 
-  // NOTE: When the next to last path segment is a node_array property, the node is wrapped in a node_array
-  let is_inside_node_array = $derived(path.length > 1 && svedit.doc.inspect(path.slice(0, -1))?.type === 'node_array');
-  let node = $derived(svedit.doc.get(path));
-  let is_first_node_array_child = $derived(is_inside_node_array && parseInt(String(path.at(-1)), 10) === 0);
+	// NOTE: When the next to last path segment is a node_array property, the node is wrapped in a node_array
+	let is_inside_node_array = $derived(
+		path.length > 1 && svedit.session.inspect(path.slice(0, -1))?.type === 'node_array'
+	);
+	let node = $derived(svedit.session.get(path));
+	let is_first_node_array_child = $derived(
+		is_inside_node_array && parseInt(String(path.at(-1)), 10) === 0
+	);
 </script>
 
-{#if svedit.editable}
-  <div
-    class="node"
-    data-node-id={node.id}
-    data-path={path.join('.')}
-    data-type="node"
-    style="anchor-name: --{path.join('-')};"
-  >
-    {#if is_first_node_array_child}
-      <NodeCursorTrap {path} type="position-zero-cursor-trap" />
-    {/if}
-    {@render children()}
-    {#if is_inside_node_array}
-      <NodeCursorTrap {path} type="after-node-cursor-trap" />
-    {/if}
-  </div>
-{:else}
-  {@render children()}
-{/if}
+<svelte:element
+	this={tag}
+	class={css_class}
+	data-node-id={node.id}
+	data-path={path.join('.')}
+	data-type="node"
+	style="anchor-name: --{path.join('-')};"
+>
+	{#if svedit.editable && is_first_node_array_child}
+		<NodeCursorTrap {path} type="position-zero-cursor-trap" />
+	{/if}
+	{@render children()}
+	{#if svedit.editable && is_inside_node_array}
+		<NodeCursorTrap {path} type="after-node-cursor-trap" />
+	{/if}
+</svelte:element>
 
 <style>
-  div {
-    position: relative;
-  }
+	div {
+		position: relative;
+	}
 </style>