AEM 64 - Extend TouchUI Rich Text Editor Table Plugin, Add Summary Field

Goal

Extend Touch UI Rich Text Editor (RTE) to add a field for Table Summary

Classic UI RTE Table extension for Summary is available here

For a similar extension on 61 check this post

Thank you Roger Blanton for the code for 64

Demo | Package Install | GitHub


Table Properties Dialog with Summary

Table Source with Summary

XSS (AntiSamy) Configuration

                                                              /libs/sling/xss/config.xml (please overlay, modified for demo purposes only)

                                                              <attribute name="summary">
                                                                  <regexp-list>
                                                                      <regexp name="anything"/>
                                                                  </regexp-list>
                                                              </attribute>

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-rte-table-summary

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-rte-table-summary/clientlib and set property categories of String type to cq.authoring.dialog and dependencies String[] to underscore

3) Create file ( type nt:file ) /apps/eaem-touchui-rte-table-summary/clientlib/js.txt, add the following

                         summary.js

4) Create file (type nt:file) /apps/eaem-touchui-rte-table-summary/clientlib/summary.js, add the following code

(function ($) {
    "use strict";

    var _ = window._,
        Class = window.Class,
        CUI = window.CUI,
        EAEM_TABLE = null,
        COLUMN_CONTAINER = ".rte-dialog-columnContainer",
        SUMMARY_SEL = ".rte-dialog--tableprops input[data-type=\"summary\"]",
        SUMMARY_HTML = '<div class="rte-dialog-columnContainer">'
            + '<div class="rte-dialog-column">'
            +  'Summary'
            +  '</div>'
            +  '<div class="rte-dialog-column">'
            +  '<input is="coral-textfield" class="coral3-Textfield rte--large" data-type="summary">'
            +  '</div>'
            + '</div>';

    if(CUI.rte.ui.cui.TablePropsDialog.eaemExtended){
        return;
    }

    CUI.rte.ui.cui.TablePropsDialog = new Class({

        extend: CUI.rte.ui.cui.TablePropsDialog,

        toString: "EAEMTablePropsDialog",

        initialize: function(config) {
            this.superClass.initialize.call(this, config);

            this.$summary = this.$container.find(SUMMARY_SEL);

            if(!_.isEmpty(this.$summary)){
                return;
            }

            this.$caption = this.$container.find(".rte-dialog--tableprops input[data-type=\"caption\"]");

            $(SUMMARY_HTML).insertBefore( this.$caption.closest(COLUMN_CONTAINER) );

            this.$summary = this.$container.find(SUMMARY_SEL);

            this.propertyItems.push(this.$summary);
        }
    });

    EAEM_TABLE = new Class({
        toString: "EAEMTable",

        extend: CUI.rte.commands.Table,

        transferConfigToTable: function(dom, execDef) {
            this.superClass.transferConfigToTable.call(this, dom, execDef);

            var com = CUI.rte.Common,
                config = execDef.value;

            if (config.summary) {
                com.setAttribute(dom, "summary", config.summary);
            } else {
                com.removeAttribute(dom, "summary");
            }
        }
    });

    CUI.rte.commands.CommandRegistry.register("_table", EAEM_TABLE);

    CUI.rte.ui.cui.TablePropsDialog.eaemExtended = true;
})(jQuery);