Merge pull request #294 from directus/update-wysiwyg

fix focus border and custom formats

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 {}

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
 					),

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 {

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>