Merge branch 'develop'

Author: paulpestov

src/components/ContentView.vue

@@ -14,6 +14,7 @@
 
     <div
       id="text-content"
+      ref="textContainer"
       class="custom-font item-content t-flex t-flex-col t-flex-1 t-overflow-auto"
     >
       <!-- eslint-disable -- https://eslint.vuejs.org/rules/no-v-html.html -->
@@ -25,7 +26,7 @@
 <script setup>
 
 import {
-  computed, readonly, ref, watch,
+  computed, readonly, ref, useTemplateRef, watch,
 } from 'vue';
 import { useConfigStore } from '@/stores/config';
 import { useAnnotationsStore } from '@/stores/annotations';
@@ -40,6 +41,7 @@ const props = defineProps({
   fontSize: Number,
 });
 const emit = defineEmits(['loading']);
+const textContainer = useTemplateRef('textContainer');
 
 const configStore = useConfigStore();
 const contentStore = useContentsStore();
@@ -77,7 +79,7 @@ async function loadContent(url) {
     setTimeout(async () => {
       emit('loading', false);
 
-      const root = document.getElementById('text-content');
+      const root = textContainer.value;
       annotationStore.addHighlightAttributesToText(root);
       await annotationStore.addHighlightClickListeners();
 

src/components/annotations/AnnotationsView.vue

@@ -37,20 +37,28 @@ interface Props {
 const props = defineProps<Props>();
 const emit = defineEmits(['init'])
 
+let lastLoadedAnnotations = null;
+let lastLoadedContentUrl = null;
+
 const annotations = computed<Annotation[]>(() => annotationStore.annotations);
 const filteredAnnotations = computed<Annotation[]>(() => annotationStore.filteredAnnotations);
 const activeContentUrl = computed<string>(() => contentStore.activeContentUrl);
-const updateTextHighlighting = computed(() =>
+const updateTextHighlighting = computed(() => {
   // We need to make sure that annotations are loaded (this.annotations),
   // the text HTML is present in DOM (this.activeContentUrl is set after DOM update)
   // and the annotation are filtered by type (this.filteredAnnotations).
-  `${annotations.value !== null}|${activeContentUrl.value}`);
+  const annotationsChanged = lastLoadedContentUrl !== activeContentUrl.value && lastLoadedAnnotations !== annotations.value
+  return `${annotations.value !== null}|${annotationsChanged}|${activeContentUrl.value}`
+});
 
 watch(
   updateTextHighlighting,
-  (contentData) => {
-    const [hasAnnotations, activeContentUrl] = contentData.split('|');
-    if (hasAnnotations !== 'true' || activeContentUrl === 'null') return;
+  (value) => {
+    const [hasAnnotations, annotationsChanged, activeContentUrl] = value.split('|');
+    if (hasAnnotations !== 'true' || annotationsChanged !== 'true' || activeContentUrl === 'null') return;
+    if (!value) return;
+    lastLoadedAnnotations = annotationStore.annotations;
+    lastLoadedContentUrl = contentStore.activeContentUrl
     annotationStore.resetAnnotations();
     annotationStore.selectFilteredAnnotations(props.types);
     annotationStore.highlightTargetsLevel0();

src/stores/annotations.ts

@@ -257,8 +257,7 @@ export const useAnnotationsStore = defineStore('annotations', () => {
     annotationStore.setActiveAnnotations(activeAnnotationsList)
 
     const selector = AnnotationUtils.generateTargetSelector(removeAnnotation);
-    const textEl = document.querySelector('#text-content')
-    const target = textEl.querySelector(selector)
+    const target = document.querySelector(selector)
 
     if (!target) return
 

src/utils/annotations.js

@@ -89,8 +89,6 @@ export function generateTargetSelector(annotation) {
     }
   } else if (selector.type === 'CssSelector') {
     result = handleCssSelector(selector);
-  } else if (selector.type === 'RangeSelector') {
-    result = handleRangeSelector(selector);
   }
 
   const isValid = Utils.isSelectorValid(result);
@@ -102,48 +100,6 @@ export function handleCssSelector(selector) {
   return selector.value ?? null;
 }
 
-export function handleRangeSelector(selector) {
-  const { startSelector, endSelector } = selector;
-  if (startSelector && endSelector) {
-    if (startSelector.type === 'CssSelector') {
-      const start = document.querySelector(handleCssSelector(startSelector).replaceAll('\'', ''));
-      const end = document.querySelector(handleCssSelector(endSelector).replaceAll('\'', ''));
-
-      const elementsInRange = [];
-
-      let started = false;
-      let ended = false;
-
-      // eslint-disable-next-line no-inner-declarations
-      function findElementsInRangeRecursive(element) {
-        if (element === start) started = true;
-        if (element === end) {
-          ended = true;
-          return;
-        }
-
-        if (started && element.nodeValue !== ' ' && element.nodeName === '#text') {
-          elementsInRange.push(element.parentElement);
-          return;
-        }
-
-        [...element.childNodes]
-          .filter((childNode) => childNode.nodeName !== 'STYLE' && childNode.nodeName !== 'SCRIPT' && childNode.nodeName !== 'svg')
-          .forEach((childNode) => {
-            if (!ended) {
-              findElementsInRangeRecursive(childNode);
-            }
-          });
-      }
-
-      findElementsInRangeRecursive(document.getElementById('text-content'));
-
-      return elementsInRange.map((el) => Utils.elemToSelector(el)).join(',');
-    }
-  }
-  return null;
-}
-
 export function addIcon(element, annotation, iconName) {
   let foundSvg = false;
 
@@ -231,8 +187,8 @@ function createWitnessEl(witness, witnessColor) {
 
 export function removeWitnessesWrappers() {
   // remove witnesses in text Panel - it is used when switch off the variants tab
-  const textPanelEl = document.querySelector('#text-content')
-  const wrappers = textPanelEl.getElementsByClassName('witnesses')
+  const textPanelEls = document.querySelectorAll('.content-view')
+  const wrappers = textPanelEls.querySelectorAll('.witnesses')
   if (!wrappers) return;
   if(Array.from(wrappers).length === 0) return;
 
@@ -245,8 +201,13 @@ export function removeWitnessesWrappers() {
 export function removeWitness(selector, idno) {
   // find the witnesses span which contains each 'witness' span child element
   // find this witness inside the 'witnesses' html span and remove it
-  const textPanel = document.querySelector('#text-content')
-  if (!textPanel.querySelector('.witnesses')) return;
+  const textPanels = document.querySelectorAll('.content-view')
+  if (textPanels.length === 0) return;
+
+  let hasWitnesses = false;
+  textPanels.forEach(textPanel => hasWitnesses = textPanel.querySelectorAll('.witnesses').length > 0)
+
+  if (!hasWitnesses) return;
 
   const wrapper = getWitnessesWrapper(selector)
   if (!wrapper) return;

src/utils/dom.js

@@ -50,26 +50,6 @@ export function addToAttribute(element, attribute, newValue) {
   }
 }
 
-export function elemToSelector(el) {
-  if (el.id === 'text-content') return '#text-content';
-  let str = el.tagName.toLowerCase();
-
-  if (el.id !== '') {
-    str += `#${el.id}`;
-  } else if (el.className) {
-    const classes = el.className.trim().split(/\s+/);
-    for (let i = 0; i < classes.length; i++) {
-      str += `.${classes[i]}`;
-    }
-  }
-
-  if (el.hasAttribute('data-target')) {
-    str += `[data-target=${el.getAttribute('data-target')}]`;
-  }
-
-  return `${elemToSelector(el.parentNode)} > ${str}`;
-}
-
 export function getValuesFromAttribute(element, attribute) {
   const value = element.getAttribute(attribute);
   return value ? value.split(' ') : [];