From 654e10d8effcfb5648172189e2deb8d7ceaf43b7 Mon Sep 17 00:00:00 2001
From: boc-the-git <b.oconnell14@gmail.com>
Date: Mon, 21 Oct 2024 20:55:48 +1100
Subject: [PATCH 1/7] Add summary to recipe instructions

---
 ...4631_add_summary_to_recipe_instructions.py | 34 +++++++++++
 .../RecipePageInstructions.vue                | 59 +++++++++++++++++--
 .../Domain/Recipe/RecipePrintView.vue         |  2 +-
 frontend/lang/messages/en-US.json             |  3 +
 mealie/db/models/recipe/instruction.py        |  3 +-
 mealie/schema/recipe/recipe_step.py           |  3 +-
 6 files changed, 96 insertions(+), 8 deletions(-)
 create mode 100644 alembic/versions/2024-10-20-09.47.46_3897397b4631_add_summary_to_recipe_instructions.py

diff --git a/alembic/versions/2024-10-20-09.47.46_3897397b4631_add_summary_to_recipe_instructions.py b/alembic/versions/2024-10-20-09.47.46_3897397b4631_add_summary_to_recipe_instructions.py
new file mode 100644
index 00000000000..f5b6d73ba00
--- /dev/null
+++ b/alembic/versions/2024-10-20-09.47.46_3897397b4631_add_summary_to_recipe_instructions.py
@@ -0,0 +1,34 @@
+"""'Add summary to recipe instructions'
+
+Revision ID: 3897397b4631
+Revises: 86054b40fd06
+Create Date: 2024-10-20 09:47:46.844436
+
+"""
+
+import sqlalchemy as sa
+
+import mealie.db.migration_types
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision = "3897397b4631"
+down_revision: str | None = "86054b40fd06"
+branch_labels: str | tuple[str, ...] | None = None
+depends_on: str | tuple[str, ...] | None = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table("recipe_instructions", schema=None) as batch_op:
+        batch_op.add_column(sa.Column("summary", sa.String(), nullable=True))
+
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table("recipe_instructions", schema=None) as batch_op:
+        batch_op.drop_column("summary")
+
+    # ### end Alembic commands ###
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
index 592a2cf0019..df5aaf21d47 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
@@ -112,6 +112,30 @@
             >
             </v-text-field>
           </v-app-bar>
+          <BaseDialog
+            v-model="showSummaryEditor[step.id]"
+            :title="$tc('recipe.update-summary')"
+            :submit-text="$tc('general.update')"
+            color="primary"
+            :icon="$globals.icons.primary"
+            :submitIcon="$globals.icons.update"
+            @submit="
+              step.summary = summaryInput
+              showSummaryEditor[step.id] = false
+            "
+            @cancel="
+              showSummaryEditor[step.id] = false
+            "
+          >
+          <v-card-text>
+            <v-card-text>
+              <div class="ml-auto">
+                {{  $t('recipe.summary-overview', { default: $t("recipe.step-index", { step: index + 1 }) }) }}
+              </div>
+              <v-text-field v-model="summaryInput" :label="$t('recipe.instruction-summary')" />
+            </v-card-text>
+          </v-card-text>
+          </BaseDialog>
           <v-hover v-slot="{ hover }">
             <v-card
               class="my-3"
@@ -123,7 +147,7 @@
               <v-card-title :class="{ 'pb-0': !isChecked(index) }">
                 <span :class="isEditForm ? 'handle' : ''">
                   <v-icon v-if="isEditForm" size="26" class="pb-1">{{ $globals.icons.arrowUpDown }}</v-icon>
-                  {{ $t("recipe.step-index", { step: index + 1 }) }}
+                  {{ step.summary ? step.summary : $t("recipe.step-index", { step: index + 1 }) }}
                 </span>
                 <template v-if="isEditForm">
                   <div class="ml-auto">
@@ -140,6 +164,10 @@
                           text: '',
                           event: 'open',
                           children: [
+                            {
+                              text: $tc('recipe.update-summary'),
+                              event: 'update-summary',
+                            },
                             {
                               text: $tc('recipe.toggle-section'),
                               event: 'toggle-section',
@@ -187,6 +215,7 @@
                       @insert-above="insert(index)"
                       @insert-below="insert(index+1)"
                       @toggle-section="toggleShowTitle(step.id)"
+                      @update-summary="toggleShowSummary(step)"
                       @link-ingredients="openDialog(index, step.text, step.ingredientReferences)"
                       @preview-step="togglePreviewState(index)"
                       @upload-image="openImageUpload(index)"
@@ -317,11 +346,18 @@ export default defineComponent({
       disabledSteps: [] as number[],
       unusedIngredients: [] as RecipeIngredient[],
       usedIngredients: [] as RecipeIngredient[],
+      summaryInput: '',
     });
 
     const showTitleEditor = ref<{ [key: string]: boolean }>({});
+    // TODO: Is this overly complex, and not needed because I'm not trying to display static content?
+    const showSummaryEditor = ref<{ [key: string]: boolean }>({});
 
     const actionEvents = [
+      {
+        text: i18n.t("recipe.update-summary") as string,
+        event: "update-summary",
+      },
       {
         text: i18n.t("recipe.toggle-section") as string,
         event: "toggle-section",
@@ -339,7 +375,7 @@ export default defineComponent({
     // ===============================================================
     // UI State Helpers
 
-    function validateTitle(title: string | undefined) {
+    function hasSectionTitle(title: string | undefined) {
       return !(title === null || title === "" || title === undefined);
     }
 
@@ -348,7 +384,7 @@ export default defineComponent({
 
       v.forEach((element: RecipeStep) => {
         if (element.id !== undefined) {
-          showTitleEditor.value[element.id] = validateTitle(element.title);
+          showTitleEditor.value[element.id] = hasSectionTitle(element.title);
         }
       });
     });
@@ -359,7 +395,7 @@ export default defineComponent({
     onMounted(() => {
       props.value.forEach((element: RecipeStep) => {
         if (element.id !== undefined) {
-          showTitleEditor.value[element.id] = validateTitle(element.title);
+          showTitleEditor.value[element.id] = hasSectionTitle(element.title);
         }
 
         // showCookMode.value = false;
@@ -402,6 +438,17 @@ export default defineComponent({
       showTitleEditor.value = temp;
     }
 
+    function toggleShowSummary(step: RecipeStep) {
+      const id = step.id
+      
+      state.summaryInput = step.summary
+
+      showSummaryEditor.value[id] = !showSummaryEditor.value[id];
+
+      const temp = { ...showSummaryEditor.value };
+      showSummaryEditor.value = temp;
+    }
+
     function updateIndex(data: RecipeStep) {
       context.emit("input", data);
     }
@@ -576,7 +623,7 @@ export default defineComponent({
       const sectionSteps: number[] = [];
 
       for (let i = index; i < props.value.length; i++) {
-        if (!(i === index) && validateTitle(props.value[i].title)) {
+        if (!(i === index) && hasSectionTitle(props.value[i].title)) {
           break;
         } else {
           sectionSteps.push(i);
@@ -678,6 +725,7 @@ export default defineComponent({
       activeText,
       getIngredientByRefId,
       showTitleEditor,
+      showSummaryEditor,
       mergeAbove,
       moveTo,
       openDialog,
@@ -688,6 +736,7 @@ export default defineComponent({
       toggleDisabled,
       isChecked,
       toggleShowTitle,
+      toggleShowSummary,
       updateIndex,
       autoSetReferences,
       parseIngredientText,
diff --git a/frontend/components/Domain/Recipe/RecipePrintView.vue b/frontend/components/Domain/Recipe/RecipePrintView.vue
index 283f31c8303..51c8abd4430 100644
--- a/frontend/components/Domain/Recipe/RecipePrintView.vue
+++ b/frontend/components/Domain/Recipe/RecipePrintView.vue
@@ -66,7 +66,7 @@
             <h4 v-if="step.title" :key="`instruction-title-${stepIndex}`" class="instruction-title mb-2">
               {{ step.title }}
             </h4>
-            <h5>{{ $t("recipe.step-index", { step: stepIndex + instructionSection.stepOffset + 1 }) }}</h5>
+            <h5>{{ step.summary ? step.summary : $t("recipe.step-index", { step: index + instructionSection.stepOffset + 1 }) }}</h5>
             <SafeMarkdown :source="step.text" class="recipe-step-body" />
           </div>
         </div>
diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index 99d4814ade0..819cf269ef1 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -488,6 +488,7 @@
     "insert-above": "Insert Above",
     "insert-below": "Insert Below",
     "instructions": "Instructions",
+    "instruction-summary": "Instruction Summary",
     "key-name-required": "Key Name Required",
     "landscape-view-coming-soon": "Landscape View",
     "milligrams": "milligrams",
@@ -522,11 +523,13 @@
     "sodium-content": "Sodium",
     "step-index": "Step: {step}",
     "sugar-content": "Sugar",
+    "summary-overview": "The summary will replace the default summary for this instruction. Submit this with a blank value to revert to the default summary: {default}",
     "title": "Title",
     "total-time": "Total Time",
     "trans-fat-content": "Trans-fat",
     "unable-to-delete-recipe": "Unable to Delete Recipe",
     "unsaturated-fat-content": "Unsaturated fat",
+    "update-summary": "Update Summary",
     "no-recipe": "No Recipe",
     "locked-by-owner": "Locked by Owner",
     "join-the-conversation": "Join the Conversation",
diff --git a/mealie/db/models/recipe/instruction.py b/mealie/db/models/recipe/instruction.py
index 35fa1111317..70f7253ec1c 100644
--- a/mealie/db/models/recipe/instruction.py
+++ b/mealie/db/models/recipe/instruction.py
@@ -23,8 +23,9 @@ class RecipeInstruction(SqlAlchemyBase):
     recipe_id: Mapped[GUID | None] = mapped_column(GUID, ForeignKey("recipes.id"), index=True)
     position: Mapped[int | None] = mapped_column(Integer, index=True)
     type: Mapped[str | None] = mapped_column(String, default="")
-    title: Mapped[str | None] = mapped_column(String)
+    title: Mapped[str | None] = mapped_column(String)  # This is the section title!!!
     text: Mapped[str | None] = mapped_column(String, index=True)
+    summary: Mapped[str | None] = mapped_column(String)
 
     ingredient_references: Mapped[list[RecipeIngredientRefLink]] = orm.relationship(
         RecipeIngredientRefLink, cascade="all, delete-orphan"
diff --git a/mealie/schema/recipe/recipe_step.py b/mealie/schema/recipe/recipe_step.py
index d2b09f43e3b..11fa3be82de 100644
--- a/mealie/schema/recipe/recipe_step.py
+++ b/mealie/schema/recipe/recipe_step.py
@@ -16,7 +16,8 @@ class IngredientReferences(MealieModel):
 
 class RecipeStep(MealieModel):
     id: UUID | None = Field(default_factory=uuid4)
-    title: str | None = ""
+    title: str | None = ""  # This is the section title!!!
+    summary: str | None = ""
     text: str
     ingredient_references: list[IngredientReferences] = []
     model_config = ConfigDict(from_attributes=True)

From 7aad365dbf92c20f8837035a53ef2f744f523bc4 Mon Sep 17 00:00:00 2001
From: boc-the-git <b.oconnell14@gmail.com>
Date: Mon, 21 Oct 2024 20:57:42 +1100
Subject: [PATCH 2/7] Oops

---
 frontend/components/Domain/Recipe/RecipePrintView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/Domain/Recipe/RecipePrintView.vue b/frontend/components/Domain/Recipe/RecipePrintView.vue
index 51c8abd4430..c3fcb47a236 100644
--- a/frontend/components/Domain/Recipe/RecipePrintView.vue
+++ b/frontend/components/Domain/Recipe/RecipePrintView.vue
@@ -66,7 +66,7 @@
             <h4 v-if="step.title" :key="`instruction-title-${stepIndex}`" class="instruction-title mb-2">
               {{ step.title }}
             </h4>
-            <h5>{{ step.summary ? step.summary : $t("recipe.step-index", { step: index + instructionSection.stepOffset + 1 }) }}</h5>
+            <h5>{{ step.summary ? step.summary : $t("recipe.step-index", { step: stepIndex + instructionSection.stepOffset + 1 }) }}</h5>
             <SafeMarkdown :source="step.text" class="recipe-step-body" />
           </div>
         </div>

From 60b7369cfa27d30068a1c2a7c1e96baea41bddaa Mon Sep 17 00:00:00 2001
From: boc-the-git <b.oconnell14@gmail.com>
Date: Mon, 21 Oct 2024 21:07:31 +1100
Subject: [PATCH 3/7] Tidy

---
 .../Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
index df5aaf21d47..6c76bca2c1a 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
@@ -350,7 +350,6 @@ export default defineComponent({
     });
 
     const showTitleEditor = ref<{ [key: string]: boolean }>({});
-    // TODO: Is this overly complex, and not needed because I'm not trying to display static content?
     const showSummaryEditor = ref<{ [key: string]: boolean }>({});
 
     const actionEvents = [

From f7429fa3d1ee1f04a0b5ecdb8e51d29a0752c67f Mon Sep 17 00:00:00 2001
From: boc-the-git <b.oconnell14@gmail.com>
Date: Mon, 21 Oct 2024 21:10:10 +1100
Subject: [PATCH 4/7] Appease the linter gods

---
 .../RecipePage/RecipePageParts/RecipePageInstructions.vue     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
index 6c76bca2c1a..b7ab41374f0 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
@@ -118,7 +118,7 @@
             :submit-text="$tc('general.update')"
             color="primary"
             :icon="$globals.icons.primary"
-            :submitIcon="$globals.icons.update"
+            :submit-icon="$globals.icons.update"
             @submit="
               step.summary = summaryInput
               showSummaryEditor[step.id] = false
@@ -346,7 +346,7 @@ export default defineComponent({
       disabledSteps: [] as number[],
       unusedIngredients: [] as RecipeIngredient[],
       usedIngredients: [] as RecipeIngredient[],
-      summaryInput: '',
+      summaryInput: "",
     });
 
     const showTitleEditor = ref<{ [key: string]: boolean }>({});

From 995ac4784b6e3de10ef7b745836c423add739cd8 Mon Sep 17 00:00:00 2001
From: boc-the-git <b.oconnell14@gmail.com>
Date: Tue, 22 Oct 2024 20:17:16 +1100
Subject: [PATCH 5/7] Fix indentation

---
 .../RecipePageParts/RecipePageInstructions.vue       | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
index b7ab41374f0..5ba133c7c5c 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
@@ -127,14 +127,14 @@
               showSummaryEditor[step.id] = false
             "
           >
-          <v-card-text>
             <v-card-text>
-              <div class="ml-auto">
-                {{  $t('recipe.summary-overview', { default: $t("recipe.step-index", { step: index + 1 }) }) }}
-              </div>
-              <v-text-field v-model="summaryInput" :label="$t('recipe.instruction-summary')" />
+              <v-card-text>
+                <div class="ml-auto">
+                  {{  $t('recipe.summary-overview', { default: $t("recipe.step-index", { step: index + 1 }) }) }}
+                </div>
+                <v-text-field v-model="summaryInput" :label="$t('recipe.instruction-summary')" />
+              </v-card-text>
             </v-card-text>
-          </v-card-text>
           </BaseDialog>
           <v-hover v-slot="{ hover }">
             <v-card

From cc0f3ff51646d8cc91432cfddb3877b7307c988c Mon Sep 17 00:00:00 2001
From: boc-the-git <b.oconnell14@gmail.com>
Date: Wed, 23 Oct 2024 20:05:10 +1100
Subject: [PATCH 6/7] Simplify. Remove popup modal and make summary editable
 inline

---
 .../RecipePageInstructions.vue                | 67 +++++--------------
 frontend/lang/messages/en-US.json             |  3 -
 2 files changed, 16 insertions(+), 54 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
index 5ba133c7c5c..a16dfdad168 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
@@ -112,30 +112,6 @@
             >
             </v-text-field>
           </v-app-bar>
-          <BaseDialog
-            v-model="showSummaryEditor[step.id]"
-            :title="$tc('recipe.update-summary')"
-            :submit-text="$tc('general.update')"
-            color="primary"
-            :icon="$globals.icons.primary"
-            :submit-icon="$globals.icons.update"
-            @submit="
-              step.summary = summaryInput
-              showSummaryEditor[step.id] = false
-            "
-            @cancel="
-              showSummaryEditor[step.id] = false
-            "
-          >
-            <v-card-text>
-              <v-card-text>
-                <div class="ml-auto">
-                  {{  $t('recipe.summary-overview', { default: $t("recipe.step-index", { step: index + 1 }) }) }}
-                </div>
-                <v-text-field v-model="summaryInput" :label="$t('recipe.instruction-summary')" />
-              </v-card-text>
-            </v-card-text>
-          </BaseDialog>
           <v-hover v-slot="{ hover }">
             <v-card
               class="my-3"
@@ -145,8 +121,21 @@
               @click="toggleDisabled(index)"
             >
               <v-card-title :class="{ 'pb-0': !isChecked(index) }">
-                <span :class="isEditForm ? 'handle' : ''">
-                  <v-icon v-if="isEditForm" size="26" class="pb-1">{{ $globals.icons.arrowUpDown }}</v-icon>
+                <v-text-field
+                  v-if="isEditForm"
+                  v-model="step.summary"
+                  class="headline handle"
+                  hide-details
+                  dense
+                  solo
+                  flat
+                  :placeholder="$t('recipe.step-index', { step: index + 1 })"
+                >
+                  <template #prepend>
+                    <v-icon size="26">{{ $globals.icons.arrowUpDown }}</v-icon>
+                  </template>
+                </v-text-field>
+                <span v-else>
                   {{ step.summary ? step.summary : $t("recipe.step-index", { step: index + 1 }) }}
                 </span>
                 <template v-if="isEditForm">
@@ -164,10 +153,6 @@
                           text: '',
                           event: 'open',
                           children: [
-                            {
-                              text: $tc('recipe.update-summary'),
-                              event: 'update-summary',
-                            },
                             {
                               text: $tc('recipe.toggle-section'),
                               event: 'toggle-section',
@@ -215,7 +200,6 @@
                       @insert-above="insert(index)"
                       @insert-below="insert(index+1)"
                       @toggle-section="toggleShowTitle(step.id)"
-                      @update-summary="toggleShowSummary(step)"
                       @link-ingredients="openDialog(index, step.text, step.ingredientReferences)"
                       @preview-step="togglePreviewState(index)"
                       @upload-image="openImageUpload(index)"
@@ -346,17 +330,11 @@ export default defineComponent({
       disabledSteps: [] as number[],
       unusedIngredients: [] as RecipeIngredient[],
       usedIngredients: [] as RecipeIngredient[],
-      summaryInput: "",
     });
 
     const showTitleEditor = ref<{ [key: string]: boolean }>({});
-    const showSummaryEditor = ref<{ [key: string]: boolean }>({});
-
+    
     const actionEvents = [
-      {
-        text: i18n.t("recipe.update-summary") as string,
-        event: "update-summary",
-      },
       {
         text: i18n.t("recipe.toggle-section") as string,
         event: "toggle-section",
@@ -437,17 +415,6 @@ export default defineComponent({
       showTitleEditor.value = temp;
     }
 
-    function toggleShowSummary(step: RecipeStep) {
-      const id = step.id
-      
-      state.summaryInput = step.summary
-
-      showSummaryEditor.value[id] = !showSummaryEditor.value[id];
-
-      const temp = { ...showSummaryEditor.value };
-      showSummaryEditor.value = temp;
-    }
-
     function updateIndex(data: RecipeStep) {
       context.emit("input", data);
     }
@@ -724,7 +691,6 @@ export default defineComponent({
       activeText,
       getIngredientByRefId,
       showTitleEditor,
-      showSummaryEditor,
       mergeAbove,
       moveTo,
       openDialog,
@@ -735,7 +701,6 @@ export default defineComponent({
       toggleDisabled,
       isChecked,
       toggleShowTitle,
-      toggleShowSummary,
       updateIndex,
       autoSetReferences,
       parseIngredientText,
diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index ceb2ec20f50..0166401c7e5 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -488,7 +488,6 @@
     "insert-above": "Insert Above",
     "insert-below": "Insert Below",
     "instructions": "Instructions",
-    "instruction-summary": "Instruction Summary",
     "key-name-required": "Key Name Required",
     "landscape-view-coming-soon": "Landscape View",
     "milligrams": "milligrams",
@@ -523,13 +522,11 @@
     "sodium-content": "Sodium",
     "step-index": "Step: {step}",
     "sugar-content": "Sugar",
-    "summary-overview": "The summary will replace the default summary for this instruction. Submit this with a blank value to revert to the default summary: {default}",
     "title": "Title",
     "total-time": "Total Time",
     "trans-fat-content": "Trans-fat",
     "unable-to-delete-recipe": "Unable to Delete Recipe",
     "unsaturated-fat-content": "Unsaturated fat",
-    "update-summary": "Update Summary",
     "no-recipe": "No Recipe",
     "locked-by-owner": "Locked by Owner",
     "join-the-conversation": "Join the Conversation",

From 63fb2f1818651981f27ebe5e26cdf715d7804572 Mon Sep 17 00:00:00 2001
From: boc-the-git <b.oconnell14@gmail.com>
Date: Wed, 23 Oct 2024 20:06:47 +1100
Subject: [PATCH 7/7] Tidy

---
 .../RecipePage/RecipePageParts/RecipePageInstructions.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
index a16dfdad168..79d5fa5fed2 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
@@ -333,7 +333,7 @@ export default defineComponent({
     });
 
     const showTitleEditor = ref<{ [key: string]: boolean }>({});
-    
+
     const actionEvents = [
       {
         text: i18n.t("recipe.toggle-section") as string,