feat: Upgraded Ingredient Parsing Workflow (#6151)

frontend/pages/g/[groupSlug]/r/[slug]/ingredient-parser.vue

@@ -1,445 +0,0 @@
-<template>
-  <v-container v-if="recipe">
-    <v-container>
-      <BaseCardSectionTitle :title="$t('recipe.parser.ingredient-parser')">
-        <div class="mt-4">
-          {{ $t("recipe.parser.explanation") }}
-        </div>
-
-        <div class="my-4">
-          {{ $t("recipe.parser.alerts-explainer") }}
-        </div>
-        <div class="d-flex align-center mb-n4">
-          <div class="mb-4">
-            {{ $t("recipe.parser.select-parser") }}
-          </div>
-          <BaseOverflowButton
-            v-model="parser"
-            btn-class="mx-2 mb-4"
-            :items="availableParsers"
-          />
-        </div>
-      </BaseCardSectionTitle>
-
-      <div
-        class="d-flex mt-n3 mb-4 justify-end"
-        style="gap: 5px"
-      >
-        <BaseButton
-          cancel
-          class="mr-auto"
-          @click="$router.go(-1)"
-        />
-        <BaseButton
-          color="info"
-          :disabled="parserLoading"
-          @click="fetchParsed"
-        >
-          <template #icon>
-            {{ $globals.icons.foods }}
-          </template>
-          {{ $t("recipe.parser.parse-all") }}
-        </BaseButton>
-        <BaseButton
-          save
-          :disabled="parserLoading"
-          @click="saveAll"
-        />
-      </div>
-
-      <div v-if="parserLoading">
-        <AppLoader
-          v-if="parserLoading"
-          :loading="parserLoading"
-          waiting-text=""
-        />
-      </div>
-      <div v-else>
-        <v-expansion-panels
-          v-model="panels"
-          multiple
-        >
-          <VueDraggable
-            v-if="parsedIng.length > 0"
-            v-model="parsedIng"
-            handle=".handle"
-            :delay="250"
-            :delay-on-touch-only="true"
-            :style="{ width: '100%' }"
-            ghost-class="ghost"
-          >
-            <v-expansion-panel
-              v-for="(ing, index) in parsedIng"
-              :key="index"
-            >
-              <v-expansion-panel-title
-                class="my-0 py-0"
-                disable-icon-rotate
-              >
-                <template #default="{ expanded }">
-                  <v-fade-transition>
-                    <span
-                      v-if="!expanded"
-                      key="0"
-                    > {{ ing.input }} </span>
-                  </v-fade-transition>
-                </template>
-                <template #actions>
-                  <v-icon
-                    start
-                    :color="isError(ing) ? 'error' : 'success'"
-                  >
-                    {{ isError(ing) ? $globals.icons.alert : $globals.icons.check }}
-                  </v-icon>
-                  <div
-                    class="my-auto"
-                    :color="isError(ing) ? 'error-text' : 'success-text'"
-                  >
-                    {{ ing.confidence ? asPercentage(ing.confidence.average!) : "" }}
-                  </div>
-                </template>
-              </v-expansion-panel-title>
-              <v-expansion-panel-text class="pb-0 mb-0">
-                <RecipeIngredientEditor
-                  v-model="parsedIng[index].ingredient"
-                  allow-insert-ingredient
-                  :unit-error="errors[index].unitError && errors[index].unitErrorMessage !== ''"
-                  :unit-error-tooltip="$t('recipe.parser.this-unit-could-not-be-parsed-automatically')"
-                  :food-error="errors[index].foodError && errors[index].foodErrorMessage !== ''"
-                  :food-error-tooltip="$t('recipe.parser.this-food-could-not-be-parsed-automatically')"
-                  @insert-above="insertIngredient(index)"
-                  @insert-below="insertIngredient(index + 1)"
-                  @delete="deleteIngredient(index)"
-                />
-                {{ ing.input }}
-                <v-card-actions>
-                  <v-spacer />
-                  <BaseButton
-                    v-if="errors[index].unitError && errors[index].unitErrorMessage !== ''"
-                    color="warning"
-                    size="small"
-                    @click="createUnit(errors[index].unitName, index)"
-                  >
-                    {{ errors[index].unitErrorMessage }}
-                  </BaseButton>
-                  <BaseButton
-                    v-if="errors[index].foodError && errors[index].foodErrorMessage !== ''"
-                    color="warning"
-                    size="small"
-                    @click="createFood(errors[index].foodName, index)"
-                  >
-                    {{ errors[index].foodErrorMessage }}
-                  </BaseButton>
-                </v-card-actions>
-              </v-expansion-panel-text>
-            </v-expansion-panel>
-          </VueDraggable>
-        </v-expansion-panels>
-      </div>
-    </v-container>
-  </v-container>
-</template>
-
-<script lang="ts">
-import { invoke, until } from "@vueuse/core";
-import { VueDraggable } from "vue-draggable-plus";
-import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
-import { alert } from "~/composables/use-toast";
-import { useAppInfo, useUserApi } from "~/composables/api";
-import { useRecipe } from "~/composables/recipes";
-import { useFoodData, useFoodStore, useUnitData, useUnitStore } from "~/composables/store";
-import { useParsingPreferences } from "~/composables/use-users/preferences";
-import { uuid4 } from "~/composables/use-utils";
-import type {
-  CreateIngredientFood,
-  CreateIngredientUnit,
-  IngredientFood,
-  IngredientUnit,
-  ParsedIngredient,
-  RecipeIngredient,
-} from "~/lib/api/types/recipe";
-import type { Parser } from "~/lib/api/user/recipes/recipe";
-
-interface Error {
-  ingredientIndex: number;
-  unitName: string;
-  unitError: boolean;
-  unitErrorMessage: string;
-  foodName: string;
-  foodError: boolean;
-  foodErrorMessage: string;
-}
-
-export default defineNuxtComponent({
-  components: {
-    RecipeIngredientEditor,
-    VueDraggable,
-  },
-  middleware: ["sidebase-auth", "group-only"],
-  setup() {
-    const i18n = useI18n();
-    const $auth = useMealieAuth();
-    const panels = ref<number[]>([]);
-
-    const route = useRoute();
-    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
-
-    const router = useRouter();
-    const slug = route.params.slug as string;
-    const api = useUserApi();
-    const appInfo = useAppInfo();
-
-    const { recipe, loading } = useRecipe(slug);
-    const parserLoading = ref(false);
-
-    invoke(async () => {
-      await until(recipe).not.toBeNull();
-
-      fetchParsed();
-    });
-
-    const ingredients = ref<any[]>([]);
-
-    const availableParsers = computed(() => {
-      return [
-        {
-          text: i18n.t("recipe.parser.natural-language-processor"),
-          value: "nlp",
-        },
-        {
-          text: i18n.t("recipe.parser.brute-parser"),
-          value: "brute",
-        },
-        {
-          text: i18n.t("recipe.parser.openai-parser"),
-          value: "openai",
-          hide: !appInfo.value?.enableOpenai,
-        },
-      ];
-    });
-
-    // =========================================================
-    // Parser Logic
-    const parserPreferences = useParsingPreferences();
-    const parser = ref<Parser>(parserPreferences.value.parser || "nlp");
-    const parsedIng = ref<ParsedIngredient[]>([]);
-    watch(parser, (val) => {
-      parserPreferences.value.parser = val;
-    });
-
-    function processIngredientError(ing: ParsedIngredient, index: number): Error {
-      const unitError = !checkForUnit(ing.ingredient.unit!);
-      const foodError = !checkForFood(ing.ingredient.food!);
-
-      const unit = ing.ingredient.unit?.name || i18n.t("recipe.parser.no-unit");
-      const food = ing.ingredient.food?.name || i18n.t("recipe.parser.no-food");
-
-      let unitErrorMessage = "";
-      let foodErrorMessage = "";
-
-      if (unitError) {
-        if (ing?.ingredient?.unit?.name) {
-          ing.ingredient.unit = undefined;
-          unitErrorMessage = i18n.t("recipe.parser.missing-unit", { unit }).toString();
-        }
-      }
-
-      if (foodError) {
-        if (ing?.ingredient?.food?.name) {
-          ing.ingredient.food = undefined;
-          foodErrorMessage = i18n.t("recipe.parser.missing-food", { food }).toString();
-        }
-      }
-      panels.value.push(index);
-
-      return {
-        ingredientIndex: index,
-        unitName: unit,
-        unitError,
-        unitErrorMessage,
-        foodName: food,
-        foodError,
-        foodErrorMessage,
-      } as Error;
-    }
-
-    async function fetchParsed() {
-      if (!recipe.value || !recipe.value.recipeIngredient) {
-        return;
-      }
-      const raw = recipe.value.recipeIngredient.map(ing => ing.note ?? "");
-
-      parserLoading.value = true;
-      const { data } = await api.recipes.parseIngredients(parser.value, raw);
-      parserLoading.value = false;
-
-      if (data) {
-        // When we send the recipe ingredient text to be parsed, we lose the reference to the original unparsed ingredient.
-        // Generally this is fine, but if the unparsed ingredient had a title, we lose it; we add back the title for each ingredient here.
-        try {
-          for (let i = 0; i < recipe.value.recipeIngredient.length; i++) {
-            data[i].ingredient.title = recipe.value.recipeIngredient[i].title;
-          }
-        }
-        catch {
-          console.error("Index Mismatch Error during recipe ingredient parsing; did the number of ingredients change?");
-        }
-
-        parsedIng.value = data;
-
-        errors.value = data.map((ing, index: number) => {
-          return processIngredientError(ing, index);
-        });
-      }
-      else {
-        alert.error(i18n.t("events.something-went-wrong") as string);
-        parsedIng.value = [];
-      }
-    }
-
-    function isError(ing: ParsedIngredient) {
-      if (!ing?.confidence?.average) {
-        return true;
-      }
-      return !(ing.confidence.average >= 0.75);
-    }
-
-    function asPercentage(num: number | undefined): string {
-      if (!num) {
-        return "0%";
-      }
-
-      return Math.round(num * 100).toFixed(2) + "%";
-    }
-
-    // =========================================================
-    // Food and Ingredient Logic
-
-    const foodStore = useFoodStore();
-    const foodData = useFoodData();
-    const unitStore = useUnitStore();
-    const unitData = useUnitData();
-
-    const errors = ref<Error[]>([]);
-
-    function checkForUnit(unit?: IngredientUnit | CreateIngredientUnit) {
-      return !!unit?.id;
-    }
-
-    function checkForFood(food?: IngredientFood | CreateIngredientFood) {
-      return !!food?.id;
-    }
-
-    async function createFood(foodName: string, index: number) {
-      if (!foodName) {
-        return;
-      }
-
-      foodData.data.name = foodName;
-      parsedIng.value[index].ingredient.food = await foodStore.actions.createOne(foodData.data) || undefined;
-      errors.value[index].foodError = false;
-
-      foodData.reset();
-    }
-
-    async function createUnit(unitName: string | undefined, index: number) {
-      if (!unitName) {
-        return;
-      }
-
-      unitData.data.name = unitName;
-      parsedIng.value[index].ingredient.unit = await unitStore.actions.createOne(unitData.data) || undefined;
-      errors.value[index].unitError = false;
-
-      unitData.reset();
-    }
-
-    function insertIngredient(index: number) {
-      if (!recipe.value?.recipeIngredient) {
-        return;
-      }
-
-      const ing = {
-        input: "",
-        confidence: {},
-        ingredient: {
-          quantity: 1.0,
-          referenceId: uuid4(),
-        },
-      } as ParsedIngredient;
-
-      parsedIng.value.splice(index, 0, ing);
-      recipe.value.recipeIngredient.splice(index, 0, ing.ingredient);
-
-      errors.value = parsedIng.value.map((ing, index: number) => {
-        return processIngredientError(ing, index);
-      });
-    }
-
-    function deleteIngredient(index: number) {
-      parsedIng.value.splice(index, 1);
-      recipe.value?.recipeIngredient?.splice(index, 1);
-
-      errors.value = parsedIng.value.map((ing, index: number) => {
-        return processIngredientError(ing, index);
-      });
-    }
-
-    // =========================================================
-    // Save All Logic
-    async function saveAll() {
-      const ingredients = parsedIng.value.map((ing) => {
-        if (!checkForFood(ing.ingredient.food!)) {
-          ing.ingredient.food = undefined;
-        }
-
-        if (!checkForUnit(ing.ingredient.unit!)) {
-          ing.ingredient.unit = undefined;
-        }
-
-        return {
-          ...ing.ingredient,
-          originalText: ing.input,
-        } as RecipeIngredient;
-      });
-
-      if (!recipe.value || !recipe.value.slug) {
-        return;
-      }
-
-      recipe.value.recipeIngredient = ingredients;
-      const { response } = await api.recipes.updateOne(recipe.value.slug, recipe.value);
-
-      if (response?.status === 200) {
-        router.push(`/g/${groupSlug.value}/r/${recipe.value.slug}`);
-      }
-    }
-
-    useSeoMeta({
-      title: i18n.t("recipe.parser.ingredient-parser"),
-    });
-
-    return {
-      parser,
-      availableParsers,
-      saveAll,
-      createFood,
-      createUnit,
-      deleteIngredient,
-      insertIngredient,
-      errors,
-      actions: foodStore.actions,
-      workingFoodData: foodData,
-      isError,
-      panels,
-      asPercentage,
-      fetchParsed,
-      parsedIng,
-      recipe,
-      loading,
-      parserLoading,
-      ingredients,
-    };
-  },
-});
-</script>

frontend/pages/g/[groupSlug]/r/create/html.vue

@@ -1,7 +1,7 @@
 <template>
   <v-form
     ref="domUrlForm"
-    @submit.prevent="createFromHtmlOrJson(newRecipeData, importKeywordsAsTags, stayInEditMode)"
+    @submit.prevent="createFromHtmlOrJson(newRecipeData, importKeywordsAsTags)"
   >
     <div>
       <v-card-title class="headline">
@@ -48,14 +48,22 @@
         />
         <v-checkbox
           v-model="importKeywordsAsTags"
+          color="primary"
           hide-details
           :label="$t('recipe.import-original-keywords-as-tags')"
         />
         <v-checkbox
           v-model="stayInEditMode"
+          color="primary"
           hide-details
           :label="$t('recipe.stay-in-edit-mode')"
         />
+        <v-checkbox
+          v-model="parseRecipe"
+          color="primary"
+          hide-details
+          :label="$t('recipe.parse-recipe-ingredients-after-import')"
+        />
       </v-card-text>
       <v-card-actions class="justify-center">
         <div style="width: 250px">
@@ -76,6 +84,7 @@
 import type { AxiosResponse } from "axios";
 import { useTagStore } from "~/composables/store/use-tag-store";
 import { useUserApi } from "~/composables/api";
+import { useNewRecipeOptions } from "~/composables/use-new-recipe-options";
 import { validators } from "~/composables/use-validators";
 import type { VForm } from "~/types/auto-forms";
 
@@ -92,28 +101,16 @@ export default defineNuxtComponent({
     const domUrlForm = ref<VForm | null>(null);
 
     const api = useUserApi();
-    const router = useRouter();
     const tags = useTagStore();
 
-    const importKeywordsAsTags = computed({
-      get() {
-        return route.query.use_keywords === "1";
-      },
-      set(v: boolean) {
-        router.replace({ query: { ...route.query, use_keywords: v ? "1" : "0" } });
-      },
-    });
+    const {
+      importKeywordsAsTags,
+      stayInEditMode,
+      parseRecipe,
+      navigateToRecipe,
+    } = useNewRecipeOptions();
 
-    const stayInEditMode = computed({
-      get() {
-        return route.query.edit === "1";
-      },
-      set(v: boolean) {
-        router.replace({ query: { ...route.query, edit: v ? "1" : "0" } });
-      },
-    });
-
-    function handleResponse(response: AxiosResponse<string> | null, edit = false, refreshTags = false) {
+    function handleResponse(response: AxiosResponse<string> | null, refreshTags = false) {
       if (response?.status !== 201) {
         state.error = true;
         state.loading = false;
@@ -123,7 +120,7 @@ export default defineNuxtComponent({
         tags.actions.refresh();
       }
 
-      router.push(`/g/${groupSlug.value}/r/${response.data}?edit=${edit.toString()}`);
+      navigateToRecipe(response.data, groupSlug.value, `/g/${groupSlug.value}/r/create/html`);
     }
 
     const newRecipeData = ref<string | object | null>(null);
@@ -151,7 +148,7 @@ export default defineNuxtComponent({
     }
     handleIsEditJson();
 
-    async function createFromHtmlOrJson(htmlOrJsonData: string | object | null, importKeywordsAsTags: boolean, stayInEditMode: boolean) {
+    async function createFromHtmlOrJson(htmlOrJsonData: string | object | null, importKeywordsAsTags: boolean) {
       if (!htmlOrJsonData || !domUrlForm.value?.validate()) {
         return;
       }
@@ -166,13 +163,14 @@ export default defineNuxtComponent({
 
       state.loading = true;
       const { response } = await api.recipes.createOneByHtmlOrJson(dataString, importKeywordsAsTags);
-      handleResponse(response, stayInEditMode, importKeywordsAsTags);
+      handleResponse(response, importKeywordsAsTags);
     }
 
     return {
       domUrlForm,
       importKeywordsAsTags,
       stayInEditMode,
+      parseRecipe,
       newRecipeData,
       handleIsEditJson,
       createFromHtmlOrJson,

frontend/pages/g/[groupSlug]/r/create/image.vue

@@ -19,7 +19,7 @@
               :multiple="true"
               @uploaded="uploadImages"
             />
-            <div v-if="uploadedImages.length > 0" class="mt-3">
+            <div v-if="uploadedImages.length" class="mt-3">
               <p class="my-2">
                 {{ $t("recipe.crop-and-rotate-the-image") }}
               </p>
@@ -60,20 +60,28 @@
               </v-row>
             </div>
           </v-container>
+          <v-checkbox
+            v-if="uploadedImages.length"
+            v-model="shouldTranslate"
+            color="primary"
+            hide-details
+            :label="$t('recipe.should-translate-description')"
+            :disabled="loading"
+          />
+          <v-checkbox
+            v-if="uploadedImages.length"
+            v-model="parseRecipe"
+            color="primary"
+            hide-details
+            :label="$t('recipe.parse-recipe-ingredients-after-import')"
+            :disabled="loading"
+          />
         </v-card-text>
         <v-card-actions v-if="uploadedImages.length">
           <div class="w-100 d-flex flex-column align-center">
             <p style="width: 250px">
               <BaseButton rounded block type="submit" :loading="loading" />
             </p>
-            <p>
-              <v-checkbox
-                v-model="shouldTranslate"
-                hide-details
-                :label="$t('recipe.should-translate-description')"
-                :disabled="loading"
-              />
-            </p>
             <p v-if="loading" class="mb-0">
               {{
                 uploadedImages.length > 1
@@ -91,6 +99,7 @@
 <script lang="ts">
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
+import { useNewRecipeOptions } from "~/composables/use-new-recipe-options";
 import type { VForm } from "~/types/auto-forms";
 
 export default defineNuxtComponent({
@@ -102,7 +111,6 @@ export default defineNuxtComponent({
     const i18n = useI18n();
     const api = useUserApi();
     const route = useRoute();
-    const router = useRouter();
     const groupSlug = computed(() => route.params.groupSlug || "");
 
     const domUrlForm = ref<VForm | null>(null);
@@ -111,6 +119,8 @@ export default defineNuxtComponent({
     const uploadedImagesPreviewUrls = ref<string[]>([]);
     const shouldTranslate = ref(true);
 
+    const { parseRecipe, navigateToRecipe } = useNewRecipeOptions();
+
     function uploadImages(files: File[]) {
       uploadedImages.value = [...uploadedImages.value, ...files];
       uploadedImageNames.value = [...uploadedImageNames.value, ...files.map(file => file.name)];
@@ -143,7 +153,7 @@ export default defineNuxtComponent({
         state.loading = false;
       }
       else {
-        router.push(`/g/${groupSlug.value}/r/${data}`);
+        navigateToRecipe(data, groupSlug.value, `/g/${groupSlug.value}/r/create/image`);
       }
     }
 
@@ -184,6 +194,7 @@ export default defineNuxtComponent({
       uploadedImages,
       uploadedImagesPreviewUrls,
       shouldTranslate,
+      parseRecipe,
       uploadImages,
       clearImage,
       createRecipe,

frontend/pages/g/[groupSlug]/r/create/url.vue

@@ -2,7 +2,7 @@
   <div>
     <v-form
       ref="domUrlForm"
-      @submit.prevent="createByUrl(recipeUrl, importKeywordsAsTags, stayInEditMode)"
+      @submit.prevent="createByUrl(recipeUrl, importKeywordsAsTags)"
     >
       <div>
         <v-card-title class="headline">
@@ -44,6 +44,12 @@
           hide-details
           :label="$t('recipe.stay-in-edit-mode')"
         />
+        <v-checkbox
+          v-model="parseRecipe"
+          color="primary"
+          hide-details
+          :label="$t('recipe.parse-recipe-ingredients-after-import')"
+        />
         <v-card-actions class="justify-center">
           <div style="width: 250px">
             <BaseButton
@@ -111,6 +117,7 @@
 import type { AxiosResponse } from "axios";
 import { useUserApi } from "~/composables/api";
 import { useTagStore } from "~/composables/store/use-tag-store";
+import { useNewRecipeOptions } from "~/composables/use-new-recipe-options";
 import { validators } from "~/composables/use-validators";
 import type { VForm } from "~/types/auto-forms";
 
@@ -132,10 +139,17 @@ export default defineNuxtComponent({
     const router = useRouter();
     const tags = useTagStore();
 
+    const {
+      importKeywordsAsTags,
+      stayInEditMode,
+      parseRecipe,
+      navigateToRecipe,
+    } = useNewRecipeOptions();
+
     const bulkImporterTarget = computed(() => `/g/${groupSlug.value}/r/create/bulk`);
     const htmlOrJsonImporterTarget = computed(() => `/g/${groupSlug.value}/r/create/html`);
 
-    function handleResponse(response: AxiosResponse<string> | null, edit = false, refreshTags = false) {
+    function handleResponse(response: AxiosResponse<string> | null, refreshTags = false) {
       if (response?.status !== 201) {
         state.error = true;
         state.loading = false;
@@ -145,10 +159,7 @@ export default defineNuxtComponent({
         tags.actions.refresh();
       }
 
-      // we clear the query params first so if the user hits back, they don't re-import the recipe
-      router.replace({ query: {} }).then(
-        () => router.push(`/g/${groupSlug.value}/r/${response.data}?edit=${edit.toString()}`),
-      );
+      navigateToRecipe(response.data, groupSlug.value, `/g/${groupSlug.value}/r/create/url`);
     }
 
     const recipeUrl = computed({
@@ -163,37 +174,35 @@ export default defineNuxtComponent({
       },
     });
 
-    const importKeywordsAsTags = computed({
-      get() {
-        return route.query.use_keywords === "1";
-      },
-      set(v: boolean) {
-        router.replace({ query: { ...route.query, use_keywords: v ? "1" : "0" } });
-      },
-    });
-
-    const stayInEditMode = computed({
-      get() {
-        return route.query.edit === "1";
-      },
-      set(v: boolean) {
-        router.replace({ query: { ...route.query, edit: v ? "1" : "0" } });
-      },
-    });
-
     onMounted(() => {
-      if (!recipeUrl.value) {
-        return;
-      }
+      if (recipeUrl.value && recipeUrl.value.includes("https")) {
+        // Check if we have a query params for using keywords as tags or staying in edit mode.
+        // We don't use these in the app anymore, but older automations such as Bookmarklet might still use them,
+        // and they're easy enough to support.
+        const importKeywordsAsTagsParam = route.query.use_keywords;
+        if (importKeywordsAsTagsParam === "1") {
+          importKeywordsAsTags.value = true;
+        }
+        else if (importKeywordsAsTagsParam === "0") {
+          importKeywordsAsTags.value = false;
+        }
 
-      if (recipeUrl.value.includes("https")) {
-        createByUrl(recipeUrl.value, importKeywordsAsTags.value, stayInEditMode.value);
+        const stayInEditModeParam = route.query.edit;
+        if (stayInEditModeParam === "1") {
+          stayInEditMode.value = true;
+        }
+        else if (stayInEditModeParam === "0") {
+          stayInEditMode.value = false;
+        }
+
+        createByUrl(recipeUrl.value, importKeywordsAsTags.value);
+        return;
       }
     });
 
     const domUrlForm = ref<VForm | null>(null);
 
-    async function createByUrl(url: string | null, importKeywordsAsTags: boolean, stayInEditMode: boolean) {
+    async function createByUrl(url: string | null, importKeywordsAsTags: boolean) {
       if (url === null) {
         return;
       }
@@ -204,7 +213,7 @@ export default defineNuxtComponent({
       }
       state.loading = true;
       const { response } = await api.recipes.createOneByUrl(url, importKeywordsAsTags);
-      handleResponse(response, stayInEditMode, importKeywordsAsTags);
+      handleResponse(response, importKeywordsAsTags);
     }
 
     return {
@@ -213,6 +222,7 @@ export default defineNuxtComponent({
       recipeUrl,
       importKeywordsAsTags,
       stayInEditMode,
+      parseRecipe,
       domUrlForm,
       createByUrl,
       ...toRefs(state),