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

Correctly import CodeMirror

Browse source
This commit is contained in:
Henrik Giesel 2021-08-08 00:13:16 +02:00
parent a3fef552bd
commit e71aed7146
3 changed files with 27 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ts/editor/BUILD.bazel
View file

@ -191,5 +191,7 @@ svelte_check(
"//ts/sass/bootstrap", "//ts/sass/bootstrap",
"@npm//@types/bootstrap", "@npm//@types/bootstrap",
"//ts/components", "//ts/components",
"@npm//@types/codemirror",
"@npm//codemirror",
], ],
) )

10
ts/editor/MathjaxHandleEditor.svelte
View file

@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { onMount, createEventDispatcher } from "svelte"; import { onMount, createEventDispatcher } from "svelte";
import { ChangeTimer } from "./change-timer"; import { ChangeTimer } from "./change-timer";
import * as CodeMirror from "codemirror/lib/codemirror"; import CodeMirror from "codemirror";
import "codemirror/mode/stex/stex"; import "codemirror/mode/stex/stex";
import "codemirror/addon/fold/foldcode"; import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/foldgutter"; import "codemirror/addon/fold/foldgutter";
@ -21,18 +21,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
inMathMode: true, inMathMode: true,
}; };
const noop = () => {
/* noop */
};
const codeMirrorOptions = { const codeMirrorOptions = {
mode: latex, mode: latex,
theme: "monokai", theme: "monokai",
lineWrapping: true, lineWrapping: true,
matchTags: { bothTags: true }, matchTags: { bothTags: true },
extraKeys: { Tab: false, "Shift-Tab": false }, extraKeys: { Tab: noop, "Shift-Tab": noop },
viewportMargin: Infinity, viewportMargin: Infinity,
lineWiseCopyCut: false, lineWiseCopyCut: false,
autofocus: true, autofocus: true,
}; };
let codeMirror: CodeMirror; let codeMirror: CodeMirror.EditorFromTextArea;
const changeTimer = new ChangeTimer(); const changeTimer = new ChangeTimer();
function onInput() { function onInput() {

28
ts/editor/codable.ts
View file

@ -1,7 +1,11 @@
// Copyright: Ankitects Pty Ltd and contributors // Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import * as CodeMirror from "codemirror/lib/codemirror"; /* eslint
@typescript-eslint/no-non-null-assertion: "off",
*/
import CodeMirror from "codemirror";
import "codemirror/mode/htmlmixed/htmlmixed"; import "codemirror/mode/htmlmixed/htmlmixed";
import "codemirror/mode/stex/stex"; import "codemirror/mode/stex/stex";
import "codemirror/addon/fold/foldcode"; import "codemirror/addon/fold/foldcode";
@ -24,6 +28,10 @@ const htmlanki = {
}, },
}; };
const noop = () => {
/* noop */
};
const codeMirrorOptions = { const codeMirrorOptions = {
mode: htmlanki, mode: htmlanki,
theme: "monokai", theme: "monokai",
@ -33,7 +41,7 @@ const codeMirrorOptions = {
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
matchTags: { bothTags: true }, matchTags: { bothTags: true },
autoCloseTags: true, autoCloseTags: true,
extraKeys: { Tab: false, "Shift-Tab": false }, extraKeys: { Tab: noop, "Shift-Tab": noop },
viewportMargin: Infinity, viewportMargin: Infinity,
lineWiseCopyCut: false, lineWiseCopyCut: false,
}; };
@ -47,7 +55,7 @@ function parseHTML(html: string): string {
} }
export class Codable extends HTMLTextAreaElement { export class Codable extends HTMLTextAreaElement {
codeMirror: CodeMirror | undefined; codeMirror: CodeMirror.EditorFromTextArea | undefined;
get active(): boolean { get active(): boolean {
return Boolean(this.codeMirror); return Boolean(this.codeMirror);
@ -55,14 +63,14 @@ export class Codable extends HTMLTextAreaElement {
set fieldHTML(content: string) { set fieldHTML(content: string) {
if (this.active) { if (this.active) {
this.codeMirror.setValue(content); this.codeMirror?.setValue(content);
} else { } else {
this.value = content; this.value = content;
} }
} }
get fieldHTML(): string { get fieldHTML(): string {
return parseHTML(this.active ? this.codeMirror.getValue() : this.value); return parseHTML(this.active ? this.codeMirror!.getValue() : this.value);
} }
connectedCallback(): void { connectedCallback(): void {
@ -76,23 +84,23 @@ export class Codable extends HTMLTextAreaElement {
} }
teardown(): string { teardown(): string {
this.codeMirror.toTextArea(); this.codeMirror!.toTextArea();
this.codeMirror = undefined; this.codeMirror = undefined;
return this.fieldHTML; return this.fieldHTML;
} }
focus(): void { focus(): void {
this.codeMirror.focus(); this.codeMirror!.focus();
inCodable.set(true); inCodable.set(true);
} }
caretToEnd(): void { caretToEnd(): void {
this.codeMirror.setCursor(this.codeMirror.lineCount(), 0); this.codeMirror!.setCursor(this.codeMirror!.lineCount(), 0);
} }
surroundSelection(before: string, after: string): void { surroundSelection(before: string, after: string): void {
const selection = this.codeMirror.getSelection(); const selection = this.codeMirror!.getSelection();
this.codeMirror.replaceSelection(before + selection + after); this.codeMirror!.replaceSelection(before + selection + after);
} }
onEnter(): void { onEnter(): void {