Skip to content

Customize line height for headings #535

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 30 commits into
base: main
Choose a base branch
from
Draft

Conversation

tomekzaw
Copy link
Collaborator

@tomekzaw tomekzaw commented Nov 5, 2024

Details

This PR adds h1.lineHeight to markdownStyle. If not set, MarkdownTextInput will use OS-default line height (appropriate to h1.fontSize). If set, this will override OS-default line height.

Looks like Codegen still doesn't have proper support for Float | undefined (and neither for Float | null) so I had to go with -1 as the default value.

Closes #522.

Related Issues

#522
Expensify/App#52827 (comment)

Manual Tests

Linked PRs

@tomekzaw

This comment was marked as resolved.

@SzymczakJ

This comment was marked as resolved.

@SzymczakJ

This comment was marked as outdated.

@tomekzaw

This comment was marked as outdated.

@tomekzaw

This comment was marked as resolved.

@tomekzaw

This comment was marked as resolved.

@tomekzaw

This comment was marked as outdated.

@tomekzaw

This comment was marked as outdated.

@tomekzaw
Copy link
Collaborator Author

TODO: fix font size or line height when adding newline after heading (reproducible on 7ceeadc)

Screenshot 2025-03-14 at 16 12 54

@tomekzaw
Copy link
Collaborator Author

tomekzaw commented Mar 14, 2025

Test cases with screenshots from 7ceeadc:

  • without lineHeight and without h1.lineHeight
    Screenshot 2025-03-14 at 16 26 32
  • with lineHeight: 30 and without h1.lineHeight
    Screenshot 2025-03-14 at 16 26 41
  • without lineHeight and with h1.lineHeight: 60 ⚠️ requires patch to react-native
    Screenshot 2025-03-14 at 16 26 50
  • with lineHeight: 30 and with h1.lineHeight: 60
    Screenshot 2025-03-14 at 16 26 59
  • h1 nested in blockquote ✅
    Screenshot 2025-03-14 at 16 28 08
  • h1 nested in double blockquote ✅
    Screenshot 2025-03-14 at 16 28 16
  • line height in new line after h1 ❌
    Screenshot 2025-03-14 at 16 27 11

@tomekzaw
Copy link
Collaborator Author

tomekzaw commented Mar 14, 2025

The absence of react-native patch makes a difference only in a case when lineHeight is not set but h1.lineHeight is set. The behavior of MarkdownTextInput is identical to RN's built-in TextInput (notice the incorrect height resulting in visible padding below the text).

without patch with patch
Screenshot 2025-03-14 at 16 32 56 Screenshot 2025-03-14 at 16 33 19
Screenshot 2025-03-14 at 16 35 50 Screenshot 2025-03-14 at 16 35 23
<TextInput
  multiline
  style={{borderWidth: 1, width: 300, fontSize: 20}}
  ref={ref}
  placeholder="Type here...">
  First line{'\n'}
  <Text style={{fontSize: 30, lineHeight: 60}}>Second line</Text>
  {'\n'}Third line{'\n'}Fourth line
  {'\n'}
  Fifth line
</TextInput>

Setting lineHeight in TextInput fixes the problem:

Screenshot 2025-03-14 at 16 40 17

@tomekzaw
Copy link
Collaborator Author

TODO: fix placeholder vertical alignment on iOS

Screenshot 2025-03-14 at 16 49 55

@tomekzaw
Copy link
Collaborator Author

tomekzaw commented Mar 18, 2025

TODO: fix cursor position when text is empty and lineHeight: 30 is set

Screenshot 2025-03-18 at 10 28 00

edit: it works without MarkdownTextInputDelegate 😢

Screenshot 2025-03-18 at 10 30 59

@tomekzaw tomekzaw marked this pull request as draft March 26, 2025 11:23
@tomekzaw
Copy link
Collaborator Author

Waiting for facebook/react-native#51344.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Simplify MarkdownLineHeightSpan logic
3 participants