svedit 0.3.0 → 0.5.0

package/src/lib/Svedit.svelte

@@ -1,15 +1,27 @@
 <script>
   import { setContext } from 'svelte';
   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 { break_text_node, insert_default_node, select_all } from './commands.svelte.js';
+
+  /** @import {
+   *   SveditProps,
+   *   DocumentPath,
+   *   Selection,
+   *   TextSelection,
+   *   NodeSelection,
+   *   PropertySelection,
+   *   NodeId
+   * } from './types.d.ts';
+   */
 
-  /** @import { SveditProps, DocumentPath, Selection, TextSelection, NodeSelection, PropertySelection, NodeId } from './types.d.ts'; */
   /** @type {SveditProps} */
   let {
     doc,
     editable = $bindable(false),
     path,
     class: css_class,
+    autocapitalize = "on",
+    spellcheck = "true",
   } = $props();
 
   let canvas_ref;
@@ -19,21 +31,32 @@
 
   // 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);
 
+  /**
+   * 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 +109,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 +165,43 @@
 
     // 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') {
+      doc.apply(doc.tr.delete_selection('backward'));
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    if (event.inputType === 'deleteContentForward') {
+      doc.apply(doc.tr.delete_selection('forward'));
+      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.
@@ -295,29 +336,47 @@ ${fallback_html}`;
    * @param {Object} node - Node object
    * @returns {string} HTML representation
    */
-  function default_node_exporter(node) {
+  function default_node_html_exporter(node, doc, html_exporters) {
     let html = '';
-    let has_content = false;
+    const node_schema = doc.schema[node.type];
 
     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];
+      const property_definition = node_schema.properties[prop_name];
+      // Check if this is an annotated_text property (object with text property)
+      if (property_definition.type === 'annotated_text') {
+        const text_content = prop_value.text;
         if (text_content.trim()) {
-          html += `<p>${text_content}</p>\n`;
-          has_content = true;
+          html += `<p>${text_content.trim()}</p>\n`;
+        }
+      } else if (property_definition.type === 'node_array') {
+        for (const child_id of prop_value) {
+          const child = doc.get(child_id);
+          const child_exporter = html_exporters[child.type] || default_node_html_exporter;
+          html += child_exporter(child, doc, html_exporters);
         }
       }
     }
 
-    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;
+  }
+
+  function default_node_plain_text_exporter(node) {
+    let plain_text = '';
+
+    for (const [prop_name, prop_value] of Object.entries(node)) {
+      if (prop_name === 'id' || prop_name === 'type') continue;
+
+      // 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()) {
+          plain_text += `${text_content.trim()}\n\n`;
+        }
+      }
     }
 
-    return html;
+    return plain_text;
   }
 
   /**
@@ -333,14 +392,22 @@ ${fallback_html}`;
 
       if (html_exporters[node.type]) {
         // Use custom exporter for this node type
-        html += html_exporters[node.type](node, doc);
+        html += html_exporters[node.type](node, doc, html_exporters);
       } else {
         // Use default exporter
-        html += default_node_exporter(node);
+        html += default_node_html_exporter(node, doc, html_exporters);
       }
     }
+    return html;
+  }
 
-    return html || '<p>Copied content</p>';
+  function export_plain_text(nodes) {
+    let plain_text = '';
+
+    for (const node of nodes) {
+      plain_text += default_node_plain_text_exporter(node);
+    }
+    return plain_text.trim();
   }
 
   /**
@@ -376,20 +443,29 @@ ${fallback_html}`;
     event.preventDefault();
     event.stopPropagation();
 
-    let plain_text, html;
+    let plain_text, annotated_text, html;
 
     if (doc.selection?.type === 'text') {
       plain_text = doc.get_selected_plain_text();
-      html = `<span style="white-space:pre-wrap;">${plain_text}</span>`;
+      annotated_text = doc.get_selected_annotated_text();
+      const fallback_html = `<span>${annotated_text.text}</span>`;
+
+      console.log('Text copy:', {
+        annotated_text,
+        plain_text,
+        html,
+      });
+
+      html = create_svedit_html_format(annotated_text, fallback_html);
     } else if (doc.selection?.type === 'node') {
       const selected_nodes = doc.get_selected_nodes();
       const { nodes, main_nodes } = prepare_copy_payload(selected_nodes);
 
       const json_data = { nodes, main_nodes };
 
-      console.log('Copy operation:', {
+      console.log('Node copy:', {
         selected_nodes,
-        main_nodes,
+        nodes,
         total_nodes: Object.keys(nodes).length,
         operation: delete_selection ? 'cut' : 'copy'
       });
@@ -400,30 +476,30 @@ ${fallback_html}`;
 
       // 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');
+      // Generate plain text representation
+      plain_text = export_plain_text(selected_node_objects);
+    } else if (doc.selection?.type === 'property') {
+      const property_definition = doc.inspect(doc.selection.path);
+      const value = doc.get(doc.selection.path);
+      const json_data = {
+        kind: 'property',
+        name: property_definition.name,
+        type: property_definition.type,
+        value,
+      };
+      console.log('Property copy:', json_data);
+      html = create_svedit_html_format(json_data, `<span>${value}</span>`);
+      plain_text = String(value);
     }
 
-    // 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'}),
-    };
-
-    const clipboard_item_raw = new ClipboardItem(data);
-
-    // Write to clipboard
-    navigator.clipboard.write([clipboard_item_raw]).then(() => {
+    // Write to clipboard using event.clipboardData
+    try {
+      event.clipboardData?.setData('text/plain', plain_text || '');
+      event.clipboardData?.setData('text/html', html || '');
       console.log('Data copied to clipboard successfully');
-    }).catch(err => {
+    } catch (err) {
       console.error('Failed to copy data: ', err);
-    });
+    }
 
     if (delete_selection) {
       doc.apply(doc.tr.delete_selection());
@@ -434,83 +510,163 @@ ${fallback_html}`;
     oncopy(event, true);
   }
 
-  async function onpaste(event) {
-    // Only handle paste events if focus is within the canvas
-    if (!canvas_ref?.contains(document.activeElement)) return;
-
-    event.preventDefault();
-    const clipboardItems = await navigator.clipboard.read();
 
-    let pasted_json;
+  /**
+   * Attempts to paste JSON data as a node at the current selection.
+   *
+   * @param {string|object} pasted_json - The JSON data to paste, either as a string or parsed object
+   * @param {Selection} [selection] - Optional selection (node cursor) where the payload should be pasted
+   * @returns {boolean} True if the paste operation was successful, false otherwise
+   */
+  function try_node_paste(pasted_json, selection) {
+    const { nodes, main_nodes } = pasted_json;
 
-    // First try to extract svedit data from HTML format
-    try {
-      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;
+    // NOTE: At this point, nodes contains a subgraph from the copy
+    // with original ids.
+    let tr = doc.tr;
+    if (selection) {
+     tr.set_selection(selection);
     }
 
-
-
-    if (pasted_json) {
-      const tr = doc.tr;
-
-      // Handle new format: { nodes: {id -> node}, main_nodes: [id1, id2, ...] }
-      if (pasted_json.nodes && pasted_json.main_nodes) {
-        const { nodes, main_nodes } = pasted_json;
-
-        // Generate new IDs for all nodes during paste
-        const id_mapping = {};
-        for (const node_id in nodes) {
-          id_mapping[node_id] = doc.generate_id();
+    // We can safely assume we're dealing with a node_array property
+    const property_definition = doc.inspect(tr.selection.path);
+    const first_compatible_text_node_type = property_definition.node_types.find(type => doc.kind({ type }) === 'text');
+
+    const nodes_to_insert = [];
+    let rejected = false;
+    for (const node_id of main_nodes) {
+      const node = nodes[node_id];
+      if (!property_definition.node_types.includes(node.type)) {
+        // Incompatible node type detected
+        if (doc.kind(node) === 'text' && first_compatible_text_node_type) {
+          const new_node_id = tr.build('the_node', {
+            the_node: {
+              id: 'the_node',
+              type: first_compatible_text_node_type,
+              content: node.content,
+            },
+          });
+          nodes_to_insert.push(new_node_id);
+        } else {
+          console.log(`rejected ${node.type}. Only ${property_definition.node_types.join(', ')} allowed.`);
+          rejected = true;
+          break;
         }
+      } else {
+        const new_node_id = tr.build(node_id, nodes);
+        nodes_to_insert.push(new_node_id);
+      }
+    }
 
-        // Create nodes with new IDs and updated references
-        const updated_nodes = {};
-        for (const [old_id, node] of Object.entries(nodes)) {
-          const new_node = { ...node };
-          new_node.id = id_mapping[old_id];
-
-          // Update all property references to use new IDs
-          for (const [property, value] of Object.entries(new_node)) {
-            if (property === 'id' || property === 'type') continue;
-
-            const prop_type = doc.schema[node.type]?.[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;
-            }
-          }
-
-          updated_nodes[new_node.id] = new_node;
+    if (!rejected) {
+      tr.insert_nodes(nodes_to_insert);
+      doc.apply(tr);
+      return true;
+    } else {
+      if (tr.selection.path.length >= 2) {
+        const next_node_insert_cursor = doc.get_next_node_insert_cursor(tr.selection);
+        if (next_node_insert_cursor) {
+          try_node_paste(pasted_json, next_node_insert_cursor);
         }
+      }
+    }
+    return false;
+  }
 
-        // Create all nodes first
-        for (const node of Object.values(updated_nodes)) {
-          tr.create(node);
-        }
+  async function onpaste(event) {
+    // Only handle paste events if focus is within the canvas
+    if (!canvas_ref?.contains(document.activeElement)) return;
+    event.preventDefault();
 
-        // Then insert the main nodes at the current selection
-        const new_main_nodes = main_nodes.map(id => id_mapping[id]);
-        const main_node_objects = new_main_nodes.map(id => updated_nodes[id]);
-        tr.insert_nodes(main_node_objects);
+    let plain_text, pasted_json, pasted_images = [];
+
+    // NOTE: For some reason, await navigator.clipboard.read()
+    const clipboard_items =  event.clipboardData?.items || [];
+    for (const item of clipboard_items || []) {
+      if (item.type.startsWith("image/")) {
+        const blob = item.getAsFile();
+        const data_url = URL.createObjectURL(blob);
+        pasted_images.push({
+          blob,
+          data_url,
+          type: item.type,
+          size: blob.size
+        });
       }
+    }
 
-      doc.apply(tr);
+    if (pasted_images.length > 0) {
+      pasted_json = await doc.config.handle_image_paste(doc, pasted_images);
+      console.log('pasted_json_after_image_paste', pasted_json);
+      // NOTE: If no pasted_json is returned from the custom handler, we assume that content creation has been
+      // handled inside handle_image_paste already.
+      if (!pasted_json) return;
     } else {
-      // Fallback to plain text when no svedit data is found
+      // First try to extract svedit data from HTML format
       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));
+        const html_content = event.clipboardData?.getData('text/html');
+        if (html_content) {
+          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;
+      }
+
+      try {
+        plain_text = event.clipboardData?.getData('text/plain');
       } catch (e) {
         console.error('Failed to paste any content:', e);
       }
+
+      // Try to contruct a node payload from plain text when applicable
+      if (!pasted_json && typeof plain_text === 'string') {
+        const plain_text_fragments = plain_text.split('\n\n').map(fragment => fragment.trim()).filter(Boolean);
+        if (plain_text_fragments.length > 1) {
+          pasted_json = {
+            main_nodes: [],
+            nodes: [],
+          };
+          for (let i = 0; i < plain_text_fragments.length; i++) {
+            const fragment = plain_text_fragments[i];
+            pasted_json.nodes["fragment_" + i] = {
+              id: "fragment_" + i,
+              type: 'text',
+              content: {
+                text: fragment,
+                annotations: []
+              }
+            };
+            pasted_json.main_nodes.push("fragment_" + i);
+          }
+        }
+      }
+    }
+
+    if (pasted_json?.main_nodes && doc.selection?.type === 'node') {
+      // Paste nodes at a node selection
+      try_node_paste(pasted_json);
+    } else if (pasted_json?.kind === 'property' && doc.selection?.type === 'property') {
+      const property_definition = doc.inspect(doc.selection.path);
+      if (property_definition.type === pasted_json.type) {
+        doc.apply(doc.tr.set(doc.selection.path, pasted_json.value));
+      }
+    } else if (doc.selection?.type === 'text' && pasted_json?.text) {
+      // Paste text at a text selection
+      doc.apply(doc.tr.insert_text(pasted_json.text, pasted_json.annotations, pasted_json.nodes));
+    } else if (doc.selection?.type === 'text' && pasted_json?.main_nodes?.length === 1 && doc.kind(pasted_json?.nodes[pasted_json.main_nodes[0]]) === 'text') {
+      // Paste a single text node, at a text cursor
+      const text_property = pasted_json.nodes[pasted_json.main_nodes[0]].content;
+      doc.apply(doc.tr.insert_text(text_property.text, text_property.annotations, pasted_json.nodes));
+    } else if (['text', 'property'].includes(doc.selection?.type) && pasted_json?.nodes) {
+      // Paste nodes at a text or property selection by finding the next valid insert cursor
+      const next_node_insert_cursor = doc.get_next_node_insert_cursor(doc.selection);
+      try_node_paste(pasted_json, next_node_insert_cursor);
+    } else if (typeof plain_text === 'string') {
+      // External paste: Fallback to plain text when no svedit data is found
+      doc.apply(doc.tr.insert_text(plain_text.trim()));
+    } else {
+      console.log('Could not paste.');
     }
   }
 
@@ -588,47 +744,47 @@ ${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();
       }
       const old_selection = { ...doc.selection };
-
       const node_array_schema = doc.inspect(doc.selection.path);
       // If we are not dealing with a node selection in a container, return
       if (node_array_schema.type !== 'node_array') return;
-
       const current_type_index = node_array_schema.node_types.indexOf(node.type);
       const next_type_index = (current_type_index + 1) % node_array_schema.node_types.length;
       const next_type = node_array_schema.node_types[next_type_index];
@@ -636,31 +792,27 @@ ${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();
       }
-
-      // if (selection.type !== 'node') return;
       const old_selection = { ...doc.selection };
       const node_array_schema = doc.inspect(doc.selection.path);
       // If we are not dealing with a node selection in a container, return
       if (node_array_schema.type !== 'node_array') return;
-
       const current_type_index = node_array_schema.node_types.indexOf(node.type);
-      // return (current_layout_number - 1 + layout_count) % layout_count;
       const prev_type_index = (current_type_index - 1 + node_array_schema.node_types.length) % node_array_schema.node_types.length;
       const prev_type = node_array_schema.node_types[prev_type_index];
       const tr = doc.tr;
       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;
       if (select_all(tr)) {
@@ -676,76 +828,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 }));
         }
       }
 
@@ -760,16 +868,10 @@ ${fallback_html}`;
       const span_length = Math.abs(selection.focus_offset - selection.anchor_offset);
 
       if (is_collapsed) {
-        // Try to insert default node if there's only one allowed ref_type
+        // Always insert default node on ENTER
         const tr = doc.tr;
         insert_default_node(tr);
         doc.apply(tr);
-        // if (insert_default_node(tr)) {
-        //   doc.apply(tr);
-        // } else {
-        //   // Fall back to focusing toolbar when multiple types are available
-        //   focus_toolbar();
-        // }
       } else if (span_length === 1) {
         focus_toolbar();
       }
@@ -1023,7 +1125,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);
@@ -1184,7 +1286,7 @@ ${fallback_html}`;
         (is_backward ? focus_node : anchor_node).scrollIntoView({ block: 'nearest', inline: 'nearest' });
       }, 0);
     } else {
-      console.log('no container element found!!');
+      console.log('No container element found!');
     }
   }
 
@@ -1193,7 +1295,6 @@ ${fallback_html}`;
     // The element that holds the property
     const el = canvas_ref.querySelector(`[data-path="${selection.path.join('.')}"][data-type="property"]`);
     const cursor_trap_selectable = el.querySelector('.svedit-selectable');
-
     const range = window.document.createRange();
     const dom_selection = window.getSelection();
 
@@ -1202,13 +1303,21 @@ ${fallback_html}`;
     range.collapse(true); // Collapse to start position
     dom_selection.removeAllRanges();
     dom_selection.addRange(range);
+
+    // Scroll the selection into view
+    setTimeout(() => {
+      const selectedElement = dom_selection.focusNode.parentElement;
+      if (selectedElement) {
+        selectedElement.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      }
+    }, 0);
   }
 
   function __render_text_selection() {
     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();
@@ -1261,7 +1370,6 @@ ${fallback_html}`;
             return true; // Stop iteration
           }
         }
-
         current_offset += node_char_length;
       } else if (node.nodeType === Node.ELEMENT_NODE) {
         for (const child_node of node.childNodes) {
@@ -1284,16 +1392,6 @@ ${fallback_html}`;
       for (const child_node of el.childNodes) {
         if (process_node(child_node)) break;
       }
-
-      // EDGE CASE: cursor at the end of an annotation
-      // TODO: It seems this edge case is handled elsewhere. We keep around the checker for a
-      // while and delete this branch, if we don't see any problems.
-      if (anchor_node && !focus_node && current_offset === end_offset) {
-        alert('EDGE CASE: cursor at the end of an annotation.');
-        // console.log('EDGE CASE: cursor at the end of an annotation');
-        // focus_node = /** @type {HTMLElement | Text} */ (anchor_node.nextSibling || anchor_node);
-        // focus_node_offset = focus_node === anchor_node ? anchor_node.length : 0;
-      }
     }
 
     // Set the range if both start and end were found
@@ -1379,14 +1477,15 @@ ${fallback_html}`;
     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}
+    class:property-selection={doc.selection?.type === 'property'}
     bind:this={canvas_ref}
     {oninput}
     {onbeforeinput}
     {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.
@@ -1423,7 +1522,7 @@ ${fallback_html}`;
   }
 
   /* When the cursor is in a cursor-trap we never want to see the caret */
-  .svedit-canvas.node-cursor {
+  .svedit-canvas.node-cursor, .svedit-canvas.property-selection {
     caret-color: transparent;
   }