feat(ui): added word wrap to code viewer by stephansama · Pull Request #2028 · npmx-dev/npmx.dev

stephansama · 2026-03-10T18:18:15Z

🔗 Linked issue

resolves #2027

🧭 Context

scrolling horizontally is annoying when trying to just read code in my opinion.

📚 Description

I just added a small button in the toolbar to toggle word wrap and a class to enable and disable word wrap

I did use gemini to help with this PR however i implemented a similar feature on my personal blog on code blocks. just used the ai to quickly get up to speed

vercel · 2026-03-10T18:18:20Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 17, 2026 10:09am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 17, 2026 10:09am
npmx-lunaria	Ignored		Mar 17, 2026 10:09am

github-actions · 2026-03-10T18:18:59Z

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/en.json	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

codecov · 2026-03-10T18:20:35Z

Codecov Report

❌ Patch coverage is 52.00000% with 12 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Code/Viewer.vue	52.00%	11 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

coderabbitai · 2026-03-10T18:26:03Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds a word-wrap feature to the code viewer: a new optional wordWrap prop and conditional is-wrapped class, a lineNumbersRef template ref, and syncLineHeights logic to align line-number heights with wrapped lines. The component watches wordWrap, calls syncing after updates and on window resize, and updates CSS to use pre-wrap, break-all and remove max-height for wrapped rendering. The package-code page adds a localStorage-backed toggle (npmx-code-word-wrap) with a UI button and passes :word-wrap to the viewer. English i18n (code.files.word_wrap) and schema entries were added.

Suggested reviewers

ghostdevv

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, mentioning the word wrap toggle button and CSS class additions.
Linked Issues check	✅ Passed	The pull request successfully implements word wrap functionality for the code viewer as required by issue `#2027`, including wrapping logic, UI toggle button, and internationalization support.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the word wrap feature. No unrelated modifications to unrelated system components were introduced.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

📝 Coding Plan

Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

Migrating from UI to YAML configuration.

Use the @coderabbitai configuration command in a PR comment to get a dump of all your UI settings in YAML format. You can then edit this YAML file and upload it to the root of your repository to configure CodeRabbit programmatically.

coderabbitai

Actionable comments posted: 3

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 29d80634-bca0-4cc4-8959-376aa22e6480

📥 Commits

Reviewing files that changed from the base of the PR and between 3712560 and ca13cca.

📒 Files selected for processing (4)

app/components/Code/Viewer.vue
app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
i18n/locales/en.json
i18n/schema.json

coderabbitai · 2026-03-10T18:26:06Z

app/components/Code/Viewer.vue

+// 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`
+    }
+  })
+}


⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash # Verify that markdown files default to preview mode, that CodeViewer is mounted with v-show, # and that syncLineHeights currently only reruns on html/wordWrap/resize. rg -n -C3 "const markdownViewMode|<CodeViewer|v-show=\"!fileContent.markdownHtml \\|\\| markdownViewMode === 'code'\"" "app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue" rg -n -C3 "function syncLineHeights|offsetHeight|watch\\(|props.wordWrap|useEventListener\\(window, 'resize'" "app/components/Code/Viewer.vue"

Repository: npmx-dev/npmx.dev

Length of output: 2129

Re-sync wrapped line heights after the viewer becomes visible.

The parent component mounts CodeViewer with v-show="!fileContent.markdownHtml || markdownViewMode === 'code'" and defaults to preview mode. For markdown files, this means the component is initially hidden (display: none), yet the immediate watcher on [props.selectedLines, props.html] fires during mount and calls syncLineHeights() while the viewer is not rendered. This causes offsetHeight to return 0, setting all line-number heights to 0px. The heights are never corrected when the user switches to code view with word wrap enabled, leaving the line-number column collapsed.

Add visibility detection to skip measurement while hidden, or use a ResizeObserver on the rendered code block to continuously maintain synchronisation.

🧰 Tools

🪛 Biome (2.4.6)

[error] 43-43: This callback passed to forEach() iterable method should not return a value.

(lint/suspicious/useIterableCallbackReturn)

app/components/Code/Viewer.vue

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

whitep4nth3r · 2026-03-11T17:22:59Z

Hi and thank you for this change!

In my opinion, and for accessibility reasons (for example for people who don't use a mouse) I believe that it's always better to wrap code regardless just using CSS.

For that reason I don't think we need a toggle and the wrapping can just be implemented using CSS.

whitep4nth3r · 2026-03-11T17:24:09Z

Perhaps we should even have a max line length in the code viewer like in many IDEs.

stephansama · 2026-03-11T17:28:21Z

Hi and thank you for this change!

In my opinion, and for accessibility reasons (for example for people who don't use a mouse) I believe that it's always better to wrap code regardless just using CSS.

For that reason I don't think we need a toggle and the wrapping can just be implemented using CSS.

i was trying to get it to work with css only however i was having a little issue. like it would mostly work but not all the way. i can take another crack at it again when i get out of work. 🫡

nosthrillz · 2026-03-13T21:47:15Z

Hi @whitep4nth3r

I created this PR in response to the same issue, avoiding a toggle
#2070

Hope I'm not stepping on toes, it's my first OSS PR ever 😅

gameroman · 2026-03-15T13:29:41Z

In my opinion, and for accessibility reasons (for example for people who don't use a mouse) I believe that it's always better to wrap code regardless just using CSS.

I think having a toggle/setting + shortcut would be better because sometimes you do not want the code to be wrapped

coderabbitai

🧹 Nitpick comments (1)

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue (1)
431-432: Simplify icon toggle using v-else and remove redundant !!.

!!wordWrap is unnecessary since wordWrap is already a boolean ref.

Using two v-if directives instead of v-if/v-else means Vue evaluates both conditions on every render.
♻️ Proposed fix
-<span v-if="!!wordWrap" class="i-lucide:wrap-text w-3 h-3" />
-<span v-if="!wordWrap" class="i-lucide:text w-3 h-3" />
+<span v-if="wordWrap" class="i-lucide:wrap-text w-3 h-3" />
+<span v-else class="i-lucide:text w-3 h-3" />

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ab3db15d-0017-40f9-a208-64e41af7e966

📥 Commits

Reviewing files that changed from the base of the PR and between 95848e8 and e14b94f.

📒 Files selected for processing (1)

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

stephansama · 2026-03-17T10:18:12Z

In my opinion, and for accessibility reasons (for example for people who don't use a mouse) I believe that it's always better to wrap code regardless just using CSS.

I think having a toggle/setting + shortcut would be better because sometimes you do not want the code to be wrapped

i think the toggle is better for user experience as i prefer word wrap however regular people that i meet hate word wrap. giving the choice to the people i think is the correct move

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

ca13cca

stephansama changed the title ~~feat(word-wrap): added word wrap to code viewer~~ feat(ui): added word wrap to code viewer Mar 10, 2026

vercel bot deployed to Preview – npmx.dev March 10, 2026 18:20 View deployment

coderabbitai bot reviewed Mar 10, 2026

View reviewed changes

chore: merge develop

e64a6b5

vercel bot deployed to Preview – npmx.dev March 12, 2026 10:53 View deployment

chore: merge main

95848e8

vercel bot deployed to Preview – docs.npmx.dev March 17, 2026 09:55 View deployment

vercel bot deployed to Preview – npmx.dev March 17, 2026 09:56 View deployment

chore: made toggle icon switch between modes

e14b94f

vercel bot deployed to Preview – npmx.dev March 17, 2026 10:01 View deployment

coderabbitai bot reviewed Mar 17, 2026

View reviewed changes

chore: removed prettier formats

c2108ea

vercel bot deployed to Preview – npmx.dev March 17, 2026 10:05 View deployment

stephansama added 2 commits March 17, 2026 06:05

chore: addressed ai comments

1e3ed27

chore: removed prettier formatting again 🤦

72c3c6e

vercel bot deployed to Preview – npmx.dev March 17, 2026 10:09 View deployment

Uh oh!

Conversation

stephansama commented Mar 10, 2026

🔗 Linked issue

🧭 Context

📚 Description

Uh oh!

vercel bot commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

codecov bot commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai bot commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

whitep4nth3r commented Mar 11, 2026

Uh oh!

whitep4nth3r commented Mar 11, 2026

Uh oh!

stephansama commented Mar 11, 2026

Uh oh!

nosthrillz commented Mar 13, 2026

Uh oh!

gameroman commented Mar 15, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

stephansama commented Mar 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vercel bot commented Mar 10, 2026 •

edited

Loading

github-actions bot commented Mar 10, 2026 •

edited

Loading

codecov bot commented Mar 10, 2026 •

edited

Loading

coderabbitai bot commented Mar 10, 2026 •

edited

Loading