From d13ea6041ea39963a1295e29ff634b3b9c77c406 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Mon, 14 Sep 2020 14:56:52 +0200
Subject: [PATCH] fix selecting and custom formats

---
 app/src/interfaces/code/code.vue              |  4 +--
 app/src/interfaces/wysiwyg/index.ts           | 16 +++++++-----
 .../interfaces/wysiwyg/tinymce-overrides.css  | 12 +++------
 app/src/interfaces/wysiwyg/wysiwyg.vue        | 26 ++++++++++++++++---
 4 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/app/src/interfaces/code/code.vue b/app/src/interfaces/code/code.vue
index 0828fb6368..d9c9b826d8 100644
--- a/app/src/interfaces/code/code.vue
+++ b/app/src/interfaces/code/code.vue
@@ -34,7 +34,7 @@ export default defineComponent({
 			default: false,
 		},
 		value: {
-			type: [String, Object],
+			type: [String, Object, Array],
 			default: null,
 		},
 		altOptions: {
@@ -274,7 +274,7 @@ export default defineComponent({
 		};
 
 		function fillTemplate() {
-			if(props.type === 'json') {
+			if (props.type === 'json') {
 				try {
 					emit('input', JSON.parse(props.template));
 				} catch {}
diff --git a/app/src/interfaces/wysiwyg/index.ts b/app/src/interfaces/wysiwyg/index.ts
index 2b222bfeb7..114f3b3f36 100644
--- a/app/src/interfaces/wysiwyg/index.ts
+++ b/app/src/interfaces/wysiwyg/index.ts
@@ -246,13 +246,15 @@ export default defineInterface(({ i18n }) => ({
 				options: {
 					language: 'json',
 					template: JSON.stringify(
-						{
-							title: 'My Custom Format',
-							inline: 'span',
-							classes: 'custom-wrapper',
-							styles: { color: '#00ff00', 'font-size': '20px' },
-							attributes: { title: 'My Custom Wrapper' },
-						},
+						[
+							{
+								title: 'My Custom Format',
+								inline: 'span',
+								classes: 'custom-wrapper',
+								styles: { color: '#00ff00', 'font-size': '20px' },
+								attributes: { title: 'My Custom Wrapper' },
+							},
+						],
 						null,
 						4
 					),
diff --git a/app/src/interfaces/wysiwyg/tinymce-overrides.css b/app/src/interfaces/wysiwyg/tinymce-overrides.css
index 6ac93fd3e5..b5029b72fa 100644
--- a/app/src/interfaces/wysiwyg/tinymce-overrides.css
+++ b/app/src/interfaces/wysiwyg/tinymce-overrides.css
@@ -1,7 +1,8 @@
 /* stylelint-disable font-family-no-missing-generic-family-keyword */
 
 .tox .tox-tbtn {
-	margin: 2px 0 4px 0;
+	margin: 2px 2px 4px 0;
+	color: var(--foreground-normal);
 }
 
 .tox .tox-tbtn svg {
@@ -81,8 +82,8 @@
 	border-color: var(--border-normal-alt);
 }
 
-.tox-tinymce:focus {
-	border-color: var(--primary);
+.tox-tinymce.focus {
+	border-color: var(--primary) !important;
 }
 
 .tox .tox-toolbar,
@@ -108,11 +109,6 @@ body.dark .tox .tox-toolbar__overflow {
 	}
 }
 
-.tox .tox-tbtn {
-	margin-right: 2px;
-	color: var(--foreground-normal);
-}
-
 .tox .tox-tbtn--enabled,
 .tox .tox-tbtn--enabled:hover,
 .tox .tox-tbtn:hover {
diff --git a/app/src/interfaces/wysiwyg/wysiwyg.vue b/app/src/interfaces/wysiwyg/wysiwyg.vue
index cc824a23f6..00d8c0f96d 100644
--- a/app/src/interfaces/wysiwyg/wysiwyg.vue
+++ b/app/src/interfaces/wysiwyg/wysiwyg.vue
@@ -1,5 +1,11 @@
 <template>
-	<Editor ref="editorElement" :init="editorOptions" v-model="_value" />
+	<Editor
+		ref="editorElement"
+		:init="editorOptions"
+		v-model="_value"
+		@onFocusIn="setFocus(true)"
+		@onFocusOut="setFocus(false)"
+	/>
 </template>
 
 <script lang="ts">
@@ -78,11 +84,11 @@ export default defineComponent({
 		},
 		disabled: {
 			type: Boolean,
-			default: false,
+			default: true,
 		},
 	},
 	setup(props, { emit }) {
-		const editorElement = ref<any>(null);
+		const editorElement = ref<Vue | null>(null);
 
 		const _value = computed({
 			get() {
@@ -127,7 +133,19 @@ export default defineComponent({
 			};
 		});
 
-		return { editorElement, editorOptions, _value };
+		return { editorElement, editorOptions, _value, setFocus };
+
+		function setFocus(val: boolean) {
+			if (editorElement.value == null) return;
+			const body = editorElement.value.$el.parentElement?.querySelector('.tox-tinymce');
+
+			if (body == null) return;
+			if (val) {
+				body.classList.add('focus');
+			} else {
+				body.classList.remove('focus');
+			}
+		}
 	},
 });
 </script>