webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-12-23 23:02:08 +03:00
Code Activity

Lexical: Added toolbar scroll/resize handling

Browse Source 
Also added smarter above/below positioning to respond if toolbar would
be off the bottom of the editor, and added hide/show when they'd go
outside editor scroll bounds.
This commit is contained in:
Dan Brown
2024-07-19 18:12:51 +01:00
parent c7c0df0964
commit 63f4b42453
7 changed files with 65 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
resources/js/wysiwyg/ui/framework/toolbars.ts
View File

@@ -9,20 +9,44 @@ export type EditorContextToolbarDefinition = {
export class EditorContextToolbar extends EditorContainerUiElement {
protected target: HTMLElement;
constructor(target: HTMLElement, children: EditorUiElement[]) {
super(children);
this.target = target;
}
protected buildDOM(): HTMLElement {
return el('div', {
class: 'editor-context-toolbar',
}, this.getChildren().map(child => child.getDOMElement()));
}
attachTo(target: HTMLElement) {
const targetBounds = target.getBoundingClientRect();
updatePosition() {
const editorBounds = this.getContext().scrollDOM.getBoundingClientRect();
const targetBounds = this.target.getBoundingClientRect();
const dom = this.getDOMElement();
const domBounds = dom.getBoundingClientRect();
const showing = targetBounds.bottom > editorBounds.top
&& targetBounds.top < editorBounds.bottom;
dom.hidden = !showing;
if (!showing) {
return;
}
const showAbove: boolean = targetBounds.bottom + 6 + domBounds.height > editorBounds.bottom;
dom.classList.toggle('is-above', showAbove);
const targetMid = targetBounds.left + (targetBounds.width / 2);
const targetLeft = targetMid - (domBounds.width / 2);
dom.style.top = (targetBounds.bottom + 6) + 'px';
if (showAbove) {
dom.style.top = (targetBounds.top - 6 - domBounds.height) + 'px';
} else {
dom.style.top = (targetBounds.bottom + 6) + 'px';
}
dom.style.left = targetLeft + 'px';
}
@@ -32,11 +56,16 @@ export class EditorContextToolbar extends EditorContainerUiElement {
dom.append(...children.map(child => child.getDOMElement()));
}
empty() {
protected empty() {
const children = this.getChildren();
for (const child of children) {
child.getDOMElement().remove();
}
this.removeChildren(...children);
}
destroy() {
this.empty();
this.getDOMElement().remove();
}
}