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

feat: implement multi-styled text shape #1143

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

Eywek
Copy link

@Eywek Eywek commented Jul 2, 2021

fix #1131


The idea of this new shape is to be able to render text with multiple styles (i.e. char 0 to 10 is blue, char 10 to 20 is black and with another font size).

I've used the Text shape and updated it to be able to support this feature. I've added more types than in the text shape (i.e. in getters/setters & context types) and tried to add all methods in the class.

To apply styles to the text you need to provide textStyles property for each text part. I'm not sure that was the best approach, but it was the easier in my use-case and I haven't found any other easy way to do it.

I don't know if @lavrton plan to merge this, but maybe it could help some people that need this feature.
Since the new shape use the same logic as the text shape (text wrapping, underline...) maybe it could be a good move to merge them.
I haven't done any tests (excepts manual ones, and everything seems to work) and I don't really plan to do any of them soon, I don't have really the time for it.

Anyone who want to improve this PR is welcomed (I've allowed maintainers to edit this PR but I also can add users to my fork is someone want to update the branch).

@lavrton
Copy link
Member

lavrton commented Jul 5, 2021

@Eywek thanks a lot for sharing your work! I am going to think how to integrate it into Konva core. For now I don't want to merge with Konva.Text. Because it is already too complex. And supporting rich text inside it, will make it even harder.

But it may be a good idea for another shape.

@songispm
Copy link

something new? I need it.

@DavidVaness
Copy link

Any thought progress you can share on this feature @lavrton?

@aokaywe
Copy link

aokaywe commented Jun 17, 2023

I neet this feature.

@lavrton
Copy link
Member

lavrton commented Jun 19, 2023

Question to everybody who needs this feature. Do you need "read-only" multistyle text? Like a regular Konva.Text shape? Or do you expect some ability to change it with the editor?

@JamieBohannaWebDev
Copy link

For me, I think the read-only would suffice. I have recreated rich text (excluding multi styles for a single text shape) formatting by listening to QuillJS for formatting changes and applying them to Konva.Text shape manually each time.

@DavidVaness
Copy link

I have to agree with @JamieBohannaWebDev here, we are also using quill for the editor part.
The readOnly variant would already be really helpful to us

@joaodiogocosta
Copy link

Read-only 👍

@OtterlyOlive
Copy link

Any update on this? 😊
Read-only would be very very useful!

@5opr4ni
Copy link

5opr4ni commented Apr 23, 2024

Read only, would be most useful.

@Offbeatmammal
Copy link

a read-only option to render an html/css styled block would be awesome. editing could be done using something like popline (similar to the 'complex' text demo) but having styled text objects would be fantastic

@tjrchampion
Copy link

Yep, read only would be fantastic. html2canvas option just isn't good enough. If i wanted to use this today without it being added to konva core, how would i go about it?

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