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

Move elements inserted into decorated component no matter the position

Browse source
This commit is contained in:
Henrik Giesel 2021-08-06 19:02:39 +02:00
parent 8ddb0bc6ed
commit ea01183bfd
1 changed files with 47 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
ts/editable/mathjax-component.ts
View file

@ -6,33 +6,58 @@ import { nodeIsElement } from "lib/dom";
import Mathjax_svelte from "./Mathjax.svelte";
function moveNodesInsertedBeforeEndToAfterEnd(element: Element): () => void {
const allowedChildNodes = element.childNodes.length;
function moveNodeOutOfElement(
element: Element,
node: Node,
placement: "beforebegin" | "afterend"
): Node {
element.removeChild(node);
let referenceNode: Node;
if (nodeIsElement(node)) {
referenceNode = element.insertAdjacentElement(placement, node)!;
} else {
element.insertAdjacentText(placement, (node as Text).wholeText);
referenceNode =
placement === "beforebegin"
? element.previousSibling!
: element.nextSibling!;
}
return referenceNode;
}
function placeCaretAfter(node: Node): void {
const range = document.createRange();
range.setStartAfter(node);
range.collapse(false);
const selection = document.getSelection()!;
selection.removeAllRanges();
selection.addRange(range);
}
function moveNodesInsertedOutside(element: Element, allowedChild: Node): () => void {
const observer = new MutationObserver(() => {
for (const node of [...element.childNodes].slice(allowedChildNodes)) {
element.removeChild(node);
const childNodes = [...element.childNodes];
const allowedIndex = childNodes.findIndex((child) => child === allowedChild);
let referenceNode: Node;
const beforeChildren = childNodes.slice(0, allowedIndex);
const afterChildren = childNodes.slice(allowedIndex + 1);
if (nodeIsElement(node)) {
referenceNode = element.insertAdjacentElement("afterend", node)!;
} else {
element.insertAdjacentText("afterend", (node as Text).wholeText);
referenceNode = element.nextSibling!;
}
let lastNode: Node | null = null;
if (!referenceNode) {
continue;
}
for (const node of beforeChildren) {
lastNode = moveNodeOutOfElement(element, node, "beforebegin");
}
const range = document.createRange();
range.setStartAfter(referenceNode);
range.collapse(false);
for (const node of afterChildren) {
lastNode = moveNodeOutOfElement(element, node, "afterend");
}
const selection = document.getSelection()!;
selection.removeAllRanges();
selection.addRange(range);
if (lastNode) {
placeCaretAfter(lastNode);
}
});
@ -92,7 +117,8 @@ export const Mathjax: DecoratedElementConstructor = class Mathjax
connectedCallback(): void {
this.decorate();
this.disconnect = moveNodesInsertedBeforeEndToAfterEnd(this);
// TODO text is assigned white-space: normal
this.disconnect = moveNodesInsertedOutside(this, this.children[0]);
}
disconnectedCallback(): void {