svedit 0.3.0 → 0.4.0

package/src/lib/Svedit.svelte

@@ -10,6 +10,8 @@
     editable = $bindable(false),
     path,
     class: css_class,
+    autocapitalize = "on",
+    spellcheck = "true",
   } = $props();
 
   let canvas_ref;
@@ -27,13 +29,26 @@
   // Detect Chrome on desktop (not mobile) - only available in browser
   let is_chrome_desktop = $state(false);
 
+  /**
+   * Detect if the current browser is on a mobile device
+   * @returns {boolean} true if mobile browser, false otherwise
+   */
+  function is_mobile_browser() {
+    if (typeof window === 'undefined' || 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);
+  }
+
   $effect(() => {
     if (typeof window !== 'undefined' && typeof navigator !== 'undefined') {
       const user_agent = navigator.userAgent;
       const is_chrome = user_agent.includes('Chrome') && !user_agent.includes('Edg');
-      const is_mobile = /iPhone|iPad|iPod|Android|Mobile/i.test(user_agent) ||
-                       ('ontouchstart' in window) ||
-                       (navigator.maxTouchPoints > 0);
+      const is_mobile = is_mobile_browser();
       is_chrome_desktop = is_chrome && !is_mobile;
     }
   });
@@ -86,7 +101,7 @@
 
   function commit_input() {
     if (input_selection?.type !== 'text') return;
-    const model_text = doc.get(input_selection.path)[0];
+    const model_text = doc.get(input_selection.path).text;
     const dom_text_element = document.querySelector(`[data-path="${input_selection.path.join('.')}"]`);
     const dom_text = dom_text_element.textContent;
     const op = diff_text(model_text, dom_text);
@@ -142,25 +157,98 @@
 
     // Only take input when in a valid text selection inside the canvas
     if (
-      !(canvas_ref?.contains(document.activeElement)) ||
-      (doc.selection?.type !== 'text')
+      !(canvas_ref?.contains(document.activeElement))
     ) {
       event.preventDefault();
       return;
     }
 
-    if (event.inputType === 'formatBold') {
+    if (event.inputType === 'formatBold' && doc.selection?.type === 'text') {
       doc.apply(doc.tr.annotate_text('strong'));
       event.preventDefault();
       event.stopPropagation();
     }
 
-    if (event.inputType === 'formatItalic') {
+    if (event.inputType === 'formatItalic' && doc.selection?.type === 'text') {
       doc.apply(doc.tr.annotate_text('emphasis'));
       event.preventDefault();
       event.stopPropagation();
     }
 
+    // NOTE: underline doesn't make much sense as a semantic annotation,
+    // so we rewire `cmd + u` to toggle highlights
+    if (event.inputType === 'formatUnderline' && doc.selection?.type === 'text') {
+      doc.apply(doc.tr.annotate_text('highlight'));
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+
+    if (event.inputType === 'deleteContentBackward') {
+      if (doc.selection?.type === 'property') {
+        // For property selections, clear the property value only if it's not already falsy
+        if (doc.get(doc.selection.path)) {
+          const tr = doc.tr;
+          tr.set(doc.selection.path, '');
+          doc.apply(tr);
+        }
+      } else {
+        if (doc.selection?.type === 'text' && doc.selection?.anchor_offset === 0 && doc.selection?.focus_offset === 0) {
+          const tr = doc.tr;
+          join_text_node(tr);
+          doc.apply(tr);
+        } else {
+          doc.apply(doc.tr.delete_selection());
+        }
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    if (event.inputType === 'deleteContentForward') {
+      // Forward delete: only handle collapsed text selections
+      if (doc.selection?.type === 'text' && doc.selection?.anchor_offset === doc.selection?.focus_offset) {
+        const text_content = doc.get(doc.selection.path).text;
+        const text_length = get_char_length(text_content);
+
+        if (doc.selection.focus_offset < text_length) {
+          // There's a character after the cursor - select and delete it
+          const tr = doc.tr;
+          tr.set_selection({
+            type: 'text',
+            path: [...doc.selection.path],
+            anchor_offset: doc.selection.focus_offset,
+            focus_offset: doc.selection.focus_offset + 1
+          });
+          tr.delete_selection();
+          doc.apply(tr);
+        } else {
+          // At end of text - try to join with next text node
+          const tr = doc.tr;
+          const node_index = parseInt(String(doc.selection.path.at(-2)), 10);
+          const successor_node = doc.get([...doc.selection.path.slice(0, -2), node_index + 1]);
+
+          // Check if next node is a text node
+          if (successor_node && doc.kind(successor_node) === 'text') {
+            // Set selection to beginning of next text node
+            tr.set_selection({
+              type: 'text',
+              path: [...doc.selection.path.slice(0, -2), node_index + 1, 'content'],
+              anchor_offset: 0,
+              focus_offset: 0
+            });
+            // Use join_text_node to merge with previous
+            join_text_node(tr);
+            doc.apply(tr);
+          }
+        }
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
 
     // We remember the "input selection", because in some mobile browsers (Samsung Android) the onbeforeinput event
     // is fired on a different selection than the input event.
@@ -302,9 +390,9 @@ ${fallback_html}`;
     for (const [prop_name, prop_value] of Object.entries(node)) {
       if (prop_name === 'id' || prop_name === 'type') continue;
 
-      // Check if this is an annotated_string property (array with string as first element)
-      if (Array.isArray(prop_value) && typeof prop_value[0] === 'string') {
-        const text_content = prop_value[0];
+      // Check if this is an annotated_text property (object with text property)
+      if (typeof prop_value === 'object' && prop_value !== null && typeof prop_value.text === 'string') {
+        const text_content = prop_value.text;
         if (text_content.trim()) {
           html += `<p>${text_content}</p>\n`;
           has_content = true;
@@ -313,7 +401,7 @@ ${fallback_html}`;
     }
 
     if (!has_content) {
-      // Generic fallback for unknown node types with no annotated_string content
+      // Generic fallback for unknown node types with no annotated_text content
       html += `<div data-node-type="${node.type}">Content from ${node.type}</div>\n`;
     }
 
@@ -389,7 +477,7 @@ ${fallback_html}`;
 
       console.log('Copy operation:', {
         selected_nodes,
-        main_nodes,
+        nodes,
         total_nodes: Object.keys(nodes).length,
         operation: delete_selection ? 'cut' : 'copy'
       });
@@ -453,8 +541,6 @@ ${fallback_html}`;
       pasted_json = undefined;
     }
 
-
-
     if (pasted_json) {
       const tr = doc.tr;
 
@@ -478,12 +564,18 @@ ${fallback_html}`;
           for (const [property, value] of Object.entries(new_node)) {
             if (property === 'id' || property === 'type') continue;
 
-            const prop_type = doc.schema[node.type]?.[property]?.type;
+            const prop_type = doc.schema[node.type]?.properties?.[property]?.type;
 
             if (prop_type === 'node_array' && Array.isArray(value)) {
               new_node[property] = value.map(ref_id => id_mapping[ref_id] || ref_id);
             } else if (prop_type === 'node' && typeof value === 'string') {
               new_node[property] = id_mapping[value] || value;
+            } else if (prop_type === 'annotated_text') {
+              const annotations = value.annotations.map(annotation => {
+                const {start_offset, end_offset, node_id} = annotation;
+                return {start_offset, end_offset, node_id: id_mapping[node_id] || node_id};
+              });
+              new_node[property] = {text: value.text, annotations};
             }
           }
 
@@ -588,37 +680,39 @@ ${fallback_html}`;
     const is_collapsed = selection?.anchor_offset === selection?.focus_offset;
 
     if (
-      (e.key === 'ArrowRight' && e.altKey && e.ctrlKey && doc.selected_node) ||
-      (e.key === 'ArrowRight' && e.altKey && e.ctrlKey && e.shiftKey && doc.selected_node)
+      (e.key === 'ArrowRight' && e.altKey && e.ctrlKey && doc.layout_node) ||
+      (e.key === 'ArrowRight' && e.altKey && e.ctrlKey && e.shiftKey && doc.layout_node)
     ) {
-      const node = doc.selected_node;
+      const node = doc.layout_node;
       const layout_count = doc.config.node_layouts[node.type];
 
       if (layout_count > 1 && node?.layout) {
         const next_layout = (node.layout % layout_count) + 1;
         console.log('layout / count / next_layout', node.layout, layout_count, next_layout);
         const tr = doc.tr;
-        tr.set([doc.selected_node?.id, 'layout'], next_layout);
+        tr.set([doc.layout_node?.id, 'layout'], next_layout);
         doc.apply(tr);
       }
+      e.preventDefault();
     } else if (
-      (e.key === 'ArrowLeft' && e.altKey && e.ctrlKey && doc.selected_node) ||
-      (e.key === 'ArrowLeft' && e.altKey && e.ctrlKey && e.shiftKey && doc.selected_node)
+      (e.key === 'ArrowLeft' && e.altKey && e.ctrlKey && doc.layout_node) ||
+      (e.key === 'ArrowLeft' && e.altKey && e.ctrlKey && e.shiftKey && doc.layout_node)
     ) {
-      const node = doc.selected_node;
+      const node = doc.layout_node;
       const layout_count = doc.config.node_layouts[node.type];
       if (layout_count > 1 && node?.layout) {
         const prev_layout = ((node.layout - 2 + layout_count) % layout_count) + 1;
         const tr = doc.tr;
-        tr.set([doc.selected_node?.id, 'layout'], prev_layout);
+        tr.set([doc.layout_node?.id, 'layout'], prev_layout);
         doc.apply(tr);
         console.log('layout / count / prev_layout', node.layout, layout_count, prev_layout);
       }
+      e.preventDefault();
     } else if (
-      (e.key === 'ArrowDown' && e.altKey && e.ctrlKey && doc.selected_node) ||
-      (e.key === 'ArrowDown' && e.altKey && e.ctrlKey && e.shiftKey && doc.selected_node  )
+      (e.key === 'ArrowDown' && e.altKey && e.ctrlKey && doc.layout_node) ||
+      (e.key === 'ArrowDown' && e.altKey && e.ctrlKey && e.shiftKey && doc.layout_node  )
     ) {
-      const node = doc.selected_node;
+      const node = doc.layout_node;
 
       if (doc.selection.type !== 'node') {
         doc.select_parent();
@@ -636,11 +730,12 @@ ${fallback_html}`;
       doc.config.inserters[next_type](tr);
       tr.set_selection(old_selection);
       doc.apply(tr);
+      e.preventDefault();
     } else if (
-      (e.key === 'ArrowUp' && e.altKey && e.ctrlKey && doc.selected_node) ||
-      (e.key === 'ArrowUp' && e.altKey && e.ctrlKey && e.shiftKey && doc.selected_node)
+      (e.key === 'ArrowUp' && e.altKey && e.ctrlKey && doc.layout_node) ||
+      (e.key === 'ArrowUp' && e.altKey && e.ctrlKey && e.shiftKey && doc.layout_node)
     ) {
-      const node = doc.selected_node;
+      const node = doc.layout_node;
 
       if (doc.selection.type !== 'node') {
         doc.select_parent();
@@ -660,6 +755,7 @@ ${fallback_html}`;
       doc.config.inserters[prev_type](tr);
       tr.set_selection(old_selection);
       doc.apply(tr);
+      e.preventDefault();
 
     } else if (e.key === 'a' && (e.metaKey || e.ctrlKey)) {
       const tr = doc.tr;
@@ -676,76 +772,32 @@ ${fallback_html}`;
       doc.redo();
       e.preventDefault();
       e.stopPropagation();
-    } else if (e.key === 'Enter' && (e.shiftKey)) {
+    } else if (e.key === 'Enter' && (e.shiftKey) && !is_mobile_browser() && selection?.type === 'text' && doc.inspect(selection.path).allow_newlines) {
       doc.apply(doc.tr.insert_text('\n'));
       e.preventDefault();
       e.stopPropagation();
-    } else if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
-      doc.apply(doc.tr.annotate_text('link', {
-        href: window.prompt('Enter the URL', 'https://example.com')
-      }));
+    } else if (e.key === 'b' && (e.ctrlKey || e.metaKey) && selection?.type === 'text') {
+      doc.apply(doc.tr.annotate_text('strong'));
       e.preventDefault();
       e.stopPropagation();
-    } else if (e.key === 'Backspace') {
-      if (selection?.type === 'property') {
-        // For property selections, clear the property value only if it's not already falsy
-        if (doc.get(selection.path)) {
-          const tr = doc.tr;
-          tr.set(selection.path, '');
-          doc.apply(tr);
-        }
-      } else {
-        if (doc.selection?.type === 'text' && doc.selection?.anchor_offset === 0 && doc.selection?.focus_offset === 0) {
-          const tr = doc.tr;
-          join_text_node(tr);
-          doc.apply(tr);
-        } else {
-          // TODO: Things are not yet properly composable, I think we need to
-          // realize delete_selection as a command as well.
-          // See https://prosemirror.net/docs/guide/#commands for inspiration.
-          // For other selections, use the normal delete behavior
-          doc.apply(doc.tr.delete_selection());
-        }
-      }
-
+    } else if (e.key === 'i' && (e.ctrlKey || e.metaKey) && selection?.type === 'text') {
+      doc.apply(doc.tr.annotate_text('emphasis'));
       e.preventDefault();
       e.stopPropagation();
-    } else if (e.key === 'Delete') {
-      // Forward delete: only handle collapsed text selections
-      if (selection?.type === 'text' && is_collapsed) {
-        const text_content = doc.get(selection.path)[0];
-        const text_length = get_char_length(text_content);
-
-        if (selection.focus_offset < text_length) {
-          // There's a character after the cursor - select and delete it
-          const tr = doc.tr;
-          tr.set_selection({
-            type: 'text',
-            path: [...selection.path],
-            anchor_offset: selection.focus_offset,
-            focus_offset: selection.focus_offset + 1
-          });
-          tr.delete_selection();
-          doc.apply(tr);
-        } else {
-          // At end of text - try to join with next text node
-          const tr = doc.tr;
-          const node_index = parseInt(selection.path.at(-2), 10);
-          const successor_node = doc.get([...selection.path.slice(0, -2), node_index + 1]);
-
-          // Check if next node is a text node
-          if (successor_node && doc.kind(successor_node) === 'text') {
-            // Set selection to beginning of next text node
-            tr.set_selection({
-              type: 'text',
-              path: [...selection.path.slice(0, -2), node_index + 1, 'content'],
-              anchor_offset: 0,
-              focus_offset: 0
-            });
-            // Use join_text_node to merge with previous
-            join_text_node(tr);
-            doc.apply(tr);
-          }
+    } else if (e.key === 'u' && (e.ctrlKey || e.metaKey) && selection?.type === 'text') {
+      doc.apply(doc.tr.annotate_text('highlight'));
+      e.preventDefault();
+      e.stopPropagation();
+    } else if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
+      const has_link = doc.active_annotation('link');
+      if (has_link) {
+        // Delete link
+        doc.apply(doc.tr.annotate_text('link'));
+      } else {
+        // Create link
+        const href = window.prompt('Enter the URL', 'https://example.com');
+        if (href) {
+          doc.apply(doc.tr.annotate_text('link', { href }));
         }
       }
 
@@ -1023,7 +1075,7 @@ ${fallback_html}`;
     // 2. Last child node is a <br> (the visual representation of that \n)
     // 3. Cursor is positioned at or near the end
     // And returns the correct text.length position instead.
-    const text_content = doc.get(path)[0];
+    const text_content = doc.get(path).text;
     const text_length = get_char_length(text_content);
     if (text_length > 0) {
       const last_char = get_char_at(text_content, text_length - 1);
@@ -1208,7 +1260,7 @@ ${fallback_html}`;
     const selection = /** @type {any} */ (doc.selection);
     // The element that holds the annotated string
     const el = canvas_ref.querySelector(`[data-path="${selection.path.join('.')}"][data-type="text"]`);
-    const empty_text = doc.get(selection.path)[0].length === 0;
+    const empty_text = doc.get(selection.path).text.length === 0;
 
     const range = window.document.createRange();
     const dom_selection = window.getSelection();
@@ -1385,8 +1437,8 @@ ${fallback_html}`;
     {oncompositionstart}
     {oncompositionend}
     contenteditable={editable ? 'true' : 'false'}
-    autocapitalize="off"
-    spellcheck="true"
+    {autocapitalize}
+    {spellcheck}
     {...{
       // NOTE: Autocomplete and autocorrect make immense troubles
       // on Desktop Chrome, so we disable them only for Chrome desktop.

package/src/lib/Transaction.svelte.js

@@ -67,7 +67,7 @@ export default class Transaction {
    * @example
    * ```js
    * tr.set(["list_1", "list_items"], [1, 2, 3]);
-   * tr.set(["page_1", "body", "0", "description"], ["Hello world", []]);
+   * tr.set(["page_1", "body", "0", "description"], {text: "Hello world", annotations: []});
    * ```
    */
   set (path, value) {
@@ -152,10 +152,10 @@ export default class Transaction {
    *
    * @param {Selection} selection - The new selection object
    * @returns {Transaction} This transaction instance for method chaining
-   * @todo Check if selection is valid and throw error if not
+   * @throws {Error} Throws if the selection is invalid or out of bounds
    */
   set_selection(selection) {
-    // TODO: Check if selection is valid and throw error if not
+    this.doc._validate_selection(selection);
     this.doc.selection = selection;
     return this;
   }
@@ -168,7 +168,7 @@ export default class Transaction {
    * when conflicting types are applied.
    *
    * @param {any} annotation_type - The type of annotation (e.g., 'link', 'bold', 'italic')
-   * @param {any} annotation_data - Additional data for the annotation (e.g., href for links)
+   * @param {any} annotation_properties - Additional data for the annotation (e.g., href for links)
    * @returns {Transaction} This transaction instance for method chaining
    *
    * @example
@@ -180,64 +180,25 @@ export default class Transaction {
    * tr.annotate_text('emphasis', {});
    * ```
    */
-  annotate_text(annotation_type, annotation_data) {
+  annotate_text(annotation_type, annotation_properties) {
     if (this.doc.selection.type !== 'text') return this;
 
     const { start, end } = this.doc.get_selection_range();
-    const annotated_string = structuredClone($state.snapshot(this.doc.get(this.doc.selection.path)));
-    const annotations = annotated_string[1];
-    const existing_annotations = this.doc.active_annotation();
-
-    // Special annotation type handling should probably be done in a separate function.
-    // The goal is to keep the core logic simple and allow developer to extend and pick only what they need.
-    // It could also be abstracted to not check for type (e.g. "link") but for a special attribute
-    // e.g. "zero-range-updatable" for annotations that are updatable without a range selection change.
-
-    // Special handling for links when there's no selection range
-    // Links should be updatable by just clicking on them without a range selection
-    if (annotation_type === 'link' && start === end && existing_annotations) {
-
-      // Use findIndex for deep comparison of annotation properties (comparison of annotation properties rather than object reference via indexOf)
-      const index = annotations.findIndex(/** @param {any} anno */ (anno) =>
-        anno[0] === existing_annotations[0] &&
-        anno[1] === existing_annotations[1] &&
-        anno[2] === existing_annotations[2]
-      );
-      // const index = annotations.indexOf(existing_annotations);
-
-      if (index !== -1) {
-        if (annotation_data.href === '') {
-          // Remove the annotation if the href is empty
-          annotations.splice(index, 1);
-        } else {
-          annotations[index] = [
-            existing_annotations[0],
-            existing_annotations[1],
-            'link',
-            { ...existing_annotations[3], ...annotation_data }
-          ];
-        }
-
-        this.set(this.doc.selection.path, annotated_string);
-        return this;
-      }
-    }
-
-    // Regular annotation handling
-    if (start === end) {
-      // For non-link annotations: You can not annotate text if the selection is collapsed.
-      return this;
-    }
+    const annotated_text = structuredClone($state.snapshot(this.doc.get(this.doc.selection.path)));
+    const annotations = annotated_text.annotations;
+    const existing_annotation = this.doc.active_annotation();
+    const existing_annotation_same_type = this.doc.active_annotation(annotation_type);
 
-    if (existing_annotations) {
+    if (existing_annotation) {
       // If there's an existing annotation of the same type, remove it
-      if (existing_annotations[2] === annotation_type) {
+      if (existing_annotation_same_type) {
         const index = annotations.findIndex(/** @param {any} anno */ (anno) =>
-          anno[0] === existing_annotations[0] &&
-          anno[1] === existing_annotations[1] &&
-          anno[2] === existing_annotations[2]
+          anno.start_offset === existing_annotation.start_offset &&
+          anno.end_offset === existing_annotation.end_offset
         );
         if (index !== -1) {
+          // Remove the annotation node from the graph
+          this.delete(annotations[index].node_id);
           annotations.splice(index, 1);
         }
       } else {
@@ -245,14 +206,23 @@ export default class Transaction {
         return this;
       }
     } else {
+      if (!this.doc.available_annotation_types.includes(annotation_type)) {
+        console.log(`Annotation type ${annotation_type} is not allowed here.`);
+        return this;
+      }
+
+      const new_annotation_node = {
+        id: this.doc.generate_id(),
+        type: annotation_type,
+        ...annotation_properties,
+      }
+      this.create(new_annotation_node);
       // If there's no existing annotation, add the new one
-      annotations.push([start, end, annotation_type, annotation_data]);
+      annotations.push({start_offset: start, end_offset: end, node_id: new_annotation_node.id});
     }
 
-    // Update the annotated string
-    this.set(this.doc.selection.path, annotated_string);
-    // Not needed anymore as doc.apply makes sure selection is rerendered
-    // this.doc.selection = { ...this.doc.selection };
+    // Update the annotated text
+    this.set(this.doc.selection.path, annotated_text);
     return this;
   }
 
@@ -309,13 +279,15 @@ export default class Transaction {
       let text = structuredClone($state.snapshot(this.doc.get(path)));
 
       // 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));
+      const original_text = text.text;
+      text.text = char_slice(original_text, 0, start) + char_slice(original_text, end, get_char_length(original_text));
 
+      // To mark annotation nodes for deletion.
+      const _deleted_nodes = [];
       // Update annotation offsets for deletion
       const deletion_length = end - start;
-      const new_annotations = text[1].map(/** @param {any} annotation */ (annotation) => {
-        const [annotation_start, annotation_end, type, annotation_data] = annotation;
+      const new_annotations = text.annotations.map(/** @param {any} annotation */ (annotation) => {
+        const {start_offset: annotation_start, end_offset: annotation_end, node_id} = annotation;
 
         // Adjust start offset
         let new_start = annotation_start;
@@ -341,16 +313,24 @@ export default class Transaction {
 
         // Remove annotation if it becomes invalid (start >= end)
         if (new_start >= new_end) {
+          console.log('deleting annotation');
+          _deleted_nodes.push(node_id);
           return false;
         }
 
-        return [new_start, new_end, type, annotation_data];
+        return {start_offset: new_start, end_offset: new_end, node_id};
       }).filter(Boolean);
 
-      text[1] = new_annotations;
+      text.annotations = new_annotations;
 
       // Update the text in the entry (this implicitly records an op via this.set)
       this.set(path, text);
+
+      // Remove annotation nodes that were implicitly deleted.
+      for (const node_id of _deleted_nodes) {
+        this.delete(node_id);
+      }
+
       this.set_selection({
         type: 'text',
         path,
@@ -442,18 +422,18 @@ export default class Transaction {
   insert_text(replaced_text) {
     if (this.doc.selection.type !== 'text') return this;
 
-    const annotated_string = structuredClone($state.snapshot(this.doc.get(this.doc.selection.path)));
+    const annotated_text = structuredClone($state.snapshot(this.doc.get(this.doc.selection.path)));
     const { start, end } = this.doc.get_selection_range();
 
     // 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));
+    const text = annotated_text.text;
+    annotated_text.text = 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]
+    // Transform the annotations (annotated_text.annotations)
+    // NOTE: Annotations are stored as {start_offset, end_offset, node_id}
     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;
+    const new_annotations = annotated_text.annotations.map(/** @param {any} annotation */ (annotation) => {
+      const {start_offset: annotation_start, end_offset: annotation_end, node_id} = annotation;
 
       // Case 1: annotation is wrapped in start and end (remove it)
       if (start <= annotation_start && end >= annotation_end) {
@@ -462,7 +442,7 @@ export default class Transaction {
 
       // Case 2: text inserted before the annotation
       if (end <= annotation_start) {
-        return [annotation_start + delta, annotation_end + delta, type, annotation_data];
+        return {start_offset: annotation_start + delta, end_offset: annotation_end + delta, node_id};
       }
 
       // Case 3: text inserted after the annotation
@@ -474,19 +454,19 @@ export default class Transaction {
       // 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) {
-        return [annotation_start, start, type, annotation_data];
+        return {start_offset: annotation_start, end_offset: start, node_id};
       }
 
       // Case 5: text inserted inside an annotation
       if (start >= annotation_start && start <= annotation_end && end < annotation_end && end >= annotation_start) {
-        return [annotation_start, annotation_end + delta, type, annotation_data];
+        return {start_offset: annotation_start, end_offset: annotation_end + delta, node_id};
       }
 
       // 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];
+        return {start_offset: start + get_char_length(replaced_text), end_offset: annotation_end + delta, node_id};
       }
 
       // Unhandled edge case:
@@ -496,7 +476,8 @@ export default class Transaction {
       // return annotation;
     }).filter(Boolean);
 
-    this.set(this.doc.selection.path, [annotated_string[0], new_annotations]); // this will update the current state and create a history entry
+    annotated_text.annotations = new_annotations;
+    this.set(this.doc.selection.path, annotated_text); // this will update the current state and create a history entry
 
     // Setting the selection automatically triggers a re-render of the corresponding DOMSelection.
     const new_selection = {
@@ -578,6 +559,8 @@ export default class Transaction {
           count += value.filter(id => id === target_node_id).length;
         } else if (prop_type === 'node' && value === target_node_id) {
           count += 1;
+        } else if (prop_type === 'annotated_text' && value && value.annotations) {
+          count += value.annotations.filter(annotation => annotation.node_id === target_node_id).length;
         }
       }
     }