svedit 0.3.0 → 0.4.0

package/dist/util.js

@@ -1,5 +1,5 @@
 /**
- * @import { Annotation } from './types.d.ts';
+ * @import { Annotation, AnnotatedText } from './types.d.ts';
  */
 
 /**
@@ -120,25 +120,25 @@ export function char_to_utf16_offset(str, char_offset) {
 }
 
 /**
- * Splits an annotated string at the specified character position.
+ * 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.
  *
- * @param {[string, Array<Annotation>]} text_with_annotations - Tuple of [text, annotations] where annotations follow the Annotation type: [start, end, type, data?]
+ * @param {AnnotatedText} text_with_annotations - Annotated text object
  * @param {number} at_position - Character position where to split (0-based)
- * @returns {[[string, Array<Annotation>], [string, Array<Annotation>]]} Tuple of [left_part, right_part] where each part is [text, annotations]
+ * @returns {[AnnotatedText, AnnotatedText]} Tuple of [left_part, right_part]
  *
  * @example
- * split_annotated_string(["Hello world", [[6,11, "strong"]]], 8)
+ * split_annotated_text({text: "Hello world", annotations: [{start_offset: 6, end_offset: 11, node_id: "strong"}]}, 8)
  * // Returns:
  * // [
- * //   ["Hello wo", [[6,8, "strong"]]]
- * //   ["rld", [[0,3, "strong"]]]
+ * //   {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"}]}
  * // ]
  */
-export function split_annotated_string(text_with_annotations, at_position) {
-  const [text, annotations] = text_with_annotations;
+export function split_annotated_text(text_with_annotations, at_position) {
+  const {text, annotations} = text_with_annotations;
 
   // Split the text using character-aware slicing
   const left_text = char_slice(text, 0, at_position);
@@ -150,44 +150,44 @@ export function split_annotated_string(text_with_annotations, at_position) {
   const right_annotations = [];
 
   // Process each annotation
-  for (const [start, end, type, data] of annotations) {
-    if (end <= at_position) {
+  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, end, type, data]);
-    } else if (start >= at_position) {
+      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 - at_position, end - at_position, type, data]);
+      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, at_position, type, data]);
-      right_annotations.push([0, end - at_position, type, data]);
+      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});
     }
   }
 
   return [
-    [left_text, left_annotations],
-    [right_text, right_annotations]
+    {text: left_text, annotations: left_annotations},
+    {text: right_text, annotations: right_annotations}
   ];
 }
 
 
 /**
- * Joins two annotated strings into a single annotated string.
+ * 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.
  *
- * @param {[string, Array<Annotation>]} first_text - First annotated string tuple where annotations follow the Annotation type: [start, end, type, data?]
- * @param {[string, Array<Annotation>]} second_text - Second annotated string tuple where annotations follow the Annotation type: [start, end, type, data?]
- * @returns {[string, Array<Annotation>]} Combined annotated string tuple [text, annotations]
+ * @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_string(["Hello wo", [[6,8, "strong"]]], ["rld", [[0,3, "strong"]]])
- * // Returns: ["Hello world", [[6,11, "strong"]]]
+ * 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"}]}
  */
-export function join_annotated_string(first_text, second_text) {
-  const [first_text_content, first_annotations] = first_text;
-  const [second_text_content, second_annotations] = second_text;
+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;
 
   // Join the text content
   const joined_text = first_text_content + second_text_content;
@@ -198,25 +198,24 @@ export function join_annotated_string(first_text, second_text) {
 
   // Add annotations from the second text, shifting their offsets
   const offset = get_char_length(first_text_content);
-  for (const [start, end, type, data] of second_annotations) {
+  for (const {start_offset, end_offset, node_id} of second_annotations) {
     /** @type {Annotation} */
-    const shifted_annotation = [start + offset, end + offset, type, data];
+    const shifted_annotation = {start_offset: start_offset + offset, end_offset: end_offset + offset, node_id};
 
     // 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[1] === shifted_annotation[0] && // annotations are adjacent
-        last_annotation[2] === shifted_annotation[2] && // same type
-        JSON.stringify(last_annotation[3]) === JSON.stringify(shifted_annotation[3])) { // same data
+        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[1] = shifted_annotation[1];
+      last_annotation.end_offset = shifted_annotation.end_offset;
     } else {
       // Add as separate annotation
       joined_annotations.push(shifted_annotation);
     }
   }
 
-  return [joined_text, joined_annotations];
+  return {text: joined_text, annotations: joined_annotations};
 }
 
 /**

package/package.json

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

package/src/lib/{AnnotatedStringProperty.svelte → AnnotatedTextProperty.svelte}

@@ -1,12 +1,12 @@
 <script>
 	import { getContext } from 'svelte';
-	import { char_slice, get_char_length } from './util.js';
+	import { char_slice, get_char_length, snake_to_pascal } from './util.js';
 
-  /** @import { AnnotatedStringPropertyProps, Annotation, AnnotationFragment } from './types.d.ts'; */
+  /** @import { AnnotatedTextPropertyProps, Annotation, AnnotationFragment } from './types.d.ts'; */
 
 	const svedit = getContext('svedit');
 
- /** @type {AnnotatedStringPropertyProps} */
+ /** @type {AnnotatedTextPropertyProps} */
 	let {
 		path,
 		class: css_class,
@@ -20,32 +20,36 @@
 	/**
 	 * Converts text with annotations into renderable fragments for display.
 	 * @param {string} text - The plain text content
-	 * @param {Array<Annotation>} annotations - Array of annotations where each is [start_offset, end_offset, type, options?] (minimum 3 elements)
+	 * @param {Array<Annotation>} annotations - Array of annotations where each is {start_offset, end_offset, node_id}
 	 * @returns {Array<string|AnnotationFragment>} Array of fragments - strings for plain text, AnnotationFragment objects for annotated content
 	 */
-	function render_annotated_string(text, annotations) {
+	function get_fragments(text, annotations) {
 		let fragments = [];
 		let last_index = 0;
 
 		// Sort annotations by start_offset
-		const sorted_annotations = [...annotations].sort((a, b) => a[0] - b[0]);
+		const sorted_annotations = [...annotations].sort((a, b) => a.start_offset - b.start_offset);
 
-		for (let [index, annotation] of sorted_annotations.entries()) {
+		for (let [, annotation] of sorted_annotations.entries()) {
 			// Add text before the annotation using character-aware slicing
-			if (annotation[0] > last_index) {
-				fragments.push(char_slice(text, last_index, annotation[0]));
+			if (annotation.start_offset > last_index) {
+				fragments.push(char_slice(text, last_index, annotation.start_offset));
 			}
 
 			// Add the annotated string using character-aware slicing
-			const annotated_content = char_slice(text, annotation[0], annotation[1]);
+			const annotated_content = char_slice(text, annotation.start_offset, annotation.end_offset);
+			const node = svedit.doc.get(annotation.node_id);
+			if (!node) throw new Error(`Node not found for annotation ${annotation.node_id}`);
+
 			fragments.push({
-				type: annotation[2],
+			  node,
 				content: annotated_content,
-				annotation_index: index,
-				data: annotation[3]
+				// NOTE: We need to provide the original index here, because the source data
+				// is the address space.
+				annotation_index: annotations.indexOf(annotation),
 			});
 
-			last_index = annotation[1];
+			last_index = annotation.end_offset;
 		}
 
 		// Add any remaining text after the last annotation using character-aware slicing
@@ -56,15 +60,9 @@
 		return fragments;
 	}
 
-	let fragments = $derived(render_annotated_string(svedit.doc.get(path)[0], svedit.doc.get(path)[1]));
-	let plain_text = $derived(svedit.doc.get(path)[0]);
+	let fragments = $derived(get_fragments(svedit.doc.get(path).text, svedit.doc.get(path).annotations));
+	let plain_text = $derived(svedit.doc.get(path).text);
 
-	/**
-	 * @param {MouseEvent} e - The click event
-	 */
-	function handle_link_click(e) {
-		e.preventDefault();
-	}
 </script>
 
 {#key plain_text}
@@ -79,21 +77,10 @@
     placeholder={placeholder}
   >
     {#each fragments as fragment, index (index)}
-  		{#if typeof fragment === 'string'}<!--
-        -->{fragment}<!--
-      -->{:else if fragment.type === 'emphasis'}<!--
-        --><em>{fragment.content}</em><!--
-      -->{:else if fragment.type === 'strong'}<!--
-        --><strong>{fragment.content}</strong><!--
-      -->{:else if fragment.type === 'link'}<!--
-        --><a
-  				onclick={handle_link_click}
-  				style="anchor-name: --{path.join('-') + '-' + fragment.annotation_index};"
-  				href={fragment.data.href}
-  				target={fragment.data.target || '_self'}>{fragment.content}</a><!--
-      -->{:else}<!--
-        -->{fragment.content}<!--
-      -->{/if}
+  		{#if typeof fragment === 'string'}{fragment}{:else}
+        {@const AnnotationComponent = svedit.doc.config.node_components[snake_to_pascal(fragment.node.type)]}
+        <AnnotationComponent path={[...path, 'annotations', fragment.annotation_index, 'node_id']} content={fragment.content} />
+      {/if}
   	{/each}<!--
     --><br>
   </div>
@@ -118,12 +105,13 @@
 
   /* We can safely hide the <br> element when the placeholder is empty and focused. */
   /* No longer the cursor will be rendered after the placeholder when focused. */
+  /* ATTENTION: This hack has the side effect that in Safari Desktop the cursor sometimes disappears. */
   [placeholder].empty.focused br {
     display:none;
   }
 
-  .text.focused {
+  /*.text.focused {
     background: none;
-    outline: 1px dashed var(--editing-stroke-color);
-  }
+    outline: 1px solid var(--editing-stroke-color);
+  }*/
 </style>