From ce4315f97159cf88a441d8f2a24be1344c2a3251 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sat, 22 Oct 2022 12:49:59 -0800
Subject: [PATCH] chore: drop legacy editor (#1755)

* drop legacy editor

* remove unused components
---
 .../Domain/Admin/AdminBackupImportOptions.vue |  79 --
 .../Domain/Admin/AdminEventViewer.vue         | 110 ---
 .../Domain/Recipe/RecipeComments.vue          | 117 ---
 .../Domain/Recipe/RecipeInstructions.vue      | 716 --------------
 .../RecipeOcrEditorPage.vue                   |  11 +-
 .../RecipePageInstructions.vue                |   5 +-
 .../components/Domain/Recipe/RecipeTools.vue  |  89 --
 frontend/pages/recipe/_slug/old.vue           | 903 ------------------
 8 files changed, 9 insertions(+), 2021 deletions(-)
 delete mode 100644 frontend/components/Domain/Admin/AdminBackupImportOptions.vue
 delete mode 100644 frontend/components/Domain/Admin/AdminEventViewer.vue
 delete mode 100644 frontend/components/Domain/Recipe/RecipeComments.vue
 delete mode 100644 frontend/components/Domain/Recipe/RecipeInstructions.vue
 delete mode 100644 frontend/components/Domain/Recipe/RecipeTools.vue
 delete mode 100644 frontend/pages/recipe/_slug/old.vue

diff --git a/frontend/components/Domain/Admin/AdminBackupImportOptions.vue b/frontend/components/Domain/Admin/AdminBackupImportOptions.vue
deleted file mode 100644
index 30bb16675e5b..000000000000
--- a/frontend/components/Domain/Admin/AdminBackupImportOptions.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <div>
-    <v-checkbox
-      v-for="(option, index) in options"
-      :key="index"
-      v-model="option.value"
-      class="mb-n4 mt-n3"
-      dense
-      :label="option.text"
-      @change="emitValue()"
-    ></v-checkbox>
-    <template v-if="importBackup">
-      <v-divider class="my-3"></v-divider>
-      <v-checkbox
-        v-model="forceImport"
-        class="mb-n4"
-        dense
-        :label="$t('settings.remove-existing-entries-matching-imported-entries')"
-        @change="emitValue()"
-      ></v-checkbox>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, useContext } from "@nuxtjs/composition-api";
-
-const UPDATE_EVENT = "input";
-export default defineComponent({
-  props: {
-    importBackup: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(_, context) {
-    const { i18n } = useContext();
-
-    const options = {
-      recipes: {
-        value: true,
-        text: i18n.t("general.recipes"),
-      },
-      users: {
-        value: true,
-        text: i18n.t("user.users"),
-      },
-      groups: {
-        value: true,
-        text: i18n.t("group.groups"),
-      },
-    }
-    const forceImport = false;
-
-    function emitValue() {
-      context.emit(UPDATE_EVENT, {
-        recipes: options.recipes.value,
-        settings: false,
-        themes: false,
-        pages: false,
-        users: options.users.value,
-        groups: options.groups.value,
-        notifications: false,
-        forceImport,
-      });
-    }
-
-    onMounted(() => {
-      emitValue();
-    });
-
-    return {
-      options,
-      forceImport,
-      emitValue,
-    };
-  },
-});
-</script>
diff --git a/frontend/components/Domain/Admin/AdminEventViewer.vue b/frontend/components/Domain/Admin/AdminEventViewer.vue
deleted file mode 100644
index 5e1969d58330..000000000000
--- a/frontend/components/Domain/Admin/AdminEventViewer.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <div>
-    <BaseStatCard :icon="$globals.icons.bellAlert" :color="color">
-      <template #after-heading>
-        <div class="ml-auto text-right">
-          <h2 class="body-3 grey--text font-weight-light">
-            {{ $t("settings.events") }}
-          </h2>
-
-          <h3 class="display-2 font-weight-light text--primary">
-            <small> {{ total }} </small>
-          </h3>
-        </div>
-      </template>
-      <div class="d-flex row py-3 justify-end">
-        <v-btn class="mx-2" small color="error lighten-1" @click="$emit('delete-all')">
-          <v-icon left> {{ $globals.icons.notificationClearAll }} </v-icon> {{ $t("general.clear") }}
-        </v-btn>
-      </div>
-      <template #bottom>
-        <v-virtual-scroll height="290" item-height="70" :items="events">
-          <template #default="{ item }">
-            <v-list-item>
-              <v-list-item-avatar>
-                <v-icon large dark :color="icons[item.category].color">
-                  {{ icons[item.category].icon }}
-                </v-icon>
-              </v-list-item-avatar>
-
-              <v-list-item-content>
-                <v-list-item-title>
-                  {{ item.title }}
-                </v-list-item-title>
-
-                <v-list-item-subtitle>
-                  {{ item.text }}
-                </v-list-item-subtitle>
-                <v-list-item-subtitle>
-                  {{ $d(Date.parse(item.timeStamp), "long") }}
-                </v-list-item-subtitle>
-              </v-list-item-content>
-
-              <v-list-item-action class="ml-auto">
-                <v-btn large icon @click="$emit('delete-item', item.id)">
-                  <v-icon color="error">{{ $globals.icons.delete }}</v-icon>
-                </v-btn>
-              </v-list-item-action>
-            </v-list-item>
-          </template>
-        </v-virtual-scroll>
-      </template>
-    </BaseStatCard>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
-
-export default defineComponent({
-  layout: "admin",
-  props: {
-    events: {
-      type: Array,
-      required: true,
-    },
-    total: {
-      type: Number,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      color: "accent",
-      selectedId: "",
-      icons: {
-        general: {
-          icon: this.$globals.icons.information,
-          color: "info",
-        },
-        recipe: {
-          icon: this.$globals.icons.primary,
-          color: "primary",
-        },
-        backup: {
-          icon: this.$globals.icons.database,
-          color: "primary",
-        },
-        schedule: {
-          icon: this.$globals.icons.calendar,
-          color: "primary",
-        },
-        migration: {
-          icon: this.$globals.icons.backupRestore,
-          color: "primary",
-        },
-        user: {
-          icon: this.$globals.icons.user,
-          color: "accent",
-        },
-        group: {
-          icon: this.$globals.icons.group,
-          color: "accent",
-        },
-      },
-    };
-  },
-});
-</script>
-
-<style scoped></style>
diff --git a/frontend/components/Domain/Recipe/RecipeComments.vue b/frontend/components/Domain/Recipe/RecipeComments.vue
deleted file mode 100644
index 9c8977e14d16..000000000000
--- a/frontend/components/Domain/Recipe/RecipeComments.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-  <div>
-    <v-card-title class="headline pb-3">
-      <v-icon class="mr-2">
-        {{ $globals.icons.commentTextMultipleOutline }}
-      </v-icon>
-      {{ $t("recipe.comments") }}
-    </v-card-title>
-    <v-divider class="mx-2"></v-divider>
-    <div class="d-flex flex-column">
-      <div class="d-flex mt-3" style="gap: 10px">
-        <UserAvatar size="40" :user-id="$auth.user.id" />
-
-        <v-textarea
-          v-model="comment"
-          hide-details=""
-          dense
-          single-line
-          outlined
-          auto-grow
-          rows="2"
-          :placeholder="$t('recipe.join-the-conversation')"
-        >
-        </v-textarea>
-      </div>
-      <div class="ml-auto mt-1">
-        <BaseButton small :disabled="!comment" @click="submitComment">
-          <template #icon>{{ $globals.icons.check }}</template>
-          {{ $t("general.submit") }}
-        </BaseButton>
-      </div>
-    </div>
-    <div v-for="comment in comments" :key="comment.id" class="d-flex my-2" style="gap: 10px">
-      <UserAvatar size="40" :user-id="comment.userId" />
-      <v-card outlined class="flex-grow-1">
-        <v-card-text class="pa-3 pb-0">
-          <p class="">{{ comment.user.username }} • {{ $d(Date.parse(comment.createdAt), "medium") }}</p>
-          {{ comment.text }}
-        </v-card-text>
-        <v-card-actions class="justify-end mt-0 pt-0">
-          <v-btn
-            v-if="$auth.user.id == comment.user.id || $auth.user.admin"
-            color="error"
-            text
-            x-small
-            @click="deleteComment(comment.id)"
-          >
-            {{ $t("general.delete") }}
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, toRefs, onMounted, reactive } from "@nuxtjs/composition-api";
-import { useUserApi } from "~/composables/api";
-import { RecipeCommentOut } from "~/lib/api/types/recipe";
-import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
-
-export default defineComponent({
-  components: {
-    UserAvatar,
-  },
-  props: {
-    slug: {
-      type: String,
-      required: true,
-    },
-    recipeId: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const api = useUserApi();
-
-    const comments = ref<RecipeCommentOut[]>([]);
-
-    const state = reactive({
-      comment: "",
-    });
-
-    onMounted(async () => {
-      const { data } = await api.recipes.comments.byRecipe(props.slug);
-
-      if (data) {
-        comments.value = data;
-      }
-    });
-
-    async function submitComment() {
-      const { data } = await api.recipes.comments.createOne({
-        recipeId: props.recipeId,
-        text: state.comment,
-      });
-
-      if (data) {
-        comments.value.push(data);
-      }
-
-      state.comment = "";
-    }
-
-    async function deleteComment(id: string) {
-      const { response } = await api.recipes.comments.deleteOne(id);
-
-      if (response?.status === 200) {
-        comments.value = comments.value.filter((comment) => comment.id !== id);
-      }
-    }
-
-    return { api, comments, ...toRefs(state), submitComment, deleteComment };
-  },
-});
-</script>
diff --git a/frontend/components/Domain/Recipe/RecipeInstructions.vue b/frontend/components/Domain/Recipe/RecipeInstructions.vue
deleted file mode 100644
index ae761d65bb91..000000000000
--- a/frontend/components/Domain/Recipe/RecipeInstructions.vue
+++ /dev/null
@@ -1,716 +0,0 @@
-<template>
-  <section @keyup.ctrl.90="undoMerge">
-    <!-- Ingredient Link Editor -->
-    <v-dialog v-model="dialog" width="600">
-      <v-card :ripple="false">
-        <v-app-bar dark color="primary" class="mt-n1 mb-3">
-          <v-icon large left>
-            {{ $globals.icons.link }}
-          </v-icon>
-          <v-toolbar-title class="headline"> {{ $t("recipe.ingredient-linker") }} </v-toolbar-title>
-          <v-spacer></v-spacer>
-        </v-app-bar>
-
-        <v-card-text class="pt-4">
-          <p>
-            {{ activeText }}
-          </p>
-          <v-divider class="mb-4"></v-divider>
-          <v-checkbox
-            v-for="ing in unusedIngredients"
-            :key="ing.referenceId"
-            v-model="activeRefs"
-            :value="ing.referenceId"
-            class="mb-n2 mt-n2"
-          >
-            <template #label>
-              <div v-html="parseIngredientText(ing, disableAmount)"></div>
-            </template>
-          </v-checkbox>
-
-          <template v-if="usedIngredients.length > 0">
-            <h4 class="py-3 ml-1">{{ $t("recipe.linked-to-other-step") }}</h4>
-            <v-checkbox
-              v-for="ing in usedIngredients"
-              :key="ing.referenceId"
-              v-model="activeRefs"
-              :value="ing.referenceId"
-              class="mb-n2 mt-n2"
-            >
-              <template #label>
-                <div v-html="parseIngredientText(ing, disableAmount)"></div>
-              </template>
-            </v-checkbox>
-          </template>
-        </v-card-text>
-
-        <v-divider></v-divider>
-
-        <v-card-actions>
-          <BaseButton cancel @click="dialog = false"> </BaseButton>
-          <v-spacer></v-spacer>
-          <BaseButton color="info" @click="autoSetReferences">
-            <template #icon> {{ $globals.icons.robot }}</template>
-            {{ $t("recipe.auto") }}
-          </BaseButton>
-          <BaseButton save @click="setIngredientIds"> </BaseButton>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <div class="d-flex justify-space-between justify-start">
-      <h2 class="mb-4 mt-1">{{ $t("recipe.instructions") }}</h2>
-      <BaseButton v-if="!public && !edit && showCookMode" minor cancel color="primary" @click="toggleCookMode()">
-        <template #icon>
-          {{ $globals.icons.primary }}
-        </template>
-        {{ $t("recipe.cook-mode") }}
-      </BaseButton>
-    </div>
-    <draggable
-      :disabled="!edit"
-      :value="value"
-      handle=".handle"
-      v-bind="{
-        animation: 200,
-        group: 'description',
-        ghostClass: 'ghost',
-      }"
-      @input="updateIndex"
-      @start="drag = true"
-      @end="drag = false"
-    >
-      <TransitionGroup type="transition" :name="!drag ? 'flip-list' : ''">
-        <div v-for="(step, index) in value" :key="step.id" class="list-group-item">
-          <v-app-bar
-            v-if="showTitleEditor[step.id]"
-            class="primary mx-1 mt-6"
-            style="cursor: pointer"
-            dark
-            dense
-            rounded
-            @click="toggleCollapseSection(index)"
-          >
-            <v-toolbar-title v-if="!edit" class="headline">
-              <v-app-bar-title> {{ step.title }} </v-app-bar-title>
-            </v-toolbar-title>
-            <v-text-field
-              v-if="edit"
-              v-model="step.title"
-              class="headline pa-0 mt-5"
-              dense
-              solo
-              flat
-              :placeholder="$t('recipe.section-title')"
-              background-color="primary"
-            >
-            </v-text-field>
-          </v-app-bar>
-          <v-hover v-slot="{ hover }">
-            <v-card
-              class="ma-1"
-              :class="[{ 'on-hover': hover }, isChecked(index)]"
-              :elevation="hover ? 12 : 2"
-              :ripple="false"
-              @click="toggleDisabled(index)"
-            >
-              <v-card-title :class="{ 'pb-0': !isChecked(index) }">
-                <span class="handle">
-                  <v-icon v-if="edit" size="26" class="pb-1">{{ $globals.icons.arrowUpDown }}</v-icon>
-                  {{ $t("recipe.step-index", { step: index + 1 }) }}
-                </span>
-                <template v-if="edit">
-                  <div class="ml-auto">
-                    <BaseButtonGroup
-                      :large="false"
-                      :buttons="[
-                        {
-                          icon: $globals.icons.delete,
-                          text: $tc('general.delete'),
-                          event: 'delete',
-                        },
-                        {
-                          icon: $globals.icons.dotsVertical,
-                          text: '',
-                          event: 'open',
-                          children: [
-                            {
-                              text: 'Toggle Section',
-                              event: 'toggle-section',
-                            },
-                            {
-                              text: 'Link Ingredients',
-                              event: 'link-ingredients',
-                            },
-                            {
-                              text: 'Merge Above',
-                              event: 'merge-above',
-                            },
-                            {
-                              icon: previewStates[index] ? $globals.icons.edit : $globals.icons.eye,
-                              text: previewStates[index] ? 'Edit Markdown' : 'Preview Markdown',
-                              event: 'preview-step',
-                            },
-                          ],
-                        },
-                      ]"
-                      @merge-above="mergeAbove(index - 1, index)"
-                      @toggle-section="toggleShowTitle(step.id)"
-                      @link-ingredients="openDialog(index, step.ingredientReferences, step.text)"
-                      @preview-step="togglePreviewState(index)"
-                      @delete="value.splice(index, 1)"
-                    />
-                  </div>
-                </template>
-                <v-fade-transition>
-                  <v-icon v-show="isChecked(index)" size="24" class="ml-auto" color="success">
-                    {{ $globals.icons.checkboxMarkedCircle }}
-                  </v-icon>
-                </v-fade-transition>
-              </v-card-title>
-
-              <!-- Content -->
-              <v-card-text
-                v-if="edit"
-                :class="{
-                  blur: imageUploadMode,
-                }"
-                @drop.stop.prevent="handleImageDrop(index, $event)"
-                @click="$emit('clickInstructionField', `${index}.text`)"
-              >
-                <MarkdownEditor
-                  v-model="value[index]['text']"
-                  class="mb-2"
-                  :preview.sync="previewStates[index]"
-                  :display-preview="false"
-                  :textarea="{
-                    hint: 'Attach images by dragging & dropping them into the editor',
-                    persistentHint: true,
-                  }"
-                />
-
-                <div
-                  v-for="ing in step.ingredientReferences"
-                  :key="ing.referenceId"
-                  v-html="getIngredientByRefId(ing.referenceId)"
-                />
-              </v-card-text>
-              <v-expand-transition>
-                <div v-show="!isChecked(index) && !edit" class="m-0 p-0">
-                  <v-card-text class="markdown">
-                    <SafeMarkdown class="markdown" :source="step.text" />
-                    <div v-if="cookMode && step.ingredientReferences && step.ingredientReferences.length > 0">
-                      <v-divider class="mb-2"></v-divider>
-                      <div
-                        v-for="ing in step.ingredientReferences"
-                        :key="ing.referenceId"
-                        v-html="getIngredientByRefId(ing.referenceId)"
-                      />
-                    </div>
-                  </v-card-text>
-                </div>
-              </v-expand-transition>
-            </v-card>
-          </v-hover>
-        </div>
-      </TransitionGroup>
-    </draggable>
-  </section>
-</template>
-
-<script lang="ts">
-import draggable from "vuedraggable";
-import {
-  ref,
-  toRefs,
-  reactive,
-  defineComponent,
-  watch,
-  onMounted,
-  useContext,
-  computed,
-} from "@nuxtjs/composition-api";
-import { RecipeStep, IngredientReferences, RecipeIngredient, RecipeAsset } from "~/lib/api/types/recipe";
-import { parseIngredientText } from "~/composables/recipes";
-import { uuid4, detectServerBaseUrl } from "~/composables/use-utils";
-import { useUserApi, useStaticRoutes } from "~/composables/api";
-
-interface MergerHistory {
-  target: number;
-  source: number;
-  targetText: string;
-  sourceText: string;
-}
-
-export default defineComponent({
-  components: {
-    draggable,
-  },
-  props: {
-    value: {
-      type: Array as () => RecipeStep[],
-      required: true,
-    },
-    edit: {
-      type: Boolean,
-      default: true,
-    },
-    ingredients: {
-      type: Array as () => RecipeIngredient[],
-      default: () => [],
-    },
-    disableAmount: {
-      type: Boolean,
-      default: false,
-    },
-    public: {
-      type: Boolean,
-      default: false,
-    },
-    recipeId: {
-      type: String,
-      default: "",
-    },
-    recipeSlug: {
-      type: String,
-      default: "",
-    },
-    assets: {
-      type: Array as () => RecipeAsset[],
-      required: true,
-    },
-    cookMode: {
-      type: Boolean,
-      default: false,
-    },
-    scale: {
-      type: Number,
-      default: 1,
-    },
-  },
-
-  setup(props, context) {
-    const { i18n, req } = useContext();
-    const BASE_URL = detectServerBaseUrl(req);
-
-    console.log("Base URL", BASE_URL);
-
-    const state = reactive({
-      dialog: false,
-      disabledSteps: [] as number[],
-      unusedIngredients: [] as RecipeIngredient[],
-      usedIngredients: [] as RecipeIngredient[],
-    });
-
-    const showTitleEditor = ref<{ [key: string]: boolean }>({});
-
-    const actionEvents = [
-      {
-        text: i18n.t("recipe.toggle-section") as string,
-        event: "toggle-section",
-      },
-      {
-        text: i18n.t("recipe.link-ingredients") as string,
-        event: "link-ingredients",
-      },
-      {
-        text: i18n.t("recipe.merge-above") as string,
-        event: "merge-above",
-      },
-    ];
-
-    // ===============================================================
-    // UI State Helpers
-
-    function validateTitle(title: string | undefined) {
-      return !(title === null || title === "" || title === undefined);
-    }
-
-    watch(props.value, (v) => {
-      state.disabledSteps = [];
-
-      v.forEach((element: RecipeStep) => {
-        if (element.id !== undefined) {
-          showTitleEditor.value[element.id] = validateTitle(element.title);
-        }
-      });
-    });
-
-    const showCookMode = ref(false);
-
-    // Eliminate state with an eager call to watcher?
-    onMounted(() => {
-      props.value.forEach((element: RecipeStep) => {
-        if (element.id !== undefined) {
-          showTitleEditor.value[element.id] = validateTitle(element.title);
-        }
-
-        // showCookMode.value = false;
-        if (showCookMode.value === false && element.ingredientReferences && element.ingredientReferences.length > 0) {
-          showCookMode.value = true;
-        }
-
-        showTitleEditor.value = { ...showTitleEditor.value };
-      });
-    });
-
-    function toggleDisabled(stepIndex: number) {
-      if (props.edit) {
-        return;
-      }
-      if (state.disabledSteps.includes(stepIndex)) {
-        const index = state.disabledSteps.indexOf(stepIndex);
-        if (index !== -1) {
-          state.disabledSteps.splice(index, 1);
-        }
-      } else {
-        state.disabledSteps.push(stepIndex);
-      }
-    }
-
-    function isChecked(stepIndex: number) {
-      if (state.disabledSteps.includes(stepIndex) && !props.edit) {
-        return "disabled-card";
-      }
-    }
-
-    function toggleShowTitle(id: string) {
-      showTitleEditor.value[id] = !showTitleEditor.value[id];
-
-      const temp = { ...showTitleEditor.value };
-      showTitleEditor.value = temp;
-    }
-
-    function updateIndex(data: RecipeStep) {
-      context.emit("input", data);
-    }
-
-    // ===============================================================
-    // Ingredient Linker
-    const activeRefs = ref<string[]>([]);
-    const activeIndex = ref(0);
-    const activeText = ref("");
-
-    function openDialog(idx: number, refs: IngredientReferences[], text: string) {
-      setUsedIngredients();
-      activeText.value = text;
-      activeIndex.value = idx;
-      state.dialog = true;
-      activeRefs.value = refs.map((ref) => ref.referenceId ?? "");
-    }
-
-    function setIngredientIds() {
-      const instruction = props.value[activeIndex.value];
-      instruction.ingredientReferences = activeRefs.value.map((ref) => {
-        return {
-          referenceId: ref,
-        };
-      });
-
-      // Update the visibility of the cook mode button
-      showCookMode.value = false;
-      props.value.forEach((element) => {
-        if (showCookMode.value === false && element.ingredientReferences && element.ingredientReferences.length > 0) {
-          showCookMode.value = true;
-        }
-      });
-      state.dialog = false;
-    }
-
-    function setUsedIngredients() {
-      const usedRefs: { [key: string]: boolean } = {};
-
-      props.value.forEach((element) => {
-        element.ingredientReferences?.forEach((ref) => {
-          if (ref.referenceId !== undefined) {
-            usedRefs[ref.referenceId] = true;
-          }
-        });
-      });
-
-      state.usedIngredients = props.ingredients.filter((ing) => {
-        return ing.referenceId !== undefined && ing.referenceId in usedRefs;
-      });
-
-      state.unusedIngredients = props.ingredients.filter((ing) => {
-        return !(ing.referenceId !== undefined && ing.referenceId in usedRefs);
-      });
-    }
-
-    function autoSetReferences() {
-      // Ignore matching blacklisted words when auto-linking - This is kind of a cludgey implementation. We're blacklisting common words but
-      // other common phrases trigger false positives and I'm not sure how else to approach this. In the future I maybe look at looking directly
-      // at the food variable and seeing if the food is in the instructions, but I still need to support those who don't want to provide the value
-      // and only use the "notes" feature.
-      const blackListedText = [
-        "and",
-        "or",
-        "the",
-        "a",
-        "an",
-        "of",
-        "in",
-        "on",
-        "to",
-        "for",
-        "by",
-        "with",
-        "without",
-        "",
-        " ",
-      ];
-      const blackListedRegexMatch = /\d/gm; // Match Any Number
-
-      // Check if any of the words in the active text match the ingredient text
-      const instructionsByWord = activeText.value.toLowerCase().split(" ");
-
-      instructionsByWord.forEach((word) => {
-        if (blackListedText.includes(word) || word.match(blackListedRegexMatch)) {
-          return;
-        }
-
-        props.ingredients.forEach((ingredient) => {
-          const searchText = parseIngredientText(ingredient, props.disableAmount);
-
-          if (ingredient.referenceId === undefined) {
-            return;
-          }
-
-          if (searchText.toLowerCase().includes(" " + word) && !activeRefs.value.includes(ingredient.referenceId)) {
-            console.info("Word Matched", `'${word}'`, ingredient.note);
-            activeRefs.value.push(ingredient.referenceId);
-          }
-        });
-      });
-    }
-
-    const ingredientLookup = computed(() => {
-      const results: { [key: string]: RecipeIngredient } = {};
-      return props.ingredients.reduce((prev, ing) => {
-        if (ing.referenceId === undefined) {
-          return prev;
-        }
-        prev[ing.referenceId] = ing;
-        return prev;
-      }, results);
-    });
-
-    function getIngredientByRefId(refId: string | undefined) {
-      if (refId === undefined) {
-        return "";
-      }
-
-      const ing = ingredientLookup.value[refId] ?? "";
-      if (ing === "") {
-        return "";
-      }
-      return parseIngredientText(ing, props.disableAmount, props.scale);
-    }
-
-    // ===============================================================
-    // Instruction Merger
-    const mergeHistory = ref<MergerHistory[]>([]);
-
-    function mergeAbove(target: number, source: number) {
-      if (target < 0) {
-        return;
-      }
-
-      mergeHistory.value.push({
-        target,
-        source,
-        targetText: props.value[target].text,
-        sourceText: props.value[source].text,
-      });
-
-      props.value[target].text += " " + props.value[source].text;
-      props.value.splice(source, 1);
-    }
-
-    function undoMerge(event: KeyboardEvent) {
-      if (event.ctrlKey && event.code === "KeyZ") {
-        if (!(mergeHistory.value?.length > 0)) {
-          return;
-        }
-
-        const lastMerge = mergeHistory.value.pop();
-        if (!lastMerge) {
-          return;
-        }
-
-        props.value[lastMerge.target].text = lastMerge.targetText;
-        props.value.splice(lastMerge.source, 0, {
-          id: uuid4(),
-          title: "",
-          text: lastMerge.sourceText,
-          ingredientReferences: [],
-        });
-      }
-    }
-
-    const previewStates = ref<boolean[]>([]);
-
-    function togglePreviewState(index: number) {
-      const temp = [...previewStates.value];
-      temp[index] = !temp[index];
-      previewStates.value = temp;
-    }
-
-    function toggleCollapseSection(index: number) {
-      const sectionSteps: number[] = [];
-
-      for (let i = index; i < props.value.length; i++) {
-        if (!(i === index) && validateTitle(props.value[i].title)) {
-          break;
-        } else {
-          sectionSteps.push(i);
-        }
-      }
-
-      const allCollapsed = sectionSteps.every((idx) => state.disabledSteps.includes(idx));
-
-      if (allCollapsed) {
-        state.disabledSteps = state.disabledSteps.filter((idx) => !sectionSteps.includes(idx));
-      } else {
-        state.disabledSteps = [...state.disabledSteps, ...sectionSteps];
-      }
-    }
-
-    const drag = ref(false);
-
-    // ===============================================================
-    // Image Uploader
-    const api = useUserApi();
-    const { recipeAssetPath } = useStaticRoutes();
-
-    const imageUploadMode = ref(false);
-
-    function toggleDragMode() {
-      console.log("Toggling Drag Mode");
-      imageUploadMode.value = !imageUploadMode.value;
-    }
-
-    onMounted(() => {
-      if (props.assets === undefined) {
-        context.emit("update:assets", []);
-      }
-    });
-
-    async function handleImageDrop(index: number, e: DragEvent) {
-      if (!e.dataTransfer) {
-        return;
-      }
-
-      // Check if the file is an image
-      const file = e.dataTransfer.files[0];
-      if (!file || !file.type.startsWith("image/")) {
-        return;
-      }
-
-      const { data } = await api.recipes.createAsset(props.recipeSlug, {
-        name: file.name,
-        icon: "mdi-file-image",
-        file,
-        extension: file.name.split(".").pop() || "",
-      });
-
-      if (!data) {
-        return; // TODO: Handle error
-      }
-
-      context.emit("update:assets", [...props.assets, data]);
-      const assetUrl = BASE_URL + recipeAssetPath(props.recipeId, data.fileName as string);
-      const text = `<img src="${assetUrl}" height="100%" width="100%"/>`;
-      props.value[index].text += text;
-    }
-
-    function toggleCookMode() {
-      context.emit("cookModeToggle");
-    }
-
-    return {
-      // Image Uploader
-      toggleDragMode,
-      handleImageDrop,
-      imageUploadMode,
-
-      // Rest
-      drag,
-      togglePreviewState,
-      toggleCollapseSection,
-      previewStates,
-      ...toRefs(state),
-      actionEvents,
-      activeRefs,
-      activeText,
-      getIngredientByRefId,
-      showTitleEditor,
-      mergeAbove,
-      openDialog,
-      setIngredientIds,
-      undoMerge,
-      toggleDisabled,
-      isChecked,
-      toggleShowTitle,
-      updateIndex,
-      autoSetReferences,
-      parseIngredientText,
-      toggleCookMode,
-      showCookMode,
-    };
-  },
-});
-</script>
-
-<style lang="css" scoped>
-.v-card--link:before {
-  background: none;
-}
-
-/** Select all li under .markdown class */
-.markdown >>> ul > li {
-  display: list-item;
-  list-style-type: disc !important;
-}
-
-/** Select all li under .markdown class */
-.markdown >>> ol > li {
-  display: list-item;
-}
-
-.flip-list-move {
-  transition: transform 0.5s;
-}
-.no-move {
-  transition: transform 0s;
-}
-.ghost {
-  opacity: 0.5;
-}
-.list-group {
-  min-height: 38px;
-}
-.list-group-item {
-  cursor: move;
-}
-.list-group-item i {
-  cursor: pointer;
-}
-
-.blur {
-  filter: blur(2px);
-}
-
-.upload-overlay {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-</style>
diff --git a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
index f980fac9d761..cb50763ad416 100644
--- a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
+++ b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
@@ -123,15 +123,14 @@
               <RecipeDialogBulkAdd class="ml-1 mr-1" :input-text-prop="canvasSelectedText" @bulk-data="addStep" />
               <BaseButton @click="addStep()"> {{ $t("general.new") }}</BaseButton>
             </div>
-            <RecipeInstructions
+            <RecipePageInstructions
               v-model="recipe.recipeInstructions"
               :ingredients="recipe.recipeIngredient"
               :disable-amount="recipe.settings.disableAmount"
               :edit="true"
-              :recipe-id="recipe.id"
-              :recipe-slug="recipe.slug"
+              :recipe="recipe"
               :assets.sync="recipe.assets"
-              @clickInstructionField="setSingleStep"
+              @click-instruction-field="setSingleStep"
             />
           </v-tab-item>
         </v-tabs-items>
@@ -145,6 +144,7 @@ import { defineComponent, ref, onMounted, reactive, toRefs, useRouter } from "@n
 import { until } from "@vueuse/core";
 import { invoke } from "@vueuse/shared";
 import draggable from "vuedraggable";
+import RecipePageInstructions from "~/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue";
 import { useUserApi, useStaticRoutes } from "~/composables/api";
 import { OcrTsvResponse as NullableOcrTsvResponse } from "~/lib/api/types/ocr";
 import { validators } from "~/composables/use-validators";
@@ -152,7 +152,6 @@ import { Recipe, RecipeIngredient, RecipeStep } from "~/lib/api/types/recipe";
 import { Paths, Leaves, SelectedRecipeLeaves } from "~/types/ocr-types";
 import BannerExperimental from "~/components/global/BannerExperimental.vue";
 import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
-import RecipeInstructions from "~/components/Domain/Recipe/RecipeInstructions.vue";
 import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
 import RecipeOcrEditorPageCanvas from "~/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageCanvas.vue";
 import RecipeOcrEditorPageHelp from "~/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageHelp.vue";
@@ -169,7 +168,7 @@ export default defineComponent({
     draggable,
     BannerExperimental,
     RecipeDialogBulkAdd,
-    RecipeInstructions,
+    RecipePageInstructions,
     RecipeOcrEditorPageCanvas,
     RecipeOcrEditorPageHelp,
   },
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
index df640004010d..fbc189315d3d 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
@@ -171,7 +171,10 @@
 
               <!-- Content -->
               <DropZone @drop="(f) => handleImageDrop(index, f)">
-                <v-card-text v-if="isEditForm">
+                <v-card-text
+                v-if="isEditForm"
+                @click="$emit('click-instruction-field', `${index}.text`)"
+                >
                   <MarkdownEditor
                     v-model="value[index]['text']"
                     class="mb-2"
diff --git a/frontend/components/Domain/Recipe/RecipeTools.vue b/frontend/components/Domain/Recipe/RecipeTools.vue
deleted file mode 100644
index 7b270e261130..000000000000
--- a/frontend/components/Domain/Recipe/RecipeTools.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <div v-if="edit || (value && value.length > 0)">
-    <template v-if="edit">
-      <v-autocomplete
-        v-if="tools"
-        v-model="recipeTools"
-        :items="tools"
-        item-text="name"
-        multiple
-        return-object
-        deletable-chips
-        :prepend-icon="$globals.icons.potSteam"
-        chips
-      >
-        <template #selection="data">
-          <v-chip
-            :key="data.index"
-            small
-            class="ma-1"
-            :input-value="data.selected"
-            close
-            label
-            color="accent"
-            dark
-            @click:close="recipeTools.splice(data.index, 1)"
-          >
-            {{ data.item.name || data.item }}
-          </v-chip>
-        </template>
-        <template #append-outer>
-          <BaseDialog v-model="createDialog" :title="$t('tool.create-new-tool')" @submit="actions.createOne()">
-            <template #activator>
-              <v-btn icon @click="createDialog = true">
-                <v-icon> {{ $globals.icons.create }}</v-icon>
-              </v-btn>
-            </template>
-            <v-card-text>
-              <v-text-field v-model="workingToolData.name" :label="$t('tool.tool-name')"></v-text-field>
-              <v-checkbox v-model="workingToolData.onHand" :label="$t('tool.on-hand-checkbox-label')"></v-checkbox>
-            </v-card-text>
-          </BaseDialog>
-        </template>
-      </v-autocomplete>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, computed } from "@nuxtjs/composition-api";
-import { RecipeTool } from "~/lib/api/types/recipe";
-import { useTools } from "~/composables/recipes";
-
-export default defineComponent({
-  props: {
-    value: {
-      type: Array as () => RecipeTool[],
-      required: true,
-    },
-    edit: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props, context) {
-    const { tools, actions, workingToolData } = useTools();
-
-    const createDialog = ref(false);
-
-    const recipeTools = computed({
-      get: () => {
-        return props.value;
-      },
-      set: (val) => {
-        context.emit("input", val);
-      },
-    });
-
-    return {
-      actions,
-      createDialog,
-      recipeTools,
-      tools,
-      workingToolData,
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/frontend/pages/recipe/_slug/old.vue b/frontend/pages/recipe/_slug/old.vue
deleted file mode 100644
index eeca3406b993..000000000000
--- a/frontend/pages/recipe/_slug/old.vue
+++ /dev/null
@@ -1,903 +0,0 @@
-<template>
-  <v-container
-    :class="{
-      'pa-0': $vuetify.breakpoint.smAndDown,
-    }"
-  >
-    <v-card v-if="skeleton" :color="`white ${false ? 'darken-2' : 'lighten-4'}`" class="pa-3">
-      <v-skeleton-loader class="mx-auto" height="700px" type="card"></v-skeleton-loader>
-    </v-card>
-    <v-card v-else-if="recipe" :flat="$vuetify.breakpoint.smAndDown" class="d-print-none">
-      <!-- Recipe Header -->
-      <div class="d-flex justify-end flex-wrap align-stretch">
-        <v-card v-if="!enableLandscape" width="50%" flat class="d-flex flex-column justify-center align-center">
-          <v-card-text>
-            <v-card-title class="headline pa-0 flex-column align-center">
-              {{ recipe.name }}
-              <RecipeRating :key="recipe.slug" :value="recipe.rating" :name="recipe.name" :slug="recipe.slug" />
-            </v-card-title>
-            <v-divider class="my-2"></v-divider>
-            <SafeMarkdown :source="recipe.description" />
-            <v-divider></v-divider>
-            <div class="d-flex justify-center mt-5">
-              <RecipeTimeCard
-                class="d-flex justify-center flex-wrap"
-                :class="true ? undefined : 'force-bottom'"
-                :prep-time="recipe.prepTime"
-                :total-time="recipe.totalTime"
-                :perform-time="recipe.performTime"
-              />
-            </div>
-          </v-card-text>
-        </v-card>
-        <v-img
-          :key="imageKey"
-          :max-width="enableLandscape ? null : '50%'"
-          min-height="50"
-          :height="hideImage ? undefined : imageHeight"
-          :src="recipeImage(recipe.id, recipe.image, imageKey)"
-          class="d-print-none"
-          @error="hideImage = true"
-        >
-        </v-img>
-      </div>
-      <v-divider></v-divider>
-      <RecipeActionMenu
-        v-model="form"
-        :slug="recipe.slug"
-        :locked="$auth.user.id !== recipe.userId && recipe.settings.locked"
-        :name="recipe.name"
-        :logged-in="$auth.loggedIn"
-        :open="form"
-        :recipe-id="recipe.id"
-        class="ml-auto mt-n8 pb-4"
-        @close="closeEditor"
-        @json="toggleJson"
-        @edit="toggleEdit"
-        @save="updateRecipe(recipe.slug, recipe)"
-        @delete="deleteRecipe(recipe.slug)"
-        @print="printRecipe"
-      />
-
-      <!--  Editors  -->
-      <LazyRecipeJsonEditor v-if="jsonEditor" v-model="recipe" class="mt-10" :options="jsonEditorOptions" />
-      <div v-else>
-        <v-card-text
-          :class="{
-            'px-2': $vuetify.breakpoint.smAndDown,
-          }"
-        >
-          <div v-if="form" class="d-flex justify-start align-center">
-            <RecipeImageUploadBtn class="my-1" :slug="recipe.slug" @upload="uploadImage" @refresh="imageKey++" />
-            <RecipeSettingsMenu
-              class="my-1 mx-1"
-              :value="recipe.settings"
-              :is-owner="recipe.userId == $auth.user.id"
-              @upload="uploadImage"
-            />
-          </div>
-          <!-- Recipe Title Section -->
-          <template v-if="!form && enableLandscape">
-            <v-card-title class="px-0 py-2 ma-0 headline">
-              {{ recipe.name }}
-            </v-card-title>
-            <SafeMarkdown :source="recipe.description" />
-
-            <div class="pb-2 d-flex justify-center flex-wrap">
-              <RecipeTimeCard
-                class="d-flex justify-center flex-wrap"
-                :prep-time="recipe.prepTime"
-                :total-time="recipe.totalTime"
-                :perform-time="recipe.performTime"
-              />
-              <RecipeRating
-                v-if="enableLandscape && $vuetify.breakpoint.smAndDown"
-                :key="recipe.slug"
-                :value="recipe.rating"
-                :name="recipe.name"
-                :slug="recipe.slug"
-              />
-            </div>
-            <v-divider></v-divider>
-          </template>
-
-          <template v-else-if="form">
-            <v-text-field
-              v-model="recipe.name"
-              class="my-3"
-              :label="$t('recipe.recipe-name')"
-              :rules="[validators.required]"
-            >
-            </v-text-field>
-
-            <div class="d-flex flex-wrap">
-              <v-text-field v-model="recipe.totalTime" class="mx-2" :label="$t('recipe.total-time')"></v-text-field>
-              <v-text-field v-model="recipe.prepTime" class="mx-2" :label="$t('recipe.prep-time')"></v-text-field>
-              <v-text-field v-model="recipe.performTime" class="mx-2" :label="$t('recipe.perform-time')"></v-text-field>
-            </div>
-
-            <v-textarea v-model="recipe.description" auto-grow min-height="100" :label="$t('recipe.description')">
-            </v-textarea>
-            <v-text-field v-model="recipe.recipeYield" dense :label="$t('recipe.servings')"> </v-text-field>
-          </template>
-
-          <!-- Advanced Editor -->
-          <div v-if="form">
-            <h2 class="mb-4">{{ $t("recipe.ingredients") }}</h2>
-            <draggable
-              v-if="recipe.recipeIngredient.length > 0"
-              v-model="recipe.recipeIngredient"
-              handle=".handle"
-              v-bind="{
-                animation: 200,
-                group: 'description',
-                disabled: false,
-                ghostClass: 'ghost',
-              }"
-              @start="drag = true"
-              @end="drag = false"
-            >
-              <TransitionGroup type="transition" :name="!drag ? 'flip-list' : ''">
-                <RecipeIngredientEditor
-                  v-for="(ingredient, index) in recipe.recipeIngredient"
-                  :key="ingredient.referenceId"
-                  v-model="recipe.recipeIngredient[index]"
-                  class="list-group-item"
-                  :disable-amount="recipe.settings.disableAmount"
-                  @delete="recipe.recipeIngredient.splice(index, 1)"
-                />
-              </TransitionGroup>
-            </draggable>
-            <v-skeleton-loader v-else boilerplate elevation="2" type="list-item"> </v-skeleton-loader>
-            <div class="d-flex justify-end mt-2">
-              <v-tooltip top color="accent">
-                <template #activator="{ on, attrs }">
-                  <span v-on="on">
-                    <BaseButton
-                      :disabled="recipe.settings.disableAmount || hasFoodOrUnit"
-                      color="accent"
-                      :to="`${recipe.slug}/ingredient-parser`"
-                      v-bind="attrs"
-                    >
-                      <template #icon>
-                        {{ $globals.icons.foods }}
-                      </template>
-                      Parse
-                    </BaseButton>
-                  </span>
-                </template>
-                <span>{{ paserToolTip }}</span>
-              </v-tooltip>
-              <RecipeDialogBulkAdd class="ml-1 mr-1" @bulk-data="addIngredient" />
-              <BaseButton @click="addIngredient"> {{ $t("general.new") }} </BaseButton>
-            </div>
-          </div>
-          <div class="d-flex justify-space-between align-center pt-2 pb-3">
-            <v-tooltip v-if="!form && recipe.recipeYield" small top color="secondary darken-1">
-              <template #activator="{ on, attrs }">
-                <RecipeScaleEditButton
-                  v-model.number="scale"
-                  v-bind="attrs"
-                  :recipe-yield="recipe.recipeYield"
-                  :basic-yield="basicYield"
-                  :scaled-yield="scaledYield"
-                  :edit-scale="!recipe.settings.disableAmount && !form"
-                  v-on="on"
-                />
-              </template>
-              <span> {{ $t("recipe.edit-scale") }} </span>
-            </v-tooltip>
-            <v-spacer></v-spacer>
-
-            <RecipeRating
-              v-if="enableLandscape && $vuetify.breakpoint.smAndUp"
-              :key="recipe.slug"
-              :value="recipe.rating"
-              :name="recipe.name"
-              :slug="recipe.slug"
-            />
-          </div>
-
-          <v-row>
-            <v-col v-if="!cookModeToggle || form" cols="12" sm="12" md="4" lg="4">
-              <RecipeIngredients
-                v-if="!form"
-                :value="recipe.recipeIngredient"
-                :scale="scale"
-                :disable-amount="recipe.settings.disableAmount"
-              />
-
-              <!-- Recipe Tools Display -->
-              <div v-if="!form && recipe.tools && recipe.tools.length > 0">
-                <h2 class="mb-2 mt-4">Required Tools</h2>
-                <v-list-item v-for="(tool, index) in recipe.tools" :key="index" dense>
-                  <v-checkbox
-                    v-model="recipe.tools[index].onHand"
-                    hide-details
-                    class="pt-0 my-auto py-auto"
-                    color="secondary"
-                    @change="toolStore.actions.updateOne(recipe.tools[index])"
-                  >
-                  </v-checkbox>
-                  <v-list-item-content>
-                    {{ tool.name }}
-                  </v-list-item-content>
-                </v-list-item>
-              </div>
-
-              <div v-if="$vuetify.breakpoint.mdAndUp" class="mt-5">
-                <!-- Recipe Categories -->
-                <v-card v-if="recipe.recipeCategory.length > 0 || form" class="mt-2">
-                  <v-card-title class="py-2">
-                    {{ $t("recipe.categories") }}
-                  </v-card-title>
-                  <v-divider class="mx-2"></v-divider>
-                  <v-card-text>
-                    <RecipeOrganizerSelector
-                      v-if="form"
-                      v-model="recipe.recipeCategory"
-                      :return-object="true"
-                      :show-add="true"
-                      selector-type="categories"
-                    />
-                    <RecipeChips v-else :items="recipe.recipeCategory" />
-                  </v-card-text>
-                </v-card>
-
-                <!-- Recipe Tags -->
-                <v-card v-if="recipe.tags.length > 0 || form" class="mt-2">
-                  <v-card-title class="py-2">
-                    {{ $t("tag.tags") }}
-                  </v-card-title>
-                  <v-divider class="mx-2"></v-divider>
-                  <v-card-text>
-                    <RecipeOrganizerSelector
-                      v-if="form"
-                      v-model="recipe.tags"
-                      :return-object="true"
-                      :show-add="true"
-                      selector-type="tags"
-                    />
-                    <RecipeChips v-else :items="recipe.tags" url-prefix="tags" />
-                  </v-card-text>
-                </v-card>
-
-                <!-- Recipe Tools Edit -->
-                <v-card v-if="form" class="mt-2">
-                  <v-card-title class="py-2"> Required Tools </v-card-title>
-                  <v-divider class="mx-2"></v-divider>
-                  <v-card-text class="pt-0">
-                    <RecipeOrganizerSelector v-model="recipe.tools" selector-type="tools" />
-                  </v-card-text>
-                </v-card>
-
-                <RecipeNutrition
-                  v-if="recipe.settings.showNutrition"
-                  v-model="recipe.nutrition"
-                  class="mt-10"
-                  :edit="form"
-                />
-                <client-only>
-                  <RecipeAssets
-                    v-if="recipe.settings.showAssets"
-                    v-model="recipe.assets"
-                    :edit="form"
-                    :slug="recipe.slug"
-                    :recipe-id="recipe.id"
-                  />
-                </client-only>
-              </div>
-            </v-col>
-            <v-divider
-              v-if="$vuetify.breakpoint.mdAndUp && !cookModeToggle"
-              class="my-divider"
-              :vertical="true"
-            ></v-divider>
-
-            <v-col cols="12" sm="12" :md="8 + (cookModeToggle ? 1 : 0) * 4" :lg="8 + (cookModeToggle ? 1 : 0) * 4">
-              <RecipeInstructions
-                v-model="recipe.recipeInstructions"
-                :assets.sync="recipe.assets"
-                :ingredients="recipe.recipeIngredient"
-                :disable-amount="recipe.settings.disableAmount"
-                :edit="form"
-                :recipe-id="recipe.id"
-                :recipe-slug="recipe.slug"
-                :cook-mode="cookModeToggle"
-                :scale="scale"
-                @cookModeToggle="cookModeToggle = !cookModeToggle"
-              />
-              <div v-if="form" class="d-flex">
-                <RecipeDialogBulkAdd class="ml-auto my-2 mr-1" @bulk-data="addStep" />
-                <BaseButton class="my-2" @click="addStep()"> {{ $t("general.new") }}</BaseButton>
-              </div>
-
-              <!-- TODO: Somehow fix duplicate code for mobile/desktop -->
-              <div v-if="!$vuetify.breakpoint.mdAndUp" class="mt-5">
-                <!-- Recipe Tools Edit -->
-                <v-card v-if="form">
-                  <v-card-title class="py-2"> Required Tools</v-card-title>
-                  <v-divider class="mx-2"></v-divider>
-                  <v-card-text class="pt-0">
-                    <RecipeTools v-model="recipe.tools" :edit="form" />
-                  </v-card-text>
-                </v-card>
-
-                <!-- Recipe Categories -->
-                <v-card v-if="recipe.recipeCategory.length > 0 || form" class="mt-2">
-                  <v-card-title class="py-2">
-                    {{ $t("recipe.categories") }}
-                  </v-card-title>
-                  <v-divider class="mx-2"></v-divider>
-                  <v-card-text>
-                    <RecipeOrganizerSelector
-                      v-if="form"
-                      v-model="recipe.recipeCategory"
-                      :return-object="true"
-                      :show-add="true"
-                      selector-type="categories"
-                    />
-                    <RecipeChips v-else :items="recipe.recipeCategory" />
-                  </v-card-text>
-                </v-card>
-
-                <!-- Recipe Tags -->
-                <v-card v-if="recipe.tags.length > 0 || form" class="mt-2">
-                  <v-card-title class="py-2">
-                    {{ $t("tag.tags") }}
-                  </v-card-title>
-                  <v-divider class="mx-2"></v-divider>
-                  <v-card-text>
-                    <RecipeOrganizerSelector
-                      v-if="form"
-                      v-model="recipe.tags"
-                      :return-object="true"
-                      :show-add="true"
-                      selector-type="tags"
-                    />
-
-                    <RecipeChips v-else :items="recipe.tags" url-prefix="tags" />
-                  </v-card-text>
-                </v-card>
-
-                <RecipeNutrition
-                  v-if="recipe.settings.showNutrition && !cookModeToggle"
-                  v-model="recipe.nutrition"
-                  class="mt-10"
-                  :edit="form"
-                />
-                <client-only>
-                  <RecipeAssets
-                    v-if="recipe.settings.showAssets && !cookModeToggle"
-                    v-model="recipe.assets"
-                    :edit="form"
-                    :slug="recipe.slug"
-                    :recipe-id="recipe.id"
-                  />
-                </client-only>
-              </div>
-
-              <RecipeNotes v-if="!cookModeToggle" v-model="recipe.notes" :edit="form" />
-            </v-col>
-          </v-row>
-
-          <v-card-actions class="justify-end">
-            <v-text-field
-              v-if="form"
-              v-model="recipe.orgURL"
-              class="mt-10"
-              :label="$t('recipe.original-url')"
-            ></v-text-field>
-            <v-btn
-              v-else-if="recipe.orgURL && !cookModeToggle"
-              dense
-              small
-              :hover="false"
-              type="label"
-              :ripple="false"
-              elevation="0"
-              :href="recipe.orgURL"
-              color="secondary darken-1"
-              target="_blank"
-              class="rounded-sm mr-4"
-            >
-              {{ $t("recipe.original-url") }}
-            </v-btn>
-          </v-card-actions>
-        </v-card-text>
-      </div>
-      <v-card v-if="form && $auth.user.advanced" flat class="ma-2 mb-2">
-        <v-card-title> API Extras </v-card-title>
-        <v-divider class="mx-2"></v-divider>
-        <v-card-text>
-          Recipes extras are a key feature of the Mealie API. They allow you to create custom json key/value pairs
-          within a recipe to reference from 3rd part applications. You can use these keys to contain information to
-          trigger automation or custom messages to relay to your desired device.
-          <v-row v-for="(value, key) in recipe.extras" :key="key" class="mt-1">
-            <v-col cols="8">
-              <v-text-field v-model="recipe.extras[key]" dense :label="key">
-                <template #prepend>
-                  <v-btn color="error" icon class="mt-n4" @click="removeApiExtra(key)">
-                    <v-icon> {{ $globals.icons.delete }} </v-icon>
-                  </v-btn>
-                </template>
-              </v-text-field>
-            </v-col>
-          </v-row>
-        </v-card-text>
-        <v-card-actions class="d-flex">
-          <div style="max-width: 200px">
-            <v-text-field v-model="apiNewKey" label="Message Key"></v-text-field>
-          </div>
-          <BaseButton create small class="ml-5" @click="createApiExtra" />
-        </v-card-actions>
-      </v-card>
-    </v-card>
-    <div
-      v-if="recipe && wakeIsSupported"
-      class="d-print-none d-flex px-2"
-      :class="$vuetify.breakpoint.smAndDown ? 'justify-center' : 'justify-end'"
-    >
-      <v-switch v-model="wakeLock" small label="Keep Screen Awake" />
-    </div>
-
-    <RecipeComments
-      v-if="recipe && !recipe.settings.disableComments && !form && !cookModeToggle"
-      v-model="recipe.comments"
-      :slug="recipe.slug"
-      :recipe-id="recipe.id"
-      class="px-1 my-4 d-print-none"
-    />
-    <RecipePrintView v-if="recipe" :recipe="recipe" />
-  </v-container>
-</template>
-
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  reactive,
-  ref,
-  toRefs,
-  useContext,
-  useMeta,
-  useRoute,
-  useRouter,
-  onMounted,
-} from "@nuxtjs/composition-api";
-import draggable from "vuedraggable";
-import { invoke, until, useWakeLock } from "@vueuse/core";
-import { onUnmounted } from "vue-demi";
-import RecipeOrganizerSelector from "@/components/Domain/Recipe/RecipeOrganizerSelector.vue";
-import RecipeDialogBulkAdd from "@/components/Domain/Recipe//RecipeDialogBulkAdd.vue";
-import { useUserApi, useStaticRoutes } from "~/composables/api";
-import { validators } from "~/composables/use-validators";
-import { useRecipe, useRecipeMeta } from "~/composables/recipes";
-import RecipeActionMenu from "~/components/Domain/Recipe/RecipeActionMenu.vue";
-import RecipeChips from "~/components/Domain/Recipe/RecipeChips.vue";
-import RecipeIngredients from "~/components/Domain/Recipe/RecipeIngredients.vue";
-import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
-import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue";
-import RecipeNutrition from "~/components/Domain/Recipe/RecipeNutrition.vue";
-import RecipeInstructions from "~/components/Domain/Recipe/RecipeInstructions.vue";
-import RecipeNotes from "~/components/Domain/Recipe/RecipeNotes.vue";
-import RecipeImageUploadBtn from "~/components/Domain/Recipe/RecipeImageUploadBtn.vue";
-import RecipeScaleEditButton from "~/components/Domain/Recipe/RecipeScaleEditButton.vue";
-import RecipeSettingsMenu from "~/components/Domain/Recipe/RecipeSettingsMenu.vue";
-import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
-import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
-import RecipeTools from "~/components/Domain/Recipe/RecipeTools.vue";
-import RecipeComments from "~/components/Domain/Recipe/RecipeComments.vue";
-import { Recipe } from "~/lib/api/types/recipe";
-import { uuid4, deepCopy } from "~/composables/use-utils";
-import { useRouteQuery } from "~/composables/use-router";
-import { useToolStore } from "~/composables/store";
-export default defineComponent({
-  components: {
-    draggable,
-    RecipeActionMenu,
-    RecipeAssets: () => {
-      if (process.client) {
-        return import(/* webpackChunkName: "RecipeAssets" */ "~/components/Domain/Recipe/RecipeAssets.vue");
-      }
-    },
-    RecipeOrganizerSelector,
-    RecipeChips,
-    RecipeComments,
-    RecipeDialogBulkAdd,
-    RecipeImageUploadBtn,
-    RecipeIngredientEditor,
-    RecipeIngredients,
-    RecipeInstructions,
-    RecipeNotes,
-    RecipeNutrition,
-    RecipePrintView,
-    RecipeRating,
-    RecipeSettingsMenu,
-    RecipeTimeCard,
-    RecipeTools,
-    RecipeScaleEditButton,
-  },
-  async beforeRouteLeave(_to, _from, next) {
-    const isSame = JSON.stringify(this.recipe) === JSON.stringify(this.originalRecipe);
-
-    if (this.form && !isSame && this.recipe?.slug !== undefined) {
-      if (
-        window.confirm(
-          "You have unsaved changes. Do you want to save before leaving?\n\nOkay to save, Cancel to discard changes."
-        )
-      ) {
-        await this.api.recipes.updateOne(this.recipe.slug, this.recipe);
-      }
-    }
-    next();
-  },
-
-  setup() {
-    const route = useRoute();
-    const router = useRouter();
-    const slug = route.value.params.slug;
-    const api = useUserApi();
-
-    // ===============================================================
-    // Screen Lock
-
-    const { isSupported: wakeIsSupported, isActive, request, release } = useWakeLock();
-
-    const wakeLock = computed({
-      get: () => isActive,
-      set: () => {
-        if (isActive.value) {
-          unlockScreen();
-        } else {
-          lockScreen();
-        }
-      },
-    });
-
-    async function lockScreen() {
-      if (wakeIsSupported) {
-        console.log("Wake Lock Requested");
-        await request("screen");
-      }
-    }
-
-    async function unlockScreen() {
-      if (wakeIsSupported || isActive) {
-        console.log("Wake Lock Released");
-        await release();
-      }
-    }
-
-    // ===============================================================
-    // Edit on Navigate
-
-    const edit = useRouteQuery("edit", "");
-
-    onMounted(() => {
-      lockScreen();
-
-      if (edit.value) {
-        state.form = edit.value === "true";
-      }
-    });
-
-    onUnmounted(() => {
-      unlockScreen();
-    });
-
-    // ===============================================================
-    // Check Before Leaving
-
-    const state = reactive({
-      form: false,
-      scale: 1,
-      scaleTemp: 1,
-      scaleDialog: false,
-      hideImage: false,
-      imageKey: 1,
-      skeleton: false,
-      jsonEditor: false,
-      jsonEditorOptions: {
-        mode: "code",
-        search: false,
-        mainMenuBar: false,
-      },
-      cookModeToggle: false,
-    });
-
-    const { recipe, loading, fetchRecipe } = useRecipe(slug);
-
-    // Manage a deep copy of the recipe so we can detect if changes have occurred and inform
-    // the user if they try to navigate away from the page without saving.
-    const originalRecipe = ref<Recipe | null>(null);
-
-    invoke(async () => {
-      await until(recipe).not.toBeNull();
-      originalRecipe.value = deepCopy(recipe.value);
-    });
-
-    const { recipeImage } = useStaticRoutes();
-
-    // ===========================================================================
-    // Layout Helpers
-
-    const { $vuetify } = useContext();
-    const enableLandscape = computed(() => {
-      const preferLandscape = recipe?.value?.settings?.landscapeView;
-      const smallScreen = !$vuetify.breakpoint.smAndUp;
-
-      if (preferLandscape) {
-        return true;
-      } else if (smallScreen) {
-        return true;
-      }
-
-      return false;
-    });
-
-    const imageHeight = computed(() => {
-      return $vuetify.breakpoint.xs ? "200" : "400";
-    });
-
-    // ===========================================================================
-    // Button Click Event Handlers
-
-    function toggleEdit() {
-      state.jsonEditor = false;
-      state.cookModeToggle = false;
-      state.form = true;
-    }
-
-    async function updateRecipe(slug: string, recipe: Recipe) {
-      const { data } = await api.recipes.updateOne(slug, recipe);
-      state.form = false;
-      state.jsonEditor = false;
-      if (data?.slug) {
-        router.push("/recipe/" + data.slug);
-      }
-    }
-
-    async function deleteRecipe(slug: string) {
-      const { data } = await api.recipes.deleteOne(slug);
-      if (data?.slug) {
-        router.push("/");
-      }
-    }
-
-    function printRecipe() {
-      window.print();
-    }
-
-    async function closeEditor() {
-      state.form = false;
-      state.jsonEditor = false;
-      await fetchRecipe();
-    }
-
-    function toggleJson() {
-      state.jsonEditor = !state.jsonEditor;
-    }
-
-    const scaledYield = computed(() => {
-      const regMatchNum = /\d+/;
-      const yieldString = recipe.value?.recipeYield;
-      const num = yieldString?.match(regMatchNum);
-
-      if (num && num?.length > 0) {
-        const yieldAsInt = parseInt(num[0]);
-        return yieldString?.replace(num[0], String(yieldAsInt * state.scale));
-      }
-
-      return recipe.value?.recipeYield;
-    });
-
-    const basicYield = computed(() => {
-      const regMatchNum = /\d+/;
-      const yieldString = recipe.value?.recipeYield;
-      const num = yieldString?.match(regMatchNum);
-
-      if (num && num?.length > 0) {
-        const yieldAsInt = parseInt(num[0]);
-        return yieldString?.replace(num[0], String(yieldAsInt));
-      }
-
-      return recipe.value?.recipeYield;
-    });
-
-    async function uploadImage(fileObject: File) {
-      if (!recipe.value || !recipe.value.slug) {
-        return;
-      }
-      const newVersion = await api.recipes.updateImage(recipe.value.slug, fileObject);
-      if (newVersion?.data?.image) {
-        recipe.value.image = newVersion.data.image;
-      }
-      state.imageKey++;
-    }
-
-    function addStep(steps: Array<string> | null = null) {
-      if (!recipe.value?.recipeInstructions) {
-        return;
-      }
-
-      if (steps) {
-        const cleanedSteps = steps.map((step) => {
-          return { id: uuid4(), text: step, title: "", ingredientReferences: [] };
-        });
-
-        recipe.value.recipeInstructions.push(...cleanedSteps);
-      } else {
-        recipe.value.recipeInstructions.push({ id: uuid4(), text: "", title: "", ingredientReferences: [] });
-      }
-    }
-
-    function addIngredient(ingredients: Array<string> | null = null) {
-      if (ingredients?.length) {
-        const newIngredients = ingredients.map((x) => {
-          return {
-            referenceId: uuid4(),
-            title: "",
-            note: x,
-            unit: undefined,
-            food: undefined,
-            disableAmount: true,
-            quantity: 1,
-          };
-        });
-
-        if (newIngredients) {
-          recipe?.value?.recipeIngredient?.push(...newIngredients);
-        }
-      } else {
-        recipe?.value?.recipeIngredient?.push({
-          referenceId: uuid4(),
-          title: "",
-          note: "",
-          unit: undefined,
-          food: undefined,
-          disableAmount: true,
-          quantity: 1,
-        });
-      }
-    }
-
-    // ===============================================================
-    // Recipe Tools
-
-    const toolStore = useToolStore();
-
-    const apiNewKey = ref("");
-
-    function createApiExtra() {
-      if (!recipe.value) {
-        return;
-      }
-
-      if (!recipe.value.extras) {
-        recipe.value.extras = {};
-      }
-
-      // check for duplicate keys
-      if (Object.keys(recipe.value.extras).includes(apiNewKey.value)) {
-        return;
-      }
-
-      recipe.value.extras[apiNewKey.value] = "";
-
-      apiNewKey.value = "";
-    }
-
-    function removeApiExtra(key: string) {
-      if (!recipe.value) {
-        return;
-      }
-
-      if (!recipe.value.extras) {
-        return;
-      }
-
-      delete recipe.value.extras[key];
-      recipe.value.extras = { ...recipe.value.extras };
-    }
-
-    // ===============================================================
-    // Metadata
-    const { recipeMeta } = useRecipeMeta();
-    useMeta(recipeMeta(recipe));
-
-    const hasFoodOrUnit = computed(() => {
-      if (!recipe.value) {
-        return false;
-      }
-      if (recipe.value.recipeIngredient) {
-        for (const ingredient of recipe.value.recipeIngredient) {
-          if (ingredient.food || ingredient.unit) {
-            return true;
-          }
-        }
-      }
-
-      return false;
-    });
-
-    const paserToolTip = computed(() => {
-      if (recipe.value?.settings?.disableAmount) {
-        return "Enable ingredient amounts to use this feature";
-      } else if (hasFoodOrUnit.value) {
-        return "Recipes with units or foods defined cannot be parsed.";
-      }
-      return "Parse ingredients";
-    });
-
-    const drag = ref(false);
-
-    // ===============================================================
-    // Scale
-
-    const setScale = (newScale: number) => {
-      state.scale = newScale;
-    };
-
-    return {
-      // Wake Lock
-      drag,
-      wakeIsSupported,
-      isActive,
-      lockScreen,
-      unlockScreen,
-      wakeLock,
-      //
-      hasFoodOrUnit,
-      paserToolTip,
-      originalRecipe,
-      createApiExtra,
-      apiNewKey,
-      enableLandscape,
-      imageHeight,
-      scaledYield,
-      basicYield,
-      toggleJson,
-      ...toRefs(state),
-      recipe,
-      api,
-      loading,
-      addStep,
-      setScale,
-      deleteRecipe,
-      printRecipe,
-      closeEditor,
-      toggleEdit,
-      updateRecipe,
-      uploadImage,
-      validators,
-      recipeImage,
-      addIngredient,
-      removeApiExtra,
-      toolStore,
-    };
-  },
-  head: {},
-});
-</script>
-
-<style lang="css">
-.flip-list-move {
-  transition: transform 0.5s;
-}
-.no-move {
-  transition: transform 0s;
-}
-.ghost {
-  opacity: 0.5;
-}
-.list-group {
-  min-height: 38px;
-}
-.list-group-item {
-  cursor: move;
-}
-.list-group-item i {
-  cursor: pointer;
-}
-</style>