+
-
+
"""
diff --git a/ts/change-notetype/NotetypeSelector.svelte b/ts/change-notetype/NotetypeSelector.svelte
index e6de9aab6..22d7733f1 100644
--- a/ts/change-notetype/NotetypeSelector.svelte
+++ b/ts/change-notetype/NotetypeSelector.svelte
@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
+
-
@@ -48,4 +48,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
+
diff --git a/ts/components/ButtonDropdown.svelte b/ts/components/ButtonDropdown.svelte
index 4beaaccc0..638e1d210 100644
--- a/ts/components/ButtonDropdown.svelte
+++ b/ts/components/ButtonDropdown.svelte
@@ -19,14 +19,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
diff --git a/ts/components/StickyBottom.svelte b/ts/components/StickyFooter.svelte
similarity index 78%
rename from ts/components/StickyBottom.svelte
rename to ts/components/StickyFooter.svelte
index e62654bb0..e9778096b 100644
--- a/ts/components/StickyBottom.svelte
+++ b/ts/components/StickyFooter.svelte
@@ -7,16 +7,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let className: string = "";
export { className as class };
- export let height: number;
+ export let height: number = 0;
-
+
diff --git a/ts/editable/decorated.ts b/ts/editable/decorated.ts
new file mode 100644
index 000000000..c86601255
--- /dev/null
+++ b/ts/editable/decorated.ts
@@ -0,0 +1,45 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+/**
+ * decorated elements know three states:
+ * - stored, which is stored in the DB, e.g. `\(\alpha + \beta\)`
+ * - undecorated, which is displayed to the user in Codable, e.g. `\alpha + \beta `
+ * - decorated, which is displayed to the user in Editable, e.g. ` {
+ const rootStyle = document.createElement("link");
+ rootStyle.setAttribute("rel", "stylesheet");
+ rootStyle.setAttribute("href", href);
+
+ let styleResolve: () => void;
+ const stylePromise = new Promise((resolve) => (styleResolve = resolve));
+
+ rootStyle.addEventListener("load", () => styleResolve());
+ container.appendChild(rootStyle);
+
+ return stylePromise;
+}
+
+function loadStyleTag(container: Node): [HTMLStyleElement, Promise] {
+ const style = document.createElement("style");
+ style.setAttribute("rel", "stylesheet");
+
+ let styleResolve: () => void;
+ const stylePromise = new Promise((resolve) => (styleResolve = resolve));
+
+ style.addEventListener("load", () => styleResolve());
+ container.appendChild(style);
+
+ return [style, stylePromise];
+}
+
+export class EditableContainer extends HTMLDivElement {
+ baseStyle: HTMLStyleElement;
+ imageStyle: HTMLStyleElement;
+
+ imagePromise: Promise;
+ stylePromise: Promise;
+
+ baseRule?: CSSStyleRule;
+
+ constructor() {
+ super();
+ const shadow = this.attachShadow({ mode: "open" });
+
+ if (document.documentElement.classList.contains("night-mode")) {
+ this.classList.add("night-mode");
+ }
+
+ const rootPromise = loadStyleLink(shadow, "./_anki/css/editable-build.css");
+ const [baseStyle, basePromise] = loadStyleTag(shadow);
+ const [imageStyle, imagePromise] = loadStyleTag(shadow);
+
+ this.baseStyle = baseStyle;
+ this.imageStyle = imageStyle;
+
+ this.imagePromise = imagePromise;
+ this.stylePromise = Promise.all([
+ rootPromise,
+ basePromise,
+ imagePromise,
+ ]) as unknown as Promise;
+ }
+
+ connectedCallback(): void {
+ const sheet = this.baseStyle.sheet as CSSStyleSheet;
+ const baseIndex = sheet.insertRule("anki-editable {}");
+ this.baseRule = sheet.cssRules[baseIndex] as CSSStyleRule;
+ }
+
+ initialize(color: string): void {
+ this.setBaseColor(color);
+ }
+
+ setBaseColor(color: string): void {
+ if (this.baseRule) {
+ this.baseRule.style.color = color;
+ }
+ }
+
+ setBaseStyling(fontFamily: string, fontSize: string, direction: string): void {
+ if (this.baseRule) {
+ this.baseRule.style.fontFamily = fontFamily;
+ this.baseRule.style.fontSize = fontSize;
+ this.baseRule.style.direction = direction;
+ }
+ }
+
+ isRightToLeft(): boolean {
+ return this.baseRule!.style.direction === "rtl";
+ }
+}
+
+customElements.define("anki-editable-container", EditableContainer, { extends: "div" });
diff --git a/ts/editor/editable.ts b/ts/editable/editable.ts
similarity index 50%
rename from ts/editor/editable.ts
rename to ts/editable/editable.ts
index 38ee75646..101cd20c5 100644
--- a/ts/editor/editable.ts
+++ b/ts/editable/editable.ts
@@ -1,10 +1,24 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import { bridgeCommand } from "./lib";
-import { elementIsBlock, caretToEnd, getBlockElement } from "./helpers";
-import { inCodable } from "./toolbar";
-import { wrap } from "./wrap";
+/* eslint
+@typescript-eslint/no-non-null-assertion: "off",
+ */
+
+import type { DecoratedElement } from "./decorated";
+import { decoratedComponents } from "./decorated";
+import { bridgeCommand } from "lib/bridgecommand";
+import { elementIsBlock, getBlockElement } from "lib/dom";
+import { wrapInternal } from "lib/wrap";
+
+export function caretToEnd(node: Node): void {
+ const range = document.createRange();
+ range.selectNodeContents(node);
+ range.collapse(false);
+ const selection = (node.getRootNode() as Document | ShadowRoot).getSelection()!;
+ selection.removeAllRanges();
+ selection.addRange(range);
+}
function containsInlineContent(element: Element): boolean {
for (const child of element.children) {
@@ -26,26 +40,32 @@ export class Editable extends HTMLElement {
}
get fieldHTML(): string {
- return containsInlineContent(this) && this.innerHTML.endsWith("]*?block="(.*?)")?[^>]*?>(.*?)<\/anki-mathjax>/gsu;
+
+const mathjaxBlockDelimiterPattern = /\\\[(.*?)\\\]/gsu;
+const mathjaxInlineDelimiterPattern = /\\\((.*?)\\\)/gsu;
+
+export const Mathjax: DecoratedElementConstructor = class Mathjax
+ extends HTMLElement
+ implements DecoratedElement
+{
+ static tagName = "anki-mathjax";
+
+ static toStored(undecorated: string): string {
+ return undecorated.replace(
+ mathjaxTagPattern,
+ (_match: string, block: string | undefined, text: string) => {
+ return typeof block === "string" && block !== "false"
+ ? `\\[${text}\\]`
+ : `\\(${text}\\)`;
+ }
+ );
+ }
+
+ static toUndecorated(stored: string): string {
+ return stored
+ .replace(
+ mathjaxBlockDelimiterPattern,
+ (_match: string, text: string) =>
+ `${text} `
+ )
+ .replace(
+ mathjaxInlineDelimiterPattern,
+ (_match: string, text: string) => `${text} `
+ );
+ }
+
+ block = false;
+ disconnect: () => void = () => {
+ /* noop */
+ };
+ component?: Mathjax_svelte;
+
+ static get observedAttributes(): string[] {
+ return ["block", "data-mathjax"];
+ }
+
+ connectedCallback(): void {
+ this.decorate();
+ this.disconnect = moveNodesInsertedOutside(this, this.children[0]);
+ }
+
+ disconnectedCallback(): void {
+ this.disconnect();
+ }
+
+ attributeChangedCallback(name: string, _old: string, newValue: string): void {
+ switch (name) {
+ case "block":
+ this.block = newValue !== "false";
+ this.component?.$set({ block: this.block });
+ break;
+ case "data-mathjax":
+ this.component?.$set({ mathjax: newValue });
+ break;
+ }
+ }
+
+ decorate(): void {
+ const mathjax = (this.dataset.mathjax = this.innerText);
+ this.innerHTML = "";
+ this.style.whiteSpace = "normal";
+
+ const context = new Map();
+ context.set(
+ nightModeKey,
+ document.documentElement.classList.contains("night-mode")
+ );
+
+ this.component = new Mathjax_svelte({
+ target: this,
+ props: {
+ mathjax,
+ block: this.block,
+ autofocus: this.hasAttribute("focusonmount"),
+ },
+ context,
+ } as any);
+ }
+
+ undecorate(): void {
+ this.innerHTML = this.dataset.mathjax ?? "";
+ delete this.dataset.mathjax;
+ this.removeAttribute("style");
+ this.removeAttribute("focusonmount");
+
+ this.component?.$destroy();
+ this.component = undefined;
+
+ if (this.block) {
+ this.setAttribute("block", "true");
+ } else {
+ this.removeAttribute("block");
+ }
+ }
+};
+
+decoratedComponents.push(Mathjax);
diff --git a/ts/editable/mathjax.ts b/ts/editable/mathjax.ts
new file mode 100644
index 000000000..b21c43301
--- /dev/null
+++ b/ts/editable/mathjax.ts
@@ -0,0 +1,57 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+import { mathIcon } from "./icons";
+
+const parser = new DOMParser();
+
+function getCSS(nightMode: boolean, fontSize: number): string {
+ const color = nightMode ? "white" : "black";
+ /* color is set for Maths, fill for the empty icon */
+ return `svg { color: ${color}; fill: ${color}; font-size: ${fontSize}px; };`;
+}
+
+function getStyle(css: string): HTMLStyleElement {
+ const style = document.createElement("style") as HTMLStyleElement;
+ style.appendChild(document.createTextNode(css));
+ return style;
+}
+
+function getEmptyIcon(style: HTMLStyleElement): [string, string] {
+ const icon = parser.parseFromString(mathIcon, "image/svg+xml");
+ const svg = icon.children[0];
+ svg.insertBefore(style, svg.children[0]);
+
+ return [svg.outerHTML, "MathJax"];
+}
+
+export function convertMathjax(
+ input: string,
+ nightMode: boolean,
+ fontSize: number
+): [string, string] {
+ const style = getStyle(getCSS(nightMode, fontSize));
+
+ if (input.trim().length === 0) {
+ return getEmptyIcon(style);
+ }
+
+ const output = globalThis.MathJax.tex2svg(input);
+ const svg = output.children[0];
+
+ if (svg.viewBox.baseVal.height === 16) {
+ return getEmptyIcon(style);
+ }
+
+ let title = "";
+
+ if (svg.innerHTML.includes("data-mjx-error")) {
+ svg.querySelector("rect").setAttribute("fill", "yellow");
+ svg.querySelector("text").setAttribute("color", "red");
+ title = svg.querySelector("title").innerHTML;
+ } else {
+ svg.insertBefore(style, svg.children[0]);
+ }
+
+ return [svg.outerHTML, title];
+}
diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel
index 2d25e998c..1b49fdefe 100644
--- a/ts/editor/BUILD.bazel
+++ b/ts/editor/BUILD.bazel
@@ -22,18 +22,8 @@ compile_svelte(
visibility = ["//visibility:public"],
deps = [
"//ts/components",
- ],
-)
-
-compile_sass(
- srcs = [
- "editable.scss",
- ],
- group = "editable_scss",
- visibility = ["//visibility:public"],
- deps = [
- "//ts/sass:scrollbar_lib",
- "//ts/sass/codemirror",
+ "@npm//@types/codemirror",
+ "@npm//codemirror",
],
)
@@ -45,8 +35,9 @@ compile_sass(
visibility = ["//visibility:public"],
deps = [
"//ts/sass:base_lib",
- "//ts/sass:buttons_lib",
"//ts/sass:scrollbar_lib",
+ "//ts/sass:buttons_lib",
+ "//ts/sass:button_mixins_lib",
],
)
@@ -71,6 +62,7 @@ ts_library(
"//ts/lib",
"//ts/sveltelib",
"//ts/components",
+ "//ts/editable",
"//ts/html-filter",
"//ts:image_module_support",
"@npm//svelte",
@@ -130,6 +122,10 @@ copy_mdi_icons(
"image-size-select-large.svg",
"image-size-select-actual.svg",
+ # mathjax handle
+ "format-wrap-square.svg",
+ "format-wrap-top-bottom.svg",
+
# tag editor
"tag-outline.svg",
"tag.svg",
@@ -156,8 +152,11 @@ esbuild(
"bootstrap-icons",
"mdi-icons",
"svelte_components",
+ "//ts/editable",
+ "//ts/editable:mdi-icons",
"//ts/components",
"//ts/components:svelte_components",
+ "//ts/editable:svelte_components",
"@npm//protobufjs",
],
)
@@ -192,5 +191,7 @@ svelte_check(
"//ts/sass/bootstrap",
"@npm//@types/bootstrap",
"//ts/components",
+ "@npm//@types/codemirror",
+ "@npm//codemirror",
],
)
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index 5c3728fd8..8c11dd230 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -27,7 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
+
-
-
+
diff --git a/ts/editor/FormatBlockButtons.svelte b/ts/editor/FormatBlockButtons.svelte
index d2fc2a140..b7cf587c8 100644
--- a/ts/editor/FormatBlockButtons.svelte
+++ b/ts/editor/FormatBlockButtons.svelte
@@ -14,7 +14,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import OnlyEditable from "./OnlyEditable.svelte";
import CommandIconButton from "./CommandIconButton.svelte";
- import { getCurrentField, getListItem } from "./helpers";
+ import { getListItem } from "lib/dom";
+ import { getCurrentField } from "./helpers";
import {
ulIcon,
olIcon,
@@ -31,7 +32,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
function outdentListItem() {
const currentField = getCurrentField();
- if (getListItem(currentField.editableContainer.shadowRoot!)) {
+ if (getListItem(currentField!.editableContainer.shadowRoot!)) {
document.execCommand("outdent");
} else {
alert("Indent/unindent currently only works with lists.");
@@ -40,7 +41,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
function indentListItem() {
const currentField = getCurrentField();
- if (getListItem(currentField.editableContainer.shadowRoot!)) {
+ if (getListItem(currentField!.editableContainer.shadowRoot!)) {
document.execCommand("indent");
} else {
alert("Indent/unindent currently only works with lists.");
diff --git a/ts/editor/HandleBackground.svelte b/ts/editor/HandleBackground.svelte
index fc6fc4eaf..ad06d50a6 100644
--- a/ts/editor/HandleBackground.svelte
+++ b/ts/editor/HandleBackground.svelte
@@ -5,13 +5,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
+
diff --git a/ts/editor/MathjaxHandleEditor.svelte b/ts/editor/MathjaxHandleEditor.svelte
new file mode 100644
index 000000000..6dccbfe71
--- /dev/null
+++ b/ts/editor/MathjaxHandleEditor.svelte
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+
+
diff --git a/ts/editor/MathjaxHandleInlineBlock.svelte b/ts/editor/MathjaxHandleInlineBlock.svelte
new file mode 100644
index 000000000..c488c95f9
--- /dev/null
+++ b/ts/editor/MathjaxHandleInlineBlock.svelte
@@ -0,0 +1,38 @@
+
+
+
+
+
+ mathjaxElement.setAttribute("block", "false")}
+ on:click>{@html inlineIcon}
+
+
+
+ mathjaxElement.setAttribute("block", "true")}
+ on:click>{@html blockIcon}
+
+
diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index 38e478adc..022aafdce 100644
--- a/ts/editor/TagEditor.svelte
+++ b/ts/editor/TagEditor.svelte
@@ -6,8 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { tick } from "svelte";
import { isApplePlatform } from "lib/platform";
import { bridgeCommand } from "lib/bridgecommand";
- import Spacer from "components/Spacer.svelte";
- import StickyBottom from "components/StickyBottom.svelte";
+ import StickyFooter from "components/StickyFooter.svelte";
import TagOptionsBadge from "./TagOptionsBadge.svelte";
import TagEditMode from "./TagEditMode.svelte";
import TagInput from "./TagInput.svelte";
@@ -65,7 +64,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
return response.tags;
}
- const colonAtStartOrEnd = /^:?|:?$/g;
+ const withoutSingleColonAtStartOrEnd = /^:?([^:].*?[^:]):?$/;
function updateSuggestions(): void {
const activeTag = tags[active!];
@@ -76,11 +75,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
if (autocompleteDisabled) {
suggestionsPromise = noSuggestions;
} else {
- const cleanedName = replaceWithColons(activeName).replace(
- colonAtStartOrEnd,
- ""
- );
- suggestionsPromise = fetchSuggestions(cleanedName).then(
+ const withColons = replaceWithColons(activeName);
+ const withoutSingleColons = withoutSingleColonAtStartOrEnd.test(withColons)
+ ? withColons.replace(withoutSingleColonAtStartOrEnd, "$1")
+ : withColons;
+
+ suggestionsPromise = fetchSuggestions(withoutSingleColons).then(
(names: string[]): string[] => {
autocompleteDisabled = names.length === 0;
return names.map(replaceWithUnicodeSeparator);
@@ -390,9 +390,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
$: shortenTags = shortenTags || assumedRows > 2;
-
+
{#if !wrap}
SPACER