Ignore WYSIWYG change on first load (#8603)

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

@@ -6,6 +6,7 @@
 			:init="editorOptions"
 			:disabled="disabled"
 			model-events="change keydown blur focus paste ExecCommand SetContent"
+			@dirty="setDirty"
 			@focusin="setFocus(true)"
 			@focusout="setFocus(false)"
 		/>
@@ -237,6 +238,7 @@ export default defineComponent({
 
 		const editorRef = ref<any | null>(null);
 		const editorElement = ref<ComponentPublicInstance | null>(null);
+		const isEditorDirty = ref(false);
 		const { imageToken } = toRefs(props);
 
 		const { imageDrawerOpen, imageSelection, closeImageDrawer, onImageSelect, saveImage, imageButton } = useImage(
@@ -293,6 +295,7 @@ export default defineComponent({
 				return replaceTokens(props.value, getToken());
 			},
 			set(newValue: string) {
+				if (!isEditorDirty.value) return;
 				if (newValue !== props.value && (props.value === null && newValue === '') === false) {
 					const removeToken = replaceTokens(newValue, props.imageToken ?? null);
 					emit('input', removeToken);
@@ -350,6 +353,7 @@ export default defineComponent({
 			editorOptions,
 			internalValue,
 			setFocus,
+			setDirty,
 			onImageSelect,
 			saveImage,
 			imageDrawerOpen,
@@ -386,6 +390,10 @@ export default defineComponent({
 			editor.ui.registry.addButton('customCode', sourceCodeButton);
 		}
 
+		function setDirty() {
+			isEditorDirty.value = true;
+		}
+
 		function setFocus(val: boolean) {
 			if (editorElement.value == null) return;
 			const body = editorElement.value.$el.parentElement?.querySelector('.tox-tinymce');