Improved SquireUI handling of pathChange and bugfix bold match

This commit is contained in:
the-djmaze 2024-09-15 17:40:00 +02:00
parent 48acb9ca38
commit 12b6ed3dbb
2 changed files with 24 additions and 30 deletions

View file

@ -155,7 +155,7 @@ class SquireUI
html: 'B', html: 'B',
cmd: () => this.doAction('bold'), cmd: () => this.doAction('bold'),
key: 'B', key: 'B',
matches: 'B,STRONT' matches: 'B,STRONG'
}, },
italic: { italic: {
html: 'I', html: 'I',
@ -477,15 +477,22 @@ class SquireUI
// ----- // -----
squire.addEventListener('pathChange', e => { squire.addEventListener('pathChange', () => {
const squireRoot = squire.getRoot(); const squireRoot = squire.getRoot();
let elm = e.detail.element; let range = squire.getSelection(),
collapsed = range.collapsed,
elm = collapsed ? range.endContainer : range?.commonAncestorContainer;
if (elm && !(elm instanceof Element)) {
elm = elm.parentElement;
}
forEachObjectValue(actions, entries => { forEachObjectValue(actions, entries => {
forEachObjectValue(entries, cfg => { forEachObjectValue(entries, cfg => {
// cfg.matches && cfg.input.classList.toggle('active', elm && elm.matches(cfg.matches)); // Check if selection has a matching parent or contains a matching element
cfg.matches && cfg.input.classList.toggle('active', elm && elm.closestWithin(cfg.matches, squireRoot)); cfg.matches && cfg.input.classList.toggle('active', !!(elm && (
(!collapsed && [...elm.querySelectorAll(cfg.matches)].some(node => range.intersectsNode(node)))
|| elm.closestWithin(cfg.matches, squireRoot)
)));
}); });
}); });

View file

@ -99,12 +99,8 @@
children = props; children = props;
props = null; props = null;
} }
if (props) {
setAttributes(el, props); setAttributes(el, props);
} children && el.append(...children);
if (children) {
children.forEach((node) => el.append(node));
}
return el; return el;
}; };
var areAlike = (node, node2) => { var areAlike = (node, node2) => {
@ -191,8 +187,7 @@
} }
}; };
var getClosest = (node, root, selector) => { var getClosest = (node, root, selector) => {
var _a; node = (node && !node.closest ? node.parentElement : node)?.closest(selector);
node = (_a = node && !node.closest ? node.parentElement : node) == null ? void 0 : _a.closest(selector);
return node && root.contains(node) ? node : null; return node && root.contains(node) ? node : null;
}; };
var setAttributes = (node, props) => { var setAttributes = (node, props) => {
@ -256,17 +251,13 @@
// source/range/Boundaries.ts // source/range/Boundaries.ts
var START_TO_START = 0; var START_TO_START = 0;
var START_TO_END = 1;
var END_TO_END = 2; var END_TO_END = 2;
var END_TO_START = 3;
var isNodeContainedInRange = (range, node, partial) => { var isNodeContainedInRange = (range, node, partial) => {
if (partial) {
return range.intersectsNode(node);
} else {
const nodeRange = document.createRange(); const nodeRange = document.createRange();
nodeRange.selectNode(node); nodeRange.selectNode(node);
if (partial) {
const nodeEndBeforeStart = range.compareBoundaryPoints(END_TO_START, nodeRange) > -1;
const nodeStartAfterEnd = range.compareBoundaryPoints(START_TO_END, nodeRange) < 1;
return !nodeEndBeforeStart && !nodeStartAfterEnd;
} else {
const nodeStartAfterStart = range.compareBoundaryPoints(START_TO_START, nodeRange) < 1; const nodeStartAfterStart = range.compareBoundaryPoints(START_TO_START, nodeRange) < 1;
const nodeEndBeforeEnd = range.compareBoundaryPoints(END_TO_END, nodeRange) > -1; const nodeEndBeforeEnd = range.compareBoundaryPoints(END_TO_END, nodeRange) > -1;
return nodeStartAfterStart && nodeEndBeforeEnd; return nodeStartAfterStart && nodeEndBeforeEnd;
@ -1316,7 +1307,7 @@
const startBlock = getStartBlockOfRange(range, root); const startBlock = getStartBlockOfRange(range, root);
const endBlock = getEndBlockOfRange(range, root); const endBlock = getEndBlockOfRange(range, root);
let copyRoot = root; let copyRoot = root;
if (startBlock === endBlock && (startBlock == null ? void 0 : startBlock.contains(range.commonAncestorContainer))) { if (startBlock === endBlock && startBlock?.contains(range.commonAncestorContainer)) {
copyRoot = startBlock; copyRoot = startBlock;
} }
let contents; let contents;
@ -1714,7 +1705,6 @@
// source/keyboard/Space.ts // source/keyboard/Space.ts
var Space = (self, event, range) => { var Space = (self, event, range) => {
var _a;
let node; let node;
const root = self._root; const root = self._root;
self._recordUndoState(range); self._recordUndoState(range);
@ -1727,7 +1717,7 @@
} else if (rangeDoesEndAtBlockBoundary(range, root)) { } else if (rangeDoesEndAtBlockBoundary(range, root)) {
const block = getStartBlockOfRange(range, root); const block = getStartBlockOfRange(range, root);
if (block && block.nodeName !== "PRE") { if (block && block.nodeName !== "PRE") {
const text = (_a = block.textContent) == null ? void 0 : _a.trimEnd().replace(ZWS, ""); const text = block.textContent?.trimEnd().replace(ZWS, "");
if (text === "*" || text === "1.") { if (text === "*" || text === "1.") {
event.preventDefault(); event.preventDefault();
self.insertPlainText(" ", false); self.insertPlainText(" ", false);
@ -2380,10 +2370,7 @@
range = null; range = null;
} }
} }
if (!range) { return range || createRange(root.firstElementChild || root, 0);
range = createRange(root.firstElementChild || root, 0);
}
return range;
} }
setSelection(range) { setSelection(range) {
this._lastSelection = range; this._lastSelection = range;
@ -3823,8 +3810,8 @@
} }
setAttribute(name, value) { setAttribute(name, value) {
let range = this.getSelection(); let range = this.getSelection();
let start = (range == null ? void 0 : range.startContainer) || {}; let start = range?.startContainer || {};
let end = (range == null ? void 0 : range.endContainer) || {}; let end = range?.endContainer || {};
if ("dir" == name || start instanceof Text && 0 === range.startOffset && start === end && end.length === range.endOffset) { if ("dir" == name || start instanceof Text && 0 === range.startOffset && start === end && end.length === range.endOffset) {
this._recordUndoState(range); this._recordUndoState(range);
setAttributes(start.parentNode, { [name]: value }); setAttributes(start.parentNode, { [name]: value });