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

Merge pull request #930 from hgiesel/editorts

Browse source 
Refactor editor.ts
This commit is contained in:
Damien Elmes 2021-01-21 10:44:11 +10:00 committed by GitHub
commit 6d8a9a7ef5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 138 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

300
qt/aqt/data/web/js/editor.ts
View file

@ -6,22 +6,23 @@ let changeTimer = null;
let currentNoteId = null; let currentNoteId = null;
declare interface String { declare interface String {
format(...args): string; format(...args: string[]): string;
} }
/* kept for compatibility with add-ons */ /* kept for compatibility with add-ons */
String.prototype.format = function () { String.prototype.format = function (...args: string[]): string {
const args = arguments; return this.replace(/\{\d+\}/g, (m: string): void => {
return this.replace(/\{\d+\}/g, function (m) { const match = m.match(/\d+/);
return args[m.match(/\d+/)];
return match ? args[match[0]] : "";
}); });
}; };
function setFGButton(col) { function setFGButton(col: string): void {
$("#forecolor")[0].style.backgroundColor = col; $("#forecolor")[0].style.backgroundColor = col;
} }
function saveNow(keepFocus) { function saveNow(keepFocus: boolean): void {
if (!currentField) { if (!currentField) {
return; return;
} }
@ -36,7 +37,7 @@ function saveNow(keepFocus) {
} }
} }
function triggerKeyTimer() { function triggerKeyTimer(): void {
clearChangeTimer(); clearChangeTimer();
changeTimer = setTimeout(function () { changeTimer = setTimeout(function () {
updateButtonState(); updateButtonState();
@ -48,15 +49,15 @@ interface Selection {
modify(s: string, t: string, u: string): void; modify(s: string, t: string, u: string): void;
} }
function onKey(evt: KeyboardEvent) { function onKey(evt: KeyboardEvent): void {
// esc clears focus, allowing dialog to close // esc clears focus, allowing dialog to close
if (evt.which === 27) { if (evt.code === "Escape") {
currentField.blur(); currentField.blur();
return; return;
} }
// prefer <br> instead of <div></div> // prefer <br> instead of <div></div>
if (evt.which === 13 && !inListItem()) { if (evt.code === "Enter" && !inListItem()) {
evt.preventDefault(); evt.preventDefault();
document.execCommand("insertLineBreak"); document.execCommand("insertLineBreak");
return; return;
@ -73,11 +74,11 @@ function onKey(evt: KeyboardEvent) {
if (evt.shiftKey) { if (evt.shiftKey) {
alter = "extend"; alter = "extend";
} }
if (evt.which === 39) { if (evt.code === "ArrowRight") {
selection.modify(alter, "right", granularity); selection.modify(alter, "right", granularity);
evt.preventDefault(); evt.preventDefault();
return; return;
} else if (evt.which === 37) { } else if (evt.code === "ArrowLeft") {
selection.modify(alter, "left", granularity); selection.modify(alter, "left", granularity);
evt.preventDefault(); evt.preventDefault();
return; return;
@ -87,9 +88,9 @@ function onKey(evt: KeyboardEvent) {
triggerKeyTimer(); triggerKeyTimer();
} }
function onKeyUp(evt: KeyboardEvent) { function onKeyUp(evt: KeyboardEvent): void {
// Avoid div element on remove // Avoid div element on remove
if (evt.which === 8 || evt.which === 13) { if (evt.code === "Enter" || evt.code === "Backspace") {
const anchor = window.getSelection().anchorNode; const anchor = window.getSelection().anchorNode;
if ( if (
@ -105,7 +106,7 @@ function onKeyUp(evt: KeyboardEvent) {
} }
function nodeIsElement(node: Node): node is Element { function nodeIsElement(node: Node): node is Element {
return node.nodeType == Node.ELEMENT_NODE; return node.nodeType === Node.ELEMENT_NODE;
} }
function inListItem(): boolean { function inListItem(): boolean {
@ -123,7 +124,7 @@ function inListItem(): boolean {
return inList; return inList;
} }
function insertNewline() { function insertNewline(): void {
if (!inPreEnvironment()) { if (!inPreEnvironment()) {
setFormat("insertText", "\n"); setFormat("insertText", "\n");
return; return;
@ -156,34 +157,28 @@ function inPreEnvironment(): boolean {
return window.getComputedStyle(n).whiteSpace.startsWith("pre"); return window.getComputedStyle(n).whiteSpace.startsWith("pre");
} }
function onInput() { function onInput(): void {
// make sure IME changes get saved // make sure IME changes get saved
triggerKeyTimer(); triggerKeyTimer();
} }
function updateButtonState() { function updateButtonState(): void {
const buts = ["bold", "italic", "underline", "superscript", "subscript"]; const buts = ["bold", "italic", "underline", "superscript", "subscript"];
for (const name of buts) { for (const name of buts) {
if (document.queryCommandState(name)) { const elem = document.querySelector(`#${name}`) as HTMLElement;
$("#" + name).addClass("highlighted"); elem.classList.toggle("highlighted", document.queryCommandState(name));
} else {
$("#" + name).removeClass("highlighted");
}
} }
// fixme: forecolor // fixme: forecolor
// 'col': document.queryCommandValue("forecolor") // 'col': document.queryCommandValue("forecolor")
} }
function toggleEditorButton(buttonid) { function toggleEditorButton(buttonid: string): void {
if ($(buttonid).hasClass("highlighted")) { const button = $(buttonid)[0];
$(buttonid).removeClass("highlighted"); button.classList.toggle("highlighted");
} else {
$(buttonid).addClass("highlighted");
}
} }
function setFormat(cmd: string, arg?: any, nosave: boolean = false) { function setFormat(cmd: string, arg?: any, nosave: boolean = false): void {
document.execCommand(cmd, false, arg); document.execCommand(cmd, false, arg);
if (!nosave) { if (!nosave) {
saveField("key"); saveField("key");
@ -191,33 +186,30 @@ function setFormat(cmd: string, arg?: any, nosave: boolean = false) {
} }
} }
function clearChangeTimer() { function clearChangeTimer(): void {
if (changeTimer) { if (changeTimer) {
clearTimeout(changeTimer); clearTimeout(changeTimer);
changeTimer = null; changeTimer = null;
} }
} }
function onFocus(elem) { function onFocus(elem: HTMLElement): void {
if (currentField === elem) { if (currentField === elem) {
// anki window refocused; current element unchanged // anki window refocused; current element unchanged
return; return;
} }
currentField = elem; currentField = elem;
pycmd("focus:" + currentFieldOrdinal()); pycmd(`focus:${currentFieldOrdinal()}`);
enableButtons(); enableButtons();
// don't adjust cursor on mouse clicks
if (mouseDown) {
return;
}
// do this twice so that there's no flicker on newer versions // do this twice so that there's no flicker on newer versions
caretToEnd(); caretToEnd();
// scroll if bottom of element off the screen // scroll if bottom of element off the screen
function pos(obj) { function pos(elem: HTMLElement): number {
let cur = 0; let cur = 0;
do { do {
cur += obj.offsetTop; cur += elem.offsetTop;
} while ((obj = obj.offsetParent)); elem = elem.offsetParent as HTMLElement;
} while (elem);
return cur; return cur;
} }
@ -230,14 +222,14 @@ function onFocus(elem) {
} }
} }
function focusField(n) { function focusField(n: number): void {
if (n === null) { if (n === null) {
return; return;
} }
$("#f" + n).focus(); $(`#f${n}`).focus();
} }
function focusIfField(x, y) { function focusIfField(x: number, y: number): boolean {
const elements = document.elementsFromPoint(x, y); const elements = document.elementsFromPoint(x, y);
for (let i = 0; i < elements.length; i++) { for (let i = 0; i < elements.length; i++) {
let elem = elements[i] as HTMLElement; let elem = elements[i] as HTMLElement;
@ -252,12 +244,12 @@ function focusIfField(x, y) {
return false; return false;
} }
function onPaste(elem) { function onPaste(): void {
pycmd("paste"); pycmd("paste");
window.event.preventDefault(); window.event.preventDefault();
} }
function caretToEnd() { function caretToEnd(): void {
const r = document.createRange(); const r = document.createRange();
r.selectNodeContents(currentField); r.selectNodeContents(currentField);
r.collapse(false); r.collapse(false);
@ -266,7 +258,7 @@ function caretToEnd() {
s.addRange(r); s.addRange(r);
} }
function onBlur() { function onBlur(): void {
if (!currentField) { if (!currentField) {
return; return;
} }
@ -281,7 +273,7 @@ function onBlur() {
} }
} }
function saveField(type) { function saveField(type: "blur" | "key"): void {
clearChangeTimer(); clearChangeTimer();
if (!currentField) { if (!currentField) {
// no field has been focused yet // no field has been focused yet
@ -289,35 +281,37 @@ function saveField(type) {
} }
// type is either 'blur' or 'key' // type is either 'blur' or 'key'
pycmd( pycmd(
type + `${type}:${currentFieldOrdinal()}:${currentNoteId}:${currentField.innerHTML}`
":" +
currentFieldOrdinal() +
":" +
currentNoteId +
":" +
currentField.innerHTML
); );
} }
function currentFieldOrdinal() { function currentFieldOrdinal(): string {
return currentField.id.substring(1); return currentField.id.substring(1);
} }
function wrappedExceptForWhitespace(text, front, back) { function wrappedExceptForWhitespace(text: string, front: string, back: string): string {
const match = text.match(/^(\s*)([^]*?)(\s*)$/); const match = text.match(/^(\s*)([^]*?)(\s*)$/);
return match[1] + front + match[2] + back + match[3]; return match[1] + front + match[2] + back + match[3];
} }
function disableButtons() { function preventButtonFocus(): void {
for (const element of document.querySelectorAll("button.linkb")) {
element.addEventListener("mousedown", (evt: Event) => {
evt.preventDefault();
});
}
}
function disableButtons(): void {
$("button.linkb:not(.perm)").prop("disabled", true); $("button.linkb:not(.perm)").prop("disabled", true);
} }
function enableButtons() { function enableButtons(): void {
$("button.linkb").prop("disabled", false); $("button.linkb").prop("disabled", false);
} }
// disable the buttons if a field is not currently focused // disable the buttons if a field is not currently focused
function maybeDisableButtons() { function maybeDisableButtons(): void {
if (!document.activeElement || document.activeElement.className !== "field") { if (!document.activeElement || document.activeElement.className !== "field") {
disableButtons(); disableButtons();
} else { } else {
@ -325,16 +319,16 @@ function maybeDisableButtons() {
} }
} }
function wrap(front, back) { function wrap(front: string, back: string): void {
wrapInternal(front, back, false); wrapInternal(front, back, false);
} }
/* currently unused */ /* currently unused */
function wrapIntoText(front, back) { function wrapIntoText(front: string, back: string): void {
wrapInternal(front, back, true); wrapInternal(front, back, true);
} }
function wrapInternal(front, back, plainText) { function wrapInternal(front: string, back: string, plainText: boolean): void {
const s = window.getSelection(); const s = window.getSelection();
let r = s.getRangeAt(0); let r = s.getRangeAt(0);
const content = r.cloneContents(); const content = r.cloneContents();
@ -357,12 +351,12 @@ function wrapInternal(front, back, plainText) {
} }
} }
function onCutOrCopy() { function onCutOrCopy(): boolean {
pycmd("cutOrCopy"); pycmd("cutOrCopy");
return true; return true;
} }
function setFields(fields) { function setFields(fields: [string, string][]): void {
let txt = ""; let txt = "";
// webengine will include the variable after enter+backspace // webengine will include the variable after enter+backspace
// if we don't convert it to a literal colour // if we don't convert it to a literal colour
@ -397,44 +391,44 @@ function setFields(fields) {
</td> </td>
</tr>`; </tr>`;
} }
$("#fields").html(` $("#fields").html(
<table cellpadding=0 width=100% style='table-layout: fixed;'> `<table cellpadding=0 width=100% style='table-layout: fixed;'>${txt}</table>`
${txt} );
</table>`);
maybeDisableButtons(); maybeDisableButtons();
} }
function setBackgrounds(cols) { function setBackgrounds(cols: "dupe"[]) {
for (let i = 0; i < cols.length; i++) { for (let i = 0; i < cols.length; i++) {
if (cols[i] == "dupe") { const element = document.querySelector(`#f${i}`);
$("#f" + i).addClass("dupe"); element.classList.toggle("dupe", cols[i] === "dupe");
} else {
$("#f" + i).removeClass("dupe");
}
} }
} }
function setFonts(fonts) { function setFonts(fonts: [string, number, boolean][]): void {
for (let i = 0; i < fonts.length; i++) { for (let i = 0; i < fonts.length; i++) {
const n = $("#f" + i); const n = $(`#f${i}`);
n.css("font-family", fonts[i][0]).css("font-size", fonts[i][1]); n.css("font-family", fonts[i][0]).css("font-size", fonts[i][1]);
n[0].dir = fonts[i][2] ? "rtl" : "ltr"; n[0].dir = fonts[i][2] ? "rtl" : "ltr";
} }
} }
function setNoteId(id) { function setNoteId(id: number): void {
currentNoteId = id; currentNoteId = id;
} }
function showDupes() { function showDupes(): void {
$("#dupes").show(); $("#dupes").show();
} }
function hideDupes() { function hideDupes(): void {
$("#dupes").hide(); $("#dupes").hide();
} }
let pasteHTML = function (html, internal, extendedMode) { let pasteHTML = function (
html: string,
internal: boolean,
extendedMode: boolean
): void {
html = filterHTML(html, internal, extendedMode); html = filterHTML(html, internal, extendedMode);
if (html !== "") { if (html !== "") {
@ -442,9 +436,15 @@ let pasteHTML = function (html, internal, extendedMode) {
} }
}; };
let filterHTML = function (html, internal, extendedMode) { let filterHTML = function (
html: string,
internal: boolean,
extendedMode: boolean
): string {
// wrap it in <top> as we aren't allowed to change top level elements // wrap it in <top> as we aren't allowed to change top level elements
const top = $.parseHTML("<ankitop>" + html + "</ankitop>")[0] as Element; const top = document.createElement("ankitop");
top.innerHTML = html;
if (internal) { if (internal) {
filterInternalNode(top); filterInternalNode(top);
} else { } else {
@ -516,38 +516,30 @@ let isNightMode = function (): boolean {
return document.body.classList.contains("nightMode"); return document.body.classList.contains("nightMode");
}; };
let filterExternalSpan = function (node) { let filterExternalSpan = function (elem: HTMLElement) {
// filter out attributes // filter out attributes
let toRemove = []; for (const attr of [...elem.attributes]) {
for (const attr of node.attributes) {
const attrName = attr.name.toUpperCase(); const attrName = attr.name.toUpperCase();
if (attrName !== "STYLE") { if (attrName !== "STYLE") {
toRemove.push(attr); elem.removeAttributeNode(attr);
} }
} }
for (const attributeToRemove of toRemove) {
node.removeAttributeNode(attributeToRemove);
}
// filter styling // filter styling
toRemove = []; for (const name of [...elem.style]) {
for (const name of node.style) { const value = elem.style.getPropertyValue(name);
if (!allowedStyling.hasOwnProperty(name)) {
toRemove.push(name); if (
} !allowedStyling.hasOwnProperty(name) ||
if (name === "background-color" && node.style[name] === "transparent") {
// google docs adds this unnecessarily // google docs adds this unnecessarily
toRemove.push(name); (name === "background-color" && value === "transparent") ||
}
if (isNightMode()) {
// ignore coloured text in night mode for now // ignore coloured text in night mode for now
if (name === "background-color" || name == "color") { (isNightMode() && (name === "background-color" || name === "color"))
toRemove.push(name); ) {
} elem.style.removeProperty(name);
} }
} }
for (let name of toRemove) {
node.style.removeProperty(name);
}
}; };
allowedTagsExtended["SPAN"] = filterExternalSpan; allowedTagsExtended["SPAN"] = filterExternalSpan;
@ -555,34 +547,33 @@ allowedTagsExtended["SPAN"] = filterExternalSpan;
// add basic tags to extended // add basic tags to extended
Object.assign(allowedTagsExtended, allowedTagsBasic); Object.assign(allowedTagsExtended, allowedTagsBasic);
function isHTMLElement(elem: Element): elem is HTMLElement {
return elem instanceof HTMLElement;
}
// filtering from another field // filtering from another field
let filterInternalNode = function (node) { let filterInternalNode = function (elem: Element) {
if (node.style) { if (isHTMLElement(elem)) {
node.style.removeProperty("background-color"); elem.style.removeProperty("background-color");
node.style.removeProperty("font-size"); elem.style.removeProperty("font-size");
node.style.removeProperty("font-family"); elem.style.removeProperty("font-family");
} }
// recurse // recurse
for (const child of node.childNodes) { for (let i = 0; i < elem.children.length; i++) {
const child = elem.children[i];
filterInternalNode(child); filterInternalNode(child);
} }
}; };
// filtering from external sources // filtering from external sources
let filterNode = function (node, extendedMode) { let filterNode = function (node: Node, extendedMode: boolean): void {
// text node? if (!nodeIsElement(node)) {
if (node.nodeType === 3) {
return; return;
} }
// descend first, and take a copy of the child nodes as the loop will skip // descend first, and take a copy of the child nodes as the loop will skip
// elements due to node modifications otherwise // elements due to node modifications otherwise
for (const child of [...node.children]) {
const nodes = [];
for (const child of node.childNodes) {
nodes.push(child);
}
for (const child of nodes) {
filterNode(child, extendedMode); filterNode(child, extendedMode);
} }
@ -590,12 +581,10 @@ let filterNode = function (node, extendedMode) {
return; return;
} }
let tag; const tag = extendedMode
if (extendedMode) { ? allowedTagsExtended[node.tagName]
tag = allowedTagsExtended[node.tagName]; : allowedTagsBasic[node.tagName];
} else {
tag = allowedTagsBasic[node.tagName];
}
if (!tag) { if (!tag) {
if (!node.innerHTML || node.tagName === "TITLE") { if (!node.innerHTML || node.tagName === "TITLE") {
node.parentNode.removeChild(node); node.parentNode.removeChild(node);
@ -608,59 +597,40 @@ let filterNode = function (node, extendedMode) {
tag(node); tag(node);
} else { } else {
// allowed, filter out attributes // allowed, filter out attributes
const toRemove = []; for (const attr of [...node.attributes]) {
for (const attr of node.attributes) {
const attrName = attr.name.toUpperCase(); const attrName = attr.name.toUpperCase();
if (tag.attrs.indexOf(attrName) === -1) { if (tag.attrs.indexOf(attrName) === -1) {
toRemove.push(attr); node.removeAttributeNode(attr);
} }
} }
for (const attributeToRemove of toRemove) {
node.removeAttributeNode(attributeToRemove);
}
} }
} }
}; };
let adjustFieldsTopMargin = function () { let adjustFieldsTopMargin = function (): void {
const topHeight = $("#topbuts").height(); const topHeight = $("#topbuts").height();
const margin = topHeight + 8; const margin = topHeight + 8;
document.getElementById("fields").style.marginTop = margin + "px"; document.getElementById("fields").style.marginTop = `${margin}px`;
}; };
let mouseDown = 0; document.addEventListener("click", (evt: MouseEvent): void => {
const src = evt.target as Element;
$(function () { if (src.tagName === "IMG") {
document.body.onmousedown = function () { // image clicked; find contenteditable parent
mouseDown++; let p = src;
}; while ((p = p.parentNode as Element)) {
if (p.className === "field") {
document.body.onmouseup = function () { document.getElementById(p.id).focus();
mouseDown--; break;
};
document.onclick = function (evt: MouseEvent) {
const src = evt.target as Element;
if (src.tagName === "IMG") {
// image clicked; find contenteditable parent
let p = src;
while ((p = p.parentNode as Element)) {
if (p.className === "field") {
$("#" + p.id).focus();
break;
}
} }
} }
}; }
});
// prevent editor buttons from taking focus
$("button.linkb").on("mousedown", function (e) {
e.preventDefault();
});
window.onresize = function () {
adjustFieldsTopMargin();
};
window.addEventListener("resize", () => {
adjustFieldsTopMargin();
});
$(function (): void {
adjustFieldsTopMargin(); adjustFieldsTopMargin();
}); });

2
qt/aqt/data/web/js/tsconfig.json
View file

@ -2,7 +2,7 @@
"compilerOptions": { "compilerOptions": {
"target": "es6", "target": "es6",
"module": "commonjs", "module": "commonjs",
"lib": ["es6", "dom"], "lib": ["es6", "dom", "dom.iterable"],
"strict": true, "strict": true,
"noImplicitAny": false, "noImplicitAny": false,
"strictNullChecks": false, "strictNullChecks": false,

1
qt/aqt/editor.py
View file

@ -222,6 +222,7 @@ class Editor:
js=["js/vendor/jquery.min.js", "js/editor.js"], js=["js/vendor/jquery.min.js", "js/editor.js"],
context=self, context=self,
) )
self.web.eval("preventButtonFocus();")
# Top buttons # Top buttons
###################################################################### ######################################################################

2
ts/tsconfig.json
View file

@ -3,7 +3,7 @@
"compilerOptions": { "compilerOptions": {
"target": "es6", "target": "es6",
"module": "es6", "module": "es6",
"lib": ["es2016", "es2019.array", "dom"], "lib": ["es2016", "es2019.array", "dom", "dom.iterable"],
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"anki/*": ["../bazel-bin/ts/lib/*"] "anki/*": ["../bazel-bin/ts/lib/*"]