From 7644aa5ffa7d8794b6ebb30a65cb86c35b6f201d Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Wed, 18 Jun 2025 19:34:52 +0000
Subject: [PATCH] migrate JSON editor usage

---
 .../Domain/Recipe/RecipePage/RecipePage.vue        | 14 +++++++-------
 frontend/pages/g/[groupSlug]/r/create/debug.vue    | 12 ++++--------
 frontend/pages/g/[groupSlug]/r/create/html.vue     | 12 +++---------
 3 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
index f91918788..0af83ef6e 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
@@ -9,7 +9,13 @@
           @save="saveRecipe"
           @delete="deleteRecipe"
         />
-        <LazyRecipeJsonEditor v-if="isEditJSON" v-model="recipe" class="mt-10" :options="EDITOR_OPTIONS" />
+        <RecipeJsonEditor
+          v-if="isEditJSON"
+          v-model="recipe"
+          class="mt-10"
+          mode="text"
+          :main-menu-bar="false"
+        />
         <v-card-text v-else>
           <!--
             This is where most of the main content is rendered. Some components include state for both Edit and View modes
@@ -177,12 +183,6 @@ import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.
 import RecipeNotes from "~/components/Domain/Recipe/RecipeNotes.vue";
 import { useNavigationWarning } from "~/composables/use-navigation-warning";
 
-const EDITOR_OPTIONS = {
-  mode: "code",
-  search: false,
-  mainMenuBar: false,
-};
-
 const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
 
 const { $vuetify } = useNuxtApp();
diff --git a/frontend/pages/g/[groupSlug]/r/create/debug.vue b/frontend/pages/g/[groupSlug]/r/create/debug.vue
index 9d66df1f8..1bcb9ea34 100644
--- a/frontend/pages/g/[groupSlug]/r/create/debug.vue
+++ b/frontend/pages/g/[groupSlug]/r/create/debug.vue
@@ -56,16 +56,12 @@
         v-model="debugTreeView"
         :label="$t('recipe.tree-view')"
       />
-      <LazyRecipeJsonEditor
+      <RecipeJsonEditor
         v-model="debugData"
-        class="primary"
-        :options="{
-          mode: debugTreeView ? 'tree' : 'code',
-          search: false,
-          indentation: 4,
-          mainMenuBar: false,
-        }"
         height="700px"
+        :mode="debugTreeView ? 'tree' : 'text'"
+        :main-menu-bar="false"
+        :read-only="true"
       />
     </section>
   </div>
diff --git a/frontend/pages/g/[groupSlug]/r/create/html.vue b/frontend/pages/g/[groupSlug]/r/create/html.vue
index f80d1c42d..ff5ec0279 100644
--- a/frontend/pages/g/[groupSlug]/r/create/html.vue
+++ b/frontend/pages/g/[groupSlug]/r/create/html.vue
@@ -24,12 +24,13 @@
           class="mt-2"
           @change="handleIsEditJson"
         />
-        <LazyRecipeJsonEditor
+        <RecipeJsonEditor
           v-if="isEditJSON"
           v-model="newRecipeData"
           height="250px"
           class="mt-10"
-          :options="EDITOR_OPTIONS"
+          mode="code"
+          :main-menu-bar="false"
         />
         <v-textarea
           v-else
@@ -79,12 +80,6 @@ import { useUserApi } from "~/composables/api";
 import { validators } from "~/composables/use-validators";
 import type { VForm } from "~/types/auto-forms";
 
-const EDITOR_OPTIONS = {
-  mode: "code",
-  search: false,
-  mainMenuBar: false,
-};
-
 export default defineNuxtComponent({
   setup() {
     const state = reactive({
@@ -176,7 +171,6 @@ export default defineNuxtComponent({
     }
 
     return {
-      EDITOR_OPTIONS,
       domUrlForm,
       importKeywordsAsTags,
       stayInEditMode,