From 203b406d25ace80a6d5337e75967dec2177b923a Mon Sep 17 00:00:00 2001
From: "ciril.tr" <ciroman@gmail.com>
Date: Fri, 24 Dec 2021 03:51:51 +0100
Subject: [PATCH] Add default folder upload to WYSIWYG editors (#7199)

* Add default folder upload to WYSIWYG editors

* Tweak options formatting + translations keys

* Tweak options structure

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
---
 .../interfaces/input-rich-text-html/index.ts  | 547 +++++++++---------
 .../input-rich-text-html.vue                  |   8 +-
 .../interfaces/input-rich-text-md/index.ts    | 445 +++++++-------
 .../input-rich-text-md/input-rich-text-md.vue |   6 +-
 app/src/lang/translations/en-US.yaml          |   3 +
 5 files changed, 527 insertions(+), 482 deletions(-)

diff --git a/app/src/interfaces/input-rich-text-html/index.ts b/app/src/interfaces/input-rich-text-html/index.ts
index 57a5e2742e..75cd30c4a3 100644
--- a/app/src/interfaces/input-rich-text-html/index.ts
+++ b/app/src/interfaces/input-rich-text-html/index.ts
@@ -13,279 +13,296 @@ export default defineInterface({
 	types: ['text'],
 	group: 'standard',
 	preview: PreviewSVG,
-	options: [
-		{
-			field: 'toolbar',
-			name: '$t:interfaces.input-rich-text-html.toolbar',
-			type: 'json',
-			schema: {
-				default_value: [
-					'bold',
-					'italic',
-					'underline',
-					'removeformat',
-					'customLink',
-					'bullist',
-					'numlist',
-					'blockquote',
-					'h1',
-					'h2',
-					'h3',
-					'customImage',
-					'customMedia',
-					'hr',
-					'code',
-					'fullscreen',
-				],
-			},
-			meta: {
-				width: 'half',
-				interface: 'select-multiple-dropdown',
-				options: {
-					choices: [
-						{
-							value: 'aligncenter',
-							text: '$t:wysiwyg_options.aligncenter',
-						},
-						{
-							value: 'alignjustify',
-							text: '$t:wysiwyg_options.alignjustify',
-						},
-						{
-							value: 'alignleft',
-							text: '$t:wysiwyg_options.alignleft',
-						},
-						{
-							value: 'alignnone',
-							text: '$t:wysiwyg_options.alignnone',
-						},
-						{
-							value: 'alignright',
-							text: '$t:wysiwyg_options.alignright',
-						},
-						{
-							value: 'forecolor',
-							text: '$t:wysiwyg_options.forecolor',
-						},
-						{
-							value: 'backcolor',
-							text: '$t:wysiwyg_options.backcolor',
-						},
-						{
-							value: 'bold',
-							text: '$t:wysiwyg_options.bold',
-						},
-						{
-							value: 'italic',
-							text: '$t:wysiwyg_options.italic',
-						},
-						{
-							value: 'underline',
-							text: '$t:wysiwyg_options.underline',
-						},
-						{
-							value: 'strikethrough',
-							text: '$t:wysiwyg_options.strikethrough',
-						},
-						{
-							value: 'subscript',
-							text: '$t:wysiwyg_options.subscript',
-						},
-						{
-							value: 'superscript',
-							text: '$t:wysiwyg_options.superscript',
-						},
-						{
-							value: 'blockquote',
-							text: '$t:wysiwyg_options.blockquote',
-						},
-						{
-							value: 'bullist',
-							text: '$t:wysiwyg_options.bullist',
-						},
-						{
-							value: 'numlist',
-							text: '$t:wysiwyg_options.numlist',
-						},
-						{
-							value: 'hr',
-							text: '$t:wysiwyg_options.hr',
-						},
-						{
-							value: 'customLink',
-							text: '$t:wysiwyg_options.link',
-						},
-						{
-							value: 'unlink',
-							text: '$t:wysiwyg_options.unlink',
-						},
-						{
-							value: 'customMedia',
-							text: '$t:wysiwyg_options.media',
-						},
-						{
-							value: 'customImage',
-							text: '$t:wysiwyg_options.image',
-						},
-						{
-							value: 'copy',
-							text: '$t:wysiwyg_options.copy',
-						},
-						{
-							value: 'cut',
-							text: '$t:wysiwyg_options.cut',
-						},
-						{
-							value: 'paste',
-							text: '$t:wysiwyg_options.paste',
-						},
-						{
-							value: 'h1',
-							text: '$t:wysiwyg_options.h1',
-						},
-						{
-							value: 'h2',
-							text: '$t:wysiwyg_options.h2',
-						},
-						{
-							value: 'h3',
-							text: '$t:wysiwyg_options.h3',
-						},
-						{
-							value: 'h4',
-							text: '$t:wysiwyg_options.h4',
-						},
-						{
-							value: 'h5',
-							text: '$t:wysiwyg_options.h5',
-						},
-						{
-							value: 'h6',
-							text: '$t:wysiwyg_options.h6',
-						},
-						{
-							value: 'fontselect',
-							text: '$t:wysiwyg_options.fontselect',
-						},
-						{
-							value: 'fontsizeselect',
-							text: '$t:wysiwyg_options.fontsizeselect',
-						},
-						{
-							value: 'indent',
-							text: '$t:wysiwyg_options.indent',
-						},
-						{
-							value: 'outdent',
-							text: '$t:wysiwyg_options.outdent',
-						},
-						{
-							value: 'undo',
-							text: '$t:wysiwyg_options.undo',
-						},
-						{
-							value: 'redo',
-							text: '$t:wysiwyg_options.redo',
-						},
-						{
-							value: 'remove',
-							text: '$t:wysiwyg_options.remove',
-						},
-						{
-							value: 'removeformat',
-							text: '$t:wysiwyg_options.removeformat',
-						},
-						{
-							value: 'selectall',
-							text: '$t:wysiwyg_options.selectall',
-						},
-						{
-							value: 'table',
-							text: '$t:wysiwyg_options.table',
-						},
-						{
-							value: 'visualaid',
-							text: '$t:wysiwyg_options.visualaid',
-						},
-						{
-							value: 'code',
-							text: '$t:wysiwyg_options.source_code',
-						},
-						{
-							value: 'fullscreen',
-							text: '$t:wysiwyg_options.fullscreen',
-						},
-						{
-							value: 'ltr rtl',
-							text: '$t:wysiwyg_options.directionality',
-						},
+	options: {
+		standard: [
+			{
+				field: 'toolbar',
+				name: '$t:interfaces.input-rich-text-html.toolbar',
+				type: 'json',
+				schema: {
+					default_value: [
+						'bold',
+						'italic',
+						'underline',
+						'removeformat',
+						'customLink',
+						'bullist',
+						'numlist',
+						'blockquote',
+						'h1',
+						'h2',
+						'h3',
+						'customImage',
+						'customMedia',
+						'hr',
+						'code',
+						'fullscreen',
 					],
 				},
-			},
-		},
-		{
-			field: 'font',
-			name: '$t:font',
-			type: 'string',
-			meta: {
-				width: 'half',
-				interface: 'select-dropdown',
-				options: {
-					choices: [
-						{ text: '$t:sans_serif', value: 'sans-serif' },
-						{ text: '$t:monospace', value: 'monospace' },
-						{ text: '$t:serif', value: 'serif' },
-					],
-				},
-			},
-			schema: {
-				default_value: 'sans-serif',
-			},
-		},
-		{
-			field: 'customFormats',
-			name: '$t:interfaces.input-rich-text-html.custom_formats',
-			type: 'json',
-			meta: {
-				interface: 'code',
-				options: {
-					language: 'json',
-					template: JSON.stringify(
-						[
+				meta: {
+					width: 'half',
+					interface: 'select-multiple-dropdown',
+					options: {
+						choices: [
 							{
-								title: 'My Custom Format',
-								inline: 'span',
-								classes: 'custom-wrapper',
-								styles: { color: '#00ff00', 'font-size': '20px' },
-								attributes: { title: 'My Custom Wrapper' },
+								value: 'aligncenter',
+								text: '$t:wysiwyg_options.aligncenter',
+							},
+							{
+								value: 'alignjustify',
+								text: '$t:wysiwyg_options.alignjustify',
+							},
+							{
+								value: 'alignleft',
+								text: '$t:wysiwyg_options.alignleft',
+							},
+							{
+								value: 'alignnone',
+								text: '$t:wysiwyg_options.alignnone',
+							},
+							{
+								value: 'alignright',
+								text: '$t:wysiwyg_options.alignright',
+							},
+							{
+								value: 'forecolor',
+								text: '$t:wysiwyg_options.forecolor',
+							},
+							{
+								value: 'backcolor',
+								text: '$t:wysiwyg_options.backcolor',
+							},
+							{
+								value: 'bold',
+								text: '$t:wysiwyg_options.bold',
+							},
+							{
+								value: 'italic',
+								text: '$t:wysiwyg_options.italic',
+							},
+							{
+								value: 'underline',
+								text: '$t:wysiwyg_options.underline',
+							},
+							{
+								value: 'strikethrough',
+								text: '$t:wysiwyg_options.strikethrough',
+							},
+							{
+								value: 'subscript',
+								text: '$t:wysiwyg_options.subscript',
+							},
+							{
+								value: 'superscript',
+								text: '$t:wysiwyg_options.superscript',
+							},
+							{
+								value: 'blockquote',
+								text: '$t:wysiwyg_options.blockquote',
+							},
+							{
+								value: 'bullist',
+								text: '$t:wysiwyg_options.bullist',
+							},
+							{
+								value: 'numlist',
+								text: '$t:wysiwyg_options.numlist',
+							},
+							{
+								value: 'hr',
+								text: '$t:wysiwyg_options.hr',
+							},
+							{
+								value: 'customLink',
+								text: '$t:wysiwyg_options.link',
+							},
+							{
+								value: 'unlink',
+								text: '$t:wysiwyg_options.unlink',
+							},
+							{
+								value: 'customMedia',
+								text: '$t:wysiwyg_options.media',
+							},
+							{
+								value: 'customImage',
+								text: '$t:wysiwyg_options.image',
+							},
+							{
+								value: 'copy',
+								text: '$t:wysiwyg_options.copy',
+							},
+							{
+								value: 'cut',
+								text: '$t:wysiwyg_options.cut',
+							},
+							{
+								value: 'paste',
+								text: '$t:wysiwyg_options.paste',
+							},
+							{
+								value: 'h1',
+								text: '$t:wysiwyg_options.h1',
+							},
+							{
+								value: 'h2',
+								text: '$t:wysiwyg_options.h2',
+							},
+							{
+								value: 'h3',
+								text: '$t:wysiwyg_options.h3',
+							},
+							{
+								value: 'h4',
+								text: '$t:wysiwyg_options.h4',
+							},
+							{
+								value: 'h5',
+								text: '$t:wysiwyg_options.h5',
+							},
+							{
+								value: 'h6',
+								text: '$t:wysiwyg_options.h6',
+							},
+							{
+								value: 'fontselect',
+								text: '$t:wysiwyg_options.fontselect',
+							},
+							{
+								value: 'fontsizeselect',
+								text: '$t:wysiwyg_options.fontsizeselect',
+							},
+							{
+								value: 'indent',
+								text: '$t:wysiwyg_options.indent',
+							},
+							{
+								value: 'outdent',
+								text: '$t:wysiwyg_options.outdent',
+							},
+							{
+								value: 'undo',
+								text: '$t:wysiwyg_options.undo',
+							},
+							{
+								value: 'redo',
+								text: '$t:wysiwyg_options.redo',
+							},
+							{
+								value: 'remove',
+								text: '$t:wysiwyg_options.remove',
+							},
+							{
+								value: 'removeformat',
+								text: '$t:wysiwyg_options.removeformat',
+							},
+							{
+								value: 'selectall',
+								text: '$t:wysiwyg_options.selectall',
+							},
+							{
+								value: 'table',
+								text: '$t:wysiwyg_options.table',
+							},
+							{
+								value: 'visualaid',
+								text: '$t:wysiwyg_options.visualaid',
+							},
+							{
+								value: 'code',
+								text: '$t:wysiwyg_options.source_code',
+							},
+							{
+								value: 'fullscreen',
+								text: '$t:wysiwyg_options.fullscreen',
+							},
+							{
+								value: 'ltr rtl',
+								text: '$t:wysiwyg_options.directionality',
 							},
 						],
-						null,
-						4
-					),
+					},
 				},
 			},
-		},
-		{
-			field: 'tinymceOverrides',
-			name: '$t:interfaces.input-rich-text-html.options_override',
-			type: 'json',
-			meta: {
-				interface: 'code',
-				options: {
-					language: 'json',
+			{
+				field: 'font',
+				name: '$t:font',
+				type: 'string',
+				meta: {
+					width: 'half',
+					interface: 'select-dropdown',
+					options: {
+						choices: [
+							{ text: '$t:sans_serif', value: 'sans-serif' },
+							{ text: '$t:monospace', value: 'monospace' },
+							{ text: '$t:serif', value: 'serif' },
+						],
+					},
+				},
+				schema: {
+					default_value: 'sans-serif',
 				},
 			},
-		},
-		{
-			field: 'imageToken',
-			name: '$t:interfaces.input-rich-text-md.imageToken',
-			type: 'string',
-			meta: {
-				note: '$t:interfaces.input-rich-text-md.imageToken_label',
-				width: 'full',
-				interface: 'input',
+			{
+				field: 'folder',
+				name: '$t:folder',
+				type: 'uuid',
+				meta: {
+					width: 'half',
+					interface: 'system-folder',
+					note: '$t:interfaces.input-rich-text-html.folder_note',
+				},
+				schema: {
+					default_value: undefined,
+				},
 			},
-		},
-	],
+			{
+				field: 'imageToken',
+				name: '$t:interfaces.input-rich-text-html.imageToken',
+				type: 'string',
+				meta: {
+					note: '$t:interfaces.input-rich-text-html.imageToken_label',
+					width: 'half',
+					interface: 'input',
+				},
+			},
+		],
+		advanced: [
+			{
+				field: 'customFormats',
+				name: '$t:interfaces.input-rich-text-html.custom_formats',
+				type: 'json',
+				meta: {
+					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
+						),
+					},
+				},
+			},
+			{
+				field: 'tinymceOverrides',
+				name: '$t:interfaces.input-rich-text-html.options_override',
+				type: 'json',
+				meta: {
+					interface: 'code',
+					options: {
+						language: 'json',
+					},
+				},
+			},
+		],
+	},
 });
diff --git a/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue b/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
index 559e61a507..98f3b33704 100644
--- a/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
+++ b/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
@@ -85,7 +85,7 @@
 						</div>
 					</div>
 				</template>
-				<v-upload v-else :multiple="false" from-library from-url @input="onImageSelect" />
+				<v-upload v-else :multiple="false" from-library from-url :folder="folder" @input="onImageSelect" />
 			</div>
 
 			<template #actions>
@@ -125,7 +125,7 @@
 								</div>
 							</div>
 						</template>
-						<v-upload v-else :multiple="false" from-library from-url @input="onMediaSelect" />
+						<v-upload v-else :multiple="false" from-library from-url :folder="folder" @input="onMediaSelect" />
 					</v-tab-item>
 					<v-tab-item value="embed">
 						<div class="grid">
@@ -236,6 +236,10 @@ export default defineComponent({
 			type: String,
 			default: undefined,
 		},
+		folder: {
+			type: String,
+			default: undefined,
+		},
 	},
 	emits: ['input'],
 	setup(props, { emit }) {
diff --git a/app/src/interfaces/input-rich-text-md/index.ts b/app/src/interfaces/input-rich-text-md/index.ts
index d7c7a60946..9480dfd4a2 100644
--- a/app/src/interfaces/input-rich-text-md/index.ts
+++ b/app/src/interfaces/input-rich-text-md/index.ts
@@ -11,227 +11,244 @@ export default defineInterface({
 	types: ['text'],
 	group: 'standard',
 	preview: PreviewSVG,
-	options: [
-		{
-			field: 'placeholder',
-			name: '$t:placeholder',
-			type: 'string',
-			meta: {
-				width: 'full',
-				interface: 'input-multiline',
-				options: {
-					placeholder: '$t:enter_a_placeholder',
-				},
-			},
-		},
-		{
-			field: 'editorFont',
-			name: '$t:interfaces.input-rich-text-md.editorFont',
-			type: 'string',
-			meta: {
-				width: 'half',
-				interface: 'select-dropdown',
-				options: {
-					choices: [
-						{ text: '$t:sans_serif', value: 'sans-serif' },
-						{ text: '$t:monospace', value: 'monospace' },
-						{ text: '$t:serif', value: 'serif' },
+	options: {
+		standard: [
+			{
+				field: 'toolbar',
+				name: '$t:interfaces.input-rich-text-html.toolbar',
+				type: 'json',
+				schema: {
+					default_value: [
+						'heading',
+						'bold',
+						'italic',
+						'strikethrough',
+						'bullist',
+						'numlist',
+						'blockquote',
+						'code',
+						'link',
+						'table',
+						'image',
+						'empty',
 					],
 				},
-			},
-			schema: {
-				default_value: 'sans-serif',
-			},
-		},
-		{
-			field: 'previewFont',
-			name: '$t:interfaces.input-rich-text-md.previewFont',
-			type: 'string',
-			meta: {
-				width: 'half',
-				interface: 'select-dropdown',
-				options: {
-					choices: [
-						{ text: '$t:sans_serif', value: 'sans-serif' },
-						{ text: '$t:monospace', value: 'monospace' },
-						{ text: '$t:serif', value: 'serif' },
-					],
+				meta: {
+					width: 'half',
+					interface: 'select-multiple-dropdown',
+					options: {
+						choices: [
+							{
+								value: 'heading',
+								text: '$t:wysiwyg_options.heading',
+							},
+							{
+								value: 'bold',
+								text: '$t:wysiwyg_options.bold',
+							},
+							{
+								value: 'italic',
+								text: '$t:wysiwyg_options.italic',
+							},
+							{
+								value: 'strikethrough',
+								text: '$t:wysiwyg_options.strikethrough',
+							},
+							{
+								value: 'blockquote',
+								text: '$t:wysiwyg_options.blockquote',
+							},
+							{
+								value: 'bullist',
+								text: '$t:wysiwyg_options.bullist',
+							},
+							{
+								value: 'numlist',
+								text: '$t:wysiwyg_options.numlist',
+							},
+							{
+								value: 'table',
+								text: '$t:wysiwyg_options.table',
+							},
+							{
+								value: 'code',
+								text: '$t:wysiwyg_options.source_code',
+							},
+							{
+								value: 'image',
+								text: '$t:wysiwyg_options.image',
+							},
+							{
+								value: 'link',
+								text: '$t:wysiwyg_options.link',
+							},
+						],
+					},
 				},
 			},
-			schema: {
-				default_value: 'sans-serif',
-			},
-		},
-		{
-			field: 'toolbar',
-			name: '$t:interfaces.input-rich-text-html.toolbar',
-			type: 'json',
-			schema: {
-				default_value: [
-					'heading',
-					'bold',
-					'italic',
-					'strikethrough',
-					'bullist',
-					'numlist',
-					'blockquote',
-					'code',
-					'link',
-					'table',
-					'image',
-					'empty',
-				],
-			},
-			meta: {
-				width: 'half',
-				interface: 'select-multiple-dropdown',
-				options: {
-					choices: [
-						{
-							value: 'heading',
-							text: '$t:wysiwyg_options.heading',
-						},
-						{
-							value: 'bold',
-							text: '$t:wysiwyg_options.bold',
-						},
-						{
-							value: 'italic',
-							text: '$t:wysiwyg_options.italic',
-						},
-						{
-							value: 'strikethrough',
-							text: '$t:wysiwyg_options.strikethrough',
-						},
-						{
-							value: 'blockquote',
-							text: '$t:wysiwyg_options.blockquote',
-						},
-						{
-							value: 'bullist',
-							text: '$t:wysiwyg_options.bullist',
-						},
-						{
-							value: 'numlist',
-							text: '$t:wysiwyg_options.numlist',
-						},
-						{
-							value: 'table',
-							text: '$t:wysiwyg_options.table',
-						},
-						{
-							value: 'code',
-							text: '$t:wysiwyg_options.source_code',
-						},
-						{
-							value: 'image',
-							text: '$t:wysiwyg_options.image',
-						},
-						{
-							value: 'link',
-							text: '$t:wysiwyg_options.link',
-						},
-					],
+			{
+				field: 'placeholder',
+				name: '$t:placeholder',
+				type: 'string',
+				meta: {
+					width: 'half',
+					interface: 'input',
+					options: {
+						placeholder: '$t:enter_a_placeholder',
+					},
 				},
 			},
-		},
-		{
-			field: 'customSyntax',
-			name: '$t:interfaces.input-rich-text-md.customSyntax',
-			type: 'json',
-			meta: {
-				note: '$t:interfaces.input-rich-text-md.customSyntax_label',
-				width: 'full',
-				interface: 'list',
-				options: {
-					addLabel: '$t:interfaces.input-rich-text-md.customSyntax_add',
-					template: '{{ name }}',
-					fields: [
-						{
-							field: 'name',
-							type: 'string',
-							name: '$t:name',
-							meta: {
-								interface: 'input',
-								width: 'half',
-								options: {
-									placeholder: '$t:name',
-									default: null,
-								},
-							},
-						},
-						{
-							field: 'icon',
-							type: 'string',
-							name: '$t:icon',
-							meta: {
-								interface: 'select-icon',
-								width: 'half',
-							},
-						},
-						{
-							field: 'prefix',
-							type: 'string',
-							name: '$t:prefix',
-							meta: {
-								interface: 'input',
-								width: 'half',
-								options: {
-									placeholder: '$t:prefix',
-									default: null,
-								},
-							},
-						},
-						{
-							field: 'suffix',
-							type: 'string',
-							name: '$t:suffix',
-							meta: {
-								interface: 'input',
-								width: 'half',
-								options: {
-									placeholder: '$t:suffix',
-									default: null,
-								},
-							},
-						},
-						{
-							field: 'box',
-							type: 'string',
-							name: '$t:interfaces.input-rich-text-md.box',
-							meta: {
-								interface: 'select-radio',
-								width: 'half',
-								options: {
-									choices: [
-										{
-											text: '$t:inline',
-											value: 'inline',
-										},
-										{
-											text: '$t:block',
-											value: 'block',
-										},
-									],
-								},
-							},
-							schema: {
-								default_value: 'inline',
-							},
-						},
-					],
+			{
+				field: 'folder',
+				name: '$t:interfaces.system-folder.folder',
+				type: 'uuid',
+				meta: {
+					width: 'half',
+					interface: 'system-folder',
+					note: '$t:interfaces.system-folder.field_hint',
+				},
+				schema: {
+					default_value: undefined,
 				},
 			},
-		},
-		{
-			field: 'imageToken',
-			name: '$t:interfaces.input-rich-text-md.imageToken',
-			type: 'string',
-			meta: {
-				note: '$t:interfaces.input-rich-text-md.imageToken_label',
-				width: 'full',
-				interface: 'input',
+			{
+				field: 'imageToken',
+				name: '$t:interfaces.input-rich-text-md.imageToken',
+				type: 'string',
+				meta: {
+					note: '$t:interfaces.input-rich-text-md.imageToken_label',
+					width: 'half',
+					interface: 'input',
+				},
 			},
-		},
-	],
+		],
+		advanced: [
+			{
+				field: 'editorFont',
+				name: '$t:interfaces.input-rich-text-md.editorFont',
+				type: 'string',
+				meta: {
+					width: 'half',
+					interface: 'select-dropdown',
+					options: {
+						choices: [
+							{ text: '$t:sans_serif', value: 'sans-serif' },
+							{ text: '$t:monospace', value: 'monospace' },
+							{ text: '$t:serif', value: 'serif' },
+						],
+					},
+				},
+				schema: {
+					default_value: 'sans-serif',
+				},
+			},
+			{
+				field: 'previewFont',
+				name: '$t:interfaces.input-rich-text-md.previewFont',
+				type: 'string',
+				meta: {
+					width: 'half',
+					interface: 'select-dropdown',
+					options: {
+						choices: [
+							{ text: '$t:sans_serif', value: 'sans-serif' },
+							{ text: '$t:monospace', value: 'monospace' },
+							{ text: '$t:serif', value: 'serif' },
+						],
+					},
+				},
+				schema: {
+					default_value: 'sans-serif',
+				},
+			},
+			{
+				field: 'customSyntax',
+				name: '$t:interfaces.input-rich-text-md.customSyntax',
+				type: 'json',
+				meta: {
+					note: '$t:interfaces.input-rich-text-md.customSyntax_label',
+					width: 'full',
+					interface: 'list',
+					options: {
+						addLabel: '$t:interfaces.input-rich-text-md.customSyntax_add',
+						template: '{{ name }}',
+						fields: [
+							{
+								field: 'name',
+								type: 'string',
+								name: '$t:name',
+								meta: {
+									interface: 'input',
+									width: 'half',
+									options: {
+										placeholder: '$t:name',
+										default: null,
+									},
+								},
+							},
+							{
+								field: 'icon',
+								type: 'string',
+								name: '$t:icon',
+								meta: {
+									interface: 'select-icon',
+									width: 'half',
+								},
+							},
+							{
+								field: 'prefix',
+								type: 'string',
+								name: '$t:prefix',
+								meta: {
+									interface: 'input',
+									width: 'half',
+									options: {
+										placeholder: '$t:prefix',
+										default: null,
+									},
+								},
+							},
+							{
+								field: 'suffix',
+								type: 'string',
+								name: '$t:suffix',
+								meta: {
+									interface: 'input',
+									width: 'half',
+									options: {
+										placeholder: '$t:suffix',
+										default: null,
+									},
+								},
+							},
+							{
+								field: 'box',
+								type: 'string',
+								name: '$t:interfaces.input-rich-text-md.box',
+								meta: {
+									interface: 'select-radio',
+									width: 'half',
+									options: {
+										choices: [
+											{
+												text: '$t:inline',
+												value: 'inline',
+											},
+											{
+												text: '$t:block',
+												value: 'block',
+											},
+										],
+									},
+								},
+								schema: {
+									default_value: 'inline',
+								},
+							},
+						],
+					},
+				},
+			},
+		],
+	},
 });
diff --git a/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue b/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue
index fb44080ad7..304c37bf0c 100644
--- a/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue
+++ b/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue
@@ -170,7 +170,7 @@
 			<v-card>
 				<v-card-title>{{ t('upload_from_device') }}</v-card-title>
 				<v-card-text>
-					<v-upload from-url from-library @input="onImageUpload" />
+					<v-upload from-url from-library :folder="folder" @input="onImageUpload" />
 				</v-card-text>
 				<v-card-actions>
 					<v-button secondary @click="imageDialogOpen = null">{{ t('cancel') }}</v-button>
@@ -243,6 +243,10 @@ export default defineComponent({
 			type: String,
 			default: undefined,
 		},
+		folder: {
+			type: String,
+			default: undefined,
+		},
 	},
 	emits: ['input'],
 	setup(props, { emit }) {
diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index 16cbe0834d..6bfbae7618 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -1483,6 +1483,9 @@ interfaces:
     toolbar: Toolbar
     custom_formats: Custom Formats
     options_override: Options Override
+    folder_note: Folder for uploaded files. Does not affect existing files.
+    imageToken: Image Token
+    imageToken_label: What (static) token to append to image sources
   input-autocomplete-api:
     input-autocomplete-api: Autocomplete Input (API)
     description: A search typeahead for external API values.