hub-client: "Expand markup" and "Expand preview" should hide the other pane instead of shrinking it

オープン
  • 何か問題がありますか？
#1,037 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

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

まだ誰も着手していません。

評価

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

調査の方向性

Start with hub-client/src/components/ViewToggleControl.tsx and hub-client/src/components/Editor.tsx to trace how split presets reach the pane layout; then read hub-client/src/components/Editor.css and hub-client/src/components/DocumentTopBar.tsx. Check how PreviewRouter supplies diagnostics before changing pane visibility. Done means each expand button hides the other pane and divider, equal split restores both with current content, diagnostics keep updating, and files without previews remain unchanged.

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

説明

Goal

In the editor's document header, "Expand markup" and "Expand preview" hide the other pane instead of shrinking it. "Split equally" is unchanged.

Today each expand button moves the pane divider to its drag limit, which leaves the other pane at 15% of the editing area's width. The markup pane is the source editor on the left. The preview pane is the rendered document on the right.

Done means:

  • After "Expand markup", only the markup pane is on screen. After "Expand preview", only the preview pane is. Nothing of the other pane remains, divider included.
  • "Split equally" brings both panes back at 50/50, and the pane that was hidden shows the current content.
  • The button for the current layout shows as active.
  • The editor's diagnostics (error markers in the markup pane) keep updating while the preview is hidden.
  • Files with no preview pane (images, plain-text files such as .yml or .css) behave as today: the buttons stay disabled and the editor stays visible.

Why

A shrunk pane is a narrow strip that only makes sense to someone who already knows what it is.

  • "Expand preview" leaves the markup as a 15% column of squashed raw text next to the rendered document. A user who knows little Markdown and works in the preview, where paragraphs can be edited in place (WYSIWYG), reads that column as noise.
  • "Expand markup" has the mirror problem: the rendered document is squeezed into a narrow 15% column.
  • A hidden pane gives the chosen pane the whole width, and the screen shows what the button says.
  • The header's fullscreen-preview action is not a substitute: it also hides the header and the sidebar.

The presets mirror the drag limits today (see the comment above SPLIT_PRESETS). This issue suggests letting the two expand buttons go past them, while a drag keeps its 15–85% limits.

References

Code pointers (main at f4a3853):

  • hub-client/src/components/ViewToggleControl.tsx: the three buttons; SPLIT_PRESETS 0.85 / 0.5 / 0.15.
  • hub-client/src/components/DocumentTopBar.tsx: renders the buttons from splitFraction, onSetSplit and splitDisabled.
  • hub-client/src/components/Editor.tsx: editorPaneFraction, handleSetSplitPreset (does not clamp), the drag handler (clamps to 0.15–0.85), each pane's flex, and the .pane-divider.
  • hub-client/src/components/Editor.css: .pane, .pane-divider, .split-animating.

One possible approach, from reading the code (not tried in a browser):

  • Have the expand buttons send 1 (markup only) or 0 (preview only) instead of 0.85 or 0.15. A drag cannot produce either value, so they can identify the collapsed state.
  • Hide the collapsed pane and the divider, for example with CSS keyed on that state.
  • Hide the preview rather than unmount it: PreviewRouter feeds the editor's diagnostics (onDiagnosticsChange).
  • The viewMode modes ('markup' and 'preview' in ViewModeContext.tsx, with the .view-mode-* rules in Editor.css) are no shortcut: nothing calls setViewMode, and those rules shrink the other pane to a strip of roughly 120–220 px instead of hiding it.
主要言語
Rust
スター
293
フォーク
20
平均マージ
12時間 21分
マージ済み PR（30日）
178

環境構築

はじめの一歩

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

quarto-dev/q2 のほかの issue

quarto-dev/q2 の issue をすべて見る

似ている issue

Rust の issue をもっと見る

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

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