Add markdown default view option (directus#23353)

* Add default view option to markdown interface

* Add changeset

* Fix types

.changeset/wise-bikes-suffer.md

@@ -0,0 +1,5 @@
+---
+'@directus/app': minor
+---
+
+Added default view option to the markdown interface to select which view should be shown by default

app/src/interfaces/input-rich-text-md/index.ts

@@ -171,6 +171,24 @@ export default defineInterface({
 					default_value: 'sans-serif',
 				},
 			},
+			{
+				field: 'defaultView',
+				name: '$t:interfaces.input-rich-text-md.default_view',
+				type: 'string',
+				meta: {
+					width: 'half',
+					interface: 'select-dropdown',
+					options: {
+						choices: [
+							{ text: '$t:interfaces.input-rich-text-md.default_view_editor', value: 'editor' },
+							{ text: '$t:interfaces.input-rich-text-md.default_view_preview', value: 'preview' },
+						],
+					},
+				},
+				schema: {
+					default_value: 'editor',
+				},
+			},
 			{
 				field: 'customSyntax',
 				name: '$t:interfaces.input-rich-text-md.customSyntax',

app/src/interfaces/input-rich-text-md/input-rich-text-md.vue

@@ -20,6 +20,7 @@ const props = withDefaults(
 		placeholder?: string;
 		editorFont?: 'sans-serif' | 'serif' | 'monospace';
 		previewFont?: 'sans-serif' | 'serif' | 'monospace';
+		defaultView?: 'editor' | 'preview';
 		toolbar?: string[];
 		customSyntax?: CustomSyntax[];
 		imageToken?: string;
@@ -30,6 +31,7 @@ const props = withDefaults(
 	{
 		editorFont: 'sans-serif',
 		previewFont: 'sans-serif',
+		defaultView: 'editor',
 		toolbar: () => [
 			'heading',
 			'bold',
@@ -60,7 +62,7 @@ const codemirrorEl = ref<HTMLTextAreaElement>();
 let codemirror: CodeMirror.Editor | null = null;
 let previousContent: string | null = null;
 
-const view = ref(['editor']);
+const view = ref(props.defaultView);
 
 const imageDialogOpen = ref(false);
 
@@ -202,14 +204,14 @@ function edit(type: Alteration, options?: Record<string, any>) {
 </script>
 
 <template>
-	<div ref="markdownInterface" class="interface-input-rich-text-md" :class="[view[0], { disabled }]">
+	<div ref="markdownInterface" class="interface-input-rich-text-md" :class="[view, { disabled }]">
 		<div class="toolbar">
-			<template v-if="view[0] !== 'preview'">
+			<template v-if="view !== 'preview'">
 				<v-menu
 					v-if="toolbar?.includes('heading')"
 					show-arrow
 					placement="bottom-start"
-					:class="[{ active: view[0] !== 'preview' }]"
+					:class="[{ active: view !== 'preview' }]"
 				>
 					<template #activator="{ toggle }">
 						<v-button v-tooltip="t('wysiwyg_options.heading')" :disabled="disabled" small icon @click="toggle">
@@ -365,11 +367,17 @@ function edit(type: Alteration, options?: Record<string, any>) {
 
 			<div class="spacer"></div>
 
-			<v-item-group v-model="view" class="view" mandatory rounded>
-				<v-button x-small value="editor" :class="[{ active: view[0] !== 'preview' }]">
+			<v-item-group
+				:model-value="[view]"
+				class="view"
+				mandatory
+				rounded
+				@update:model-value="([value]: ['editor' | 'preview']) => (view = value)"
+			>
+				<v-button x-small value="editor" :class="[{ active: view !== 'preview' }]">
 					{{ t('interfaces.input-rich-text-md.edit') }}
 				</v-button>
-				<v-button x-small value="preview" :class="[{ active: view[0] === 'preview' }]">
+				<v-button x-small value="preview" :class="[{ active: view === 'preview' }]">
 					{{ t('interfaces.input-rich-text-md.preview') }}
 				</v-button>
 			</v-item-group>

app/src/lang/translations/en-US.yaml

@@ -1891,6 +1891,9 @@ interfaces:
     preview: Preview
     editorFont: Editor Font
     previewFont: Preview Font
+    default_view: Default View
+    default_view_editor: Editor
+    default_view_preview: Preview
     customSyntax: Custom Blocks
     customSyntax_label: Add custom syntax types
     customSyntax_add: Add custom syntax