svedit 0.2.0 → 0.3.0

package/dist/Svedit.svelte.d.ts

@@ -7,6 +7,6 @@ type Svedit = {
 };
 declare const Svedit: import("svelte").Component<SveditProps, {
     focus_canvas: () => void;
-}, "">;
+}, "editable">;
 import type { SveditProps } from './types.d.ts';
 //# sourceMappingURL=Svedit.svelte.d.ts.map

package/dist/Svedit.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Svedit.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Svedit.svelte.js"],"names":[],"mappings":";;;;;;;AA66BA;;OAAqD;iCAj6BgE,cAAc"}
+{"version":3,"file":"Svedit.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Svedit.svelte.js"],"names":[],"mappings":";;;;;;;AAg3CA;;eAAqD;iCAp2CgE,cAAc"}

package/dist/Transaction.svelte.d.ts

@@ -1,6 +1,3 @@
-/**
- * @import { NodeId, SerializedNode, Selection, DocumentPath } from './types.js'
- */
 /**
  * Transaction class for managing atomic document operations with undo/redo support.
  *

package/dist/Transaction.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Transaction.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Transaction.svelte.js"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;;;;;;;;;;;GAcG;AACH;IACE;;;;OAIG;IACH,iBAFW,GAAG,EAWb;IARC,SAAc;IAEd,oCAAoC;IACpC,KADW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CACnB;IACb,oCAAoC;IACpC,aADW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CACX;IAErB,sBAA0C;IAG5C;;;;;OAKG;IACH,UAHW,YAAY,GACV,GAAG,CAIf;IAED;;;;OAIG;IACH,iBAFa,SAAS,CAIrB;IAED;;;;;;;;;;;;;;OAcG;IACH,UATW,YAAY,SACZ,GAAG,QA2Bb;IAED;;;;;;;;;;;;;;;;;;OAkBG;IACH,aAbW,GAAG,GACD,WAAW,CAyBvB;IAED;;;;;;;;;;;;OAYG;IACH,WARW,GAAG,GACD,WAAW,CAcvB;IAED;;;;;;OAMG;IACH,yBAJW,SAAS,GACP,WAAW,CAOvB;IAED;;;;;;;;;;;;;;;;;;;OAmBG;IACH,+BAbW,GAAG,mBACH,GAAG,GACD,WAAW,CAqFvB;IAED;;;;;;;;;OASG;IACH,oBAFa,WAAW,CA8FvB;IAED;;;;;;;;;;;;;;;;;;OAkBG;IACH,oBAbW,cAAc,EAAE,GACd,WAAW,CAqDvB;IAED;;;;;;;;;;;;;;;OAeG;IACH,2BAVW,MAAM,GACJ,WAAW,CAsEvB;IAED;;;;;;;;OAQG;IACH,2CA+BC;IAED;;;;;;;;;;OAUG;IACH,4CAqBC;CACF;kCA/jBmE,YAAY;+BAAZ,YAAY;oCAAZ,YAAY"}
+{"version":3,"file":"Transaction.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Transaction.svelte.js"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;GAcG;AACH;IACE;;;;OAIG;IACH,iBAFW,GAAG,EAWb;IARC,SAAc;IAEd,oCAAoC;IACpC,KADW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CACnB;IACb,oCAAoC;IACpC,aADW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CACX;IAErB,sBAA0C;IAG5C;;;;;OAKG;IACH,UAHW,YAAY,GACV,GAAG,CAIf;IAED;;;;OAIG;IACH,iBAFa,SAAS,CAIrB;IAED;;;;;;;;;;;;;;OAcG;IACH,UATW,YAAY,SACZ,GAAG,QA2Bb;IAED;;;;;;;;;;;;;;;;;;OAkBG;IACH,aAbW,GAAG,GACD,WAAW,CAyBvB;IAED;;;;;;;;;;;;OAYG;IACH,WARW,GAAG,GACD,WAAW,CAcvB;IAED;;;;;;OAMG;IACH,yBAJW,SAAS,GACP,WAAW,CAOvB;IAED;;;;;;;;;;;;;;;;;;;OAmBG;IACH,+BAbW,GAAG,mBACH,GAAG,GACD,WAAW,CAqFvB;IAED;;;;;;;;;OASG;IACH,oBAFa,WAAW,CA+FvB;IAED;;;;;;;;;;;;;;;;;;OAkBG;IACH,oBAbW,cAAc,EAAE,GACd,WAAW,CAqDvB;IAED;;;;;;;;;;;;;;;OAeG;IACH,2BAVW,MAAM,GACJ,WAAW,CA6EvB;IAED;;;;;;;;OAQG;IACH,2CA+BC;IAED;;;;;;;;;;OAUG;IACH,4CAqBC;CACF;kCAzkBmE,YAAY;+BAAZ,YAAY;oCAAZ,YAAY"}

package/dist/Transaction.svelte.js

@@ -2,6 +2,8 @@
  * @import { NodeId, SerializedNode, Selection, DocumentPath } from './types.js'
  */
 
+import { get_char_length, char_slice } from './util.js';
+
 /**
  * Transaction class for managing atomic document operations with undo/redo support.
  *
@@ -306,8 +308,9 @@ export default class Transaction {
       const path = this.doc.selection.path;
       let text = structuredClone($state.snapshot(this.doc.get(path)));
 
-      // Update the text content
-      text[0] = text[0].slice(0, start) + text[0].slice(end);
+      // Update the text content using character-based operations
+      const original_text = text[0];
+      text[0] = char_slice(original_text, 0, start) + char_slice(original_text, end, get_char_length(original_text));
 
       // Update annotation offsets for deletion
       const deletion_length = end - start;
@@ -442,12 +445,13 @@ export default class Transaction {
     const annotated_string = structuredClone($state.snapshot(this.doc.get(this.doc.selection.path)));
     const { start, end } = this.doc.get_selection_range();
 
-    // Transform the plain text string.
-    annotated_string[0] = annotated_string[0].slice(0, start) + replaced_text + annotated_string[0].slice(end);
+    // Transform the plain text string using character-based operations
+    const text = annotated_string[0];
+    annotated_string[0] = char_slice(text, 0, start) + replaced_text + char_slice(text, end, get_char_length(text));
 
     // Transform the annotations (annotated_string[1])
     // NOTE: Annotations are stored as [start_offset, end_offset, type]
-    const delta = replaced_text.length - (end - start);
+    const delta = get_char_length(replaced_text) - (end - start);
     const new_annotations = annotated_string[1].map(/** @param {any} annotation */ (annotation) => {
       const [annotation_start, annotation_end, type, annotation_data] = annotation;
 
@@ -469,16 +473,22 @@ export default class Transaction {
       // Case 4: annotation is partly selected towards right
       // NOTE: replaced_text will not be part of the annotation, we treat it the same as
       // a cursor right after the annotation
-      if (start > annotation_start && start < annotation_end && end === annotation_end) {
+      if (start > annotation_start && start < annotation_end && end >= annotation_end) {
         return [annotation_start, start, type, annotation_data];
       }
 
       // Case 5: text inserted inside an annotation
-      // NOTE: This also covers the case when a annotation is partly selected towards left
       if (start >= annotation_start && start <= annotation_end && end < annotation_end && end >= annotation_start) {
         return [annotation_start, annotation_end + delta, type, annotation_data];
       }
 
+      // Case 6: annotation is partly selected towards left
+      // NOTE: replaced_text will not be part of the annotation, we treat it the same as
+      // a cursor right before the annotation
+      if (start < annotation_start && end > annotation_start && end < annotation_end) {
+        return [start + get_char_length(replaced_text), annotation_end + delta, type, annotation_data];
+      }
+
       // Unhandled edge case:
       console.error('annotation could not be transformed: ', annotation);
       throw new Error('Case for transforming annotation not covered');
@@ -492,8 +502,8 @@ export default class Transaction {
     const new_selection = {
       type: 'text',
       path: this.doc.selection.path,
-      anchor_offset: start + replaced_text.length,
-      focus_offset: start + replaced_text.length,
+      anchor_offset: start + get_char_length(replaced_text),
+      focus_offset: start + get_char_length(replaced_text),
     };
     this.doc.selection = new_selection;
     return this;

package/dist/commands.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"commands.svelte.d.ts","sourceRoot":"","sources":["../src/lib/commands.svelte.js"],"names":[],"mappings":"AAGA,kDAoDC;AAED,iDA6DC;AAED,sDA6BC;AAED,6CA6GC"}
+{"version":3,"file":"commands.svelte.d.ts","sourceRoot":"","sources":["../src/lib/commands.svelte.js"],"names":[],"mappings":"AAGA,kDAqDC;AAED,iDA8DC;AAED,sDA6BC;AAED,6CA6GC"}

package/dist/commands.svelte.js

@@ -1,4 +1,4 @@
-import { split_annotated_string, join_annotated_string } from './util.js';
+import { split_annotated_string, join_annotated_string, get_char_length } from './util.js';
 import { get_default_node_type } from './Document.svelte.js';
 
 export function break_text_node(tr) {
@@ -53,6 +53,7 @@ export function break_text_node(tr) {
   tr.set_selection(node_insert_position);
 
   doc.config.inserters[target_node_type](tr, right_text);
+  return true;
 }
 
 export function join_text_node(tr) {
@@ -112,10 +113,11 @@ export function join_text_node(tr) {
   tr.set_selection({
     type: 'text',
     path: [...previous_text_path, 'content'],
-    anchor_offset: predecessor_node.content[0].length,
-    focus_offset: predecessor_node.content[0].length,
+    anchor_offset: get_char_length(predecessor_node.content[0]),
+    focus_offset: get_char_length(predecessor_node.content[0]),
   });
   tr.set([predecessor_node.id, 'content'], joined_text);
+  return true;
 }
 
 export function insert_default_node(tr) {
@@ -159,7 +161,7 @@ export function select_all(tr) {
 
   if (selection.type === 'text') {
     const text_content = doc.get(selection.path);
-    const text_length = text_content[0].length;
+    const text_length = get_char_length(text_content[0]);
 
     // Check if all text is already selected
     const is_all_text_selected =

package/dist/util.d.ts

@@ -1,4 +1,126 @@
-export function split_annotated_string(text_with_annotations: any, at_position: any): any[][];
-export function join_annotated_string(first_text: any, second_text: any): any[];
-export function snake_to_pascal(str: any): any;
+/**
+ * @import { Annotation } from './types.d.ts';
+ */
+/**
+ * Get the actual character length (accounting for multi-byte characters)
+ *
+ * Uses Intl.Segmenter to count grapheme clusters rather than UTF-16 code units,
+ * ensuring emojis and other complex Unicode sequences are counted as single characters.
+ *
+ * @param {string} str - The string to measure
+ * @returns {number} The number of visual characters (grapheme clusters)
+ *
+ * @example
+ * get_char_length('Hello') // Returns: 5
+ * get_char_length('a😀b') // Returns: 3 (not 4)
+ * get_char_length('👋🏽') // Returns: 1 (not 4 - skin tone modifier treated as single char)
+ */
+export function get_char_length(str: string): number;
+/**
+ * Get a single character at the specified position (accounting for multi-byte characters)
+ *
+ * Uses Intl.Segmenter to access grapheme clusters rather than UTF-16 code units,
+ * ensuring emojis and other complex Unicode sequences are treated as single characters.
+ *
+ * @param {string} str - The string to access
+ * @param {number} index - Character position (0-based)
+ * @returns {string} The character at the specified position, or empty string if index is out of bounds
+ *
+ * @example
+ * get_char_at('Hello', 1) // Returns: 'e'
+ * get_char_at('a😀b', 1) // Returns: '😀' (full emoji)
+ * get_char_at('👋🏽', 0) // Returns: '👋🏽' (skin tone modifier included)
+ */
+export function get_char_at(str: string, index: number): string;
+/**
+ * Slice string by character positions (accounting for multi-byte characters)
+ *
+ * Uses Intl.Segmenter to slice by grapheme clusters rather than UTF-16 code units,
+ * ensuring emojis and other complex Unicode sequences remain intact.
+ *
+ * @param {string} str - The string to slice
+ * @param {number} start - Starting character position (inclusive)
+ * @param {number} [end] - Ending character position (exclusive). If undefined, slices to end
+ * @returns {string} The sliced string with complete characters
+ *
+ * @example
+ * char_slice('Hello 😀 World', 6, 8) // Returns: '😀 ' (emoji stays intact)
+ * char_slice('a👋🏽b', 1, 2) // Returns: '👋🏽' (skin tone modifier included)
+ */
+export function char_slice(str: string, start: number, end?: number): string;
+/**
+ * Convert UTF-16 code unit offset to grapheme cluster offset within a string
+ *
+ * Converts DOM selection offsets (which use UTF-16 code units) to character-based
+ * offsets (grapheme clusters) for consistent text manipulation.
+ *
+ * @param {string} str - The string to convert offsets within
+ * @param {number} utf16_offset - The UTF-16 code unit offset from DOM
+ * @returns {number} The corresponding grapheme cluster offset
+ *
+ * @example
+ * // For string "a😀b" where 😀 uses 2 UTF-16 code units
+ * utf16_to_char_offset("a😀b", 3) // Returns: 2 (position after emoji)
+ */
+export function utf16_to_char_offset(str: string, utf16_offset: number): number;
+/**
+ * Convert grapheme cluster offset to UTF-16 code unit offset within a string
+ *
+ * Converts character-based offsets (grapheme clusters) to DOM selection offsets
+ * (UTF-16 code units) for proper DOM selection positioning.
+ *
+ * @param {string} str - The string to convert offsets within
+ * @param {number} char_offset - The grapheme cluster offset
+ * @returns {number} The corresponding UTF-16 code unit offset for DOM operations
+ *
+ * @example
+ * // For string "a😀b" where 😀 uses 2 UTF-16 code units
+ * char_to_utf16_offset("a😀b", 2) // Returns: 3 (UTF-16 position after emoji)
+ */
+export function char_to_utf16_offset(str: string, char_offset: number): number;
+/**
+ * Splits an annotated string 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 {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]
+ *
+ * @example
+ * split_annotated_string(["Hello world", [[6,11, "strong"]]], 8)
+ * // Returns:
+ * // [
+ * //   ["Hello wo", [[6,8, "strong"]]]
+ * //   ["rld", [[0,3, "strong"]]]
+ * // ]
+ */
+export function split_annotated_string(text_with_annotations: [string, Array<Annotation>], at_position: number): [[string, Array<Annotation>], [string, Array<Annotation>]];
+/**
+ * Joins two annotated strings into a single annotated string.
+ *
+ * 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]
+ *
+ * @example
+ * join_annotated_string(["Hello wo", [[6,8, "strong"]]], ["rld", [[0,3, "strong"]]])
+ * // Returns: ["Hello world", [[6,11, "strong"]]]
+ */
+export function join_annotated_string(first_text: [string, Array<Annotation>], second_text: [string, Array<Annotation>]): [string, Array<Annotation>];
+/**
+ * Convert snake_case string to PascalCase
+ *
+ * @param {string} str - The snake_case string to convert
+ * @returns {string} The converted PascalCase string
+ *
+ * @example
+ * snake_to_pascal('list_item') // Returns: 'ListItem'
+ */
+export function snake_to_pascal(str: string): string;
+import type { Annotation } from './types.d.ts';
 //# sourceMappingURL=util.d.ts.map

package/dist/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/lib/util.js"],"names":[],"mappings":"AAMA,8FA6BC;AAKD,gFA8BC;AAED,+CAKC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/lib/util.js"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;;;;;;;;;;GAaG;AACH,qCARW,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;;;;;;;;GAcG;AACH,iCATW,MAAM,SACN,MAAM,GACJ,MAAM,CAWlB;AAED;;;;;;;;;;;;;;GAcG;AACH,gCATW,MAAM,SACN,MAAM,QACN,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,gBACN,MAAM,GACJ,MAAM,CAoBlB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,eACN,MAAM,GACJ,MAAM,CAgBlB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,8DAZW,CAAC,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,eAC3B,MAAM,GACJ,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAyCtE;AAGD;;;;;;;;;;;;;GAaG;AACH,kDARW,CAAC,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,eAC3B,CAAC,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,GACzB,CAAC,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAsCvC;AAED;;;;;;;;GAQG;AACH,qCANW,MAAM,GACJ,MAAM,CAUlB;gCA1O8B,cAAc"}

package/dist/util.js

@@ -1,17 +1,152 @@
-// split_annotated_string(["Hello world", [[6,11, "strong"]]], 8)
-// =>
-// [
-//   ["Hello wo", [[6,8, "strong"]]]
-//   ["rld", [[0,3, "strong"]]]
-// ]
+/**
+ * @import { Annotation } from './types.d.ts';
+ */
+
+/**
+ * Get the actual character length (accounting for multi-byte characters)
+ *
+ * Uses Intl.Segmenter to count grapheme clusters rather than UTF-16 code units,
+ * ensuring emojis and other complex Unicode sequences are counted as single characters.
+ *
+ * @param {string} str - The string to measure
+ * @returns {number} The number of visual characters (grapheme clusters)
+ *
+ * @example
+ * get_char_length('Hello') // Returns: 5
+ * get_char_length('a😀b') // Returns: 3 (not 4)
+ * get_char_length('👋🏽') // Returns: 1 (not 4 - skin tone modifier treated as single char)
+ */
+export function get_char_length(str) {
+  const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+  return [...segmenter.segment(str)].length;
+}
+
+/**
+ * Get a single character at the specified position (accounting for multi-byte characters)
+ *
+ * Uses Intl.Segmenter to access grapheme clusters rather than UTF-16 code units,
+ * ensuring emojis and other complex Unicode sequences are treated as single characters.
+ *
+ * @param {string} str - The string to access
+ * @param {number} index - Character position (0-based)
+ * @returns {string} The character at the specified position, or empty string if index is out of bounds
+ *
+ * @example
+ * get_char_at('Hello', 1) // Returns: 'e'
+ * get_char_at('a😀b', 1) // Returns: '😀' (full emoji)
+ * get_char_at('👋🏽', 0) // Returns: '👋🏽' (skin tone modifier included)
+ */
+export function get_char_at(str, index) {
+  const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+  const segments = [...segmenter.segment(str)];
+  return segments[index].segment;
+}
+
+/**
+ * Slice string by character positions (accounting for multi-byte characters)
+ *
+ * Uses Intl.Segmenter to slice by grapheme clusters rather than UTF-16 code units,
+ * ensuring emojis and other complex Unicode sequences remain intact.
+ *
+ * @param {string} str - The string to slice
+ * @param {number} start - Starting character position (inclusive)
+ * @param {number} [end] - Ending character position (exclusive). If undefined, slices to end
+ * @returns {string} The sliced string with complete characters
+ *
+ * @example
+ * char_slice('Hello 😀 World', 6, 8) // Returns: '😀 ' (emoji stays intact)
+ * char_slice('a👋🏽b', 1, 2) // Returns: '👋🏽' (skin tone modifier included)
+ */
+export function char_slice(str, start, end = undefined) {
+  const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+  const segments = [...segmenter.segment(str)];
+  return segments.slice(start, end).map(s => s.segment).join('');
+}
+
+/**
+ * Convert UTF-16 code unit offset to grapheme cluster offset within a string
+ *
+ * Converts DOM selection offsets (which use UTF-16 code units) to character-based
+ * offsets (grapheme clusters) for consistent text manipulation.
+ *
+ * @param {string} str - The string to convert offsets within
+ * @param {number} utf16_offset - The UTF-16 code unit offset from DOM
+ * @returns {number} The corresponding grapheme cluster offset
+ *
+ * @example
+ * // For string "a😀b" where 😀 uses 2 UTF-16 code units
+ * utf16_to_char_offset("a😀b", 3) // Returns: 2 (position after emoji)
+ */
+export function utf16_to_char_offset(str, utf16_offset) {
+  const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+  const segments = [...segmenter.segment(str)];
+  let char_offset = 0;
+  let utf16_count = 0;
+
+  for (const segment of segments) {
+    if (utf16_count >= utf16_offset) break;
+    utf16_count += segment.segment.length;
+    if (utf16_count > utf16_offset) break;
+    char_offset++;
+  }
+
+  return char_offset;
+}
+
+/**
+ * Convert grapheme cluster offset to UTF-16 code unit offset within a string
+ *
+ * Converts character-based offsets (grapheme clusters) to DOM selection offsets
+ * (UTF-16 code units) for proper DOM selection positioning.
+ *
+ * @param {string} str - The string to convert offsets within
+ * @param {number} char_offset - The grapheme cluster offset
+ * @returns {number} The corresponding UTF-16 code unit offset for DOM operations
+ *
+ * @example
+ * // For string "a😀b" where 😀 uses 2 UTF-16 code units
+ * char_to_utf16_offset("a😀b", 2) // Returns: 3 (UTF-16 position after emoji)
+ */
+export function char_to_utf16_offset(str, char_offset) {
+  const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+  const segments = [...segmenter.segment(str)];
+  let utf16_offset = 0;
+
+  for (let i = 0; i < Math.min(char_offset, segments.length); i++) {
+    utf16_offset += segments[i].segment.length;
+  }
+
+  return utf16_offset;
+}
+
+/**
+ * Splits an annotated string 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 {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]
+ *
+ * @example
+ * split_annotated_string(["Hello world", [[6,11, "strong"]]], 8)
+ * // Returns:
+ * // [
+ * //   ["Hello wo", [[6,8, "strong"]]]
+ * //   ["rld", [[0,3, "strong"]]]
+ * // ]
+ */
 export function split_annotated_string(text_with_annotations, at_position) {
   const [text, annotations] = text_with_annotations;
 
-  // Split the text
-  const left_text = text.slice(0, at_position);
-  const right_text = text.slice(at_position);
+  // 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
@@ -36,8 +171,20 @@ export function split_annotated_string(text_with_annotations, at_position) {
 }
 
 
-// join_annotated_string(["Hello wo", [[6,8, "strong"]]], ["rld", [[0,3, "strong"]]])
-// => ["Hello world", [[6,11, "strong"]]]
+/**
+ * Joins two annotated strings into a single annotated string.
+ *
+ * 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]
+ *
+ * @example
+ * join_annotated_string(["Hello wo", [[6,8, "strong"]]], ["rld", [[0,3, "strong"]]])
+ * // Returns: ["Hello world", [[6,11, "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;
@@ -46,11 +193,13 @@ export function join_annotated_string(first_text, second_text) {
   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 = first_text_content.length;
+  const offset = get_char_length(first_text_content);
   for (const [start, end, type, data] of second_annotations) {
+    /** @type {Annotation} */
     const shifted_annotation = [start + offset, end + offset, type, data];
 
     // Check if this annotation can be merged with the last annotation from first text
@@ -70,6 +219,15 @@ export function join_annotated_string(first_text, second_text) {
   return [joined_text, joined_annotations];
 }
 
+/**
+ * Convert snake_case string to PascalCase
+ *
+ * @param {string} str - The snake_case string to convert
+ * @returns {string} The converted PascalCase string
+ *
+ * @example
+ * snake_to_pascal('list_item') // Returns: 'ListItem'
+ */
 export function snake_to_pascal(str) {
   return str
     .split('_')

package/package.json

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

package/src/lib/AnnotatedStringProperty.svelte

@@ -1,7 +1,8 @@
 <script>
 	import { getContext } from 'svelte';
+	import { char_slice, get_char_length } from './util.js';
 
-  /** @import { AnnotatedStringPropertyProps, AnnotationFragment } from './types.d.ts'; */
+  /** @import { AnnotatedStringPropertyProps, Annotation, AnnotationFragment } from './types.d.ts'; */
 
 	const svedit = getContext('svedit');
 
@@ -19,7 +20,7 @@
 	/**
 	 * Converts text with annotations into renderable fragments for display.
 	 * @param {string} text - The plain text content
-	 * @param {Array<[number, number, string, ...any]>} 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, type, options?] (minimum 3 elements)
 	 * @returns {Array<string|AnnotationFragment>} Array of fragments - strings for plain text, AnnotationFragment objects for annotated content
 	 */
 	function render_annotated_string(text, annotations) {
@@ -27,16 +28,16 @@
 		let last_index = 0;
 
 		// Sort annotations by start_offset
-		const sorted_annotations = $state.snapshot(annotations).sort((a, b) => a[0] - b[0]);
+		const sorted_annotations = [...annotations].sort((a, b) => a[0] - b[0]);
 
 		for (let [index, annotation] of sorted_annotations.entries()) {
-			// Add text before the annotation
+			// Add text before the annotation using character-aware slicing
 			if (annotation[0] > last_index) {
-				fragments.push(text.slice(last_index, annotation[0]));
+				fragments.push(char_slice(text, last_index, annotation[0]));
 			}
 
-			// Add the annotated string
-			const annotated_content = text.slice(annotation[0], annotation[1]);
+			// Add the annotated string using character-aware slicing
+			const annotated_content = char_slice(text, annotation[0], annotation[1]);
 			fragments.push({
 				type: annotation[2],
 				content: annotated_content,
@@ -47,9 +48,9 @@
 			last_index = annotation[1];
 		}
 
-		// Add any remaining text after the last annotation
-		if (last_index < text.length) {
-			fragments.push(text.slice(last_index));
+		// Add any remaining text after the last annotation using character-aware slicing
+		if (last_index < get_char_length(text)) {
+			fragments.push(char_slice(text, last_index));
 		}
 
 		return fragments;
@@ -66,35 +67,37 @@
 	}
 </script>
 
-<!-- ATTENTION: The comments are needed to prevent unwanted text nodes with whitespace. -->
-<div
- 	data-type="text"
- 	data-path={path.join('.')}
- 	style="anchor-name: --{path.join('-')};"
- 	class="text svedit-selectable {css_class}"
- 	class:empty={plain_text.length === 0}
-  class:focused={is_focused}
-  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}
-	{/each}<!--
-  --><br>
-</div>
+{#key plain_text}
+  <!-- ATTENTION: The comments are needed to prevent unwanted text nodes with whitespace. -->
+  <div
+   	data-type="text"
+   	data-path={path.join('.')}
+   	style="anchor-name: --{path.join('-')};"
+   	class="text svedit-selectable {css_class}"
+   	class:empty={get_char_length(plain_text) === 0 && !(svedit.is_composing && is_focused)}
+    class:focused={is_focused}
+    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}
+  	{/each}<!--
+    --><br>
+  </div>
+{/key}
 
 <style>
   .text {