Quick fixes for printing very long words and URLs

Refs ecamp#5446

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: [

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>