svedit 0.1.1 → 0.2.0

package/README.md

@@ -286,6 +286,42 @@ 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.
+
 ## 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/CustomProperty.svelte

@@ -16,7 +16,10 @@
   data-path={path.join('.')}
   style="anchor-name: --{path.join('-')};"
 >
-  <div class="cursor-trap svedit-selectable"><br/></div>
+  <div class="cursor-trap">
+    <div class="svedit-selectable"><br/></div>
+  </div>
+
   <div class="property-content" contenteditable="false">{@render children()}</div>
 </div>
 

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":";;;;;AA2BA,sFAA6D;yCAvBlB,cAAc"}

package/dist/Svedit.svelte

@@ -350,7 +350,7 @@
       doc.redo();
       e.preventDefault();
       e.stopPropagation();
-    } else if (e.key === 'Enter' && (e.shiftKey)) {
+    } else if (e.key === 'Enter' && (e.altKey)) {
       doc.apply(doc.tr.insert_text('\n'));
       e.preventDefault();
       e.stopPropagation();
@@ -524,23 +524,23 @@
       focus_offset += 1;
     }
 
-    // Exclude first node when anchor_node[data-type="after-node-cursor-trap"]
+    // EDGE CASE: Exclude first node when anchor_node is an afer-node-cursor-trap
     // in a non-collapsed forward selection
     if (
-      anchor_node.dataset.type === 'after-node-cursor-trap' &&
+      anchor_node.parentElement?.dataset.type === 'after-node-cursor-trap' &&
       !is_backwards &&
       anchor_offset !== focus_offset
     ) {
       anchor_offset += 1;
     }
-    // Exclude first node when focus_node[data-type="after-node-cursor-trap"]
+    // EDGE CASE: Exclude first node when focus_node is an afer-node-cursor-trap
     // in a non-collapsed backward selection
     else if (
-      focus_node.dataset.type === 'after-node-cursor-trap' &&
+      focus_node.parentElement?.dataset.type === 'after-node-cursor-trap' &&
       is_backwards &&
       anchor_offset !== focus_offset &&
-      // EDGE CASE: only apply this rule if focus node and anchor node are in the same container
-      focus_node_depth === anchor_node_depth
+      // EDGE CASE: Only do correction when drag started from a deeper or equally deep anchor node
+      anchor_node_depth >= focus_node_depth
     ) {
       focus_offset += 1;
     }
@@ -553,7 +553,6 @@
     };
   }
 
-
   /**
    * Extracts a PropertySelection from the current DOM selection.
    *
@@ -754,13 +753,13 @@
     const selection = doc.selection;
     // The element that holds the property
     const el = canvas_ref.querySelector(`[data-path="${selection.path.join('.')}"][data-type="property"]`);
-    const cursor_trap = el.querySelector('.cursor-trap');
+    const cursor_trap_selectable = el.querySelector('.svedit-selectable');
 
     const range = window.document.createRange();
     const dom_selection = window.getSelection();
 
     // Select the entire cursor trap element contents and collapse to start
-    range.selectNodeContents(cursor_trap);
+    range.selectNodeContents(cursor_trap_selectable);
     range.collapse(true); // Collapse to start position
     dom_selection.removeAllRanges();
     dom_selection.addRange(range);
@@ -963,7 +962,9 @@
 		background: var(--editing-fill-color);
 	}
 
-	.svedit-canvas.hide-selection :global(::selection) {
-    background: transparent;
+	@media not (pointer: coarse) {
+    .svedit-canvas.hide-selection :global(::selection) {
+      background: transparent;
+    }
   }
 </style>

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":";;;;;;;AA86BA;;OAAqD;iCAl6BgE,cAAc"}
+{"version":3,"file":"Svedit.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Svedit.svelte.js"],"names":[],"mappings":";;;;;;;AA66BA;;OAAqD;iCAj6BgE,cAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svedit",
-	"version": "0.1.1",
+	"version": "0.2.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/CustomProperty.svelte

@@ -16,7 +16,10 @@
   data-path={path.join('.')}
   style="anchor-name: --{path.join('-')};"
 >
-  <div class="cursor-trap svedit-selectable"><br/></div>
+  <div class="cursor-trap">
+    <div class="svedit-selectable"><br/></div>
+  </div>
+
   <div class="property-content" contenteditable="false">{@render children()}</div>
 </div>
 

package/src/lib/Svedit.svelte

@@ -350,7 +350,7 @@
       doc.redo();
       e.preventDefault();
       e.stopPropagation();
-    } else if (e.key === 'Enter' && (e.shiftKey)) {
+    } else if (e.key === 'Enter' && (e.altKey)) {
       doc.apply(doc.tr.insert_text('\n'));
       e.preventDefault();
       e.stopPropagation();
@@ -524,23 +524,23 @@
       focus_offset += 1;
     }
 
-    // Exclude first node when anchor_node[data-type="after-node-cursor-trap"]
+    // EDGE CASE: Exclude first node when anchor_node is an afer-node-cursor-trap
     // in a non-collapsed forward selection
     if (
-      anchor_node.dataset.type === 'after-node-cursor-trap' &&
+      anchor_node.parentElement?.dataset.type === 'after-node-cursor-trap' &&
       !is_backwards &&
       anchor_offset !== focus_offset
     ) {
       anchor_offset += 1;
     }
-    // Exclude first node when focus_node[data-type="after-node-cursor-trap"]
+    // EDGE CASE: Exclude first node when focus_node is an afer-node-cursor-trap
     // in a non-collapsed backward selection
     else if (
-      focus_node.dataset.type === 'after-node-cursor-trap' &&
+      focus_node.parentElement?.dataset.type === 'after-node-cursor-trap' &&
       is_backwards &&
       anchor_offset !== focus_offset &&
-      // EDGE CASE: only apply this rule if focus node and anchor node are in the same container
-      focus_node_depth === anchor_node_depth
+      // EDGE CASE: Only do correction when drag started from a deeper or equally deep anchor node
+      anchor_node_depth >= focus_node_depth
     ) {
       focus_offset += 1;
     }
@@ -553,7 +553,6 @@
     };
   }
 
-
   /**
    * Extracts a PropertySelection from the current DOM selection.
    *
@@ -754,13 +753,13 @@
     const selection = doc.selection;
     // The element that holds the property
     const el = canvas_ref.querySelector(`[data-path="${selection.path.join('.')}"][data-type="property"]`);
-    const cursor_trap = el.querySelector('.cursor-trap');
+    const cursor_trap_selectable = el.querySelector('.svedit-selectable');
 
     const range = window.document.createRange();
     const dom_selection = window.getSelection();
 
     // Select the entire cursor trap element contents and collapse to start
-    range.selectNodeContents(cursor_trap);
+    range.selectNodeContents(cursor_trap_selectable);
     range.collapse(true); // Collapse to start position
     dom_selection.removeAllRanges();
     dom_selection.addRange(range);
@@ -963,7 +962,9 @@
 		background: var(--editing-fill-color);
 	}
 
-	.svedit-canvas.hide-selection :global(::selection) {
-    background: transparent;
+	@media not (pointer: coarse) {
+    .svedit-canvas.hide-selection :global(::selection) {
+      background: transparent;
+    }
   }
 </style>