Added BIDI to Squire #1158

This commit is contained in:
the-djmaze 2023-06-12 11:45:59 +02:00
parent 43d885b922
commit 3b682f5811
2 changed files with 30 additions and 18 deletions

View file

@ -110,6 +110,18 @@ class SquireUI
fontSize: { fontSize: {
select: ['11px','13px','16px','20px','24px','30px'], select: ['11px','13px','16px','20px','24px','30px'],
cmd: s => squire.setStyle({ fontSize: s.value }) cmd: s => squire.setStyle({ fontSize: s.value })
},
dir: {
select: [
['LTR','ltr'],
['RTL','rtl'],
['Auto','auto'],
['',''],
],
cmd: s => {
squire.setAttribute('dir', s.value || null);
// squire.setStyle({ 'unicode-bidi': 'plaintext' });
}
} }
}, },
colors: { colors: {

View file

@ -196,12 +196,16 @@ const
return frag; return frag;
}, },
setStyle = (node, style) => { setAttributes = (node, props) => {
if (typeof style === 'object') { props && Object.entries(props).forEach(([k,v]) => {
Object.entries(style).forEach(([k,v]) => node.style[k] = v); if ('style' === k && typeof v === 'object') {
} else if (style !== undefined) { Object.entries(v).forEach(([k,v]) => node.style[k] = v);
node.setAttribute('style', style); } else if (v != null) {
} node.setAttribute(k, v);
} else {
node.removeAttribute(k);
}
});
}, },
createElement = (tag, props, children) => { createElement = (tag, props, children) => {
@ -210,13 +214,7 @@ const
children = props; children = props;
props = null; props = null;
} }
props && Object.entries(props).forEach(([k,v]) => { setAttributes(el, props);
if ('style' === k) {
setStyle(el, v);
} else if (v !== undefined) {
el.setAttribute(k, v);
}
});
children && el.append(...children); children && el.append(...children);
return el; return el;
}, },
@ -3520,13 +3518,17 @@ class Squire
} }
setStyle(style) { setStyle(style) {
this.setAttribute('style', style);
}
setAttribute(name, value) {
let range = this.getSelection(); let range = this.getSelection();
let start = range?.startContainer || {}; let start = range?.startContainer || {};
let end = range ? range.endContainer : 0; let end = range ? range.endContainer : 0;
// When the selection is all the text inside an element, set style on the element itself // When the selection is all the text inside an element, set style on the element itself
if (TEXT_NODE === start?.nodeType && 0 === range.startOffset && start === end && end.length === range.endOffset) { if ('dir' == name || (TEXT_NODE === start?.nodeType && 0 === range.startOffset && start === end && end.length === range.endOffset)) {
this.saveUndoState(range); this.saveUndoState(range);
setStyle(start.parentNode, style); setAttributes(start.parentNode, {[name]: value});
this.setSelection(range); this.setSelection(range);
this._updatePath(range, true); this._updatePath(range, true);
} }
@ -3534,9 +3536,7 @@ class Squire
else { else {
this.changeFormat({ this.changeFormat({
tag: 'SPAN', tag: 'SPAN',
attributes: { attributes: {[name]: value}
style: style
}
}, null, range); }, null, range);
} }
return this.focus(); return this.focus();