Inline editing of text area fields with Grammarly

bsdz

Hi

I noticed that if using Grammarly with an inline editor using a textarea based plugin, choosing a spelling or grammar correction using the injected Grammarly menu cancels the inline editor and loses any user edits.

I've created a sample here. You will need to use the Live Preview option.

I've also created an online gif of the issue in action.

The issue happens with CKEditor plugin but initially I discovered with my own Froala plugin (as previously donated to you in another thread).

Any ideas on how to fix the issue?

Thanks in advance.
Blair

allan

Hi Blair,

This will be caused as a result of Editor's inline editing checking to see if a click event happened inside the editing cell or not. Grammarly must have the spell / grammer checker outside of the cell - perhaps simply at the root level of the body.

Editor does actually have a mechanism for handling this in the field type plug-ins, but frustratingly, it would appear I missed adding the documentation for it when I added that ability. I've added it locally now and will publish it shortly, but this is the idea:

• owns - Used for inline and bubble editing - this method is executed when Editor detects a click event outside of the items being edited, allowing a check to be performed to see if the element clicked upon is owned by the editing field or not. This is useful for complex field types which can show extra information attached to the document's body.
  
  • Function with the following signature:
  • Parameter 1: The field's configuration object (field-options)
  • Parameter 2: The DOM node that was clicked upon.
  • Returns: boolean - true if the element is owned by the field (i.e. the editing will not be terminated), or false if it is not (editing will be terminated).

It fit's in here.

In short you would need to use the owns method to determine if the click was in the spell or grammer checker (probably by checking if a parent element has a class).

As an example, this is how the BootstrapDate field type plug-in uses owns:

    owns: function ( conf, node ) {
        // The date control will have redrawn itself, creating new nodes by the
        // time this function runs if clicking on a date. So need to check based
        // on class if the date picker own the element clicked on
        var isCell = $(node).hasClass('day') || $(node).hasClass('month') || $(node).hasClass('year');
        return $(node).parents('div.datepicker').length || isCell ?
            true :
            false;
    }

Allan

bsdz

Hi Allan

Thanks for that insight. It's handy to know. I did try your suggestion and included an "owns" attribute with corresponding check but it hasn't appeared to help.

I've created another sample with event checking code but with same problem. Can you reproduce the issue with your own Grammarly instance running?

Blair

allan

This appears to do it for me:

   owns: function ( conf, node ) {
        return $(node).parents('table.cke_dialog').length ?
            true :
            false;
    }

http://live.datatables.net/viwiwibi/2/edit

Allan

bsdz

Thanks for that but your fix doesn't work for me. Are you using "Live Preview" when testing it with Grammarly? I notice, if you don't, when in edit mode (ie javascript editor, etc) then Grammarly plugin doesn't activate at all. Also, are you testing on Chrome? Mine has Version 60.0.3112.101 (Official Build) (64-bit) - it actually just updated to that version and the problem persists in both; what version is yours? I am sure it isn't only happening to me as some of my users reported the issue to me and I was able to easily reproduce.

allan

Hi,

What I was doing:

1. Load http://live.datatables.net/viwiwibi/2/edit
2. Click the cell with "Sales Assistant"
3. Click the "ABC" icon in the wysiwyg editor
4. Click the "Check spelling" option
5. With my above change, any click in the modal will not cause the inline editor to close.

Is that not the correct sequence to try and reproduce the issue?

I'm also using Chrome 60.

Allan

bsdz

Between steps 1 and 2 you need to switch to "Live preview" mode otherwise Grammarly doesn't activate.

There's an icon that looks like a North East facing arrow in top right hand corner of Output window that, if clicked, switches to live preview.

In live preview you will not see the JSBin nav bar or the various frames, you will only see a single output page.

Also the spelling check is actually done by Grammarly so don't use the ABC icon. You need to install Grammarly Chrome extension.

Please take a look at the GIF I originally posted as it will demonstrate what a Grammarly spell check menu looks like.

allan

Ah - got it. Try this: http://live.datatables.net/sahijiso/2 .

Thanks for the clarifications.

Allan

bsdz

Yes that fixes it. I hadn't considered making one of the grammarly nodes return true too. Thank you very much! :-)