Selection and marks · glyphline

The Svelte demo on the Svelte page does this. Select a few words there and press Highlight selection.

<script lang="ts">
  import type { Mark, TextRange } from "glyphline";
  import { domText, GlyphOverlay } from "glyphline/svelte";

  const text = domText();
  let selected = $state<{ range: TextRange; text: string } | null>(null);
  let marks = $state<Mark[]>([]);

  const options = {
    trackSelection: {
      snapToWords: true,
      onChange: (range: TextRange | null, t: string) => (selected = range ? { range, text: t } : null),
    },
  };

  function keep() {
    if (!selected) return;
    marks = [...marks, { id: crypto.randomUUID(), ...selected.range, className: "note" }];
    document.getSelection()?.removeAllRanges();
  }
</script>

<!-- preventDefault on mousedown keeps the selection alive while the button is pressed -->
<button disabled={!selected} onmousedown={(e) => e.preventDefault()} onclick={keep}>Highlight</button>

<div style="position: relative">
  <div class="gl-native-selection-hidden" {@attach text.attach}>…</div>
  <GlyphOverlay source={text.source} {marks} {options} />
</div>

Store start, end and className with the document and pass them back as marks. Selection and marks covers the details shared with React.