svedit 0.10.0 → 0.11.1

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/dist/utils.d.ts

@@ -1,5 +1,18 @@
 /**
- * Detect if the current browser is on a mobile device
+ * Detect if the virtual keyboard is likely visible.
+ *
+ * This is a heuristic based on the visual viewport becoming smaller than the
+ * layout viewport.
+ *
+ * @returns {boolean} true if the virtual keyboard is likely active, false otherwise
+ */
+export function is_virtual_keyboard_active(): boolean;
+/**
+ * Detect if the current browser is likely on a mobile device.
+ *
+ * This uses the user agent only so touch-capable laptops are not treated as
+ * mobile browsers.
+ *
  * @returns {boolean} true if mobile browser, false otherwise
  */
 export function is_mobile_browser(): boolean;

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.js"],"names":[],"mappings":"AAMA;;;GAGG;AACH,qCAFa,OAAO,CAanB;AAGD;;;GAGG;AACH,6CAFa,OAAO,CAUnB;AAED;;;;;;;;;;;;;GAaG;AACH,qCARW,MAAM,GACJ,MAAM,CASlB;AAGD;;;;;;;;;;;;;;GAcG;AACH,iCATW,MAAM,SACN,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;;;;;;;;GAcG;AACH,gCATW,MAAM,SACN,MAAM,QACN,MAAM,GACJ,MAAM,CAYlB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,gBACN,MAAM,GACJ,MAAM,CAmBlB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,eACN,MAAM,GACJ,MAAM,CAelB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,4DAZW,aAAa,eACb,MAAM,GACJ,CAAC,aAAa,EAAE,aAAa,CAAC,CA6C1C;AAED;;;;;;;;;;;;;GAaG;AACH,gDARW,aAAa,eACb,aAAa,GACX,aAAa,CA4CzB;AAED;;;;;;;;GAQG;AACH,qCANW,MAAM,GACJ,MAAM,CAUlB;AAMD;;;;;;;;;GASG;AACH,sDAHW,MAAM,GACJ,OAAO,CAQnB;AAED;;;;;;GAMG;AACH,oDAJW,MAAM,UACN,MAAM,GACJ,IAAI,CAQhB;AAED;;;;;;;;;;;;GAYG;AACH,qCANW,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GACpB,MAAM,CAmBlB;AAED;;;;;;;;GAQG;AACH,kDANW,MAAM,GACJ,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAuBlC;AAED;;;;;;GAMG;AACH,+BAJW,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KACtB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GACpB,OAAO,CAKnB;AAED,uEAgCC;AAED;;;;;GAKG;AACH,gDAHW,SAAS,GACP,cAAc,GAAG,IAAI,CAWjC;AAED,gEAMC;AApKD,6BAA8B,IAAI,CAAC;mCAtRsC,cAAc;+BAAd,cAAc;oCAAd,cAAc"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.js"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,8CAFa,OAAO,CAanB;AAED;;;;;;;GAOG;AACH,qCAFa,OAAO,CASnB;AAGD;;;GAGG;AACH,6CAFa,OAAO,CAUnB;AAED;;;;;;;;;;;;;GAaG;AACH,qCARW,MAAM,GACJ,MAAM,CASlB;AAGD;;;;;;;;;;;;;;GAcG;AACH,iCATW,MAAM,SACN,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;;;;;;;;GAcG;AACH,gCATW,MAAM,SACN,MAAM,QACN,MAAM,GACJ,MAAM,CAYlB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,gBACN,MAAM,GACJ,MAAM,CAmBlB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,eACN,MAAM,GACJ,MAAM,CAelB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,4DAZW,aAAa,eACb,MAAM,GACJ,CAAC,aAAa,EAAE,aAAa,CAAC,CA6C1C;AAED;;;;;;;;;;;;;GAaG;AACH,gDARW,aAAa,eACb,aAAa,GACX,aAAa,CA4CzB;AAED;;;;;;;;GAQG;AACH,qCANW,MAAM,GACJ,MAAM,CAUlB;AAMD;;;;;;;;;GASG;AACH,sDAHW,MAAM,GACJ,OAAO,CAQnB;AAED;;;;;;GAMG;AACH,oDAJW,MAAM,UACN,MAAM,GACJ,IAAI,CAQhB;AAED;;;;;;;;;;;;GAYG;AACH,qCANW,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GACpB,MAAM,CAmBlB;AAED;;;;;;;;GAQG;AACH,kDANW,MAAM,GACJ,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAuBlC;AAED;;;;;;GAMG;AACH,+BAJW,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KACtB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GACpB,OAAO,CAKnB;AAED,uEAgCC;AAED;;;;;GAKG;AACH,gDAHW,SAAS,GACP,cAAc,GAAG,IAAI,CAWjC;AAED,gEAMC;AApKD,6BAA8B,IAAI,CAAC;mCA3SsC,cAAc;+BAAd,cAAc;oCAAd,cAAc"}

package/dist/utils.js

@@ -5,20 +5,41 @@
 const SEGMENTER = new Intl.Segmenter('en', { granularity: 'grapheme' });
 
 /**
- * Detect if the current browser is on a mobile device
+ * Detect if the virtual keyboard is likely visible.
+ *
+ * This is a heuristic based on the visual viewport becoming smaller than the
+ * layout viewport.
+ *
+ * @returns {boolean} true if the virtual keyboard is likely active, false otherwise
+ */
+export function is_virtual_keyboard_active() {
+	if (typeof window === 'undefined' || typeof document === 'undefined') {
+		return false;
+	}
+
+	const visual_viewport = window.visualViewport;
+	if (!visual_viewport) {
+		return false;
+	}
+
+	return visual_viewport.height < document.documentElement.clientHeight;
+}
+
+/**
+ * Detect if the current browser is likely on a mobile device.
+ *
+ * This uses the user agent only so touch-capable laptops are not treated as
+ * mobile browsers.
+ *
  * @returns {boolean} true if mobile browser, false otherwise
  */
 export function is_mobile_browser() {
-	if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+	if (typeof navigator === 'undefined') {
 		return false;
 	}
 
 	const user_agent = navigator.userAgent;
-	return (
-		/iPhone|iPad|iPod|Android|Mobile/i.test(user_agent) ||
-		'ontouchstart' in window ||
-		navigator.maxTouchPoints > 0
-	);
+	return /iPhone|iPad|iPod|Android|Mobile/i.test(user_agent);
 }
 
 // ‼️‼️‼️‼️‼️‼️ UNUSED UTILITY BELOW ‼️‼️‼️‼️‼️‼️

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svedit",
-	"version": "0.10.0",
+	"version": "0.11.1",
 	"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, get_char_length, char_slice } from './utils.js';
 
 /**
  * Base class for commands that can be executed in response to user actions
@@ -153,7 +153,6 @@ export class ToggleAnnotationCommand extends Command {
 /**
  * Command that adds a new line character at the current caret 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() {
@@ -162,14 +161,32 @@ export class AddNewLineCommand extends Command {
 
 		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'));
+		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 +197,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/KeyMapper.svelte.js

@@ -1,3 +1,5 @@
+import { is_virtual_keyboard_active } from './utils.js';
+
 const MODIFIER_KEYS = ['meta', 'ctrl', 'alt', 'shift'];
 const MODIFIER_EVENT_KEYS = {
 	meta: 'metaKey',
@@ -34,7 +36,7 @@ export function define_keymap(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) {
+function matches_key_combo(key_combo, event, virtual_keyboard_active = false) {
 	const alternatives = key_combo.split(',');
 
 	return alternatives.some((alternative) => {
@@ -42,14 +44,22 @@ function matches_key_combo(key_combo, event) {
 		const modifiers = parts.filter((part) => MODIFIER_KEYS.includes(part));
 		const non_modifier = parts.find((part) => !MODIFIER_KEYS.includes(part));
 
+		if (virtual_keyboard_active && modifiers.length > 0) {
+			return false;
+		}
+
 		// 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
-		});
+		// NOTE: On virtual keyboards (iOS / Anroid) modifier keys are just ignored, because
+		// they must be assumed accidental (e.g. Shift activated as a result of auto-capitalization)
+		const no_extra_modifiers = virtual_keyboard_active
+			? true
+			: 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;
@@ -65,8 +75,10 @@ function matches_key_combo(key_combo, event) {
  * but don't crash the application.
  */
 function handle_key_map(key_map, event) {
+	const virtual_keyboard_active = is_virtual_keyboard_active();
+
 	for (const [key_combo, commands] of Object.entries(key_map)) {
-		if (matches_key_combo(key_combo, event)) {
+		if (matches_key_combo(key_combo, event, virtual_keyboard_active)) {
 			// Find the first enabled command and execute it
 			const enabled_command = commands.find((cmd) => cmd.is_enabled());
 			if (enabled_command) {

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>