From 1c95eab6d61f7712f550861d9504c1d18420f13c Mon Sep 17 00:00:00 2001
From: djmaze <djmaze@djmaze.lan>
Date: Mon, 16 Aug 2021 18:09:54 +0200
Subject: [PATCH] Bugfix and improve Squire HTML/Plain modes

---
 dev/Common/Utils.js           |  2 +-
 dev/External/SquireUI.js      | 13 ++++++-------
 dev/Styles/User/SquireUI.less |  4 ++++
 dev/View/Popup/Compose.js     | 11 ++++++-----
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/dev/Common/Utils.js b/dev/Common/Utils.js
index 5518073af..0382ebe54 100644
--- a/dev/Common/Utils.js
+++ b/dev/Common/Utils.js
@@ -30,7 +30,7 @@ export function pString(value) {
 export function inFocus() {
 	try {
 		return doc.activeElement && doc.activeElement.matches(
-			'input,textarea,.cke_editable'
+			'input,textarea,[contenteditable]'
 		);
 	} catch (e) {
 		return false;
diff --git a/dev/External/SquireUI.js b/dev/External/SquireUI.js
index b24327422..7abdfcb95 100644
--- a/dev/External/SquireUI.js
+++ b/dev/External/SquireUI.js
@@ -336,7 +336,7 @@ class SquireUI
 		}
 
 		plain.className = 'squire-plain';
-		wysiwyg.className = 'squire-wysiwyg cke_editable';
+		wysiwyg.className = 'squire-wysiwyg';
 		this.mode = ''; // 'plain' | 'wysiwyg'
 		this.__plain = {
 			getRawData: () => this.plain.value,
@@ -349,18 +349,17 @@ class SquireUI
 		this.wysiwyg = wysiwyg;
 
 		toolbar.className = 'squire-toolbar btn-toolbar';
-		let touchTap;
-		for (let group in actions) {
+		let group, action, touchTap;
+		for (group in actions) {
+/*
 			if ('bidi' == group && !rl.settings.app('allowHtmlEditorBitiButtons')) {
 				continue;
 			}
+*/
 			let toolgroup = doc.createElement('div');
 			toolgroup.className = 'btn-group';
 			toolgroup.id = 'squire-toolgroup-'+group;
-			for (let action in actions[group]) {
-				if ('source' == action && !rl.settings.app('allowHtmlEditorSourceButton')) {
-					continue;
-				}
+			for (action in actions[group]) {
 				let cfg = actions[group][action], input, ev = 'click';
 				if (cfg.input) {
 					input = doc.createElement('input');
diff --git a/dev/Styles/User/SquireUI.less b/dev/Styles/User/SquireUI.less
index e7f28dbfd..6f1fd50c5 100644
--- a/dev/Styles/User/SquireUI.less
+++ b/dev/Styles/User/SquireUI.less
@@ -175,3 +175,7 @@ Secondly, we can't rely on MUA's what to do with :empty
 .rl-mobile .b-compose.modal {
 	min-height: calc(100% - 62px);
 }
+
+.RL-PopupsCompose[data-wysiwyg*=Forced] #squire-toolgroup-mode {
+	display: none;
+}
diff --git a/dev/View/Popup/Compose.js b/dev/View/Popup/Compose.js
index e3fb1ff7e..3ad768be6 100644
--- a/dev/View/Popup/Compose.js
+++ b/dev/View/Popup/Compose.js
@@ -130,7 +130,6 @@ class ComposePopupView extends AbstractViewPopup {
 		this.allowContacts = AppUserStore.allowContacts();
 
 		this.bSkipNextHide = false;
-		this.editorDefaultType = SettingsUserStore.editorDefaultType;
 
 		this.capaOpenPGP = PgpUserStore.capaOpenPGP;
 
@@ -716,6 +715,8 @@ class ComposePopupView extends AbstractViewPopup {
 
 		this.autosaveStart();
 
+		this.viewModelDom.dataset.wysiwyg = SettingsUserStore.editorDefaultType();
+
 		if (AppUserStore.composeInEdit()) {
 			type = type || ComposeType.Empty;
 			if (ComposeType.Empty !== type) {
@@ -772,7 +773,7 @@ class ComposePopupView extends AbstractViewPopup {
 	}
 
 	isPlainEditor() {
-		let type = this.editorDefaultType();
+		let type = SettingsUserStore.editorDefaultType();
 		return EditorDefaultType.Html !== type && EditorDefaultType.HtmlForced !== type;
 	}
 
@@ -971,8 +972,8 @@ class ComposePopupView extends AbstractViewPopup {
 				editor.setHtml(sText);
 
 				if (
-					EditorDefaultType.PlainForced === this.editorDefaultType() ||
-					(!message.isHtml() && EditorDefaultType.HtmlForced !== this.editorDefaultType())
+					EditorDefaultType.PlainForced === SettingsUserStore.editorDefaultType() ||
+					(!message.isHtml() && EditorDefaultType.HtmlForced !== SettingsUserStore.editorDefaultType())
 				) {
 					editor.modePlain();
 				}
@@ -1256,7 +1257,7 @@ class ComposePopupView extends AbstractViewPopup {
 		ro.toolbar = dom.querySelector('.b-header-toolbar');
 		ro.els = [dom.querySelector('.textAreaParent'), dom.querySelector('.attachmentAreaParent')];
 
-		this.editor(editor => editor.modeWysiwyg());
+		this.editor(editor => editor[this.isPlainEditor()?'modePlain':'modeWysiwyg']());
 
 		// Fullscreen must be on app, else other popups fail
 		const el = doc.getElementById('rl-app');