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

[Challenge] Create a rich text paragraph component #440

Open
brauliodiez opened this issue Oct 15, 2024 · 1 comment
Open

[Challenge] Create a rich text paragraph component #440

brauliodiez opened this issue Oct 15, 2024 · 1 comment
Assignees

Comments

@brauliodiez
Copy link
Member

brauliodiez commented Oct 15, 2024

Create a rich text paragraph component.

It should allow the user:

  • enter a mutline text (text should be truncated into new lines if in the text there's a \n like character, or if the text doesn't fit in the line.
  • Some sections can be wrapped with two asterisks (markdown like) to get bold text or italic indicator underscore or one asterisk to get italic text

A sample of the text:

This is a rich multline paragraph example, using markdown like, you can add in some sections of the content *bold text* _italic text_ as well, we could start with that.
 
There are some markdonw libraries that parses this

The expected result

Captura de pantalla 2024-10-15 a las 9 48 17

We can use @deletidev consts to make this more accurate.

Some tips to get started reasearching this (chat GPT magic :P):

## Objective:

You want to render multiline text with bold and italic markdown formatting using React Konva. Additionally, if a line of text exceeds the width of a shape, it should automatically wrap onto the next line.

Steps:

See comment below

@brauliodiez brauliodiez moved this to Backlog in QuickMock Oct 15, 2024
@brauliodiez brauliodiez moved this from Backlog to In Progress in QuickMock Nov 7, 2024
@brauliodiez brauliodiez moved this from In Progress to Backlog in QuickMock Dec 29, 2024
@brauliodiez
Copy link
Member Author

brauliodiez commented Dec 30, 2024

Forget the approach metioned before, right now the author of the libs says: parse the text, create a paragraph or similar then use HTML2Canvas (or similar library to convert it to image)

https://konvajs.org/docs/sandbox/Rich_Text.html

@brauliodiez brauliodiez moved this from Backlog to In Progress in QuickMock Dec 30, 2024
oleojake added a commit that referenced this issue Dec 31, 2024
brauliodiez added a commit that referenced this issue Jan 2, 2025
…paragraph-component

Feature/#440 create rich text paragraph component
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: In Progress
Development

No branches or pull requests

3 participants