svedit 0.3.0 → 0.5.0

package/src/lib/Transaction.svelte.js

@@ -1,8 +1,9 @@
 /**
- * @import { NodeId, SerializedNode, Selection, DocumentPath } from './types.js'
+ * @import { NodeId, Selection, DocumentPath } from './types.js'
  */
 
-import { get_char_length, char_slice } from './util.js';
+import { get_char_length, char_slice, traverse } from './util.js';
+import { join_text_node } from './commands.svelte.js';
 
 /**
  * Transaction class for managing atomic document operations with undo/redo support.
@@ -63,11 +64,12 @@ export default class Transaction {
    *
    * @param {DocumentPath} path - Array path to the property (e.g., ["node_1", "title"])
    * @param {any} value - The new value to set
+   * @returns {Transaction} This transaction instance for method chaining
    *
    * @example
    * ```js
    * tr.set(["list_1", "list_items"], [1, 2, 3]);
-   * tr.set(["page_1", "body", "0", "description"], ["Hello world", []]);
+   * tr.set(["page_1", "body", "0", "description"], {text: "Hello world", annotations: []});
    * ```
    */
   set (path, value) {
@@ -89,6 +91,64 @@ export default class Transaction {
     this.ops.push(op);
     this.inverse_ops.push(['set', path, previous_value]);
     this.doc._apply_op(op);
+    return this;
+  }
+
+  // Takes a subgraph and constructs new nodes from it
+  // NOTE: all ids will be mapped to new unique ids.
+  // NOTE: Omitted properties will be populated with default values.
+  build(node_id, nodes) {
+    const depth_first_nodes = traverse(node_id, this.doc.schema, nodes);
+    // This maps original ids to newly generated ids
+    const id_map = {};
+
+    for (const node of depth_first_nodes) {
+      const new_id = this.doc.generate_id();
+      id_map[node.id] = new_id;
+      const new_node = { ...node, id: new_id };
+      const node_schema = this.doc.schema[node.type];
+
+      // Update all property references to use new IDs
+      for (const [property_name, property_definition] of Object.entries(node_schema.properties)) {
+        const property_type = property_definition.type;
+        const value = node[property_name];
+
+        // Apply default values
+        if (property_type === 'node_array') {
+          // [] is the default value for node arrays
+          new_node[property_name] = Array.isArray(value) ? value.map(ref_id => id_map[ref_id]) : [];
+        } else if (property_type === 'node') {
+          // null is the default value for node references
+          new_node[property_name] = typeof value === 'string' ? id_map[value] : null;
+        } else if (property_type === 'annotated_text') {
+          if (value) {
+            const annotations = value.annotations.map(annotation => {
+              const {start_offset, end_offset, node_id} = annotation;
+              return {start_offset, end_offset, node_id: id_map[node_id] || node_id};
+            });
+            new_node[property_name] = {text: value.text, annotations};
+          } else {
+            new_node[property_name] = {text: '', annotations: []};
+          }
+        } else if (property_type === 'string') {
+          new_node[property_name] = value ?? property_definition.default ?? '';
+        } else if (property_type === 'integer') {
+          new_node[property_name] = value ?? property_definition.default ?? 0;
+        } else if (property_type === 'number') {
+          new_node[property_name] = value ?? property_definition.default ?? 0;
+        } else if (property_type === 'boolean') {
+          new_node[property_name] = value ?? property_definition.default ?? false;
+        } else if (['integer_array', 'number_array'].includes(property_type)) {
+          new_node[property_name] = value ?? property_definition.default ?? [];
+        } else if (property_type === 'string_array') {
+          new_node[property_name] = value ?? property_definition.default ?? [];
+        }
+      }
+
+      this.create(new_node);
+    }
+
+    return id_map[depth_first_nodes.at(-1).id];
   }
 
   /**
@@ -152,10 +212,10 @@ export default class Transaction {
    *
    * @param {Selection} selection - The new selection object
    * @returns {Transaction} This transaction instance for method chaining
-   * @todo Check if selection is valid and throw error if not
+   * @throws {Error} Throws if the selection is invalid or out of bounds
    */
   set_selection(selection) {
-    // TODO: Check if selection is valid and throw error if not
+    this.doc._validate_selection(selection);
     this.doc.selection = selection;
     return this;
   }
@@ -168,7 +228,7 @@ export default class Transaction {
    * when conflicting types are applied.
    *
    * @param {any} annotation_type - The type of annotation (e.g., 'link', 'bold', 'italic')
-   * @param {any} annotation_data - Additional data for the annotation (e.g., href for links)
+   * @param {any} annotation_properties - Additional data for the annotation (e.g., href for links)
    * @returns {Transaction} This transaction instance for method chaining
    *
    * @example
@@ -180,64 +240,25 @@ export default class Transaction {
    * tr.annotate_text('emphasis', {});
    * ```
    */
-  annotate_text(annotation_type, annotation_data) {
+  annotate_text(annotation_type, annotation_properties) {
     if (this.doc.selection.type !== 'text') return this;
 
     const { start, end } = this.doc.get_selection_range();
-    const annotated_string = structuredClone($state.snapshot(this.doc.get(this.doc.selection.path)));
-    const annotations = annotated_string[1];
-    const existing_annotations = this.doc.active_annotation();
-
-    // Special annotation type handling should probably be done in a separate function.
-    // The goal is to keep the core logic simple and allow developer to extend and pick only what they need.
-    // It could also be abstracted to not check for type (e.g. "link") but for a special attribute
-    // e.g. "zero-range-updatable" for annotations that are updatable without a range selection change.
-
-    // Special handling for links when there's no selection range
-    // Links should be updatable by just clicking on them without a range selection
-    if (annotation_type === 'link' && start === end && existing_annotations) {
-
-      // Use findIndex for deep comparison of annotation properties (comparison of annotation properties rather than object reference via indexOf)
-      const index = annotations.findIndex(/** @param {any} anno */ (anno) =>
-        anno[0] === existing_annotations[0] &&
-        anno[1] === existing_annotations[1] &&
-        anno[2] === existing_annotations[2]
-      );
-      // const index = annotations.indexOf(existing_annotations);
-
-      if (index !== -1) {
-        if (annotation_data.href === '') {
-          // Remove the annotation if the href is empty
-          annotations.splice(index, 1);
-        } else {
-          annotations[index] = [
-            existing_annotations[0],
-            existing_annotations[1],
-            'link',
-            { ...existing_annotations[3], ...annotation_data }
-          ];
-        }
-
-        this.set(this.doc.selection.path, annotated_string);
-        return this;
-      }
-    }
+    const annotated_text = structuredClone($state.snapshot(this.doc.get(this.doc.selection.path)));
+    const annotations = annotated_text.annotations;
+    const existing_annotation = this.doc.active_annotation();
+    const existing_annotation_same_type = this.doc.active_annotation(annotation_type);
 
-    // Regular annotation handling
-    if (start === end) {
-      // For non-link annotations: You can not annotate text if the selection is collapsed.
-      return this;
-    }
-
-    if (existing_annotations) {
+    if (existing_annotation) {
       // If there's an existing annotation of the same type, remove it
-      if (existing_annotations[2] === annotation_type) {
+      if (existing_annotation_same_type) {
         const index = annotations.findIndex(/** @param {any} anno */ (anno) =>
-          anno[0] === existing_annotations[0] &&
-          anno[1] === existing_annotations[1] &&
-          anno[2] === existing_annotations[2]
+          anno.start_offset === existing_annotation.start_offset &&
+          anno.end_offset === existing_annotation.end_offset
         );
         if (index !== -1) {
+          // Remove the annotation node from the graph
+          this.delete(annotations[index].node_id);
           annotations.splice(index, 1);
         }
       } else {
@@ -245,14 +266,23 @@ export default class Transaction {
         return this;
       }
     } else {
+      if (!this.doc.available_annotation_types.includes(annotation_type)) {
+        console.log(`Annotation type ${annotation_type} is not allowed here.`);
+        return this;
+      }
+
+      const new_annotation_node = {
+        id: this.doc.generate_id(),
+        type: annotation_type,
+        ...annotation_properties,
+      }
+      this.create(new_annotation_node);
       // If there's no existing annotation, add the new one
-      annotations.push([start, end, annotation_type, annotation_data]);
+      annotations.push({start_offset: start, end_offset: end, node_id: new_annotation_node.id});
     }
 
-    // Update the annotated string
-    this.set(this.doc.selection.path, annotated_string);
-    // Not needed anymore as doc.apply makes sure selection is rerendered
-    // this.doc.selection = { ...this.doc.selection };
+    // Update the annotated text
+    this.set(this.doc.selection.path, annotated_text);
     return this;
   }
 
@@ -262,23 +292,60 @@ export default class Transaction {
    * Behavior depends on selection type:
    * - For node selections: Removes selected nodes and cascades deletion of unreferenced nodes
    * - For text selections: Removes selected text and adjusts annotations accordingly
-   * - For collapsed selections: Deletes the previous character/node
+   * - For collapsed selections: Deletes the previous character/node (backward) or next character/node (forward)
    *
+   * @param {'backward' | 'forward'} [direction] - Direction of deletion for collapsed selections
    * @returns {Transaction} This transaction instance for method chaining
    */
-  delete_selection() {
+  delete_selection(direction = 'backward') {
     if (!this.doc.selection) return this;
     const path = this.doc.selection.path;
+
+    if (this.doc.selection.type === 'property') {
+      this.set(path, '');
+      return this;
+    }
+
     // Get the start and end indices for the selection
     let start = Math.min(this.doc.selection.anchor_offset, this.doc.selection.focus_offset);
     let end = Math.max(this.doc.selection.anchor_offset, this.doc.selection.focus_offset);
+    let length;
+
+    if (this.doc.selection?.type === 'text') {
+      const text_content = this.doc.get(this.doc.selection.path).text;
+      length = get_char_length(text_content);
+    } else if (this.doc.selection?.type === 'node') {
+      const node_array = this.doc.get(this.doc.selection.path);
+      length = node_array.length;
+    }
 
-    // If selection is collapsed we delete the previous node
+    // If selection is collapsed we delete the previous char/node (backward)
+    // or the next char/node (forward)
     if (start === end) {
-      if (start > 0) {
+      if (direction === 'backward' && start > 0) {
         start = start - 1;
-      } else {
-        return this; // cursor is at the very beginning, do nothing.
+      } else if (direction === 'forward' && end < length) {
+        end = end + 1;
+      } else if (direction === 'backward' && start === 0) {
+        join_text_node(this);
+        return this;
+      } else if (direction === 'forward' && end === length) {
+        // At end of text - try to join with next text node
+        const node_index = parseInt(String(this.doc.selection.path.at(-2)), 10);
+        const successor_node = this.doc.get([...this.doc.selection.path.slice(0, -2), node_index + 1]);
+        // Check if next node is a text node
+        if (successor_node && this.doc.kind(successor_node) === 'text') {
+          // Set selection to beginning of next text node
+          this.set_selection({
+            type: 'text',
+            path: [...this.doc.selection.path.slice(0, -2), node_index + 1, 'content'],
+            anchor_offset: 0,
+            focus_offset: 0
+          });
+          // Use join_text_node to merge with previous node
+          join_text_node(this);
+        }
+        return this;
       }
     }
 
@@ -309,13 +376,15 @@ export default class Transaction {
       let text = structuredClone($state.snapshot(this.doc.get(path)));
 
       // Update the text content using character-based operations
-      const original_text = text[0];
-      text[0] = char_slice(original_text, 0, start) + char_slice(original_text, end, get_char_length(original_text));
+      const original_text = text.text;
+      text.text = char_slice(original_text, 0, start) + char_slice(original_text, end, get_char_length(original_text));
 
+      // To mark annotation nodes for deletion.
+      const _deleted_nodes = [];
       // Update annotation offsets for deletion
       const deletion_length = end - start;
-      const new_annotations = text[1].map(/** @param {any} annotation */ (annotation) => {
-        const [annotation_start, annotation_end, type, annotation_data] = annotation;
+      const new_annotations = text.annotations.map(/** @param {any} annotation */ (annotation) => {
+        const {start_offset: annotation_start, end_offset: annotation_end, node_id} = annotation;
 
         // Adjust start offset
         let new_start = annotation_start;
@@ -341,16 +410,24 @@ export default class Transaction {
 
         // Remove annotation if it becomes invalid (start >= end)
         if (new_start >= new_end) {
+          console.log('deleting annotation');
+          _deleted_nodes.push(node_id);
           return false;
         }
 
-        return [new_start, new_end, type, annotation_data];
+        return {start_offset: new_start, end_offset: new_end, node_id};
       }).filter(Boolean);
 
-      text[1] = new_annotations;
+      text.annotations = new_annotations;
 
       // Update the text in the entry (this implicitly records an op via this.set)
       this.set(path, text);
+
+      // Remove annotation nodes that were implicitly deleted.
+      for (const node_id of _deleted_nodes) {
+        this.delete(node_id);
+      }
+
       this.set_selection({
         type: 'text',
         path,
@@ -364,23 +441,17 @@ export default class Transaction {
   /**
    * Inserts an array of nodes at the current node selection.
    *
-   * If there's a current selection, it will be deleted first. New nodes are
-   * created if they don't already exist (e.g., for cut+paste scenarios).
+   * If there's a current selection, it will be deleted first.
    *
-   * @param {SerializedNode[]} nodes - Array of node objects to insert
+   * @param {NodeId[]} node_ids - Array of node IDs to insert
    * @returns {Transaction} This transaction instance for method chaining
    *
-   * @note Assumes we only insert new nodes, not reference existing ones
-   *
    * @example
    * ```js
-   * tr.insert_nodes([
-   *   {id: 'para_1', type: 'paragraph', content: ['Hello', []]},
-   *   {id: 'para_2', type: 'paragraph', content: ['World', []]}
-   * ]);
+   * tr.insert_nodes_new(['para_1', 'para_2']);
    * ```
    */
-  insert_nodes(nodes) {
+  insert_nodes(node_ids) {
     if (this.doc.selection.type !== 'node') return this;
 
     // Unless cursor is collapsed, delete the selected nodes as a first step
@@ -402,13 +473,6 @@ export default class Transaction {
       node_array.splice(start, end - start);
     }
 
-    // First create the new nodes (unless they already exists e.g. in case of cut+paste)
-    nodes.forEach(node => {
-      if (!this.doc.get(node.id)) {
-        this.create(node);
-      }
-    });
-    const node_ids = nodes.map(node => node.id);
     node_array.splice(start, 0, ...node_ids);
 
     // Update the node_array in the entry
@@ -418,7 +482,7 @@ export default class Transaction {
       type: 'node',
       path: [...this.doc.selection.path],
       anchor_offset: start,
-      focus_offset: start + nodes.length
+      focus_offset: start + node_ids.length
     };
     return this;
   }
@@ -439,21 +503,21 @@ export default class Transaction {
    * tr.insert_text('Hello, world!');
    * ```
    */
-  insert_text(replaced_text) {
+  insert_text(replaced_text, annotations = [], nodes = {}) {
     if (this.doc.selection.type !== 'text') return this;
 
-    const annotated_string = structuredClone($state.snapshot(this.doc.get(this.doc.selection.path)));
+    const annotated_text = structuredClone($state.snapshot(this.doc.get(this.doc.selection.path)));
     const { start, end } = this.doc.get_selection_range();
 
     // Transform the plain text string using character-based operations
-    const text = annotated_string[0];
-    annotated_string[0] = char_slice(text, 0, start) + replaced_text + char_slice(text, end, get_char_length(text));
+    const text = annotated_text.text;
+    annotated_text.text = char_slice(text, 0, start) + replaced_text + char_slice(text, end, get_char_length(text));
 
-    // Transform the annotations (annotated_string[1])
-    // NOTE: Annotations are stored as [start_offset, end_offset, type]
+    // Transform the annotations (annotated_text.annotations)
+    // NOTE: Annotations are stored as {start_offset, end_offset, node_id}
     const delta = get_char_length(replaced_text) - (end - start);
-    const new_annotations = annotated_string[1].map(/** @param {any} annotation */ (annotation) => {
-      const [annotation_start, annotation_end, type, annotation_data] = annotation;
+    const new_annotations = annotated_text.annotations.map(/** @param {any} annotation */ (annotation) => {
+      const {start_offset: annotation_start, end_offset: annotation_end, node_id} = annotation;
 
       // Case 1: annotation is wrapped in start and end (remove it)
       if (start <= annotation_start && end >= annotation_end) {
@@ -462,7 +526,7 @@ export default class Transaction {
 
       // Case 2: text inserted before the annotation
       if (end <= annotation_start) {
-        return [annotation_start + delta, annotation_end + delta, type, annotation_data];
+        return {start_offset: annotation_start + delta, end_offset: annotation_end + delta, node_id};
       }
 
       // Case 3: text inserted after the annotation
@@ -474,19 +538,19 @@ export default class Transaction {
       // NOTE: replaced_text will not be part of the annotation, we treat it the same as
       // a cursor right after the annotation
       if (start > annotation_start && start < annotation_end && end >= annotation_end) {
-        return [annotation_start, start, type, annotation_data];
+        return {start_offset: annotation_start, end_offset: start, node_id};
       }
 
       // Case 5: text inserted inside an annotation
       if (start >= annotation_start && start <= annotation_end && end < annotation_end && end >= annotation_start) {
-        return [annotation_start, annotation_end + delta, type, annotation_data];
+        return {start_offset: annotation_start, end_offset: annotation_end + delta, node_id};
       }
 
       // Case 6: annotation is partly selected towards left
       // NOTE: replaced_text will not be part of the annotation, we treat it the same as
       // a cursor right before the annotation
       if (start < annotation_start && end > annotation_start && end < annotation_end) {
-        return [start + get_char_length(replaced_text), annotation_end + delta, type, annotation_data];
+        return {start_offset: start + get_char_length(replaced_text), end_offset: annotation_end + delta, node_id};
       }
 
       // Unhandled edge case:
@@ -496,7 +560,8 @@ export default class Transaction {
       // return annotation;
     }).filter(Boolean);
 
-    this.set(this.doc.selection.path, [annotated_string[0], new_annotations]); // this will update the current state and create a history entry
+    annotated_text.annotations = new_annotations;
+    this.set(this.doc.selection.path, annotated_text); // this will update the current state and create a history entry
 
     // Setting the selection automatically triggers a re-render of the corresponding DOMSelection.
     const new_selection = {
@@ -506,6 +571,32 @@ export default class Transaction {
       focus_offset: start + get_char_length(replaced_text),
     };
     this.doc.selection = new_selection;
+
+    // Now we apply annotations if there are any, but only if there's no active annotation
+    // at the current collapsed cursor
+    if (!this.doc.active_annotation() && annotations.length > 0) {
+      const new_annotations = annotations.map(annotation => {
+        const original_annotation_node = nodes[annotation.node_id];
+        const text_property_definition = this.doc.inspect(this.doc.selection.path);
+        // console.log('original_annotation_node.type', original_annotation_node.type);
+        // console.log('text_property_definition', text_property_definition);
+        if (text_property_definition.node_types.includes(original_annotation_node.type)) {
+          const new_annotation_node_id = this.build(annotation.node_id, nodes);
+          return {
+            start_offset: start + annotation.start_offset,
+            end_offset: start + annotation.end_offset,
+            node_id: new_annotation_node_id
+          };
+        } else {
+          // Annotation type not allowed in new context, skip it.
+          return null;
+        }
+      }).filter(Boolean);
+      const next_annotated_text = structuredClone(annotated_text);
+      next_annotated_text.annotations = next_annotated_text.annotations.concat(new_annotations);
+      this.set(this.doc.selection.path, next_annotated_text); // this will update the current state and create a history entry
+    }
+
     return this;
   }
 
@@ -578,6 +669,8 @@ export default class Transaction {
           count += value.filter(id => id === target_node_id).length;
         } else if (prop_type === 'node' && value === target_node_id) {
           count += 1;
+        } else if (prop_type === 'annotated_text' && value && value.annotations) {
+          count += value.annotations.filter(annotation => annotation.node_id === target_node_id).length;
         }
       }
     }

package/src/lib/commands.svelte.js

@@ -1,4 +1,4 @@
-import { split_annotated_string, join_annotated_string, get_char_length } from './util.js';
+import { split_annotated_text, join_annotated_text, get_char_length } from './util.js';
 import { get_default_node_type } from './Document.svelte.js';
 
 export function break_text_node(tr) {
@@ -30,7 +30,7 @@ export function break_text_node(tr) {
 
   const split_at_position = tr.doc.selection.anchor_offset;
   const content = tr.doc.get(selection.path);
-  const [left_text, right_text] = split_annotated_string(content, split_at_position);
+  const [left_text, right_text] = split_annotated_text(content, split_at_position);
 
   tr.set([node.id, 'content'], left_text);
 
@@ -42,7 +42,7 @@ export function break_text_node(tr) {
   };
 
   // TODO: Only use default_node_type when cursor is at the end of
-  const node_array_property_definition = doc.schema[node_array_node.type][node_array_prop];
+  const node_array_property_definition = doc.schema[node_array_node.type].properties[node_array_prop];
   const target_node_type = get_default_node_type(node_array_property_definition);
 
   if (!target_node_type) {
@@ -82,7 +82,7 @@ export function join_text_node(tr) {
   }
 
   // Special behavior: if we can't join and current node is empty, delete it
-  if (!can_join && node.content[0] === '') {
+  if (!can_join && node.content.text === '') {
     tr.set_selection({
       type: 'node',
       path: doc.selection.path.slice(0, -2),
@@ -100,8 +100,15 @@ export function join_text_node(tr) {
 
   // Normal joining logic - both nodes are text nodes
   const previous_text_path = [...doc.selection.path.slice(0, -2), node_index - 1];
-  const joined_text = join_annotated_string(predecessor_node.content, node.content);
+  const joined_text = join_annotated_text(predecessor_node.content, node.content);
 
+  // Calculate cursor position based on original predecessor content length
+  const cursor_position = get_char_length(predecessor_node.content.text);
+
+  // First set the joined content on the predecessor node (preserves annotations)
+  tr.set([predecessor_node.id, 'content'], joined_text);
+
+  // Then delete the current node
   tr.set_selection({
     type: 'node',
     path: doc.selection.path.slice(0, -2),
@@ -110,13 +117,14 @@ export function join_text_node(tr) {
   });
 
   tr.delete_selection();
+
+  // Finally set the cursor position at the join point using the pre-calculated position
   tr.set_selection({
     type: 'text',
     path: [...previous_text_path, 'content'],
-    anchor_offset: get_char_length(predecessor_node.content[0]),
-    focus_offset: get_char_length(predecessor_node.content[0]),
+    anchor_offset: cursor_position,
+    focus_offset: cursor_position,
   });
-  tr.set([predecessor_node.id, 'content'], joined_text);
   return true;
 }
 
@@ -134,14 +142,9 @@ export function insert_default_node(tr) {
   const property_name = path.at(-1);
 
   // Get the definition for this property
-  const property_definition = doc.schema[node_array_node.type][property_name];
+  const property_definition = doc.schema[node_array_node.type].properties[property_name];
   const default_type = get_default_node_type(property_definition);
 
-  // Only proceed if there's exactly one allowed node_type
-  // if (!default_type || property_schema.node_types.length !== 1) {
-  //   return false;
-  // }
-
   // Use the inserter function if available
   if (doc.config?.inserters?.[default_type]) {
     doc.config.inserters[default_type](tr);
@@ -161,7 +164,7 @@ export function select_all(tr) {
 
   if (selection.type === 'text') {
     const text_content = doc.get(selection.path);
-    const text_length = get_char_length(text_content[0]);
+    const text_length = get_char_length(text_content.text);
 
     // Check if all text is already selected
     const is_all_text_selected =

package/src/lib/index.js

@@ -1,6 +1,6 @@
 // Main exports for the svedit library
 export { default as Svedit } from './Svedit.svelte';
-export { default as AnnotatedStringProperty } from './AnnotatedStringProperty.svelte';
+export { default as AnnotatedTextProperty } from './AnnotatedTextProperty.svelte';
 export { default as CustomProperty } from './CustomProperty.svelte';
 export { default as Node } from './Node.svelte';
 export { default as NodeArrayProperty } from './NodeArrayProperty.svelte';