anki/ts/editor/index.ts

175 lines
5.3 KiB
TypeScript
Raw Normal View History

2021-04-13 10:57:08 +02:00
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
2019-02-05 04:59:03 +01:00
import { filterHTML } from "html-filter";
2021-04-27 23:08:47 +02:00
import { updateActiveButtons, disableButtons } from "./toolbar";
import { setupI18n, ModuleName } from "lib/i18n";
import "./fields.css";
import { caretToEnd } from "./helpers";
import { saveField } from "./changeTimer";
import { EditorField } from "./editorField";
import { LabelContainer } from "./labelContainer";
import { EditingArea } from "./editingArea";
import { Editable } from "./editable";
import { initToolbar } from "./toolbar";
2021-01-30 17:54:07 +01:00
export { setNoteId, getNoteId } from "./noteId";
2021-02-08 20:28:02 +01:00
export { saveNow } from "./changeTimer";
2021-02-08 21:02:46 +01:00
export { wrap, wrapIntoText } from "./wrap";
// export * from "./addons";
2021-01-30 18:32:36 +01:00
declare global {
interface Selection {
modify(s: string, t: string, u: string): void;
addRange(r: Range): void;
removeAllRanges(): void;
getRangeAt(n: number): Range;
}
}
customElements.define("anki-editable", Editable);
customElements.define("anki-editing-area", EditingArea, { extends: "div" });
customElements.define("anki-label-container", LabelContainer, { extends: "div" });
customElements.define("anki-editor-field", EditorField, { extends: "div" });
2021-02-08 15:44:56 +01:00
export function getCurrentField(): EditingArea | null {
2021-02-08 17:00:27 +01:00
return document.activeElement instanceof EditingArea
? document.activeElement
: null;
2021-02-08 15:44:56 +01:00
}
2021-01-30 17:54:07 +01:00
export function focusField(n: number): void {
const field = getEditorField(n);
if (field) {
field.editingArea.focusEditable();
caretToEnd(field.editingArea);
updateActiveButtons();
}
}
2021-01-30 17:54:07 +01:00
export function focusIfField(x: number, y: number): boolean {
const elements = document.elementsFromPoint(x, y);
for (let i = 0; i < elements.length; i++) {
let elem = elements[i] as EditingArea;
if (elem instanceof EditingArea) {
elem.focusEditable();
return true;
}
}
return false;
}
2021-02-08 21:02:46 +01:00
export function pasteHTML(
html: string,
internal: boolean,
extendedMode: boolean
): void {
html = filterHTML(html, internal, extendedMode);
if (html !== "") {
setFormat("inserthtml", html);
}
}
function adjustFieldAmount(amount: number): void {
2021-02-08 17:00:27 +01:00
const fieldsContainer = document.getElementById("fields")!;
while (fieldsContainer.childElementCount < amount) {
const newField = document.createElement("div", {
is: "anki-editor-field",
}) as EditorField;
newField.ord = fieldsContainer.childElementCount;
fieldsContainer.appendChild(newField);
}
while (fieldsContainer.childElementCount > amount) {
2021-02-08 17:00:27 +01:00
fieldsContainer.removeChild(fieldsContainer.lastElementChild as Node);
}
}
export function getEditorField(n: number): EditorField | null {
2021-02-08 17:00:27 +01:00
const fields = document.getElementById("fields")!.children;
return (fields[n] as EditorField) ?? null;
}
2021-03-29 10:13:45 +02:00
/// forEachEditorFieldAndProvidedValue:
/// Values should be a list with the same length as the
/// number of fields. Func will be called with each field and
/// value in turn.
export function forEditorField<T>(
values: T[],
func: (field: EditorField, value: T) => void
): void {
2021-02-08 17:00:27 +01:00
const fields = document.getElementById("fields")!.children;
for (let i = 0; i < fields.length; i++) {
const field = fields[i] as EditorField;
func(field, values[i]);
2021-01-28 18:37:38 +01:00
}
}
2021-01-30 17:54:07 +01:00
export function setFields(fields: [string, string][]): void {
// webengine will include the variable after enter+backspace
// if we don't convert it to a literal colour
const color = window
.getComputedStyle(document.documentElement)
.getPropertyValue("--text-fg");
adjustFieldAmount(fields.length);
2021-03-28 23:59:16 +02:00
forEditorField(
fields,
(field: EditorField, [name, fieldContent]: [string, string]): void =>
field.initialize(name, color, fieldContent)
);
if (!getCurrentField()) {
// when initial focus of the window is not on editor (e.g. browser)
disableButtons();
}
2017-07-28 08:48:49 +02:00
}
export function setBackgrounds(cols: ("dupe" | "")[]): void {
2021-03-28 23:59:16 +02:00
forEditorField(cols, (field: EditorField, value: "dupe" | "") =>
field.editingArea.classList.toggle("dupe", value === "dupe")
);
document
2021-02-08 17:00:27 +01:00
.getElementById("dupes")!
.classList.toggle("is-inactive", !cols.includes("dupe"));
}
2021-01-30 17:54:07 +01:00
export function setFonts(fonts: [string, number, boolean][]): void {
2021-03-28 23:59:16 +02:00
forEditorField(
fonts,
(
field: EditorField,
[fontFamily, fontSize, isRtl]: [string, number, boolean]
) => {
field.setBaseStyling(fontFamily, `${fontSize}px`, isRtl ? "rtl" : "ltr");
}
);
}
2021-02-28 01:17:42 +01:00
export function setSticky(stickies: boolean[]): void {
2021-03-28 23:59:16 +02:00
forEditorField(stickies, (field: EditorField, isSticky: boolean) => {
2021-02-28 01:17:42 +01:00
field.labelContainer.activateSticky(isSticky);
});
}
export function setFormat(cmd: string, arg?: any, nosave: boolean = false): void {
document.execCommand(cmd, false, arg);
if (!nosave) {
saveField(getCurrentField() as EditingArea, "key");
updateActiveButtons();
}
}
const i18n = setupI18n({ modules: [ModuleName.EDITING, ModuleName.KEYBOARD] });
2021-04-27 23:08:47 +02:00
import type EditorToolbar from "./EditorToolbar.svelte";
export const $editorToolbar: Promise<EditorToolbar> = initToolbar(i18n);