mirror of
https://github.com/ankitects/anki.git
synced 2025-09-19 06:22:22 -04:00
Check for non-existence of block tags instead of exclusive existence of inline tags in editable
This commit is contained in:
parent
cb5cb006a9
commit
01a283bb99
2 changed files with 41 additions and 69 deletions
|
@ -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"));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue