Answers

• allan Posts: 61,665Questions: 1Answers: 10,096 Site admin

  August 2017

  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 Posts: 17Questions: 6Answers: 0

  August 2017

  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 Posts: 61,665Questions: 1Answers: 10,096 Site admin

  August 2017

  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 Posts: 17Questions: 6Answers: 0

  August 2017

  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 Posts: 61,665Questions: 1Answers: 10,096 Site admin

  August 2017 edited August 2017

  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 Posts: 17Questions: 6Answers: 0

  August 2017 edited August 2017

  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.

  image.png 18.9K
• allan Posts: 61,665Questions: 1Answers: 10,096 Site admin

  August 2017 Answer ✓

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

  Thanks for the clarifications.

  Allan
• bsdz Posts: 17Questions: 6Answers: 0

  August 2017

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