svedit 0.1.1 → 0.3.0

package/README.md

@@ -286,6 +286,44 @@ Now you can start making your Svelte pages in-place editable by wrapping your de
 <Svedit {doc} path={[doc.document_id]} editable={true} />
 ```
 
+## Mastering contenteditable
+
+Svedit relies on the contenteditable attribute to make elements editable. The below example shows you
+a simplified version of the markup of `<NodeCursorTrap>` and why it is implemented the way it is.
+
+```html
+<div contenteditable="true">
+  <div class="some-wrapper">
+    <!--
+      Putting a <br> tag into a div gives you a single addressable cursor position.
+
+      Adding a &ZeroWidthSpace; (or any character) here will lead to 2 cursor
+      positions (one before, and one after the character)
+
+      Svedit uses this behavior for node-cursor-traps, and when an
+      <AnnotatedTextProperty> is empty.
+    -->
+    <div class="cursor-trap"><br></div>
+    <!--
+      If you create a contenteditable="false" island, there needs to be some content in it,
+      otherwise it will create two additional cursor positions. One before, and another one
+      after the island.
+
+      The Svedit demo uses this technique in `<NodeCursorTrap>` to create a node-cursor
+      visualization, that doesn't mess with the contenteditable cursor positions.
+    -->
+    <div contenteditable="false" class="node-cursor">&ZeroWidthSpace;</div>
+  </div>
+</div>
+```
+
+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.
+- 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.
+
 ## Full API docs?
 
 Not yet. Please just [read the code](./src) for now. It's only a couple of files with less than 3000 LOC in total. The files in `routes` are considered example code (copy them and adapt them to your needs), while files in `lib` are considered library code. Read them to understand the API and what's happening behind the scences.

package/dist/AnnotatedStringProperty.svelte

@@ -1,7 +1,8 @@
 <script>
 	import { getContext } from 'svelte';
+	import { char_slice, get_char_length } from './util.js';
 
-  /** @import { AnnotatedStringPropertyProps, AnnotationFragment } from './types.d.ts'; */
+  /** @import { AnnotatedStringPropertyProps, Annotation, AnnotationFragment } from './types.d.ts'; */
 
 	const svedit = getContext('svedit');
 
@@ -19,7 +20,7 @@
 	/**
 	 * Converts text with annotations into renderable fragments for display.
 	 * @param {string} text - The plain text content
-	 * @param {Array<[number, number, string, ...any]>} 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, type, options?] (minimum 3 elements)
 	 * @returns {Array<string|AnnotationFragment>} Array of fragments - strings for plain text, AnnotationFragment objects for annotated content
 	 */
 	function render_annotated_string(text, annotations) {
@@ -27,16 +28,16 @@
 		let last_index = 0;
 
 		// Sort annotations by start_offset
-		const sorted_annotations = $state.snapshot(annotations).sort((a, b) => a[0] - b[0]);
+		const sorted_annotations = [...annotations].sort((a, b) => a[0] - b[0]);
 
 		for (let [index, annotation] of sorted_annotations.entries()) {
-			// Add text before the annotation
+			// Add text before the annotation using character-aware slicing
 			if (annotation[0] > last_index) {
-				fragments.push(text.slice(last_index, annotation[0]));
+				fragments.push(char_slice(text, last_index, annotation[0]));
 			}
 
-			// Add the annotated string
-			const annotated_content = text.slice(annotation[0], annotation[1]);
+			// Add the annotated string using character-aware slicing
+			const annotated_content = char_slice(text, annotation[0], annotation[1]);
 			fragments.push({
 				type: annotation[2],
 				content: annotated_content,
@@ -47,9 +48,9 @@
 			last_index = annotation[1];
 		}
 
-		// Add any remaining text after the last annotation
-		if (last_index < text.length) {
-			fragments.push(text.slice(last_index));
+		// Add any remaining text after the last annotation using character-aware slicing
+		if (last_index < get_char_length(text)) {
+			fragments.push(char_slice(text, last_index));
 		}
 
 		return fragments;
@@ -66,35 +67,37 @@
 	}
 </script>
 
-<!-- ATTENTION: The comments are needed to prevent unwanted text nodes with whitespace. -->
-<div
- 	data-type="text"
- 	data-path={path.join('.')}
- 	style="anchor-name: --{path.join('-')};"
- 	class="text svedit-selectable {css_class}"
- 	class:empty={plain_text.length === 0}
-  class:focused={is_focused}
-  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}
-	{/each}<!--
-  --><br>
-</div>
+{#key plain_text}
+  <!-- ATTENTION: The comments are needed to prevent unwanted text nodes with whitespace. -->
+  <div
+   	data-type="text"
+   	data-path={path.join('.')}
+   	style="anchor-name: --{path.join('-')};"
+   	class="text svedit-selectable {css_class}"
+   	class:empty={get_char_length(plain_text) === 0 && !(svedit.is_composing && is_focused)}
+    class:focused={is_focused}
+    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}
+  	{/each}<!--
+    --><br>
+  </div>
+{/key}
 
 <style>
   .text {

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

@@ -1 +1 @@
-{"version":3,"file":"AnnotatedStringProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AnnotatedStringProperty.svelte.js"],"names":[],"mappings":";;;;;AAoFA,+HAAsE"}
+{"version":3,"file":"AnnotatedStringProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AnnotatedStringProperty.svelte.js"],"names":[],"mappings":";;;;;AAwFA,+HAAsE"}

package/dist/CustomProperty.svelte

@@ -1,6 +1,10 @@
 <script>
+  import { getContext } from 'svelte';
+
   /** @import { CustomPropertyProps } from './types.d.ts'; */
 
+  const svedit = getContext('svedit');
+
   /** @type {CustomPropertyProps} */
   let {
     path,
@@ -9,16 +13,23 @@
   } = $props();
 </script>
 
-<!-- NOTE: It's super crucial that there is no extra whitespace, to not introduce additional cursor positions in contenteditable -->
-<div
-  class="property {css_class}"
-  data-type="property"
-  data-path={path.join('.')}
-  style="anchor-name: --{path.join('-')};"
->
-  <div class="cursor-trap svedit-selectable"><br/></div>
-  <div class="property-content" contenteditable="false">{@render children()}</div>
-</div>
+{#if svedit.editable}
+  <!-- NOTE: It's super crucial that there is no extra whitespace, to not introduce additional cursor positions in contenteditable -->
+  <div
+    class="property {css_class}"
+    data-type="property"
+    data-path={path.join('.')}
+    style="anchor-name: --{path.join('-')};"
+  >
+    <div class="cursor-trap">
+      <div class="svedit-selectable"><br/></div>
+    </div>
+
+    <div class="property-content" contenteditable="false">{@render children()}</div>
+  </div>
+{:else}
+  {@render children()}
+{/if}
 
 <style>
   .property {

package/dist/CustomProperty.svelte.d.ts

@@ -3,6 +3,5 @@ type CustomProperty = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<CustomPropertyProps>): void;
 };
-declare const CustomProperty: import("svelte").Component<CustomPropertyProps, {}, "">;
-import type { CustomPropertyProps } from './types.d.ts';
+declare const CustomProperty: import("svelte").Component<import("./types.d.ts").CustomPropertyProps, {}, "">;
 //# sourceMappingURL=CustomProperty.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CustomProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CustomProperty.svelte.js"],"names":[],"mappings":";;;;;AAwBA,sFAA6D;yCApBlB,cAAc"}
+{"version":3,"file":"CustomProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CustomProperty.svelte.js"],"names":[],"mappings":";;;;;AAqCA,6GAA6D"}

package/dist/Document.svelte.d.ts

@@ -153,7 +153,7 @@ export default class Document {
      * @returns {Annotation|null}
      */
     active_annotation(annotation_type: string): Annotation | null;
-    get_selected_plain_text(): any;
+    get_selected_plain_text(): string;
     get_selected_nodes(): any;
     move_node_cursor(direction: any): void;
     expand_node_selection(direction: any): void;

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":"AAEA;;;;;;;;;;;;;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,yBAgBC;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,+BAOC;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;6CA1pBS,cAAc;mCAAd,cAAc;kCAAd,cAAc;uCAAd,cAAc;oCAAd,cAAc;+BAAd,cAAc;wBAdA,yBAAyB;kCAcvC,cAAc;gCAAd,cAAc;wCAAd,cAAc;4BAAd,cAAc"}
+{"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"}

package/dist/Document.svelte.js

@@ -1,4 +1,5 @@
 import Transaction from './Transaction.svelte.js';
+import { char_slice } from './util.js';
 
 /**
  * @import {
@@ -239,7 +240,9 @@ export default class Document {
    		return node_id ? this.get(node_id) : null;
 		} else {
 		  // we are assuming we are either in a text or property (=custom) selection
-			const owner_node = this.get(this.selection.path.slice(0, -1));
+			const node_id = this.selection?.path?.slice(0, -1);
+			if (!node_id) return null;
+			const owner_node = this.get(node_id);
 			return owner_node;
 		}
 	}
@@ -489,7 +492,7 @@ export default class Document {
     const start =   Math.min(this.selection.anchor_offset, this.selection.focus_offset);
     const end = Math.max(this.selection.anchor_offset, this.selection.focus_offset);
     const annotated_string = this.get(this.selection.path);
-    return annotated_string[0].slice(start, end);
+    return char_slice(annotated_string[0], start, end);
   }
 
   get_selected_nodes() {

package/dist/Node.svelte

@@ -18,21 +18,25 @@
   let is_first_node_array_child = $derived(is_inside_node_array && parseInt(String(path.at(-1)), 10) === 0);
 </script>
 
-<div
-  class="node"
-  data-node-id={node.id}
-  data-path={path.join('.')}
-  data-type="node"
-  style="anchor-name: --{path.join('-')};"
->
-  {#if is_first_node_array_child}
-    <NodeCursorTrap {path} type="position-zero-cursor-trap" />
-  {/if}
+{#if svedit.editable}
+  <div
+    class="node"
+    data-node-id={node.id}
+    data-path={path.join('.')}
+    data-type="node"
+    style="anchor-name: --{path.join('-')};"
+  >
+    {#if is_first_node_array_child}
+      <NodeCursorTrap {path} type="position-zero-cursor-trap" />
+    {/if}
+    {@render children()}
+    {#if is_inside_node_array}
+      <NodeCursorTrap {path} type="after-node-cursor-trap" />
+    {/if}
+  </div>
+{:else}
   {@render children()}
-  {#if is_inside_node_array}
-    <NodeCursorTrap {path} type="after-node-cursor-trap" />
-  {/if}
-</div>
+{/if}
 
 <style>
   div {

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

@@ -1 +1 @@
-{"version":3,"file":"Node.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Node.svelte.js"],"names":[],"mappings":";;;;;AAuCA,yFAAmD"}
+{"version":3,"file":"Node.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Node.svelte.js"],"names":[],"mappings":";;;;;AA2CA,yFAAmD"}

package/dist/NodeArrayProperty.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <div class={css_class} data-type="node_array" data-path={path.join('.')}>
-  {#if nodes.length === 0}
+  {#if nodes.length === 0 && svedit.editable}
     <!--
     Experimental: We'll let .empty-node-array act like a node, so the existing
     code paths for selection mapping will work as expected.