Generalize inListItem to getAnchorElement

This commit is contained in:
Henrik Giesel 2021-04-19 16:04:20 +02:00
parent cd33e1b05f
commit 83d5d72777
3 changed files with 29 additions and 17 deletions

View file

@ -184,13 +184,7 @@ $editorToolbar.addButtonGroup({{
else "" else ""
) )
self.web.eval( self.web.eval(f"{lefttopbtns_js} {righttopbtns_js}")
f"""
$editorToolbar = document.getElementById("editorToolbar");
{lefttopbtns_js}
{righttopbtns_js}
"""
)
# Top buttons # Top buttons
###################################################################### ######################################################################

View file

@ -58,6 +58,8 @@ class EditorToolbar extends HTMLElement {
}); });
connectedCallback(): void { connectedCallback(): void {
globalThis.$editorToolbar = this;
setupI18n({ modules: [ModuleName.EDITING] }).then(() => { setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
const buttons = writable([ const buttons = writable([
getNotetypeGroup(), getNotetypeGroup(),

View file

@ -5,19 +5,35 @@ import { EditingArea } from "./editingArea";
import { caretToEnd, nodeIsElement } from "./helpers"; import { caretToEnd, nodeIsElement } from "./helpers";
import { triggerChangeTimer } from "./changeTimer"; import { triggerChangeTimer } from "./changeTimer";
function inListItem(currentField: EditingArea): boolean { const getAnchorParent = <T extends Element>(
const anchor = currentField.getSelection()!.anchorNode!; predicate: (element: Element) => element is T
) => (currentField: EditingArea): T | null => {
const anchor = currentField.getSelection()?.anchorNode;
let inList = false; if (!anchor) {
let n = nodeIsElement(anchor) ? anchor : anchor.parentElement; return null;
while (n) {
inList = inList || window.getComputedStyle(n).display == "list-item";
n = n.parentElement;
} }
return inList; let anchorParent: T | null = null;
let element = nodeIsElement(anchor) ? anchor : anchor.parentElement;
while (element) {
anchorParent = anchorParent || (predicate(element) ? element : null);
element = element.parentElement;
} }
return anchorParent;
};
const getListItem = getAnchorParent(
(element: Element): element is HTMLLIElement =>
window.getComputedStyle(element).display === "list-item"
);
const getParagraph = getAnchorParent(
(element: Element): element is HTMLParamElement => element.tagName === "P"
);
export function onInput(event: Event): void { export function onInput(event: Event): void {
// make sure IME changes get saved // make sure IME changes get saved
triggerChangeTimer(event.currentTarget as EditingArea); triggerChangeTimer(event.currentTarget as EditingArea);
@ -35,7 +51,7 @@ export function onKey(evt: KeyboardEvent): void {
} }
// prefer <br> instead of <div></div> // prefer <br> instead of <div></div>
if (evt.code === "Enter" && !inListItem(currentField)) { if (evt.code === "Enter" && !getListItem(currentField)) {
evt.preventDefault(); evt.preventDefault();
document.execCommand("insertLineBreak"); document.execCommand("insertLineBreak");
} }