From 8ef3f23edc59c26c7740601f7daf3ac7df20c884 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Mon, 29 Jan 2024 16:36:16 +0100 Subject: [PATCH] Complete highlights for list items --- .../content-blocks/ContentComponent.vue | 16 +++++++++++++--- client/src/directives/highlight.ts | 3 ++- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/client/src/components/content-blocks/ContentComponent.vue b/client/src/components/content-blocks/ContentComponent.vue index 553f967b..b3852b5c 100644 --- a/client/src/components/content-blocks/ContentComponent.vue +++ b/client/src/components/content-blocks/ContentComponent.vue @@ -148,9 +148,19 @@ const componentClass = computed(() => { } return classes; }); -const paragraphs = computed(() => - contentComponentDiv.value ? contentComponentDiv.value.getElementsByTagName('p') : [] -); +const paragraphs = computed(() => { + if (contentComponentDiv.value) { + let elements: HTMLCollection; + elements = contentComponentDiv.value.getElementsByTagName('p'); + if (!elements.length) { + const uls = contentComponentDiv.value.getElementsByTagName('ul'); + const ul = uls[0]; + elements = ul.getElementsByTagName('li'); + } + return elements; + } + return []; +}); watch( () => filteredHighlights.value.map((h) => h.color), diff --git a/client/src/directives/highlight.ts b/client/src/directives/highlight.ts index 9ab8c1e5..7f277380 100644 --- a/client/src/directives/highlight.ts +++ b/client/src/directives/highlight.ts @@ -109,13 +109,14 @@ export const getSelectionHandler = if (range.intersectsNode(el)) { // the selection is inside our container, so we can do something with it const { startContainer, endContainer } = range; + // todo: handle case with paragraphs and list items const startAncestor = findClosestAncestorWithTag(startContainer, ['p', 'li']); // const endAncestor = findClosestAncestorWithTag(endContainer, 'p'); if (!startAncestor) { throw Error('This should not be happening, but there was no paragraph or list item'); } // should have the same tag as the start item - const endAncestor = findClosestAncestorWithTag(endContainer, startAncestor.tagName); + const endAncestor = findClosestAncestorWithTag(endContainer, startAncestor.tagName.toLowerCase()); if (startAncestor === endAncestor) { const contentComponent = findClosestAncestorWithClass(startContainer, 'content-component');