oqtane.framework icon indicating copy to clipboard operation
oqtane.framework copied to clipboard

[ENH] RichTextEditor with Quill

Open maxmontgmx opened this issue 1 year ago • 6 comments

Hi all, I'm looking at RichTestEditor which is using Quill JS component. It misses some feture for my needs. I manage to get keyboard event by giving back the index of cursor. Now I try to get the line (text) where the cursor is. It's exist getLine function in Quill API but I don't know getting the content of the line

I did : let [line, offset] = editorElement.__quill.getLine(index)

But I don't know what I have to do after.

If somebody knows how "Block Blot" is working, it would be great.

I have already post on quill github for help without response.

Thanks in advance for your help

maxmontgmx avatar Jun 28 '24 13:06 maxmontgmx

@maxmontgmx I would encourage you to look at #4358. The 5.2 release will include an abstraction for RichTextEditorProviders. This will enable developers to create alternative providers. This abstraction is going to change how RichTextEditors can be customized. The code in the Dev branch already has a partial implementation of the abstraction but there will be some more changes required. What I would suggest is that in 5.2 you will have the ability to create your own QuillJS editor where you will have the ability to customize it based on your requirements (ie, you will not need to rely on the Oqtane framework to provide specific features you need in the editor).

sbwalker avatar Jun 28 '24 13:06 sbwalker

@sbwalker , I wrote a new js file which extends the js fie in the framework. My JS file is located in my module. And it's working like that. And quill editor is great, I don't want to use another one. My question is specific to quill function GetLine

maxmontgmx avatar Jun 28 '24 14:06 maxmontgmx

@maxmontgmx in 5.2.0 the Quill editor will continue to be the default RichTextEditor provided with the framework.

I do not have any experience customizing the Quill editor. Perhaps someone else will be able to assist you.

sbwalker avatar Jun 28 '24 14:06 sbwalker

I think I was not so clear. I dont want to customize quill editor. Just want to get Line content text where thé cursor is. Could be implemented in the richtexteditor component. Thanks

maxmontgmx avatar Jun 28 '24 19:06 maxmontgmx

You can leave this item open. Technically it is an enhancement so I will mark it as such in the title as this is how Issues are managed (and also why there are templates for creating Issues).

The RichTextEditorProvider abstraction and Search capability are the highest priorities at the moment so it likely will not be included in the 5.2 release. In addition, the RichTextEditorProvider abstraction will change the patterns for how RichTextEditors can be extended so this change would need to wait until after the provider model is finalized.

sbwalker avatar Jun 29 '24 00:06 sbwalker

@sbwalker I found the solution to my issue getQuillLine: function (editorElement, index) { var [line, offset] = editorElement.__quill.getLine(index) if (line) { var lineStartIndex = editorElement.__quill.getIndex(line); var lineText = editorElement.__quill.getText(lineStartIndex, line.length()); return lineText; } return null; }, it could be usefull for other guys... Thanks

maxmontgmx avatar Jul 01 '24 09:07 maxmontgmx

@maxmontgmx is there any action required on this issue? With the text editor abstraction in 5.2, this customization would need to be added to the QuillJSTextEditor rather than the RichTextEditor.

sbwalker avatar Jul 27 '24 14:07 sbwalker

Well, Quill basically has a problem on iOS safari with 2byte character set fonts like Korean fonts. I would rather use tinyMCE but the license is GPL.

KyleDEV avatar Aug 30 '24 01:08 KyleDEV

With the ability to create custom RichTextEditors which was released in 5.2, customizations for specific scenarios such as the one described in this thread should be done in a custom provider. I will close this item.

sbwalker avatar Sep 18 '24 12:09 sbwalker