svedit 0.7.0 → 0.8.0

package/src/lib/NodeGapMarkers.svelte

@@ -66,6 +66,12 @@
 	 * --node-caret-blink-duration
 	 * --node-caret-animation
 	 * --node-caret-row-inline-position
+	 * --node-caret-boundary          (anchor-name of a parent element; edge
+	 *                                  gaps clamp to its edges instead of 0px.
+	 *                                  Prevents overlap when the node array has
+	 *                                  neighbors. See NodeGap.svelte for details.)
+	 * --node-caret-boundary-x        (per-axis override; clamps left/right only)
+	 * --node-caret-boundary-y        (per-axis override; clamps top/bottom only)
 	 *
 	 * Row/column detection uses var(--row, 1) with the * 99999 multiplier
 	 * trick throughout. Shorthand:
@@ -262,9 +268,11 @@
 
 	/* Edge first: column = above first node, row = left of first node */
 	.gap-edge.first {
+		--_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);
 		top: min(
 			calc(anchor(var(--_a) top) + var(--_C) * 99999px),
-			calc(max(0px, calc(anchor(var(--_a) top) - var(--_gm))) + var(--_R) * 99999px)
+			calc(max(var(--_b-t), calc(anchor(var(--_a) top) - var(--_gm))) + var(--_R) * 99999px)
 		);
 		bottom: min(
 			calc(anchor(var(--_a) bottom) + var(--_C) * 99999px),
@@ -272,7 +280,7 @@
 		);
 		left: min(
 			calc(anchor(var(--_a) left) + var(--_R) * 99999px),
-			calc(max(0px, calc(anchor(var(--_a) left) - var(--_gm))) + var(--_C) * 99999px)
+			calc(max(var(--_b-l), calc(anchor(var(--_a) left) - var(--_gm))) + var(--_C) * 99999px)
 		);
 		right: min(
 			calc(anchor(var(--_a) right) + var(--_R) * 99999px),
@@ -280,23 +288,40 @@
 		);
 	}
 
-	/* Edge last: column = below last node, row = right of last node */
+	/* Edge last: column = below last node, row = right of last node.
+	   top/left also clamp to boundary - gm so that min-height/min-width
+	   (which win over bottom/right in overconstrained abs-pos) cannot
+	   push the element past the boundary. */
 	.gap-edge.last {
+		--_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, 99999px);
+		--_b-rl: anchor(var(--node-caret-boundary-x, var(--node-caret-boundary, --_no-boundary)) right, 99999px);
 		top: min(
 			calc(anchor(var(--_a) top) + var(--_C) * 99999px),
-			calc(anchor(var(--_a) bottom) + var(--_R) * 99999px)
+			calc(
+				min(
+					anchor(var(--_a) bottom),
+					calc(var(--_b-bt) - var(--_gm))
+				) + var(--_R) * 99999px
+			)
 		);
 		bottom: min(
 			calc(anchor(var(--_a) bottom) + var(--_C) * 99999px),
-			calc(anchor(var(--_a) bottom) - var(--_gm) + var(--_R) * 99999px)
+			calc(max(var(--_b-b), calc(anchor(var(--_a) bottom) - var(--_gm))) + var(--_R) * 99999px)
 		);
 		left: min(
 			calc(anchor(var(--_a) left) + var(--_R) * 99999px),
-			calc(anchor(var(--_a) right) + var(--_C) * 99999px),
+			calc(
+				min(
+					anchor(var(--_a) right),
+					calc(var(--_b-rl) - var(--_gm))
+				) + var(--_C) * 99999px
+			),
 			calc(100% - var(--_gm) + var(--_C) * 99999px)
 		);
 		right: max(
-			calc(0px + var(--_C) * -99999px),
+			calc(var(--_b-r) + var(--_C) * -99999px),
 			calc(anchor(var(--_a) right) + var(--_R) * -99999px),
 			calc(anchor(var(--_a) right) - var(--_gm) + var(--_C) * -99999px),
 			calc(anchor(var(--_c) right) + var(--_C) * -99999px)
@@ -314,6 +339,7 @@
 		left: min(
 			calc(anchor(var(--_a) left) + var(--_R) * 99999px),
 			calc(anchor(var(--_a) right) + var(--_C) * 99999px),
+			calc(var(--_b-rl) - var(--_gm) + var(--_C) * 99999px),
 			calc(
 				anchor(var(--_a) right)
 				+ (max(0px, anchor(var(--_s) left) - anchor(var(--_f) right))) / 2
@@ -341,7 +367,7 @@
 		);
 		right: max(
 			calc(anchor(var(--_a) right) + var(--_R) * -99999px),
-			calc(0px + var(--_C) * -99999px),
+			calc(var(--_b-r) + var(--_C) * -99999px),
 			calc(
 				anchor(var(--_a) right)
 				- (
@@ -450,7 +476,7 @@
 		outline: 0.1px solid green;
 	}
 	.gap-marker {
-		outline: 0.1px solid blue;
+		outline: 1px solid blue;
 		outline-offset: 0.5px;
 	} */
-</style>
+</style>

package/src/lib/Svedit.svelte

@@ -269,6 +269,10 @@
 		if (!canvas_el?.contains(range.commonAncestorContainer)) return;
 		let selection = __get_selection_from_dom();
 		if (selection) {
+			// Avoid assigning a new object reference when the selection is
+			// structurally identical — prevents a redundant $effect cycle
+			// (render_selection → scrollIntoView) on every DOM layout change.
+			if (JSON.stringify(selection) === JSON.stringify(session.selection)) return;
 			session.selection = selection;
 		}
 	}
@@ -573,15 +577,15 @@ ${fallback_html}`;
 
 		let plain_text,
 			pasted_json,
-			pasted_images = [];
+			pasted_media = [];
 
 		// NOTE: For some reason, await navigator.clipboard.read()
 		const clipboard_items = event.clipboardData?.items || [];
 		for (const item of clipboard_items || []) {
-			if (item.type.startsWith('image/')) {
+			if (item.type.startsWith('image/') || item.type.startsWith('video/') || item.type.startsWith('audio/')) {
 				const blob = item.getAsFile();
 				const data_url = URL.createObjectURL(blob);
-				pasted_images.push({
+				pasted_media.push({
 					blob,
 					data_url,
 					type: item.type,
@@ -590,11 +594,12 @@ ${fallback_html}`;
 			}
 		}
 
-		if (pasted_images.length > 0) {
-			pasted_json = await session.config.handle_image_paste(session, pasted_images);
-			console.log('pasted_json_after_image_paste', pasted_json);
+		if (pasted_media.length > 0) {
+			const handle_media_paste = session.config.handle_media_paste || session.config.handle_image_paste
+			pasted_json = await handle_media_paste(session, pasted_media);
+			console.log('pasted_json_after_media_paste', pasted_json);
 			// NOTE: If no pasted_json is returned from the custom handler, we assume that content creation has been
-			// handled inside handle_image_paste already.
+			// handled inside handle_media_paste already.
 			if (!pasted_json) return;
 		} else {
 			// First try to extract svedit data from HTML format
@@ -763,6 +768,23 @@ ${fallback_html}`;
 		canvas_el?.focus();
 	}
 
+	/**
+	 * When a DOM selection endpoint lands in a sibling NodeGap (not inside
+	 * a node), resolves the adjacent node element for the walk-up algorithm.
+	 * @param {HTMLElement} el
+	 * @returns {HTMLElement | null}
+	 */
+	function __resolve_node_from_gap(el) {
+		const gap = /** @type {HTMLElement | null} */ (el.closest('[data-gap-array-path]'));
+		if (!gap) return null;
+		const array_path = gap.dataset.gapArrayPath;
+		const offset = parseInt(gap.dataset.gapOffset, 10);
+		const node_idx = offset > 0 ? offset - 1 : 0;
+		return /** @type {HTMLElement | null} */ (
+			canvas_el.querySelector(`[data-path="${array_path}.${node_idx}"][data-type="node"]`)
+		);
+	}
+
 	/**
 	 * Extracts a NodeSelection from the current DOM selection.
 	 *
@@ -782,56 +804,30 @@ ${fallback_html}`;
 		if (focus_node.nodeType !== Node.ELEMENT_NODE) focus_node = focus_node.parentElement;
 		if (anchor_node.nodeType !== Node.ELEMENT_NODE) anchor_node = anchor_node.parentElement;
 
-		// EDGE CASE: Let's first check if we are in a node gap for node carets
-		let gap_after_el =
-			focus_node && focus_node?.closest('[data-type="gap-after"]');
-		if (gap_after_el && focus_node === anchor_node) {
-			// Find the node that this gap belongs to
-			let node = /** @type {HTMLElement} */ (gap_after_el.closest('[data-type="node"]'));
-			if (!node) {
-				console.log('No corresponding node found for gap-after');
-				return null;
-			}
-			const node_path = /** @type {DocumentPath} */ (node.dataset.path.split('.'));
-			const node_index = parseInt(String(node_path.at(-1)), 10);
-
-			return {
-				type: 'node',
-				path: node_path.slice(0, -1),
-				anchor_offset: node_index + 1,
-				focus_offset: node_index + 1
-			};
-		}
-
-		// EDGE CASE: Let's check if we are in a gap-before for node_arrays.
-		let gap_before_el = focus_node.closest('[data-type="gap-before"]');
-		if (gap_before_el && focus_node === anchor_node) {
-			const node_array_el = /** @type {HTMLElement} */ (
-				gap_before_el.closest('[data-type="node_array"]')
-			);
-			const node_array_path = node_array_el.dataset.path.split('.');
+		// EDGE CASE: Collapsed selection inside a node gap (gap-after or gap-before).
+		// Gaps are siblings of nodes with data-gap-array-path and data-gap-offset.
+		const gap_el = /** @type {HTMLElement | null} */ (
+			focus_node.closest('[data-gap-array-path]')
+		);
+		if (gap_el && focus_node === anchor_node) {
+			const array_path = gap_el.dataset.gapArrayPath.split('.');
+			const gap_offset = parseInt(gap_el.dataset.gapOffset, 10);
 			return {
 				type: 'node',
-				path: node_array_path,
-				anchor_offset: 0,
-				focus_offset: 0
+				path: array_path,
+				anchor_offset: gap_offset,
+				focus_offset: gap_offset
 			};
 		}
 
-		let focus_root = /** @type {HTMLElement} */ (
-			focus_node.closest('[data-path][data-type="node"]')
-		);
+		let focus_root = __resolve_node_from_gap(focus_node)
+			?? /** @type {HTMLElement} */ (focus_node.closest('[data-path][data-type="node"]'));
 		if (!focus_root) return null;
 
-		let anchor_root = /** @type {HTMLElement} */ (
-			anchor_node.closest('[data-path][data-type="node"]')
-		);
+		let anchor_root = __resolve_node_from_gap(anchor_node)
+			?? /** @type {HTMLElement} */ (anchor_node.closest('[data-path][data-type="node"]'));
 		if (!anchor_root) return null;
 
-		if (!(focus_root && anchor_root)) {
-			return null;
-		}
-
 		let focus_root_path = focus_root.dataset.path.split('.');
 		let anchor_root_path = anchor_root.dataset.path.split('.');
 		let focus_node_depth = focus_root_path.length;
@@ -871,6 +867,10 @@ ${fallback_html}`;
 			}
 		}
 
+		// If both paths walked up to the root node, there's no common parent node_array
+		// (e.g. selecting between nav and page body). The resulting path would be empty.
+		if (anchor_root_path.length <= 1) return null;
+
 		let anchor_offset = parseInt(anchor_root_path.at(-1));
 		let focus_offset = parseInt(focus_root_path.at(-1));
 
@@ -1093,106 +1093,68 @@ ${fallback_html}`;
 	}
 
 	function __get_node_element(node_array_path, node_offset) {
-		const node_array_el = canvas_el.querySelector(
-			`[data-path="${node_array_path}"][data-type="node_array"]`
+		return canvas_el.querySelector(
+			`[data-path="${node_array_path}.${node_offset}"][data-type="node"]`
 		);
-		if (!node_array_el) return null;
-
-		const node_elements = node_array_el.children;
-		if (node_elements.length === 0) return null;
-
-		return node_elements[node_offset];
 	}
 
 	function __render_node_selection() {
 		const selection = /** @type {NodeSelection} */ (session.selection);
 		const node_array_path = selection.path.join('.');
-		let is_collapsed = selection.anchor_offset === selection.focus_offset;
-		let is_backward = !is_collapsed && selection.anchor_offset > selection.focus_offset;
-
-		// We need to translate the cusor offset to node offsets now
-		let anchor_node_offset, focus_node_offset;
+		const is_collapsed = selection.anchor_offset === selection.focus_offset;
+		const is_backward = !is_collapsed && selection.anchor_offset > selection.focus_offset;
 
-		if (is_collapsed) {
-			anchor_node_offset = Math.max(0, selection.anchor_offset - 1);
-			focus_node_offset = Math.max(0, selection.focus_offset - 1);
-		} else if (is_backward) {
-			anchor_node_offset = selection.anchor_offset - 1;
-			focus_node_offset = selection.focus_offset;
-		} else {
-			anchor_node_offset = selection.anchor_offset;
-			focus_node_offset = selection.focus_offset - 1;
-		}
-
-		const anchor_node = __get_node_element(node_array_path, anchor_node_offset);
-		const focus_node = __get_node_element(node_array_path, focus_node_offset);
+		const node_array_el = canvas_el.querySelector(
+			`[data-path="${node_array_path}"][data-type="node_array"]`
+		);
+		if (!node_array_el) return;
 
-		if (!anchor_node || !focus_node) return;
 		const dom_selection = window.getSelection();
 		const range = window.document.createRange();
 
-		if (is_collapsed) {
-			// Caret position in between two nodes or at the very beginning/end of a node_array
-			// IMPORTANT: We need to look for direct children of anchor_node to find the right node gap.
-			const gap_selector = selection.anchor_offset === 0
-				? '.gap-before'
-				: '.gap-after';
-			// In empty arrays the node gap is a sibling of the placeholder, not a child
-			const gap_el =
-				anchor_node.querySelector(`:scope > ${gap_selector}`) ??
-				anchor_node.parentElement?.querySelector(`:scope > ${gap_selector}`);
+		const gap_selector = (offset) =>
+			`[data-gap-array-path="${node_array_path}"][data-gap-offset="${offset}"]`;
 
+		if (is_collapsed) {
+			const gap_el = node_array_el.querySelector(gap_selector(selection.anchor_offset));
 			if (!gap_el) return;
-			range.setStart(gap_el, 1);
-			range.setEnd(gap_el, 1);
+			// Target .svedit-selectable (has a box), not gap_el which is
+			// display:contents and would cause the browser to normalize
+			// the range into the parent, breaking read-back.
+			const selectable = gap_el.querySelector('.svedit-selectable');
+			if (!selectable) return;
+			range.setStart(selectable, 1);
+			range.setEnd(selectable, 1);
 			dom_selection.removeAllRanges();
 			dom_selection.addRange(range);
 		} else {
-			// Expanded selection (one or more nodes are fully selectd)
+			const anchor_gap = node_array_el.querySelector(gap_selector(selection.anchor_offset));
+			const focus_gap = node_array_el.querySelector(gap_selector(selection.focus_offset));
+			if (!anchor_gap || !focus_gap) return;
+			const anchor_sel = anchor_gap.querySelector('.svedit-selectable');
+			const focus_sel = focus_gap.querySelector('.svedit-selectable');
+			if (!anchor_sel || !focus_sel) return;
+
 			if (is_backward) {
-				// Use the last selectable you find
-				const anchor_node_selectable = [...anchor_node.querySelectorAll('.svedit-selectable')].at(
-					-1
-				);
-				// Use the first selectable you find
-				const focus_node_selectable = [...focus_node.querySelectorAll('.svedit-selectable')].at(0);
-
-				range.setStart(focus_node_selectable, 1);
-				range.setEnd(anchor_node_selectable, 1);
 				dom_selection.removeAllRanges();
-				dom_selection.addRange(range);
-				// Phew, this was a hard nut to crack. But with that code the direction can be reversed.
-				dom_selection.setBaseAndExtent(anchor_node_selectable, 1, focus_node_selectable, 1);
+				dom_selection.setBaseAndExtent(anchor_sel, 1, focus_sel, 1);
 			} else {
-				// Use the first selectable you find
-				const anchor_node_selectable = [...anchor_node.querySelectorAll('.svedit-selectable')].at(
-					0
-				);
-				// Use the last selectable you find
-				const focus_node_selectable = [...focus_node.querySelectorAll('.svedit-selectable')].at(-1);
-
-				range.setStart(anchor_node_selectable, 1);
-				range.setEnd(focus_node_selectable, 1);
+				range.setStart(anchor_sel, 1);
+				range.setEnd(focus_sel, 1);
 				dom_selection.removeAllRanges();
 				dom_selection.addRange(range);
 			}
 		}
 
-		// Ensure the node_array is focused
-		const node_array_el = canvas_el.querySelector(
-			`[data-path="${node_array_path}"][data-type="node_array"]`
-		);
-		if (node_array_el) {
-			node_array_el.focus();
-			// Scroll the selection into view
+		node_array_el.focus();
+		const scroll_node_offset = is_collapsed
+			? Math.max(0, selection.anchor_offset - 1)
+			: (is_backward ? selection.focus_offset : selection.anchor_offset);
+		const scroll_node = __get_node_element(node_array_path, scroll_node_offset);
+		if (scroll_node) {
 			setTimeout(() => {
-				(is_backward ? focus_node : anchor_node).scrollIntoView({
-					block: 'nearest',
-					inline: 'nearest'
-				});
+				scroll_node.scrollIntoView({ block: 'nearest', inline: 'nearest' });
 			}, 0);
-		} else {
-			console.log('No container element found!');
 		}
 	}
 

package/src/lib/node_gap_computation.svelte.js

@@ -26,7 +26,7 @@
  *
  * The viewport tracker drives **lazy positioning**: only near-viewport
  * gaps receive CSS anchor positioning (via NodeGap's `positioned`
- * prop). Off-viewport gaps remain as zero-size static elements with
+ * prop). Off-viewport gaps remain as zero-size absolute elements with
  * no layout cost. Gap markers (NodeGapMarkers) are only computed for
  * visible indices.
  *

package/src/lib/transforms.svelte.js

@@ -1,6 +1,19 @@
 import { split_annotated_text, join_annotated_text, get_char_length } from './utils.js';
 import { get_default_node_type } from './doc_utils.js';
 
+/**
+ * Set multiple properties on a node via a transaction.
+ *
+ * @param {object} tr - The transaction
+ * @param {Array} path - Path to the node
+ * @param {Record<string, any>} properties - Key/value pairs to set
+ */
+export function set_properties(tr, path, properties) {
+	for (const [key, value] of Object.entries(properties)) {
+		tr.set([...path, key], value);
+	}
+}
+
 export function break_text_node(tr) {
 	// Keep a reference of the original selection (before any transforms are applied)
 	const selection = tr.selection;