RotherOSS / otobo

OTOBO is one of the most flexible web-based ticketing systems used for Customer Service, Help Desk, IT Service Management. https://otobo.io/
GNU General Public License v3.0
248 stars 71 forks source link

Typing in the CKEditor 5 is ridiculously slow #3584

Open escix opened 2 months ago

escix commented 2 months ago

Hi Team, When I reply to email tickets, it takes long time for the typing to display on the screen. Like 10 to 20 seconds. Which makes it hard to know if there's any spelling mistakes while typing.

svenoe commented 2 months ago

Hi escix,

this can happen for really long emails, and to our understanding especially if there are a lot of nested citations. "Normal" sized emails should not have this problem, though (I tested one with 15000 characters right now again, to be able to give a number, which, on my pc didn't have any issues). CK5 is a topic still in various places in any case, unfortunately we had to make the change, because CK4 is not updated anymore. CK5 was completely rewritten and has some drawbacks, which we are not totally happy with, ourselves.

Currently for this specific issue I can only say, that we are aware, and that it has a relatively high priority, but that we do not know of an "easy fix".

Best regards, Sven

escix commented 2 months ago

Hi escix,

this can happen for really long emails, and to our understanding especially if there are a lot of nested citations. "Normal" sized emails should not have this problem, though (I tested one with 15000 characters right now again, to be able to give a number, which, on my pc didn't have any issues). CK5 is a topic still in various places in any case, unfortunately we had to make the change, because CK4 is not updated anymore. CK5 was completely rewritten and has some drawbacks, which we are not totally happy with, ourselves.

Currently for this specific issue I can only say, that we are aware, and that it has a relatively high priority, but that we do not know of an "easy fix".

Best regards, Sven

Hi Sven, Thanks for the quick response. I recall when replying only a limited lines from original email was included. Not sure where this setting was, but I may have to revisit this to limit the number of lines from the original email in the reply.

bschmalhofer commented 2 months ago

The referenced commits actually belong to #3583 . Sorry for messing up.

wornet-aer commented 3 weeks ago

Unfortunately we also suffer from this issue. There was now lag or slow typing with the older CKEditor 4, but version 5 seems ridiciously slow even with small emails. We use an embedded logo for our corporate signature, but this wasn't changed since the migration to OTOBO 11.x.

I have already tried to further limit the lines of the original quoted request, but we didn't notice a big difference yet.

escix commented 3 weeks ago

I commented out this section and it solved the issue. But not sure if there is any other issue pop up due to this.

File: var/httpd/htdocs/js/Core.UI.RichTextEditor.js

`

              //Block pasting images for ToolbarWithoutImage
            editor.editing.view.document.on( 'clipboardInput', ( evt, data ) => {
                const dataTransfer = data.dataTransfer;

                if ( dataTransfer._files.length > 0 ) {
                    const imageName = dataTransfer._files[0].name;

                    if ( /\.(jpe?g|png|gif|bmp)$/i.test(imageName) && BlockPasteImg ) {
                        evt.stop();
                        return;
                    }
                }
            });
            Core.App.Publish('Event.UI.RichTextEditor.InstanceCreated', [editor]);

            // workaround for ckeditor not using data filter correctly on prefilled content
            if (editor.ElementId == 'RichText') {
                editor.setData(editor.sourceElement.innerText);
            }
           // -- > Commented below section to speed up CKEditor

            // Update validation error tooltip while content is added to the editor
           // editor.model.document.on('change:data', () => {
           //     if (editor.getData() != "") {
           //         $("#" + editor.ElementId).val(editor.getData());
           //     }
            //
            //    window.clearTimeout(TimeOutRTEOnChange);
            //    TimeOutRTEOnChange = window.setTimeout(function () {
            //        Core.Form.Validate.ValidateElement($EditorArea);
            //        Core.App.Publish('Event.UI.RichTextEditor.ChangeValidationComplete', [editor]);
            //    }, 250);
            //});
           // <-- Commented above section to speed up CKEditor

           editor.ui.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
               if (!isFocused) {
                    $("#" + $EditorArea.attr('id')).val(editor.getData());

                    Core.Form.Validate.ValidateElement($EditorArea);
                    Core.Form.ErrorTooltips.RemoveRTETooltip($EditorArea);
                }
             });
        })
        .catch(error => {
            console.error(error);
        });

    // mark the editor textarea as linked with an RTE instance to avoid multiple instances
    $EditorArea.addClass('HasCKEInstance');

`

chzauleck commented 2 weeks ago

that was a great find, thank you. i adapted the code you commented out and the fix should arrive soonish.

wornet-aer commented 2 weeks ago

Just a quick feedback: we are using the quick-fix suggested by @escix since last friday and it's working quite well. No more lags or slow-typing. 👍

Patt92 commented 2 weeks ago

works for us as well, thank you