From eb8c2469cff359134873fd25e0f8e84b13801f4c Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Fri, 28 Jun 2024 11:52:26 +0200
Subject: [PATCH] Quick fixes for printing very long words and URLs

Refs #5446
---
 pdf/src/CampPrint.vue                 | 10 ++++++++++
 print/components/generic/RichText.vue |  8 +++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/pdf/src/CampPrint.vue b/pdf/src/CampPrint.vue
index 7e06c3e682e..6e35c5c6fc8 100644
--- a/pdf/src/CampPrint.vue
+++ b/pdf/src/CampPrint.vue
@@ -25,6 +25,9 @@ import Picasso from '@/campPrint/picasso/Picasso.vue'
 import Story from '@/campPrint/story/Story.vue'
 import Program from '@/campPrint/program/Program.vue'
 import Activity from '@/campPrint/activity/Activity.vue'
+import { wordHyphenation } from '@react-pdf/textkit'
+
+const originalHyphenationCallback = wordHyphenation()
 
 export default {
   name: 'CampPrint',
@@ -47,6 +50,13 @@ export default {
 }
 
 const registerFonts = async () => {
+  Font.registerHyphenationCallback((word) => {
+    if (word && word.length > 70) {
+      return word.split('')
+    }
+    return originalHyphenationCallback(word)
+  })
+
   Font.register({
     family: 'InterDisplay',
     fonts: [
diff --git a/print/components/generic/RichText.vue b/print/components/generic/RichText.vue
index 480f9c7bd5d..56305b23b14 100644
--- a/print/components/generic/RichText.vue
+++ b/print/components/generic/RichText.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- eslint-disable-next-line vue/no-v-html -->
-  <div class="tw-prose tw-prose-neutral" v-html="purifiedHtml" />
+  <div class="tw-prose tw-prose-neutral wrap-anywhere" style="word-wrap: anywhere" v-html="purifiedHtml" />
 </template>
 
 <script>
@@ -23,3 +23,9 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.wrap-anywhere {
+  word-wrap: anywhere;
+}
+</style>