From d90fdaf89cd44099896231c87f91c8afbccc0e3c Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 13 Aug 2020 17:34:34 -0400
Subject: [PATCH] Use dropdown multiselect for wysiwyg options

---
 .../v-form/form-field-interface.vue           |  2 +-
 app/src/interfaces/wysiwyg/index.ts           | 36 +++++++++++--------
 app/src/lang/en-US/index.json                 |  2 +-
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/app/src/components/v-form/form-field-interface.vue b/app/src/components/v-form/form-field-interface.vue
index b1c299d835..df8bda089c 100644
--- a/app/src/components/v-form/form-field-interface.vue
+++ b/app/src/components/v-form/form-field-interface.vue
@@ -23,7 +23,7 @@
 		/>
 
 		<v-notice v-else type="warning">
-			{{ $t('interface_not_found', { interface: field.interface }) }}
+			{{ $t('interface_not_found', { interface: field.meta.interface }) }}
 		</v-notice>
 	</div>
 </template>
diff --git a/app/src/interfaces/wysiwyg/index.ts b/app/src/interfaces/wysiwyg/index.ts
index ba2f5ccb6b..9e2430e695 100644
--- a/app/src/interfaces/wysiwyg/index.ts
+++ b/app/src/interfaces/wysiwyg/index.ts
@@ -12,9 +12,7 @@ export default defineInterface(({ i18n }) => ({
 			field: 'toolbar',
 			name: i18n.t('toolbar'),
 			type: 'json',
-			meta: {
-				width: 'full',
-				interface: 'checkboxes',
+			schema: {
 				default_value: [
 					'bold',
 					'italic',
@@ -33,6 +31,10 @@ export default defineInterface(({ i18n }) => ({
 					'code',
 					'fullscreen',
 				],
+			},
+			meta: {
+				width: 'half',
+				interface: 'dropdown-multiselect',
 				options: {
 					choices: [
 						{
@@ -213,7 +215,7 @@ export default defineInterface(({ i18n }) => ({
 						},
 					],
 				},
-			}
+			},
 		},
 		{
 			field: 'font',
@@ -230,7 +232,7 @@ export default defineInterface(({ i18n }) => ({
 						{ text: i18n.t('serif'), value: 'serif' },
 					],
 				},
-			}
+			},
 		},
 		{
 			field: 'customFormats',
@@ -240,26 +242,30 @@ export default defineInterface(({ i18n }) => ({
 				interface: 'code',
 				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' },
-					}, null, 4),
+					template: JSON.stringify(
+						{
+							title: 'My Custom Format',
+							inline: 'span',
+							classes: 'custom-wrapper',
+							styles: { color: '#00ff00', 'font-size': '20px' },
+							attributes: { title: 'My Custom Wrapper' },
+						},
+						null,
+						4
+					),
 				},
-			}
+			},
 		},
 		{
 			field: 'tinymceOverrides',
-			name: i18n.t('tinymce_options_override'),
+			name: i18n.t('options_override'),
 			type: 'json',
 			meta: {
 				interface: 'code',
 				options: {
 					language: 'json',
 				},
-			}
+			},
 		},
 	],
 }));
diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index 4165fa3efa..014e908833 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -711,7 +711,7 @@
 		"directionality": "Directionality"
 	},
 	"custom_formats": "Custom Formats",
-	"tinymce_options_override": "TinyMCE Options Override",
+	"options_override": "Options Override",
 
 	"dropdown": "Dropdown",
 	"dropdown_multiselect": "Dropdown (Multiselect)",