SOLVED
Table RTE Plugin Merge Functions not working in Configure dialog
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 
<?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?
1 Accepted Solution
Related Conversations
