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

Add solution text to highlight exclusion

This commit is contained in:
Lorenz Padberg 2024-03-19 10:54:29 +01:00
parent 7fc13032ae
commit 431cded293
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/helpers/highlight.ts
View File

@ -161,6 +161,9 @@ export const getSelectionHandler =
// 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
if (startContainer.parentElement && isNotHighlightable(startContainer.parentElement)) {
return;
}
const startAncestor = findClosestAncestorWithTag(startContainer, ['p', 'li']);
// const endAncestor = findClosestAncestorWithTag(endContainer, 'p');
if (!startAncestor) {
@ -175,10 +178,10 @@ export const getSelectionHandler =
const selector = parentSelector ? parentSelector : 'content-component';
const contentComponent = findClosestAncestorWithClass(startContainer, selector);
if (contentComponent) {
if (contentComponent.classList.contains('content-component--solution')) {
// Lorenz: I added this to prevent highlighting of the solution. It ain't pretty, but it works
if (isNotHighlightable(contentComponent)) {
return;
}
// our selection is wholly inside the container node, we continue with it
const position = findPositionInParent(contentComponent);
const uuid = contentComponent.dataset.uuid || '';
@ -229,6 +232,11 @@ export const getSelectionHandler =
}
};
const isNotHighlightable = (element: HTMLElement) => {
const nonHighlightableClasses = ['content-component--solution', 'solution-text'];
return [...element.classList].some((value) => nonHighlightableClasses.includes(value));
};
export const replacePopover = (highlight: HighlightNode) => {
// we need to replace the Popover after the Highlight is created
// todo: is there a cleaner way than to look for the element and click it?
@ -306,6 +314,7 @@ interface ClickListenerCurryOptions {
parent: HTMLElement; // the element (paragraph/list) the highlight is inside
highlight: HighlightNode;
}
const markClickListenerCurry =
({ wrapper, parent, highlight }: ClickListenerCurryOptions) =>
() => {