svedit 0.1.0 → 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

@@ -261,7 +261,10 @@
     const is_collapsed = selection?.anchor_offset === selection?.focus_offset;
 
     // console.log('onkeydown', e.key);
-    if (e.key === 'ArrowRight' && e.altKey && e.ctrlKey && doc.selected_node) {
+    if (
+      (e.key === 'ArrowRight' && e.altKey && e.ctrlKey && doc.selected_node) ||
+      (e.key === 'ArrowRight' && e.altKey && e.ctrlKey && e.shiftKey && doc.selected_node)
+    ) {
       const node = doc.selected_node;
       const layout_count = doc.config.node_layouts[node.type];
 
@@ -272,7 +275,10 @@
         tr.set([doc.selected_node?.id, 'layout'], next_layout);
         doc.apply(tr);
       }
-    } else if (e.key === 'ArrowLeft' && e.altKey && e.ctrlKey && doc.selected_node) {
+    } else if (
+      (e.key === 'ArrowLeft' && e.altKey && e.ctrlKey && doc.selected_node) ||
+      (e.key === 'ArrowLeft' && e.altKey && e.ctrlKey && e.shiftKey && doc.selected_node)
+    ) {
       const node = doc.selected_node;
       const layout_count = doc.config.node_layouts[node.type];
       if (layout_count > 1 && node?.layout) {
@@ -282,7 +288,10 @@
         doc.apply(tr);
         console.log('layout / count / prev_layout', node.layout, layout_count, prev_layout);
       }
-    } else if (e.key === 'ArrowDown' && e.altKey && e.ctrlKey && doc.selected_node) {
+    } else if (
+      (e.key === 'ArrowDown' && e.altKey && e.ctrlKey && doc.selected_node) ||
+      (e.key === 'ArrowDown' && e.altKey && e.ctrlKey && e.shiftKey && doc.selected_node  )
+    ) {
       const node = doc.selected_node;
 
       if (doc.selection.type !== 'node') {
@@ -301,9 +310,10 @@
       doc.config.inserters[next_type](tr);
       tr.set_selection(old_selection);
       doc.apply(tr);
-
-
-    } else if (e.key === 'ArrowUp' && e.altKey && e.ctrlKey && doc.selected_node) {
+    } else if (
+      (e.key === 'ArrowUp' && e.altKey && e.ctrlKey && doc.selected_node) ||
+      (e.key === 'ArrowUp' && e.altKey && e.ctrlKey && e.shiftKey && doc.selected_node)
+    ) {
       const node = doc.selected_node;
 
       if (doc.selection.type !== 'node') {
@@ -340,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();
@@ -483,6 +493,8 @@
 
     let focus_root_path = focus_root.dataset.path.split('.');
     let anchor_root_path = anchor_root.dataset.path.split('.');
+    let focus_node_depth = focus_root_path.length;
+    let anchor_node_depth = anchor_root_path.length;
 
     // HACK: this works only for one level nesting - should be done recursively to work generally
     if (focus_root_path.length > anchor_root_path.length) {
@@ -512,6 +524,27 @@
       focus_offset += 1;
     }
 
+    // EDGE CASE: Exclude first node when anchor_node is an afer-node-cursor-trap
+    // in a non-collapsed forward selection
+    if (
+      anchor_node.parentElement?.dataset.type === 'after-node-cursor-trap' &&
+      !is_backwards &&
+      anchor_offset !== focus_offset
+    ) {
+      anchor_offset += 1;
+    }
+    // EDGE CASE: Exclude first node when focus_node is an afer-node-cursor-trap
+    // in a non-collapsed backward selection
+    else if (
+      focus_node.parentElement?.dataset.type === 'after-node-cursor-trap' &&
+      is_backwards &&
+      anchor_offset !== focus_offset &&
+      // 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;
+    }
+
     return {
       type: 'node',
       path: anchor_root_path.slice(0, -1),
@@ -520,7 +553,6 @@
     };
   }
 
-
   /**
    * Extracts a PropertySelection from the current DOM selection.
    *
@@ -721,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);
@@ -930,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":";;;;;;;AA64BA;;OAAqD;iCAj4BgE,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.0",
+	"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

@@ -261,7 +261,10 @@
     const is_collapsed = selection?.anchor_offset === selection?.focus_offset;
 
     // console.log('onkeydown', e.key);
-    if (e.key === 'ArrowRight' && e.altKey && e.ctrlKey && doc.selected_node) {
+    if (
+      (e.key === 'ArrowRight' && e.altKey && e.ctrlKey && doc.selected_node) ||
+      (e.key === 'ArrowRight' && e.altKey && e.ctrlKey && e.shiftKey && doc.selected_node)
+    ) {
       const node = doc.selected_node;
       const layout_count = doc.config.node_layouts[node.type];
 
@@ -272,7 +275,10 @@
         tr.set([doc.selected_node?.id, 'layout'], next_layout);
         doc.apply(tr);
       }
-    } else if (e.key === 'ArrowLeft' && e.altKey && e.ctrlKey && doc.selected_node) {
+    } else if (
+      (e.key === 'ArrowLeft' && e.altKey && e.ctrlKey && doc.selected_node) ||
+      (e.key === 'ArrowLeft' && e.altKey && e.ctrlKey && e.shiftKey && doc.selected_node)
+    ) {
       const node = doc.selected_node;
       const layout_count = doc.config.node_layouts[node.type];
       if (layout_count > 1 && node?.layout) {
@@ -282,7 +288,10 @@
         doc.apply(tr);
         console.log('layout / count / prev_layout', node.layout, layout_count, prev_layout);
       }
-    } else if (e.key === 'ArrowDown' && e.altKey && e.ctrlKey && doc.selected_node) {
+    } else if (
+      (e.key === 'ArrowDown' && e.altKey && e.ctrlKey && doc.selected_node) ||
+      (e.key === 'ArrowDown' && e.altKey && e.ctrlKey && e.shiftKey && doc.selected_node  )
+    ) {
       const node = doc.selected_node;
 
       if (doc.selection.type !== 'node') {
@@ -301,9 +310,10 @@
       doc.config.inserters[next_type](tr);
       tr.set_selection(old_selection);
       doc.apply(tr);
-
-
-    } else if (e.key === 'ArrowUp' && e.altKey && e.ctrlKey && doc.selected_node) {
+    } else if (
+      (e.key === 'ArrowUp' && e.altKey && e.ctrlKey && doc.selected_node) ||
+      (e.key === 'ArrowUp' && e.altKey && e.ctrlKey && e.shiftKey && doc.selected_node)
+    ) {
       const node = doc.selected_node;
 
       if (doc.selection.type !== 'node') {
@@ -340,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();
@@ -483,6 +493,8 @@
 
     let focus_root_path = focus_root.dataset.path.split('.');
     let anchor_root_path = anchor_root.dataset.path.split('.');
+    let focus_node_depth = focus_root_path.length;
+    let anchor_node_depth = anchor_root_path.length;
 
     // HACK: this works only for one level nesting - should be done recursively to work generally
     if (focus_root_path.length > anchor_root_path.length) {
@@ -512,6 +524,27 @@
       focus_offset += 1;
     }
 
+    // EDGE CASE: Exclude first node when anchor_node is an afer-node-cursor-trap
+    // in a non-collapsed forward selection
+    if (
+      anchor_node.parentElement?.dataset.type === 'after-node-cursor-trap' &&
+      !is_backwards &&
+      anchor_offset !== focus_offset
+    ) {
+      anchor_offset += 1;
+    }
+    // EDGE CASE: Exclude first node when focus_node is an afer-node-cursor-trap
+    // in a non-collapsed backward selection
+    else if (
+      focus_node.parentElement?.dataset.type === 'after-node-cursor-trap' &&
+      is_backwards &&
+      anchor_offset !== focus_offset &&
+      // 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;
+    }
+
     return {
       type: 'node',
       path: anchor_root_path.slice(0, -1),
@@ -520,7 +553,6 @@
     };
   }
 
-
   /**
    * Extracts a PropertySelection from the current DOM selection.
    *
@@ -721,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);
@@ -930,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>