Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

[Bug]: Preview annotation comments do not support RTL text direction

クローズ 初心者向け
  • 何か問題がありますか？
#4,644 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@abdelrhmanehab10 がすでに取り組んでいます。

2026年9月9日 から。

  • #10999 @abdelrhmanehab10 による — マージされずにクローズ
  • #11005 @abdelrhmanehab10 による — オープン
  • #16747 @haithamassoli44 による — オープン

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
静か
技術スタック
typescript
領域
desktop, frontend

調査の方向性

注釈テキストエリアが作成される apps/desktop/src/preview/PickPreload.ts の 414-419 行付近から始めます。LTR ページ上でアラビア語のコメントを使って問題を再現し、その後、注釈オーバーレイが検査対象のドキュメントから方向をどのように受け取っているかを調べます。RTL および混在方向のコメントテキストが正しく表示され、ツールバーとエディターコントロールのレイアウトが安定したままになれば完了です。

索引モデルが issue の本文から書いたものです。

説明

Area

apps/desktop

Summary

Arabic and other RTL comments in the browser annotation editor use the inspected page's text direction instead of the comment's own content. On a normal LTR page, the RTL comment is aligned incorrectly; on an RTL page, the entire annotation toolbar is mirrored.

Steps to reproduce
  1. Open any left-to-right page in the T3 Code desktop browser panel, for example https://example.com.
  2. Click Annotate preview.
  3. Select any element so the annotation comment editor appears.
  4. Type an Arabic comment, for example كبّر هذا العنوان.
Expected behavior

The comment field should infer direction from the entered text. Arabic, Hebrew, Persian, and other RTL comments should start from the right and preserve readable bidirectional ordering.

The annotation toolbar and editor controls should keep their own stable layout regardless of the inspected page's direction.

Actual behavior

The annotation comment field inherits the inspected page's direction:

  • On an LTR page, Arabic annotation text remains in an LTR field and is aligned/ordered incorrectly.
  • On an RTL page, the comment flows RTL, but the annotation chrome is also mirrored, including the tool order and Attach button placement.

This couples the annotation UI to the host document instead of handling the comment direction independently.

Impact

Minor bug or occasional failure. RTL users can enter a comment, but the field is awkward to edit and mixed RTL/LTR content such as URLs, selectors, and code tokens can be displayed in the wrong visual order.

Version or commit

Reproduced on 0.0.29-nightly.20260724.893 (ece05087a70e).

Environment

T3 Code desktop nightly, Linux/X11, Electron.

Screenshots, recordings, or supporting files

Actual behavior on an LTR page: the short Arabic comment is anchored to the left side of the field.

Arabic annotation comment remains LTR on an LTR page

Diagnostic control with the host page set to RTL: the same comment moves to the right, but the toolbar order and Attach button also reverse. This shows that the annotation overlay inherits direction from the inspected page.

Forcing the host page to RTL also mirrors annotation controls

Related but not duplicate: #1771 is a broad proposal for bidi-ready renderer styling and message bodies. This report is narrowly about the desktop preview annotation overlay and its comment textarea.

Technical note

Current main at 5719e8ac4020 creates the annotation <textarea> without a dir attribute. Giving the comment field content-based direction such as dir="auto", while explicitly isolating the annotation chrome from the host document direction, appears to be the smallest relevant scope.

Workaround

No practical per-comment workaround. Temporarily changing the inspected document's root direction to RTL also changes the page and annotation controls.

主要言語
TypeScript
スター
24.8k
フォーク
6.4k
平均マージ
12時間 40分
マージ済み PR（30日）
322

環境構築

Codespaces で開く

このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

pingdotgg/t3code のほかの issue

pingdotgg/t3code の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。