fix: JSON Editor Breaks On Invalid JSON (#5814)

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipePage/RecipePage.vue

@@ -81,7 +81,7 @@
       </v-card>
       <WakelockSwitch />
       <RecipePageComments
-        v-if="!recipe.settings.disableComments && !isEditForm && !isCookMode"
+        v-if="!recipe.settings?.disableComments && !isEditForm && !isCookMode"
         v-model="recipe"
         class="px-1 my-4 d-print-none"
       />
@@ -278,7 +278,7 @@ async function deleteRecipe() {
  * View Preferences
  */
 const landscape = computed(() => {
-  const preferLandscape = recipe.value.settings.landscapeView;
+  const preferLandscape = recipe.value.settings?.landscapeView;
   const smallScreen = !$vuetify.display.smAndUp.value;
 
   if (preferLandscape) {

frontend/components/global/RecipeJsonEditor.vue

@@ -26,10 +26,10 @@ export default defineComponent({
     },
   },
   emits: ["update:modelValue"],
-  setup(_, { emit }) {
+  setup(props, { emit }) {
     function parseEvent(event: any): object {
       if (!event) {
-        return {};
+        return props.modelValue || {};
       }
       try {
         if (event.json) {
@@ -43,11 +43,14 @@ export default defineComponent({
         }
       }
       catch {
-        return {};
+        return props.modelValue || {};
       }
     }
     function onChange(event: any) {
-      emit("update:modelValue", parseEvent(event));
+      const parsed = parseEvent(event);
+      if (parsed !== props.modelValue) {
+        emit("update:modelValue", parsed);
+      }
     }
     return {
       onChange,