2022-01-24 02:43:09 +01:00
|
|
|
<!--
|
|
|
|
Copyright: Ankitects Pty Ltd and contributors
|
|
|
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
|
|
-->
|
|
|
|
<script lang="ts">
|
|
|
|
import DropdownItem from "../../components/DropdownItem.svelte";
|
2022-02-04 09:36:34 +01:00
|
|
|
import IconButton from "../../components/IconButton.svelte";
|
2022-03-02 05:21:19 +01:00
|
|
|
import Popover from "../../components/Popover.svelte";
|
2022-02-04 09:36:34 +01:00
|
|
|
import Shortcut from "../../components/Shortcut.svelte";
|
2022-03-02 05:21:19 +01:00
|
|
|
import WithFloating from "../../components/WithFloating.svelte";
|
2022-08-18 04:06:06 +02:00
|
|
|
import { mathjaxConfig } from "../../editable/mathjax-element";
|
2022-02-04 09:36:34 +01:00
|
|
|
import * as tr from "../../lib/ftl";
|
2022-01-24 02:43:09 +01:00
|
|
|
import { getPlatformString } from "../../lib/shortcuts";
|
|
|
|
import { wrapInternal } from "../../lib/wrap";
|
2022-02-03 05:52:11 +01:00
|
|
|
import { context as noteEditorContext } from "../NoteEditor.svelte";
|
2022-01-24 02:43:09 +01:00
|
|
|
import type { RichTextInputAPI } from "../rich-text-input";
|
2022-02-03 05:52:11 +01:00
|
|
|
import { editingInputIsRichText } from "../rich-text-input";
|
2022-02-04 09:36:34 +01:00
|
|
|
import { functionIcon } from "./icons";
|
2022-01-24 02:43:09 +01:00
|
|
|
|
2022-02-03 05:52:11 +01:00
|
|
|
const { focusedInput } = noteEditorContext.get();
|
|
|
|
$: richTextAPI = $focusedInput as RichTextInputAPI;
|
2022-01-24 02:43:09 +01:00
|
|
|
|
|
|
|
async function surround(front: string, back: string): Promise<void> {
|
|
|
|
const element = await richTextAPI.element;
|
|
|
|
wrapInternal(element, front, back, false);
|
|
|
|
}
|
|
|
|
|
|
|
|
function onMathjaxInline(): void {
|
2022-10-12 06:34:25 +02:00
|
|
|
if (mathjaxConfig.enabled) {
|
|
|
|
surround("<anki-mathjax focusonmount>", "</anki-mathjax>");
|
|
|
|
} else {
|
|
|
|
surround("\\(", "\\)");
|
|
|
|
}
|
2022-01-24 02:43:09 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
function onMathjaxBlock(): void {
|
2022-10-12 06:34:25 +02:00
|
|
|
if (mathjaxConfig.enabled) {
|
|
|
|
surround('<anki-mathjax block="true" focusonmount>', "</anki-matjax>");
|
|
|
|
} else {
|
|
|
|
surround("\\[", "\\]");
|
|
|
|
}
|
2022-01-24 02:43:09 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
function onMathjaxChemistry(): void {
|
2022-10-12 06:34:25 +02:00
|
|
|
if (mathjaxConfig.enabled) {
|
|
|
|
surround('<anki-mathjax focusonmount="0,4">\\ce{', "}</anki-mathjax>");
|
|
|
|
} else {
|
|
|
|
surround("\\(\\ce{", "}\\)");
|
|
|
|
}
|
2022-01-24 02:43:09 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
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()],
|
|
|
|
];
|
|
|
|
|
2022-02-03 05:52:11 +01:00
|
|
|
$: disabled = !editingInputIsRichText($focusedInput);
|
2022-03-02 05:21:19 +01:00
|
|
|
|
2022-09-05 09:20:00 +02:00
|
|
|
let showFloating = false;
|
2022-01-24 02:43:09 +01:00
|
|
|
</script>
|
|
|
|
|
2022-09-05 09:20:00 +02:00
|
|
|
<WithFloating
|
|
|
|
show={showFloating && !disabled}
|
|
|
|
closeOnInsideClick
|
|
|
|
inline
|
|
|
|
on:close={() => (showFloating = false)}
|
|
|
|
>
|
2022-09-30 03:43:08 +02:00
|
|
|
<IconButton
|
|
|
|
slot="reference"
|
|
|
|
{disabled}
|
|
|
|
on:click={() => (showFloating = !showFloating)}
|
|
|
|
>
|
|
|
|
{@html functionIcon}
|
|
|
|
</IconButton>
|
2022-01-24 02:43:09 +01:00
|
|
|
|
Fuzzy search in symbol insertion overlay (#2059)
* Add flag for enabling insert symbols feature
* Add symbols overlay directory
* Detect if :xy is inserted into editable
* Allow naive updating of overlay, and special handling of ':'
* First step towards better Virtual Element support
* Update floating to reference range on insert text
* Position SymbolsOverlay always on top or bottom
* Add a data-provider to emulate API
* Show correct suggestions in symbols overlay
* Rename to replacementLength
* Allow replacing via clicking in menu
* Optionally remove inline padding of Popover
* Hide Symbols overlay on blur of content editable
* Add specialKey to inputHandler and generalize how arrow movement is detected
- This way macOS users can use Ctrl-N to mean down, etc.
* Detect special key from within SymbolsOverlay
* Implement full backwards search while typing
* Allow navigating symbol menu and accepting with enter
* Add some entries to data-provider
* Satisfy eslint
* Generate symbolsTable from sources
* Use other github source, allow multiple names
In return, symbol must be unique
* Automatically scroll in symbols dropdown
* Use from npm packages rather than downloading from URL
* Remove console.log
* Remove print
Co-authored-by: Damien Elmes <dae@users.noreply.github.com>
* Add pointerDown event to input-handler
- so that SymbolsOverlay can reset on field click
* Make tab do the same as enter
* Make font a bit smaller but increase relative icon size
* Satisfy type requirement of handlerlist
* Revert changing default size of DropdownItems
* Remove some now unused code for bootstrap dropdowns
* Use fuse to allow fuzzy searching of symbols
* Remove unnecessary async handling in data-provider
I did that because at first I was still expecting to fetch the symbols
from the backend
* Apply field font family in symbol preview
* Remove inline padding from latex popover
* Rename data-provier to symbols-table
* Add some explaining comments to interface
* Allow for auto insertion symbols
* Use deleteData and after instead of replaceData
* Allow using html in symbols
* Show html symbols as html
* Add SymbolsEntry component
* Also include containshtml at low search precedence
* Put character entities and gemoji into their own files
* Factor out prepareInsertion method
* Allow deletion while searching for correct symbol
* Respect insertCompositionText
* Delete data-provider
* Restrict auto insert queries to max 5 characters
* Satisfy svelte check
* Fix the overlay sometimes not showing
This will make sure to always normalize text nodes before searching.
However it adjacent text is partially formatted, this will still not
find the whole query.
For example, currently, entering `<b>:for</b>al` and then inputting `l`,
will not trigger a search for `forall`, because of the <b> formatting
* Add empty line
* Do not trigger overlay, when last character is whitespace or colon
* Add missing fuse license
2022-09-13 06:19:19 +02:00
|
|
|
<Popover slot="floating" --popover-padding-inline="0">
|
2022-01-24 02:43:09 +01:00
|
|
|
{#each dropdownItems as [callback, keyCombination, label]}
|
|
|
|
<DropdownItem on:click={callback}>
|
2022-09-05 09:20:00 +02:00
|
|
|
<span>{label}</span>
|
2022-02-22 13:17:22 +01:00
|
|
|
<span class="ms-auto ps-2 shortcut"
|
|
|
|
>{getPlatformString(keyCombination)}</span
|
|
|
|
>
|
2022-01-24 02:43:09 +01:00
|
|
|
</DropdownItem>
|
|
|
|
{/each}
|
2022-03-02 05:21:19 +01:00
|
|
|
</Popover>
|
|
|
|
</WithFloating>
|
2022-02-22 13:17:22 +01:00
|
|
|
|
2022-09-05 09:20:00 +02:00
|
|
|
{#each dropdownItems as [callback, keyCombination]}
|
|
|
|
<Shortcut {keyCombination} on:action={callback} />
|
|
|
|
{/each}
|
2022-03-11 06:48:49 +01:00
|
|
|
|
2022-09-05 09:20:00 +02:00
|
|
|
<style lang="scss">
|
2022-02-22 13:17:22 +01:00
|
|
|
.shortcut {
|
|
|
|
font: Verdana;
|
|
|
|
}
|
|
|
|
</style>
|