nodebb-plugin-composer-quill: WYSIWYG alternative to redactor

JJSagan

Unfortunately Quill does not use textarea to store html code representing the edited text, but has its own JSON-like format. On the negative side, the default composer implementation will not work. On the positive side, this is a big plus for security, as someone can't just paste HTML and have that break the server. That does not mean we should not implement code-sanitize on the server side, as someone can post evil code that will be converted to html when other users view posts.

Note that I edited my post above to include my final emoji-dialog code. It will now insert the emojis into the proper place, and also allow emojis in the post tile as an added bonus.

Have a good weekend!
JJ.

PitaJ

@JJSagan does redactor have a textarea doing that? I didn't think it did. The purpose of the composer API is so that these manual implementations don't have to be done. If there are changes we need to make to the API for it to work with quils model, we can do that.

PitaJ

Let me expand on that. The textarea parameter doesn't have to be an HTML textarea. Really, all it is in the context of the API is an object on which the various helper functions in composer/controls operate. Realistically, you can either ignore it or provide a mock object emulating some of its behavior (like the selectionStart and selectionEnd properties).

Edit: another thing. Right now it looks like you're just pushing in the parsed HTML of the emoji. I'm sure this works and has the advantage of showing up in the preview. However, this isn't ideal because parsed emojis link directly to the emoji images. If the forum switches emoji packs, these will all break since they are not parsed server-side when a post is requested, but rather stored as pre-parsed HTML.

JJSagan

Hi @PitaJ

In Composer and Redactor, you have one lumped textarea. The plugin can insert anything to it, as html. The text area is saved in the db, as-is.

So for example, in Composer/Redactor, the phrase: "Gandalf the Grey" would be saved as is, or maybe as "<p>Gandalf the Grey</p>" however with Quill, you'd get:

delta = {
  "ops": [
    {
      "insert": "Gandalf the Grey\n"
    }
  ]
}

Read about delta here: https://quilljs.com/docs/delta/

As you can see, with quill, the notion of pushing "textarea" around (for example, in composer handlers) simply does not work. Perhaps for a unified architecture, consider pushing just the "composer.active" (uuid, source of events) and the changes.

As such, a unified composer would receive changes from the plugins, in the form of (composer.active, index, len, data), and translate these changes to the editors (whether in html or delta format), without user intervention or knowledge.

A good place to start is reviewing the quill's APIs, https://quilljs.com/docs/api/. They may perhaps provide an idea how composer APIs can be enhanced.

JJ.

JJSagan

@PitaJ ,
That's possible. Perhaps that's the way to go. Note I ignored textarea to make the emoji work, exactly like you described.

JJSagan

Hi @PitaJ ,

I can look into changing the store format.
May I assume you would like to see emojis stored as follows: :${name}: - for example: " "

Can you please let me know what function i can call to render the emoji? is the function accepting ":${name}: " returns html link?

Rendering the emojis in posts should be possible (i'll have to write a small blot).
However, displaying the emojis inside quill editor may prove challenging as I'll have to write a plugin for quill.

One Q/D solution is to use the store a link (as I do now), but just before the post is sent out for storage, to replace the link with :${name}:. However, long term you may want to capture text such as and automatically replace with emoji, so a quill plugin may make more sense.

Looking forward for your response,
JJ.

PitaJ

@JJSagan said in nodebb-plugin-composer-quill: WYSIWYG alternative to redactor:

Can you please let me know what function i can call to render the emoji?

The function you're looking for is buildEmoji: https://github.com/NodeBB/nodebb-plugin-emoji/blob/master/public/lib/emoji.ts#L7

You have to pass in the emoji object, which you get from the table. Both are exported from the emoji requirejs module.

JJSagan

Hi @PitaJ ,

Looks like I am failing to do this from a quill-plugin. Note however, I am pretty novice, and perhaps lack sufficient knowledge to make it work.

May I propose to insert the emoji name and bitmap (without the link) into the editor. That will enable the emoji to display properly inside the editor prior to saving. When the post data is read from the DB on its way to the client, the client will use the :CODE: and replace the bitmap, that is PRIOR to rendering or editing by quill again.
The disadvantage is client processing time on scanning/updating the delta.
Your thoughts?
JJ.

JJSagan

Hi @PitaJ did you and @julian reach any conclusions how to address the emojis? is there anything else you guys need help with, so we can make this plugin perfect?

julian

Not yet, but one problem at a time. There are a lot of posts here in this thread!

Keep in mind emoji already work in Quill, just not the toolbar selector and it doesn't show the emoji in the editor itself. Right now it just shows :laughing: or whatnot, which is acceptable, but of course, not 100%. I put in a bit of effort at the start to ensure the autocomplete is working (because mentions requires it as well), so the emoji autocomplete works as expected as well.

julian

Success!

The autocomplete doesn't automatically convert yet, and the emoji window doesn't work, but we're getting there.

julian

The emoji autocomplete works now. Will have to create a new Emoji Blot in Parchment to handle the proper classes and such... but theoretically should be fine.

JJSagan

Hi @julian great job!
I reviewed the github page, and looks like you were able to reproduce the issues I mentioned.
I noted that you have bypassed rendering quill by keeping two versions of the post, one in html and one in delta. That will solve a lot of issues down the line, so I completely understand.
Kindly consider:

Fixing the tooltips,
Allowing icons in the chat windows.
Move the tag below the topic (so it may appear in mobile).
All have a potential solution above.

Do you need help with anything?
LMK,
JJ.

julian

Emoji are now the correct size, some more work needs to be done in chat, but glad to get Emoji blots working.

JJSagan

@julian ,
Great work, thank you!
With composer, when someone posts a link, you see a description of the link - example:
https://github.com/NodeBB/NodeBB/issues/6911

How can that be integrated into Quill?

Per0x

@JJSagan Hello, do you have any idea when the plugin will be added to NPM?
I wouldn't know how to clone it as you suggested above, and this plugin looks great!

julian

@Per0x aiming for some time in Q2, though no definite timeline

JJSagan

Hi @Per0x , I see @julian already addressed your comments.
I would not suggest cloning it now, unless you have some programming skills.
A lot of work has been done, but still there are few things that are yet to be accomplished, see list here: https://github.com/NodeBB/nodebb-plugin-composer-quill/issues. I guess we'll have to wait till Q2.
In the meantime, Quill is working on v2 so lots of good things to wait for

Kosiak

@JJSagan
Sorry, what do you mean by Q2?

JJSagan

Hi @Kosiak
See @julian 's reply. I guess he is planning to get plugin done by July.