mirror of
https://github.com/ankitects/anki.git
synced 2025-09-18 22:12:21 -04:00
Move Notetype buttons to using slots instead of dynamic components
This commit is contained in:
Henrik Giesel
parent
6d6c798ca3
commit
4736b1ce1c
20 changed files with 557 additions and 638 deletions
10
ts/editor-toolbar/ButtonGroup.d.ts
vendored
10
ts/editor-toolbar/ButtonGroup.d.ts
vendored
|
|
@ -1,10 +0,0 @@
|
|||
// Copyright: Ankitects Pty Ltd and contributors
|
||||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
import type { ToolbarItem } from "./types";
|
||||
|
||||
export interface ButtonGroupProps {
|
||||
id: string;
|
||||
className?: string;
|
||||
items: ToolbarItem[];
|
||||
fullWidth?: boolean;
|
||||
}
|
||||
|
|
@ -3,19 +3,31 @@ Copyright: Ankitects Pty Ltd and contributors
|
|||
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
-->
|
||||
<script lang="typescript">
|
||||
import type { ToolbarItem } from "./types";
|
||||
import { getContext } from "svelte";
|
||||
import { nightModeKey } from "./contextKeys";
|
||||
import { setContext, getContext } from "svelte";
|
||||
import { nightModeKey, buttonGroupKey } from "./contextKeys";
|
||||
|
||||
export let id: string | undefined = undefined;
|
||||
export let className = "";
|
||||
export let items: ToolbarItem[];
|
||||
let className = "";
|
||||
|
||||
function filterHidden({ hidden = false, ...props }) {
|
||||
return props;
|
||||
export { className as class };
|
||||
const nightMode = getContext(nightModeKey);
|
||||
|
||||
export let api = {};
|
||||
|
||||
let index = 0;
|
||||
|
||||
interface ButtonRegistration {
|
||||
order: number;
|
||||
}
|
||||
|
||||
const nightMode = getContext(nightModeKey);
|
||||
function registerButton(): ButtonRegistration {
|
||||
index++;
|
||||
return { order: index };
|
||||
}
|
||||
|
||||
setContext(buttonGroupKey, Object.assign(api, {
|
||||
registerButton,
|
||||
}))
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -65,9 +77,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
class:border-overlap-group={!nightMode}
|
||||
class:gap-group={nightMode}
|
||||
div="ltr">
|
||||
{#each items as button}
|
||||
{#if !button.hidden}
|
||||
<svelte:component this={button.component} {...filterHidden(button)} />
|
||||
{/if}
|
||||
{/each}
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
13
ts/editor-toolbar/ButtonGroupButton.svelte
Normal file
13
ts/editor-toolbar/ButtonGroupButton.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!--
|
||||
Copyright: Ankitects Pty Ltd and contributors
|
||||
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
-->
|
||||
<script lang="typescript">
|
||||
import { getContext } from "svelte";
|
||||
import { buttonGroupKey } from "./contextKeys";
|
||||
|
||||
const { registerButton } = getContext(buttonGroupKey);
|
||||
const { order } = registerButton();
|
||||
</script>
|
||||
|
||||
<slot {order} />
|
||||
|
|
@ -21,15 +21,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
import type { Identifier } from "./identifiable";
|
||||
import type { ToolbarItem, IterableToolbarItem } from "./types";
|
||||
|
||||
import { setContext } from "svelte";
|
||||
import { setContext, onMount } from "svelte";
|
||||
import { disabledKey, nightModeKey } from "./contextKeys";
|
||||
import { add, insert, updateRecursive } from "./identifiable";
|
||||
import { showComponent, hideComponent, toggleComponent } from "./hideable";
|
||||
|
||||
import ButtonGroup from "./ButtonGroup.svelte";
|
||||
import NoteTypeButtons from "./NoteTypeButtons.svelte";
|
||||
|
||||
let api = {};
|
||||
|
||||
export let buttons: IterableToolbarItem[];
|
||||
export let menus: ToolbarItem[];
|
||||
export let nightMode: boolean;
|
||||
|
||||
setContext(nightModeKey, nightMode);
|
||||
|
|
@ -41,77 +41,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
$: style = `--toolbar-size: ${size}px; --toolbar-wrap: ${
|
||||
wraps ? "wrap" : "nowrap"
|
||||
}`;
|
||||
|
||||
export function updateButton(
|
||||
update: (component: ToolbarItem) => ToolbarItem,
|
||||
...identifiers: Identifier[]
|
||||
): void {
|
||||
buttons = updateRecursive(
|
||||
update,
|
||||
({ items: buttons } as unknown) as ToolbarItem,
|
||||
...identifiers
|
||||
).items as IterableToolbarItem[];
|
||||
}
|
||||
|
||||
export function showButton(...identifiers: Identifier[]): void {
|
||||
updateButton(showComponent, ...identifiers);
|
||||
}
|
||||
|
||||
export function hideButton(...identifiers: Identifier[]): void {
|
||||
updateButton(hideComponent, ...identifiers);
|
||||
}
|
||||
|
||||
export function toggleButton(...identifiers: Identifier[]): void {
|
||||
updateButton(toggleComponent, ...identifiers);
|
||||
}
|
||||
|
||||
export function insertButton(
|
||||
newButton: ToolbarItem,
|
||||
...identifiers: Identifier[]
|
||||
): void {
|
||||
const initIdentifiers = identifiers.slice(0, -1);
|
||||
const lastIdentifier = identifiers[identifiers.length - 1];
|
||||
updateButton(
|
||||
(component: ToolbarItem) =>
|
||||
insert(component as IterableToolbarItem, newButton, lastIdentifier),
|
||||
|
||||
...initIdentifiers
|
||||
);
|
||||
}
|
||||
|
||||
export function addButton(
|
||||
newButton: ToolbarItem,
|
||||
...identifiers: Identifier[]
|
||||
): void {
|
||||
const initIdentifiers = identifiers.slice(0, -1);
|
||||
const lastIdentifier = identifiers[identifiers.length - 1];
|
||||
updateButton(
|
||||
(component: ToolbarItem) =>
|
||||
add(component as IterableToolbarItem, newButton, lastIdentifier),
|
||||
...initIdentifiers
|
||||
);
|
||||
}
|
||||
|
||||
export function updateMenu(
|
||||
update: (component: ToolbarItem) => ToolbarItem,
|
||||
...identifiers: Identifier[]
|
||||
): void {
|
||||
menus = updateRecursive(
|
||||
update,
|
||||
({ items: menus } as unknown) as ToolbarItem,
|
||||
...identifiers
|
||||
).items as ToolbarItem[];
|
||||
}
|
||||
|
||||
export function addMenu(newMenu: ToolbarItem, ...identifiers: Identifier[]): void {
|
||||
const initIdentifiers = identifiers.slice(0, -1);
|
||||
const lastIdentifier = identifiers[identifiers.length - 1];
|
||||
updateMenu(
|
||||
(component: ToolbarItem) =>
|
||||
add(component as IterableToolbarItem, newMenu, lastIdentifier),
|
||||
...initIdentifiers
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -126,10 +55,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
}
|
||||
</style>
|
||||
|
||||
<nav {style}>
|
||||
{#each menus as menu}
|
||||
<svelte:component this={menu.component} {...menu} />
|
||||
{/each}
|
||||
|
||||
<ButtonGroup items={buttons} className="p-0 mb-1" />
|
||||
<nav {style} class="pb-1">
|
||||
<NoteTypeButtons />
|
||||
</nav>
|
||||
|
|
|
|||
11
ts/editor-toolbar/LabelButton.d.ts
vendored
11
ts/editor-toolbar/LabelButton.d.ts
vendored
|
|
@ -1,11 +0,0 @@
|
|||
// Copyright: Ankitects Pty Ltd and contributors
|
||||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
export interface LabelButtonProps {
|
||||
id?: string;
|
||||
className?: string;
|
||||
|
||||
label: string;
|
||||
tooltip: string;
|
||||
onClick: (event: MouseEvent) => void;
|
||||
disables?: boolean;
|
||||
}
|
||||
|
|
@ -4,19 +4,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
-->
|
||||
<script lang="typescript">
|
||||
import type { Readable } from "svelte/store";
|
||||
import ButtonGroupButton from "./ButtonGroupButton.svelte";
|
||||
import { onMount, createEventDispatcher, getContext } from "svelte";
|
||||
import { disabledKey, nightModeKey } from "./contextKeys";
|
||||
import { mergeTooltipAndShortcut } from "./helpers";
|
||||
|
||||
export let id: string;
|
||||
export let id: string | undefined;
|
||||
export let className = "";
|
||||
|
||||
export let tooltip: string | undefined;
|
||||
export let shortcutLabel: string | undefined;
|
||||
export let label: string;
|
||||
|
||||
$: title = mergeTooltipAndShortcut(tooltip, shortcutLabel);
|
||||
|
||||
export let onClick: (event: MouseEvent) => void;
|
||||
export let disables = true;
|
||||
export let dropdownToggle = false;
|
||||
|
||||
|
|
@ -56,6 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
@include button.btn-night;
|
||||
</style>
|
||||
|
||||
<ButtonGroupButton let:order={order}>
|
||||
<button
|
||||
bind:this={buttonRef}
|
||||
{id}
|
||||
|
|
@ -63,11 +59,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
class:dropdown-toggle={dropdownToggle}
|
||||
class:btn-day={!nightMode}
|
||||
class:btn-night={nightMode}
|
||||
style={`order: ${order};`}
|
||||
tabindex="-1"
|
||||
disabled={_disabled}
|
||||
{title}
|
||||
title={tooltip}
|
||||
{...extraProps}
|
||||
on:click={onClick}
|
||||
on:click
|
||||
on:mousedown|preventDefault>
|
||||
{label}
|
||||
<slot />
|
||||
</button>
|
||||
</ButtonGroupButton>
|
||||
|
|
|
|||
33
ts/editor-toolbar/NoteTypeButtons.svelte
Normal file
33
ts/editor-toolbar/NoteTypeButtons.svelte
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!--
|
||||
Copyright: Ankitects Pty Ltd and contributors
|
||||
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
-->
|
||||
<script lang="typescript">
|
||||
import { bridgeCommand } from "lib/bridgecommand";
|
||||
import * as tr from "lib/i18n";
|
||||
|
||||
import ButtonGroup from "./ButtonGroup.svelte";
|
||||
import LabelButton from "./LabelButton.svelte";
|
||||
import WithShortcut from "./WithShortcut.svelte";
|
||||
|
||||
export let api = {};
|
||||
</script>
|
||||
|
||||
<ButtonGroup id="notetype" class="" {api}>
|
||||
<LabelButton
|
||||
disables={false}
|
||||
tooltip={tr.editingCustomizeFields()}
|
||||
on:click={() => bridgeCommand("fields")}>
|
||||
{tr.editingFields()}...
|
||||
</LabelButton>
|
||||
|
||||
<WithShortcut shortcut="Control+KeyL" let:createShortcut let:shortcutLabel>
|
||||
<LabelButton
|
||||
disables={false}
|
||||
tooltip={`${tr.editingCustomizeCardTemplates()} (${shortcutLabel})`}
|
||||
on:click={() => bridgeCommand("cards")}
|
||||
on:mount={createShortcut}>
|
||||
{tr.editingCards()}...
|
||||
</LabelButton>
|
||||
</WithShortcut>
|
||||
</ButtonGroup>
|
||||
9
ts/editor-toolbar/WithShortcut.d.ts
vendored
9
ts/editor-toolbar/WithShortcut.d.ts
vendored
|
|
@ -1,9 +0,0 @@
|
|||
// Copyright: Ankitects Pty Ltd and contributors
|
||||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
import type { ToolbarItem } from "./types";
|
||||
|
||||
export interface WithShortcutProps {
|
||||
button: ToolbarItem;
|
||||
shortcut: string;
|
||||
optionalModifiers: string[];
|
||||
}
|
||||
|
|
@ -3,26 +3,16 @@ Copyright: Ankitects Pty Ltd and contributors
|
|||
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
-->
|
||||
<script lang="typescript">
|
||||
import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
|
||||
import type { ToolbarItem } from "./types";
|
||||
import type { Modifier } from "lib/shortcuts";
|
||||
|
||||
import { onDestroy } from "svelte";
|
||||
import { registerShortcut, getPlatformString } from "lib/shortcuts";
|
||||
|
||||
export let button: ToolbarItem;
|
||||
export let shortcut: string;
|
||||
export let optionalModifiers: Modifier[];
|
||||
export let optionalModifiers: Modifier[] | undefined = [];
|
||||
|
||||
function extend({ ...rest }: DynamicSvelteComponent): DynamicSvelteComponent {
|
||||
const shortcutLabel = getPlatformString(shortcut);
|
||||
|
||||
return {
|
||||
shortcutLabel,
|
||||
...rest,
|
||||
};
|
||||
}
|
||||
|
||||
let deregister: () => void;
|
||||
|
||||
function createShortcut({ detail }: CustomEvent): void {
|
||||
|
|
@ -40,7 +30,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
onDestroy(() => deregister());
|
||||
</script>
|
||||
|
||||
<svelte:component
|
||||
this={button.component}
|
||||
{...extend(button)}
|
||||
on:mount={createShortcut} />
|
||||
<slot {createShortcut} {shortcutLabel} />
|
||||
|
|
|
|||
|
|
@ -2,3 +2,5 @@
|
|||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
export const nightModeKey = Symbol("nightMode");
|
||||
export const disabledKey = Symbol("disabled");
|
||||
|
||||
export const buttonGroupKey = Symbol("buttonGroup");
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
// Copyright: Ankitects Pty Ltd and contributors
|
||||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
import RawButton from "./RawButton.svelte";
|
||||
import LabelButton from "./LabelButton.svelte";
|
||||
import type { LabelButtonProps } from "./LabelButton";
|
||||
import IconButton from "./IconButton.svelte";
|
||||
import type { IconButtonProps } from "./IconButton";
|
||||
import CommandIconButton from "./CommandIconButton.svelte";
|
||||
|
|
@ -11,8 +9,6 @@ import ColorPicker from "./ColorPicker.svelte";
|
|||
import type { ColorPickerProps } from "./ColorPicker";
|
||||
import SelectButton from "./SelectButton.svelte";
|
||||
import type { SelectButtonProps } from "./SelectButton";
|
||||
import ButtonGroup from "./ButtonGroup.svelte";
|
||||
import type { ButtonGroupProps } from "./ButtonGroup";
|
||||
|
||||
import ButtonDropdown from "./ButtonDropdown.svelte";
|
||||
import type { ButtonDropdownProps } from "./ButtonDropdown";
|
||||
|
|
@ -23,9 +19,6 @@ import type { DropdownItemProps } from "./DropdownItem";
|
|||
import WithDropdownMenu from "./WithDropdownMenu.svelte";
|
||||
import type { WithDropdownMenuProps } from "./WithDropdownMenu";
|
||||
|
||||
import WithShortcut from "./WithShortcut.svelte";
|
||||
import type { WithShortcutProps } from "./WithShortcut";
|
||||
|
||||
import WithLabel from "./WithLabel.svelte";
|
||||
import type { WithLabelProps } from "./WithLabel";
|
||||
|
||||
|
|
@ -34,9 +27,6 @@ import { dynamicComponent } from "sveltelib/dynamicComponent";
|
|||
export const rawButton = dynamicComponent<typeof RawButton, { html: string }>(
|
||||
RawButton
|
||||
);
|
||||
export const labelButton = dynamicComponent<typeof LabelButton, LabelButtonProps>(
|
||||
LabelButton
|
||||
);
|
||||
export const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(
|
||||
IconButton
|
||||
);
|
||||
|
|
@ -51,9 +41,6 @@ export const selectButton = dynamicComponent<typeof SelectButton, SelectButtonPr
|
|||
SelectButton
|
||||
);
|
||||
|
||||
export const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(
|
||||
ButtonGroup
|
||||
);
|
||||
export const buttonDropdown = dynamicComponent<
|
||||
typeof ButtonDropdown,
|
||||
ButtonDropdownProps
|
||||
|
|
@ -71,8 +58,4 @@ export const withDropdownMenu = dynamicComponent<
|
|||
WithDropdownMenuProps
|
||||
>(WithDropdownMenu);
|
||||
|
||||
export const withShortcut = dynamicComponent<typeof WithShortcut, WithShortcutProps>(
|
||||
WithShortcut
|
||||
);
|
||||
|
||||
export const withLabel = dynamicComponent<typeof WithLabel, WithLabelProps>(WithLabel);
|
||||
|
|
|
|||
|
|
@ -1,35 +1,35 @@
|
|||
// Copyright: Ankitects Pty Ltd and contributors
|
||||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
|
||||
// import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
|
||||
|
||||
import {
|
||||
buttonGroup,
|
||||
rawButton,
|
||||
labelButton,
|
||||
iconButton,
|
||||
commandIconButton,
|
||||
selectButton,
|
||||
dropdownMenu,
|
||||
dropdownItem,
|
||||
buttonDropdown,
|
||||
withDropdownMenu,
|
||||
withLabel,
|
||||
} from "editor-toolbar/dynamicComponents";
|
||||
// import {
|
||||
// buttonGroup,
|
||||
// rawButton,
|
||||
// labelButton,
|
||||
// iconButton,
|
||||
// commandIconButton,
|
||||
// selectButton,
|
||||
// dropdownMenu,
|
||||
// dropdownItem,
|
||||
// buttonDropdown,
|
||||
// withDropdownMenu,
|
||||
// withLabel,
|
||||
// } from "editor-toolbar/dynamicComponents";
|
||||
|
||||
export const editorToolbar: Record<
|
||||
string,
|
||||
(props: Record<string, unknown>) => DynamicSvelteComponent
|
||||
> = {
|
||||
buttonGroup,
|
||||
rawButton,
|
||||
labelButton,
|
||||
iconButton,
|
||||
commandIconButton,
|
||||
selectButton,
|
||||
// export const editorToolbar: Record<
|
||||
// string,
|
||||
// (props: Record<string, unknown>) => DynamicSvelteComponent
|
||||
// > = {
|
||||
// buttonGroup,
|
||||
// rawButton,
|
||||
// labelButton,
|
||||
// iconButton,
|
||||
// commandIconButton,
|
||||
// selectButton,
|
||||
|
||||
dropdownMenu,
|
||||
dropdownItem,
|
||||
buttonDropdown,
|
||||
withDropdownMenu,
|
||||
withLabel,
|
||||
};
|
||||
// dropdownMenu,
|
||||
// dropdownItem,
|
||||
// buttonDropdown,
|
||||
// withDropdownMenu,
|
||||
// withLabel,
|
||||
// };
|
||||
|
|
|
|||
|
|
@ -1,52 +1,52 @@
|
|||
// Copyright: Ankitects Pty Ltd and contributors
|
||||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
import type { ToolbarItem } from "editor-toolbar/types";
|
||||
// import type { ToolbarItem } from "editor-toolbar/types";
|
||||
|
||||
import * as tr from "lib/i18n";
|
||||
import { iconButton, withShortcut } from "editor-toolbar/dynamicComponents";
|
||||
// import * as tr from "lib/i18n";
|
||||
// import { iconButton, withShortcut } from "editor-toolbar/dynamicComponents";
|
||||
|
||||
import bracketsIcon from "./code-brackets.svg";
|
||||
// import bracketsIcon from "./code-brackets.svg";
|
||||
|
||||
import { forEditorField } from ".";
|
||||
import { wrap } from "./wrap";
|
||||
// import { forEditorField } from ".";
|
||||
// import { wrap } from "./wrap";
|
||||
|
||||
const clozePattern = /\{\{c(\d+)::/gu;
|
||||
function getCurrentHighestCloze(increment: boolean): number {
|
||||
let highest = 0;
|
||||
// const clozePattern = /\{\{c(\d+)::/gu;
|
||||
// function getCurrentHighestCloze(increment: boolean): number {
|
||||
// let highest = 0;
|
||||
|
||||
forEditorField([], (field) => {
|
||||
const fieldHTML = field.editingArea.editable.fieldHTML;
|
||||
const matches: number[] = [];
|
||||
let match: RegExpMatchArray | null = null;
|
||||
// forEditorField([], (field) => {
|
||||
// const fieldHTML = field.editingArea.editable.fieldHTML;
|
||||
// const matches: number[] = [];
|
||||
// let match: RegExpMatchArray | null = null;
|
||||
|
||||
while ((match = clozePattern.exec(fieldHTML))) {
|
||||
matches.push(Number(match[1]));
|
||||
}
|
||||
// while ((match = clozePattern.exec(fieldHTML))) {
|
||||
// matches.push(Number(match[1]));
|
||||
// }
|
||||
|
||||
highest = Math.max(highest, ...matches);
|
||||
});
|
||||
// highest = Math.max(highest, ...matches);
|
||||
// });
|
||||
|
||||
if (increment) {
|
||||
highest++;
|
||||
}
|
||||
// if (increment) {
|
||||
// highest++;
|
||||
// }
|
||||
|
||||
return Math.max(1, highest);
|
||||
}
|
||||
// return Math.max(1, highest);
|
||||
// }
|
||||
|
||||
function onCloze(event: KeyboardEvent | MouseEvent): void {
|
||||
const highestCloze = getCurrentHighestCloze(!event.getModifierState("Alt"));
|
||||
wrap(`{{c${highestCloze}::`, "}}");
|
||||
}
|
||||
// function onCloze(event: KeyboardEvent | MouseEvent): void {
|
||||
// const highestCloze = getCurrentHighestCloze(!event.getModifierState("Alt"));
|
||||
// wrap(`{{c${highestCloze}::`, "}}");
|
||||
// }
|
||||
|
||||
export function getClozeButton(): ToolbarItem {
|
||||
return withShortcut({
|
||||
id: "cloze",
|
||||
shortcut: "Control+Shift+KeyC",
|
||||
optionalModifiers: ["Alt"],
|
||||
button: iconButton({
|
||||
icon: bracketsIcon,
|
||||
onClick: onCloze,
|
||||
tooltip: tr.editingClozeDeletion(),
|
||||
}),
|
||||
});
|
||||
}
|
||||
// export function getClozeButton(): ToolbarItem {
|
||||
// return withShortcut({
|
||||
// id: "cloze",
|
||||
// shortcut: "Control+Shift+KeyC",
|
||||
// optionalModifiers: ["Alt"],
|
||||
// button: iconButton({
|
||||
// icon: bracketsIcon,
|
||||
// onClick: onCloze,
|
||||
// tooltip: tr.editingClozeDeletion(),
|
||||
// }),
|
||||
// });
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,54 +1,54 @@
|
|||
// Copyright: Ankitects Pty Ltd and contributors
|
||||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
import type { IterableToolbarItem } from "editor-toolbar/types";
|
||||
// import type { IterableToolbarItem } from "editor-toolbar/types";
|
||||
|
||||
import {
|
||||
iconButton,
|
||||
colorPicker,
|
||||
buttonGroup,
|
||||
withShortcut,
|
||||
} from "editor-toolbar/dynamicComponents";
|
||||
import * as tr from "lib/i18n";
|
||||
// import {
|
||||
// iconButton,
|
||||
// colorPicker,
|
||||
// buttonGroup,
|
||||
// withShortcut,
|
||||
// } from "editor-toolbar/dynamicComponents";
|
||||
// import * as tr from "lib/i18n";
|
||||
|
||||
import squareFillIcon from "./square-fill.svg";
|
||||
import "./color.css";
|
||||
// import squareFillIcon from "./square-fill.svg";
|
||||
// import "./color.css";
|
||||
|
||||
const foregroundColorKeyword = "--foreground-color";
|
||||
// const foregroundColorKeyword = "--foreground-color";
|
||||
|
||||
function setForegroundColor(color: string): void {
|
||||
document.documentElement.style.setProperty(foregroundColorKeyword, color);
|
||||
}
|
||||
// function setForegroundColor(color: string): void {
|
||||
// document.documentElement.style.setProperty(foregroundColorKeyword, color);
|
||||
// }
|
||||
|
||||
function getForecolor(): string {
|
||||
return document.documentElement.style.getPropertyValue(foregroundColorKeyword);
|
||||
}
|
||||
// function getForecolor(): string {
|
||||
// return document.documentElement.style.getPropertyValue(foregroundColorKeyword);
|
||||
// }
|
||||
|
||||
function wrapWithForecolor(color: string): void {
|
||||
document.execCommand("forecolor", false, color);
|
||||
}
|
||||
// function wrapWithForecolor(color: string): void {
|
||||
// document.execCommand("forecolor", false, color);
|
||||
// }
|
||||
|
||||
export function getColorGroup(): IterableToolbarItem {
|
||||
const forecolorButton = withShortcut({
|
||||
shortcut: "F7",
|
||||
button: iconButton({
|
||||
icon: squareFillIcon,
|
||||
className: "forecolor",
|
||||
onClick: () => wrapWithForecolor(getForecolor()),
|
||||
tooltip: tr.editingSetForegroundColor(),
|
||||
}),
|
||||
});
|
||||
// export function getColorGroup(): IterableToolbarItem {
|
||||
// const forecolorButton = withShortcut({
|
||||
// shortcut: "F7",
|
||||
// button: iconButton({
|
||||
// icon: squareFillIcon,
|
||||
// className: "forecolor",
|
||||
// onClick: () => wrapWithForecolor(getForecolor()),
|
||||
// tooltip: tr.editingSetForegroundColor(),
|
||||
// }),
|
||||
// });
|
||||
|
||||
const colorpickerButton = withShortcut({
|
||||
shortcut: "F8",
|
||||
button: colorPicker({
|
||||
onChange: ({ currentTarget }) =>
|
||||
setForegroundColor((currentTarget as HTMLInputElement).value),
|
||||
tooltip: tr.editingChangeColor(),
|
||||
}),
|
||||
});
|
||||
// const colorpickerButton = withShortcut({
|
||||
// shortcut: "F8",
|
||||
// button: colorPicker({
|
||||
// onChange: ({ currentTarget }) =>
|
||||
// setForegroundColor((currentTarget as HTMLInputElement).value),
|
||||
// tooltip: tr.editingChangeColor(),
|
||||
// }),
|
||||
// });
|
||||
|
||||
return buttonGroup({
|
||||
id: "color",
|
||||
items: [forecolorButton, colorpickerButton],
|
||||
});
|
||||
}
|
||||
// return buttonGroup({
|
||||
// id: "color",
|
||||
// items: [forecolorButton, colorpickerButton],
|
||||
// });
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,129 +1,129 @@
|
|||
// Copyright: Ankitects Pty Ltd and contributors
|
||||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
import type { IterableToolbarItem } from "editor-toolbar/types";
|
||||
import type { EditingArea } from "./editingArea";
|
||||
// import type { IterableToolbarItem } from "editor-toolbar/types";
|
||||
// import type { EditingArea } from "./editingArea";
|
||||
|
||||
import * as tr from "lib/i18n";
|
||||
import {
|
||||
commandIconButton,
|
||||
iconButton,
|
||||
buttonGroup,
|
||||
buttonDropdown,
|
||||
withDropdownMenu,
|
||||
} from "editor-toolbar/dynamicComponents";
|
||||
// import * as tr from "lib/i18n";
|
||||
// import {
|
||||
// commandIconButton,
|
||||
// iconButton,
|
||||
// buttonGroup,
|
||||
// buttonDropdown,
|
||||
// withDropdownMenu,
|
||||
// } from "editor-toolbar/dynamicComponents";
|
||||
|
||||
import { getListItem } from "./helpers";
|
||||
// import { getListItem } from "./helpers";
|
||||
|
||||
import ulIcon from "./list-ul.svg";
|
||||
import olIcon from "./list-ol.svg";
|
||||
import listOptionsIcon from "./text-paragraph.svg";
|
||||
// import ulIcon from "./list-ul.svg";
|
||||
// import olIcon from "./list-ol.svg";
|
||||
// import listOptionsIcon from "./text-paragraph.svg";
|
||||
|
||||
import justifyFullIcon from "./justify.svg";
|
||||
import justifyLeftIcon from "./text-left.svg";
|
||||
import justifyRightIcon from "./text-right.svg";
|
||||
import justifyCenterIcon from "./text-center.svg";
|
||||
// import justifyFullIcon from "./justify.svg";
|
||||
// import justifyLeftIcon from "./text-left.svg";
|
||||
// import justifyRightIcon from "./text-right.svg";
|
||||
// import justifyCenterIcon from "./text-center.svg";
|
||||
|
||||
import indentIcon from "./text-indent-left.svg";
|
||||
import outdentIcon from "./text-indent-right.svg";
|
||||
// import indentIcon from "./text-indent-left.svg";
|
||||
// import outdentIcon from "./text-indent-right.svg";
|
||||
|
||||
const outdentListItem = () => {
|
||||
const currentField = document.activeElement as EditingArea;
|
||||
if (getListItem(currentField.shadowRoot!)) {
|
||||
document.execCommand("outdent");
|
||||
}
|
||||
};
|
||||
// const outdentListItem = () => {
|
||||
// const currentField = document.activeElement as EditingArea;
|
||||
// if (getListItem(currentField.shadowRoot!)) {
|
||||
// document.execCommand("outdent");
|
||||
// }
|
||||
// };
|
||||
|
||||
const indentListItem = () => {
|
||||
const currentField = document.activeElement as EditingArea;
|
||||
if (getListItem(currentField.shadowRoot!)) {
|
||||
document.execCommand("indent");
|
||||
}
|
||||
};
|
||||
// const indentListItem = () => {
|
||||
// const currentField = document.activeElement as EditingArea;
|
||||
// if (getListItem(currentField.shadowRoot!)) {
|
||||
// document.execCommand("indent");
|
||||
// }
|
||||
// };
|
||||
|
||||
export function getFormatBlockMenus(): IterableToolbarItem[] {
|
||||
const justifyLeftButton = commandIconButton({
|
||||
icon: justifyLeftIcon,
|
||||
command: "justifyLeft",
|
||||
tooltip: tr.editingAlignLeft(),
|
||||
});
|
||||
// export function getFormatBlockMenus(): IterableToolbarItem[] {
|
||||
// const justifyLeftButton = commandIconButton({
|
||||
// icon: justifyLeftIcon,
|
||||
// command: "justifyLeft",
|
||||
// tooltip: tr.editingAlignLeft(),
|
||||
// });
|
||||
|
||||
const justifyCenterButton = commandIconButton({
|
||||
icon: justifyCenterIcon,
|
||||
command: "justifyCenter",
|
||||
tooltip: tr.editingCenter(),
|
||||
});
|
||||
// const justifyCenterButton = commandIconButton({
|
||||
// icon: justifyCenterIcon,
|
||||
// command: "justifyCenter",
|
||||
// tooltip: tr.editingCenter(),
|
||||
// });
|
||||
|
||||
const justifyRightButton = commandIconButton({
|
||||
icon: justifyRightIcon,
|
||||
command: "justifyRight",
|
||||
tooltip: tr.editingAlignRight(),
|
||||
});
|
||||
// const justifyRightButton = commandIconButton({
|
||||
// icon: justifyRightIcon,
|
||||
// command: "justifyRight",
|
||||
// tooltip: tr.editingAlignRight(),
|
||||
// });
|
||||
|
||||
const justifyFullButton = commandIconButton({
|
||||
icon: justifyFullIcon,
|
||||
command: "justifyFull",
|
||||
tooltip: tr.editingJustify(),
|
||||
});
|
||||
// const justifyFullButton = commandIconButton({
|
||||
// icon: justifyFullIcon,
|
||||
// command: "justifyFull",
|
||||
// tooltip: tr.editingJustify(),
|
||||
// });
|
||||
|
||||
const justifyGroup = buttonGroup({
|
||||
id: "justify",
|
||||
items: [
|
||||
justifyLeftButton,
|
||||
justifyCenterButton,
|
||||
justifyRightButton,
|
||||
justifyFullButton,
|
||||
],
|
||||
});
|
||||
// const justifyGroup = buttonGroup({
|
||||
// id: "justify",
|
||||
// items: [
|
||||
// justifyLeftButton,
|
||||
// justifyCenterButton,
|
||||
// justifyRightButton,
|
||||
// justifyFullButton,
|
||||
// ],
|
||||
// });
|
||||
|
||||
const outdentButton = iconButton({
|
||||
icon: outdentIcon,
|
||||
onClick: outdentListItem,
|
||||
tooltip: tr.editingOutdent(),
|
||||
});
|
||||
// const outdentButton = iconButton({
|
||||
// icon: outdentIcon,
|
||||
// onClick: outdentListItem,
|
||||
// tooltip: tr.editingOutdent(),
|
||||
// });
|
||||
|
||||
const indentButton = iconButton({
|
||||
icon: indentIcon,
|
||||
onClick: indentListItem,
|
||||
tooltip: tr.editingIndent(),
|
||||
});
|
||||
// const indentButton = iconButton({
|
||||
// icon: indentIcon,
|
||||
// onClick: indentListItem,
|
||||
// tooltip: tr.editingIndent(),
|
||||
// });
|
||||
|
||||
const indentationGroup = buttonGroup({
|
||||
id: "indentation",
|
||||
items: [outdentButton, indentButton],
|
||||
});
|
||||
// const indentationGroup = buttonGroup({
|
||||
// id: "indentation",
|
||||
// items: [outdentButton, indentButton],
|
||||
// });
|
||||
|
||||
const formattingOptions = buttonDropdown({
|
||||
id: "listFormatting",
|
||||
items: [justifyGroup, indentationGroup],
|
||||
});
|
||||
// const formattingOptions = buttonDropdown({
|
||||
// id: "listFormatting",
|
||||
// items: [justifyGroup, indentationGroup],
|
||||
// });
|
||||
|
||||
return [formattingOptions];
|
||||
}
|
||||
// return [formattingOptions];
|
||||
// }
|
||||
|
||||
export function getFormatBlockGroup(): IterableToolbarItem {
|
||||
const ulButton = commandIconButton({
|
||||
icon: ulIcon,
|
||||
command: "insertUnorderedList",
|
||||
tooltip: tr.editingUnorderedList(),
|
||||
});
|
||||
// export function getFormatBlockGroup(): IterableToolbarItem {
|
||||
// const ulButton = commandIconButton({
|
||||
// icon: ulIcon,
|
||||
// command: "insertUnorderedList",
|
||||
// tooltip: tr.editingUnorderedList(),
|
||||
// });
|
||||
|
||||
const olButton = commandIconButton({
|
||||
icon: olIcon,
|
||||
command: "insertOrderedList",
|
||||
tooltip: tr.editingOrderedList(),
|
||||
});
|
||||
// const olButton = commandIconButton({
|
||||
// icon: olIcon,
|
||||
// command: "insertOrderedList",
|
||||
// tooltip: tr.editingOrderedList(),
|
||||
// });
|
||||
|
||||
const listFormattingButton = iconButton({
|
||||
icon: listOptionsIcon,
|
||||
});
|
||||
// const listFormattingButton = iconButton({
|
||||
// icon: listOptionsIcon,
|
||||
// });
|
||||
|
||||
const listFormatting = withDropdownMenu({
|
||||
button: listFormattingButton,
|
||||
menuId: "listFormatting",
|
||||
});
|
||||
// const listFormatting = withDropdownMenu({
|
||||
// button: listFormattingButton,
|
||||
// menuId: "listFormatting",
|
||||
// });
|
||||
|
||||
return buttonGroup({
|
||||
id: "blockFormatting",
|
||||
items: [ulButton, olButton, listFormatting],
|
||||
});
|
||||
}
|
||||
// return buttonGroup({
|
||||
// id: "blockFormatting",
|
||||
// items: [ulButton, olButton, listFormatting],
|
||||
// });
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,88 +1,88 @@
|
|||
// Copyright: Ankitects Pty Ltd and contributors
|
||||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
import type { IterableToolbarItem } from "editor-toolbar/types";
|
||||
// import type { IterableToolbarItem } from "editor-toolbar/types";
|
||||
|
||||
import * as tr from "lib/i18n";
|
||||
import {
|
||||
commandIconButton,
|
||||
iconButton,
|
||||
buttonGroup,
|
||||
withShortcut,
|
||||
} from "editor-toolbar/dynamicComponents";
|
||||
// import * as tr from "lib/i18n";
|
||||
// import {
|
||||
// commandIconButton,
|
||||
// iconButton,
|
||||
// buttonGroup,
|
||||
// withShortcut,
|
||||
// } from "editor-toolbar/dynamicComponents";
|
||||
|
||||
import boldIcon from "./type-bold.svg";
|
||||
import italicIcon from "./type-italic.svg";
|
||||
import underlineIcon from "./type-underline.svg";
|
||||
import superscriptIcon from "./format-superscript.svg";
|
||||
import subscriptIcon from "./format-subscript.svg";
|
||||
import eraserIcon from "./eraser.svg";
|
||||
// import boldIcon from "./type-bold.svg";
|
||||
// import italicIcon from "./type-italic.svg";
|
||||
// import underlineIcon from "./type-underline.svg";
|
||||
// import superscriptIcon from "./format-superscript.svg";
|
||||
// import subscriptIcon from "./format-subscript.svg";
|
||||
// import eraserIcon from "./eraser.svg";
|
||||
|
||||
export function getFormatInlineGroup(): IterableToolbarItem {
|
||||
const boldButton = withShortcut({
|
||||
shortcut: "Control+KeyB",
|
||||
button: commandIconButton({
|
||||
icon: boldIcon,
|
||||
tooltip: tr.editingBoldText(),
|
||||
command: "bold",
|
||||
}),
|
||||
});
|
||||
// export function getFormatInlineGroup(): IterableToolbarItem {
|
||||
// const boldButton = withShortcut({
|
||||
// shortcut: "Control+KeyB",
|
||||
// button: commandIconButton({
|
||||
// icon: boldIcon,
|
||||
// tooltip: tr.editingBoldText(),
|
||||
// command: "bold",
|
||||
// }),
|
||||
// });
|
||||
|
||||
const italicButton = withShortcut({
|
||||
shortcut: "Control+KeyI",
|
||||
button: commandIconButton({
|
||||
icon: italicIcon,
|
||||
tooltip: tr.editingItalicText(),
|
||||
command: "italic",
|
||||
}),
|
||||
});
|
||||
// const italicButton = withShortcut({
|
||||
// shortcut: "Control+KeyI",
|
||||
// button: commandIconButton({
|
||||
// icon: italicIcon,
|
||||
// tooltip: tr.editingItalicText(),
|
||||
// command: "italic",
|
||||
// }),
|
||||
// });
|
||||
|
||||
const underlineButton = withShortcut({
|
||||
shortcut: "Control+KeyU",
|
||||
button: commandIconButton({
|
||||
icon: underlineIcon,
|
||||
tooltip: tr.editingUnderlineText(),
|
||||
command: "underline",
|
||||
}),
|
||||
});
|
||||
// const underlineButton = withShortcut({
|
||||
// shortcut: "Control+KeyU",
|
||||
// button: commandIconButton({
|
||||
// icon: underlineIcon,
|
||||
// tooltip: tr.editingUnderlineText(),
|
||||
// command: "underline",
|
||||
// }),
|
||||
// });
|
||||
|
||||
const superscriptButton = withShortcut({
|
||||
shortcut: "Control+Shift+Equal",
|
||||
button: commandIconButton({
|
||||
icon: superscriptIcon,
|
||||
tooltip: tr.editingSuperscript(),
|
||||
command: "superscript",
|
||||
}),
|
||||
});
|
||||
// const superscriptButton = withShortcut({
|
||||
// shortcut: "Control+Shift+Equal",
|
||||
// button: commandIconButton({
|
||||
// icon: superscriptIcon,
|
||||
// tooltip: tr.editingSuperscript(),
|
||||
// command: "superscript",
|
||||
// }),
|
||||
// });
|
||||
|
||||
const subscriptButton = withShortcut({
|
||||
shortcut: "Control+Equal",
|
||||
button: commandIconButton({
|
||||
icon: subscriptIcon,
|
||||
tooltip: tr.editingSubscript(),
|
||||
command: "subscript",
|
||||
}),
|
||||
});
|
||||
// const subscriptButton = withShortcut({
|
||||
// shortcut: "Control+Equal",
|
||||
// button: commandIconButton({
|
||||
// icon: subscriptIcon,
|
||||
// tooltip: tr.editingSubscript(),
|
||||
// command: "subscript",
|
||||
// }),
|
||||
// });
|
||||
|
||||
const removeFormatButton = withShortcut({
|
||||
shortcut: "Control+KeyR",
|
||||
button: iconButton({
|
||||
icon: eraserIcon,
|
||||
tooltip: tr.editingRemoveFormatting(),
|
||||
onClick: () => {
|
||||
document.execCommand("removeFormat");
|
||||
},
|
||||
}),
|
||||
});
|
||||
// const removeFormatButton = withShortcut({
|
||||
// shortcut: "Control+KeyR",
|
||||
// button: iconButton({
|
||||
// icon: eraserIcon,
|
||||
// tooltip: tr.editingRemoveFormatting(),
|
||||
// onClick: () => {
|
||||
// document.execCommand("removeFormat");
|
||||
// },
|
||||
// }),
|
||||
// });
|
||||
|
||||
return buttonGroup({
|
||||
id: "inlineFormatting",
|
||||
items: [
|
||||
boldButton,
|
||||
italicButton,
|
||||
underlineButton,
|
||||
superscriptButton,
|
||||
subscriptButton,
|
||||
removeFormatButton,
|
||||
],
|
||||
});
|
||||
}
|
||||
// return buttonGroup({
|
||||
// id: "inlineFormatting",
|
||||
// items: [
|
||||
// boldButton,
|
||||
// italicButton,
|
||||
// underlineButton,
|
||||
// superscriptButton,
|
||||
// subscriptButton,
|
||||
// removeFormatButton,
|
||||
// ],
|
||||
// });
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export { setNoteId, getNoteId } from "./noteId";
|
|||
export { saveNow } from "./changeTimer";
|
||||
export { wrap, wrapIntoText } from "./wrap";
|
||||
|
||||
export * from "./addons";
|
||||
// export * from "./addons";
|
||||
|
||||
declare global {
|
||||
interface Selection {
|
||||
|
|
|
|||
|
|
@ -1,35 +1,35 @@
|
|||
// Copyright: Ankitects Pty Ltd and contributors
|
||||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
import type { IterableToolbarItem } from "editor-toolbar/types";
|
||||
// import type { IterableToolbarItem } from "editor-toolbar/types";
|
||||
|
||||
import { bridgeCommand } from "lib/bridgecommand";
|
||||
import * as tr from "lib/i18n";
|
||||
import {
|
||||
labelButton,
|
||||
buttonGroup,
|
||||
withShortcut,
|
||||
} from "editor-toolbar/dynamicComponents";
|
||||
// import { bridgeCommand } from "lib/bridgecommand";
|
||||
// import * as tr from "lib/i18n";
|
||||
// import {
|
||||
// labelButton,
|
||||
// buttonGroup,
|
||||
// withShortcut,
|
||||
// } from "editor-toolbar/dynamicComponents";
|
||||
|
||||
export function getNotetypeGroup(): IterableToolbarItem {
|
||||
const fieldsButton = labelButton({
|
||||
onClick: () => bridgeCommand("fields"),
|
||||
disables: false,
|
||||
label: `${tr.editingFields()}...`,
|
||||
tooltip: tr.editingCustomizeFields(),
|
||||
});
|
||||
// export function getNotetypeGroup(): IterableToolbarItem {
|
||||
// const fieldsButton = labelButton({
|
||||
// onClick: () => bridgeCommand("fields"),
|
||||
// disables: false,
|
||||
// label: `${tr.editingFields()}...`,
|
||||
// tooltip: tr.editingCustomizeFields(),
|
||||
// });
|
||||
|
||||
const cardsButton = withShortcut({
|
||||
shortcut: "Control+KeyL",
|
||||
button: labelButton({
|
||||
onClick: () => bridgeCommand("cards"),
|
||||
disables: false,
|
||||
label: `${tr.editingCards()}...`,
|
||||
tooltip: tr.editingCustomizeCardTemplates(),
|
||||
}),
|
||||
});
|
||||
// const cardsButton = withShortcut({
|
||||
// shortcut: "Control+KeyL",
|
||||
// button: labelButton({
|
||||
// onClick: () => bridgeCommand("cards"),
|
||||
// disables: false,
|
||||
// label: `${tr.editingCards()}...`,
|
||||
// tooltip: tr.editingCustomizeCardTemplates(),
|
||||
// }),
|
||||
// });
|
||||
|
||||
return buttonGroup({
|
||||
id: "notetype",
|
||||
items: [fieldsButton, cardsButton],
|
||||
});
|
||||
}
|
||||
// return buttonGroup({
|
||||
// id: "notetype",
|
||||
// items: [fieldsButton, cardsButton],
|
||||
// });
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,143 +1,143 @@
|
|||
// Copyright: Ankitects Pty Ltd and contributors
|
||||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
import type { IterableToolbarItem } from "editor-toolbar/types";
|
||||
// import type { IterableToolbarItem } from "editor-toolbar/types";
|
||||
|
||||
import { bridgeCommand } from "lib/bridgecommand";
|
||||
import {
|
||||
iconButton,
|
||||
withDropdownMenu,
|
||||
dropdownMenu,
|
||||
dropdownItem,
|
||||
buttonGroup,
|
||||
withShortcut,
|
||||
} from "editor-toolbar/dynamicComponents";
|
||||
import * as tr from "lib/i18n";
|
||||
// import { bridgeCommand } from "lib/bridgecommand";
|
||||
// import {
|
||||
// iconButton,
|
||||
// withDropdownMenu,
|
||||
// dropdownMenu,
|
||||
// dropdownItem,
|
||||
// buttonGroup,
|
||||
// withShortcut,
|
||||
// } from "editor-toolbar/dynamicComponents";
|
||||
// import * as tr from "lib/i18n";
|
||||
|
||||
import { wrap } from "./wrap";
|
||||
// import { wrap } from "./wrap";
|
||||
|
||||
import paperclipIcon from "./paperclip.svg";
|
||||
import micIcon from "./mic.svg";
|
||||
import functionIcon from "./function-variant.svg";
|
||||
import xmlIcon from "./xml.svg";
|
||||
// import paperclipIcon from "./paperclip.svg";
|
||||
// import micIcon from "./mic.svg";
|
||||
// import functionIcon from "./function-variant.svg";
|
||||
// import xmlIcon from "./xml.svg";
|
||||
|
||||
import { getClozeButton } from "./cloze";
|
||||
// import { getClozeButton } from "./cloze";
|
||||
|
||||
function onAttachment(): void {
|
||||
bridgeCommand("attach");
|
||||
}
|
||||
// function onAttachment(): void {
|
||||
// bridgeCommand("attach");
|
||||
// }
|
||||
|
||||
function onRecord(): void {
|
||||
bridgeCommand("record");
|
||||
}
|
||||
// function onRecord(): void {
|
||||
// bridgeCommand("record");
|
||||
// }
|
||||
|
||||
function onHtmlEdit(): void {
|
||||
bridgeCommand("htmlEdit");
|
||||
}
|
||||
// function onHtmlEdit(): void {
|
||||
// bridgeCommand("htmlEdit");
|
||||
// }
|
||||
|
||||
const mathjaxMenuId = "mathjaxMenu";
|
||||
// const mathjaxMenuId = "mathjaxMenu";
|
||||
|
||||
export function getTemplateGroup(): IterableToolbarItem {
|
||||
const attachmentButton = withShortcut({
|
||||
shortcut: "F3",
|
||||
button: iconButton({
|
||||
icon: paperclipIcon,
|
||||
onClick: onAttachment,
|
||||
tooltip: tr.editingAttachPicturesaudiovideo(),
|
||||
}),
|
||||
});
|
||||
// export function getTemplateGroup(): IterableToolbarItem {
|
||||
// const attachmentButton = withShortcut({
|
||||
// shortcut: "F3",
|
||||
// button: iconButton({
|
||||
// icon: paperclipIcon,
|
||||
// onClick: onAttachment,
|
||||
// tooltip: tr.editingAttachPicturesaudiovideo(),
|
||||
// }),
|
||||
// });
|
||||
|
||||
const recordButton = withShortcut({
|
||||
shortcut: "F5",
|
||||
button: iconButton({
|
||||
icon: micIcon,
|
||||
onClick: onRecord,
|
||||
tooltip: tr.editingRecordAudio(),
|
||||
}),
|
||||
});
|
||||
// const recordButton = withShortcut({
|
||||
// shortcut: "F5",
|
||||
// button: iconButton({
|
||||
// icon: micIcon,
|
||||
// onClick: onRecord,
|
||||
// tooltip: tr.editingRecordAudio(),
|
||||
// }),
|
||||
// });
|
||||
|
||||
const mathjaxButton = iconButton({
|
||||
icon: functionIcon,
|
||||
});
|
||||
// const mathjaxButton = iconButton({
|
||||
// icon: functionIcon,
|
||||
// });
|
||||
|
||||
const mathjaxButtonWithMenu = withDropdownMenu({
|
||||
button: mathjaxButton,
|
||||
menuId: mathjaxMenuId,
|
||||
});
|
||||
// const mathjaxButtonWithMenu = withDropdownMenu({
|
||||
// button: mathjaxButton,
|
||||
// menuId: mathjaxMenuId,
|
||||
// });
|
||||
|
||||
const htmlButton = withShortcut({
|
||||
shortcut: "Control+Shift+KeyX",
|
||||
button: iconButton({
|
||||
icon: xmlIcon,
|
||||
onClick: onHtmlEdit,
|
||||
tooltip: tr.editingHtmlEditor(),
|
||||
}),
|
||||
});
|
||||
// const htmlButton = withShortcut({
|
||||
// shortcut: "Control+Shift+KeyX",
|
||||
// button: iconButton({
|
||||
// icon: xmlIcon,
|
||||
// onClick: onHtmlEdit,
|
||||
// tooltip: tr.editingHtmlEditor(),
|
||||
// }),
|
||||
// });
|
||||
|
||||
return buttonGroup({
|
||||
id: "template",
|
||||
items: [
|
||||
attachmentButton,
|
||||
recordButton,
|
||||
getClozeButton(),
|
||||
mathjaxButtonWithMenu,
|
||||
htmlButton,
|
||||
],
|
||||
});
|
||||
}
|
||||
// return buttonGroup({
|
||||
// id: "template",
|
||||
// items: [
|
||||
// attachmentButton,
|
||||
// recordButton,
|
||||
// getClozeButton(),
|
||||
// mathjaxButtonWithMenu,
|
||||
// htmlButton,
|
||||
// ],
|
||||
// });
|
||||
// }
|
||||
|
||||
export function getTemplateMenus(): IterableToolbarItem[] {
|
||||
const mathjaxMenuItems = [
|
||||
withShortcut({
|
||||
shortcut: "Control+KeyM, KeyM",
|
||||
button: dropdownItem({
|
||||
onClick: () => wrap("\\(", "\\)"),
|
||||
label: tr.editingMathjaxInline(),
|
||||
}),
|
||||
}),
|
||||
withShortcut({
|
||||
shortcut: "Control+KeyM, KeyE",
|
||||
button: dropdownItem({
|
||||
onClick: () => wrap("\\[", "\\]"),
|
||||
label: tr.editingMathjaxBlock(),
|
||||
}),
|
||||
}),
|
||||
withShortcut({
|
||||
shortcut: "Control+KeyM, KeyC",
|
||||
button: dropdownItem({
|
||||
onClick: () => wrap("\\(\\ce{", "}\\)"),
|
||||
label: tr.editingMathjaxChemistry(),
|
||||
}),
|
||||
}),
|
||||
];
|
||||
// export function getTemplateMenus(): IterableToolbarItem[] {
|
||||
// const mathjaxMenuItems = [
|
||||
// withShortcut({
|
||||
// shortcut: "Control+KeyM, KeyM",
|
||||
// button: dropdownItem({
|
||||
// onClick: () => wrap("\\(", "\\)"),
|
||||
// label: tr.editingMathjaxInline(),
|
||||
// }),
|
||||
// }),
|
||||
// withShortcut({
|
||||
// shortcut: "Control+KeyM, KeyE",
|
||||
// button: dropdownItem({
|
||||
// onClick: () => wrap("\\[", "\\]"),
|
||||
// label: tr.editingMathjaxBlock(),
|
||||
// }),
|
||||
// }),
|
||||
// withShortcut({
|
||||
// shortcut: "Control+KeyM, KeyC",
|
||||
// button: dropdownItem({
|
||||
// onClick: () => wrap("\\(\\ce{", "}\\)"),
|
||||
// label: tr.editingMathjaxChemistry(),
|
||||
// }),
|
||||
// }),
|
||||
// ];
|
||||
|
||||
const latexMenuItems = [
|
||||
withShortcut({
|
||||
shortcut: "Control+KeyT, KeyT",
|
||||
button: dropdownItem({
|
||||
onClick: () => wrap("[latex]", "[/latex]"),
|
||||
label: tr.editingLatex(),
|
||||
}),
|
||||
}),
|
||||
withShortcut({
|
||||
shortcut: "Control+KeyT, KeyE",
|
||||
button: dropdownItem({
|
||||
onClick: () => wrap("[$]", "[/$]"),
|
||||
label: tr.editingLatexEquation(),
|
||||
}),
|
||||
}),
|
||||
withShortcut({
|
||||
shortcut: "Control+KeyT, KeyM",
|
||||
button: dropdownItem({
|
||||
onClick: () => wrap("[$$]", "[/$$]"),
|
||||
label: tr.editingLatexMathEnv(),
|
||||
}),
|
||||
}),
|
||||
];
|
||||
// const latexMenuItems = [
|
||||
// withShortcut({
|
||||
// shortcut: "Control+KeyT, KeyT",
|
||||
// button: dropdownItem({
|
||||
// onClick: () => wrap("[latex]", "[/latex]"),
|
||||
// label: tr.editingLatex(),
|
||||
// }),
|
||||
// }),
|
||||
// withShortcut({
|
||||
// shortcut: "Control+KeyT, KeyE",
|
||||
// button: dropdownItem({
|
||||
// onClick: () => wrap("[$]", "[/$]"),
|
||||
// label: tr.editingLatexEquation(),
|
||||
// }),
|
||||
// }),
|
||||
// withShortcut({
|
||||
// shortcut: "Control+KeyT, KeyM",
|
||||
// button: dropdownItem({
|
||||
// onClick: () => wrap("[$$]", "[/$$]"),
|
||||
// label: tr.editingLatexMathEnv(),
|
||||
// }),
|
||||
// }),
|
||||
// ];
|
||||
|
||||
const mathjaxMenu = dropdownMenu({
|
||||
id: mathjaxMenuId,
|
||||
items: [...mathjaxMenuItems, ...latexMenuItems],
|
||||
});
|
||||
// const mathjaxMenu = dropdownMenu({
|
||||
// id: mathjaxMenuId,
|
||||
// items: [...mathjaxMenuItems, ...latexMenuItems],
|
||||
// });
|
||||
|
||||
return [mathjaxMenu];
|
||||
}
|
||||
// return [mathjaxMenu];
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
import { editorToolbar, EditorToolbar } from "editor-toolbar";
|
||||
|
||||
import { getNotetypeGroup } from "./notetype";
|
||||
import { getFormatInlineGroup } from "./formatInline";
|
||||
import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock";
|
||||
import { getColorGroup } from "./color";
|
||||
import { getTemplateGroup, getTemplateMenus } from "./template";
|
||||
// import { getNotetypeGroup } from "./notetype";
|
||||
// import { getFormatInlineGroup } from "./formatInline";
|
||||
// import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock";
|
||||
// import { getColorGroup } from "./color";
|
||||
// import { getTemplateGroup, getTemplateMenus } from "./template";
|
||||
|
||||
export function initToolbar(i18n: Promise<void>) {
|
||||
let toolbarResolve: (value: EditorToolbar) => void;
|
||||
|
|
@ -20,14 +20,14 @@ export function initToolbar(i18n: Promise<void>) {
|
|||
const anchor = document.getElementById("fields")!;
|
||||
|
||||
const buttons = [
|
||||
getNotetypeGroup(),
|
||||
getFormatInlineGroup(),
|
||||
getFormatBlockGroup(),
|
||||
getColorGroup(),
|
||||
getTemplateGroup(),
|
||||
// getNotetypeGroup(),
|
||||
// getFormatInlineGroup(),
|
||||
// getFormatBlockGroup(),
|
||||
// getColorGroup(),
|
||||
// getTemplateGroup(),
|
||||
];
|
||||
|
||||
const menus = [...getFormatBlockMenus(), ...getTemplateMenus()];
|
||||
const menus = [/*...getFormatBlockMenus(), ...getTemplateMenus()*/];
|
||||
|
||||
toolbarResolve(editorToolbar({ target, anchor, buttons, menus }));
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue