[Feature request] Vertical spacing (margins) for headings and lists in htmlStyle

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

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

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

2026年10月23日 から。

  • #838 @henrikra による — オープン

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
20/100
issue の種類
機能追加
明瞭さ
明確に書かれている
活発さ
停滞
技術スタック
android, css, ios, react-native
領域
frontend, mobile

調査の方向性

The request covers htmlStyle rendering in EnrichedTextInput and EnrichedText on iOS, Android, and web; an open linked pull request (#838) is already addressing it. For context, compare the sibling library's ParagraphStyleUtils.m and MarginBottomSpan.kt, linked in the issue, and review the proposed examples and platform behaviors. Done means block margins work across platforms while leaving HTML, plain text, and selection offsets unchanged.

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

説明

enhancement

Is your feature request related to a problem? Please describe.

This is the separate request @kacperzolkiewski asked for in #259: a way to add vertical space around block elements.

We render the same HTML with EnrichedTextInput on web and on native. On web we style it with CSS: margin: 18px 0 8px on h1–h3, margin: 6px 0 on ul/ol, and line-height: 1.55. On native we can match the line height with the lineHeight style, and soon on EnrichedText too (#724). But we can't add space above or below headings or lists. HeadingStyle only has fontSize and bold, on main as well.

As a result, headings sit flush against the paragraph before and after them. Long documents read as one dense block on phones, while the same document looks well spaced on web. Our users reported exactly this.

Describe the solution you'd like

Per-block vertical spacing in htmlStyle, for both EnrichedTextInput and EnrichedText:

htmlStyle={{
  h2: { fontSize: 20, bold: true, marginTop: 18, marginBottom: 8 },
  ul: { gapWidth: 8, marginLeft: 20, marginTop: 6, marginBottom: 6 },
}}
  • iOS: paragraphSpacingBefore on a block's first paragraph and paragraphSpacing on its last.
  • Android: a span that adds top and bottom space.
  • Web: CSS margins.

The spacing should be visual only, with no change to the HTML, the plain text or selection offsets. #470 (paragraphSpacing for checkbox lists) is a similar idea for one block type.

The sibling library react-native-enriched-markdown already ships this API in its renderer: markdownStyle.h1–h6 take marginTop and marginBottom (docs).

Matching those prop names and behaviours here would keep the two libraries consistent. One difference for an editor: the space above a block should come from paragraphSpacingBefore rather than an inserted spacer character, so the text and offsets stay unchanged.

Describe alternatives you've considered

  • Inserting <br> around headings before rendering: the editor then saves those <br>s back into the document.
  • A large lineHeight: it spreads out every line, not just the gaps between blocks (as noted in #259).

Additional context

react-native-enriched-html 1.1.1, React Native 0.86.3, Expo SDK 57, tested on the iOS 18.6 simulator.

主要言語
C
スター
1.4k
フォーク
74
平均マージ
3日 4時間
マージ済み PR（30日）
18

環境構築

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートあり
  • コントリビューションガイドなし

はじめの一歩

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

software-mansion/react-native-enriched-html のほかの issue

software-mansion/react-native-enriched-html の issue をすべて見る

似ている issue

C の issue をもっと見る

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

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