Table RTE Plugin Merge Functions not working in Configure dialog

[Matt-H-]

I wanted to expand the default text component from we-retail by adding the table functions in the rich text editor. I already had a "cq:editConfig" that put the table RTE plugin into the Edit dialog, but because I like the Configure popup interface better, I wanted to be able to do it from the Config icon as well. So I added a "cq:dialog" with this node structure:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Text Entry"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <textentry
                jcr:primaryType="nt:unstructured"
                jcr:title="Text Entry"
                sling:resourceType="granite/ui/components/foundation/section">
                <layout
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                    margin="{Boolean}false"/>
                <items jcr:primaryType="nt:unstructured">
                    <column
                        granite:class="coral-RichText-FixedColumn-column"
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <text
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                name="./text"
                                useFixedInlineToolbar="{Boolean}true">
                                <rtePlugins jcr:primaryType="nt:unstructured">
                                    <table
                                        jcr:primaryType="nt:unstructured"
                                        features="*">
                                        <tableStyles jcr:primaryType="cq:WidgetCollection">
                                            <centered
                                                jcr:primaryType="nt:unstructured"
                                                cssName="centered"
                                                text="Centered"/>
                                            <rightAligned
                                                jcr:primaryType="nt:unstructured"
                                                cssName="right_aligned"
                                                text="Right Aligned"/>
                                        </tableStyles>
                                        <cellStyles jcr:primaryType="cq:WidgetCollection">
                                            <grayShading
                                                jcr:primaryType="nt:unstructured"
                                                cssName="table.display tr.even.gradeU"
                                                text="Grey Shading"/>
                                        </cellStyles>
                                        <defaultValues
                                            jcr:primaryType="nt:unstructured"
                                            border="1"
                                            cellpadding="5"
                                            cellspacing="0"
                                            width="100%"/>
                                    </table>
                                </rtePlugins>
                                <uiSettings jcr:primaryType="nt:unstructured">
                                    <cui jcr:primaryType="nt:unstructured">
                                        <tableEditOptions
                                            jcr:primaryType="nt:unstructured"
                                            toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]"/>
                                    </cui>
                                </uiSettings>
                            </text>
                        </items>
                    </column>
                </items>
            </textentry>
        </items>
    </content>
</jcr:root>

While this added the Configure button with a rich text editor dialog with the table icon, not all the table plugin functions work. Specifically, the merge buttons:

I select a table cell and hit these buttons, but nothing happens.

I did some digging, and I know the merge functionality comes from the mergeCells function in /libs/clientlibs/granite/richtext/core/js/commands/Table.js :

    mergeCells: function (execDef) {
      var com = CUI.rte.Common;
      var sel = CUI.rte.Selection;
      var context = execDef.editContext;
      var execDefValue = this.getExecDefValue(execDef);
      var selProps = execDefValue ? execDefValue.selectionProps : null;
      var anchorCell = (selProps ? selProps.anchorCell : null);
      if (anchorCell) {
        var table = this.getTable(execDef);
...

The function is fine. The problem is that execDefValue is not properly set the way it needs to, the way it is in the Edit dialog (which makes selProps to be undefined and anchorCell to be null, failing the condition). In Configure, it is set to something like {"direction":"right","isTableMode":false}, while in Edit, it is an object/array structure for the whole table.

execDefValue is set by the getExecDefValue() function. In Configure, it is defined in Table.js:

 /**
     * @private
     */
    getExecDefValue: function (execDef) {
      return execDef.value;
    },

In Edit, the getExecDefValue() function is defined in /libs/clientlibs/granite/richtext/js/rte/commands/CUITable.js.

    getExecDefValue: function (execDef) {
      var isTableMode = execDef.value.isTableMode;
      var com = CUI.rte.Common;
      var nodeList = execDef.nodeList;
      var selection = execDef.selection;
      var singleCell = CUI.rte.commands.Table.getCellFromNodeList(execDef.editContext, nodeList);
      var isSingleCell = (singleCell !== null && singleCell !== undefined);
      var tableDom = com.getTagInPath(execDef.editContext, nodeList.commonAncestor, 'table');
...

So in Edit, CUITable.js is loaded, and in Configure it is not, and it needs to in order for merging to function.

My question is - Is there some way to get CUITable.js to load while in a Configure dialog, like with with an extraClientlibs or something? Or is there some other way to get the Table RTE plugin to fully work in a Configure dialog?

[smacdonald2008]

I am checking with the TOUCH UI experts on this.

[hanishb17637780]

Hi Matt-H-

I would like to get answers to a few questions from your side to better understand your issue.

Can you specify which AEM version are you using ?

Whichever version you are one, can you check after installing the latest SP and CFP for that one ?

This seems to work fine for OOTB Text component on a 6.5 instance.

Did you check if your issue exists with a Core Text component ?

Also,  btw, are you trying this on a iPad or a smaller screen because otherwise I can't think of any possibility for CUITable.js to be available during Edit, but not Configure ?

[Matt-H-]

Thank you very much for looking into it. We are using 6.3.1.0. We will see about upgrading the service packs. We're using desktop, not mobile. And I just found out today that it there may be some interference from custom code I wasn't aware of. I will look into that and let you know.

[venkatareddys96]

Hi smacdonald2008​ ,

  did you get the solution for that ?   . i am also facing the same issue and i am using aem 6.4

[Matt-H- · Accepted solution]

Much to my chagrin, the problem was indeed due to custom code. We had some code someplace else that was creating predefined table styles, and this custom class was extending CUI.rte.commands.Table

extend: CUI.rte.commands.Table,

The fix was to instead extend CUI.rte.commands.CUITable instead.

extend: CUI.rte.commands.CUITable,

Thank you, all who looked into this.