Extending editor's functionality

Extending JS modules in base

!!! IMPORTANT: Check the No Copy Paste document for how you can avoid copy-pasting code

To extend (or overwrite) a JS module defined in the base bundles, update the config.js file in the root of the project to look like this:

    var adminConfig = require('wfcms-dev/config');

    adminConfig.webpack = {
        resolve: {
            alias: {
                'wfed/model/content/image_content_model': 'admin/model/image_content_model'
            }
        }
    };

    module.exports = adminConfig;

Then define a file in the src/__PROJECT__/Bundle/CmsAdminBundle/Resources/public/javascripts directory at the path specified above (model/image_content_model.js). In this file, you can require the base module by prepending its name with _:

    //
    define(['_wfed/model/content/image_content_model'], function (BaseImageContentModel) {
       return BaseImageContentModel.extend({
       });
    });

The following is a list with the most common modules that may require extending in the project:

• wfed/epoxy/wfBindings binding expanders (wf-bind)
• wfed/model/content/XX_content_model the XX content model, where XX can be page, image, video, audio, file, poll

Extending binding handlers and filters

Through a wf-script you can define custom binding handlers and/or filters:

<div wf-module="wfed/composite/module"
     wf-role="test"
     wf-new
     >
     <script type="javascript" wf-script>
     var handlers = {
        customHandler: ($el, property) => $el.text(`Custom ${property}`)
     }
     var filters = {
        customFilter: (originalValue) => `filtered ${originalValue}`
     }
     </script>

     <div data-bind="customHandler:customFilter(page_title)"></div>
</div>

IMPORTANT: The binding handlers/filters defined through wf-script will be available only to the module where they've been defined!

Custom validation for modules

Through a wf-script you can define custom validation for a module

<div wf-module="wfed/composite/module"
     wf-role="test"
     wf-new
     >
     <script type="javascript" wf-script>
     var validator = (model, view) => {
        if (__CUSTOM_VALIDATION_FAILS__) {
            return {{ 'mam_paragraph.required'|trans|json_encode|raw }};
        }

        return true;
     }
     </script>

     <div data-bind="customHandler:customFilter(page_title)"></div>
</div>

IMPORTANT: The validator function must return either a string signifying the error message or true if the module is valid. Forgetting the return true in the above example would display a null error message

Extending computeds prop

When extending the computeds prop, you have to remember to merge with the computeds props defined in base:

    // image_content_model.js

    define(['_wfed/model/content/image_content_model'], function (BaseImageContentModel) {

       var ret = BaseImageContentModel.extend({
           computeds: {
               image_alt: () => `something`
           },
       });

       _.extend(ret.prototype.computeds, BaseImageContentModel.prototype.computeds);

       return ret;

    });