ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Complete highlights for list items

This commit is contained in:
Ramon Wenger 2024-01-29 16:36:16 +01:00
parent 4464b56cbb
commit 8ef3f23edc
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/components/content-blocks/ContentComponent.vue
View File

@ -148,9 +148,19 @@ const componentClass = computed(() => {
} }
return classes; return classes;
}); });
const paragraphs = computed(() => const paragraphs = computed(() => {
contentComponentDiv.value ? contentComponentDiv.value.getElementsByTagName('p') : [] 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( watch(
() => filteredHighlights.value.map((h) => h.color), () => filteredHighlights.value.map((h) => h.color),

3
client/src/directives/highlight.ts
View File

@ -109,13 +109,14 @@ export const getSelectionHandler =
if (range.intersectsNode(el)) { if (range.intersectsNode(el)) {
// the selection is inside our container, so we can do something with it // the selection is inside our container, so we can do something with it
const { startContainer, endContainer } = range; const { startContainer, endContainer } = range;
// todo: handle case with paragraphs and list items
const startAncestor = findClosestAncestorWithTag(startContainer, ['p', 'li']); const startAncestor = findClosestAncestorWithTag(startContainer, ['p', 'li']);
// const endAncestor = findClosestAncestorWithTag(endContainer, 'p'); // const endAncestor = findClosestAncestorWithTag(endContainer, 'p');
if (!startAncestor) { if (!startAncestor) {
throw Error('This should not be happening, but there was no paragraph or list item'); throw Error('This should not be happening, but there was no paragraph or list item');
} }
// should have the same tag as the start 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) { if (startAncestor === endAncestor) {
const contentComponent = findClosestAncestorWithClass(startContainer, 'content-component'); const contentComponent = findClosestAncestorWithClass(startContainer, 'content-component');