Add old proof of concept code

client/src/components/TextToSelect.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { onUnmounted, ref } from 'vue';
+import rangy from 'rangy';
+import 'rangy/lib/rangy-textrange';
+import Mark from 'mark.js';
+const markStart = ref(0);
+const markLength = ref(15);
+const paragraph = ref(null);
+const select2 = () => {
+  const instance = new Mark(paragraph.value);
+  console.log(paragraph.value);
+  // instance.mark("Text");
+  // const sel = rangy.getSelection();
+  // const range = sel.getRangeAt(0);
+  //
+  // console.log(range);
+  // console.log(sel.anchorNode);
+  // console.log(sel.focusNode);
+  // console.log(rangy.dom.isAncestorOf(root.value, sel.anchorNode));
+  instance.markRanges([{ start: markStart.value, length: markLength.value }]);
+};
+const clear = () => {
+  const instance = new Mark(paragraph.value);
+  instance.unmark();
+};
+
+const selectionHandler = (e) => {
+  console.log(e);
+  // const selection = window.getSelection();
+  const selection = rangy.getSelection();
+  if (selection && !selection?.isCollapsed) {
+    console.log('selection changed and something is there');
+    // getting selection
+    console.log(selection);
+    // const { anchorNode, focusNode } = selection;
+    // console.log(paragraph.value.contains(anchorNode));
+    // console.log(paragraph.value.contains(focusNode));
+    // const anchorNode = selection?.anchorNode
+    // get range
+    const range = selection.getRangeAt(0);
+    console.log(range);
+    // console.log(range.startContainer);
+    // console.log(range.startContainer.parentNode === paragraph.value);
+    // get start and end of range to use
+    const { startContainer, endContainer, startOffset, endOffset } = range;
+    // find out what the offset is of those containers relative to the parent
+    // const start = getNodeOffset(startContainer, paragraph.value);
+    // const end = getNodeOffset(endContainer, paragraph.value);
+    const { start, end } = range.toCharacterRange(paragraph.value);
+    console.log(
+      `start: ${start}, end: ${end}, highlightStart: ${start + startOffset}, highlightEnd: ${end + endOffset}`
+    );
+    // markStart.value = start + startOffset;
+    markStart.value = start;
+    // markLength.value = end + endOffset - markStart.value;
+    markLength.value = end - markStart.value;
+    console.log(range.toCharacterRange(paragraph.value));
+  }
+};
+
+document.addEventListener('selectionchange', selectionHandler);
+
+onUnmounted(() => {
+  document.removeEventListener('selectionchange', selectionHandler);
+});
+</script>
+
+<template>
+  <div
+    class="greetings"
+    ref="root"
+  >
+    <pre>
+      {{ markStart }} / {{ markLength }}
+    </pre>
+    <h3>Here's some text</h3>
+    <p>
+      Here is some more Text to be selected. There's even some
+      <em>emphasized</em> words and even <a href="https://iterativ.ch">links</a>.
+    </p>
+    <p ref="paragraph">There are even <i>multiple</i> paragraphs.</p>
+    <ul>
+      <li>Hallo</li>
+      <li>Velo</li>
+    </ul>
+    <button @click="select">Select</button>
+    <button @click="select2">Select 2</button>
+    <button @click="clear">Unmark</button>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>