svedit 0.9.0 → 0.11.0

package/dist/AnnotatedTextProperty.svelte

@@ -1,6 +1,12 @@
 <script>
 	import { getContext } from 'svelte';
-	import { char_slice, get_char_length, snake_to_pascal, get_selection_range } from './utils.js';
+	import {
+		char_slice,
+		get_char_length,
+		paths_equal,
+		serialize_path,
+		get_selection_range
+	} from './utils.js';
 
 	/** @import { AnnotatedTextPropertyProps, Annotation, Fragment, SelectionRange } from './types.d.ts'; */
 
@@ -9,10 +15,11 @@
 	/** @type {AnnotatedTextPropertyProps} */
 	let { path, class: css_class, placeholder = '', tag = 'div', style = '', ...rest } = $props();
 
+	let path_str = $derived(serialize_path(path));
+
 	let is_focused = $derived.by(() => {
 		return (
-			svedit.session.selection?.type === 'text' &&
-			path.join('.') === svedit.session.selection?.path.join('.')
+			svedit.session.selection?.type === 'text' && paths_equal(path, svedit.session.selection.path)
 		);
 	});
 
@@ -111,12 +118,11 @@
 <svelte:element
 	this={tag}
 	data-type="text"
-	data-path={path.join('.')}
-	style="anchor-name: --{path.join('-')};{style}"
+	data-path={path_str}
+	style="anchor-name: --{path_str};{style}"
 	class="text svedit-selectable {css_class}"
 	class:empty={is_empty}
 	class:focused={is_focused}
-	class:editable={svedit.editable}
 	{placeholder}
 	{...rest}
 >
@@ -125,8 +131,7 @@
 				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)]}
+			{@const AnnotationComponent = svedit.session.config.node_components[fragment.node.type]}
 			<AnnotationComponent
 				path={[...path, 'annotations', fragment.annotation_index, 'node_id']}
 				content={fragment.content}
@@ -137,11 +142,13 @@
 </svelte:element>
 
 <style>
-	.text {
+	/* Editable text base layout; :where() allows easy override without specificity conflicts. */
+	:where(.text) {
 		white-space: pre-wrap;
 		overflow-wrap: anywhere;
 		box-sizing: content-box;
 	}
+
 	/* 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 {
@@ -150,13 +157,36 @@
 		color: color-mix(in oklch, currentcolor 50%, transparent);
 	}
 
+	/* A virtual caret: to fix the caret vertical alignment issue in Chrome and Firefox for empty focused contenteditable with placeholders */
+	/* Browser BUG: iOS Safari only considers the caret color set on the top contenteditable element, not on nested elements (e.g. the second selector doesn't work in iOS Safari) */
+	:global(.svedit.editable .svedit-canvas:has([placeholder].empty.focused)),
+	:global(.svedit.editable) [placeholder].empty.focused {
+		caret-color: transparent !important;
+	}
+	:global(.svedit.editable) [placeholder].empty.focused::before {
+		content: '';
+		/* we limit width & height to avoid layout shifts in case the text has a lower natural height */
+		width: 0px;
+		height: 1cap;
+		display: inline-block;
+		/* we use box-shadow to draw the caret shape, matching the native caret */
+		box-shadow:
+			0 -0.4cap 0 0.65px var(--svedit-caret-color, AccentColor),
+			0 0 0 0.65px var(--svedit-caret-color, AccentColor),
+			0 0.4cap 0 0.65px var(--svedit-caret-color, AccentColor);
+		animation: var(
+			--node-caret-animation,
+			node-caret-blink var(--node-caret-blink-duration, 1.1s) ease-in-out infinite
+		);
+	}
+
 	/* 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;
 	}
 
 	/* Disable text-transform when editable and focused so users see original text */
-	.text.editable.focused {
+	:global(.svedit.editable) .text.focused {
 		text-transform: none !important;
 	}
 

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":";;;;;AAkIA,2HAAoE"}
+{"version":3,"file":"AnnotatedTextProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AnnotatedTextProperty.svelte.js"],"names":[],"mappings":";;;;;AAwIA,2HAAoE"}

package/dist/Command.svelte.d.ts

@@ -68,7 +68,6 @@ export class RedoCommand extends Command {
  * Useful for navigating up the document hierarchy.
  */
 export class SelectParentCommand extends Command {
-    is_enabled(): any;
     execute(): void;
 }
 /**

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

@@ -1 +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"}
+{"version":3,"file":"Command.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Command.svelte.js"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;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;IASC,gBAEC;CACD;AAED;;;GAGG;AACH;IACC,0CAGC;IADA,eAA0B;IAG3B,YAAoC;IAEpC,iBAEC;IAED,kBAqBC;IAED,gBAEC;CACD;AAED;;;;GAIG;AACH;IACC,kBAUC;IAED,gBAqBC;CACD;AAED;;;;GAIG;AACH;IAaC,gBAKC;CACD;AAED;;;GAGG;AACH;IACC,kBAEC;IAED,gBAwGC;CACD;AAED;;;GAGG;AACH;IAUC,gBAIC;CACD"}

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

@@ -3,5 +3,6 @@ type CustomProperty = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<CustomPropertyProps>): void;
 };
-declare const CustomProperty: import("svelte").Component<import("./types.d.ts").CustomPropertyProps, {}, "">;
+declare const CustomProperty: import("svelte").Component<CustomPropertyProps, {}, "">;
+import type { CustomPropertyProps } from './types.d.ts';
 //# sourceMappingURL=CustomProperty.svelte.d.ts.map

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":";;;;;AA6BA,6GAA6D"}
+{"version":3,"file":"CustomProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CustomProperty.svelte.js"],"names":[],"mappings":";;;;;AA4BA,sFAA6D;yCApBnB,cAAc"}

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

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

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

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

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