mirror of
https://github.com/ankitects/anki.git
synced 2025-09-18 22:12:21 -04:00
Move wrap to lib to allow editable to use it
This commit is contained in:
parent
b6dfbcbc20
commit
f76cf24e9d
4 changed files with 60 additions and 43 deletions
|
@ -5,8 +5,7 @@ import type { DecoratedElement } from "./decorated";
|
|||
import { decoratedComponents } from "./decorated";
|
||||
import { bridgeCommand } from "lib/bridgecommand";
|
||||
import { elementIsBlock, getBlockElement } from "lib/dom";
|
||||
// import { inCodable } from "./toolbar";
|
||||
// import { wrap } from "./wrap";
|
||||
import { wrapInternal } from "lib/wrap";
|
||||
|
||||
export function caretToEnd(node: Node): void {
|
||||
const range = document.createRange();
|
||||
|
@ -62,8 +61,7 @@ export class Editable extends HTMLElement {
|
|||
}
|
||||
|
||||
surroundSelection(before: string, after: string): void {
|
||||
// TODO
|
||||
// wrap(before, after);
|
||||
wrapInternal(this.getRootNode() as ShadowRoot, before, after, false);
|
||||
}
|
||||
|
||||
onEnter(event: KeyboardEvent): void {
|
||||
|
|
|
@ -7,7 +7,8 @@ const parser = new DOMParser();
|
|||
|
||||
function getStyle(): 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));
|
||||
|
||||
return style;
|
||||
|
|
|
@ -5,45 +5,15 @@
|
|||
@typescript-eslint/no-non-null-assertion: "off",
|
||||
*/
|
||||
|
||||
import { getCurrentField } from "./helpers";
|
||||
import { setFormat } 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);
|
||||
}
|
||||
}
|
||||
import { wrapInternal } from "lib/wrap";
|
||||
import { getCurrentField } from ".";
|
||||
|
||||
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 {
|
||||
|
@ -53,5 +23,9 @@ export function wrapCurrent(front: string, back: string): void {
|
|||
|
||||
/* currently unused */
|
||||
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
44
ts/lib/wrap.ts
Normal 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);
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue