Skip to content
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

Bulleted list render with ul/li html tags #290

Open
maltsev-gorskij opened this issue Jun 2, 2024 · 3 comments
Open

Bulleted list render with ul/li html tags #290

maltsev-gorskij opened this issue Jun 2, 2024 · 3 comments

Comments

@maltsev-gorskij
Copy link

Hello.

Got two problems related to bulleted list render from html source.
For example this code block

<strong>Sample header:</strong>
<ul>
   <li style="font-size:13px;">Long multiline text. Long multiline text. Long multiline text.</li>
   <li style="font-size:13px;">Long multiline text. Long multiline text. Long multiline text.</li>
</ul>

render this
image

with this composable function

@Composable
fun HtmlContent(
    html: String,
    modifier: Modifier = Modifier,
    textStyle: TextStyle = MyTheme.typography.body14Normal
) {
    val state = rememberRichTextState()

    LaunchedEffect(html) {
        state.setHtml(html)
        state.selection = TextRange.Zero
    }

    BasicRichTextEditor(
        state = state,
        enabled = false,
        readOnly = true,
        textStyle = textStyle,
        modifier = modifier
    )
}

Here i have two problems

  1. Can you please explain or give some example of how can i control padding from the start of the line to dot icon rendered by <li> tag? For now, padding of list items from the start of the line is really big and i want to control it somehow.
  2. Second line of multiline <li>Some long multiline text</li>are moved to the left by comparison to the first line. Maybe i have done something wrong and it is possible to have all lines start from the same point?
    Look at this sample picture. Here "m" character somehow must be under "L" character
    image
@Deorigami
Copy link

do you have solution for this ?

@MohamedRejeb
Copy link
Owner

Hi,
Thanks for opening this issue.

  1. You can control the padding of lists using: richTextState.config.listIndent = 28
  2. That's not the correct behavior, I will fix it.

@maltsev-gorskij
Copy link
Author

Hi, Thanks for opening this issue.

  1. You can control the padding of lists using: richTextState.config.listIndent = 28
  2. That's not the correct behavior, I will fix it.

Thanks a lot. I'll try this config param and wait for my second problem hotfix!

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

No branches or pull requests

3 participants