svedit 0.5.0 → 0.6.0

package/dist/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/dist/CustomProperty.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CustomProperty.svelte.js"],"names":[],"mappings":";;;;;AAqCA,6GAA6D"}
+{"version":3,"file":"CustomProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CustomProperty.svelte.js"],"names":[],"mappings":";;;;;AA6BA,6GAA6D"}

package/dist/KeyMapper.svelte.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 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: any): any;
+/**
+ * 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 {
+    scope_stack: any[];
+    skip_onkeydown: boolean;
+    /**
+     * Push a new scope onto the stack (becomes highest priority)
+     */
+    push_scope(keymap: any): void;
+    /**
+     * Pop the most recent scope from the stack
+     */
+    pop_scope(): any;
+    /**
+     * Handle keyboard event by trying scopes from top to bottom
+     */
+    handle_keydown(event: any): void;
+}
+//# sourceMappingURL=KeyMapper.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyMapper.svelte.d.ts","sourceRoot":"","sources":["../src/lib/KeyMapper.svelte.js"],"names":[],"mappings":"AAQA;;;;;GAKG;AACH,gDAgBC;AA6DD;;;;;;;;;;;GAWG;AACH;IAEE,mBAAqB;IACrB,wBAA2B;IAG5B;;OAEG;IACH,8BAGC;IAED;;OAEG;IACH,iBAIC;IAED;;OAEG;IACH,iCAUC;CACD"}

package/dist/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/dist/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>

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

@@ -1 +1 @@
-{"version":3,"file":"Node.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Node.svelte.js"],"names":[],"mappings":";;;;;AA2CA,yFAAmD"}
+{"version":3,"file":"Node.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Node.svelte.js"],"names":[],"mappings":";;;;;AAwCA,yFAAmD"}

package/dist/NodeArrayProperty.svelte

@@ -1,45 +1,48 @@
 <script>
-  import { getContext } from 'svelte';
-  import UnknownNode from './UnknownNode.svelte';
-  import { snake_to_pascal } from './util.js';
+	import { getContext } from 'svelte';
+	import UnknownNode from './UnknownNode.svelte';
+	import { snake_to_pascal } from './utils.js';
 
-  /** @import { NodeArrayPropertyProps } from './types.d.ts'; */
+	/** @import { NodeArrayPropertyProps } 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 {NodeArrayPropertyProps} */
-  let {
-    path,
-    class: css_class,
-  } = $props();
+	/** @type {NodeArrayPropertyProps} */
+	let { path, tag = 'div', class: css_class } = $props();
 
-  let nodes = $derived(svedit.doc.get(path).map(/** @param {string} node_id */ (node_id) => svedit.doc.get(node_id)));
+	let nodes = $derived(
+		svedit.session
+			.get(path)
+			.map(/** @param {string} node_id */ (node_id) => svedit.session.get(node_id))
+	);
 </script>
 
-<div class={css_class} data-type="node_array" data-path={path.join('.')}>
-  {#if nodes.length === 0 && svedit.editable}
-    <!--
-    Experimental: We'll let .empty-node-array act like a node, so the existing
-    code paths for selection mapping will work as expected.
+<svelte:element this={tag} class={css_class} data-type="node_array" data-path={path.join('.')}>
+	{#if nodes.length === 0 && svedit.editable}
+		<!--
+		Experimental: We'll let .empty-node-array act like a node, so the existing
+		code paths for selection mapping will work as expected.
 
-    TODO: Need to figure out a way to make .empty-node-array customizable.
-    -->
-    <div
-      class="node empty-node-array"
-      data-path={[...path, 0].join('.')}
-      data-type="node"
-      style="anchor-name: --{[...path, 0].join('-')}; position: relative; min-height: 40px; min-width: 40px;"
-    >
-      <NodeCursorTrap path={[...path, 0]} type="position-zero-cursor-trap" />
-    </div>
-  {/if}
-  {#each nodes as node, index (index) }
-    {@const Component = svedit.doc.config.node_components[snake_to_pascal(node.type)]}
-    {#if Component}
-      <Component path={[...path, index]} />
-    {:else}
-      <UnknownNode path={[...path, index]} />
-    {/if}
-  {/each}
-</div>
+		TODO: Need to figure out a way to make .empty-node-array customizable.
+		-->
+		<div
+			class="node empty-node-array"
+			data-path={[...path, 0].join('.')}
+			data-type="node"
+			style="anchor-name: --{[...path, 0].join(
+				'-'
+			)}; position: relative; min-height: 40px; min-width: 40px;"
+		>
+			<NodeCursorTrap path={[...path, 0]} type="position-zero-cursor-trap" />
+		</div>
+	{/if}
+	{#each nodes as node, index (index)}
+		{@const Component = svedit.session.config.node_components[snake_to_pascal(node.type)]}
+		{#if Component}
+			<Component path={[...path, index]} />
+		{:else}
+			<UnknownNode path={[...path, index]} />
+		{/if}
+	{/each}
+</svelte:element>

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

@@ -1 +1 @@
-{"version":3,"file":"NodeArrayProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NodeArrayProperty.svelte.js"],"names":[],"mappings":";;;;;AA6CA,mHAAgE"}
+{"version":3,"file":"NodeArrayProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NodeArrayProperty.svelte.js"],"names":[],"mappings":";;;;;AAgDA,mHAAgE"}