Move wrap to lib to allow editable to use it

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

View file

@ -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 {

View file

@ -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;

View file

@ -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
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);
}
}