AEM 64 - Touch UI RTE (Rich Text Editor) Disable Image Drag and Drop

Goal

Disable drag and drop of JPEGs from the side panel in authoring Touch UI Rich Text Editor

Demo | Package Install | Github

Thank you Hanish Bansal for the code references...

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-rte-disable-drag-drop

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-rte-disable-drag-drop/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-disable-drag-drop/clientlib/js.txt, add the following

  disable-drag-drop.js

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

(function () {
    "use strict";

    var _ = window._,
        CUI = window.CUI;

    var otbIsMimeTypeAccepted = CUI.RichText.prototype._isMimeTypeAccepted;

    function disableJpegDragAndDropInRTE(mimeType) {
        if(_.isEmpty(mimeType) || (mimeType != 'image/jpeg') ){
            return otbIsMimeTypeAccepted.apply(this, arguments);
        }

         showAlert("Uh oh! you are restricted from dropping JPEGs", "RTE");

        return false;
    }

    function showAlert(message, title, callback){
        var fui = $(window).adaptTo("foundation-ui"),
            options = [{
                id: "ok",
                text: "OK",
                primary: true
            }];

        message = message || "Unknown Error";
        title = title || "Error";

        fui.prompt(title, message, "warning", options, callback);
    }

    CUI.RichText.prototype._isMimeTypeAccepted = disableJpegDragAndDropInRTE;
}());