Check for non-existence of block tags instead of exclusive existence of inline tags in editable

This commit is contained in:
Henrik Giesel 2021-08-31 16:42:16 +02:00 committed by Damien Elmes
parent cb5cb006a9
commit 01a283bb99
2 changed files with 41 additions and 69 deletions

View file

@ -2,18 +2,13 @@
// 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
import { bridgeCommand } from "./lib"; import { bridgeCommand } from "./lib";
import { nodeIsInline, caretToEnd, getBlockElement } from "./helpers"; import { elementIsBlock, caretToEnd, getBlockElement } from "./helpers";
import { inCodable } from "./toolbar"; import { inCodable } from "./toolbar";
import { wrap } from "./wrap"; import { wrap } from "./wrap";
function containsInlineContent(field: Element): boolean { function containsInlineContent(element: Element): boolean {
if (field.childNodes.length === 0) { for (const child of element.children) {
// for now, for all practical purposes, empty fields are in block mode if (elementIsBlock(child) || !containsInlineContent(child)) {
return false;
}
for (const child of field.children) {
if (!nodeIsInline(child)) {
return false; return false;
} }
} }
@ -25,7 +20,7 @@ export class Editable extends HTMLElement {
set fieldHTML(content: string) { set fieldHTML(content: string) {
this.innerHTML = content; this.innerHTML = content;
if (containsInlineContent(this)) { if (content.length > 0 && containsInlineContent(this)) {
this.appendChild(document.createElement("br")); this.appendChild(document.createElement("br"));
} }
} }

View file

@ -9,67 +9,44 @@ export function nodeIsElement(node: Node): node is Element {
return node.nodeType === Node.ELEMENT_NODE; return node.nodeType === Node.ELEMENT_NODE;
} }
const INLINE_TAGS = [ const BLOCK_TAGS = [
"A", "ADDRESS",
"ABBR", "ARTICLE",
"ACRONYM", "ASIDE",
"AUDIO", "BLOCKQUOTE",
"B", "DETAILS",
"BDI", "DIALOG",
"BDO", "DD",
"BIG", "DIV",
"BR", "DL",
"BUTTON", "DT",
"CANVAS", "FIELDSET",
"CITE", "FIGCAPTION",
"CODE", "FIGURE",
"DATA", "FOOTER",
"DATALIST", "FORM",
"DEL", "H1",
"DFN", "H2",
"EM", "H3",
"EMBED", "H4",
"FONT", "H5",
"I", "H6",
"IFRAME", "HEADER",
"IMG", "HGROUP",
"INPUT", "HR",
"INS", "LI",
"KBD", "MAIN",
"LABEL", "NAV",
"MAP", "OL",
"MARK", "P",
"METER", "PRE",
"NOSCRIPT", "SECTION",
"OBJECT", "TABLE",
"OUTPUT", "UL",
"PICTURE",
"PROGRESS",
"Q",
"RUBY",
"S",
"SAMP",
"SCRIPT",
"SELECT",
"SLOT",
"SMALL",
"SPAN",
"STRONG",
"SUB",
"SUP",
"SVG",
"TEMPLATE",
"TEXTAREA",
"TIME",
"U",
"TT",
"VAR",
"VIDEO",
"WBR",
]; ];
export function nodeIsInline(node: Node): boolean { export function elementIsBlock(element: Element): boolean {
return !nodeIsElement(node) || INLINE_TAGS.includes(node.tagName); return BLOCK_TAGS.includes(element.tagName);
} }
export function caretToEnd(node: Node): void { export function caretToEnd(node: Node): void {