Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Feature request: opt-in no-wrap / horizontal-scroll for long lines in split view

Đang mở
  • Có gì không ổn?
#238 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
42/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Start by tracing split view rendering with viewType="split", including the single table, library-owned col elements, and the renderToken injection point described in the issue. Compare the existing renderToken workaround with the requested options, and consider the work complete when an opt-in no-wrap mode, stable per-line hook, or documented current-layout guidance supports the intended horizontal-scroll behavior.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Hi, and thanks for the library — it powers the diff viewer in our code-review product.

Problem

In split (viewType="split") view, long code lines always soft-wrap onto multiple visual rows. We'd like the option to keep each line on one row and let it scroll horizontally instead. There doesn't appear to be a supported way to do this today.

Why it's hard to work around

The split view renders both panes inside a single 4-column

with table-layout: fixed; width: 100% and library-owned elements. As a result:

  • white-space: pre on the code cell just overflows/bleeds into the adjacent cell — the table never widens, so overflow-x: auto has nothing to scroll.
  • min/max-width on <td> is ignored per spec; only <col> widths constrain columns, and those are owned by the component template.
  • There's no per-line wrapper element around the code tokens (they render directly into the <td>), so the only injection point is a synthetic token via renderToken — which works but is fragile.

We found a workaround using renderToken + a CSS transform driven by custom scrollbars, but it's brittle and fights the table layout.

What would help (any one of these):

  1. A prop like wrapLines={false} / nowrap that switches long lines to horizontal-scroll.
  2. A stable per-line wrapper element (or a documented render hook) so consumers can control overflow/scroll per code cell.
  3. Guidance on achieving independent per-pane horizontal scroll with the current single-table split layout, if it's already possible.

Environment: react-diff-view 3.3.3, React 18, split view, parseDiff + tokenize.

Happy to share a minimal repro or a PR sketch if that's useful. Thanks!

Ngôn ngữ chính
TypeScript
Star
1k
Fork
88
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của otakustay/react-diff-view

Tất cả issue của otakustay/react-diff-view

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.