Fix inListItem for shadow roots

This commit is contained in:
Henrik Giesel 2021-01-28 17:43:56 +01:00
parent e0d1450ce0
commit db0c776210

View file

@ -1,7 +1,7 @@
/* Copyright: Ankitects Pty Ltd and contributors /* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
let currentField = null; let currentField: EditingContainer | null = null;
let changeTimer = null; let changeTimer = null;
let currentNoteId = null; let currentNoteId = null;
@ -172,7 +172,7 @@ function nodeIsInline(node: Node): boolean {
} }
function inListItem(): boolean { function inListItem(): boolean {
const anchor = window.getSelection().anchorNode; const anchor = currentField.getSelection().anchorNode;
let inList = false; let inList = false;
let n = nodeIsElement(anchor) ? anchor : anchor.parentElement; let n = nodeIsElement(anchor) ? anchor : anchor.parentElement;
@ -254,7 +254,7 @@ function clearChangeTimer(): void {
} }
function onFocus(evt: FocusEvent): void { function onFocus(evt: FocusEvent): void {
const elem = evt.currentTarget as HTMLElement; const elem = evt.currentTarget as EditingContainer;
if (currentField === elem) { if (currentField === elem) {
// anki window refocused; current element unchanged // anki window refocused; current element unchanged
return; return;
@ -293,7 +293,7 @@ function focusField(n: number): void {
function focusIfField(x: number, y: number): boolean { 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 EditingContainer;
if (elem.classList.contains("field")) { if (elem.classList.contains("field")) {
elem.focus(); elem.focus();
// the focus event may not fire if the window is not active, so make sure // the focus event may not fire if the window is not active, so make sure
@ -459,6 +459,7 @@ class EditingArea extends HTMLElement {
customElements.define("editing-area", EditingArea); customElements.define("editing-area", EditingArea);
class EditingContainer extends HTMLDivElement { class EditingContainer extends HTMLDivElement {
editingShadow: ShadowRoot;
editingArea: EditingArea; editingArea: EditingArea;
connectedCallback(): void { connectedCallback(): void {
@ -473,13 +474,13 @@ class EditingContainer extends HTMLDivElement {
this.addEventListener("copy", onCutOrCopy); this.addEventListener("copy", onCutOrCopy);
this.addEventListener("oncut", onCutOrCopy); this.addEventListener("oncut", onCutOrCopy);
const editingShadow = this.attachShadow({ mode: "open" }); this.editingShadow = this.attachShadow({ mode: "open" });
const style = editingShadow.appendChild(document.createElement("link")); const style = this.editingShadow.appendChild(document.createElement("link"));
style.setAttribute("rel", "stylesheet"); style.setAttribute("rel", "stylesheet");
style.setAttribute("href", "./_anki/css/editing-area.css"); style.setAttribute("href", "./_anki/css/editing-area.css");
this.editingArea = editingShadow.appendChild( this.editingArea = this.editingShadow.appendChild(
document.createElement("editing-area") document.createElement("editing-area")
) as EditingArea; ) as EditingArea;
} }
@ -490,6 +491,10 @@ class EditingContainer extends HTMLDivElement {
this.editingArea.fieldHTML = content; this.editingArea.fieldHTML = content;
} }
getSelection(): Selection {
return this.editingShadow.getSelection();
}
set fieldHTML(content: string) { set fieldHTML(content: string) {
this.editingArea.fieldHTML = content; this.editingArea.fieldHTML = content;
} }