svedit 0.10.0 → 0.11.0

package/dist/paste_utils.js

@@ -0,0 +1,167 @@
+/**
+ * @import { DocumentSchema } from './types.d.ts'
+ */
+
+export function normalize_line_endings(text) {
+	return text.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+}
+
+export function dedent_plain_text(plain_text) {
+	const lines = normalize_line_endings(plain_text).split('\n');
+	if (lines.length < 2) return plain_text;
+
+	const non_empty_lines = lines.filter((line) => line.trim().length > 0);
+	if (non_empty_lines.length === 0) return plain_text;
+
+	const indented_non_empty_lines = non_empty_lines.filter((line) => /^[\t ]+/.test(line));
+	const indented_line_ratio = indented_non_empty_lines.length / non_empty_lines.length;
+	if (indented_line_ratio < 0.8) return plain_text;
+
+	const leading_whitespace_lengths = indented_non_empty_lines
+		.map((line) => line.match(/^[\t ]+/)?.[0].length || 0)
+		.filter(Boolean);
+	if (leading_whitespace_lengths.length === 0) return plain_text;
+
+	const dedent_size = Math.min(...leading_whitespace_lengths);
+	if (dedent_size <= 0) return plain_text;
+
+	return lines
+		.map((line) => {
+			if (line.trim().length === 0) return line;
+			let removable_count = 0;
+			while (removable_count < dedent_size && removable_count < line.length) {
+				const char = line[removable_count];
+				if (char === ' ' || char === '\t') {
+					removable_count += 1;
+				} else {
+					break;
+				}
+			}
+			return line.slice(removable_count);
+		})
+		.join('\n');
+}
+
+export function split_plain_text_paragraphs(plain_text) {
+	return normalize_line_endings(plain_text)
+		.split(/\n{2,}/)
+		.map((fragment) => fragment.trim())
+		.filter(Boolean);
+}
+
+export function normalize_plain_text_for_single_line_property(plain_text) {
+	return normalize_line_endings(plain_text).replace(/\s*\n+\s*/g, ' ');
+}
+
+/**
+ * @param {string | null | undefined} node_type
+ * @param {DocumentSchema} schema
+ * @returns {string | null}
+ */
+export function get_text_property_name(node_type, schema) {
+	if (!node_type) return null;
+	const node_schema = schema[node_type];
+	if (!node_schema || node_schema.kind !== 'text') return null;
+	if (node_schema.properties?.content?.type === 'annotated_text') return 'content';
+	return (
+		Object.entries(node_schema.properties).find(([, property_definition]) => {
+			return property_definition.type === 'annotated_text';
+		})?.[0] || null
+	);
+}
+
+/**
+ * @param {any} node
+ * @param {DocumentSchema} schema
+ * @returns {{ text: string, annotations: any[] } | null}
+ */
+export function get_text_content(node, schema) {
+	if (!node || typeof node !== 'object') return null;
+
+	const text_property_name = get_text_property_name(node.type, schema);
+	if (
+		text_property_name &&
+		node[text_property_name] &&
+		typeof node[text_property_name].text === 'string' &&
+		Array.isArray(node[text_property_name].annotations)
+	) {
+		return node[text_property_name];
+	}
+
+	if (node.content && typeof node.content.text === 'string' && Array.isArray(node.content.annotations)) {
+		return node.content;
+	}
+
+	return null;
+}
+
+/**
+ * @param {any} node
+ * @param {DocumentSchema} schema
+ * @returns {boolean}
+ */
+export function is_text_like_node_payload(node, schema) {
+	if (!node || typeof node !== 'object') return false;
+	if (schema[node.type]?.kind === 'text') return true;
+	return !!get_text_content(node, schema);
+}
+
+/**
+ * @param {any} node_array_property_definition
+ * @param {DocumentSchema} schema
+ * @returns {string | null}
+ */
+export function get_default_text_node(node_array_property_definition, schema) {
+	if (
+		node_array_property_definition?.type !== 'node_array' ||
+		!Array.isArray(node_array_property_definition.node_types)
+	) {
+		return null;
+	}
+
+	const default_node_type = node_array_property_definition.default_node_type;
+	if (default_node_type && schema[default_node_type]?.kind === 'text') {
+		return default_node_type;
+	}
+
+	return (
+		node_array_property_definition.node_types.find((node_type) => schema[node_type]?.kind === 'text') ||
+		null
+	);
+}
+
+/**
+ * @param {string[]} paragraph_fragments
+ * @param {string | null | undefined} node_type
+ * @param {DocumentSchema} schema
+ * @returns {{ main_nodes: string[], nodes: Record<string, any> } | null}
+ */
+export function create_plain_text_nodes_payload(paragraph_fragments, node_type, schema) {
+	if (!Array.isArray(paragraph_fragments) || paragraph_fragments.length === 0 || !node_type) {
+		return null;
+	}
+
+	const text_property_name = get_text_property_name(node_type, schema);
+	if (!text_property_name) return null;
+
+	const payload = {
+		main_nodes: [],
+		nodes: {}
+	};
+
+	for (let i = 0; i < paragraph_fragments.length; i++) {
+		const fragment = paragraph_fragments[i];
+		const node_id = 'fragment_' + i;
+		payload.nodes[node_id] = {
+			id: node_id,
+			type: node_type,
+			[text_property_name]: {
+				text: fragment,
+				annotations: []
+			}
+		};
+		payload.main_nodes.push(node_id);
+	}
+
+	return payload;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svedit",
-	"version": "0.10.0",
+	"version": "0.11.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/AnnotatedTextProperty.svelte

@@ -5,7 +5,6 @@
 		get_char_length,
 		paths_equal,
 		serialize_path,
-		snake_to_pascal,
 		get_selection_range
 	} from './utils.js';
 
@@ -109,7 +108,6 @@
 
 		return fragments;
 	}
-
 </script>
 
 <!-- ATTENTION: The comments are needed to prevent unwanted text nodes with whitespace. -->
@@ -133,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}
@@ -167,7 +164,7 @@
 		caret-color: transparent !important;
 	}
 	:global(.svedit.editable) [placeholder].empty.focused::before {
-		content: "";
+		content: '';
 		/* we limit width & height to avoid layout shifts in case the text has a lower natural height */
 		width: 0px;
 		height: 1cap;

package/src/lib/Command.svelte.js

@@ -1,6 +1,6 @@
 import { insert_default_node, break_text_node } from './transforms.svelte.js';
 import { can_switch_annotation_type } from './doc_utils.js';
-import { is_selection_collapsed, is_mobile_browser, get_char_length } from './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
@@ -169,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);
 	}
 }
 
@@ -180,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/NodeArrayProperty.svelte

@@ -1,15 +1,17 @@
 <script>
 	import { getContext, setContext } from 'svelte';
 	import UnknownNode from './UnknownNode.svelte';
-	import { serialize_path, 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();
@@ -26,8 +28,8 @@
 	// 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
+		svedit.session.selection?.type === 'node' &&
+			serialize_path(svedit.session.selection.path) === path_str
 	);
 
 	setContext('node_array_meta', {
@@ -35,7 +37,6 @@
 			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 -->
@@ -55,21 +56,12 @@
 			data-type="node"
 			style="anchor-name: --{serialize_path([...path, 0])};"
 		>
-		<NodeGap
-			array_path={path}
-			offset={0}
-			count={0}
-			empty
-		/>
+			<NodeGap array_path={path} offset={0} count={0} empty />
 		</div>
 	{/if}
 	{#each nodes as node, index (index)}
-		<NodeGap
-			array_path={path}
-			offset={index}
-			count={nodes.length}
-		/>
-		{@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}
@@ -77,11 +69,7 @@
 		{/if}
 	{/each}
 	{#if node_ids.length > 0}
-		<NodeGap
-			array_path={path}
-			offset={node_ids.length}
-			count={node_ids.length}
-		/>
+		<NodeGap array_path={path} offset={node_ids.length} count={node_ids.length} />
 	{/if}
 	{#if svedit.editable && NodeGapMarkers}
 		<NodeGapMarkers {path} count={node_ids.length} />
@@ -89,7 +77,7 @@
 </svelte:element>
 
 <style>
-/* position: relative makes this the containing block for the gap's
+	/* 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
@@ -102,4 +90,4 @@
 		min-width: 24px;
 		cursor: pointer;
 	}
-</style>
+</style>

package/src/lib/NodeGap.svelte

@@ -2,7 +2,7 @@
 	function cycle_z_index(/** @type {MouseEvent} */ e) {
 		const el = /** @type {HTMLElement} */ (e.currentTarget);
 		if (el.hasAttribute('data-sent-to-back')) {
-			document.querySelectorAll('.svedit-selectable[data-sent-to-back]').forEach(prev => {
+			document.querySelectorAll('.svedit-selectable[data-sent-to-back]').forEach((prev) => {
 				prev.removeAttribute('data-sent-to-back');
 			});
 		}
@@ -50,7 +50,7 @@
 	 * Row/column detection uses var(--row, 1) with the * 99999 multiplier
 	 * trick — no @container style() queries, works in all browsers.
 	 *
-	 * If you override this component via `system_components.NodeGap`, make
+	 * If you override this component via `system_components.node_gap`, make
 	 * sure your custom component also handles read-only mode by rendering a
 	 * plain `.node-gap` placeholder without editable internals.
 	 */
@@ -74,7 +74,7 @@
 	});
 
 	let anchor_name = $derived.by(() => {
-    if (!is_editable) return '';
+		if (!is_editable) return '';
 		if (is_first) return `--g-${serialize_path([...array_path, 0])}-gap-before`;
 		return `--g-${serialize_path([...array_path, offset - 1])}-gap-after`;
 	});
@@ -93,7 +93,9 @@
 		style={gap_style}
 	>
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="svedit-selectable" style="anchor-name:{anchor_name}" onpointerdown={cycle_z_index}><br /></div>
+		<div class="svedit-selectable" style="anchor-name:{anchor_name}" onpointerdown={cycle_z_index}>
+			<br />
+		</div>
 	</div>
 {:else}
 	<div class="node-gap"></div>
@@ -161,8 +163,14 @@
 		--_s-r: anchor(var(--_pa) right, 9999999px);
 	}
 	:global(.node-gap.positioned.gap-before:not(.empty)) {
-		--_b-t: anchor(var(--node-caret-boundary-y, var(--node-caret-boundary, --_no-boundary)) top, 0px);
-		--_b-l: anchor(var(--node-caret-boundary-x, var(--node-caret-boundary, --_no-boundary)) left, 0px);
+		--_b-t: anchor(
+			var(--node-caret-boundary-y, var(--node-caret-boundary, --_no-boundary)) top,
+			0px
+		);
+		--_b-l: anchor(
+			var(--node-caret-boundary-x, var(--node-caret-boundary, --_no-boundary)) left,
+			0px
+		);
 	}
 	:global(.node-gap.positioned.gap-after:not(.last)) {
 		--_n-t: anchor(var(--_next) top);
@@ -175,10 +183,22 @@
 		--_c-b: anchor(var(--_container) bottom);
 		--_c-l: anchor(var(--_container) left);
 		--_c-r: anchor(var(--_container) right);
-		--_b-b: anchor(var(--node-caret-boundary-y, var(--node-caret-boundary, --_no-boundary)) bottom, 0px);
-		--_b-r: anchor(var(--node-caret-boundary-x, var(--node-caret-boundary, --_no-boundary)) right, 0px);
-		--_b-bt: anchor(var(--node-caret-boundary-y, var(--node-caret-boundary, --_no-boundary)) bottom, 9999999px);
-		--_b-rl: anchor(var(--node-caret-boundary-x, var(--node-caret-boundary, --_no-boundary)) right, 9999999px);
+		--_b-b: anchor(
+			var(--node-caret-boundary-y, var(--node-caret-boundary, --_no-boundary)) bottom,
+			0px
+		);
+		--_b-r: anchor(
+			var(--node-caret-boundary-x, var(--node-caret-boundary, --_no-boundary)) right,
+			0px
+		);
+		--_b-bt: anchor(
+			var(--node-caret-boundary-y, var(--node-caret-boundary, --_no-boundary)) bottom,
+			9999999px
+		);
+		--_b-rl: anchor(
+			var(--node-caret-boundary-x, var(--node-caret-boundary, --_no-boundary)) right,
+			9999999px
+		);
 	}
 
 	:global(.node-gap.positioned .svedit-selectable) {
@@ -226,10 +246,8 @@
 			calc(var(--_s-l) + var(--_R) * 9999999px),
 			calc(var(--_s-r) + var(--_C) * 9999999px),
 			calc(
-				(var(--_s-r) + var(--_n-l)) / 2
-				- var(--_gm) / 2
-				+ max(0px, var(--_s-r) - var(--_n-l)) * 999
-				+ var(--_C) * 9999999px
+				(var(--_s-r) + var(--_n-l)) / 2 - var(--_gm) / 2 + max(0px, var(--_s-r) - var(--_n-l)) *
+					999 + var(--_C) * 9999999px
 			),
 			/* Safety clamp for wrap: pins gap inside CB when current/next
 			   wrap across rows. Disabled in nowrap/horizontal-scroll where
@@ -237,35 +255,25 @@
 			   the other branches position correctly and this clamp would
 			   wrongly force the gap to CB right minus eg. */
 			calc(
-				100% - var(--_eg)
-				+ max(0px, var(--_n-l) - var(--_s-r) + 0.5px) * 9999
-				+ var(--_C) * 9999999px
-			)
+					100% - var(--_eg) + max(0px, var(--_n-l) - var(--_s-r) + 0.5px) * 9999 + var(--_C) *
+						9999999px
+				)
 		);
 		right: min(
 			calc(var(--_s-r) + var(--_R) * 9999999px),
 			calc(
 				max(
-					0px,
-					min(
-						var(--_n-l),
-						calc(
-							(var(--_s-r) + var(--_n-l)) / 2
-							- var(--_gm) / 2
-						),
-						max(
-							min(
-								calc(var(--_c-r) - var(--_eg)),
-								calc(var(--_s-r) - var(--_eg))
-							),
-							calc(
-								var(--_s-r)
-								- (var(--_n-l) - var(--_s-r)) * 999
+						0px,
+						min(
+							var(--_n-l),
+							calc((var(--_s-r) + var(--_n-l)) / 2 - var(--_gm) / 2),
+							max(
+								min(calc(var(--_c-r) - var(--_eg)), calc(var(--_s-r) - var(--_eg))),
+								calc(var(--_s-r) - (var(--_n-l) - var(--_s-r)) * 999)
 							)
 						)
-					)
-				)
-				+ var(--_C) * 9999999px
+					) +
+					var(--_C) * 9999999px
 			)
 		);
 		min-height: calc(var(--_gm) * var(--_C));
@@ -307,23 +315,13 @@
 		left: min(
 			calc(var(--_s-l) + var(--_R) * 9999999px),
 			calc(min(var(--_s-r), calc(var(--_b-rl) - var(--_eg))) + var(--_C) * 9999999px),
-			calc(
-				100% - var(--_eg)
-				+ max(0px, var(--_s-r) - 100% + 0.5px) * 9999
-				+ var(--_C) * 9999999px
-			)
+			calc(100% - var(--_eg) + max(0px, var(--_s-r) - 100% + 0.5px) * 9999 + var(--_C) * 9999999px)
 		);
 		right: min(
 			calc(var(--_s-r) + var(--_R) * 9999999px),
 			calc(
-				max(
-					var(--_b-r),
-					min(
-						calc(var(--_c-r) - var(--_eg)),
-						calc(var(--_s-r) - var(--_eg))
-					)
-				)
-				+ var(--_C) * 9999999px
+				max(var(--_b-r), min(calc(var(--_c-r) - var(--_eg)), calc(var(--_s-r) - var(--_eg)))) +
+					var(--_C) * 9999999px
 			)
 		);
 		min-height: calc(var(--_eg) * var(--_C));
@@ -333,10 +331,7 @@
 	/* Before first node: col extends up, row extends left */
 	:global(.node-gap.positioned.gap-before:not(.empty) .svedit-selectable) {
 		top: min(
-			calc(
-				max(var(--_b-t), var(--_s-t) - var(--_eg))
-				+ var(--_R) * 9999999px
-			),
+			calc(max(var(--_b-t), var(--_s-t) - var(--_eg)) + var(--_R) * 9999999px),
 			calc(var(--_s-t) + var(--_C) * 9999999px)
 		);
 		bottom: min(
@@ -345,10 +340,7 @@
 		);
 		left: min(
 			calc(var(--_s-l) + var(--_R) * 9999999px),
-			calc(
-				max(var(--_b-l), var(--_s-l) - var(--_eg))
-				+ var(--_C) * 9999999px
-			)
+			calc(max(var(--_b-l), var(--_s-l) - var(--_eg)) + var(--_C) * 9999999px)
 		);
 		right: min(
 			calc(var(--_s-r) + var(--_R) * 9999999px),