Merge pull request #642 from nextcloud/bugfix/issue640

Fixes minor errors in displaying ingredients and instructions

Author: seyfeb

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## [Unreleased]
 
+### Fixed
+- Minor errors in displaying ingredients and instructions
+  [#642](https://github.com./nextcloud/cookbook/pull/642) @seyfeb
+
 ## 0.8.3 - 2021-03-03
 
 ### Fixed

src/components/RecipeIngredient.vue

@@ -16,6 +16,8 @@
 export default {
     name: "RecipeIngredient",
     props: {
+        /* Ingredient HTML string to display. Content should be sanitized.
+         */
         ingredient: {
             type: String,
             default: "",
@@ -33,11 +35,9 @@ export default {
     computed: {
         displayIngredient() {
             if (this.isHeader()) {
-                return window.escapeHTML(
-                    this.ingredient.substring(this.headerPrefix.length)
-                )
+                return this.ingredient.substring(this.headerPrefix.length)
             }
-            return window.escapeHTML(this.ingredient)
+            return this.ingredient
         },
     },
     methods: {

src/components/RecipeInstruction.vue

@@ -1,11 +1,13 @@
 <template>
-    <li :class="{ done: isDone }" @click="toggleDone">{{ instruction }}</li>
+    <li :class="{ done: isDone }" @click="toggleDone" v-html="instruction"></li>
 </template>
 
 <script>
 export default {
     name: "RecipeInstruction",
     props: {
+        /* Instruction HTML string to display. Content should be sanitized.
+         */
         instruction: {
             type: String,
             default: "",

src/components/RecipeView.vue

@@ -332,20 +332,20 @@ export default {
 
             if (this.$store.state.recipe.description) {
                 recipe.description = this.convertRecipeReferences(
-                    this.escapeHtml(this.$store.state.recipe.description)
+                    window.escapeHTML(this.$store.state.recipe.description)
                 )
             }
 
             if (this.$store.state.recipe.recipeIngredient) {
                 recipe.ingredients = Object.values(
                     this.$store.state.recipe.recipeIngredient
-                ).map((i) => this.convertRecipeReferences(this.escapeHtml(i)))
+                ).map((i) => this.convertRecipeReferences(window.escapeHTML(i)))
             }
 
             if (this.$store.state.recipe.recipeInstructions) {
                 recipe.instructions = Object.values(
                     this.$store.state.recipe.recipeInstructions
-                ).map((i) => this.convertRecipeReferences(this.escapeHtml(i)))
+                ).map((i) => this.convertRecipeReferences(window.escapeHTML(i)))
             }
 
             if (this.$store.state.recipe.keywords) {
@@ -389,7 +389,7 @@ export default {
 
             if (this.$store.state.recipe.tool) {
                 recipe.tools = this.$store.state.recipe.tool.map((i) =>
-                    this.convertRecipeReferences(this.escapeHtml(i))
+                    this.convertRecipeReferences(window.escapeHTML(i))
                 )
             }
 
@@ -466,15 +466,6 @@ export default {
         })
     },
     methods: {
-        escapeHtml(unsafeString) {
-            return unsafeString
-                .replace(/&/g, "&")
-                .replace(/~/g, "˜")
-                .replace(/</g, "&lt;")
-                .replace(/>/g, "&gt;")
-                .replace(/"/g, "&quot;")
-                .replace(/'/g, "&#039;")
-        },
         convertRecipeReferences(text) {
             const re = /(^|\s|[,._+&?!-])#r\/(\d+)(?=$|\s|[.,_+&?!-])/g
             const converted = text.replace(

src/main.js

@@ -94,7 +94,7 @@ import AppMain from "./components/AppMain.vue"
     // eslint-disable-next-line no-param-reassign
     window.escapeHTML = function escapeHTML(text) {
         return text.replace(
-            /["&'/<>]/g,
+            /["&'<>]/g,
             (a) =>
                 ({
                     "&": "&amp;",