chore(client/ts): port classic_editor_toolbar

This commit is contained in:
Elian Doran 2025-01-16 15:51:58 +02:00
parent 1d6e3af9aa
commit 0cab891d2e
No known key found for this signature in database

View File

@ -64,6 +64,9 @@ const TPL = `\
* The ribbon item is active by default for text notes, as long as they are not in read-only mode.
*/
export default class ClassicEditorToolbar extends NoteContextAwareWidget {
private observer: MutationObserver;
constructor() {
super();
this.observer = new MutationObserver((e) => this.#onDropdownStateChanged(e));
@ -83,7 +86,7 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget {
if (utils.isMobile()) {
// The virtual keyboard obscures the editing toolbar so we have to reposition by calculating the height of the keyboard.
window.visualViewport.addEventListener("resize", () => this.#adjustPosition());
window.visualViewport?.addEventListener("resize", () => this.#adjustPosition());
window.addEventListener("scroll", () => this.#adjustPosition());
// Observe when a dropdown is expanded to apply a style that allows the dropdown to be visible, since we can't have the element both visible and the toolbar scrollable.
@ -95,13 +98,13 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget {
}
}
#onDropdownStateChanged(e) {
const dropdownActive = e.map((e) => e.target.ariaExpanded === "true").reduce((acc, e) => acc && e);
#onDropdownStateChanged(e: MutationRecord[]) {
const dropdownActive = e.map((e) => (e.target as any).ariaExpanded === "true").reduce((acc, e) => acc && e);
this.$widget[0].classList.toggle("dropdown-active", dropdownActive);
}
#adjustPosition() {
let bottom = window.innerHeight - window.visualViewport.height;
let bottom = window.innerHeight - (window.visualViewport?.height || 0);
if (bottom === 0) {
// The keyboard is not visible, align it to the launcher bar instead.
@ -125,11 +128,11 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget {
return false;
}
if (this.note.type !== "text") {
if (!this.note || this.note.type !== "text") {
return false;
}
if (await this.noteContext.isReadOnly()) {
if (await this.noteContext?.isReadOnly()) {
return false;
}