fix: ingredient linker and instructions titles (#6146)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeIngredientHtml.vue

@@ -1,15 +1,44 @@
 <template>
-  <!-- eslint-disable-next-line vue/no-v-html -->
-  <div v-html="safeMarkup" />
+  <div class="ingredient-link-label links-disabled">
+    <SafeMarkdown v-if="baseText" :source="baseText" />
+    <SafeMarkdown
+      v-if="ingredient?.note"
+      class="d-inline"
+      :source="` ${ingredient.note}`"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { sanitizeIngredientHTML } from "~/composables/recipes/use-recipe-ingredients";
+import { computed } from "vue";
+import type { RecipeIngredient } from "~/lib/api/types/recipe";
+import { useParsedIngredientText } from "~/composables/recipes";
 
 interface Props {
-  markup: string;
+  ingredient?: RecipeIngredient;
+  scale?: number;
 }
-const props = defineProps<Props>();
 
-const safeMarkup = computed(() => sanitizeIngredientHTML(props.markup));
+const { ingredient, scale = 1 } = defineProps<Props>();
+
+const baseText = computed(() => {
+  if (!ingredient) return "";
+  const parsed = useParsedIngredientText(ingredient, scale);
+  return [parsed.quantity, parsed.unit, parsed.name].filter(Boolean).join(" ").trim();
+});
 </script>
+
+<style scoped>
+.ingredient-link-label {
+  display: block;
+  line-height: 1.25;
+  word-break: break-word;
+  font-size: 0.95rem;
+}
+.links-disabled :deep(a) {
+  pointer-events: none;
+  cursor: default;
+  color: var(--v-theme-primary);
+  text-decoration: none;
+}
+</style>