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

Connect HtmlEditButton to codable

Browse source
This commit is contained in:
Henrik Giesel 2021-06-17 15:30:05 +02:00
parent 8b15c81d34
commit 678a5997e9
3 changed files with 34 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
ts/editor/TemplateButtons.svelte
View file

@ -13,10 +13,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import DropdownItem from "components/DropdownItem.svelte"; import DropdownItem from "components/DropdownItem.svelte";
import WithDropdownMenu from "components/WithDropdownMenu.svelte"; import WithDropdownMenu from "components/WithDropdownMenu.svelte";
import WithShortcut from "components/WithShortcut.svelte"; import WithShortcut from "components/WithShortcut.svelte";
import WithState from "components/WithState.svelte";
import ClozeButton from "./ClozeButton.svelte"; import ClozeButton from "./ClozeButton.svelte";
import { wrap } from "./wrap"; import { wrap } from "./wrap";
import { appendInParentheses } from "./helpers"; import { appendInParentheses } from "./helpers";
import { toggleHtmlEdit } from "./codable";
import { paperclipIcon, micIcon, functionIcon, xmlIcon } from "./icons"; import { paperclipIcon, micIcon, functionIcon, xmlIcon } from "./icons";
export let api = {}; export let api = {};
@ -28,10 +30,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
function onRecord(): void { function onRecord(): void {
bridgeCommand("record"); bridgeCommand("record");
} }
function onHtmlEdit(): void {
bridgeCommand("htmlEdit");
}
</script> </script>
<ButtonGroup {api}> <ButtonGroup {api}>
@ -164,14 +162,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ButtonGroupItem> <ButtonGroupItem>
<WithShortcut shortcut={"Control+Shift+X"} let:createShortcut let:shortcutLabel> <WithShortcut shortcut={"Control+Shift+X"} let:createShortcut let:shortcutLabel>
<IconButton <WithState
tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)} key="htmledit"
iconSize={70} update={(event) => { console.log(event); return true }}
on:click={onHtmlEdit} let:state={active}
on:mount={createShortcut} let:updateState
> >
{@html xmlIcon} <IconButton
</IconButton> tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)}
iconSize={70}
{active}
on:click={(event) => {
toggleHtmlEdit();
updateState(event);
}}
on:mount={createShortcut}
>
{@html xmlIcon}
</IconButton>
</WithState>
</WithShortcut> </WithShortcut>
</ButtonGroupItem> </ButtonGroupItem>
</ButtonGroup> </ButtonGroup>

15
ts/editor/codable.ts
View file

@ -3,8 +3,17 @@
import CodeMirror from "codemirror/src/codemirror" import CodeMirror from "codemirror/src/codemirror"
export class Codable extends HTMLTextAreaElement { const codables: Codable[] = [];
connectedCallback(): void {
CodeMirror.fromTextArea(this); export function toggleHtmlEdit() {
for (const codable of codables) {
CodeMirror.fromTextArea(codable);
}
}
export class Codable extends HTMLTextAreaElement {
connectedCallback(): void {
this.setAttribute("hidden", "");
codables.push(this);
} }
} }

4
ts/editor/editable.scss
View file

@ -1,7 +1,7 @@
@import 'ts/sass/codemirror/codemirror';
@use 'ts/sass/scrollbar'; @use 'ts/sass/scrollbar';
@import 'ts/sass/codemirror/codemirror';
anki-editable { anki-editable {
display: block; display: block;
overflow-wrap: break-word; overflow-wrap: break-word;