mirror of
https://github.com/ankitects/anki.git
synced 2025-09-20 15:02:21 -04:00
Translate ts files in ts/editor to svelte files
This commit is contained in:
Henrik Giesel
parent
47b1cfe804
commit
8aa3f5f2fa
26 changed files with 414 additions and 703 deletions
9
ts/components/ButtonDropdown.d.ts
vendored
9
ts/components/ButtonDropdown.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 ButtonDropdownProps {
|
||||
id: string;
|
||||
className?: string;
|
||||
items: ToolbarItem[];
|
||||
}
|
||||
8
ts/components/ColorPicker.d.ts
vendored
8
ts/components/ColorPicker.d.ts
vendored
|
|
@ -1,8 +0,0 @@
|
|||
// Copyright: Ankitects Pty Ltd and contributors
|
||||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
export interface ColorPickerProps {
|
||||
id?: string;
|
||||
className?: string;
|
||||
tooltip: string;
|
||||
onChange: (event: Event) => void;
|
||||
}
|
||||
16
ts/components/CommandIconButton.d.ts
vendored
16
ts/components/CommandIconButton.d.ts
vendored
|
|
@ -1,16 +0,0 @@
|
|||
// Copyright: Ankitects Pty Ltd and contributors
|
||||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
export interface CommandIconButtonProps {
|
||||
id?: string;
|
||||
className?: string;
|
||||
tooltip: string;
|
||||
icon: string;
|
||||
|
||||
command: string;
|
||||
onClick: (event: MouseEvent) => void;
|
||||
|
||||
onUpdate: (event: Event) => boolean;
|
||||
|
||||
disables?: boolean;
|
||||
dropdownToggle?: boolean;
|
||||
}
|
||||
|
|
@ -48,22 +48,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
export let id: string;
|
||||
export let className = "";
|
||||
export let tooltip: string;
|
||||
export let shortcutLabel: string | undefined;
|
||||
export let icon: string;
|
||||
|
||||
export let command: string;
|
||||
export let onClick = (_event: MouseEvent) => {
|
||||
document.execCommand(command);
|
||||
};
|
||||
|
||||
export let onClick: (event: Event) => void;
|
||||
|
||||
function onClickWrapped(event: MouseEvent): void {
|
||||
onClick(event);
|
||||
updateButton(command, event);
|
||||
}
|
||||
|
||||
export let onUpdate = (_event: Event) => document.queryCommandState(command);
|
||||
// document.queryCommandState(command);
|
||||
export let update: (event: Event) => boolean;
|
||||
|
||||
updateMap.set(command, onUpdate);
|
||||
updateMap.set(command, update);
|
||||
|
||||
let active = false;
|
||||
|
||||
|
|
@ -81,11 +78,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
{id}
|
||||
{className}
|
||||
{tooltip}
|
||||
{shortcutLabel}
|
||||
{active}
|
||||
{disables}
|
||||
{dropdownToggle}
|
||||
onClick={onClickWrapped}
|
||||
on:click
|
||||
on:mount>
|
||||
{@html icon}
|
||||
<slot />
|
||||
</SquareButton>
|
||||
|
|
|
|||
11
ts/components/DropdownItem.d.ts
vendored
11
ts/components/DropdownItem.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 DropdownItemProps {
|
||||
id?: string;
|
||||
className?: string;
|
||||
tooltip: string;
|
||||
|
||||
onClick: (event: MouseEvent) => void;
|
||||
label: string;
|
||||
endLabel: string;
|
||||
}
|
||||
8
ts/components/DropdownMenu.d.ts
vendored
8
ts/components/DropdownMenu.d.ts
vendored
|
|
@ -1,8 +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 DropdownMenuProps {
|
||||
id: string;
|
||||
items: ToolbarItem[];
|
||||
}
|
||||
9
ts/components/IconButton.d.ts
vendored
9
ts/components/IconButton.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
|
||||
export interface IconButtonProps {
|
||||
id?: string;
|
||||
className?: string;
|
||||
tooltip: string;
|
||||
icon: string;
|
||||
onClick: (event: MouseEvent) => void;
|
||||
}
|
||||
15
ts/components/SelectButton.d.ts
vendored
15
ts/components/SelectButton.d.ts
vendored
|
|
@ -1,15 +0,0 @@
|
|||
// Copyright: Ankitects Pty Ltd and contributors
|
||||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
export interface Option {
|
||||
label: string;
|
||||
value: string;
|
||||
selected: boolean;
|
||||
}
|
||||
|
||||
export interface SelectButtonProps {
|
||||
id: string;
|
||||
className?: string;
|
||||
tooltip?: string;
|
||||
disables: boolean;
|
||||
options: Option[];
|
||||
}
|
||||
8
ts/components/WithDropdownMenu.d.ts
vendored
8
ts/components/WithDropdownMenu.d.ts
vendored
|
|
@ -1,8 +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 WithDropdownMenuProps {
|
||||
button: ToolbarItem;
|
||||
menuId: string;
|
||||
}
|
||||
11
ts/components/WithLabel.d.ts
vendored
11
ts/components/WithLabel.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
|
||||
import type { ToolbarItem } from "./types";
|
||||
|
||||
export interface WithLabelProps {
|
||||
id?: string;
|
||||
className?: string;
|
||||
|
||||
button: ToolbarItem;
|
||||
label: string;
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
// 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 IconButton from "./IconButton.svelte";
|
||||
import type { IconButtonProps } from "./IconButton";
|
||||
import CommandIconButton from "./CommandIconButton.svelte";
|
||||
import type { CommandIconButtonProps } from "./CommandIconButton";
|
||||
import ColorPicker from "./ColorPicker.svelte";
|
||||
import type { ColorPickerProps } from "./ColorPicker";
|
||||
import SelectButton from "./SelectButton.svelte";
|
||||
import type { SelectButtonProps } from "./SelectButton";
|
||||
|
||||
import ButtonDropdown from "./ButtonDropdown.svelte";
|
||||
import type { ButtonDropdownProps } from "./ButtonDropdown";
|
||||
import DropdownMenu from "./DropdownMenu.svelte";
|
||||
import type { DropdownMenuProps } from "./DropdownMenu";
|
||||
import DropdownItem from "./DropdownItem.svelte";
|
||||
import type { DropdownItemProps } from "./DropdownItem";
|
||||
import WithDropdownMenu from "./WithDropdownMenu.svelte";
|
||||
import type { WithDropdownMenuProps } from "./WithDropdownMenu";
|
||||
|
||||
import WithLabel from "./WithLabel.svelte";
|
||||
import type { WithLabelProps } from "./WithLabel";
|
||||
|
||||
import { dynamicComponent } from "sveltelib/dynamicComponent";
|
||||
|
||||
export const rawButton = dynamicComponent<typeof RawButton, { html: string }>(
|
||||
RawButton
|
||||
);
|
||||
export const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(
|
||||
IconButton
|
||||
);
|
||||
export const commandIconButton = dynamicComponent<
|
||||
typeof CommandIconButton,
|
||||
CommandIconButtonProps
|
||||
>(CommandIconButton);
|
||||
export const colorPicker = dynamicComponent<typeof ColorPicker, ColorPickerProps>(
|
||||
ColorPicker
|
||||
);
|
||||
export const selectButton = dynamicComponent<typeof SelectButton, SelectButtonProps>(
|
||||
SelectButton
|
||||
);
|
||||
|
||||
export const buttonDropdown = dynamicComponent<
|
||||
typeof ButtonDropdown,
|
||||
ButtonDropdownProps
|
||||
>(ButtonDropdown);
|
||||
|
||||
export const dropdownMenu = dynamicComponent<typeof DropdownMenu, DropdownMenuProps>(
|
||||
DropdownMenu
|
||||
);
|
||||
export const dropdownItem = dynamicComponent<typeof DropdownItem, DropdownItemProps>(
|
||||
DropdownItem
|
||||
);
|
||||
|
||||
export const withDropdownMenu = dynamicComponent<
|
||||
typeof WithDropdownMenu,
|
||||
WithDropdownMenuProps
|
||||
>(WithDropdownMenu);
|
||||
|
||||
export const withLabel = dynamicComponent<typeof WithLabel, WithLabelProps>(WithLabel);
|
||||
|
|
@ -71,6 +71,8 @@ ts_library(
|
|||
"//ts/sveltelib",
|
||||
"//ts/components",
|
||||
"//ts/html-filter",
|
||||
# "svelte_components",
|
||||
# "//ts/components:svelte_components",
|
||||
"@npm//svelte",
|
||||
],
|
||||
)
|
||||
|
|
@ -171,5 +173,6 @@ svelte_check(
|
|||
"//ts/sass:button_mixins_lib",
|
||||
"//ts/sass/bootstrap",
|
||||
"@npm//@types/bootstrap",
|
||||
"//ts/components:svelte_components",
|
||||
],
|
||||
)
|
||||
|
|
|
|||
54
ts/editor/ClozeButton.svelte
Normal file
54
ts/editor/ClozeButton.svelte
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<!--
|
||||
Copyright: Ankitects Pty Ltd and contributors
|
||||
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
-->
|
||||
<script lang="typescript">
|
||||
import * as tr from "lib/i18n";
|
||||
|
||||
import IconButton from "components/IconButton.svelte";
|
||||
import WithShortcut from "components/WithShortcut.svelte";
|
||||
|
||||
import { bracketsIcon } from "./icons";
|
||||
import { forEditorField } from ".";
|
||||
import { wrap } from "./wrap";
|
||||
|
||||
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;
|
||||
|
||||
while ((match = clozePattern.exec(fieldHTML))) {
|
||||
matches.push(Number(match[1]));
|
||||
}
|
||||
|
||||
highest = Math.max(highest, ...matches);
|
||||
});
|
||||
|
||||
if (increment) {
|
||||
highest++;
|
||||
}
|
||||
|
||||
return Math.max(1, highest);
|
||||
}
|
||||
|
||||
function onCloze(event: KeyboardEvent | MouseEvent): void {
|
||||
const highestCloze = getCurrentHighestCloze(!event.getModifierState("Alt"));
|
||||
wrap(`{{c${highestCloze}::`, "}}");
|
||||
}
|
||||
</script>
|
||||
|
||||
<WithShortcut
|
||||
shortcut="Control+Shift+KeyC"
|
||||
optionalModifiers={['Alt']}
|
||||
let:createShortcut
|
||||
let:shortcutLabel>
|
||||
<IconButton
|
||||
tooltip={`${tr.editingClozeDeletion()} (${shortcutLabel})`}
|
||||
on:click={onCloze}>
|
||||
{@html bracketsIcon}
|
||||
</IconButton>
|
||||
</WithShortcut>
|
||||
53
ts/editor/ColorButtons.svelte
Normal file
53
ts/editor/ColorButtons.svelte
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<!--
|
||||
Copyright: Ankitects Pty Ltd and contributors
|
||||
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
-->
|
||||
<script lang="typescript">
|
||||
import * as tr from "lib/i18n";
|
||||
|
||||
import IconButton from "components/IconButton.svelte";
|
||||
import ColorPicker from "components/ColorPicker.svelte";
|
||||
import ButtonGroup from "components/ButtonGroup.svelte";
|
||||
import WithShortcut from "components/WithShortcut.svelte";
|
||||
|
||||
import { squareFillIcon } from "./icons";
|
||||
|
||||
import "./color.css";
|
||||
|
||||
const foregroundColorKeyword = "--foreground-color";
|
||||
|
||||
function setForegroundColor(color: string): void {
|
||||
document.documentElement.style.setProperty(foregroundColorKeyword, color);
|
||||
}
|
||||
|
||||
function getForecolor(): string {
|
||||
return document.documentElement.style.getPropertyValue(foregroundColorKeyword);
|
||||
}
|
||||
|
||||
function wrapWithForecolor(color: string): void {
|
||||
document.execCommand("forecolor", false, color);
|
||||
}
|
||||
|
||||
function setWithCurrentColor({ currentTarget }: Event): void {
|
||||
return setForegroundColor((currentTarget as HTMLInputElement).value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<ButtonGroup id="color">
|
||||
<WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel>
|
||||
<IconButton
|
||||
class="forecolor"
|
||||
tooltip={`${tr.editingSetForegroundColor} (${shortcutLabel})`}
|
||||
on:click={() => wrapWithForecolor(getForecolor())}
|
||||
on:mount={createShortcut}>
|
||||
{@html squareFillIcon}
|
||||
</IconButton>
|
||||
</WithShortcut>
|
||||
|
||||
<WithShortcut shortcut="F8" let:createShortcut let:shortcutLabel>
|
||||
<ColorPicker
|
||||
tooltip={`${tr.editingChangeColor()} (${shortcutLabel})`}
|
||||
on:change={setWithCurrentColor}
|
||||
on:mount={createShortcut} />
|
||||
</WithShortcut>
|
||||
</ButtonGroup>
|
||||
|
|
@ -25,6 +25,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
import StickyBar from "components/StickyBar.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 nightMode: boolean;
|
||||
|
||||
|
|
@ -42,5 +46,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
<WithTheming {style}>
|
||||
<StickyBar>
|
||||
<NoteTypeButtons />
|
||||
<FormatInlineButtons />
|
||||
<FormatBlockButtons />
|
||||
<ColorButtons />
|
||||
<TemplateButtons />
|
||||
</StickyBar>
|
||||
</WithTheming>
|
||||
|
|
|
|||
95
ts/editor/FormatBlockButtons.svelte
Normal file
95
ts/editor/FormatBlockButtons.svelte
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<!--
|
||||
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 { EditingArea } from "./editingArea";
|
||||
import * as tr from "lib/i18n";
|
||||
|
||||
import CommandIconButton from "components/CommandIconButton.svelte";
|
||||
import IconButton from "components/IconButton.svelte";
|
||||
import ButtonGroup from "components/ButtonGroup.svelte";
|
||||
import ButtonDropdown from "components/ButtonDropdown.svelte";
|
||||
import WithDropdownMenu from "components/WithDropdownMenu.svelte";
|
||||
|
||||
import { getListItem } from "./helpers";
|
||||
import {
|
||||
ulIcon,
|
||||
olIcon,
|
||||
listOptionsIcon,
|
||||
justifyFullIcon,
|
||||
justifyLeftIcon,
|
||||
justifyRightIcon,
|
||||
justifyCenterIcon,
|
||||
indentIcon,
|
||||
outdentIcon,
|
||||
} from "./icons";
|
||||
|
||||
export let api = {};
|
||||
|
||||
function outdentListItem() {
|
||||
const currentField = document.activeElement as EditingArea;
|
||||
if (getListItem(currentField.shadowRoot!)) {
|
||||
document.execCommand("outdent");
|
||||
}
|
||||
}
|
||||
|
||||
function indentListItem() {
|
||||
const currentField = document.activeElement as EditingArea;
|
||||
if (getListItem(currentField.shadowRoot!)) {
|
||||
document.execCommand("indent");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<ButtonDropdown id="listFormatting">
|
||||
<ButtonGroup id="justify" {api}>
|
||||
<CommandIconButton command="justifyLeft" tooltip={tr.editingAlignLeft()}>
|
||||
{@html justifyLeftIcon}
|
||||
</CommandIconButton>
|
||||
|
||||
<CommandIconButton command="justifyCenter" tooltip={tr.editingCenter()}>
|
||||
{@html justifyCenterIcon}
|
||||
</CommandIconButton>
|
||||
|
||||
<CommandIconButton command="justifyCenter" tooltip={tr.editingCenter()}>
|
||||
{@html justifyCenterIcon}
|
||||
</CommandIconButton>
|
||||
|
||||
<CommandIconButton command="justifyRight" tooltip={tr.editingAlignRight()}>
|
||||
{@html justifyRightIcon}
|
||||
</CommandIconButton>
|
||||
|
||||
<CommandIconButton command="justifyFull" tooltip={tr.editingJustify()}>
|
||||
{@html justifyFullIcon}
|
||||
</CommandIconButton>
|
||||
</ButtonGroup>
|
||||
|
||||
<ButtonGroup id="indentation" {api}>
|
||||
<IconButton on:click={outdentListItem} tooltip={tr.editingOutdent}>
|
||||
{@html outdentIcon}
|
||||
</IconButton>
|
||||
|
||||
<IconButton on:click={indentListItem} tooltip={tr.editingIndent}>
|
||||
{@html indentIcon}
|
||||
</IconButton>
|
||||
</ButtonGroup>
|
||||
</ButtonDropdown>
|
||||
|
||||
<ButtonGroup id="blockFormatting" {api}>
|
||||
<CommandIconButton
|
||||
command="insertUnorderedList"
|
||||
tooltip={tr.editingUnorderedList()}>
|
||||
{@html ulIcon}
|
||||
</CommandIconButton>
|
||||
|
||||
<CommandIconButton command="insertOrderedList" tooltip={tr.editingOrderedList()}>
|
||||
{@html olIcon}
|
||||
</CommandIconButton>
|
||||
|
||||
<WithDropdownMenu menuId="listFormatting">
|
||||
<IconButton>
|
||||
{@html listOptionsIcon}
|
||||
</IconButton>
|
||||
</WithDropdownMenu>
|
||||
</ButtonGroup>
|
||||
69
ts/editor/FormatInlineButtons.svelte
Normal file
69
ts/editor/FormatInlineButtons.svelte
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<!--
|
||||
Copyright: Ankitects Pty Ltd and contributors
|
||||
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
-->
|
||||
<script lang="typescript">
|
||||
import * as tr from "lib/i18n";
|
||||
|
||||
import CommandIconButton from "components/CommandIconButton.svelte";
|
||||
import IconButton from "components/IconButton.svelte";
|
||||
import ButtonGroup from "components/ButtonGroup.svelte";
|
||||
import WithShortcut from "components/WithShortcut.svelte";
|
||||
|
||||
import {
|
||||
boldIcon,
|
||||
italicIcon,
|
||||
underlineIcon,
|
||||
superscriptIcon,
|
||||
subscriptIcon,
|
||||
eraserIcon,
|
||||
} from "./icons";
|
||||
|
||||
export let api = {};
|
||||
</script>
|
||||
|
||||
<ButtonGroup id="notetype" {api}>
|
||||
<WithShortcut shortcut="Control+KeyB" let:createShortcut let:shortcutLabel>
|
||||
<CommandIconButton
|
||||
tooltip={`${tr.editingBoldText()} (${shortcutLabel})`}
|
||||
command="bold"
|
||||
onClick={() => document.execCommand('bold')}
|
||||
on:mount={createShortcut}>
|
||||
{@html boldIcon}
|
||||
</CommandIconButton>
|
||||
</WithShortcut>
|
||||
|
||||
<WithShortcut shortcut="Control+KeyI">
|
||||
<CommandIconButton tooltip={tr.editingItalicText()} command="italic">
|
||||
{@html italicIcon}
|
||||
</CommandIconButton>
|
||||
</WithShortcut>
|
||||
|
||||
<WithShortcut shortcut="Control+KeyU">
|
||||
<CommandIconButton tooltip={tr.editingUnderlineText()} command="underline">
|
||||
{@html underlineIcon}
|
||||
</CommandIconButton>
|
||||
</WithShortcut>
|
||||
|
||||
<WithShortcut shortcut="Control+Shift+Equal">
|
||||
<CommandIconButton tooltip={tr.editingSuperscript()} command="superscript">
|
||||
{@html superscriptIcon}
|
||||
</CommandIconButton>
|
||||
</WithShortcut>
|
||||
|
||||
<WithShortcut shortcut="Control+Equal">
|
||||
<CommandIconButton tooltip={tr.editingSubscript()} command="subscript">
|
||||
{@html subscriptIcon}
|
||||
</CommandIconButton>
|
||||
</WithShortcut>
|
||||
|
||||
<WithShortcut shortcut="Control+KeyR">
|
||||
<IconButton
|
||||
tooltip={tr.editingSubscript()}
|
||||
on:click={() => {
|
||||
document.execCommand('removeFormat');
|
||||
}}>
|
||||
{@html eraserIcon}
|
||||
</IconButton>
|
||||
</WithShortcut>
|
||||
</ButtonGroup>
|
||||
99
ts/editor/TemplateButtons.svelte
Normal file
99
ts/editor/TemplateButtons.svelte
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<!--
|
||||
Copyright: Ankitects Pty Ltd and contributors
|
||||
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
-->
|
||||
<script lang="typescript">
|
||||
import * as tr from "lib/i18n";
|
||||
import { bridgeCommand } from "lib/bridgecommand";
|
||||
|
||||
import IconButton from "components/IconButton.svelte";
|
||||
import ButtonGroup from "components/ButtonGroup.svelte";
|
||||
import DropdownMenu from "components/DropdownMenu.svelte";
|
||||
import DropdownItem from "components/DropdownItem.svelte";
|
||||
import WithDropdownMenu from "components/WithDropdownMenu.svelte";
|
||||
import WithShortcut from "components/WithShortcut.svelte";
|
||||
import ClozeButton from "./ClozeButton.svelte";
|
||||
|
||||
import { wrap } from "./wrap";
|
||||
import { paperclipIcon, micIcon, functionIcon, xmlIcon } from "./icons";
|
||||
|
||||
function onAttachment(): void {
|
||||
bridgeCommand("attach");
|
||||
}
|
||||
|
||||
function onRecord(): void {
|
||||
bridgeCommand("record");
|
||||
}
|
||||
|
||||
function onHtmlEdit(): void {
|
||||
bridgeCommand("htmlEdit");
|
||||
}
|
||||
|
||||
const mathjaxMenuId = "mathjaxMenu";
|
||||
</script>
|
||||
|
||||
<ButtonGroup id="template">
|
||||
<WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
|
||||
<IconButton
|
||||
tooltip={tr.editingAttachPicturesaudiovideo}
|
||||
on:click={onAttachment}>
|
||||
{@html paperclipIcon}
|
||||
</IconButton>
|
||||
</WithShortcut>
|
||||
|
||||
<WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel>
|
||||
<IconButton tooltip={tr.editingRecordAudio} on:click={onRecord}>
|
||||
{@html micIcon}
|
||||
</IconButton>
|
||||
</WithShortcut>
|
||||
|
||||
<ClozeButton />
|
||||
|
||||
<IconButton>
|
||||
{@html functionIcon}
|
||||
</IconButton>
|
||||
|
||||
<WithShortcut shortcut="Control+Shift+KeyX" let:createShortcut let:shortcutLabel>
|
||||
<IconButton tooltip={tr.editingHtmlEditor} on:click={onHtmlEdit}>
|
||||
{@html xmlIcon}
|
||||
</IconButton>
|
||||
</WithShortcut>
|
||||
</ButtonGroup>
|
||||
|
||||
<DropdownMenu id={matjaxMenuId}>
|
||||
<WithShortcut shortcut="Control+KeyM, KeyM" let:createShortcut let:shortcutLabel>
|
||||
<DropdownItem on:click={() => wrap('\\(', '\\)')}>
|
||||
{tr.editingMathjaxInline}
|
||||
</DropdownItem>
|
||||
</WithShortcut>
|
||||
|
||||
<WithShortcut shortcut="Control+KeyM, KeyE" let:createShortcut let:shortcutLabel>
|
||||
<DropdownItem on:click={() => wrap('\\[', '\\]')}>
|
||||
{tr.editingMathjaxBlock}
|
||||
</DropdownItem>
|
||||
</WithShortcut>
|
||||
|
||||
<WithShortcut shortcut="Control+KeyM, KeyC" let:createShortcut let:shortcutLabel>
|
||||
<DropdownItem on:click={() => wrap('\\(\\ce{', '}\\)')}>
|
||||
{tr.editingMathjaxChemistry}
|
||||
</DropdownItem>
|
||||
</WithShortcut>
|
||||
|
||||
<WithShortcut shortcut="Control+KeyT, KeyT" let:createShortcut let:shortcutLabel>
|
||||
<DropdownItem on:click={() => wrap('[latex]', '[/latex]')}>
|
||||
{tr.editingLatex}
|
||||
</DropdownItem>
|
||||
</WithShortcut>
|
||||
|
||||
<WithShortcut shortcut="Control+KeyT, KeyE" let:createShortcut let:shortcutLabel>
|
||||
<DropdownItem on:click={() => wrap('[$]', '[/$]')}>
|
||||
{tr.editingLatexEquation}
|
||||
</DropdownItem>
|
||||
</WithShortcut>
|
||||
|
||||
<WithShortcut shortcut="Control+KeyT, KeyM" let:createShortcut let:shortcutLabel>
|
||||
<DropdownItem on:click={() => wrap('[$$]', '[/$$]')}>
|
||||
{tr.editingLatexMathEnv}
|
||||
</DropdownItem>
|
||||
</WithShortcut>
|
||||
</DropdownMenu>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
// 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 {
|
||||
// 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,
|
||||
|
||||
// dropdownMenu,
|
||||
// dropdownItem,
|
||||
// buttonDropdown,
|
||||
// withDropdownMenu,
|
||||
// withLabel,
|
||||
// };
|
||||
|
|
@ -1,52 +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 "editor-toolbar/types";
|
||||
|
||||
// import * as tr from "lib/i18n";
|
||||
// import { iconButton, withShortcut } from "editor-toolbar/dynamicComponents";
|
||||
|
||||
// import bracketsIcon from "./code-brackets.svg";
|
||||
|
||||
// import { forEditorField } from ".";
|
||||
// import { wrap } from "./wrap";
|
||||
|
||||
// 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;
|
||||
|
||||
// while ((match = clozePattern.exec(fieldHTML))) {
|
||||
// matches.push(Number(match[1]));
|
||||
// }
|
||||
|
||||
// highest = Math.max(highest, ...matches);
|
||||
// });
|
||||
|
||||
// if (increment) {
|
||||
// highest++;
|
||||
// }
|
||||
|
||||
// return Math.max(1, highest);
|
||||
// }
|
||||
|
||||
// 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(),
|
||||
// }),
|
||||
// });
|
||||
// }
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
// 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 {
|
||||
// iconButton,
|
||||
// colorPicker,
|
||||
// buttonGroup,
|
||||
// withShortcut,
|
||||
// } from "editor-toolbar/dynamicComponents";
|
||||
// import * as tr from "lib/i18n";
|
||||
|
||||
// import squareFillIcon from "./square-fill.svg";
|
||||
// import "./color.css";
|
||||
|
||||
// const foregroundColorKeyword = "--foreground-color";
|
||||
|
||||
// function setForegroundColor(color: string): void {
|
||||
// document.documentElement.style.setProperty(foregroundColorKeyword, color);
|
||||
// }
|
||||
|
||||
// function getForecolor(): string {
|
||||
// return document.documentElement.style.getPropertyValue(foregroundColorKeyword);
|
||||
// }
|
||||
|
||||
// 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(),
|
||||
// }),
|
||||
// });
|
||||
|
||||
// const colorpickerButton = withShortcut({
|
||||
// shortcut: "F8",
|
||||
// button: colorPicker({
|
||||
// onChange: ({ currentTarget }) =>
|
||||
// setForegroundColor((currentTarget as HTMLInputElement).value),
|
||||
// tooltip: tr.editingChangeColor(),
|
||||
// }),
|
||||
// });
|
||||
|
||||
// return buttonGroup({
|
||||
// id: "color",
|
||||
// items: [forecolorButton, colorpickerButton],
|
||||
// });
|
||||
// }
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
// 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 * as tr from "lib/i18n";
|
||||
// import {
|
||||
// commandIconButton,
|
||||
// iconButton,
|
||||
// buttonGroup,
|
||||
// buttonDropdown,
|
||||
// withDropdownMenu,
|
||||
// } from "editor-toolbar/dynamicComponents";
|
||||
|
||||
// import { getListItem } from "./helpers";
|
||||
|
||||
// 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 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 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(),
|
||||
// });
|
||||
|
||||
// const justifyCenterButton = commandIconButton({
|
||||
// icon: justifyCenterIcon,
|
||||
// command: "justifyCenter",
|
||||
// tooltip: tr.editingCenter(),
|
||||
// });
|
||||
|
||||
// const justifyRightButton = commandIconButton({
|
||||
// icon: justifyRightIcon,
|
||||
// command: "justifyRight",
|
||||
// tooltip: tr.editingAlignRight(),
|
||||
// });
|
||||
|
||||
// const justifyFullButton = commandIconButton({
|
||||
// icon: justifyFullIcon,
|
||||
// command: "justifyFull",
|
||||
// tooltip: tr.editingJustify(),
|
||||
// });
|
||||
|
||||
// const justifyGroup = buttonGroup({
|
||||
// id: "justify",
|
||||
// items: [
|
||||
// justifyLeftButton,
|
||||
// justifyCenterButton,
|
||||
// justifyRightButton,
|
||||
// justifyFullButton,
|
||||
// ],
|
||||
// });
|
||||
|
||||
// const outdentButton = iconButton({
|
||||
// icon: outdentIcon,
|
||||
// onClick: outdentListItem,
|
||||
// tooltip: tr.editingOutdent(),
|
||||
// });
|
||||
|
||||
// const indentButton = iconButton({
|
||||
// icon: indentIcon,
|
||||
// onClick: indentListItem,
|
||||
// tooltip: tr.editingIndent(),
|
||||
// });
|
||||
|
||||
// const indentationGroup = buttonGroup({
|
||||
// id: "indentation",
|
||||
// items: [outdentButton, indentButton],
|
||||
// });
|
||||
|
||||
// const formattingOptions = buttonDropdown({
|
||||
// id: "listFormatting",
|
||||
// items: [justifyGroup, indentationGroup],
|
||||
// });
|
||||
|
||||
// return [formattingOptions];
|
||||
// }
|
||||
|
||||
// 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 listFormattingButton = iconButton({
|
||||
// icon: listOptionsIcon,
|
||||
// });
|
||||
|
||||
// const listFormatting = withDropdownMenu({
|
||||
// button: listFormattingButton,
|
||||
// menuId: "listFormatting",
|
||||
// });
|
||||
|
||||
// return buttonGroup({
|
||||
// id: "blockFormatting",
|
||||
// items: [ulButton, olButton, listFormatting],
|
||||
// });
|
||||
// }
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
// 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 * 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";
|
||||
|
||||
// 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 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 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");
|
||||
// },
|
||||
// }),
|
||||
// });
|
||||
|
||||
// return buttonGroup({
|
||||
// id: "inlineFormatting",
|
||||
// items: [
|
||||
// boldButton,
|
||||
// italicButton,
|
||||
// underlineButton,
|
||||
// superscriptButton,
|
||||
// subscriptButton,
|
||||
// removeFormatButton,
|
||||
// ],
|
||||
// });
|
||||
// }
|
||||
26
ts/editor/icons.ts
Normal file
26
ts/editor/icons.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
export { default as boldIcon } from "./type-bold.svg";
|
||||
export { default as italicIcon } from "./type-italic.svg";
|
||||
export { default as underlineIcon } from "./type-underline.svg";
|
||||
export { default as superscriptIcon } from "./format-superscript.svg";
|
||||
export { default as subscriptIcon } from "./format-subscript.svg";
|
||||
export { default as eraserIcon } from "./eraser.svg";
|
||||
|
||||
export { default as ulIcon } from "./list-ul.svg";
|
||||
export { default as olIcon } from "./list-ol.svg";
|
||||
export { default as listOptionsIcon } from "./text-paragraph.svg";
|
||||
|
||||
export { default as justifyFullIcon } from "./justify.svg";
|
||||
export { default as justifyLeftIcon } from "./text-left.svg";
|
||||
export { default as justifyRightIcon } from "./text-right.svg";
|
||||
export { default as justifyCenterIcon } from "./text-center.svg";
|
||||
|
||||
export { default as indentIcon } from "./text-indent-left.svg";
|
||||
export { default as outdentIcon } from "./text-indent-right.svg";
|
||||
|
||||
export { default as squareFillIcon } from "./square-fill.svg";
|
||||
|
||||
export { default as paperclipIcon } from "./paperclip.svg";
|
||||
export { default as micIcon } from "./mic.svg";
|
||||
export { default as bracketsIcon } from "./code-brackets.svg";
|
||||
export { default as functionIcon } from "./function-variant.svg";
|
||||
export { default as xmlIcon } from "./xml.svg";
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
// 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 { 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(),
|
||||
// });
|
||||
|
||||
// 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],
|
||||
// });
|
||||
// }
|
||||
|
|
@ -1,143 +0,0 @@
|
|||
// 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 { 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 paperclipIcon from "./paperclip.svg";
|
||||
// import micIcon from "./mic.svg";
|
||||
// import functionIcon from "./function-variant.svg";
|
||||
// import xmlIcon from "./xml.svg";
|
||||
|
||||
// import { getClozeButton } from "./cloze";
|
||||
|
||||
// function onAttachment(): void {
|
||||
// bridgeCommand("attach");
|
||||
// }
|
||||
|
||||
// function onRecord(): void {
|
||||
// bridgeCommand("record");
|
||||
// }
|
||||
|
||||
// function onHtmlEdit(): void {
|
||||
// bridgeCommand("htmlEdit");
|
||||
// }
|
||||
|
||||
// const mathjaxMenuId = "mathjaxMenu";
|
||||
|
||||
// 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 mathjaxButton = iconButton({
|
||||
// icon: functionIcon,
|
||||
// });
|
||||
|
||||
// const mathjaxButtonWithMenu = withDropdownMenu({
|
||||
// button: mathjaxButton,
|
||||
// menuId: mathjaxMenuId,
|
||||
// });
|
||||
|
||||
// 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,
|
||||
// ],
|
||||
// });
|
||||
// }
|
||||
|
||||
// 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 mathjaxMenu = dropdownMenu({
|
||||
// id: mathjaxMenuId,
|
||||
// items: [...mathjaxMenuItems, ...latexMenuItems],
|
||||
// });
|
||||
|
||||
// return [mathjaxMenu];
|
||||
// }
|
||||
Loading…
Reference in a new issue