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

Remove highlight directive

This commit is contained in:
Ramon Wenger 2024-01-24 09:03:51 +01:00
parent 57cac25c6f
commit 5ae1296949
2 changed files with 0 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -165,40 +165,3 @@ export const getSelectionHandler =
}
}
};
const highlight = (element: HTMLElement, ranges: Mark.Range[]) => {
// todo: make the ContentComponent / TextBlock component handle the highlighting
const instance = new Mark(element);
instance.markRanges(ranges);
};
// const mounted = (el: HTMLElement, binding: DirectiveBinding, vnode: VNode, prevVnode: VNode) => {
const mounted = (el: HTMLElement, binding: DirectiveBinding) => {
const contentBlock = (binding.instance as InstanceType<typeof ContentBlock>).contentBlock;
document.addEventListener('selectionchange', getSelectionHandler(el, contentBlock));
const demoRanges: Mark.Range[] = [
{ start: 3, length: 50 },
{ start: 182, length: 10 },
];
// todo: find a way for the ContentBlock component to tell us when it's 'ready' and everything loaded. Otherwise, the
// code inside this setTimeout would run too early and yield no elements
setTimeout(() => {
const elements = el.querySelectorAll<HTMLElement>('.content-component');
for (const element of elements) {
highlight(element, demoRanges);
}
// highlight(el, demoRanges);
}, 2000);
};
// const removeListener = (el: HTMLElement, binding: DirectiveBinding, vnode: VNode, prevVnode: VNode) => {
const removeListener = (el: HTMLElement, binding: DirectiveBinding) => {
const contentBlock = (binding.instance as InstanceType<typeof ContentBlock>).contentBlock;
document.removeEventListener('selectionchange', getSelectionHandler(el, contentBlock));
};
// todo: move this to the contentBlock
export default {
mounted,
unmounted: removeListener,
};

2
client/src/setup/directives.ts
View File

@ -1,10 +1,8 @@
import autoGrow from '@/directives/auto-grow';
import clickOutside from '@/directives/click-outside';
import highlight from '@/directives/highlight';
const registerDirectives = (app: any) => {
app.directive('click-outside', clickOutside);
app.directive('auto-grow', autoGrow);
app.directive('highlight', highlight);
};
export default registerDirectives;