GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-20 15:02:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Separate input components into their own directories / Remove WithShortcut (#1613)

Browse source 
* Put PlainTextInput into its own directory

* Create a directory for RichTextInput

* Create editor-toolbar directory

* Move PreviewButton into editor-toolbar

* The time to refactor this is not quite yet here

* Create tag-editor directory

* Remove some of the uses of WithShortcut

* Remove all uses of WithShortcut from editor package

* Remove last uses of WithShortcut

* Fix typo
This commit is contained in:
Henrik Giesel 2022-01-24 02:43:09 +01:00 committed by GitHub
parent f842ab7c9d
commit f534dbb8e5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
59 changed files with 779 additions and 790 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
ts/change-notetype/SaveButton.svelte
View file

@ -5,13 +5,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<script lang="ts">
import * as tr from "../lib/ftl";
import type { ChangeNotetypeState } from "./lib";
import { withButton } from "../components/helpers";
import { getPlatformString } from "../lib/shortcuts";
import ButtonGroup from "../components/ButtonGroup.svelte";
import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
import LabelButton from "../components/LabelButton.svelte";
import WithShortcut from "../components/WithShortcut.svelte";
import Shortcut from "../components/Shortcut.svelte";
export let state: ChangeNotetypeState;
@ -21,17 +20,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
state.save();
}
const keyCombination = "Control+Enter";
</script>
<ButtonGroup>
<ButtonGroupItem>
<WithShortcut shortcut={"Control+Enter"} let:createShortcut let:shortcutLabel>
<LabelButton
theme="primary"
on:click={() => save()}
tooltip={shortcutLabel}
on:mount={withButton(createShortcut)}>{tr.actionsSave()}</LabelButton
>
</WithShortcut>
<LabelButton
theme="primary"
tooltip={getPlatformString(keyCombination)}
on:click={save}>{tr.actionsSave()}</LabelButton
>
<Shortcut {keyCombination} on:action={save} />
</ButtonGroupItem>
</ButtonGroup>

11
ts/components/Shortcut.svelte
View file

@ -5,17 +5,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<script lang="ts">
import { createEventDispatcher, onMount } from "svelte";
import { registerShortcut } from "../lib/shortcuts";
import { preventDefault } from "../lib/events";
export let keyCombination: string;
export let target: EventTarget | Document = document;
const dispatch = createEventDispatcher();
onMount(() =>
registerShortcut(
(event: KeyboardEvent) => dispatch("action", { originalEvent: event }),
keyCombination,
target as any,
),
registerShortcut((event: KeyboardEvent) => {
preventDefault(event);
dispatch("action", { originalEvent: event });
}, keyCombination),
);
</script>

25
ts/components/WithShortcut.svelte
View file

@ -1,25 +0,0 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { onDestroy } from "svelte";
import { registerShortcut, getPlatformString } from "../lib/shortcuts";
export let shortcut: string;
const shortcutLabel = getPlatformString(shortcut);
let deregister: () => void;
function createShortcut(element: HTMLElement): void {
deregister = registerShortcut((event: KeyboardEvent) => {
element.dispatchEvent(new MouseEvent("click", event));
event.preventDefault();
}, shortcut);
}
onDestroy(() => deregister());
</script>
<slot {createShortcut} {shortcutLabel} />

21
ts/deck-options/SaveButton.svelte
View file

@ -7,7 +7,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { createEventDispatcher } from "svelte";
import type { DeckOptionsState } from "./lib";
import type Dropdown from "bootstrap/js/dist/dropdown";
import { withButton } from "../components/helpers";
import { getPlatformString } from "../lib/shortcuts";
import { withCollapsedWhitespace } from "../lib/i18n";
import ButtonGroup from "../components/ButtonGroup.svelte";
@ -18,7 +18,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import DropdownItem from "../components/DropdownItem.svelte";
import DropdownDivider from "../components/DropdownDivider.svelte";
import WithDropdown from "../components/WithDropdown.svelte";
import WithShortcut from "../components/WithShortcut.svelte";
import Shortcut from "../components/Shortcut.svelte";
const dispatch = createEventDispatcher();
@ -58,19 +58,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
let dropdown: Dropdown;
const saveKeyCombination = "Control+Enter";
</script>
<ButtonGroup>
<ButtonGroupItem>
<WithShortcut shortcut="Control+Enter" let:createShortcut let:shortcutLabel>
<LabelButton
theme="primary"
on:click={() => save(false)}
tooltip={shortcutLabel}
on:mount={withButton(createShortcut)}
>{tr.deckConfigSaveButton()}</LabelButton
>
</WithShortcut>
<LabelButton
theme="primary"
on:click={() => save(false)}
tooltip={getPlatformString(saveKeyCombination)}
>{tr.deckConfigSaveButton()}</LabelButton
>
<Shortcut keyCombination={saveKeyCombination} on:click={() => save(false)} />
</ButtonGroupItem>
<ButtonGroupItem>

107
ts/editor/ColorButtons.svelte
View file

@ -1,107 +0,0 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import ButtonGroup from "../components/ButtonGroup.svelte";
import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
import IconButton from "../components/IconButton.svelte";
import ColorPicker from "../components/ColorPicker.svelte";
import WithShortcut from "../components/WithShortcut.svelte";
import WithColorHelper from "./WithColorHelper.svelte";
import * as tr from "../lib/ftl";
import { bridgeCommand } from "../lib/bridgecommand";
import { withButton } from "../components/helpers";
import { textColorIcon, highlightColorIcon, arrowIcon } from "./icons";
import { execCommand } from "./helpers";
import { getNoteEditor } from "./OldEditorAdapter.svelte";
export let api = {};
export let textColor: string;
export let highlightColor: string;
$: forecolorWrap = wrapWithForecolor(textColor);
$: backcolorWrap = wrapWithBackcolor(highlightColor);
const wrapWithForecolor = (color: string) => () => {
execCommand("forecolor", false, color);
};
const wrapWithBackcolor = (color: string) => () => {
execCommand("backcolor", false, color);
};
const { focusInRichText } = getNoteEditor();
$: disabled = !$focusInRichText;
</script>
<ButtonGroup {api}>
<WithColorHelper color={textColor} let:colorHelperIcon let:setColor>
<ButtonGroupItem>
<WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
<IconButton
tooltip="{tr.editingSetTextColor()} ({shortcutLabel})"
{disabled}
on:click={forecolorWrap}
on:mount={withButton(createShortcut)}
>
{@html textColorIcon}
{@html colorHelperIcon}
</IconButton>
</WithShortcut>
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut shortcut={"F8"} let:createShortcut let:shortcutLabel>
<IconButton
tooltip="{tr.editingChangeColor()} ({shortcutLabel})"
{disabled}
widthMultiplier={0.5}
>
{@html arrowIcon}
<ColorPicker
on:change={(event) => {
const textColor = setColor(event);
bridgeCommand(`lastTextColor:${textColor}`);
forecolorWrap = wrapWithForecolor(setColor(event));
forecolorWrap();
}}
on:mount={withButton(createShortcut)}
/>
</IconButton>
</WithShortcut>
</ButtonGroupItem>
</WithColorHelper>
<WithColorHelper color={highlightColor} let:colorHelperIcon let:setColor>
<ButtonGroupItem>
<IconButton
tooltip={tr.editingSetTextHighlightColor()}
{disabled}
on:click={backcolorWrap}
>
{@html highlightColorIcon}
{@html colorHelperIcon}
</IconButton>
</ButtonGroupItem>
<ButtonGroupItem>
<IconButton
tooltip={tr.editingChangeColor()}
widthMultiplier={0.5}
{disabled}
>
{@html arrowIcon}
<ColorPicker
on:change={(event) => {
const highlightColor = setColor(event);
bridgeCommand(`lastHighlightColor:${highlightColor}`);
backcolorWrap = wrapWithBackcolor(highlightColor);
backcolorWrap();
}}
/>
</IconButton>
</ButtonGroupItem>
</WithColorHelper>
</ButtonGroup>

82
ts/editor/CommandIconButton.svelte
View file

@ -1,82 +0,0 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import IconButton from "../components/IconButton.svelte";
import WithShortcut from "../components/WithShortcut.svelte";
import WithState from "../components/WithState.svelte";
import { withButton } from "../components/helpers";
import { execCommand, queryCommandState } from "./helpers";
import { getNoteEditor } from "./OldEditorAdapter.svelte";
export let key: string;
export let tooltip: string;
export let shortcut: string = "";
export let withoutShortcut = false;
export let withoutState = false;
const { focusInRichText } = getNoteEditor();
$: disabled = !$focusInRichText;
</script>
{#if withoutShortcut && withoutState}
<IconButton {tooltip} {disabled} on:click={() => execCommand(key)}>
<slot />
</IconButton>
{:else if withoutShortcut}
<WithState
{key}
update={async () => queryCommandState(key)}
let:state={active}
let:updateState
>
<IconButton
{tooltip}
{active}
{disabled}
on:click={(event) => {
execCommand(key);
updateState(event);
}}
>
<slot />
</IconButton>
</WithState>
{:else if withoutState}
<WithShortcut {shortcut} let:createShortcut let:shortcutLabel>
<IconButton
tooltip="{tooltip} ({shortcutLabel})"
{disabled}
on:click={() => execCommand(key)}
on:mount={withButton(createShortcut)}
>
<slot />
</IconButton>
</WithShortcut>
{:else}
<WithShortcut {shortcut} let:createShortcut let:shortcutLabel>
<WithState
{key}
update={async () => queryCommandState(key)}
let:state={active}
let:updateState
>
<IconButton
tooltip="{tooltip} ({shortcutLabel})"
{active}
{disabled}
on:click={(event) => {
execCommand(key);
updateState(event);
}}
on:mount={withButton(createShortcut)}
>
<slot />
</IconButton>
</WithState>
</WithShortcut>
{/if}

2
ts/editor/MathjaxElement.svelte
View file

@ -9,7 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const decoratedElements = getDecoratedElements();
decoratedElements.push(Mathjax);
import { parsingInstructions } from "./PlainTextInput.svelte";
import { parsingInstructions } from "./plain-text-input";
parsingInstructions.push("<style>anki-mathjax { white-space: pre; }</style>");
</script>

39
ts/editor/NoteTypeButtons.svelte
View file

@ -1,39 +0,0 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { bridgeCommand } from "../lib/bridgecommand";
import * as tr from "../lib/ftl";
import { withButton } from "../components/helpers";
import ButtonGroup from "../components/ButtonGroup.svelte";
import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
import LabelButton from "../components/LabelButton.svelte";
import WithShortcut from "../components/WithShortcut.svelte";
export let api = {};
</script>
<ButtonGroup {api}>
<ButtonGroupItem>
<LabelButton
tooltip={tr.editingCustomizeFields()}
on:click={() => bridgeCommand("fields")}
>
{tr.editingFields()}...
</LabelButton>
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut shortcut={"Control+L"} let:createShortcut let:shortcutLabel>
<LabelButton
tooltip={`${tr.editingCustomizeCardTemplates()} (${shortcutLabel})`}
on:click={() => bridgeCommand("cards")}
on:mount={withButton(createShortcut)}
>
{tr.editingCards()}...
</LabelButton>
</WithShortcut>
</ButtonGroupItem>
</ButtonGroup>

14
ts/editor/OldEditorAdapter.svelte
View file

@ -4,9 +4,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script context="module" lang="ts">
import type { EditorFieldAPI } from "./EditorField.svelte";
import type { RichTextInputAPI } from "./RichTextInput.svelte";
import type { PlainTextInputAPI } from "./PlainTextInput.svelte";
import type { EditorToolbarAPI } from "./EditorToolbar.svelte";
import type { RichTextInputAPI } from "./rich-text-input";
import type { PlainTextInputAPI } from "./plain-text-input";
import type { EditorToolbarAPI } from "./editor-toolbar";
import contextProperty from "../sveltelib/context-property";
import { writable, get } from "svelte/store";
@ -34,19 +34,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import Fields from "./Fields.svelte";
import EditorField from "./EditorField.svelte";
import type { FieldData } from "./EditorField.svelte";
import TagEditor from "./TagEditor.svelte";
import { TagEditor } from "./tag-editor";
import EditorToolbar from "./EditorToolbar.svelte";
import { EditorToolbar } from "./editor-toolbar";
import Notification from "./Notification.svelte";
import Absolute from "../components/Absolute.svelte";
import Badge from "../components/Badge.svelte";
import DuplicateLink from "./DuplicateLink.svelte";
import DecoratedElements from "./DecoratedElements.svelte";
import RichTextInput from "./RichTextInput.svelte";
import { RichTextInput } from "./rich-text-input";
import { MathjaxHandle } from "./mathjax-overlay";
import { ImageHandle } from "./image-overlay";
import PlainTextInput from "./PlainTextInput.svelte";
import { PlainTextInput } from "./plain-text-input";
import MathjaxElement from "./MathjaxElement.svelte";
import FrameElement from "./FrameElement.svelte";

30
ts/editor/PreviewButton.svelte
View file

@ -1,30 +0,0 @@
<!--
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 { writable } from "svelte/store";
const active = writable(false);
export const togglePreviewButtonState = (state: boolean) => active.set(state);
</script>
<script lang="ts">
import { bridgeCommand } from "../lib/bridgecommand";
import * as tr from "../lib/ftl";
import { withButton } from "../components/helpers";
import WithShortcut from "../components/WithShortcut.svelte";
import LabelButton from "../components/LabelButton.svelte";
</script>
<WithShortcut shortcut={"Control+Shift+P"} let:createShortcut let:shortcutLabel>
<LabelButton
tooltip={tr.browsingPreviewSelectedCard({ val: shortcutLabel })}
active={$active}
on:click={() => bridgeCommand("preview")}
on:mount={withButton(createShortcut)}
>
{tr.actionsPreview()}
</LabelButton>
</WithShortcut>

72
ts/editor/SelectedTagBadge.svelte
View file

@ -1,72 +0,0 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { createEventDispatcher } from "svelte";
import Badge from "../components/Badge.svelte";
import WithDropdown from "../components/WithDropdown.svelte";
import WithShortcut from "../components/WithShortcut.svelte";
import DropdownMenu from "../components/DropdownMenu.svelte";
import DropdownItem from "../components/DropdownItem.svelte";
import { withSpan, withButton } from "../components/helpers";
import { dotsIcon } from "./icons";
const dispatch = createEventDispatcher();
const allLabel = "Select all tags";
const copyLabel = "Copy tags";
const removeLabel = "Remove tags";
</script>
<WithDropdown let:createDropdown>
<div class="more-icon">
<Badge class="me-1" on:mount={withSpan(createDropdown)}>{@html dotsIcon}</Badge>
<DropdownMenu>
<WithShortcut shortcut="Control+A" let:createShortcut let:shortcutLabel>
<DropdownItem
on:click={(event) => {
dispatch("tagselectall");
event.stopImmediatePropagation();
}}
on:mount={withButton(createShortcut)}
>{allLabel} ({shortcutLabel})</DropdownItem
>
</WithShortcut>
<WithShortcut shortcut="Control+C" let:createShortcut let:shortcutLabel>
<DropdownItem
on:click={() => dispatch("tagcopy")}
on:mount={withButton(createShortcut)}
>{copyLabel} ({shortcutLabel})</DropdownItem
>
</WithShortcut>
<WithShortcut shortcut="Backspace" let:createShortcut let:shortcutLabel>
<DropdownItem
on:click={() => dispatch("tagdelete")}
on:mount={withButton(createShortcut)}
>{removeLabel} ({shortcutLabel})</DropdownItem
>
</WithShortcut>
</DropdownMenu>
</div>
</WithDropdown>
<style lang="scss">
.more-icon {
line-height: 1;
:global(svg) {
padding-bottom: 2px;
cursor: pointer;
fill: currentColor;
opacity: 0.6;
}
:global(svg:hover) {
opacity: 1;
}
}
</style>

178
ts/editor/TemplateButtons.svelte
View file

@ -1,178 +0,0 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import ButtonGroup from "../components/ButtonGroup.svelte";
import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
import IconButton from "../components/IconButton.svelte";
import DropdownMenu from "../components/DropdownMenu.svelte";
import DropdownItem from "../components/DropdownItem.svelte";
import WithDropdown from "../components/WithDropdown.svelte";
import WithShortcut from "../components/WithShortcut.svelte";
import ClozeButton from "./ClozeButton.svelte";
import * as tr from "../lib/ftl";
import { bridgeCommand } from "../lib/bridgecommand";
import { wrapInternal } from "../lib/wrap";
import { getNoteEditor } from "./OldEditorAdapter.svelte";
import { withButton } from "../components/helpers";
import { paperclipIcon, micIcon, functionIcon } from "./icons";
import type { RichTextInputAPI } from "./RichTextInput.svelte";
export let api = {};
const { focusInRichText, activeInput } = getNoteEditor();
function onAttachment(): void {
bridgeCommand("attach");
}
function onRecord(): void {
bridgeCommand("record");
}
$: richTextAPI = $activeInput as RichTextInputAPI;
$: disabled = !$focusInRichText;
async function surround(front: string, back: string): Promise<void> {
const element = await richTextAPI.element;
wrapInternal(element, front, back, false);
}
</script>
<ButtonGroup {api}>
<ButtonGroupItem>
<WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
<IconButton
tooltip="{tr.editingAttachPicturesaudiovideo} ({shortcutLabel})"
iconSize={70}
{disabled}
on:click={onAttachment}
on:mount={withButton(createShortcut)}
>
{@html paperclipIcon}
</IconButton>
</WithShortcut>
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel>
<IconButton
tooltip="{tr.editingRecordAudio()} ({shortcutLabel})"
iconSize={70}
{disabled}
on:click={onRecord}
on:mount={withButton(createShortcut)}
>
{@html micIcon}
</IconButton>
</WithShortcut>
</ButtonGroupItem>
<ButtonGroupItem id="cloze">
<ClozeButton />
</ButtonGroupItem>
<ButtonGroupItem>
<WithDropdown let:createDropdown>
<IconButton {disabled} on:mount={withButton(createDropdown)}>
{@html functionIcon}
</IconButton>
<DropdownMenu>
<WithShortcut
shortcut="Control+M, M"
let:createShortcut
let:shortcutLabel
>
<DropdownItem
on:click={() =>
surround("<anki-mathjax focusonmount>", "</anki-mathjax>")}
on:mount={withButton(createShortcut)}
>
{tr.editingMathjaxInline()}
<span class="ps-1 float-end">{shortcutLabel}</span>
</DropdownItem>
</WithShortcut>
<WithShortcut
shortcut="Control+M, E"
let:createShortcut
let:shortcutLabel
>
<DropdownItem
on:click={() =>
surround(
'<anki-mathjax block="true" focusonmount>',
"</anki-matjax>",
)}
on:mount={withButton(createShortcut)}
>
{tr.editingMathjaxBlock()}
<span class="ps-1 float-end">{shortcutLabel}</span>
</DropdownItem>
</WithShortcut>
<WithShortcut
shortcut="Control+M, C"
let:createShortcut
let:shortcutLabel
>
<DropdownItem
on:click={() =>
surround(
"<anki-mathjax focusonmount>\\ce{",
"}</anki-mathjax>",
)}
on:mount={withButton(createShortcut)}
>
{tr.editingMathjaxChemistry()}
<span class="ps-1 float-end">{shortcutLabel}</span>
</DropdownItem>
</WithShortcut>
<WithShortcut
shortcut="Control+T, T"
let:createShortcut
let:shortcutLabel
>
<DropdownItem
on:click={() => surround("[latex]", "[/latex]")}
on:mount={withButton(createShortcut)}
>
{tr.editingLatex()}
<span class="ps-1 float-end">{shortcutLabel}</span>
</DropdownItem>
</WithShortcut>
<WithShortcut
shortcut="Control+T, E"
let:createShortcut
let:shortcutLabel
>
<DropdownItem
on:click={() => surround("[$]", "[/$]")}
on:mount={withButton(createShortcut)}
>
{tr.editingLatexEquation()}
<span class="ps-1 float-end">{shortcutLabel}</span>
</DropdownItem>
</WithShortcut>
<WithShortcut
shortcut="Control+T, M"
let:createShortcut
let:shortcutLabel
>
<DropdownItem
on:click={() => surround("[$$]", "[/$$]")}
on:mount={withButton(createShortcut)}
>
{tr.editingLatexMathEnv()}
<span class="ps-1 float-end">{shortcutLabel}</span>
</DropdownItem>
</WithShortcut>
</DropdownMenu>
</WithDropdown>
</ButtonGroupItem>
</ButtonGroup>

6
ts/editor/base.ts
View file

@ -28,11 +28,8 @@ export const editorModules = [
ModuleName.BROWSING,
];
export { editorToolbar } from "./EditorToolbar.svelte";
import IconButton from "../components/IconButton.svelte";
import LabelButton from "../components/LabelButton.svelte";
import WithShortcut from "../components/WithShortcut.svelte";
import WithContext from "../components/WithContext.svelte";
import WithState from "../components/WithState.svelte";
@ -42,8 +39,9 @@ import * as editorContextKeys from "./NoteEditor.svelte";
export const components = {
IconButton,
LabelButton,
WithShortcut,
WithContext,
WithState,
contextKeys: { ...contextKeys, ...editorContextKeys },
};
export { editorToolbar } from "./editor-toolbar";

4
ts/editor/AddonButtons.svelte → ts/editor/editor-toolbar/AddonButtons.svelte
View file

@ -3,8 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import ButtonGroup from "../components/ButtonGroup.svelte";
import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
import ButtonGroup from "../../components/ButtonGroup.svelte";
import ButtonGroupItem from "../../components/ButtonGroupItem.svelte";
export let buttons: string[];
</script>

18
ts/editor/BoldButton.svelte → ts/editor/editor-toolbar/BoldButton.svelte
View file

@ -3,16 +3,16 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import * as tr from "../lib/ftl";
import IconButton from "../components/IconButton.svelte";
import Shortcut from "../components/Shortcut.svelte";
import WithState from "../components/WithState.svelte";
import { MatchResult } from "../domlib/surround";
import { getPlatformString } from "../lib/shortcuts";
import { getSurrounder } from "./surround";
import * as tr from "../../lib/ftl";
import IconButton from "../../components/IconButton.svelte";
import Shortcut from "../../components/Shortcut.svelte";
import WithState from "../../components/WithState.svelte";
import { MatchResult } from "../../domlib/surround";
import { getPlatformString } from "../../lib/shortcuts";
import { getSurrounder } from "../surround";
import { getNoteEditor } from "../OldEditorAdapter.svelte";
import type { RichTextInputAPI } from "../rich-text-input";
import { boldIcon } from "./icons";
import { getNoteEditor } from "./OldEditorAdapter.svelte";
import type { RichTextInputAPI } from "./RichTextInput.svelte";
function matchBold(element: Element): Exclude<MatchResult, MatchResult.ALONG> {
if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {

37
ts/editor/ClozeButton.svelte → ts/editor/editor-toolbar/ClozeButton.svelte
View file

@ -3,16 +3,16 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import IconButton from "../components/IconButton.svelte";
import WithShortcut from "../components/WithShortcut.svelte";
import IconButton from "../../components/IconButton.svelte";
import Shortcut from "../../components/Shortcut.svelte";
import * as tr from "../lib/ftl";
import { wrapInternal } from "../lib/wrap";
import { withButton } from "../components/helpers";
import { ellipseIcon } from "./icons";
import * as tr from "../../lib/ftl";
import { wrapInternal } from "../../lib/wrap";
import { getPlatformString } from "../../lib/shortcuts";
import { get } from "svelte/store";
import { getNoteEditor } from "./OldEditorAdapter.svelte";
import type { RichTextInputAPI } from "./RichTextInput.svelte";
import { getNoteEditor } from "../OldEditorAdapter.svelte";
import type { RichTextInputAPI } from "../rich-text-input";
import { ellipseIcon } from "./icons";
const noteEditor = getNoteEditor();
const { focusInRichText, activeInput } = noteEditor;
@ -51,15 +51,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
$: disabled = !$focusInRichText;
const keyCombination = "Control+Alt?+Shift+C";
</script>
<WithShortcut shortcut="Control+Alt?+Shift+C" let:createShortcut let:shortcutLabel>
<IconButton
tooltip="{tr.editingClozeDeletion()} {shortcutLabel}"
{disabled}
on:click={onCloze}
on:mount={withButton(createShortcut)}
>
{@html ellipseIcon}
</IconButton>
</WithShortcut>
<IconButton
tooltip="{tr.editingClozeDeletion()} {getPlatformString(keyCombination)}"
{disabled}
on:click={onCloze}
>
{@html ellipseIcon}
</IconButton>
<Shortcut {keyCombination} on:action={(event) => onCloze(event.detail.originalEvent)} />

121
ts/editor/editor-toolbar/ColorButtons.svelte Normal file
View file

@ -0,0 +1,121 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import ButtonGroup from "../../components/ButtonGroup.svelte";
import ButtonGroupItem from "../../components/ButtonGroupItem.svelte";
import IconButton from "../../components/IconButton.svelte";
import ColorPicker from "../../components/ColorPicker.svelte";
import Shortcut from "../../components/Shortcut.svelte";
import WithColorHelper from "./WithColorHelper.svelte";
import * as tr from "../../lib/ftl";
import { bridgeCommand } from "../../lib/bridgecommand";
import { getPlatformString } from "../../lib/shortcuts";
import { execCommand } from "../helpers";
import { getNoteEditor } from "../OldEditorAdapter.svelte";
import { textColorIcon, highlightColorIcon, arrowIcon } from "./icons";
export let api = {};
export let textColor: string;
export let highlightColor: string;
const forecolorKeyCombination = "F7";
$: forecolorWrap = wrapWithForecolor(textColor);
const backcolorKeyCombination = "F8";
$: backcolorWrap = wrapWithBackcolor(highlightColor);
const wrapWithForecolor = (color: string) => () => {
execCommand("forecolor", false, color);
};
const wrapWithBackcolor = (color: string) => () => {
execCommand("backcolor", false, color);
};
const { focusInRichText } = getNoteEditor();
$: disabled = !$focusInRichText;
</script>
<ButtonGroup {api}>
<WithColorHelper color={textColor} let:colorHelperIcon let:setColor>
<ButtonGroupItem>
<IconButton
tooltip="{tr.editingSetTextColor()} ({getPlatformString(
forecolorKeyCombination,
)})"
{disabled}
on:click={forecolorWrap}
>
{@html textColorIcon}
{@html colorHelperIcon}
</IconButton>
<Shortcut
keyCombination={forecolorKeyCombination}
on:action={forecolorWrap}
/>
</ButtonGroupItem>
<ButtonGroupItem>
<IconButton
tooltip="{tr.editingChangeColor()} ({getPlatformString(
backcolorKeyCombination,
)})"
{disabled}
widthMultiplier={0.5}
>
{@html arrowIcon}
<ColorPicker
on:change={(event) => {
const textColor = setColor(event);
bridgeCommand(`lastTextColor:${textColor}`);
forecolorWrap = wrapWithForecolor(setColor(event));
forecolorWrap();
}}
/>
</IconButton>
<Shortcut
keyCombination={backcolorKeyCombination}
on:action={(event) => {
const textColor = setColor(event);
bridgeCommand(`lastTextColor:${textColor}`);
forecolorWrap = wrapWithForecolor(setColor(event));
forecolorWrap();
}}
/>
</ButtonGroupItem>
</WithColorHelper>
<WithColorHelper color={highlightColor} let:colorHelperIcon let:setColor>
<ButtonGroupItem>
<IconButton
tooltip={tr.editingSetTextHighlightColor()}
{disabled}
on:click={backcolorWrap}
>
{@html highlightColorIcon}
{@html colorHelperIcon}
</IconButton>
</ButtonGroupItem>
<ButtonGroupItem>
<IconButton
tooltip={tr.editingChangeColor()}
widthMultiplier={0.5}
{disabled}
>
{@html arrowIcon}
<ColorPicker
on:change={(event) => {
const highlightColor = setColor(event);
bridgeCommand(`lastHighlightColor:${highlightColor}`);
backcolorWrap = wrapWithBackcolor(highlightColor);
backcolorWrap();
}}
/>
</IconButton>
</ButtonGroupItem>
</WithColorHelper>
</ButtonGroup>

66
ts/editor/editor-toolbar/CommandIconButton.svelte Normal file
View file

@ -0,0 +1,66 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import IconButton from "../../components/IconButton.svelte";
import Shortcut from "../../components/Shortcut.svelte";
import WithState from "../../components/WithState.svelte";
import { execCommand, queryCommandState } from "../helpers";
import { getNoteEditor } from "../OldEditorAdapter.svelte";
export let key: string;
export let tooltip: string;
export let shortcut: string = "";
export let withoutShortcut = false;
export let withoutState = false;
const { focusInRichText } = getNoteEditor();
function action() {
execCommand(key);
}
$: disabled = !$focusInRichText;
</script>
{#if withoutState}
<IconButton {tooltip} {disabled} on:click={action}>
<slot />
</IconButton>
{#if !withoutShortcut}
<Shortcut keyCombination={shortcut} on:click={action} />
{/if}
{:else}
<WithState
{key}
update={async () => queryCommandState(key)}
let:state={active}
let:updateState
>
<IconButton
{tooltip}
{active}
{disabled}
on:click={(event) => {
action();
updateState(event);
}}
>
<slot />
</IconButton>
{#if !withoutShortcut}
<Shortcut
keyCombination={shortcut}
on:action={(event) => {
action();
updateState(event);
}}
/>
{/if}
</WithState>
{/if}

14
ts/editor/EditorToolbar.svelte → ts/editor/editor-toolbar/EditorToolbar.svelte
View file

@ -3,11 +3,9 @@ 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 "./legacy.css";
import { updateAllState, resetAllState } from "../components/WithState.svelte";
import type { ButtonGroupAPI } from "../components/ButtonGroup.svelte";
import type { ButtonToolbarAPI } from "../components/ButtonToolbar.svelte";
import { updateAllState, resetAllState } from "../../components/WithState.svelte";
import type { ButtonGroupAPI } from "../../components/ButtonGroup.svelte";
import type { ButtonToolbarAPI } from "../../components/ButtonToolbar.svelte";
export function updateActiveButtons(event: Event) {
updateAllState(event);
@ -38,9 +36,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script>
<script lang="ts">
import StickyContainer from "../components/StickyContainer.svelte";
import ButtonToolbar from "../components/ButtonToolbar.svelte";
import Item from "../components/Item.svelte";
import StickyContainer from "../../components/StickyContainer.svelte";
import ButtonToolbar from "../../components/ButtonToolbar.svelte";
import Item from "../../components/Item.svelte";
import NoteTypeButtons from "./NoteTypeButtons.svelte";
import FormatInlineButtons from "./FormatInlineButtons.svelte";

82
ts/editor/FormatBlockButtons.svelte → ts/editor/editor-toolbar/FormatBlockButtons.svelte
View file

@ -3,17 +3,19 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import ButtonGroup from "../components/ButtonGroup.svelte";
import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
import IconButton from "../components/IconButton.svelte";
import ButtonDropdown from "../components/ButtonDropdown.svelte";
import Item from "../components/Item.svelte";
import WithDropdown from "../components/WithDropdown.svelte";
import ButtonGroup from "../../components/ButtonGroup.svelte";
import ButtonGroupItem from "../../components/ButtonGroupItem.svelte";
import IconButton from "../../components/IconButton.svelte";
import ButtonDropdown from "../../components/ButtonDropdown.svelte";
import Item from "../../components/Item.svelte";
import Shortcut from "../../components/Shortcut.svelte";
import WithDropdown from "../../components/WithDropdown.svelte";
import CommandIconButton from "./CommandIconButton.svelte";
import * as tr from "../lib/ftl";
import { getListItem } from "../lib/dom";
import { execCommand } from "./helpers";
import * as tr from "../../lib/ftl";
import { getListItem } from "../../lib/dom";
import { getPlatformString } from "../../lib/shortcuts";
import { execCommand } from "../helpers";
import {
ulIcon,
olIcon,
@ -25,12 +27,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
indentIcon,
outdentIcon,
} from "./icons";
import { getNoteEditor } from "./OldEditorAdapter.svelte";
import WithShortcut from "../components/WithShortcut.svelte";
import { withButton } from "../components/helpers";
import { getNoteEditor } from "../OldEditorAdapter.svelte";
export let api = {};
const outdentKeyCombination = "Control+Shift+,";
function outdentListItem() {
if (getListItem(document.activeElement!.shadowRoot!)) {
execCommand("outdent");
@ -39,6 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
}
const indentKeyCombination = "Control+Shift+.";
function indentListItem() {
if (getListItem(document.activeElement!.shadowRoot!)) {
execCommand("indent");
@ -56,7 +58,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<CommandIconButton
key="insertUnorderedList"
tooltip={tr.editingUnorderedList()}
shortcut={"Control+,"}>{@html ulIcon}</CommandIconButton
shortcut="Control+,">{@html ulIcon}</CommandIconButton
>
</ButtonGroupItem>
@ -64,7 +66,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<CommandIconButton
key="insertOrderedList"
tooltip={tr.editingOrderedList()}
shortcut={"Control+."}>{@html olIcon}</CommandIconButton
shortcut="Control+.">{@html olIcon}</CommandIconButton
>
</ButtonGroupItem>
@ -121,37 +123,37 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<Item id="indentation">
<ButtonGroup>
<ButtonGroupItem>
<WithShortcut
shortcut={"Control+Shift+,"}
let:createShortcut
let:shortcutLabel
<IconButton
tooltip="{tr.editingOutdent()} ({getPlatformString(
outdentKeyCombination,
)})"
{disabled}
on:click={outdentListItem}
>
<IconButton
on:click={outdentListItem}
on:mount={withButton(createShortcut)}
tooltip="{tr.editingOutdent()} ({shortcutLabel})"
{disabled}
>
{@html outdentIcon}
</IconButton>
</WithShortcut>
{@html outdentIcon}
</IconButton>
<Shortcut
keyCombination={outdentKeyCombination}
on:action={outdentListItem}
/>
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut
shortcut={"Control+Shift+."}
let:createShortcut
let:shortcutLabel
<IconButton
tooltip="{tr.editingIndent()} ({getPlatformString(
indentKeyCombination,
)})"
{disabled}
on:click={indentListItem}
>
<IconButton
on:click={indentListItem}
on:mount={withButton(createShortcut)}
tooltip="{tr.editingIndent()} ({shortcutLabel})"
{disabled}
>
{@html indentIcon}
</IconButton>
</WithShortcut>
{@html indentIcon}
</IconButton>
<Shortcut
keyCombination={indentKeyCombination}
on:action={indentListItem}
/>
</ButtonGroupItem>
</ButtonGroup>
</Item>

12
ts/editor/FormatInlineButtons.svelte → ts/editor/editor-toolbar/FormatInlineButtons.svelte
View file

@ -3,14 +3,14 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import ButtonGroup from "../components/ButtonGroup.svelte";
import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
import ButtonGroup from "../../components/ButtonGroup.svelte";
import ButtonGroupItem from "../../components/ButtonGroupItem.svelte";
import CommandIconButton from "./CommandIconButton.svelte";
import BoldButton from "./BoldButton.svelte";
import ItalicButton from "./ItalicButton.svelte";
import UnderlineButton from "./UnderlineButton.svelte";
import * as tr from "../lib/ftl";
import * as tr from "../../lib/ftl";
import { superscriptIcon, subscriptIcon, eraserIcon } from "./icons";
export let api = {};
@ -32,7 +32,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ButtonGroupItem>
<CommandIconButton
key="superscript"
shortcut={"Control+="}
shortcut="Control+="
tooltip={tr.editingSuperscript()}>{@html superscriptIcon}</CommandIconButton
>
</ButtonGroupItem>
@ -40,7 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ButtonGroupItem>
<CommandIconButton
key="subscript"
shortcut={"Control+Shift+="}
shortcut="Control+Shift+="
tooltip={tr.editingSubscript()}>{@html subscriptIcon}</CommandIconButton
>
</ButtonGroupItem>
@ -48,7 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ButtonGroupItem>
<CommandIconButton
key="removeFormat"
shortcut={"Control+R"}
shortcut="Control+R"
tooltip={tr.editingRemoveFormatting()}
withoutState>{@html eraserIcon}</CommandIconButton
>

18
ts/editor/ItalicButton.svelte → ts/editor/editor-toolbar/ItalicButton.svelte
View file

@ -3,16 +3,16 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import * as tr from "../lib/ftl";
import IconButton from "../components/IconButton.svelte";
import Shortcut from "../components/Shortcut.svelte";
import WithState from "../components/WithState.svelte";
import { MatchResult } from "../domlib/surround";
import { getPlatformString } from "../lib/shortcuts";
import { getSurrounder } from "./surround";
import * as tr from "../../lib/ftl";
import IconButton from "../../components/IconButton.svelte";
import Shortcut from "../../components/Shortcut.svelte";
import WithState from "../../components/WithState.svelte";
import { MatchResult } from "../../domlib/surround";
import { getPlatformString } from "../../lib/shortcuts";
import { getSurrounder } from "../surround";
import { italicIcon } from "./icons";
import { getNoteEditor } from "./OldEditorAdapter.svelte";
import type { RichTextInputAPI } from "./RichTextInput.svelte";
import { getNoteEditor } from "../OldEditorAdapter.svelte";
import type { RichTextInputAPI } from "../rich-text-input";
function matchItalic(element: Element): Exclude<MatchResult, MatchResult.ALONG> {
if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {

79
ts/editor/editor-toolbar/LatexButton.svelte Normal file
View file

@ -0,0 +1,79 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import * as tr from "../../lib/ftl";
import IconButton from "../../components/IconButton.svelte";
import WithDropdown from "../../components/WithDropdown.svelte";
import DropdownMenu from "../../components/DropdownMenu.svelte";
import DropdownItem from "../../components/DropdownItem.svelte";
import Shortcut from "../../components/Shortcut.svelte";
import { withButton } from "../../components/helpers";
import { getPlatformString } from "../../lib/shortcuts";
import { wrapInternal } from "../../lib/wrap";
import { functionIcon } from "./icons";
import { getNoteEditor } from "../OldEditorAdapter.svelte";
import type { RichTextInputAPI } from "../rich-text-input";
const { activeInput, focusInRichText } = getNoteEditor();
$: richTextAPI = $activeInput as RichTextInputAPI;
async function surround(front: string, back: string): Promise<void> {
const element = await richTextAPI.element;
wrapInternal(element, front, back, false);
}
function onMathjaxInline(): void {
surround("<anki-mathjax focusonmount>", "</anki-mathjax>");
}
function onMathjaxBlock(): void {
surround('<anki-mathjax block="true" focusonmount>', "</anki-matjax>");
}
function onMathjaxChemistry(): void {
surround("<anki-mathjax focusonmount>\\ce{", "}</anki-mathjax>");
}
function onLatex(): void {
surround("[latex]", "[/latex]");
}
function onLatexEquation(): void {
surround("[$]", "[/$]");
}
function onLatexMathEnv(): void {
surround("[$$]", "[/$$]");
}
type LatexItem = [() => void, string, string];
const dropdownItems: LatexItem[] = [
[onMathjaxInline, "Control+M, M", tr.editingMathjaxInline()],
[onMathjaxBlock, "Control+M, E", tr.editingMathjaxBlock()],
[onMathjaxChemistry, "Control+M, C", tr.editingMathjaxChemistry()],
[onLatex, "Control+T, T", tr.editingLatex()],
[onLatexEquation, "Control+T, E", tr.editingLatexEquation()],
[onLatexMathEnv, "Control+T, M", tr.editingLatexMathEnv()],
];
$: disabled = !$focusInRichText;
</script>
<WithDropdown let:createDropdown>
<IconButton {disabled} on:mount={withButton(createDropdown)}>
{@html functionIcon}
</IconButton>
<DropdownMenu>
{#each dropdownItems as [callback, keyCombination, label]}
<DropdownItem on:click={callback}>
{label}
<span class="ps-1 float-end">{getPlatformString(keyCombination)}</span>
</DropdownItem>
<Shortcut {keyCombination} on:action={callback} />
{/each}
</DropdownMenu>
</WithDropdown>

41
ts/editor/editor-toolbar/NoteTypeButtons.svelte Normal file
View file

@ -0,0 +1,41 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import * as tr from "../../lib/ftl";
import { bridgeCommand } from "../../lib/bridgecommand";
import { getPlatformString } from "../../lib/shortcuts";
import ButtonGroup from "../../components/ButtonGroup.svelte";
import ButtonGroupItem from "../../components/ButtonGroupItem.svelte";
import LabelButton from "../../components/LabelButton.svelte";
import Shortcut from "../../components/Shortcut.svelte";
export let api = {};
const keyCombination = "Control+L";
</script>
<ButtonGroup {api}>
<ButtonGroupItem>
<LabelButton
tooltip={tr.editingCustomizeFields()}
on:click={() => bridgeCommand("fields")}
>
{tr.editingFields()}...
</LabelButton>
</ButtonGroupItem>
<ButtonGroupItem>
<LabelButton
tooltip="{tr.editingCustomizeCardTemplates()} ({getPlatformString(
keyCombination,
)})"
on:click={() => bridgeCommand("cards")}
>
{tr.editingCards()}...
</LabelButton>
<Shortcut {keyCombination} on:action={() => bridgeCommand("cards")} />
</ButtonGroupItem>
</ButtonGroup>

34
ts/editor/editor-toolbar/PreviewButton.svelte Normal file
View file

@ -0,0 +1,34 @@
<!--
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 { writable } from "svelte/store";
const active = writable(false);
export const togglePreviewButtonState = (state: boolean) => active.set(state);
</script>
<script lang="ts">
import { bridgeCommand } from "../../lib/bridgecommand";
import { getPlatformString } from "../../lib/shortcuts";
import * as tr from "../../lib/ftl";
import LabelButton from "../../components/LabelButton.svelte";
import Shortcut from "../../components/Shortcut.svelte";
const keyCombination = "Control+Shift+P";
function preview(): void {
bridgeCommand("preview");
}
</script>
<LabelButton
tooltip={tr.browsingPreviewSelectedCard({ val: getPlatformString(keyCombination) })}
active={$active}
on:click={preview}
>
{tr.actionsPreview()}
</LabelButton>
<Shortcut keyCombination="Control+Shift+P" on:action={preview} />

70
ts/editor/editor-toolbar/TemplateButtons.svelte Normal file
View file

@ -0,0 +1,70 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import * as tr from "../../lib/ftl";
import ButtonGroup from "../../components/ButtonGroup.svelte";
import ButtonGroupItem from "../../components/ButtonGroupItem.svelte";
import IconButton from "../../components/IconButton.svelte";
import Shortcut from "../../components/Shortcut.svelte";
import ClozeButton from "./ClozeButton.svelte";
import LatexButton from "./LatexButton.svelte";
import { bridgeCommand } from "../../lib/bridgecommand";
import { getPlatformString } from "../../lib/shortcuts";
import { getNoteEditor } from "../OldEditorAdapter.svelte";
import { paperclipIcon, micIcon } from "./icons";
export let api = {};
const { focusInRichText } = getNoteEditor();
const attachmentKeyCombination = "F3";
function onAttachment(): void {
bridgeCommand("attach");
}
const recordKeyCombination = "F5";
function onRecord(): void {
bridgeCommand("record");
}
$: disabled = !$focusInRichText;
</script>
<ButtonGroup {api}>
<ButtonGroupItem>
<IconButton
tooltip="{tr.editingAttachPicturesaudiovideo()} ({getPlatformString(
attachmentKeyCombination,
)})"
iconSize={70}
{disabled}
on:click={onAttachment}
>
{@html paperclipIcon}
</IconButton>
<Shortcut keyCombination={attachmentKeyCombination} on:action={onAttachment} />
</ButtonGroupItem>
<ButtonGroupItem>
<IconButton
tooltip="{tr.editingRecordAudio()} ({getPlatformString(
recordKeyCombination,
)})"
iconSize={70}
{disabled}
on:click={onRecord}
>
{@html micIcon}
</IconButton>
<Shortcut keyCombination={recordKeyCombination} on:action={onRecord} />
</ButtonGroupItem>
<ButtonGroupItem id="cloze">
<ClozeButton />
</ButtonGroupItem>
<ButtonGroupItem>
<LatexButton />
</ButtonGroupItem>
</ButtonGroup>

18
ts/editor/UnderlineButton.svelte → ts/editor/editor-toolbar/UnderlineButton.svelte
View file

@ -3,16 +3,16 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import * as tr from "../lib/ftl";
import IconButton from "../components/IconButton.svelte";
import Shortcut from "../components/Shortcut.svelte";
import WithState from "../components/WithState.svelte";
import { MatchResult } from "../domlib/surround";
import { getPlatformString } from "../lib/shortcuts";
import { getSurrounder } from "./surround";
import * as tr from "../../lib/ftl";
import IconButton from "../../components/IconButton.svelte";
import Shortcut from "../../components/Shortcut.svelte";
import WithState from "../../components/WithState.svelte";
import { MatchResult } from "../../domlib/surround";
import { getPlatformString } from "../../lib/shortcuts";
import { getSurrounder } from "../surround";
import { getNoteEditor } from "../OldEditorAdapter.svelte";
import type { RichTextInputAPI } from "../rich-text-input";
import { underlineIcon } from "./icons";
import { getNoteEditor } from "./OldEditorAdapter.svelte";
import type { RichTextInputAPI } from "./RichTextInput.svelte";
function matchUnderline(element: Element): Exclude<MatchResult, MatchResult.ALONG> {
if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {

0
ts/editor/WithColorHelper.svelte → ts/editor/editor-toolbar/WithColorHelper.svelte
View file

34
ts/editor/editor-toolbar/icons.ts Normal file
View file

@ -0,0 +1,34 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/// <reference types="../../lib/image-import" />
export { default as boldIcon } from "bootstrap-icons/icons/type-bold.svg";
export { default as italicIcon } from "bootstrap-icons/icons/type-italic.svg";
export { default as underlineIcon } from "bootstrap-icons/icons/type-underline.svg";
export { default as superscriptIcon } from "@mdi/svg/svg/format-superscript.svg";
export { default as subscriptIcon } from "@mdi/svg/svg/format-subscript.svg";
export { default as eraserIcon } from "bootstrap-icons/icons/eraser.svg";
export { default as ulIcon } from "bootstrap-icons/icons/list-ul.svg";
export { default as olIcon } from "bootstrap-icons/icons/list-ol.svg";
export { default as listOptionsIcon } from "bootstrap-icons/icons/text-paragraph.svg";
export { default as justifyFullIcon } from "bootstrap-icons/icons/justify.svg";
export { default as justifyLeftIcon } from "bootstrap-icons/icons/text-left.svg";
export { default as justifyRightIcon } from "bootstrap-icons/icons/text-right.svg";
export { default as justifyCenterIcon } from "bootstrap-icons/icons/text-center.svg";
export { default as indentIcon } from "bootstrap-icons/icons/text-indent-left.svg";
export { default as outdentIcon } from "bootstrap-icons/icons/text-indent-right.svg";
export { default as textColorIcon } from "@mdi/svg/svg/format-color-text.svg";
export { default as highlightColorIcon } from "@mdi/svg/svg/format-color-highlight.svg";
export { default as colorHelperIcon } from "@mdi/svg/svg/color-helper.svg";
export const arrowIcon =
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="transparent" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/></svg>';
export { default as paperclipIcon } from "@mdi/svg/svg/paperclip.svg";
export { default as micIcon } from "bootstrap-icons/icons/mic.svg";
export { default as ellipseIcon } from "@mdi/svg/svg/contain.svg";
export { default as functionIcon } from "@mdi/svg/svg/function-variant.svg";

5
ts/editor/editor-toolbar/index.ts Normal file
View file

@ -0,0 +1,5 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export { default as EditorToolbar, editorToolbar } from "./EditorToolbar.svelte";
export type { EditorToolbarAPI } from "./EditorToolbar.svelte";

37
ts/editor/icons.ts
View file

@ -3,45 +3,8 @@
/// <reference types="../lib/image-import" />
export { default as boldIcon } from "bootstrap-icons/icons/type-bold.svg";
export { default as italicIcon } from "bootstrap-icons/icons/type-italic.svg";
export { default as underlineIcon } from "bootstrap-icons/icons/type-underline.svg";
export { default as superscriptIcon } from "@mdi/svg/svg/format-superscript.svg";
export { default as subscriptIcon } from "@mdi/svg/svg/format-subscript.svg";
export { default as eraserIcon } from "bootstrap-icons/icons/eraser.svg";
export { default as ulIcon } from "bootstrap-icons/icons/list-ul.svg";
export { default as olIcon } from "bootstrap-icons/icons/list-ol.svg";
export { default as listOptionsIcon } from "bootstrap-icons/icons/text-paragraph.svg";
export { default as justifyFullIcon } from "bootstrap-icons/icons/justify.svg";
export { default as justifyLeftIcon } from "bootstrap-icons/icons/text-left.svg";
export { default as justifyRightIcon } from "bootstrap-icons/icons/text-right.svg";
export { default as justifyCenterIcon } from "bootstrap-icons/icons/text-center.svg";
export { default as indentIcon } from "bootstrap-icons/icons/text-indent-left.svg";
export { default as outdentIcon } from "bootstrap-icons/icons/text-indent-right.svg";
export { default as squareFillIcon } from "bootstrap-icons/icons/square-fill.svg";
export { default as textColorIcon } from "@mdi/svg/svg/format-color-text.svg";
export { default as highlightColorIcon } from "@mdi/svg/svg/format-color-highlight.svg";
export { default as colorHelperIcon } from "@mdi/svg/svg/color-helper.svg";
export { default as paperclipIcon } from "@mdi/svg/svg/paperclip.svg";
export { default as micIcon } from "bootstrap-icons/icons/mic.svg";
export { default as ellipseIcon } from "@mdi/svg/svg/contain.svg";
export { default as functionIcon } from "@mdi/svg/svg/function-variant.svg";
export { default as descriptionIcon } from "bootstrap-icons/icons/info-circle.svg";
export { default as tagIcon } from "@mdi/svg/svg/tag.svg";
export { default as addTagIcon } from "@mdi/svg/svg/tag-plus.svg";
export { default as dotsIcon } from "@mdi/svg/svg/dots-vertical.svg";
export { default as deleteIcon } from "bootstrap-icons/icons/x.svg";
export const arrowIcon =
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="transparent" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/></svg>';
export { default as alertIcon } from "@mdi/svg/svg/alert.svg";
export { default as richTextOn } from "@mdi/svg/svg/eye-outline.svg";

8
ts/editor/image-overlay/ImageHandle.svelte
View file

@ -3,6 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { tick, onDestroy } from "svelte";
import WithDropdown from "../../components/WithDropdown.svelte";
import ButtonDropdown from "../../components/ButtonDropdown.svelte";
import Item from "../../components/Item.svelte";
@ -11,20 +12,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import HandleSelection from "../HandleSelection.svelte";
import HandleControl from "../HandleControl.svelte";
import HandleLabel from "../HandleLabel.svelte";
import { getRichTextInput } from "../rich-text-input";
import WithImageConstrained from "./WithImageConstrained.svelte";
import FloatButtons from "./FloatButtons.svelte";
import SizeSelect from "./SizeSelect.svelte";
import { tick, onDestroy } from "svelte";
import type { StyleObject } from "../CustomStyles.svelte";
import { getRichTextInput } from "../RichTextInput.svelte";
const { container, styles } = getRichTextInput();
const sheetPromise = styles
.addStyleTag("imageOverlay")
.then((styleObject: StyleObject) => styleObject.element.sheet!);
.then((styleObject) => styleObject.element.sheet!);
let activeImage: HTMLImageElement | null = null;

12
ts/editor/mathjax-overlay/MathjaxHandle.svelte
View file

@ -3,17 +3,17 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import WithDropdown from "../../components/WithDropdown.svelte";
import MathjaxMenu from "./MathjaxMenu.svelte";
import HandleSelection from "../HandleSelection.svelte";
import HandleBackground from "../HandleBackground.svelte";
import HandleControl from "../HandleControl.svelte";
import { onMount, onDestroy, tick } from "svelte";
import { writable } from "svelte/store";
import { getRichTextInput } from "../RichTextInput.svelte";
import WithDropdown from "../../components/WithDropdown.svelte";
import { noop } from "../../lib/functional";
import { on } from "../../lib/events";
import { Mathjax } from "../../editable/mathjax-element";
import HandleSelection from "../HandleSelection.svelte";
import HandleBackground from "../HandleBackground.svelte";
import HandleControl from "../HandleControl.svelte";
import { getRichTextInput } from "../rich-text-input";
import MathjaxMenu from "./MathjaxMenu.svelte";
const { container, api } = getRichTextInput();
const { flushCaret, preventResubscription } = api;

16
ts/editor/PlainTextInput.svelte → ts/editor/plain-text-input/PlainTextInput.svelte
View file

@ -3,9 +3,8 @@ 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 type { EditingInputAPI } from "./EditingArea.svelte";
import type { CodeMirror as CodeMirrorType } from "./code-mirror";
import CodeMirror from "./CodeMirror.svelte";
import type { EditingInputAPI } from "../EditingArea.svelte";
import type { CodeMirror as CodeMirrorType } from "../code-mirror";
export interface PlainTextInputAPI extends EditingInputAPI {
name: "plain-text";
@ -18,13 +17,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script>
<script lang="ts">
import type { CodeMirrorAPI } from "./CodeMirror.svelte";
import { tick, onMount } from "svelte";
import { writable } from "svelte/store";
import { pageTheme } from "../sveltelib/theme";
import { getDecoratedElements } from "./DecoratedElements.svelte";
import { getEditingArea } from "./EditingArea.svelte";
import { htmlanki, baseOptions, gutterOptions } from "./code-mirror";
import { pageTheme } from "../../sveltelib/theme";
import { getDecoratedElements } from "../DecoratedElements.svelte";
import { getEditingArea } from "../EditingArea.svelte";
import CodeMirror from "../CodeMirror.svelte";
import type { CodeMirrorAPI } from "../CodeMirror.svelte";
import { htmlanki, baseOptions, gutterOptions } from "../code-mirror";
export let hidden = false;

8
ts/editor/plain-text-input/index.ts Normal file
View file

@ -0,0 +1,8 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export {
default as PlainTextInput,
parsingInstructions,
} from "./PlainTextInput.svelte";
export type { PlainTextInputAPI } from "./PlainTextInput.svelte";

0
ts/editor/CustomStyles.svelte → ts/editor/rich-text-input/CustomStyles.svelte
View file

38
ts/editor/RichTextInput.svelte → ts/editor/rich-text-input/RichTextInput.svelte
View file

@ -4,15 +4,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script context="module" lang="ts">
import type CustomStyles from "./CustomStyles.svelte";
import type { EditingInputAPI } from "./EditingArea.svelte";
import type { ContentEditableAPI } from "../editable/ContentEditable.svelte";
import contextProperty from "../sveltelib/context-property";
import type { EditingInputAPI } from "../EditingArea.svelte";
import type { ContentEditableAPI } from "../../editable/ContentEditable.svelte";
import contextProperty from "../../sveltelib/context-property";
import type {
Trigger,
OnInsertCallback,
OnInputCallback,
} from "../sveltelib/input-manager";
import { pageTheme } from "../sveltelib/theme";
} from "../../sveltelib/input-manager";
import { pageTheme } from "../../sveltelib/theme";
export interface RichTextInputAPI extends EditingInputAPI, ContentEditableAPI {
name: "rich-text";
@ -39,8 +39,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export { getRichTextInput, hasRichTextInput };
import getDOMMirror from "../sveltelib/mirror-dom";
import getInputManager from "../sveltelib/input-manager";
import getDOMMirror from "../../sveltelib/mirror-dom";
import getInputManager from "../../sveltelib/input-manager";
const {
manager: globalInputManager,
@ -53,23 +53,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script>
<script lang="ts">
import RichTextStyles from "./RichTextStyles.svelte";
import SetContext from "./SetContext.svelte";
import ContentEditable from "../editable/ContentEditable.svelte";
import { onMount, getAllContexts } from "svelte";
import {
nodeIsElement,
nodeContainsInlineContent,
fragmentToString,
} from "../lib/dom";
import { placeCaretAfterContent } from "../domlib/place-caret";
import { getDecoratedElements } from "./DecoratedElements.svelte";
import { getEditingArea } from "./EditingArea.svelte";
import { promiseWithResolver } from "../lib/promise";
import { bridgeCommand } from "../lib/bridgecommand";
import { on } from "../lib/events";
import { nodeStore } from "../sveltelib/node-store";
import type { DecoratedElement } from "../editable/decorated";
} from "../../lib/dom";
import ContentEditable from "../../editable/ContentEditable.svelte";
import { placeCaretAfterContent } from "../../domlib/place-caret";
import { getDecoratedElements } from "../DecoratedElements.svelte";
import { getEditingArea } from "../EditingArea.svelte";
import { promiseWithResolver } from "../../lib/promise";
import { bridgeCommand } from "../../lib/bridgecommand";
import { on } from "../../lib/events";
import { nodeStore } from "../../sveltelib/node-store";
import type { DecoratedElement } from "../../editable/decorated";
import RichTextStyles from "./RichTextStyles.svelte";
import SetContext from "./SetContext.svelte";
export let hidden: boolean;

9
ts/editor/RichTextStyles.svelte → ts/editor/rich-text-input/RichTextStyles.svelte
View file

@ -3,13 +3,12 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import CustomStyles from "./CustomStyles.svelte";
import { promiseWithResolver } from "../lib/promise";
import type { StyleLinkType, StyleObject } from "./CustomStyles.svelte";
import { getContext } from "svelte";
import type { Readable } from "svelte/store";
import { fontFamilyKey, fontSizeKey, directionKey } from "../lib/context-keys";
import CustomStyles from "./CustomStyles.svelte";
import type { StyleLinkType, StyleObject } from "./CustomStyles.svelte";
import { promiseWithResolver } from "../../lib/promise";
import { fontFamilyKey, fontSizeKey, directionKey } from "../../lib/context-keys";
const [promise, customStylesResolve] = promiseWithResolver<CustomStyles>();
const [userBaseStyle, userBaseResolve] = promiseWithResolver<StyleObject>();

0
ts/editor/SetContext.svelte → ts/editor/rich-text-input/SetContext.svelte
View file

0
ts/editor/StyleLink.svelte → ts/editor/rich-text-input/StyleLink.svelte
View file

0
ts/editor/StyleTag.svelte → ts/editor/rich-text-input/StyleTag.svelte
View file

5
ts/editor/rich-text-input/index.ts Normal file
View file

@ -0,0 +1,5 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export { default as RichTextInput, getRichTextInput } from "./RichTextInput.svelte";
export type { RichTextInputAPI } from "./RichTextInput.svelte";

2
ts/editor/surround.ts
View file

@ -5,7 +5,7 @@ import { get } from "svelte/store";
import { getSelection, getRange } from "../lib/cross-browser";
import { surroundNoSplitting, unsurround, findClosest } from "../domlib/surround";
import type { ElementMatcher, ElementClearer } from "../domlib/surround";
import type { RichTextInputAPI } from "./RichTextInput.svelte";
import type { RichTextInputAPI } from "./rich-text-input";
function isSurroundedInner(
range: AbstractRange,

39
ts/editor/AddTagBadge.svelte → ts/editor/tag-editor/AddTagBadge.svelte
View file

@ -3,28 +3,33 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import WithShortcut from "../components/WithShortcut.svelte";
import Badge from "../components/Badge.svelte";
import { withSpan } from "../components/helpers";
import { createEventDispatcher } from "svelte";
import Badge from "../../components/Badge.svelte";
import Shortcut from "../../components/Shortcut.svelte";
import { getPlatformString } from "../../lib/shortcuts";
import { tagIcon, addTagIcon } from "./icons";
const dispatch = createEventDispatcher();
const tooltip = "Add tag";
const keyCombination = "Control+Shift+T";
function appendTag(): void {
dispatch("tagappend");
}
</script>
<WithShortcut shortcut="Control+Shift+T" let:createShortcut let:shortcutLabel>
<div class="add-icon">
<Badge
class="d-flex me-1"
tooltip="{tooltip} ({shortcutLabel})"
on:click
on:mount={withSpan(createShortcut)}
>
{@html tagIcon}
{@html addTagIcon}
</Badge>
</div>
</WithShortcut>
<div class="add-icon">
<Badge
class="d-flex me-1"
tooltip="{tooltip} ({getPlatformString(keyCombination)})"
on:click={appendTag}
>
{@html tagIcon}
{@html addTagIcon}
</Badge>
<Shortcut {keyCombination} on:action={appendTag} />
</div>
<style lang="scss">
.add-icon {

2
ts/editor/AutocompleteItem.svelte → ts/editor/tag-editor/AutocompleteItem.svelte
View file

@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { onMount, createEventDispatcher } from "svelte";
import { pageTheme } from "../sveltelib/theme";
import { pageTheme } from "../../sveltelib/theme";
export let id: string | undefined = undefined;
let className = "";

79
ts/editor/tag-editor/SelectedTagBadge.svelte Normal file
View file

@ -0,0 +1,79 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { createEventDispatcher } from "svelte";
import Badge from "../../components/Badge.svelte";
import Shortcut from "../../components/Shortcut.svelte";
import WithDropdown from "../../components/WithDropdown.svelte";
import DropdownMenu from "../../components/DropdownMenu.svelte";
import DropdownItem from "../../components/DropdownItem.svelte";
import { withSpan } from "../../components/helpers";
import { getPlatformString } from "../../lib/shortcuts";
import { dotsIcon } from "./icons";
const dispatch = createEventDispatcher();
const allLabel = "Select all tags";
const allShortcut = "Control+A";
const copyLabel = "Copy tags";
const copyShortcut = "Control+C";
const removeLabel = "Remove tags";
const removeShortcut = "Backspace";
</script>
<WithDropdown let:createDropdown>
<div class="more-icon">
<Badge class="me-1" on:mount={withSpan(createDropdown)}>{@html dotsIcon}</Badge>
<DropdownMenu>
<DropdownItem
on:click={(event) => {
dispatch("tagselectall");
event.stopImmediatePropagation();
}}>{allLabel} ({getPlatformString(allShortcut)})</DropdownItem
>
<Shortcut
keyCombination={allShortcut}
on:action={(event) => {
dispatch("tagselectall");
event.stopImmediatePropagation();
}}
/>
<DropdownItem on:click={() => dispatch("tagcopy")}
>{copyLabel} ({getPlatformString(copyShortcut)})</DropdownItem
>
<Shortcut
keyCombination={copyShortcut}
on:action={() => dispatch("tagcopy")}
/>
<DropdownItem on:click={() => dispatch("tagdelete")}
>{removeLabel} ({getPlatformString(removeShortcut)})</DropdownItem
>
<Shortcut
keyCombination={removeShortcut}
on:action={() => dispatch("tagdelete")}
/>
</DropdownMenu>
</div>
</WithDropdown>
<style lang="scss">
.more-icon {
line-height: 1;
:global(svg) {
padding-bottom: 2px;
cursor: pointer;
fill: currentColor;
opacity: 0.6;
}
:global(svg:hover) {
opacity: 1;
}
}
</style>

2
ts/editor/Tag.svelte → ts/editor/tag-editor/Tag.svelte
View file

@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { onMount, createEventDispatcher } from "svelte";
import { pageTheme } from "../sveltelib/theme";
import { pageTheme } from "../../sveltelib/theme";
let className: string = "";
export { className as class };

2
ts/editor/TagDeleteBadge.svelte → ts/editor/tag-editor/TagDeleteBadge.svelte
View file

@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import Badge from "../components/Badge.svelte";
import Badge from "../../components/Badge.svelte";
import { deleteIcon } from "./icons";
let className: string = "";

0
ts/editor/TagEditMode.svelte → ts/editor/tag-editor/TagEditMode.svelte
View file

10
ts/editor/TagEditor.svelte → ts/editor/tag-editor/TagEditor.svelte
View file

@ -5,13 +5,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<script lang="ts">
import { createEventDispatcher, tick } from "svelte";
import type { Writable } from "svelte/store";
import StickyContainer from "../components/StickyContainer.svelte";
import ButtonToolbar from "../../components/ButtonToolbar.svelte";
import StickyContainer from "../../components/StickyContainer.svelte";
import TagOptionsBadge from "./TagOptionsBadge.svelte";
import TagEditMode from "./TagEditMode.svelte";
import TagInput from "./TagInput.svelte";
import Tag from "./Tag.svelte";
import WithAutocomplete from "./WithAutocomplete.svelte";
import ButtonToolbar from "../components/ButtonToolbar.svelte";
import type { Tag as TagType } from "./tags";
import {
attachId,
@ -19,8 +19,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
replaceWithUnicodeSeparator,
replaceWithColons,
} from "./tags";
import { tags as tagsService } from "../lib/proto";
import { execCommand } from "./helpers";
import { tags as tagsService } from "../../lib/proto";
import { execCommand } from "../helpers";
export let size: number;
export let wrap: boolean;
@ -401,7 +401,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:tagselectall={selectAllTags}
on:tagcopy={copySelectedTags}
on:tagdelete={deleteSelectedTags}
on:click={appendEmptyTag}
on:tagappend={appendEmptyTag}
/>
{/if}

0
ts/editor/TagInput.svelte → ts/editor/tag-editor/TagInput.svelte
View file

2
ts/editor/TagOptionsBadge.svelte → ts/editor/tag-editor/TagOptionsBadge.svelte
View file

@ -19,6 +19,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:tagdelete
/>
{:else}
<AddTagBadge --badge-align="-webkit-baseline-middle" on:click />
<AddTagBadge --badge-align="-webkit-baseline-middle" on:tagappend />
{/if}
</div>

2
ts/editor/TagStickyBadge.svelte → ts/editor/tag-editor/TagStickyBadge.svelte
View file

@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import Badge from "../components/Badge.svelte";
import Badge from "../../components/Badge.svelte";
import { deleteIcon } from "./icons";
let className: string = "";

6
ts/editor/TagWithTooltip.svelte → ts/editor/tag-editor/TagWithTooltip.svelte
View file

@ -4,12 +4,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import Tag from "./Tag.svelte";
import WithTooltip from "../components/WithTooltip.svelte";
import WithTooltip from "../../components/WithTooltip.svelte";
import { createEventDispatcher } from "svelte";
import { controlPressed, shiftPressed } from "../lib/keys";
import { controlPressed, shiftPressed } from "../../lib/keys";
import { delimChar } from "./tags";
import { pageTheme } from "../sveltelib/theme";
import { pageTheme } from "../../sveltelib/theme";
export let name: string;
let className: string = "";

6
ts/editor/WithAutocomplete.svelte → ts/editor/tag-editor/WithAutocomplete.svelte
View file

@ -4,11 +4,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { createEventDispatcher, tick } from "svelte";
import type Dropdown from "bootstrap/js/dist/dropdown";
import WithDropdown from "../components/WithDropdown.svelte";
import DropdownMenu from "../components/DropdownMenu.svelte";
import WithDropdown from "../../components/WithDropdown.svelte";
import DropdownMenu from "../../components/DropdownMenu.svelte";
import AutocompleteItem from "./AutocompleteItem.svelte";
let className: string = "";

9
ts/editor/tag-editor/icons.ts Normal file
View file

@ -0,0 +1,9 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/// <reference types="../../lib/image-import" />
export { default as tagIcon } from "@mdi/svg/svg/tag.svg";
export { default as addTagIcon } from "@mdi/svg/svg/tag-plus.svg";
export { default as dotsIcon } from "@mdi/svg/svg/dots-vertical.svg";
export { default as deleteIcon } from "bootstrap-icons/icons/x.svg";

4
ts/editor/tag-editor/index.ts Normal file
View file

@ -0,0 +1,4 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export { default as TagEditor } from "./TagEditor.svelte";

0
ts/editor/tags.ts → ts/editor/tag-editor/tags.ts
View file

10
ts/editor/tsconfig.json
View file

@ -1,6 +1,14 @@
{
"extends": "../tsconfig.json",
"include": ["*", "image-overlay/*", "mathjax-overlay/*"],
"include": [
"*",
"image-overlay/*",
"mathjax-overlay/*",
"plain-text-input/*",
"rich-text-input/*",
"editor-toolbar/*",
"tag-editor/*"
],
"references": [
{ "path": "../components" },
{ "path": "../domlib" },