GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 16:56:36 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

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