svedit 0.4.0 → 0.5.0

package/dist/Svedit.svelte

@@ -1,9 +1,19 @@
 <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,
@@ -21,9 +31,7 @@
 
   // 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
@@ -183,73 +191,18 @@
       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());
-        }
-      }
-
+      doc.apply(doc.tr.delete_selection('backward'));
       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);
-          }
-        }
-      }
-
+      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.
     input_selection = { ...doc.selection };
@@ -383,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;
-
+      const property_definition = node_schema.properties[prop_name];
       // 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') {
+      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_text 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;
   }
 
   /**
@@ -421,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();
   }
 
   /**
@@ -464,18 +443,27 @@ ${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,
         nodes,
         total_nodes: Object.keys(nodes).length,
@@ -488,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());
@@ -522,87 +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]?.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};
-            }
-          }
-
-          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 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 {
-        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));
+        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.');
     }
   }
 
@@ -700,6 +764,7 @@ ${fallback_html}`;
     ) {
       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;
@@ -713,16 +778,13 @@ ${fallback_html}`;
       (e.key === 'ArrowDown' && e.altKey && e.ctrlKey && e.shiftKey && doc.layout_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];
@@ -736,19 +798,14 @@ ${fallback_html}`;
       (e.key === 'ArrowUp' && e.altKey && e.ctrlKey && e.shiftKey && doc.layout_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;
@@ -756,7 +813,6 @@ ${fallback_html}`;
       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)) {
@@ -812,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();
       }
@@ -1236,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!');
     }
   }
 
@@ -1245,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();
 
@@ -1254,6 +1303,14 @@ ${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() {
@@ -1313,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) {
@@ -1336,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
@@ -1431,6 +1477,7 @@ ${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}
@@ -1475,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;
   }
 

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":";;;;;;;AAo6CA;;eAAqD;iCAx5CgE,cAAc"}
+{"version":3,"file":"Svedit.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Svedit.svelte.js"],"names":[],"mappings":";;;;;;;AAk9CA;;eAAqD;iCA97CzC,cAAc"}