svedit 0.1.1 → 0.3.0

package/src/lib/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/src/lib/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/src/lib/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/src/lib/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.