Blazorise icon indicating copy to clipboard operation
Blazorise copied to clipboard

Feature: RichTextEdit based on roosterjs

Open njannink opened this issue 1 year ago • 9 comments

njannink avatar Mar 23 '23 23:03 njannink

Still lot of work to do, but it's easy to create a rooster editor. I added a utility function for loading scripts on demand. Some similar logic is also present in the old RichTextEdit, but I think this way is more elegant

njannink avatar Mar 23 '23 23:03 njannink

By a quick glance at the code, it seems like a clean solution.

stsrki avatar Mar 24 '23 09:03 stsrki

I'm testing the PR. Not sure if I can't find it or if it doesn't exist at all. Does roosterjs have a way of defining the UI buttons internally? Or must users create them and then connect them with the API calls?

stsrki avatar Mar 29 '23 13:03 stsrki

I will do another push soon to show how it works. roosterjs doesn't have any toolbar functionality. So you have to build your own bar. But that will give all the styling and customization options to the user so I think its actually good. Keybindings do work out of the box like Ctrl+B etc

<Buttons>
   <Button Clicked="() => rte.Format(Action.Bold)">B</Button>
   <Button Clicked="() => rte.Format(Action.Italic)">I</Button>
   <Button Clicked="() => rte.Format(Action.Underline)">U</Button>
</Buttons>
<RichTextEdit @ref="rte" />

njannink avatar Mar 29 '23 13:03 njannink

this is still on my todo list. I hope to be able to pick this up again sometime soon to be able to merge away from QuillJS

njannink avatar Sep 25 '23 15:09 njannink

@njannink What do you think of this? https://github.com/Megabit/Blazorise/issues/5077

stsrki avatar Oct 18 '23 15:10 stsrki

@stsrki I have been working a bit on this again. Have a look at the command system that I added. This will allow users to bind buttons, drop-downs etc to formatting command and gives you the option to build your own toolbar. Maybe we could ship a few predefined toolbars/layouts to make it easier to start using.

Still quite some work to do and some commands don't work somehow

njannink avatar Mar 13 '24 17:03 njannink

You made a lot of work this time. Thanks. Will look into it.

Btw, I was thinking a lot about RTE, and I think for the future, maybe in Blazorise v2 it would be best to organize RTE similar to core Blazorise. And then have each implementation separate of the core project.

eg.

  • Blazorise.RichTextEdit
  • Blazorise.RichTextEdit.Quill
  • Blazorise.RichTextEdit.Rooster

stsrki avatar Mar 13 '24 19:03 stsrki

You made a lot of work this time. Thanks. Will look into it.

Btw, I was thinking a lot about RTE, and I think for the future, maybe in Blazorise v2 it would be best to organize RTE similar to core Blazorise. And then have each implementation separate of the core project.

eg.

  • Blazorise.RichTextEdit
  • Blazorise.RichTextEdit.Quill
  • Blazorise.RichTextEdit.Rooster

I have looked at this a bit, but there is limited common ground between the 2 editors. QuillJS really comes with a buildin toolbar etc and Rooster doesn't. So yes it might be good to rename the current RichTextEdit to RichTextEdit.Quill, but I think that a common library doesn't add that much.

njannink avatar Mar 13 '24 21:03 njannink