svedit 0.11.1 → 0.12.0

package/dist/utils.js

@@ -1,5 +1,5 @@
 /**
- * @import { Annotation, AnnotatedText, SelectionRange, Selection } from './types.d.ts';
+ * @import { Attachment, Mark, Annotation, AnnotatedText, SelectionRange, Selection } from './types.d.ts';
  */
 
 const SEGMENTER = new Intl.Segmenter('en', { granularity: 'grapheme' });
@@ -176,110 +176,109 @@ export function char_to_utf16_offset(str, char_offset) {
 /**
  * Splits an annotated text at the specified character position.
  *
- * Annotations that span the split point will be divided appropriately,
- * with offsets adjusted for each resulting part.
+ * Marks and annotations that span the split point will be divided
+ * appropriately, with offsets adjusted for each resulting part.
  *
- * @param {AnnotatedText} text_with_annotations - Annotated text object
+ * @param {AnnotatedText} text_value - Annotated text object
  * @param {number} at_position - Character position where to split (0-based)
  * @returns {[AnnotatedText, AnnotatedText]} Tuple of [left_part, right_part]
  *
  * @example
- * split_annotated_text({text: "Hello world", annotations: [{start_offset: 6, end_offset: 11, node_id: "strong"}]}, 8)
+ * split_text({content: "Hello world", marks: [{start_offset: 6, end_offset: 11, node_id: "strong"}], annotations: []}, 8)
  * // Returns:
  * // [
- * //   {text: "Hello wo", annotations: [{start_offset: 6, end_offset: 8, node_id: "strong"}]},
- * //   {text: "rld", annotations: [{start_offset: 0, end_offset: 3, node_id: "strong"}]}
+ * //   {content: "Hello wo", marks: [{start_offset: 6, end_offset: 8, node_id: "strong"}], annotations: []},
+ * //   {content: "rld", marks: [{start_offset: 0, end_offset: 3, node_id: "strong"}], annotations: []}
  * // ]
  */
-export function split_annotated_text(text_with_annotations, at_position) {
-	const { text, annotations } = text_with_annotations;
+export function split_text(text_value, at_position) {
+	const { content } = text_value;
 
 	// Split the text using character-aware slicing
-	const left_text = char_slice(text, 0, at_position);
-	const right_text = char_slice(text, at_position);
-
-	/** @type {Array<Annotation>} */
-	const left_annotations = [];
-	/** @type {Array<Annotation>} */
-	const right_annotations = [];
-
-	// Process each annotation
-	for (const { start_offset, end_offset, node_id } of annotations) {
-		if (end_offset <= at_position) {
-			// Annotation is entirely in the left part
-			left_annotations.push({ start_offset, end_offset, node_id });
-		} else if (start_offset >= at_position) {
-			// Annotation is entirely in the right part - shift offsets
-			right_annotations.push({
-				start_offset: start_offset - at_position,
-				end_offset: end_offset - at_position,
-				node_id
-			});
-		} else {
-			// Annotation spans the split point - split it
-			left_annotations.push({ start_offset, end_offset: at_position, node_id });
-			right_annotations.push({ start_offset: 0, end_offset: end_offset - at_position, node_id });
+	const left = { content: char_slice(content, 0, at_position), marks: [], annotations: [] };
+	const right = { content: char_slice(content, at_position), marks: [], annotations: [] };
+
+	// Process marks and annotations with the same range logic
+	for (const key of ['marks', 'annotations']) {
+		for (const { start_offset, end_offset, node_id } of text_value[key] ?? []) {
+			if (end_offset <= at_position) {
+				// Range is entirely in the left part
+				left[key].push({ start_offset, end_offset, node_id });
+			} else if (start_offset >= at_position) {
+				// Range is entirely in the right part - shift offsets
+				right[key].push({
+					start_offset: start_offset - at_position,
+					end_offset: end_offset - at_position,
+					node_id
+				});
+			} else {
+				// Range spans the split point - split it
+				left[key].push({ start_offset, end_offset: at_position, node_id });
+				right[key].push({ start_offset: 0, end_offset: end_offset - at_position, node_id });
+			}
 		}
 	}
 
-	return [
-		{ text: left_text, annotations: left_annotations },
-		{ text: right_text, annotations: right_annotations }
-	];
+	return [left, right];
 }
 
 /**
  * Joins two annotated texts into a single annotated text.
  *
- * Annotations from the second text will have their offsets shifted by the length
- * of the first text. Adjacent annotations of the same type and data will be merged.
+ * Marks and annotations from the second text will have their offsets shifted
+ * by the length of the first text. Adjacent ranges referencing the same node
+ * will be merged.
  *
  * @param {AnnotatedText} first_text - First annotated text object
  * @param {AnnotatedText} second_text - Second annotated text object
  * @returns {AnnotatedText} Combined annotated text object
  *
  * @example
- * join_annotated_text({text: "Hello wo", annotations: [{start_offset: 6, end_offset: 8, node_id: "strong"}]}, {text: "rld", annotations: [{start_offset: 0, end_offset: 3, node_id: "strong"}]})
- * // Returns: {text: "Hello world", annotations: [{start_offset: 6, end_offset: 11, node_id: "strong"}]}
+ * join_text({content: "Hello wo", marks: [{start_offset: 6, end_offset: 8, node_id: "strong"}], annotations: []}, {content: "rld", marks: [{start_offset: 0, end_offset: 3, node_id: "strong"}], annotations: []})
+ * // Returns: {content: "Hello world", marks: [{start_offset: 6, end_offset: 11, node_id: "strong"}], annotations: []}
  */
-export function join_annotated_text(first_text, second_text) {
-	const { text: first_text_content, annotations: first_annotations } = first_text;
-	const { text: second_text_content, annotations: second_annotations } = second_text;
-
+export function join_text(first_text, second_text) {
 	// Join the text content
-	const joined_text = first_text_content + second_text_content;
-
-	// Start with all annotations from the first text (unchanged)
-	/** @type {Array<Annotation>} */
-	const joined_annotations = [...first_annotations];
-
-	// Add annotations from the second text, shifting their offsets
-	const offset = get_char_length(first_text_content);
-	for (const { start_offset, end_offset, node_id } of second_annotations) {
-		/** @type {Annotation} */
-		const shifted_annotation = {
-			start_offset: start_offset + offset,
-			end_offset: end_offset + offset,
-			node_id
-		};
+	const joined = {
+		content: first_text.content + second_text.content,
+		marks: [],
+		annotations: []
+	};
 
-		// Check if this annotation can be merged with the last annotation from first text
-		const last_annotation = joined_annotations[joined_annotations.length - 1];
-		if (
-			last_annotation &&
-			last_annotation.end_offset === shifted_annotation.start_offset && // annotations are adjacent
-			last_annotation.node_id === shifted_annotation.node_id
-		) {
-			// same node_id
-			// Merge by extending the end position of the last annotation
-			last_annotation.end_offset = shifted_annotation.end_offset;
-		} else {
-			// Add as separate annotation
-			joined_annotations.push(shifted_annotation);
+	const offset = get_char_length(first_text.content);
+
+	for (const key of ['marks', 'annotations']) {
+		// Start with all ranges from the first text (unchanged)
+		const joined_ranges = (first_text[key] ?? []).map((range) => ({ ...range }));
+
+		// Add ranges from the second text, shifting their offsets
+		for (const { start_offset, end_offset, node_id } of second_text[key] ?? []) {
+			const shifted_range = {
+				start_offset: start_offset + offset,
+				end_offset: end_offset + offset,
+				node_id
+			};
+
+			// Check if this range can be merged with the last range from the first text
+			const last_range = joined_ranges[joined_ranges.length - 1];
+			if (
+				last_range &&
+				last_range.end_offset === shifted_range.start_offset && // ranges are adjacent
+				last_range.node_id === shifted_range.node_id
+			) {
+				// same node_id
+				// Merge by extending the end position of the last range
+				last_range.end_offset = shifted_range.end_offset;
+			} else {
+				// Add as separate range
+				joined_ranges.push(shifted_range);
+			}
 		}
+
+		joined[key] = joined_ranges;
 	}
 
-	return { text: joined_text, annotations: joined_annotations };
+	return joined;
 }
 
 /**
@@ -405,6 +404,51 @@ export function paths_equal(a, b) {
 	return a.every((segment, index) => segment === b[index]);
 }
 
+/**
+ * Like traverse, but returns only node ids in depth-first order and never
+ * clones nodes. Use this when only the reachable id set is needed (e.g.
+ * reference bookkeeping) — traverse() deep-clones every visited node,
+ * which is wasteful for id-only consumers.
+ *
+ * @param {string} node_id - The ID of the node to start traversing from
+ * @param {object} schema - The document schema
+ * @param {Record<string, any>} nodes - All document nodes
+ * @returns {string[]} Node ids in depth-first order (entry point last)
+ */
+export function traverse_ids(node_id, schema, nodes) {
+	const ids = [];
+	const visited = {};
+	const visit = (node) => {
+		if (!node || visited[node.id]) {
+			return;
+		}
+		visited[node.id] = true;
+		for (const [property_name, value] of Object.entries(node)) {
+			const property_definition = schema[node.type].properties[property_name];
+
+			if (property_definition?.type === 'node_array') {
+				for (const v of value?.nodes || []) {
+					if (typeof v === 'string') {
+						visit(nodes[v]);
+					}
+				}
+				for (const range of [...(value?.marks || []), ...(value?.annotations || [])]) {
+					visit(nodes[range.node_id]);
+				}
+			} else if (property_definition?.type === 'node') {
+				visit(nodes[value]);
+			} else if (property_definition?.type === 'text') {
+				for (const range of [...(value.marks || []), ...(value.annotations || [])]) {
+					visit(nodes[range.node_id]);
+				}
+			}
+		}
+		ids.push(node.id);
+	};
+	visit(nodes[node_id]);
+	return ids;
+}
+
 export function traverse(node_id, schema, nodes) {
 	const json = [];
 	const visited = {};
@@ -417,16 +461,22 @@ export function traverse(node_id, schema, nodes) {
 			const property_definition = schema[node.type].properties[property_name];
 
 			if (property_definition?.type === 'node_array') {
-				for (const v of value) {
+				const node_ids = value?.nodes || [];
+
+				for (const v of node_ids) {
 					if (typeof v === 'string') {
 						visit(nodes[v]);
 					}
 				}
+
+				for (const range of [...(value?.marks || []), ...(value?.annotations || [])]) {
+					visit(nodes[range.node_id]);
+				}
 			} else if (property_definition?.type === 'node') {
 				visit(nodes[value]);
-			} else if (property_definition?.type === 'annotated_text') {
-				for (const annotation of value.annotations) {
-					visit(nodes[annotation.node_id]);
+			} else if (property_definition?.type === 'text') {
+				for (const range of [...(value.marks || []), ...(value.annotations || [])]) {
+					visit(nodes[range.node_id]);
 				}
 			}
 		}
@@ -463,3 +513,167 @@ export function is_selection_collapsed(selection) {
 		return false;
 	}
 }
+
+/**
+ * Adjust ranges (marks or annotations) after deleting a sequence range.
+ *
+ * Works for both annotated text (character offsets) and annotated node arrays
+ * (node offsets).
+ *
+ * @param {Array<import('./types.d.ts').Attachment>} ranges
+ * @param {number} start
+ * @param {number} end
+ * @returns {{ranges: Array<import('./types.d.ts').Attachment>, removed_node_ids: string[]}}
+ */
+export function adjust_ranges_for_deletion(ranges, start, end) {
+	const removed_node_ids = [];
+	const deletion_length = end - start;
+
+	const next_ranges = ranges
+		.map((range) => {
+			if (range.end_offset <= start) return range;
+
+			let start_offset = range.start_offset;
+			if (range.start_offset >= end) {
+				start_offset -= deletion_length;
+			} else if (range.start_offset > start) {
+				start_offset = start;
+			}
+
+			let end_offset = range.end_offset;
+			if (range.end_offset >= end) {
+				end_offset -= deletion_length;
+			} else if (range.end_offset > start) {
+				end_offset = start;
+			}
+
+			if (start_offset >= end_offset) {
+				removed_node_ids.push(range.node_id);
+				return null;
+			}
+
+			return { start_offset, end_offset, node_id: range.node_id };
+		})
+		.filter(Boolean);
+
+	return { ranges: next_ranges, removed_node_ids };
+}
+
+/**
+ * Adjust ranges (marks or annotations) after inserting into a sequence.
+ *
+ * Insertion inside a range extends it. Insertion exactly at either edge
+ * stays outside the range.
+ *
+ * @param {Array<import('./types.d.ts').Attachment>} ranges
+ * @param {number} offset
+ * @param {number} length
+ * @returns {Array<import('./types.d.ts').Attachment>}
+ */
+export function adjust_ranges_for_insertion(ranges, offset, length) {
+	if (length === 0) return ranges;
+
+	return ranges.map((range) => {
+		if (range.end_offset <= offset) return range;
+
+		if (range.start_offset < offset) {
+			return {
+				start_offset: range.start_offset,
+				end_offset: range.end_offset + length,
+				node_id: range.node_id
+			};
+		}
+
+		return {
+			start_offset: range.start_offset + length,
+			end_offset: range.end_offset + length,
+			node_id: range.node_id
+		};
+	});
+}
+
+/**
+ * Check whether ranges are non-empty and mutually exclusive.
+ *
+ * @param {Array<import('./types.d.ts').Attachment>} ranges
+ * @param {number} [length]
+ * @returns {boolean}
+ */
+export function are_ranges_exclusive(ranges, length = Infinity) {
+	const sorted = [...ranges].sort(
+		(a, b) => a.start_offset - b.start_offset || a.end_offset - b.end_offset
+	);
+
+	return sorted.every(
+		(range, index) =>
+			Number.isInteger(range.start_offset) &&
+			Number.isInteger(range.end_offset) &&
+			range.start_offset >= 0 &&
+			range.start_offset < range.end_offset &&
+			range.end_offset <= length &&
+			(index === 0 || range.start_offset >= sorted[index - 1].end_offset)
+	);
+}
+
+/**
+ * Calculates abstract fragment ranges from a length and marks.
+ *
+ * @param {number} length - Length of the sequence (e.g. text length or array length)
+ * @param {Array<import('./types.d.ts').Mark>} marks - Array of marks
+ * @param {import('./types.d.ts').SelectionRange} [selection_highlight_range] - Optional selection highlight range
+ * @returns {Array<{type: 'content' | 'mark' | 'selection_highlight', start_offset: number, end_offset: number, mark_index?: number, node_id?: string}>}
+ */
+export function calculate_fragment_ranges(length, marks, selection_highlight_range) {
+	/** @type {Array<{type: 'content' | 'mark' | 'selection_highlight', start_offset: number, end_offset: number, mark_index?: number, node_id?: string}>} */
+	const fragments = [];
+	let last_index = 0;
+
+	// Merge marks with selection highlight and sort by start offset
+	const ranges = [...marks, ...(selection_highlight_range ? [selection_highlight_range] : [])].sort(
+		(a, b) => a.start_offset - b.start_offset
+	);
+
+	for (const range of ranges) {
+		// Add content before this range
+		if (range.start_offset > last_index) {
+			fragments.push({
+				type: 'content',
+				start_offset: last_index,
+				end_offset: range.start_offset
+			});
+		}
+
+		if ('node_id' in range) {
+			const mark = /** @type {import('./types.d.ts').Mark} */ (range);
+			const mark_index =
+				/** @type {import('./types.d.ts').Mark & { mark_index?: number }} */ (mark).mark_index ??
+				marks.indexOf(mark);
+			fragments.push({
+				type: 'mark',
+				start_offset: mark.start_offset,
+				end_offset: mark.end_offset,
+				node_id: mark.node_id,
+				mark_index
+			});
+		} else {
+			fragments.push({
+				type: 'selection_highlight',
+				start_offset: range.start_offset,
+				end_offset: range.end_offset
+			});
+		}
+
+		last_index = range.end_offset;
+	}
+
+	// Add any remaining content
+	if (last_index < length) {
+		fragments.push({
+			type: 'content',
+			start_offset: last_index,
+			end_offset: length
+		});
+	}
+
+	return fragments;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svedit",
-	"version": "0.11.1",
+	"version": "0.12.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
@@ -64,5 +64,8 @@
 		"vite": "^8.0.0",
 		"vitest": "^4.1.0",
 		"vitest-browser-svelte": "^2.1.0"
+	},
+	"allowScripts": {
+		"fsevents@2.3.3": true
 	}
 }

package/src/lib/Command.svelte.js

@@ -1,5 +1,5 @@
 import { insert_default_node, break_text_node } from './transforms.svelte.js';
-import { can_switch_annotation_type } from './doc_utils.js';
+import { can_switch_mark_type, get_selected_range_types } from './doc_utils.js';
 import { is_selection_collapsed, get_char_length, char_slice } from './utils.js';
 
 /**
@@ -107,10 +107,13 @@ export class SelectParentCommand extends Command {
 }
 
 /**
- * Generic command that toggles an annotation on the current text selection.
- * Used for simple annotations like bold, italic, highlight, etc.
+ * Generic command that toggles a mark on the current text or node selection.
+ *
+ * Marks are mutually exclusive, so all touched marks compete: same-type marks
+ * are removed, a single touched property-less mark may switch type, and mixed
+ * touched types disable the command. Annotations never affect mark toggling.
  */
-export class ToggleAnnotationCommand extends Command {
+export class ToggleMarkCommand extends Command {
 	constructor(node_type, context) {
 		super(context);
 		this.node_type = node_type;
@@ -119,34 +122,89 @@ export class ToggleAnnotationCommand extends Command {
 	active = $derived(this.is_active());
 
 	is_active() {
-		return this.context.session.active_annotation(this.node_type);
+		const selected_marks = this.context.session.selected_marks;
+		return (
+			selected_marks.length > 0 &&
+			selected_marks.every(({ node }) => node?.type === this.node_type)
+		);
 	}
 
 	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 =
-			!active_annotation && !is_selection_collapsed(session.selection);
+		const selection = session.selection;
+		const is_valid_selection =
+			selection?.type === 'text' ||
+			(selection?.type === 'node' && !is_selection_collapsed(selection));
+		const mark_type_is_allowed = session.available_mark_types.includes(this.node_type);
+		const selected_marks = session.selected_marks;
+		const selected_mark_types = get_selected_range_types(selected_marks);
+
+		if (!editable || !is_valid_selection || !mark_type_is_allowed) return false;
+		if (selected_mark_types.size > 1) return false;
+
+		if (selected_marks.length === 0) {
+			return Boolean(selection && !is_selection_collapsed(selection));
+		}
 
-		return (
-			editable &&
-			session.selection?.type === 'text' &&
-			(has_annotation || can_switch_annotation || no_annotation_and_caret_not_collapsed)
+		const first_selected_mark = selected_marks[0];
+		const selected_mark_type = first_selected_mark.node.type;
+		if (selected_mark_type === this.node_type) return true;
+		if (selected_marks.length !== 1) return false;
+
+		return can_switch_mark_type(session.schema, selected_mark_type, this.node_type);
+	}
+
+	execute() {
+		this.context.session.apply(this.context.session.tr.toggle_mark(this.node_type));
+	}
+}
+
+/**
+ * Generic command that toggles an annotation on the current text or node selection.
+ *
+ * Annotations only compete with touched annotations of the same type: touched
+ * same-type annotations are removed, otherwise a new annotation is created.
+ * Marks and other annotation types never block the toggle.
+ */
+export class ToggleAnnotationCommand extends Command {
+	constructor(node_type, context) {
+		super(context);
+		this.node_type = node_type;
+	}
+
+	active = $derived(this.is_active());
+
+	// Mirrors the filter in tr.toggle_annotation, so active/enabled match what
+	// execute() does.
+	relevant_annotations() {
+		return this.context.session.selected_annotations.filter(
+			({ node }) => node?.type === this.node_type
 		);
 	}
 
+	is_active() {
+		return this.relevant_annotations().length > 0;
+	}
+
+	is_enabled() {
+		const { session, editable } = this.context;
+		const selection = session.selection;
+		const is_valid_selection =
+			selection?.type === 'text' ||
+			(selection?.type === 'node' && !is_selection_collapsed(selection));
+		const annotation_type_is_allowed = session.available_annotation_types.includes(this.node_type);
+
+		if (!editable || !is_valid_selection || !annotation_type_is_allowed) return false;
+
+		// Removing touched same-type annotations also works from a collapsed
+		// caret inside the annotation; creating a new one requires an expanded
+		// selection.
+		if (this.relevant_annotations().length > 0) return true;
+		return Boolean(selection && !is_selection_collapsed(selection));
+	}
+
 	execute() {
-		this.context.session.apply(this.context.session.tr.annotate_text(this.node_type));
+		this.context.session.apply(this.context.session.tr.toggle_annotation(this.node_type));
 	}
 }
 
@@ -179,7 +237,7 @@ export class AddNewLineCommand extends Command {
 
 		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 text_before_caret = char_slice(content.content, 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 ]*/);
@@ -235,7 +293,7 @@ export class SelectAllCommand extends Command {
 
 		if (selection.type === 'text') {
 			const text_content = session.get(selection.path);
-			const text_length = get_char_length(text_content.text);
+			const text_length = get_char_length(text_content.content);
 
 			// Check if all text is already selected
 			const is_all_text_selected =
@@ -278,7 +336,7 @@ export class SelectAllCommand extends Command {
 			// Check if the entire node_array is already selected
 			const is_entire_node_array_selected =
 				Math.min(selection.anchor_offset, selection.focus_offset) === 0 &&
-				Math.max(selection.anchor_offset, selection.focus_offset) === node_array.length;
+				Math.max(selection.anchor_offset, selection.focus_offset) === node_array.nodes.length;
 
 			if (!is_entire_node_array_selected) {
 				// Select the entire node_array
@@ -286,7 +344,7 @@ export class SelectAllCommand extends Command {
 					type: 'node',
 					path: node_array_path,
 					anchor_offset: 0,
-					focus_offset: node_array.length
+					focus_offset: node_array.nodes.length
 				};
 			} else {
 				// Entire node_array is selected, try to move up to parent node_array

package/src/lib/Node.svelte

@@ -16,17 +16,45 @@
 	let child_index = $derived(node_array_meta ? parseInt(String(path.at(-1)), 10) : -1);
 	let is_first = $derived(node_array_meta && child_index === 0);
 	let is_last = $derived(node_array_meta && child_index === node_array_meta.length - 1);
+
+	// Marks and annotations covering this node become classes automatically:
+	// `mark-<type>`/`anno-<type>`, plus `-start`/`-end` variants on the run's
+	// first/last covered node. This allows styling ranges (including
+	// annotations, which never render wrapper components) with pure CSS. For
+	// richer rendering, node components still receive the `mark` and
+	// `annotations` props.
+	let range_classes = $derived.by(() => {
+		if (child_index < 0 || !node_array_meta?.annotations_for) return '';
+		const classes = [];
+
+		const add_classes = (range, prefix) => {
+			const range_type = range?.node?.type;
+			if (!range_type) return;
+			classes.push(`${prefix}-${range_type}`);
+			if (range.is_start) classes.push(`${prefix}-${range_type}-start`);
+			if (range.is_end) classes.push(`${prefix}-${range_type}-end`);
+		};
+
+		add_classes(node_array_meta.mark_for?.(child_index), 'mark');
+		for (const annotation of node_array_meta.annotations_for(child_index)) {
+			add_classes(annotation, 'anno');
+		}
+		return classes.join(' ');
+	});
 </script>
 
 <svelte:element
 	this={tag}
 	id={node.id}
-	class="node-{node.type} {css_class}{is_first ? ' first' : ''}{is_last ? ' last' : ''}"
+	class="node-{node.type} {css_class}{range_classes
+		? ` ${range_classes}`
+		: ''}{is_first ? ' first' : ''}{is_last ? ' last' : ''}"
 	data-node-id={node.id}
 	data-path={path_str}
 	data-type="node"
 	style="anchor-name: --{path_str};{style}"
 	{...rest}
+	{@attach svedit.visibility_registry.track_node(path_str)}
 >
 	{@render children()}
 </svelte:element>