feat(word-wrap): added word wrap to code viewer

Author: stephansama

app/components/Code/Viewer.vue

@@ -3,13 +3,15 @@ const props = defineProps<{
   html: string
   lines: number
   selectedLines: { start: number; end: number } | null
+  wordWrap?: boolean
 }>()
 
 const emit = defineEmits<{
   lineClick: [lineNum: number, event: MouseEvent]
 }>()
 
 const codeRef = useTemplateRef('codeRef')
+const lineNumbersRef = useTemplateRef('lineNumbersRef')
 
 // Generate line numbers array
 const lineNumbers = computed(() => {
@@ -32,6 +34,30 @@ function onLineClick(lineNum: number, event: MouseEvent) {
   emit('lineClick', lineNum, event)
 }
 
+// Synchronize line number heights with code line heights (needed for word wrap)
+function syncLineHeights() {
+  if (!props.wordWrap || !codeRef.value || !lineNumbersRef.value) {
+    // Reset heights if word wrap is disabled
+    if (lineNumbersRef.value) {
+      const nums = lineNumbersRef.value.querySelectorAll<HTMLElement>('.line-number')
+      nums.forEach(num => (num.style.height = ''))
+    }
+    return
+  }
+
+  const lines = codeRef.value.querySelectorAll<HTMLElement>('code > .line')
+  const nums = lineNumbersRef.value.querySelectorAll<HTMLElement>('.line-number')
+
+  lines.forEach((line, index) => {
+    const num = nums[index]
+    if (num) {
+      // Use getBoundingClientRect for more precision if needed, but offsetHeight is usually enough
+      const height = line.offsetHeight
+      num.style.height = `${height}px`
+    }
+  })
+}
+
 // Apply highlighting to code lines when selection changes
 function updateLineHighlighting() {
   if (!codeRef.value) return
@@ -53,11 +79,27 @@ function updateLineHighlighting() {
 watch(
   () => [props.selectedLines, props.html] as const,
   () => {
-    nextTick(updateLineHighlighting)
+    nextTick(() => {
+      updateLineHighlighting()
+      syncLineHeights()
+    })
   },
   { immediate: true },
 )
 
+// Also watch wordWrap specifically
+watch(
+  () => props.wordWrap,
+  () => {
+    nextTick(syncLineHeights)
+  },
+)
+
+// Sync on resize
+if (import.meta.client) {
+  useEventListener(window, 'resize', syncLineHeights)
+}
+
 // Use Nuxt's `navigateTo` for the rendered import links
 function handleImportLinkNavigate() {
   if (!codeRef.value) return
@@ -86,9 +128,10 @@ watch(
 </script>
 
 <template>
-  <div class="code-viewer flex min-h-full max-w-full">
+  <div class="code-viewer flex min-h-full max-w-full" :class="{ 'is-wrapped': wordWrap }">
     <!-- Line numbers column -->
     <div
+      ref="lineNumbersRef"
       class="line-numbers shrink-0 bg-bg-subtle border-ie border-solid border-border text-end select-none relative"
       :style="{ '--line-digits': lineDigits }"
       aria-hidden="true"
@@ -155,6 +198,12 @@ watch(
   transition: background-color 0.1s;
 }
 
+.is-wrapped .code-content :deep(.line) {
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: none;
+}
+
 /* Highlighted lines in code content - extend full width with negative margin */
 .code-content :deep(.line.highlighted) {
   @apply bg-yellow-500/20;

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

@@ -265,6 +265,8 @@ function scrollToTop() {
 // Canonical URL for this code page
 const canonicalUrl = computed(() => `https://npmx.dev${getCodeUrl(route.params)}`)
 
+const wordWrap = useLocalStorage('npmx-code-word-wrap', false)
+
 // Toggle markdown view mode
 const markdownViewModes = [
   {
@@ -471,6 +473,15 @@ defineOgImageComponent('Default', {
                 <span class="i-lucide:arrow-up w-3 h-3" />
                 {{ $t('code.scroll_to_top') }}
               </button>
+              <button
+                type="button"
+                class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors items-center inline-flex gap-1"
+                :class="{ 'bg-accent/10 text-accent border-accent/20': wordWrap }"
+                @click="wordWrap = !wordWrap"
+              >
+                <span class="i-lucide:wrap-text w-3 h-3" />
+                {{ $t('code.word_wrap') }}
+              </button>
               <button
                 v-if="selectedLines"
                 type="button"
@@ -515,6 +526,7 @@ defineOgImageComponent('Default', {
             :html="fileContent.html"
             :lines="fileContent.lines"
             :selected-lines="selectedLines"
+            :word-wrap="wordWrap"
             @line-click="handleLineClick"
           />
         </template>

i18n/locales/en.json

@@ -792,7 +792,8 @@
       "code": "code"
     },
     "file_path": "File path",
-    "scroll_to_top": "Scroll to top"
+    "scroll_to_top": "Scroll to top",
+    "word_wrap": "Word wrap"
   },
   "badges": {
     "provenance": {

i18n/schema.json

@@ -2382,6 +2382,9 @@
         },
         "scroll_to_top": {
           "type": "string"
+        },
+        "word_wrap": {
+          "type": "string"
         }
       },
       "additionalProperties": false