svedit 0.3.0 → 0.4.0

package/dist/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/dist/Svedit.svelte.d.ts.map

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

package/dist/Transaction.svelte.d.ts

@@ -51,7 +51,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: DocumentPath, value: any): void;
@@ -94,7 +94,7 @@ 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: Selection): Transaction;
     /**
@@ -105,7 +105,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
@@ -117,7 +117,7 @@ export default class Transaction {
      * tr.annotate_text('emphasis', {});
      * ```
      */
-    annotate_text(annotation_type: any, annotation_data: any): Transaction;
+    annotate_text(annotation_type: any, annotation_properties: any): Transaction;
     /**
      * Deletes the currently selected text or nodes.
      *

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

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