svedit 0.9.0 → 0.11.0

package/src/lib/Command.svelte.js

@@ -1,5 +1,6 @@
 import { insert_default_node, break_text_node } from './transforms.svelte.js';
-import { is_selection_collapsed, is_mobile_browser, get_char_length } from './utils.js';
+import { can_switch_annotation_type } from './doc_utils.js';
+import { is_selection_collapsed, is_mobile_browser, get_char_length, char_slice } from './utils.js';
 
 /**
  * Base class for commands that can be executed in response to user actions
@@ -93,7 +94,11 @@ export class RedoCommand extends Command {
  */
 export class SelectParentCommand extends Command {
 	is_enabled() {
-		return this.context.editable && this.context.session.selection;
+		return (
+			this.context.editable &&
+			this.context.session.selection &&
+			this.context.session.selection.path.length > 3
+		);
 	}
 
 	execute() {
@@ -119,14 +124,24 @@ export class ToggleAnnotationCommand extends Command {
 
 	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 =
-			!session.active_annotation() && !is_selection_collapsed(session.selection);
+			!active_annotation && !is_selection_collapsed(session.selection);
 
 		return (
 			editable &&
 			session.selection?.type === 'text' &&
-			(has_annotation || no_annotation_and_caret_not_collapsed)
+			(has_annotation || can_switch_annotation || no_annotation_and_caret_not_collapsed)
 		);
 	}
 
@@ -154,7 +169,26 @@ export class AddNewLineCommand extends Command {
 	}
 
 	execute() {
-		this.context.session.apply(this.context.session.tr.insert_text('\n'));
+		const session = this.context.session;
+		const selection = session.selection;
+		if (!selection || selection.type !== 'text') return;
+		if (!session.inspect(selection.path).allow_newlines) return;
+
+		const tr = session.tr;
+		if (selection.anchor_offset !== selection.focus_offset) {
+			tr.delete_selection();
+		}
+
+		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 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 ]*/);
+		const indentation = indentation_match ? indentation_match[0] : '';
+
+		tr.insert_text(`\n${indentation}`);
+		session.apply(tr);
 	}
 }
 
@@ -165,7 +199,15 @@ export class AddNewLineCommand extends Command {
  */
 export class BreakTextNodeCommand extends Command {
 	is_enabled() {
-		return this.context.editable && this.context.session.selection?.type === 'text';
+		const session = this.context.session;
+		const selection = session.selection;
+		if (!this.context.editable || selection?.type !== 'text') return false;
+
+		const owner_node = session.get(selection.path.slice(0, -1));
+		const owner_node_schema = owner_node ? session.schema[owner_node.type] : null;
+		if (!owner_node_schema || owner_node_schema.kind !== 'text') return false;
+
+		return session.inspect(selection.path.slice(0, -2))?.type === 'node_array';
 	}
 
 	execute() {

package/src/lib/CustomProperty.svelte

@@ -1,26 +1,25 @@
 <script>
-	import { getContext } from 'svelte';
+	import { serialize_path } from './utils.js';
 
 	/** @import { CustomPropertyProps } from './types.d.ts'; */
-	const svedit = getContext('svedit');
 
 	/** @type {CustomPropertyProps} */
 	let { path, tag = 'div', class: css_class, children, style, ...rest } = $props();
+	let path_str = $derived(serialize_path(path));
+
 </script>
 
 <svelte:element
 	this={tag}
 	class={css_class}
 	data-type="property"
-	data-path={path.join('.')}
-	style="anchor-name: --{path.join('-')};{style ? ` ${style}` : ''}"
+	data-path={path_str}
+	style="anchor-name: --{path_str};{style ? ` ${style}` : ''}"
 	{...rest}
 >
-	{#if svedit.editable}
-		<div class="property-selectable">
-			<div class="svedit-selectable"><br /></div>
-		</div>
-	{/if}
+	<div class="property-selectable">
+		<div class="svedit-selectable"><br /></div>
+	</div>
 
 	{@render children()}
 </svelte:element>
@@ -37,5 +36,17 @@
 		bottom: 0;
 		z-index: 1;
 		outline: none;
+		/* Position the hidden selectable element at the bottom so the
+		   browser's native scroll-to-caret ensures the full property
+		   is visible, not just the top edge. */
+		display: none;
+		align-items: flex-end;
+		justify-content: center;
+	}
+	:global(.svedit.editable) .property-selectable {
+		display: flex;
+	}
+	.svedit-selectable {
+		caret-color: transparent;
 	}
 </style>

package/src/lib/Node.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { getContext } from 'svelte';
+	import { serialize_path } from './utils.js';
 
 	/** @import { NodeProps } from './types.d.ts'; */
 
@@ -9,6 +10,7 @@
 	let { path, children, tag = 'div', class: css_class, style = '', ...rest } = $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);
@@ -17,13 +19,13 @@
 </script>
 
 <svelte:element
-	id={node.id}
 	this={tag}
-	class="{css_class}{is_first ? ' first' : ''}{is_last ? ' last' : ''}"
+	id={node.id}
+	class="node-{node.type} {css_class}{is_first ? ' first' : ''}{is_last ? ' last' : ''}"
 	data-node-id={node.id}
-	data-path={path.join('.')}
+	data-path={path_str}
 	data-type="node"
-	style="anchor-name: --{path.join('-')};{style}"
+	style="anchor-name: --{path_str};{style}"
 	{...rest}
 >
 	{@render children()}
@@ -35,4 +37,4 @@
 		/* For developers who need to position their node with `position: absolute` or `position: relative`, they need to wrap their node in a div */
 		position: static !important;
 	}
-</style>
+</style>

package/src/lib/NodeArrayProperty.svelte

@@ -1,82 +1,93 @@
 <script>
 	import { getContext, setContext } from 'svelte';
 	import UnknownNode from './UnknownNode.svelte';
-	import { snake_to_pascal } from './utils.js';
+	import { serialize_path } from './utils.js';
 	import DefaultNodeGap from './NodeGap.svelte';
 	import DefaultNodeGapMarkers from './NodeGapMarkers.svelte';
 
 	/** @import { NodeArrayPropertyProps } from './types.d.ts'; */
 
 	const svedit = getContext('svedit');
-	let NodeGap = $derived(svedit.session.config.system_components?.NodeGap ?? DefaultNodeGap);
-	let NodeGapMarkers = $derived(svedit.session.config.system_components?.NodeGapMarkers ?? DefaultNodeGapMarkers);
+	let NodeGap = $derived(svedit.session.config.system_components?.node_gap ?? DefaultNodeGap);
+	let NodeGapMarkers = $derived(
+		svedit.session.config.system_components?.node_gap_markers ?? DefaultNodeGapMarkers
+	);
 
 	/** @type {NodeArrayPropertyProps} */
 	let { path, tag = 'div', class: css_class, style = '', ...rest } = $props();
 
-	let nodes = $derived(
-		svedit.session
-			.get(path)
-			.map(/** @param {string} node_id */ (node_id) => svedit.session.get(node_id))
+	// Pre-joined once per path change; reused by data-path and by every
+	// NodeGap's should_position_gap call to avoid N+1 joins per render.
+	let path_str = $derived(serialize_path(path));
+
+	let node_ids = $derived(svedit.session.get(path));
+	let nodes = $derived(node_ids.map((id) => svedit.session.get(id)));
+
+	// Mirrors the AnnotatedTextProperty pattern: a `focused` class follows
+	// the model selection. Used by the CSS rule below to hide the empty-array
+	// NodeGap while the caret is in the placeholder, so its <br> isn't a
+	// second arrow-key stop (issue #260).
+	let is_focused = $derived(
+		svedit.session.selection?.type === 'node' &&
+			serialize_path(svedit.session.selection.path) === path_str
 	);
 
 	setContext('node_array_meta', {
-		get length() { return nodes.length; }
+		get length() {
+			return node_ids.length;
+		}
 	});
 </script>
+
 <!-- we use the anchor of node_array in Overlays.svelte to position the last insertion point in a horizontal layout based on the right edge of the container -->
-<svelte:element 
-	this={tag} 
-	class={css_class} 
-	data-type="node_array" 
-	data-path={path.join('.')} 
-	style="anchor-name: --{path.join('-')};{style ? ` ${style}` : ''}" {...rest}
+<svelte:element
+	this={tag}
+	class={css_class}
+	class:focused={is_focused}
+	data-type="node_array"
+	data-path={path_str}
+	style="anchor-name: --{path_str};{style ? ` ${style}` : ''}"
+	{...rest}
 >
-	{#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.
-		-->
+	{#if node_ids.length === 0 && svedit.editable}
 		<div
-			class="node empty-node-array"
-			data-path={[...path, 0].join('.')}
+			class="empty-node-placeholder"
+			data-path={serialize_path([...path, 0])}
 			data-type="node"
-			style="anchor-name: --{[...path, 0].join(
-				'-'
-			)}; min-height: 40px; min-width: 24px;"
-		></div>
-		<!-- Sibling (not child) of .empty-node-array so its .svedit-selectable
-		     resolves anchor positioning against the shared containing block,
-		     not the placeholder which inherits .node positioning styles. -->
-		<NodeGap array_path={path} offset={0} count={0} empty />
+			style="anchor-name: --{serialize_path([...path, 0])};"
+		>
+			<NodeGap array_path={path} offset={0} count={0} empty />
+		</div>
 	{/if}
 	{#each nodes as node, index (index)}
-		{#if svedit.editable}
-			<NodeGap
-				array_path={path}
-				offset={index}
-				count={nodes.length}
-				positioned={svedit.is_near_viewport?.([...path, index]) ?? true}
-			/>
-		{/if}
-		{@const Component = svedit.session.config.node_components[snake_to_pascal(node.type)]}
+		<NodeGap array_path={path} offset={index} count={nodes.length} />
+		{@const Component = svedit.session.config.node_components[node.type]}
 		{#if Component}
 			<Component path={[...path, index]} />
 		{:else}
 			<UnknownNode path={[...path, index]} />
 		{/if}
 	{/each}
-	{#if svedit.editable && nodes.length > 0}
-		<NodeGap
-			array_path={path}
-			offset={nodes.length}
-			count={nodes.length}
-			positioned={svedit.is_near_viewport?.([...path, nodes.length - 1]) ?? true}
-		/>
+	{#if node_ids.length > 0}
+		<NodeGap array_path={path} offset={node_ids.length} count={node_ids.length} />
 	{/if}
 	{#if svedit.editable && NodeGapMarkers}
-		<NodeGapMarkers {path} />
+		<NodeGapMarkers {path} count={node_ids.length} />
 	{/if}
 </svelte:element>
+
+<style>
+	/* position: relative makes this the containing block for the gap's
+   .svedit-selectable, which fills it via inset:0. You may override to
+   position: absolute (e.g. so an empty array doesn't occupy flow space)
+   — still a containing block; then also set position: relative on the
+   parent node-array container so this placeholder's inset:0 resolves
+   against it. */
+	:where(.empty-node-placeholder) {
+		position: relative;
+		inset: 0;
+		min-height: 40px;
+		min-width: 24px;
+		cursor: pointer;
+	}
+</style>

package/src/lib/NodeCaret.svelte

@@ -11,13 +11,6 @@
 <div class="caret" role="none"></div>
 
 <style>
-	@keyframes node-caret-blink {
-		0%, 60% { opacity: 1; }
-		68% { opacity: 0; }
-		88% { opacity: 0; }
-		100% { opacity: 1; }
-	}
-
 	.caret {
 		--_R: var(--row, 1);
 		--_C: calc(1 - var(--row, 1));