Feat: support linebreaks in titles

This commit:

- Updates the converter version to the most recent version. This version
  imports line breaks in titles as `<br/>` tags
- Displays line breaks in the norm title in the frontend
- Displays line breaks as white space in section titles in the table of
  contents

RISDEV-2581 RISDEV-2546 RISDEV-2545

backend/build.gradle.kts

@@ -217,9 +217,9 @@ dependencies {
 
     implementation("com.icegreen:greenmail:2.0.0")
 
-    implementation("de.bund.digitalservice:ris-norms-juris-converter:0.19.1")
+    implementation("de.bund.digitalservice:ris-norms-juris-converter:0.19.2")
     // for local development:
-    // implementation(files("ris-norms-juris-converter-0.19.1.jar"))
+    // implementation(files("ris-norms-juris-converter-0.19.2.jar"))
     // implementation("org.apache.commons:commons-text:1.10.0")
 
     implementation("com.fasterxml.jackson.dataformat:jackson-dataformat-xml:2.15.2")

frontend/src/components/ExpandableDataSet.vue

@@ -38,8 +38,6 @@ function collapse(): void {
       'hover:border-blue-500 hover:bg-blue-200': !isExpanded,
       'border-b': borderBottom,
     }"
-    close-icon-name="expand_less"
-    open-icon-name="expand_more"
   >
     <template #open-icon>
       <IconExpandMore />

frontend/src/components/NormsList.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { sanitizeTableOfContentEntry } from "@/helpers/sanitizer"
+
 interface Norm {
   officialLongTitle: string
   guid: string
@@ -8,7 +10,7 @@ defineProps<{ norms: Norm[] }>()
 
 function formatTitle(title?: string): string {
   const titleIsMissing = title === undefined || title.length <= 0
-  return titleIsMissing ? "Kein Titel" : title
+  return titleIsMissing ? "Kein Titel" : sanitizeTableOfContentEntry(title)
 }
 </script>
 <template>

frontend/src/components/tableOfContents/TableOfContents.vue

@@ -8,6 +8,7 @@ import {
   Recitals,
   isDocumentSection,
 } from "@/domain/norm"
+import { sanitizeTableOfContentEntry } from "@/helpers/sanitizer"
 import IconChevronRight from "~icons/ic/baseline-chevron-right"
 import IconExpandMore from "~icons/ic/baseline-expand-more"
 
@@ -33,11 +34,20 @@ const effectiveRecitals = computed(() => {
   } else if (!props.recitals.marker && !props.recitals.heading) {
     return "Präambel"
   } else {
-    return `${props.recitals.marker ?? ""} ${
-      props.recitals.heading ?? ""
-    }`.trim()
+    return sanitizeTableOfContentEntry(
+      `${props.recitals.marker ?? ""} ${props.recitals.heading ?? ""}`.trim(),
+    )
   }
 })
+
+const effectiveDocumentSections = computed(() =>
+  props.documentSections.map((i) => {
+    return {
+      ...i,
+      heading: sanitizeTableOfContentEntry(i.heading ?? ""),
+    }
+  }),
+)
 </script>
 
 <template>
@@ -48,7 +58,7 @@ const effectiveRecitals = computed(() => {
     title="Eingangsformel"
     :to="{
       name: 'norms-norm-normGuid-documentation-formula',
-      params: { normGuid: props.normGuid },
+      params: { normGuid },
     }"
   />
 
@@ -59,13 +69,13 @@ const effectiveRecitals = computed(() => {
     :title="effectiveRecitals"
     :to="{
       name: 'norms-norm-normGuid-documentation-recitals',
-      params: { normGuid: props.normGuid },
+      params: { normGuid },
     }"
   />
 
   <!-- Sections & articles -->
   <div
-    v-for="doc in props.documentSections"
+    v-for="doc in effectiveDocumentSections"
     :key="doc.guid"
     class="border-t border-gray-400"
     :class="{ 'last:border-b': marginLevel === 0 }"
@@ -93,7 +103,7 @@ const effectiveRecitals = computed(() => {
           :to="{
             name: 'norms-norm-normGuid-documentation-documentationGuid',
             params: {
-              normGuid: props.normGuid,
+              normGuid,
               documentationGuid: doc.guid,
             },
           }"
@@ -115,7 +125,7 @@ const effectiveRecitals = computed(() => {
       :title="`${doc.marker ?? ''} ${doc.heading ?? ''}`"
       :to="{
         name: 'norms-norm-normGuid-documentation-documentationGuid',
-        params: { normGuid: props.normGuid, documentationGuid: doc.guid },
+        params: { normGuid, documentationGuid: doc.guid },
       }"
     />
   </div>
@@ -127,7 +137,7 @@ const effectiveRecitals = computed(() => {
     title="Schlussformel"
     :to="{
       name: 'norms-norm-normGuid-documentation-conclusion',
-      params: { normGuid: props.normGuid },
+      params: { normGuid },
     }"
   />
 </template>

frontend/src/helpers/sanitizer.ts

@@ -0,0 +1,51 @@
+/* -------------------------------------------------- *
+ * Shared                                             *
+ * -------------------------------------------------- */
+
+type SanitizeRule = {
+  pattern: RegExp | string
+  replacement: string | null
+}
+
+/** Cleans up an input string according to a list of rules. */
+function sanitize(input: string, rules: SanitizeRule[]): string {
+  let output = input
+
+  rules.forEach((rule) => {
+    output = output.replace(rule.pattern, rule.replacement ?? "")
+  })
+
+  return output
+}
+
+/** Removes tags that indicate "Kuppelwörter" */
+const kwReplacement: SanitizeRule = {
+  pattern: /<(kw|KW)\/>/g,
+  replacement: null,
+}
+
+/** Removes FNR tags */
+const fnrReplacement: SanitizeRule = {
+  pattern: /<FnR ID="[^"]*"\/>/g,
+  replacement: null,
+}
+
+/* -------------------------------------------------- *
+ * Specific sanitizers                                *
+ * -------------------------------------------------- */
+
+export function sanitizeTableOfContentEntry(input: string): string {
+  return sanitize(input, [
+    kwReplacement,
+    fnrReplacement,
+    { pattern: /\s*<(br|BR)\/>\s*/g, replacement: " " },
+  ])
+}
+
+export function sanitizeNormTitle(input: string): string {
+  return sanitize(input, [
+    kwReplacement,
+    fnrReplacement,
+    { pattern: /\s*<(br|BR)\/>\s*/g, replacement: "\n" },
+  ])
+}

frontend/src/routes/norms/norm/[normGuid]/content.vue

@@ -1,18 +1,26 @@
 <script lang="ts" setup>
 import { storeToRefs } from "pinia"
+import { computed } from "vue"
 import TableOfContents from "@/components/tableOfContents/TableOfContents.vue"
+import { sanitizeNormTitle } from "@/helpers/sanitizer"
 import { useLoadedNormStore } from "@/stores/loadedNorm"
 
 const loadedNormStore = useLoadedNormStore()
 const { loadedNorm } = storeToRefs(loadedNormStore)
+
+const title = computed(() =>
+  loadedNorm.value?.metadataSections?.NORM?.[0]?.OFFICIAL_LONG_TITLE?.[0]
+    ? sanitizeNormTitle(
+        loadedNorm.value?.metadataSections?.NORM?.[0]?.OFFICIAL_LONG_TITLE?.[0],
+      )
+    : "",
+)
 </script>
 
 <template>
   <div class="w-5/6 max-w-screen-lg">
-    <h1 class="ds-heading-02-reg mb-32">
-      {{
-        loadedNorm?.metadataSections?.NORM?.[0]?.OFFICIAL_LONG_TITLE?.[0] ?? ""
-      }}
+    <h1 class="ds-heading-02-reg mb-32 whitespace-pre-wrap">
+      {{ title }}
     </h1>
     <h1 class="ds-label-01-bold mb-32">Nichtamtliches Inhaltsverzeichnis</h1>
 

frontend/test/components/tableOfContents/tableOfContents.spec.ts

@@ -78,13 +78,13 @@ const firstPart: DocumentSection = {
 const secondPart: DocumentSection = {
   guid: "guid",
   marker: "Second Part",
-  heading: "Heading of second part",
+  heading: "Heading<BR/> of second part",
   type: DocumentSectionType.PART,
   documentation: [
     {
       guid: "guid",
       marker: "Section",
-      heading: "Heading of section",
+      heading: "Heading<BR/> of section",
       type: DocumentSectionType.SECTION,
       documentation: [
         {

frontend/test/e2e/norms/norm-create-through-api-and-retrieve-xml-by-eli.spec.ts

@@ -2,7 +2,7 @@ import { expect } from "@playwright/test"
 import jsdom from "jsdom"
 import { openNorm, saveNormFrame } from "./e2e-utils"
 import { testWithImportedNorm } from "./fixtures"
-import { normData as norm } from "./testdata/norm_basic"
+import { normData as norm } from "./testdata/norm_basic_exported"
 import { FieldType, fillInputField } from "./utilities"
 import { Article, MetadataSectionName, MetadatumType } from "@/domain/norm"