nodebb-plugin-composer-quill: WYSIWYG alternative to redactor
-
The issue occurs in emoji.js at line 100:
exports.search = fuzzySearch; formatting.addButtonDispatch('emoji-add-emoji', function (textarea) { new Promise(function (resolve_4, reject_4) { require(['emoji-dialog'], resolve_4, reject_4); }).then(function (_a) { var toggleForInsert = _a.toggleForInsert; return toggleForInsert(textarea); //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! this line }); }); if (callback) { setTimeout(callback, 0); }
-
Line 100 toggleForInsert(textarea) articulates the issue I discussed earlier.
Unfortunately with quill, one cannot write into the text area. The quill format is a bit different.
Maybe you can return a link to quill-nbb.js so we can take care of inserting the data property there.
Another option is for you to check if quill is in use, and then you may:
quill.insertText(ptr, markup_txt, {
"align": "??",
"color": "??",
});
where ptr is the point to which the icon should be inserted. I assume you are not saving a bitmap but a link. To that end please take a look at quill-nbb.js specifically at image upload. Once a link is uploaded quill can display it. -
While I don't like to have individual plugins integrate with Quill, sometimes it is necessary. For example, many plugins detect whether Redactor is in use, and hook methods directly into Redactor.
It is my hope that this will not be necessary with Quill, but one never knows -- with regard to the emoji in my screenshots, the emoji plugin works fine with Quill but only if you type in the
:smile:
code yourself. Otherwise it will not work as you discovered, because the plugin does not know how to insert text/images into the Quill contenteditable.I do not have time this month to work on Quill, but there is hopefully time scheduled in October I look forward to getting it to 100% compatibility so we can bundle it with NodeBB in addition to composer-default.
-
No problemo @Kosiak , do check back on this plugin after October.
If you are looking for WYSIWYG then I believe this could be the solution for you, since Redactor unfortunately may be on its way out.
Take care and good luck with your forum!
btw: i started few months ago as none-coder like you (and yeah I still suck...), so be careful you might get addicted and convert -
Hi @PitaJ .
I am trying to debug nodebb-plugin-emoji and make it work with quill.
I cloned your depository, and compiled, however I can't see the sourcemaps of emoji-dialog.ts.
I tried changing tsconfig.json to include: "inlineSourceMap": true, "inlineSources": true, but still no sourcemap. Interestingly, emoji-setup.js does have a sourcemap.
Any idea what I am doing wrong?
Thank you!
JJ. -
Hi @PitaJ
Its difficult without a debugger, but I am quite confident the issue stem from showDeferred function - see init in emoji-dialog.js and look for getBoundingClientRect.
Either tabContent[0] or elem (from callback) are undefined.The above code gets executed upon clicking the emoji icon in quill, that is, as a result of the dispatcher:
formatting.addButtonDispatch('emoji-add-emoji', function (textarea) { new Promise(function (resolve_4, reject_4) { require(['emoji-dialog'], resolve_4, reject_4); }).then(function (_a) { var toggleForInsert = _a.toggleForInsert; return toggleForInsert(textarea); }); });
Console output:
Failed to initialize emoji dialog TypeError: Cannot read property 'getBoundingClientRect' of undefined at n (emoji-dialog.js?v=q79j5o5953s:1) at emoji-dialog.js?v=q79j5o5953s:1
I wonder if this gives you any clue with regards to a potential fix.
JJ. -
@JJSagan I'll look into it and see if I can find a solution in the coming days.
-
While reviewing the composer redactor code, I noted you are using a special set of emojis, rather than nodebb-plugin-emoji.
To that end, I took another look at rendering the quill-emoji plugin (https://github.com/contentco/quill-emoji), that is, without using a deadbeat quill editor. See an earlier post how to install.
The solution was to write a customized rendering code using converter.renderCustomWith(). See my suggested changes to library.js:
plugin.parseRaw = function (raw, callback) { //Convert delta strings if((raw != null) && (raw.hasOwnProperty("ops"))) { raw = JSON.stringify(raw); } try { var unescaped = raw.replace(/"/g, '"'); var content = JSON.parse(unescaped); var converter = new QuillDeltaToHtmlConverter(content.ops, {}); converter.renderCustomWith(function(customOp, contextOp){ if (customOp.insert.type === 'emoji') { return `<span class="${customOp.attributes.class}" src="${customOp.insert.value}"><span contenteditable="false"></span></span>`; } else { return 'Unmanaged custom blot!'; } }); raw = converter.convert(); } catch (e) { // Do nothing winston.warn('[composer-quill] Input not in expected format, skipping. - ', raw); } callback(null, raw); };
I'll play with it some more, but so far it looks solid.
Perhaps its better to use quill-emoji (over nodebb-plugin-emoji), to insure long term compatibility with quill.JJ.
-
Hi @julian
One disadvantage to quill-emoji is that they are using data-uri. Rendering the pack upon refresh is slow. The png file is huge and re-downloaded for some reason on each refresh. Offloading the png to S3 also proves to be very difficult (its currently under /public).
It should be possible to integrate nodebb's plugin. I tried but its difficult to work without a debugger (for some reason I can't access the source map due to webpack config - see post above). Nevertheless I pinpointed the problematic code and asked @PitaJ for some help. Wish I had the source map available...
JJ.
-
Hi @PitaJ
My apology, I can't figure out how to create source map in nodebb-plugin-emoji, specifically for emoji-dialog.js. Can you please help? I'd like to work-around the issue we are having with quill, so that @julian won't have to spend his time on this.
A bit of guidance and i'll be on my way, scouts-honor! (no three finger emoji...).
Thank you in advance!
JJ. -
@JJSagan I never really needed the sourcemap file on the client side since the compiled unminified js code is essentially the same as the typescript source. Are .map files not being generated in the build directory alongside the compiled js files?
-
Hi @PitaJ ,
The issue with source map was my bad: emoji-dialog.js is compiled as module and I was working in dev mode, so the code got minified by nodebb engine. Switched to prod, and able to work.
Now for the goodies, in emoji-dialog.js kindly consider adding the following code in line 174:
//if Quill if(document.querySelectorAll('button.ql-emoji-add-emoji').length) opener = (<HTMLScriptElement[]><any>document.querySelectorAll('button.ql-emoji-add-emoji'))[0];
In a nutshell, opener is undefined when Quill is used, specifically because the emoji icon is placed on a different bar belonging to quill. The above code checks if Quill emoji selector exists, and if so properly assigns opener.
nodebb-plugin-emoji is without a set, so I installed nodebb-plugin-emoji-one, and... we have emojis displayed in the modal. Next I need to figure out how to insert them into quill.
Stay tuned.
JJ. -
Finally got nodebb-plugin-emoji working on Quill.
As an added bonus, the emojis can be used inside the post AND in the title bar.In emoji-dialog.js make the following changes, allowing quill to work side by side with composer.
- Top of file, add import:
import { active as activeComposer } from 'composer';
- In toggle, update opener if quill is available:
export function toggle( opener: HTMLElement, onClick: (e: JQuery.Event, name: string, dialog: JQuery) => void, ) { function after(dialog: JQuery) { if (dialog.hasClass('open')) { dialogActions.close(dialog); return; } dialog.off('click').on('click', '.emoji-link', (e) => { e.preventDefault(); const name = (e.currentTarget as HTMLAnchorElement).name; onClick(e, name, dialog); }); //If Quill if($('[data-uuid="' + activeComposer + '"] .ql-container.ql-snow')) opener = (<HTMLScriptElement[]><any>document.querySelectorAll('button.ql-emoji-add-emoji'))[0];
- Update toggleForInsert as follows. Note the changes allowing emojis in title bar:
export function toggleForInsert(textarea: HTMLTextAreaElement) { toggle($('[data-format="emoji-add-emoji"]').filter(':visible')[0], (e, name) => { var quill = $('[data-uuid="' + activeComposer + '"] .ql-container.ql-snow').data("quill"); if(quill) { var range = quill.getSelection(); if (range) { if (range.length == 0) { //User cursor is at index } else { //User has highlighted text - deleting and replacing with emoji quill.deleteText(range.index, range.length); } quill.clipboard.dangerouslyPasteHTML(range.index, (<HTMLElement>(<HTMLInputElement>e.currentTarget).children[0]).outerHTML); return; } //User cursor is not in editor (range is null) -> change focus to the title's textarea textarea = <HTMLTextAreaElement>(<any>(<HTMLScriptElement>document.querySelectorAll('.composer.resizable[data-uuid="' + activeComposer + '"] input.title.form-control')[0])); var text = <string>(<any>(<HTMLInputElement>e.currentTarget).children[0]).alt; var selectionStart = <number>(<any>(<HTMLScriptElement>document.querySelectorAll('.composer.resizable[data-uuid="' + activeComposer + '"] input.title.form-control')[0])).selectionStart; var selectionEnd = <number>(<any>(<HTMLScriptElement>document.querySelectorAll('.composer.resizable[data-uuid="' + activeComposer + '"] input.title.form-control')[0])).selectionStart; } else { var text = `:${name}: `; var {selectionStart, selectionEnd} = textarea; } var end = selectionEnd + text.length; var start = selectionStart === selectionEnd ? end : selectionStart; insertIntoTextarea(textarea, text); updateTextareaSelection(textarea, start, end); $(textarea).trigger('input'); }); }
Note I am using dangerouslyPasteHTML that slightly changes the link/img html of the emoji element (for example, removes emoji classes). We can use the quill converter from quill-delta-to-html, perhaps it will make a slightly better job, or hardcode ourselves, that is, if these classes means anything...
As for dangerouslyPaste, using the converter above will not make it any safer. We have to sanitize the delta in the server. Any attempts to sanitize in the client are futile, as someone can just take over the client code and push whatever he wants to the server...
JJ.