anki/ts/editor/editor-toolbar/EditorToolbar.svelte
Henrik Giesel a981e56008
Improved add-on extension API (#1626)
* Add componentHook functionality

* Register package NoteEditor

* Rename OldEditorAdapter to NoteEditor

* Expose instances in component-hook as well

* Rename NoteTypeButtons to NotetypeButtons

* Move PreviewButton initialization to BrowserEditor.svelte

* Remove focusInRichText

- Same thing can be done by inspecting activeInput

* Satisfy formatter

* Fix remaining rebase issues

* Add .bazel to .prettierignore

* Rename currentField and activeInput to focused{Field,Input}

* Move identifier to lib and registration to sveltelib

* Fix Dynamic component insertion

* Simplify editingInputIsRichText

* Give extra warning in svelte/svelte.ts

- This was caused by doing a rename of a files, that only differed in
  case: NoteTypeButtons.svelte to NotetypeButtons.svelte
- It was quite tough to figure out, and this console.log might make it
  easier if it ever happens again

* Change signature of contextProperty

* Add ts/typings for add-on definition files

* Add Anki types in typings/common/index.d.ts

* Export without .svelte suffix

It conflicts with how Svelte types its packages

* Fix left over .svelte import from editor.py

* Rename NoteTypeButtons to unrelated to ensure case-only rename

* Rename back to NotetypeButtons.svelte

* Remove unused component-hook.ts, Fix typing in lifecycle-hooks

* Merge runtime-require and register-package into one file

+ Give some preliminary types to require

* Rename uiDidLoad to loaded

* Fix eslint / svelte-check

* Rename context imports to noteEditorContext

* Fix import name mismatch

- I wonder why these issues are not caught by svelte-check?

* Rename two missed usages of uiDidLoad

* Fix ButtonDropdown from having wrong border-radius

* Uniformly rename libraries to packages

- I don't have a strong opinion on whether to name them libraries or
  packages, I just think we should have a uniform name.
- JS/TS only uses the terms "module" and "namespace", however `package`
  is a reserved keyword for future use, whereas `library` is not.

* Refactor registration.ts into dynamic-slotting

- This is part of an effort to refactor the dynamic slotting (extending
  buttons) functionality out of components like ButtonGroup.

* Remove dynamically-slottable logic from ButtonToolbar

* Use DynamicallySlottable in editor-toolbar

* Fix no border radius on indentation button dropdown

* Fix AddonButtons

* Remove Item/ButtonGroupItem in deck-options, where it's not necessary

* Remove unnecessary uses of Item and ButtonGroupItem

* Fix remaining tests

* Fix relative imports

* Revert change return value of remapBinToSrcDir to ./bazel/out...

* Remove typings directory

* Adjust comments for dynamic-slottings
2022-02-03 14:52:11 +10:00

98 lines
3.1 KiB
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script context="module" lang="ts">
import { updateAllState, resetAllState } from "../../components/WithState.svelte";
import type { DefaultSlotInterface } from "../../sveltelib/dynamic-slotting";
export function updateActiveButtons(event: Event) {
updateAllState(event);
}
export function clearActiveButtons() {
resetAllState(false);
}
export interface EditorToolbarAPI {
toolbar: DefaultSlotInterface;
notetypeButtons: DefaultSlotInterface;
formatInlineButtons: DefaultSlotInterface;
formatBlockButtons: DefaultSlotInterface;
colorButtons: DefaultSlotInterface;
templateButtons: DefaultSlotInterface;
}
/* Our dynamic components */
import AddonButtons from "./AddonButtons.svelte";
export const editorToolbar = {
AddonButtons,
};
</script>
<script lang="ts">
import StickyContainer from "../../components/StickyContainer.svelte";
import ButtonToolbar from "../../components/ButtonToolbar.svelte";
import DynamicallySlottable from "../../components/DynamicallySlottable.svelte";
import Item from "../../components/Item.svelte";
import NotetypeButtons from "./NotetypeButtons.svelte";
import FormatInlineButtons from "./FormatInlineButtons.svelte";
import FormatBlockButtons from "./FormatBlockButtons.svelte";
import ColorButtons from "./ColorButtons.svelte";
import TemplateButtons from "./TemplateButtons.svelte";
export let size: number;
export let wrap: boolean;
export let textColor: string;
export let highlightColor: string;
const toolbar = {};
const notetypeButtons = {};
const formatInlineButtons = {};
const formatBlockButtons = {};
const colorButtons = {};
const templateButtons = {};
export let api: Partial<EditorToolbarAPI> = {};
Object.assign(api, {
toolbar,
notetypeButtons,
formatInlineButtons,
formatBlockButtons,
colorButtons,
templateButtons,
} as EditorToolbarAPI);
</script>
<StickyContainer --gutter-block="0.1rem" --sticky-borders="0 0 1px">
<ButtonToolbar {size} {wrap}>
<DynamicallySlottable slotHost={Item} api={toolbar}>
<Item id="notetype">
<NotetypeButtons api={notetypeButtons}>
<slot name="notetypeButtons" />
</NotetypeButtons>
</Item>
<Item id="inlineFormatting">
<FormatInlineButtons api={formatInlineButtons} />
</Item>
<Item id="blockFormatting">
<FormatBlockButtons api={formatBlockButtons} />
</Item>
<Item id="color">
<ColorButtons {textColor} {highlightColor} api={colorButtons} />
</Item>
<Item id="template">
<TemplateButtons api={templateButtons} />
</Item>
</DynamicallySlottable>
</ButtonToolbar>
</StickyContainer>