svedit 0.5.0 → 0.6.0

package/dist/AnnotatedTextProperty.svelte

@@ -1,58 +1,77 @@
 <script>
 	import { getContext } from 'svelte';
-	import { char_slice, get_char_length, snake_to_pascal } from './util.js';
+	import { char_slice, get_char_length, snake_to_pascal, get_selection_range } from './utils.js';
 
-  /** @import { AnnotatedTextPropertyProps, Annotation, AnnotationFragment } from './types.d.ts'; */
+	/** @import { AnnotatedTextPropertyProps, Annotation, Fragment, SelectionRange } from './types.d.ts'; */
 
 	const svedit = getContext('svedit');
 
- /** @type {AnnotatedTextPropertyProps} */
-	let {
-		path,
-		class: css_class,
-		placeholder = '',
-	} = $props();
+	/** @type {AnnotatedTextPropertyProps} */
+	let { path, class: css_class, placeholder = '', tag = 'div' } = $props();
 
 	let is_focused = $derived.by(() => {
-		return svedit.doc.selection?.type === 'text' && path.join('.') === svedit.doc.selection?.path.join('.');
+		return (
+			svedit.session.selection?.type === 'text' &&
+			path.join('.') === svedit.session.selection?.path.join('.')
+		);
+	});
+
+	// Get selection highlight range if not inside an annotation
+	let selection_highlight_range = $derived.by(() => {
+		if (!is_focused) return null;
+		if (svedit.session.active_annotation()) return null;
+		const sel = svedit.session.selection;
+		if (!sel || sel.type !== 'text') return null;
+		return get_selection_range(sel);
 	});
 
 	/**
 	 * Converts text with annotations into renderable fragments for display.
 	 * @param {string} text - The plain text content
-	 * @param {Array<Annotation>} annotations - Array of annotations where each is {start_offset, end_offset, node_id}
-	 * @returns {Array<string|AnnotationFragment>} Array of fragments - strings for plain text, AnnotationFragment objects for annotated content
+	 * @param {Array<Annotation>} annotations - Array of annotations
+	 * @param {SelectionRange} [selection_highlight_range] - Optional selection highlight range
+	 * @returns {Array<Fragment>} Array of fragments
 	 */
-	function get_fragments(text, annotations) {
+	function get_fragments(text, annotations, selection_highlight_range) {
+		/** @type {Array<Fragment>} */
 		let fragments = [];
 		let last_index = 0;
 
-		// Sort annotations by start_offset
-		const sorted_annotations = [...annotations].sort((a, b) => a.start_offset - b.start_offset);
+		// Merge annotations with selection highlight and sort by start offset
+		const ranges = [
+			...annotations,
+			...(selection_highlight_range ? [selection_highlight_range] : [])
+		].sort((a, b) => a.start_offset - b.start_offset);
 
-		for (let [, annotation] of sorted_annotations.entries()) {
-			// Add text before the annotation using character-aware slicing
-			if (annotation.start_offset > last_index) {
-				fragments.push(char_slice(text, last_index, annotation.start_offset));
+		for (const range of ranges) {
+			// Add text before this range
+			if (range.start_offset > last_index) {
+				fragments.push(char_slice(text, last_index, range.start_offset));
 			}
 
-			// Add the annotated string using character-aware slicing
-			const annotated_content = char_slice(text, annotation.start_offset, annotation.end_offset);
-			const node = svedit.doc.get(annotation.node_id);
-			if (!node) throw new Error(`Node not found for annotation ${annotation.node_id}`);
-
-			fragments.push({
-			  node,
-				content: annotated_content,
-				// NOTE: We need to provide the original index here, because the source data
-				// is the address space.
-				annotation_index: annotations.indexOf(annotation),
-			});
+			const content = char_slice(text, range.start_offset, range.end_offset);
+
+			if ('node_id' in range) {
+				const node = svedit.session.get(range.node_id);
+				if (!node) throw new Error(`Node not found for annotation ${range.node_id}`);
+
+				fragments.push({
+					type: 'annotation',
+					node,
+					content,
+					annotation_index: annotations.indexOf(/** @type {Annotation} */ (range))
+				});
+			} else {
+				fragments.push({
+					type: 'selection_highlight',
+					content
+				});
+			}
 
-			last_index = annotation.end_offset;
+			last_index = range.end_offset;
 		}
 
-		// Add any remaining text after the last annotation using character-aware slicing
+		// Add any remaining text
 		if (last_index < get_char_length(text)) {
 			fragments.push(char_slice(text, last_index));
 		}
@@ -60,58 +79,86 @@
 		return fragments;
 	}
 
-	let fragments = $derived(get_fragments(svedit.doc.get(path).text, svedit.doc.get(path).annotations));
-	let plain_text = $derived(svedit.doc.get(path).text);
-
+	let fragments = $derived(
+		get_fragments(
+			svedit.session.get(path).text,
+			svedit.session.get(path).annotations,
+			selection_highlight_range
+		)
+	);
+	let plain_text = $derived(svedit.session.get(path).text);
+	let is_empty = $derived(
+		get_char_length(plain_text) === 0 && !(svedit.is_composing && is_focused)
+	);
 </script>
 
-{#key plain_text}
-  <!-- ATTENTION: The comments are needed to prevent unwanted text nodes with whitespace. -->
-  <div
-   	data-type="text"
-   	data-path={path.join('.')}
-   	style="anchor-name: --{path.join('-')};"
-   	class="text svedit-selectable {css_class}"
-   	class:empty={get_char_length(plain_text) === 0 && !(svedit.is_composing && is_focused)}
-    class:focused={is_focused}
-    placeholder={placeholder}
-  >
-    {#each fragments as fragment, index (index)}
-  		{#if typeof fragment === 'string'}{fragment}{:else}
-        {@const AnnotationComponent = svedit.doc.config.node_components[snake_to_pascal(fragment.node.type)]}
-        <AnnotationComponent path={[...path, 'annotations', fragment.annotation_index, 'node_id']} content={fragment.content} />
-      {/if}
-  	{/each}<!--
-    --><br>
-  </div>
-{/key}
+<!-- ATTENTION: The comments are needed to prevent unwanted text nodes with whitespace. -->
+<!-- We need to use <br> so the element is reachable by Arrow Up/Down navigation. -->
+<!-- But as soon as the element is focused, we get rid of the <br> as it causes issues with caret positioning. -->
+<!-- Before, we were just hiding it on focus, but that caused the cursor to disappear on Safari Desktop (tested with v26). -->
+<!-- Edge Case: Shift Enter stops working if <br> is not present on a non-empty text property. -->
+<svelte:element
+	this={tag}
+	data-type="text"
+	data-path={path.join('.')}
+	style="anchor-name: --{path.join('-')};"
+	class="text svedit-selectable {css_class}"
+	class:empty={is_empty}
+	class:focused={is_focused}
+	{placeholder}
+>
+	{#each fragments as fragment, index (index)}
+		{#if typeof fragment === 'string'}{fragment}{:else if fragment.type === 'selection_highlight'}<span
+				class="selection-highlight"
+				style="anchor-name: --selection-highlight;">{fragment.content}</span
+			>{:else if fragment.type === 'annotation'}
+			{@const AnnotationComponent =
+				svedit.session.config.node_components[snake_to_pascal(fragment.node.type)]}
+			<AnnotationComponent
+				path={[...path, 'annotations', fragment.annotation_index, 'node_id']}
+				content={fragment.content}
+			/>
+		{/if}
+	{/each}<!--
+  -->{#if !is_focused || !is_empty}<br />{/if}
+</svelte:element>
 
 <style>
-  .text {
-    white-space: pre-wrap;
+	.text {
+		white-space: pre-wrap;
 		overflow-wrap: anywhere;
 		box-sizing: content-box;
 
 		&.heading1 {
-      text-wrap: var(--text-wrap);
-    }
-  }
-
-  [placeholder].empty::before {
-    content: attr(placeholder);
-    pointer-events: none;
-    color: color-mix(in oklch, currentcolor 50%, transparent);
-  }
-
-  /* We can safely hide the <br> element when the placeholder is empty and focused. */
-  /* No longer the cursor will be rendered after the placeholder when focused. */
-  /* ATTENTION: This hack has the side effect that in Safari Desktop the cursor sometimes disappears. */
-  [placeholder].empty.focused br {
-    display:none;
-  }
-
-  /*.text.focused {
+			text-wrap: var(--text-wrap);
+		}
+	}
+	/* We switch from ::before to ::after when the element is focused. So the the caret is always before the placeholder. */
+	[placeholder].empty:not(.focused)::before,
+	[placeholder].empty.focused::after {
+		content: attr(placeholder);
+		pointer-events: none;
+		color: color-mix(in oklch, currentcolor 50%, transparent);
+	}
+
+	/* Hide flickering: in Chrome, the caret jumps from end of placeholder string to start of text property when we focus */
+	.text:not(.focused) {
+		caret-color: transparent;
+	}
+
+	/*.text.focused {
     background: none;
     outline: 1px solid var(--editing-stroke-color);
   }*/
+
+	/* Dim the selection highlight when canvas loses native focus */
+	:global(.svedit-canvas:not(:focus)) .selection-highlight {
+		background: oklch(from var(--editing-fill-color) l 0.02 h / 0.3);
+	}
+
+	/* Make a collapsed cursor visible */
+	:global(.svedit-canvas:not(:focus)) .selection-highlight:empty {
+		background: none;
+		outline: 0.5px solid oklch(from var(--editing-stroke-color) l 0.02 h / 0.3);
+	}
 </style>

package/dist/AnnotatedTextProperty.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotatedTextProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AnnotatedTextProperty.svelte.js"],"names":[],"mappings":";;;;;AAyFA,2HAAoE"}
+{"version":3,"file":"AnnotatedTextProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AnnotatedTextProperty.svelte.js"],"names":[],"mappings":";;;;;AAuHA,2HAAoE"}

package/dist/Command.svelte.d.ts

@@ -0,0 +1,118 @@
+/**
+ * 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 {
+    /**
+     * Creates a new Command instance.
+     *
+     * @param {any} context - The context object providing access to application state
+     */
+    constructor(context: any);
+    /**
+     * Derived state that indicates if the command is disabled.
+     * Automatically computed from is_enabled().
+     */
+    disabled: boolean;
+    context: any;
+    /**
+     * 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(): boolean;
+    /**
+     * 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(): void | Promise<void>;
+}
+/**
+ * Command that undoes the last change to the document.
+ */
+export class UndoCommand extends Command {
+    is_enabled(): any;
+    execute(): void;
+}
+/**
+ * Command that redoes the last undone change to the document.
+ */
+export class RedoCommand extends Command {
+    is_enabled(): any;
+    execute(): void;
+}
+/**
+ * Command that selects the parent of the current selection.
+ * Useful for navigating up the document hierarchy.
+ */
+export class SelectParentCommand extends Command {
+    is_enabled(): any;
+    execute(): void;
+}
+/**
+ * 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: any, context: any);
+    node_type: any;
+    active: any;
+    is_active(): any;
+    is_enabled(): any;
+    execute(): void;
+}
+/**
+ * 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(): any;
+    execute(): void;
+}
+/**
+ * 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 {
+    execute(): void;
+}
+/**
+ * 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(): any;
+    execute(): void;
+}
+/**
+ * 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 {
+    execute(): void;
+}
+//# sourceMappingURL=Command.svelte.d.ts.map

package/dist/Command.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Command.svelte.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH;IAOC;;;;OAIG;IACH,qBAFW,GAAG,EAIb;IAbD;;;OAGG;IACH,kBAAwC;IAQvC,aAAsB;IAGvB;;;;;OAKG;IACH,cAFa,OAAO,CAInB;IAED;;;;;;OAMG;IACH,WAFa,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAIhC;CACD;AAED;;GAEG;AACH;IACC,kBAEC;IAED,gBAEC;CACD;AAED;;GAEG;AACH;IACC,kBAEC;IAED,gBAEC;CACD;AAED;;;GAGG;AACH;IACC,kBAEC;IAED,gBAEC;CACD;AAED;;;GAGG;AACH;IACC,0CAGC;IADA,eAA0B;IAG3B,YAAoC;IAEpC,iBAEC;IAED,kBAWC;IAED,gBAEC;CACD;AAED;;;;GAIG;AACH;IACC,kBAUC;IAED,gBAEC;CACD;AAED;;;;GAIG;AACH;IAKC,gBAKC;CACD;AAED;;;GAGG;AACH;IACC,kBAEC;IAED,gBAwGC;CACD;AAED;;;GAGG;AACH;IAUC,gBAIC;CACD"}

package/dist/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);
+	}
+}