Update link annotations; open links with anchor popover (#13)

Author: johannesmutter

src/lib/EntrySession.svelte.js

@@ -33,8 +33,7 @@ export default class EntrySession {
   get_selected_block_path() {
     let sel = this.selection;
     if (sel?.type === 'container') {
-      let start = Math.min(this.selection.anchor_offset, this.selection.focus_offset);
-      let end = Math.max(this.selection.anchor_offset, this.selection.focus_offset);
+      const { start, end } = this.get_selection_range();
       if (start + 1 === end) {
         return [...sel.path, start];
       }
@@ -88,10 +87,7 @@ export default class EntrySession {
   active_annotation(annotation_type) {
     if (this.selection?.type !== 'text') return null;
 
-    const [start, end] = [
-      Math.min(this.selection.anchor_offset, this.selection.focus_offset),
-      Math.max(this.selection.anchor_offset, this.selection.focus_offset)
-    ];
+    const { start, end } = this.get_selection_range();
     const annotated_text = this.get(this.selection.path);
     const annotations = annotated_text[1];
 
@@ -132,10 +128,7 @@ export default class EntrySession {
     if (this.selection?.type !== 'container') return;
     const container = this.get(this.selection.path); // container is an array of blocks
 
-    const [start, end] = [
-      Math.min(this.selection.anchor_offset, this.selection.focus_offset),
-      Math.max(this.selection.anchor_offset, this.selection.focus_offset)
-    ];
+    const { start, end } = this.get_selection_range();
 
     if (this.selection.anchor_offset !== this.selection.focus_offset) {
       // If selection is not collapsed, collapse it to the right or the left
@@ -168,22 +161,67 @@ export default class EntrySession {
 
   annotate_text(annotation_type, annotation_data) {
     if (this.selection.type !== 'text') return;
-    // You can not annotate text if the selection is collapsed.
-    if (this.selection.focus_offset === this.selection.anchor_offset) return;
 
-    const [start, end] = [
-      Math.min(this.selection.anchor_offset, this.selection.focus_offset),
-      Math.max(this.selection.anchor_offset, this.selection.focus_offset)
-    ];
+    const { start, end } = this.get_selection_range();
+
     const annotated_text = structuredClone($state.snapshot(this.get(this.selection.path)));
     const annotations = annotated_text[1];
     const existing_annotations = this.active_annotation();
 
+
+    // Special annotation type handling should probably be done in a separate function.
+    // The goal is to keep the core logic simple and allow developer to extend and pick only what they need.
+    // It could also be abstracted to not check for type (e.g. "link") but for a special attribute 
+    // e.g. "zero-range-updatable" for annotations that are updatable without a range selection change.
+
+
+    // Special handling for links when there's no selection range
+    // Links should be updatable by just clicking on them without a range selection
+    if (annotation_type === 'link' && start === end && existing_annotations) {
+      
+      // Use findIndex for deep comparison of annotation properties (comparison of annotation properties rather than object reference via indexOf)
+      const index = annotations.findIndex(anno => 
+        anno[0] === existing_annotations[0] && 
+        anno[1] === existing_annotations[1] && 
+        anno[2] === existing_annotations[2]
+      );
+      // const index = annotations.indexOf(existing_annotations);
+
+      if (index !== -1) {
+        if (annotation_data.href === '') {
+          // Remove the annotation if the href is empty
+          annotations.splice(index, 1);
+        } else {
+          annotations[index] = [
+            existing_annotations[0],
+            existing_annotations[1],
+            'link',
+            { ...existing_annotations[3], ...annotation_data }
+          ];
+        }
+
+        this.set(this.selection.path, annotated_text);
+        return;
+      }
+    }
+
+    // Regular annotation handling
+    if (start === end) {
+      // For non-link annotations: You can not annotate text if the selection is collapsed.
+      return;
+    }
+
     if (existing_annotations) {
       // If there's an existing annotation of the same type, remove it
       if (existing_annotations[2] === annotation_type) {
-        const index = annotations.indexOf(existing_annotations);
-        annotations.splice(index, 1);
+        const index = annotations.findIndex(anno => 
+          anno[0] === existing_annotations[0] && 
+          anno[1] === existing_annotations[1] && 
+          anno[2] === existing_annotations[2]
+        );
+        if (index !== -1) {
+          annotations.splice(index, 1);
+        }
       } else {
         // If there's an annotation of a different type, don't add a new one
         return;
@@ -281,10 +319,7 @@ export default class EntrySession {
     if (this.selection.type !== 'text') return;
 
     const annotated_text = structuredClone($state.snapshot(this.get(this.selection.path)));
-    const [start, end] = [
-      Math.min(this.selection.anchor_offset, this.selection.focus_offset),
-      Math.max(this.selection.anchor_offset, this.selection.focus_offset)
-    ];
+    const { start, end } = this.get_selection_range();
 
     // Transform the plain text string.
     annotated_text[0] = annotated_text[0].slice(0, start) + replaced_text + annotated_text[0].slice(end);
@@ -426,10 +461,7 @@ export default class EntrySession {
 
     const path = this.selection.path;
     const container = [...this.get(path)];
-    const [start, end] = [
-      Math.min(this.selection.anchor_offset, this.selection.focus_offset),
-      Math.max(this.selection.anchor_offset, this.selection.focus_offset)
-    ];
+    const { start, end } = this.get_selection_range();
 
     const is_moving_up = direction === 'up';
     const offset = is_moving_up ? -1 : 1;
@@ -458,4 +490,17 @@ export default class EntrySession {
   move_down() {
     this.move('down');
   }
+
+  get_selection_range() {
+    if (!this.selection) return null;
+    
+    const start = Math.min(this.selection.anchor_offset, this.selection.focus_offset);
+    const end = Math.max(this.selection.anchor_offset, this.selection.focus_offset);
+    
+    return {
+      start,
+      end,
+      length: end - start
+    };
+  }
 }

src/lib/Svedit.svelte

@@ -1,5 +1,6 @@
 <script>
   import { setContext } from 'svelte';
+  import Icon from '$lib/Icon.svelte';
 
   let {
     entry_session,
@@ -12,6 +13,7 @@
   let is_mouse_down = $state(false);
   let container_selection_paths = $derived(get_container_selection_paths());
   let container_cursor_info = $derived(get_container_cursor_info());
+  let text_selection_info = $derived(get_text_selection_info());
 
   function get_container_selection_paths() {
     const paths = [];
@@ -54,6 +56,29 @@
     }
   }
 
+  function get_text_selection_info() {
+    const sel = entry_session.selection;
+    if (!sel || sel.type !== 'text') return null;
+
+    const active_annotation = entry_session.active_annotation();
+    if (active_annotation && active_annotation[2] === 'link') {
+      const annotated_text = entry_session.get(sel.path);
+      const annotation_index = annotated_text[1].indexOf(active_annotation);
+      return {
+        path: sel.path,
+        annotation: active_annotation,
+        annotation_index: annotation_index
+      };
+    }
+    return null;
+  }
+
+  function open_link() {
+    if (text_selection_info?.annotation?.[3]?.href) {
+      window.open(text_selection_info.annotation[3].href, '_blank');
+    }
+  }
+
   setContext("svedit", {
     get entry_session() {
       return entry_session;
@@ -658,6 +683,15 @@
         style="position-anchor: --{container_cursor_info.path.join('-')};"
       ></div>
     {/if}
+    
+    {#if text_selection_info}
+      <div
+        class="text-selection-overlay"
+        style="position-anchor: --{text_selection_info.path.join('-') + '-' + text_selection_info.annotation_index};"
+      >
+        <button onclick={open_link} class="small"><Icon name="external-link" /></button>
+      </div>
+    {/if}
   </div>
 </div>
 
@@ -725,4 +759,19 @@
   /* div.hide-selection :global(::selection) {
     background: transparent;
   } */
-</style>
+
+  .text-selection-overlay {
+    position: absolute;
+    top: anchor(top);
+    left: anchor(right);
+    pointer-events: auto;
+    transform: translateX(var(--s-1)) translateY(-12px);
+    z-index: 10;
+  }
+
+  .text-selection-overlay button {
+    color: var(--primary-text-color);
+    --icon-color: var(--primary-text-color);
+    box-shadow: var(--shadow-2);
+  }
+</style>

src/lib/Text.svelte

@@ -11,7 +11,7 @@
     // Sort annotations by start_offset
     const sorted_annotations = $state.snapshot(annotations).sort((a, b) => a[0] - b[0]);
 
-    for (let annotation of sorted_annotations) {
+    for (let [index, annotation] of sorted_annotations.entries()) {
       // Add text before the annotation
       if (annotation[0] > last_index) {
         fragments.push(text.slice(last_index, annotation[0]));
@@ -22,6 +22,7 @@
       fragments.push({
         type: annotation[2],
         content: annotated_content,
+        annotation_index: index,
         ...annotation[3]
       });
 
@@ -38,6 +39,7 @@
 
   let fragments = $derived(render_annotated_text(svedit.entry_session.get(path)[0], svedit.entry_session.get(path)[1]));
   let plain_text = $derived(svedit.entry_session.get(path)[0]);
+
 </script>
 
 
@@ -46,19 +48,20 @@
   contenteditable="true" 
   data-type="text" 
   data-path={path.join('.')}
+  style="anchor-name: --{path.join('-')};"
   class={css_class}
 ><!--
 --><!-- Zero-width space for empty text --><!--
 -->{#if plain_text.length === 0}&#8203;{/if}<!--
--->{#each fragments as fragment}<!--
+-->{#each fragments as fragment, 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 href={fragment.href}>{fragment.content}</a><!--
+    --><a onclick={(e)=> {e.preventDefault()}} style="anchor-name: --{path.join('-') + '-' + fragment.annotation_index};" href={fragment.href}>{fragment.content}</a><!--
   -->{:else}<!--
     -->{fragment.content}<!--
   -->{/if}<!--
@@ -77,4 +80,4 @@
       cursor: text;
     }
   }
-</style>
+</style>

src/lib/TextToolBar.svelte

@@ -39,9 +39,19 @@
   }
 
   function insert_link() {
-    entry_session.annotate_text('link', {
-      href: window.prompt('Enter the URL')
-    });
+    // if the user cancels the prompt it will use the previous link
+    const current_link = entry_session.active_annotation()?.[2] === 'link' 
+      ? entry_session.active_annotation()[3].href 
+      : '';
+    
+    const new_url = window.prompt('Enter the URL', current_link);
+
+    // Update if the user didn't cancel the prompt
+    if (new_url !== null) {
+      entry_session.annotate_text('link', {
+        href: new_url // Pass the new_url directly, even if it's an empty string
+      });
+    }
   }
 
 </script>
@@ -147,7 +157,7 @@
     transform: translateY(-50%);
     left: var(--s-4);
     border-radius: 9999px;
-    box-shadow: 0 0 1px oklch(0 0 0 / 0.3), 0 0 2px oklch(0 0 0 / 0.1), 0 0 10px oklch(0 0 0 / 0.05);
+    box-shadow: var(--shadow-2);
     display: flex;
     z-index: 50;
     flex-direction: column;

src/lib/styles/shadows.css

@@ -0,0 +1,3 @@
+:root {
+  --shadow-2: 0 0 1px oklch(0 0 0 / 0.3), 0 0 2px oklch(0 0 0 / 0.1), 0 0 10px oklch(0 0 0 / 0.05);
+}

src/lib/styles/typography.css

@@ -97,7 +97,15 @@ em, i, .italic {
 
 button {
   border-radius: 9999px;
+  font-size: calc(var(--base-size) / var(--scale-ratio));
+  background-color: var(--canvas-fill-color);
+  font-weight: 400;
   padding-inline: var(--s-3);
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.1s ease-in-out;
   &:focus, &:focus-visible {
     outline: none;
   }
@@ -108,6 +116,12 @@ button {
     opacity: 0.4;
     cursor: not-allowed;
   }
+  &:not(:disabled):hover {
+    background-color: oklch(from var(--canvas-fill-color) calc(l - 0.05) c h);
+  }
+  &.small {
+    min-height: 36px;
+  }
 }
 
 .flex-column, .flex-row {

src/routes/+layout.svelte

@@ -3,6 +3,7 @@
   import '$lib/styles/typography.css';
   import '$lib/styles/colors.css';
   import '$lib/styles/spacing.css';
+  import '$lib/styles/shadows.css';
 
   let { children } = $props();
 </script>

src/routes/+page.svelte

@@ -16,7 +16,7 @@
     body: [
       { type: 'story', layout: 1, image: '/images/editable.svg', title: ['Visual in‑place editing', []], description: ['Model your content in JSON, render it with Svelte components, and edit content directly in the layout. You only have to follow a couple of rules to make this work.', []] },
       { type: 'story', layout: 2, image: '/images/lightweight.svg', title: ['Minimal viable editor', []], description: ["The reference implementation uses only about 1000 lines of code. That means you'll be able to serve editable web pages, removing the need for a separate Content Management System.", [[100,118, "link", { "href": "https://editable.website"}]]] },
-      { type: 'story', layout: 1, image: '/images/nested-blocks-illustration.svg', title: ['Nested blocks', []], description: ['A block can embed a container of other blocks. For instance the list block below has a container of list items.', []] },
+      { type: 'story', layout: 1, image: '/images/nested-blocks-illustration.svg', title: ['Nested blocks', []], description: ['A block can embed a container of other blocks. For instance the list block at the bottom of the page has a container of list items.', []] },
       { type: 'story', layout: 2, image: '/images/container-cursors.svg', title: ['Container cursors', []], description: ['They work just like text cursors, but instead of a character position in a string they address a block position in a container.\n\nTry it by selecting a few blocks, then press ↑ or ↓. Press ↵ to insert a new block or ⌫ to delete the block before the cursor.', []] },
       { type: 'story', layout: 1, image: '/images/svelte-logo.svg', title: ['Made for Svelte 5', []], description: ['Integrate with your Svelte application. Use it as a template and copy and paste Svedit.svelte to build your custom rich content editor.', [ [20, 26, "link", {"href": "https://svelte.dev/"}], [80, 93, "emphasis", null] ]] },
       { type: 'story', layout: 2, image: '/images/extendable.svg', title: ['Alpha version', []], description: ['Expect bugs. Expect missing features. Expect the need for more work on your part to make this work for your use case.\n\nFind below a list of known issues we\'ll be working to get fixed next:', []] },