svedit 0.3.0 → 0.4.0

package/README.md

@@ -39,7 +39,7 @@ Now make it your own. The next thing you probably want to do is define your own
 
 **Chromeless canvas:** We keep the canvas chromeless, meaning there's no UI elements like toolbars or menus mingled with the content. You can interact with text directly, but everything else happens via tools are shown in separate overlays or in the fixed toolbar.
 
-**Convention over configuration:** We use conventions and assumptions to reduce configuration code and limit the number of ways something can go wrong. For instance, we assume that a node with a property named `content` of type `string` or `annotated_string` is considered kind `text`, while all other nodes are considered kind `node`. Text nodes have special behavior in the system for editing (e.g. they can be splitted and joined).
+**Convention over configuration:** We use conventions and assumptions to reduce configuration code and limit the number of ways something can go wrong. For instance, we assume that a node with a property named `content` of type `annotated_text` is considered kind `text`, while all other nodes are considered kind `node`. Text nodes have special behavior in the system for editing (e.g. they can be splitted and joined).
 
 **White-box library:** We expose the internals of the library to allow you to customize and extend it to your needs. That means a little bit more work upfront, but in return lets you control "everything" — the toolbar, the overlays, or how fast the node cursor blinks.
 
@@ -63,7 +63,7 @@ Properties of nodes can hold values:
 - `string_array`: An array of good old JavaScript strings
 - `integer_array`: An array of integers
 - `number_array`: An array of numbers
-- `annotated_string`: a plain text string, but with annotations (bold, italic, link etc.)
+- `annotated_text`: a plain text string, but with annotations (bold, italic, link etc.)
 
 Or references:
 - `node`: References a single node (e.g. an image node can reference a global asset node)
@@ -73,35 +73,53 @@ Or references:
 ```js
 const document_schema = {
   page: {
-    body: {
-      type: 'node_array',
-      node_types: ['nav', 'paragraph', 'list'],
-      default_node_type: 'paragraph',
+    kind: 'document',
+    properties: {
+      body: {
+        type: 'node_array',
+        node_types: ['nav', 'paragraph', 'list'],
+        default_node_type: 'paragraph',
+      }
     }
   },
   paragraph: {
-    content: { type: 'annotated_string' }
+    kind: 'text',
+    properties: {
+      content: { type: 'annotated_text', allow_newlines: true }
+    }
   },
   list_item: {
-    content: { type: 'annotated_string' },
+    kind: 'text',
+    properties: {
+      content: { type: 'annotated_text', allow_newlines: true },
+    }
   },
   list: {
-    list_items: {
-      type: 'node_array',
-      node_types: ['list_item'],
-      default_node_type: 'list_item',
+    kind: 'block',
+    properties: {
+      list_items: {
+        type: 'node_array',
+        node_types: ['list_item'],
+        default_node_type: 'list_item',
+      }
     }
   },
   nav: {
-    nav_items: {
-      type: 'node_array',
-      node_types: ['nav_item'],
-      default_node_type: 'nav_item',
+    kind: 'block',
+    properties: {
+      nav_items: {
+        type: 'node_array',
+        node_types: ['nav_item'],
+        default_node_type: 'nav_item',
+      }
     }
   },
   nav_item: {
-    url: { type: 'string' },
-    label: { type: 'string' },
+    kind: 'block',
+    properties: {
+      url: { type: 'string' },
+      label: { type: 'string' },
+    }
   }
 };
 ```
@@ -192,7 +210,7 @@ const document_config = {
   // Custom functions to insert new "blank" nodes and setting the selection
   // depending on the intended behavior.
   inserters: {
-    text: function(tr, content = ['', []], layout = 1) {
+    text: function(tr, content = {text: '', annotations: []}, layout = 1) {
       const new_text = {
    			id: nanoid(),
    			type: 'text',
@@ -276,7 +294,7 @@ Selections are at the heart of Svedit. There are just three types of selections:
   }
   ```
 
-You can access the current selection through `doc.selection` anytime. And you can programmatically set the selection using `doc.set_selection(new_selection)`.
+You can access the current selection through `doc.selection` anytime. And you can programmatically set the selection using `doc.selection = new_selection`.
 
 ## Rendering
 
@@ -320,7 +338,7 @@ a simplified version of the markup of `<NodeCursorTrap>` and why it is implement
 Further things to consider:
 
 - If you make a sub-tree `contenteditable="false"`, be aware that you can't create a `contenteditable="true"` segment somewhere inside it. Svedit can only work reliably when there's one contenteditable="true" at root (it's set by `<Svedit`>)
-- `<AnnotatedString>` and `<CustomProperty>` must not be wrapped in `contenteditable="false"` to work properly.
+- `<AnnotatedTextProperty>` and `<CustomProperty>` must not be wrapped in `contenteditable="false"` to work properly.
 - Never apply `position: relative` to the direct parent of `<AnnotatedTextProperty>`, it will cause a [weird Safari bug](https://bsky.app/profile/michaelaufreiter.com/post/3lxvdqyxc622s) to destroy the DOM.
 - Never use an `<a>` tag inside a `contenteditable="true"` element, as it will cause unexpected behavior. Make it a `<div>` while editing, and an `<a>` in read-only mode.
 

package/dist/{AnnotatedStringProperty.svelte → AnnotatedTextProperty.svelte}

@@ -1,12 +1,12 @@
 <script>
 	import { getContext } from 'svelte';
-	import { char_slice, get_char_length } from './util.js';
+	import { char_slice, get_char_length, snake_to_pascal } from './util.js';
 
-  /** @import { AnnotatedStringPropertyProps, Annotation, AnnotationFragment } from './types.d.ts'; */
+  /** @import { AnnotatedTextPropertyProps, Annotation, AnnotationFragment } from './types.d.ts'; */
 
 	const svedit = getContext('svedit');
 
- /** @type {AnnotatedStringPropertyProps} */
+ /** @type {AnnotatedTextPropertyProps} */
 	let {
 		path,
 		class: css_class,
@@ -20,32 +20,36 @@
 	/**
 	 * Converts text with annotations into renderable fragments for display.
 	 * @param {string} text - The plain text content
-	 * @param {Array<Annotation>} annotations - Array of annotations where each is [start_offset, end_offset, type, options?] (minimum 3 elements)
+	 * @param {Array<Annotation>} annotations - Array of annotations where each is {start_offset, end_offset, node_id}
 	 * @returns {Array<string|AnnotationFragment>} Array of fragments - strings for plain text, AnnotationFragment objects for annotated content
 	 */
-	function render_annotated_string(text, annotations) {
+	function get_fragments(text, annotations) {
 		let fragments = [];
 		let last_index = 0;
 
 		// Sort annotations by start_offset
-		const sorted_annotations = [...annotations].sort((a, b) => a[0] - b[0]);
+		const sorted_annotations = [...annotations].sort((a, b) => a.start_offset - b.start_offset);
 
-		for (let [index, annotation] of sorted_annotations.entries()) {
+		for (let [, annotation] of sorted_annotations.entries()) {
 			// Add text before the annotation using character-aware slicing
-			if (annotation[0] > last_index) {
-				fragments.push(char_slice(text, last_index, annotation[0]));
+			if (annotation.start_offset > last_index) {
+				fragments.push(char_slice(text, last_index, annotation.start_offset));
 			}
 
 			// Add the annotated string using character-aware slicing
-			const annotated_content = char_slice(text, annotation[0], annotation[1]);
+			const annotated_content = char_slice(text, annotation.start_offset, annotation.end_offset);
+			const node = svedit.doc.get(annotation.node_id);
+			if (!node) throw new Error(`Node not found for annotation ${annotation.node_id}`);
+
 			fragments.push({
-				type: annotation[2],
+			  node,
 				content: annotated_content,
-				annotation_index: index,
-				data: annotation[3]
+				// NOTE: We need to provide the original index here, because the source data
+				// is the address space.
+				annotation_index: annotations.indexOf(annotation),
 			});
 
-			last_index = annotation[1];
+			last_index = annotation.end_offset;
 		}
 
 		// Add any remaining text after the last annotation using character-aware slicing
@@ -56,15 +60,9 @@
 		return fragments;
 	}
 
-	let fragments = $derived(render_annotated_string(svedit.doc.get(path)[0], svedit.doc.get(path)[1]));
-	let plain_text = $derived(svedit.doc.get(path)[0]);
+	let fragments = $derived(get_fragments(svedit.doc.get(path).text, svedit.doc.get(path).annotations));
+	let plain_text = $derived(svedit.doc.get(path).text);
 
-	/**
-	 * @param {MouseEvent} e - The click event
-	 */
-	function handle_link_click(e) {
-		e.preventDefault();
-	}
 </script>
 
 {#key plain_text}
@@ -79,21 +77,10 @@
     placeholder={placeholder}
   >
     {#each fragments as fragment, index (index)}
-  		{#if typeof fragment === 'string'}<!--
-        -->{fragment}<!--
-      -->{:else if fragment.type === 'emphasis'}<!--
-        --><em>{fragment.content}</em><!--
-      -->{:else if fragment.type === 'strong'}<!--
-        --><strong>{fragment.content}</strong><!--
-      -->{:else if fragment.type === 'link'}<!--
-        --><a
-  				onclick={handle_link_click}
-  				style="anchor-name: --{path.join('-') + '-' + fragment.annotation_index};"
-  				href={fragment.data.href}
-  				target={fragment.data.target || '_self'}>{fragment.content}</a><!--
-      -->{:else}<!--
-        -->{fragment.content}<!--
-      -->{/if}
+  		{#if typeof fragment === 'string'}{fragment}{:else}
+        {@const AnnotationComponent = svedit.doc.config.node_components[snake_to_pascal(fragment.node.type)]}
+        <AnnotationComponent path={[...path, 'annotations', fragment.annotation_index, 'node_id']} content={fragment.content} />
+      {/if}
   	{/each}<!--
     --><br>
   </div>
@@ -118,12 +105,13 @@
 
   /* We can safely hide the <br> element when the placeholder is empty and focused. */
   /* No longer the cursor will be rendered after the placeholder when focused. */
+  /* ATTENTION: This hack has the side effect that in Safari Desktop the cursor sometimes disappears. */
   [placeholder].empty.focused br {
     display:none;
   }
 
-  .text.focused {
+  /*.text.focused {
     background: none;
-    outline: 1px dashed var(--editing-stroke-color);
-  }
+    outline: 1px solid var(--editing-stroke-color);
+  }*/
 </style>

package/dist/AnnotatedTextProperty.svelte.d.ts

@@ -0,0 +1,7 @@
+export default AnnotatedTextProperty;
+type AnnotatedTextProperty = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<AnnotatedTextPropertyProps>): void;
+};
+declare const AnnotatedTextProperty: import("svelte").Component<import("./types.d.ts").AnnotatedTextPropertyProps, {}, "">;
+//# sourceMappingURL=AnnotatedTextProperty.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotatedTextProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AnnotatedTextProperty.svelte.js"],"names":[],"mappings":";;;;;AAyFA,2HAAoE"}

package/dist/Document.svelte.d.ts

@@ -8,6 +8,10 @@
  *   DocumentSchemaPrimitive,
  *   NodeProperty,
  *   NodeArrayProperty,
+ *   NodeKind,
+ *   NodeSchema,
+ *   TextNodeSchema,
+ *   NonTextNodeSchema,
  *   DocumentSchema,
  *   SerializedDocument
  * } from './types.d.ts';
@@ -16,13 +20,11 @@
  * Identity function — keeps schema at runtime & makes IDE infer types.
  * Similar to your define_schema pattern but for document schemas.
  *
- * @template {Record<string, Record<string, {type: DocumentSchemaPrimitive}>>} S
+ * @template {Record<string, NodeSchema>} S
  * @param {S} schema - The document schema to validate
  * @returns {S} The same schema, but with type information preserved
  */
-export function define_document_schema<S extends Record<string, Record<string, {
-    type: DocumentSchemaPrimitive;
-}>>>(schema: S): S;
+export function define_document_schema<S extends Record<string, NodeSchema>>(schema: S): S;
 /**
  * Check if a string represents a valid primitive type.
  * @param {string} type - The type string to check
@@ -53,8 +55,6 @@ export default class Document {
         selection?: Selection;
         config?: any;
     });
-    /** @type {Selection | undefined} */
-    selection: Selection | undefined;
     config: any;
     document_id: any;
     nodes: any;
@@ -63,9 +63,32 @@ export default class Document {
     can_undo: boolean;
     can_redo: boolean;
     selected_node: any;
+    layout_node: any;
+    available_annotation_types: any;
+    /**
+     * Sets the selection with validation
+     * @param {Selection | undefined} value - The new selection
+     * @throws {Error} Throws if the selection is invalid
+     */
+    set selection(value: Selection | undefined);
+    /**
+     * Gets the current selection
+     * @returns {Selection | undefined}
+     */
+    get selection(): Selection | undefined;
+    /**
+     * Validates that a selection is within bounds and refers to valid paths.
+     *
+     * @param {Selection} selection - The selection to validate
+     * @throws {Error} Throws if the selection is invalid
+     * @private
+     */
+    private _validate_selection;
     schema: DocumentSchema;
     generate_id(): any;
+    get_available_annotation_types(): any;
     get_selected_node(): any;
+    get_layout_node(): any;
     _apply_op(op: any): void;
     /**
      * Validate a node against the document schema.
@@ -104,8 +127,8 @@ export default class Document {
      * doc.get(['page_1', 'body', 3, 'list_items', 0]) // => { type: 'list_item', id: 'list_item_1', ... }
      *
      * @example
-     * // Get an annotated string property
-     * doc.get(['page_1', 'cover', 'title']) // => ['Hello world', []]
+     * // Get an annotated text property
+     * doc.get(['page_1', 'cover', 'title']) // => {text: 'Hello world', annotations: []}
      */
     get(path: DocumentPath | string): any;
     /**
@@ -139,12 +162,12 @@ export default class Document {
         [key: string]: any;
     };
     /**
-     * Determines the kind of a node ('text' for pure text nodes or 'node' for anything else)
-     * NOTE: currently we assume a 'content' property for pure text nodes
+     * Determines the kind of a node ('block' for structured blocks, 'text' for pure
+     * text nodes or 'annotation' for annotation nodes.
      * @param {any} node
-     * @returns {'text'|'node'}
+     * @returns {NodeKind}
      */
-    kind(node: any): "text" | "node";
+    kind(node: any): NodeKind;
     /**
      * Returns the annotation object that is currently "under the cursor".
      * NOTE: Annotations in Svedit are exclusive, so there can only be one active_annotation
@@ -155,8 +178,6 @@ export default class Document {
     active_annotation(annotation_type: string): Annotation | null;
     get_selected_plain_text(): string;
     get_selected_nodes(): any;
-    move_node_cursor(direction: any): void;
-    expand_node_selection(direction: any): void;
     select_parent(): void;
     get_selection_range(): {
         start: number;
@@ -169,15 +190,16 @@ export default class Document {
      * @returns {SerializedDocument} The serialized document array
      */
     to_json(): SerializedDocument;
-    property_type(type: any, property: any): "string" | "number" | "boolean" | "node" | "node_array" | "integer" | "datetime" | "string_array" | "number_array" | "boolean_array" | "integer_array" | "annotated_string";
+    property_type(type: any, property: any): "string" | "number" | "boolean" | "node" | "node_array" | "annotated_text" | "integer" | "datetime" | "string_array" | "number_array" | "boolean_array" | "integer_array";
     count_references(node_id: any): number;
     /**
      * @param {NodeId} node_id
      * @returns {NodeId[]}
      */
     get_referenced_nodes(node_id: NodeId): NodeId[];
+    #private;
 }
-import type { DocumentSchemaPrimitive } from './types.d.ts';
+import type { NodeSchema } from './types.d.ts';
 import type { PrimitiveType } from './types.d.ts';
 import type { NodeProperty } from './types.d.ts';
 import type { NodeArrayProperty } from './types.d.ts';
@@ -185,6 +207,7 @@ import type { DocumentSchema } from './types.d.ts';
 import type { Selection } from './types.d.ts';
 import Transaction from './Transaction.svelte.js';
 import type { DocumentPath } from './types.d.ts';
+import type { NodeKind } from './types.d.ts';
 import type { Annotation } from './types.d.ts';
 import type { SerializedDocument } from './types.d.ts';
 import type { NodeId } from './types.d.ts';

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

@@ -1 +1 @@
-{"version":3,"file":"Document.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Document.svelte.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;GAaG;AAEH;;;;;;;GAOG;AACH,uCAJ+E,CAAC,SAAlE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE;IAAC,IAAI,EAAE,uBAAuB,CAAA;CAAC,CAAC,CAAE,UACnE,CAAC,GACC,CAAC,CAIb;AAED;;;;GAIG;AACH,wCAHW,MAAM,GACJ,IAAI,IAAI,aAAa,CAQjC;AAED;;;;GAIG;AACH,2DAHW,YAAY,GAAG,iBAAiB,GAC9B,MAAM,GAAG,IAAI,CASzB;AAED;;;;GAIG;AACH,0DAHW,cAAc,QAexB;AAuGD;IAgBE;;;;;;OAMG;IACH,oBANW,cAAc,kBACd,kBAAkB,0BAE1B;QAA4B,SAAS,GAA7B,SAAS;QACK,MAAM,GAApB,GAAG;KACb,EAmBA;IAxCD,oCAAoC;IACpC,WADW,SAAS,GAAG,SAAS,CACX;IACrB,YAAkB;IAClB,iBAAuB;IACvB,WAAiB;IACjB,eAAqB;IACrB,sBAA2B;IAG3B,kBAA6C;IAC7C,kBAAkE;IAGnE,mBAAmD;IAahD,uBAAoB;IAgBtB,mBAMC;IAGF,yBAkBC;IAGA,yBAWC;IAED;;;;OAIG;IACH,oBAHW,GAAG,QAKb;IAED;;;;OAIG;IACH,UAFa,WAAW,CASvB;IAED;;;;OAIG;IACH,mBAFW,WAAW,QAkBrB;IAED,aAWC;IAED,aAaC;IAED;;;;;;;;;;;;;;;;;;;OAmBG;IACH,UAlBW,YAAY,GAAC,MAAM,GACjB,GAAG,CAuDf;IAED;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,cAHW,YAAY,GACV;QAAC,IAAI,EAAE,UAAU,GAAC,MAAM,CAAC;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAC,CAuBzD;IAED;;;;;OAKG;IACH,WAHW,GAAG,GACD,MAAM,GAAC,MAAM,CAQzB;IAED;;;;;;OAMG;IACH,mCAHW,MAAM,GACJ,UAAU,GAAC,IAAI,CAoB3B;IAGD,kCAOC;IAED,0BAOC;IAED,uCAsBC;IAED,4CASC;IAED,sBAmCC;IAED;;;;MAaC;IAKD,8BA4BC;IAED;;;OAGG;IACH,WAFa,kBAAkB,CAI9B;IAID,qNAWC;IAGD,uCAkBC;IAGD;;;OAGG;IACH,8BAHW,MAAM,GACJ,MAAM,EAAE,CASpB;CACF;6CA5pBS,cAAc;mCAAd,cAAc;kCAAd,cAAc;uCAAd,cAAc;oCAAd,cAAc;+BAAd,cAAc;wBAfA,yBAAyB;kCAevC,cAAc;gCAAd,cAAc;wCAAd,cAAc;4BAAd,cAAc"}
+{"version":3,"file":"Document.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Document.svelte.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;;;;;GAOG;AACH,uCAJ0C,CAAC,SAA7B,MAAM,CAAC,MAAM,EAAE,UAAU,CAAE,UAC9B,CAAC,GACC,CAAC,CAIb;AAED;;;;GAIG;AACH,wCAHW,MAAM,GACJ,IAAI,IAAI,aAAa,CAQjC;AAED;;;;GAIG;AACH,2DAHW,YAAY,GAAG,iBAAiB,GAC9B,MAAM,GAAG,IAAI,CASzB;AAED;;;;GAIG;AACH,0DAHW,cAAc,QAexB;AAuGD;IAgGE;;;;;;OAMG;IACH,oBANW,cAAc,kBACd,kBAAkB,0BAE1B;QAA4B,SAAS,GAA7B,SAAS;QACK,MAAM,GAApB,GAAG;KACb,EAqBA;IAxHD,YAAkB;IAClB,iBAAuB;IACvB,WAAiB;IACjB,eAAqB;IACrB,sBAA2B;IAG3B,kBAA6C;IAC7C,kBAAkE;IAGnE,mBAAmD;IACnD,iBAA+C;IAC/C,gCAA6E;IAU5E;;;;OAIG;IACH,qBAHW,SAAS,GAAG,SAAS,EAQ/B;IAlBD;;;OAGG;IACH,iBAFa,SAAS,GAAG,SAAS,CAIjC;IAcD;;;;;;OAMG;IACH,4BAiDC;IAaC,uBAAoB;IAkBtB,mBAMC;IAED,sCAKA;IAGD,yBAkBC;IAID,uBAoBC;IAGA,yBAWC;IAED;;;;OAIG;IACH,oBAHW,GAAG,QAKb;IAED;;;;OAIG;IACH,UAFa,WAAW,CASvB;IAED;;;;OAIG;IACH,mBAFW,WAAW,QAkBrB;IAED,aAWC;IAED,aAaC;IAED;;;;;;;;;;;;;;;;;;;OAmBG;IACH,UAlBW,YAAY,GAAC,MAAM,GACjB,GAAG,CAoFf;IAED;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,cAHW,YAAY,GACV;QAAC,IAAI,EAAE,UAAU,GAAC,MAAM,CAAC;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAC,CAuBzD;IAED;;;;;OAKG;IACH,WAHW,GAAG,GACD,QAAQ,CAIpB;IAED;;;;;;OAMG;IACH,mCAHW,MAAM,GACJ,UAAU,GAAC,IAAI,CAqB3B;IAGD,kCAOC;IAED,0BAOC;IAED,sBAmCC;IAED;;;;MAaC;IAKD,8BAgCC;IAED;;;OAGG;IACH,WAFa,kBAAkB,CAI9B;IAID,mNAWC;IAGD,uCAkBC;IAGD;;;OAGG;IACH,8BAHW,MAAM,GACJ,MAAM,EAAE,CASpB;;CACF;gCAxwBS,cAAc;mCAAd,cAAc;kCAAd,cAAc;uCAAd,cAAc;oCAAd,cAAc;+BAAd,cAAc;wBAnBA,yBAAyB;kCAmBvC,cAAc;8BAAd,cAAc;gCAAd,cAAc;wCAAd,cAAc;4BAAd,cAAc"}