svedit 0.1.1 → 0.3.0

package/src/lib/Svedit.svelte

@@ -1,13 +1,13 @@
 <script>
   import { setContext } from 'svelte';
-  import { snake_to_pascal } from './util.js';
+  import { snake_to_pascal, get_char_length, utf16_to_char_offset, char_to_utf16_offset, get_char_at, char_slice } from './util.js';
   import { break_text_node, join_text_node, insert_default_node, select_all } from './commands.svelte.js';
 
   /** @import { SveditProps, DocumentPath, Selection, TextSelection, NodeSelection, PropertySelection, NodeId } from './types.d.ts'; */
   /** @type {SveditProps} */
   let {
     doc,
-    editable = false,
+    editable = $bindable(false),
     path,
     class: css_class,
   } = $props();
@@ -17,31 +17,225 @@
   let Overlays = $derived(doc.config.system_components.Overlays);
   let RootComponent = $derived(doc.config.node_components[snake_to_pascal(root_node.type)]);
 
+  // Track temporary disabled onkeydown events (e.g. during character composition)
+  let skip_onkeydown = false;
+
+  let is_composing = $state(false);
+
+  let input_selection = undefined;
+
+  // Detect Chrome on desktop (not mobile) - only available in browser
+  let is_chrome_desktop = $state(false);
+
+  $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);
+      is_chrome_desktop = is_chrome && !is_mobile;
+    }
+  });
+
   /** Expose function so parent can call it */
   export { focus_canvas };
 
   setContext("svedit", {
     get doc() {
       return doc;
-    }
+    },
+    get editable() {
+      return editable;
+    },
+    get is_composing() {
+      return is_composing
+    },
   });
 
+  function diff_text(old_text, new_text) {
+    const old_length = get_char_length(old_text);
+    const new_length = get_char_length(new_text);
+
+    let start = 0;
+    while (
+      start < old_length &&
+      start < new_length &&
+      get_char_at(old_text, start) === get_char_at(new_text, start)
+    ) {
+      start++;
+    }
+
+    let old_end = old_length;
+    let new_end = new_length;
+    while (
+      old_end > start &&
+      new_end > start &&
+      get_char_at(old_text, old_end - 1) === get_char_at(new_text, new_end - 1)
+    ) {
+      old_end--;
+      new_end--;
+    }
+
+    return {
+      start_offset: start,
+      end_offset: old_end,
+      replacement_text: char_slice(new_text, start, new_end)
+    };
+  }
+
+  function commit_input() {
+    if (input_selection?.type !== 'text') return;
+    const model_text = doc.get(input_selection.path)[0];
+    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);
+    // console.log('======== COMMIT INPUT ========')
+    // console.log('mdl_text:', model_text);
+    // console.log('dom_text:', dom_text);
+    // console.log('op', op);
+
+    // NOTE: We are currently in an out-of-sync DOM state, right after
+    // contenteditable applied the input. But we can use this state
+    // to determine the ideal intended selection after the operation.
+    // Because our diffing may miss some context. E.g. when you replace "mchael"
+    // to "Michael" it will replace "m" with "Mi" and put the cursor after the "i",
+    // but we actually want it after "Michael".
+    const before_selection = __get_text_selection_from_dom();
+
+    // Now we are applying the change to the document
+    const tr = doc.tr;
+    tr.set_selection({
+      type: 'text',
+      path: [...input_selection.path],
+      anchor_offset: op.start_offset,
+      focus_offset: op.end_offset,
+    });
+    tr.insert_text(op.replacement_text);
+    tr.set_selection(before_selection);
+    doc.apply(tr);
+    // console.log('applied op', op);
+
+    // After each commited replacement, we start accepting custom key handlers again.
+    skip_onkeydown = false;
+    is_composing = false;
+    input_selection = null;
+  }
+
+  function oninput(event) {
+    // console.log(`oninput: ${event.inputType}, data: "${event.data}", isComposing: ${event.isComposing}`, event);
+    if (
+      // canvas_ref?.contains(document.activeElement) &&
+      // doc.selection?.type === 'text' &&
+      input_selection.type === 'text' &&
+      !event.isComposing
+    ) {
+      commit_input();
+    }
+  }
+
   /**
    * @param {InputEvent} event
    */
   function onbeforeinput(event) {
-    const inserted_char = event.data;
+    // console.log(`onbeforeinput: ${event.inputType}, data: "${event.data}", isComposing: ${event.isComposing}`, event);
 
-    event.preventDefault();
-    if (inserted_char) {
-      const tr = doc.tr;
-      tr.insert_text(inserted_char);
-      doc.apply(tr);
+    // Only take input when in a valid text selection inside the canvas
+    if (
+      !(canvas_ref?.contains(document.activeElement)) ||
+      (doc.selection?.type !== 'text')
+    ) {
+      event.preventDefault();
+      return;
+    }
+
+    if (event.inputType === 'formatBold') {
+      doc.apply(doc.tr.annotate_text('strong'));
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    if (event.inputType === 'formatItalic') {
+      doc.apply(doc.tr.annotate_text('emphasis'));
+      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.
+    input_selection = { ...doc.selection };
+
+    // If replacement is detected, I let contenteditable do the thing and wait for
+    // the oninput event to do the diffing and update the model.
+    if (event.inputType === 'insertReplacementText') {
+      return;
+    }
+
+    // For now I reject drag+drop text movements.
+    // TODO: If I want to support those, I need to handle them in such a way that
+    // you can drag from one text property to another too.
+    if (event.inputType === 'deleteByDrag' || event.inputType === 'insertFromDrop') {
+      event.preventDefault();
+      return;
+    }
+
+    // While composing, I do nothing and let the oncompositionend
+    // event handle the final replacement by recovering it from the DOM.
+    if (event.isComposing) {
+      return;
+    }
+
+    // Insert the character, unless there is none.
+    let inserted_text = event.data;
+
+    // Sometimes (e.g. for replacements) the inserted_text is available via
+    // event.dataTransfer, not event.data
+    if (!inserted_text && event.dataTransfer) {
+      inserted_text = event.dataTransfer?.getData('text/plain');
+    }
+
+    // If there's no inserted_text, I'm not handling this.
+    if (!inserted_text) {
+      event.preventDefault();
+      return;
+    }
+
+    // For now I don't accept structural replacements for savety reasons.
+    // E.g. this will catch Apple's writing tools that will attempt to mess with our DOM.
+    if (inserted_text.includes('\n') || inserted_text.includes('\t')) {
+      event.preventDefault();
+      return;
+    }
+
+    function get_base_char(char) {
+      if (!char) return undefined;
+      const normalized = char.normalize('NFD');
+      // If normalization doesn't change it OR it's longer than 2 chars, it's probably not a simple diacritic
+      if (normalized.length <= 2 && normalized !== char) {
+        return normalized[0];
+      }
+      return undefined;
+    }
+
+    if (
+      (get_char_length(inserted_text) > 1) ||
+      (get_char_length(inserted_text) === 1 && get_base_char(inserted_text))
+    ) {
+      skip_onkeydown = true;
+      return; // we are dealing with a replacement
     }
+
+    const tr = doc.tr;
+    tr.insert_text(inserted_text);
+    doc.apply(tr);
+    input_selection = undefined;
+    event.preventDefault();
   }
 
   // Map DOM selection to internal model
   function onselectionchange() {
+    if (!editable) return;
     const dom_selection = window.getSelection();
     if (!dom_selection.rangeCount) return;
 
@@ -54,6 +248,100 @@
     }
   }
 
+  /**
+   * Creates HTML clipboard format with embedded svedit data
+   * @param {Object} json_data - The svedit data to embed
+   * @param {string} fallback_html - HTML for cross-app compatibility
+   * @returns {string} HTML with embedded svedit data
+   */
+  function create_svedit_html_format(json_data, fallback_html) {
+    // Use encodeURIComponent to handle Unicode, then base64 encode
+    const json_string = JSON.stringify(json_data);
+    const encoded_data = btoa(encodeURIComponent(json_string));
+
+    return `<meta charset="utf-8">
+<div>
+  <span data-svedit="${encoded_data}"></span>
+</div>
+${fallback_html}`;
+  }
+
+  /**
+   * Extracts svedit data from HTML clipboard format
+   * @param {string} html - HTML content from clipboard
+   * @returns {Object|null} Parsed svedit data or null if not found
+   */
+  function extract_svedit_data_from_html(html) {
+    const svedit_regex = /data-svedit="([^"]+)"/;
+    const match = html.match(svedit_regex);
+
+    if (match && match[1]) {
+      try {
+        // Decode base64, then decode URI component to handle Unicode
+        const base64_decoded = atob(match[1]);
+        const decoded_data = decodeURIComponent(base64_decoded);
+        return JSON.parse(decoded_data);
+      } catch (e) {
+        console.warn('Failed to decode svedit data from HTML:', e);
+        return null;
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Default node exporter for nodes without specific exporters
+   * @param {Object} node - Node object
+   * @returns {string} HTML representation
+   */
+  function default_node_exporter(node) {
+    let html = '';
+    let has_content = false;
+
+    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];
+        if (text_content.trim()) {
+          html += `<p>${text_content}</p>\n`;
+          has_content = true;
+        }
+      }
+    }
+
+    if (!has_content) {
+      // Generic fallback for unknown node types with no annotated_string content
+      html += `<div data-node-type="${node.type}">Content from ${node.type}</div>\n`;
+    }
+
+    return html;
+  }
+
+  /**
+   * Exports nodes to HTML using document config exporters
+   * @param {Object[]} nodes - Array of node objects
+   * @returns {string} HTML representation
+   */
+  function export_html(nodes) {
+    let html = '';
+
+    for (const node of nodes) {
+      const html_exporters = doc.config.html_exporters || {};
+
+      if (html_exporters[node.type]) {
+        // Use custom exporter for this node type
+        html += html_exporters[node.type](node, doc);
+      } else {
+        // Use default exporter
+        html += default_node_exporter(node);
+      }
+    }
+
+    return html || '<p>Copied content</p>';
+  }
 
   /**
    * @param {NodeId[]} selected_node_ids
@@ -77,7 +365,6 @@
     return { nodes, main_nodes: selected_node_ids };
   }
 
-
   /**
    * @param {ClipboardEvent} event
    * @param {boolean} delete_selection - used by oncut()
@@ -89,16 +376,16 @@
     event.preventDefault();
     event.stopPropagation();
 
-    let plain_text, html, json_data;
+    let plain_text, html;
 
     if (doc.selection?.type === 'text') {
       plain_text = doc.get_selected_plain_text();
-      html = plain_text;
+      html = `<span style="white-space:pre-wrap;">${plain_text}</span>`;
     } else if (doc.selection?.type === 'node') {
       const selected_nodes = doc.get_selected_nodes();
       const { nodes, main_nodes } = prepare_copy_payload(selected_nodes);
 
-      json_data = { nodes, main_nodes };
+      const json_data = { nodes, main_nodes };
 
       console.log('Copy operation:', {
         selected_nodes,
@@ -106,18 +393,29 @@
         total_nodes: Object.keys(nodes).length,
         operation: delete_selection ? 'cut' : 'copy'
       });
+
+      // Generate fallback HTML for cross-app compatibility
+      const selected_node_objects = main_nodes.map(id => nodes[id]);
+      const fallback_html = export_html(selected_node_objects);
+
+      // Create HTML with embedded svedit data
+      html = create_svedit_html_format(json_data, fallback_html);
+
+      // Create plain text representation
+      plain_text = selected_node_objects.map(node => {
+        if (node.type === 'story') {
+          return (node.title || 'Untitled Story') + (node.content ? '\n' + node.content : '');
+        }
+        return `Content from ${node.type}`;
+      }).join('\n\n');
     }
 
     // Create a ClipboardItem with multiple formats
     const data = {
-      'text/plain': new Blob([plain_text], {type: 'text/plain'}),
-      'text/html': new Blob([html], {type: 'text/html'}),
+      'text/plain': new Blob([plain_text || ''], {type: 'text/plain'}),
+      'text/html': new Blob([html || ''], {type: 'text/html'}),
     };
 
-    if (json_data) {
-      const json_blob = new Blob([JSON.stringify(json_data)], {type: 'application/json'});
-      data['web application/json'] = json_blob;
-    }
     const clipboard_item_raw = new ClipboardItem(data);
 
     // Write to clipboard
@@ -145,15 +443,18 @@
 
     let pasted_json;
 
-    // Wrapping this in a try-catch as this API only works in Chrome. We fallback to
-    // plaintext copy and pasting for all other situations.
+    // First try to extract svedit data from HTML format
     try {
-      const json_blob = await clipboardItems[0].getType('web application/json');
-      pasted_json = JSON.parse(await json_blob.text());
-    } catch {
+      const html_blob = await clipboardItems[0].getType('text/html');
+      const html_content = await html_blob.text();
+      pasted_json = extract_svedit_data_from_html(html_content);
+    } catch (e) {
+      console.log('No HTML format available or failed to extract svedit data:', e);
       pasted_json = undefined;
     }
 
+
+
     if (pasted_json) {
       const tr = doc.tr;
 
@@ -202,10 +503,14 @@
 
       doc.apply(tr);
     } else {
-      const plain_text_blob = await clipboardItems[0].getType('text/plain');
-      // Convert the Blob to text
-      const plain_text = await plain_text_blob.text();
-      doc.apply(doc.tr.insert_text(plain_text));
+      // Fallback to plain text when no svedit data is found
+      try {
+        const plain_text_blob = await clipboardItems[0].getType('text/plain');
+        const plain_text = await plain_text_blob.text();
+        doc.apply(doc.tr.insert_text(plain_text));
+      } catch (e) {
+        console.error('Failed to paste any content:', e);
+      }
     }
   }
 
@@ -233,7 +538,7 @@
     } else if (selection?.type === 'property') {
       __render_property_selection();
     } else {
-      console.log('unsupported selection', selection);
+      console.log('unsupported selection', $state.snapshot(selection));
     }
   }
 
@@ -254,13 +559,34 @@
   }
 
   function onkeydown(e) {
+    // Turn editable on
+    if (e.key === 'e' && (e.ctrlKey || e.metaKey)) {
+      editable = true;
+      return;
+    }
+
+    // Turn editable off (=save)
+    if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
+      doc.selection = null;
+      editable = false;
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
     // Only handle keyboard events if focus is within the canvas
     if (!canvas_ref?.contains(document.activeElement)) return;
 
+    // Key handling temporarily disabled (e.g. while character composition takes place)
+    if (skip_onkeydown) {
+      // console.log('onkeydown skipped');
+      // Currently we do nothing, but we could handle keydown during character composition here.
+      return;
+    }
+
     const selection = /** @type {any} */ (doc.selection);
     const is_collapsed = selection?.anchor_offset === selection?.focus_offset;
 
-    // console.log('onkeydown', e.key);
     if (
       (e.key === 'ArrowRight' && e.altKey && e.ctrlKey && doc.selected_node) ||
       (e.key === 'ArrowRight' && e.altKey && e.ctrlKey && e.shiftKey && doc.selected_node)
@@ -354,14 +680,6 @@
       doc.apply(doc.tr.insert_text('\n'));
       e.preventDefault();
       e.stopPropagation();
-    } else if (e.key === 'b' && (e.ctrlKey || e.metaKey)) {
-      doc.apply(doc.tr.annotate_text('strong'));
-      e.preventDefault();
-      e.stopPropagation();
-    } else if (e.key === 'i' && (e.ctrlKey || e.metaKey)) {
-      doc.apply(doc.tr.annotate_text('emphasis'));
-      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')
@@ -378,7 +696,6 @@
         }
       } else {
         if (doc.selection?.type === 'text' && doc.selection?.anchor_offset === 0 && doc.selection?.focus_offset === 0) {
-          console.log('try to join with previous node');
           const tr = doc.tr;
           join_text_node(tr);
           doc.apply(tr);
@@ -391,6 +708,47 @@
         }
       }
 
+      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);
+          }
+        }
+      }
+
       e.preventDefault();
       e.stopPropagation();
     } else if (e.key === 'Enter' && selection?.type === 'property') {
@@ -420,8 +778,11 @@
       e.stopPropagation();
     } else if (e.key === 'Enter' && selection?.type === 'text') {
       const tr = doc.tr;
-      break_text_node(tr);
-      doc.apply(tr);
+      if (break_text_node(tr)) {
+        doc.apply(tr);
+      }
+      e.preventDefault();
+      e.stopPropagation();
     } else if (e.key === 'Escape' && selection) {
       doc.select_parent();
       e.preventDefault();
@@ -429,6 +790,34 @@
     }
   }
 
+  /**
+   * Handles composition start events for input methods like dead keys
+   * This occurs when user starts typing a composed character (e.g., backtick for accents)
+   * @param {CompositionEvent} event
+   */
+  function oncompositionstart(event) {
+    if (doc.selection.type !== 'text') return;
+    console.log('DEBUG: oncompositionstart', event.data);
+    // Disable keydown event handling during composition. This way, you can confirm
+    // a diacritic (a->ä) with ENTER without causing a line break.
+    skip_onkeydown = true;
+    is_composing = true;
+    return;
+  }
+
+  /**
+   * Handles composition end events for input methods like dead keys
+   * This occurs when composition is complete (e.g., after typing 'a' following backtick to get 'à')
+   */
+  function oncompositionend(/*event*/) {
+    // console.log('DEBUG: oncompositionend, insert:', event.data);
+    if (!canvas_ref?.contains(document.activeElement)) return;
+    if (canvas_ref?.contains(document.activeElement) && doc.selection?.type === 'text') {
+      commit_input();
+    }
+    return;
+  }
+
   /**
    * Extracts a NodeSelection from the current DOM selection.
    *
@@ -524,23 +913,23 @@
       focus_offset += 1;
     }
 
-    // Exclude first node when anchor_node[data-type="after-node-cursor-trap"]
+    // EDGE CASE: Exclude first node when anchor_node is an afer-node-cursor-trap
     // in a non-collapsed forward selection
     if (
-      anchor_node.dataset.type === 'after-node-cursor-trap' &&
+      anchor_node.parentElement?.dataset.type === 'after-node-cursor-trap' &&
       !is_backwards &&
       anchor_offset !== focus_offset
     ) {
       anchor_offset += 1;
     }
-    // Exclude first node when focus_node[data-type="after-node-cursor-trap"]
+    // EDGE CASE: Exclude first node when focus_node is an afer-node-cursor-trap
     // in a non-collapsed backward selection
     else if (
-      focus_node.dataset.type === 'after-node-cursor-trap' &&
+      focus_node.parentElement?.dataset.type === 'after-node-cursor-trap' &&
       is_backwards &&
       anchor_offset !== focus_offset &&
-      // EDGE CASE: only apply this rule if focus node and anchor node are in the same container
-      focus_node_depth === anchor_node_depth
+      // EDGE CASE: Only do correction when drag started from a deeper or equally deep anchor node
+      anchor_node_depth >= focus_node_depth
     ) {
       focus_offset += 1;
     }
@@ -553,7 +942,6 @@
     };
   }
 
-
   /**
    * Extracts a PropertySelection from the current DOM selection.
    *
@@ -593,8 +981,9 @@
     const focus_node = /** @type {HTMLElement} */ (dom_selection.focusNode);
     let focus_root, anchor_root;
 
+
     if (dom_selection.focusNode === dom_selection.anchorNode && focus_node.dataset?.type === 'text') {
-      // This is the case when the text node is empty (only a <br> is present)
+      // EDGE CASE 1: Either text node is empty (only a <br> is present), or cursor is after a <br> at the very end of the text node
       focus_root = anchor_root = focus_node;
     } else {
       focus_root = /** @type {HTMLElement} */ (dom_selection.focusNode.parentElement?.closest('[data-path][data-type="text"]'));
@@ -612,29 +1001,80 @@
 
     if (!path) return null;
 
-    let anchorOffset = 0;
-    let focusOffset = 0;
-    let currentOffset = 0;
+    // EDGE CASE 1B: Cursor after trailing <br> at end of text
+    //
+    // When text ends with a newline (\n), the browser renders it as a <br> element.
+    // If the user places their cursor after this <br>, the selection detection
+    // incorrectly reports position 0 instead of the actual text length.
+    //
+    // Example DOM structure when text is "Hello\n":
+    // <div data-type="text">
+    //   #text "Hello"    ← index 0
+    //   <br>             ← index 1 (represents the \n)
+    // </div>
+    //
+    // When cursor is after the <br>, we get:
+    // - focusNode: the div element
+    // - focusOffset: 2 (after the 2nd child)
+    // - But normal processing returns position 0 instead of text.length
+    //
+    // This edge case detects when:
+    // 1. Text content ends with \n
+    // 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_length = get_char_length(text_content);
+    if (text_length > 0) {
+      const last_char = get_char_at(text_content, text_length - 1);
+      if (dom_selection.focusNode === dom_selection.anchorNode &&
+          dom_selection.focusNode === focus_node &&
+          focus_node.dataset?.type === 'text' &&
+          !focus_node.classList.contains('empty') &&
+          last_char === '\n') {
+
+        const child_nodes = focus_node.childNodes;
+
+        // Check if the last child is a BR (indicating text ends with newline)
+        // and cursor is positioned near the end (after any of the last few elements)
+        if (child_nodes.length > 0 &&
+            child_nodes[child_nodes.length - 1].nodeName === 'BR' &&
+            dom_selection.focusOffset >= child_nodes.length - 2) {
+          return {
+            type: 'text',
+            path,
+            anchor_offset: text_length,
+            focus_offset: text_length
+          };
+        }
+      }
+    }
+
+    let anchor_offset = 0;
+    let focus_offset = 0;
+    let current_offset = 0;
 
     function processNode(node) {
       if (node.nodeType === Node.TEXT_NODE) {
-        const nodeLength = node.length;
-
+        const nodeText = node.textContent;
+        const nodeCharLength = get_char_length(nodeText);
         if (node === range.startContainer) {
-          anchorOffset = currentOffset + range.startOffset;
+          // Convert UTF-16 offset to character offset
+          const char_start_offset = utf16_to_char_offset(nodeText, range.startOffset);
+          anchor_offset = current_offset + char_start_offset;
         }
         if (node === range.endContainer) {
-          focusOffset = currentOffset + range.endOffset;
+          // Convert UTF-16 offset to character offset
+          const char_end_offset = utf16_to_char_offset(nodeText, range.endOffset);
+          focus_offset = current_offset + char_end_offset;
         }
-
-        currentOffset += nodeLength;
+        current_offset += nodeCharLength;
       } else if (node.nodeType === Node.ELEMENT_NODE) {
         for (const childNode of node.childNodes) {
           processNode(childNode);
         }
       }
-
-      return (focusOffset !== 0);
+      return (focus_offset !== 0);
     }
 
     // Process nodes to find offsets
@@ -648,14 +1088,14 @@
 
     // Swap offsets if it's a backward selection
     if (is_backward) {
-      [anchorOffset, focusOffset] = [focusOffset, anchorOffset];
+      [anchor_offset, focus_offset] = [focus_offset, anchor_offset];
     }
 
     return {
       type: 'text',
       path,
-      anchor_offset: anchorOffset,
-      focus_offset: focusOffset
+      anchor_offset: anchor_offset,
+      focus_offset: focus_offset
     };
   }
 
@@ -672,7 +1112,6 @@
   function __render_node_selection() {
     const selection = /** @type {NodeSelection} */ (doc.selection);
     const node_array_path = selection.path.join('.');
-
     let is_collapsed = selection.anchor_offset === selection.focus_offset;
     let is_backward = !is_collapsed && selection.anchor_offset > selection.focus_offset;
 
@@ -704,7 +1143,6 @@
         selection.anchor_offset === 0 ? ':scope > .position-zero-cursor-trap' : ':scope > .after-node-cursor-trap'
       );
 
-
       range.setStart(cursor_trap_el, 1);
       range.setEnd(cursor_trap_el, 1);
       dom_selection.removeAllRanges();
@@ -754,13 +1192,13 @@
     const selection = doc.selection;
     // The element that holds the property
     const el = canvas_ref.querySelector(`[data-path="${selection.path.join('.')}"][data-type="property"]`);
-    const cursor_trap = el.querySelector('.cursor-trap');
+    const cursor_trap_selectable = el.querySelector('.svedit-selectable');
 
     const range = window.document.createRange();
     const dom_selection = window.getSelection();
 
     // Select the entire cursor trap element contents and collapse to start
-    range.selectNodeContents(cursor_trap);
+    range.selectNodeContents(cursor_trap_selectable);
     range.collapse(true); // Collapse to start position
     dom_selection.removeAllRanges();
     dom_selection.addRange(range);
@@ -787,40 +1225,44 @@
     const start_offset = Math.min(selection.anchor_offset, selection.focus_offset);
     const end_offset = Math.max(selection.anchor_offset, selection.focus_offset);
 
-
     // Helper function to process each node
     function process_node(node) {
       if (node.nodeType === Node.TEXT_NODE) {
-        const node_length = node.length;
+        const node_text = node.textContent;
+        const node_char_length = get_char_length(node_text);
 
         if (is_backward) {
-          if (!focus_node && current_offset + node_length >= start_offset) {
+          if (!focus_node && current_offset + node_char_length >= start_offset) {
             focus_node = node;
-            focus_node_offset = start_offset - current_offset;
+            const char_offset = start_offset - current_offset;
+            focus_node_offset = char_to_utf16_offset(node_text, char_offset);
           }
         } else {
-          if (!anchor_node && current_offset + node_length >= start_offset) {
+          if (!anchor_node && current_offset + node_char_length >= start_offset) {
             anchor_node = node;
-            anchor_node_offset = start_offset - current_offset;
+            const char_offset = start_offset - current_offset;
+            anchor_node_offset = char_to_utf16_offset(node_text, char_offset);
           }
         }
 
         // Find end node
         if (is_backward) {
-          if (!anchor_node && current_offset + node_length >= end_offset) {
+          if (!anchor_node && current_offset + node_char_length >= end_offset) {
             anchor_node = node;
-            anchor_node_offset = end_offset - current_offset;
+            const char_offset = end_offset - current_offset;
+            anchor_node_offset = char_to_utf16_offset(node_text, char_offset);
             return true; // Stop iteration
           }
         } else {
-          if (!focus_node && current_offset + node_length >= end_offset) {
+          if (!focus_node && current_offset + node_char_length >= end_offset) {
             focus_node = node;
-            focus_node_offset = end_offset - current_offset;
+            const char_offset = end_offset - current_offset;
+            focus_node_offset = char_to_utf16_offset(node_text, char_offset);
             return true; // Stop iteration
           }
         }
 
-        current_offset += node_length;
+        current_offset += node_char_length;
       } else if (node.nodeType === Node.ELEMENT_NODE) {
         for (const child_node of node.childNodes) {
           if (process_node(child_node)) return true; // Stop iteration if end found
@@ -936,9 +1378,24 @@
   <div
     class="svedit-canvas {css_class}"
     class:hide-selection={doc.selection?.type === 'node'}
+    class:node-cursor={doc.selection?.type === 'node' && doc.selection.anchor_offset === doc.selection.focus_offset}
     bind:this={canvas_ref}
+    {oninput}
     {onbeforeinput}
+    {oncompositionstart}
+    {oncompositionend}
     contenteditable={editable ? 'true' : 'false'}
+    autocapitalize="off"
+    spellcheck="true"
+    {...{
+      // NOTE: Autocomplete and autocorrect make immense troubles
+      // on Desktop Chrome, so we disable them only for Chrome desktop.
+      // Additionally, OSX-native auto-complete also breaks, because
+      // I'm using a keyed block that always wipes the DOM of a text node
+      // on every change.
+      autocomplete: is_chrome_desktop ? "off" : "on",
+      autocorrect: is_chrome_desktop ? "off" : "on"
+    }}
   >
     <RootComponent {path} />
   </div>
@@ -955,15 +1412,26 @@
     }
   }
 
-  .svedit-canvas.hide-selection {
-		caret-color: transparent;
-	}
-
 	.svedit-canvas :global(::selection) {
 		background: var(--editing-fill-color);
 	}
 
-	.svedit-canvas.hide-selection :global(::selection) {
-    background: transparent;
+	@media not (pointer: coarse) {
+	  .svedit-canvas.hide-selection {
+      caret-color: transparent;
+    }
+  }
+
+  /* When the cursor is in a cursor-trap we never want to see the caret */
+  .svedit-canvas.node-cursor {
+    caret-color: transparent;
+  }
+
+  @media not (pointer: coarse) {
+	  @supports (anchor-name: --test) {
+      .svedit-canvas.hide-selection :global(::selection) {
+         background: transparent;
+      }
+		}
   }
 </style>