Improved Squire WYSIWYG handling of A and IMG.

And also use Optional chaining (?.)
This commit is contained in:
the-djmaze 2022-08-29 09:36:32 +02:00
parent cad5fb6067
commit 3f3a3f9147
2 changed files with 13 additions and 22 deletions

View file

@ -176,8 +176,8 @@ class SquireUI
quote: { quote: {
html: '"', html: '"',
cmd: () => { cmd: () => {
let parent = this.getParentNodeName('UL,OL'); let parent = squire.getSelectionClosest('UL,OL,BLOCKQUOTE')?.nodeName;
(parent && 'BLOCKQUOTE' == parent) ? squire.decreaseQuoteLevel() : squire.increaseQuoteLevel(); ('BLOCKQUOTE' == parent) ? squire.decreaseQuoteLevel() : squire.increaseQuoteLevel();
}, },
hint: 'Blockquote' hint: 'Blockquote'
}, },
@ -198,11 +198,10 @@ class SquireUI
link: { link: {
html: '🔗', html: '🔗',
cmd: () => { cmd: () => {
if ('A' === this.getParentNodeName()) { let node = squire.getSelectionClosest('A'),
squire.removeLink(); url = prompt("Link", node?.href || "https://");
} else { if (url != null) {
let url = prompt("Link","https://"); url.length ? squire.makeLink(url) : (node && squire.removeLink());
url != null && url.length && squire.makeLink(url);
} }
}, },
hint: 'Link' hint: 'Link'
@ -210,12 +209,9 @@ class SquireUI
imageUrl: { imageUrl: {
html: '🖼️', html: '🖼️',
cmd: () => { cmd: () => {
if ('IMG' === this.getParentNodeName()) { let node = squire.getSelectionClosest('IMG'),
// squire.removeLink(); src = prompt("Image", node?.src || "https://");
} else { src.length ? squire.insertImage(src) : (node && squire.detach(node));
let src = prompt("Image","https://");
src != null && src.length && squire.insertImage(src);
}
}, },
hint: 'Image URL' hint: 'Image URL'
}, },
@ -385,15 +381,10 @@ class SquireUI
this.squire.focus(); this.squire.focus();
} }
getParentNodeName(selector) {
let parent = this.squire.getSelectionClosest(selector);
return parent ? parent.nodeName : null;
}
doList(type) { doList(type) {
let parent = this.getParentNodeName('UL,OL'), let parent = this.squire.getSelectionClosest('UL,OL')?.nodeName,
fn = {UL:'makeUnorderedList',OL:'makeOrderedList'}; fn = {UL:'makeUnorderedList',OL:'makeOrderedList'};
(parent && parent == type) ? this.squire.removeList() : this.squire[fn[type]](); (parent == type) ? this.squire.removeList() : this.squire[fn[type]]();
} }
testPresenceinSelection(format, validation) { testPresenceinSelection(format, validation) {
@ -412,7 +403,7 @@ class SquireUI
} }
this.mode = mode; // 'wysiwyg' or 'plain' this.mode = mode; // 'wysiwyg' or 'plain'
cl.add('squire-mode-'+mode); cl.add('squire-mode-'+mode);
this.onModeChange && this.onModeChange(); this.onModeChange?.();
setTimeout(()=>this.focus(),1); setTimeout(()=>this.focus(),1);
} }
} }

View file

@ -143,7 +143,7 @@ const
return node.nodeName === tag && Object.entries(attributes).every(([k,v]) => node.getAttribute(k) === v); return node.nodeName === tag && Object.entries(attributes).every(([k,v]) => node.getAttribute(k) === v);
}, },
getClosest = ( node, root, selector ) => { getClosest = ( node, root, selector ) => {
node = (!node || node.closest ? node : node.parentElement); node = (node && !node.closest) ? node.parentElement : node;
node = node && node.closest(selector); node = node && node.closest(selector);
return (node && root.contains(node)) ? node : null; return (node && root.contains(node)) ? node : null;
}, },