From 3b682f5811af02b8fd3f958e229d79398ec3ebe4 Mon Sep 17 00:00:00 2001
From: the-djmaze <>
Date: Mon, 12 Jun 2023 11:45:59 +0200
Subject: [PATCH] Added BIDI to Squire #1158

---
 dev/External/SquireUI.js           | 12 ++++++++++
 vendors/squire/build/squire-raw.js | 36 +++++++++++++++---------------
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/dev/External/SquireUI.js b/dev/External/SquireUI.js
index c22da1d0b..ad59860b0 100644
--- a/dev/External/SquireUI.js
+++ b/dev/External/SquireUI.js
@@ -110,6 +110,18 @@ class SquireUI
 					fontSize: {
 						select: ['11px','13px','16px','20px','24px','30px'],
 						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: {
diff --git a/vendors/squire/build/squire-raw.js b/vendors/squire/build/squire-raw.js
index 6ad14be89..336de30e4 100644
--- a/vendors/squire/build/squire-raw.js
+++ b/vendors/squire/build/squire-raw.js
@@ -196,12 +196,16 @@ const
 		return frag;
 	},
 
-	setStyle = (node, style) => {
-		if (typeof style === 'object') {
-			Object.entries(style).forEach(([k,v]) => node.style[k] = v);
-		} else if (style !== undefined) {
-			node.setAttribute('style', style);
-		}
+	setAttributes = (node, props) => {
+		props && Object.entries(props).forEach(([k,v]) => {
+			if ('style' === k && typeof v === 'object') {
+				Object.entries(v).forEach(([k,v]) => node.style[k] = v);
+			} else if (v != null) {
+				node.setAttribute(k, v);
+			} else {
+				node.removeAttribute(k);
+			}
+		});
 	},
 
 	createElement = (tag, props, children) => {
@@ -210,13 +214,7 @@ const
 			children = props;
 			props = null;
 		}
-		props && Object.entries(props).forEach(([k,v]) => {
-			if ('style' === k) {
-				setStyle(el, v);
-			} else if (v !== undefined) {
-				el.setAttribute(k, v);
-			}
-		});
+		setAttributes(el, props);
 		children && el.append(...children);
 		return el;
 	},
@@ -3520,13 +3518,17 @@ class Squire
 	}
 
 	setStyle(style) {
+		this.setAttribute('style', style);
+	}
+
+	setAttribute(name, value) {
 		let range = this.getSelection();
 		let start = range?.startContainer || {};
 		let end = range ? range.endContainer : 0;
 		// 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);
-			setStyle(start.parentNode, style);
+			setAttributes(start.parentNode, {[name]: value});
 			this.setSelection(range);
 			this._updatePath(range, true);
 		}
@@ -3534,9 +3536,7 @@ class Squire
 		else {
 			this.changeFormat({
 				tag: 'SPAN',
-				attributes: {
-					style: style
-				}
+				attributes: {[name]: value}
 			}, null, range);
 		}
 		return this.focus();