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

Move wrap to lib to allow editable to use it

Browse source
This commit is contained in:
Henrik Giesel 2021-08-07 20:26:39 +02:00
parent b6dfbcbc20
commit f76cf24e9d
4 changed files with 60 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ts/editable/editable.ts
View file

@ -5,8 +5,7 @@ import type { DecoratedElement } from "./decorated";
import { decoratedComponents } from "./decorated"; import { decoratedComponents } from "./decorated";
import { bridgeCommand } from "lib/bridgecommand"; import { bridgeCommand } from "lib/bridgecommand";
import { elementIsBlock, getBlockElement } from "lib/dom"; import { elementIsBlock, getBlockElement } from "lib/dom";
// import { inCodable } from "./toolbar"; import { wrapInternal } from "lib/wrap";
// import { wrap } from "./wrap";
export function caretToEnd(node: Node): void { export function caretToEnd(node: Node): void {
const range = document.createRange(); const range = document.createRange();
@ -62,8 +61,7 @@ export class Editable extends HTMLElement {
} }
surroundSelection(before: string, after: string): void { surroundSelection(before: string, after: string): void {
// TODO wrapInternal(this.getRootNode() as ShadowRoot, before, after, false);
// wrap(before, after);
} }
onEnter(event: KeyboardEvent): void { onEnter(event: KeyboardEvent): void {

3
ts/editable/mathjax.ts
View file

@ -7,7 +7,8 @@ const parser = new DOMParser();
function getStyle(): HTMLStyleElement { function getStyle(): HTMLStyleElement {
const style = document.createElement("style") as HTMLStyleElement; const style = document.createElement("style") as HTMLStyleElement;
const css = `svg { color: white; font-size: 20px; }`; /* color is set for Maths, fill for the empty icon */
const css = `svg { color: white; fill: white; font-size: 20px; }`;
style.appendChild(document.createTextNode(css)); style.appendChild(document.createTextNode(css));
return style; return style;

50
ts/editor/wrap.ts
View file

@ -5,45 +5,15 @@
@typescript-eslint/no-non-null-assertion: "off", @typescript-eslint/no-non-null-assertion: "off",
*/ */
import { getCurrentField } from "./helpers"; import { wrapInternal } from "lib/wrap";
import { setFormat } from "."; import { getCurrentField } from ".";
function wrappedExceptForWhitespace(text: string, front: string, back: string): string {
const match = text.match(/^(\s*)([^]*?)(\s*)$/)!;
return match[1] + front + match[2] + back + match[3];
}
function moveCursorPastPostfix(selection: Selection, postfix: string): void {
const range = selection.getRangeAt(0);
range.setStart(range.startContainer, range.startOffset - postfix.length);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
}
function wrapInternal(front: string, back: string, plainText: boolean): void {
const currentField = getCurrentField()!;
const selection = currentField.getSelection();
const range = selection.getRangeAt(0);
const content = range.cloneContents();
const span = document.createElement("span");
span.appendChild(content);
if (plainText) {
const new_ = wrappedExceptForWhitespace(span.innerText, front, back);
setFormat("inserttext", new_);
} else {
const new_ = wrappedExceptForWhitespace(span.innerHTML, front, back);
setFormat("inserthtml", new_);
}
if (!span.innerHTML) {
moveCursorPastPostfix(selection, back);
}
}
export function wrap(front: string, back: string): void { export function wrap(front: string, back: string): void {
wrapInternal(front, back, false); const editingArea = getCurrentField();
if (editingArea) {
wrapInternal(editingArea.editableContainer.shadowRoot!, front, back, false);
}
} }
export function wrapCurrent(front: string, back: string): void { export function wrapCurrent(front: string, back: string): void {
@ -53,5 +23,9 @@ export function wrapCurrent(front: string, back: string): void {
/* currently unused */ /* currently unused */
export function wrapIntoText(front: string, back: string): void { export function wrapIntoText(front: string, back: string): void {
wrapInternal(front, back, true); const editingArea = getCurrentField();
if (editingArea) {
wrapInternal(editingArea.editableContainer.shadowRoot!, front, back, false);
}
} }

44
ts/lib/wrap.ts Normal file
View file

@ -0,0 +1,44 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/* eslint
@typescript-eslint/no-non-null-assertion: "off",
*/
function wrappedExceptForWhitespace(text: string, front: string, back: string): string {
const match = text.match(/^(\s*)([^]*?)(\s*)$/)!;
return match[1] + front + match[2] + back + match[3];
}
function moveCursorPastPostfix(selection: Selection, postfix: string): void {
const range = selection.getRangeAt(0);
range.setStart(range.startContainer, range.startOffset - postfix.length);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
}
export function wrapInternal(
root: Document | ShadowRoot,
front: string,
back: string,
plainText: boolean
): void {
const selection = root.getSelection()!;
const range = selection.getRangeAt(0);
const content = range.cloneContents();
const span = document.createElement("span");
span.appendChild(content);
if (plainText) {
const new_ = wrappedExceptForWhitespace(span.innerText, front, back);
document.execCommand("inserttext", false, new_);
} else {
const new_ = wrappedExceptForWhitespace(span.innerHTML, front, back);
document.execCommand("inserthtml", false, new_);
}
if (!span.innerHTML) {
moveCursorPastPostfix(selection, back);
}
}