langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Solve the race conditions of button insertion by operating on promises in EditorToolbar

Browse Source
This commit is contained in:
Henrik Giesel 2021-04-16 02:04:38 +02:00
parent ccc48bd1d7
commit 0f01e421be
1 changed files with 48 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
ts/editor-toolbar/index.ts
View File

@ -39,32 +39,46 @@ function toggleComponent(component: Hideable): void {
const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
let buttonsResolve: (
value: Writable<(ToolbarItem<typeof ButtonGroup> & ButtonGroupProps)[]>
) => void;
let menusResolve: (value: Writable<ToolbarItem[]>) => void;
class EditorToolbar extends HTMLElement {
component?: SvelteComponentDev;
buttons?: Writable<(ToolbarItem<typeof ButtonGroup> & ButtonGroupProps)[]>;
menus?: Writable<ToolbarItem[]>;
buttonsPromise: Promise<
Writable<(ToolbarItem<typeof ButtonGroup> & ButtonGroupProps)[]>
> = new Promise((resolve) => {
buttonsResolve = resolve;
});
menusPromise: Promise<Writable<ToolbarItem[]>> = new Promise((resolve): void => {
menusResolve = resolve;
});
connectedCallback(): void {
setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
this.buttons = writable([
const buttons = writable([
getNotetypeGroup(),
getFormatGroup(),
getColorGroup(),
getTemplateGroup(),
]);
this.menus = writable([...getTemplateMenus()]);
const menus = writable([...getTemplateMenus()]);
this.component = new EditorToolbarSvelte({
target: this,
props: {
buttons: this.buttons,
menus: this.menus,
buttons,
menus,
nightMode: document.documentElement.classList.contains(
"night-mode"
),
},
});
buttonsResolve(buttons);
menusResolve(menus);
});
}
@ -74,16 +88,22 @@ class EditorToolbar extends HTMLElement {
) => void,
group: string | number
): void {
this.buttons?.update((buttonGroups) => {
const foundGroup = search(buttonGroups, group);
this.buttonsPromise.then((buttons) => {
buttons.update((buttonGroups) => {
const foundGroup = search(buttonGroups, group);
if (foundGroup) {
update(
foundGroup as ToolbarItem<typeof ButtonGroup> & ButtonGroupProps & T
);
}
if (foundGroup) {
update(
foundGroup as ToolbarItem<typeof ButtonGroup> &
ButtonGroupProps &
T
);
}
return buttonGroups;
return buttonGroups;
});
return buttons;
});
}
@ -100,16 +120,24 @@ class EditorToolbar extends HTMLElement {
}
insertButtonGroup(newGroup: ButtonGroupProps, group: string | number = 0): void {
this.buttons?.update((buttonGroups) => {
const newButtonGroup = buttonGroup(newGroup);
return insert(buttonGroups, newButtonGroup, group);
this.buttonsPromise.then((buttons) => {
buttons.update((buttonGroups) => {
const newButtonGroup = buttonGroup(newGroup);
return insert(buttonGroups, newButtonGroup, group);
});
return buttons;
});
}
addButtonGroup(newGroup: ButtonGroupProps, group: string | number = -1): void {
this.buttons?.update((buttonGroups) => {
const newButtonGroup = buttonGroup(newGroup);
return add(buttonGroups, newButtonGroup, group);
this.buttonsPromise.then((buttons) => {
buttons.update((buttonGroups) => {
const newButtonGroup = buttonGroup(newGroup);
return add(buttonGroups, newButtonGroup, group);
});
return buttons;
});
}