Breakout Editor Meta Definition and Script Files

The breakout custom attribute editor requires its own JSON meta definition file and script file.

The meta definition file references the JavaScript and CSS resources that the editor requires, as in this example.

         magicalBreakout.json
{
  "name": "Magical Custom Editor Breakout",
  "description": "An editor with unicorn images",
  "resources": {
    "scripts": [
      "/experience/editors/com/sfcc/magical_breakout.js"
    ],
    "styles": [
      "https://cdnjs.cloudflare.com/ajax/libs/design-system/2.9.4/styles/salesforce-lightning-design-system.min.css",
      "/experience/editors/com/sfcc/magical.css"
    ]
  }
}

The script file implements the init function to initialize the custom attribute editor with server-side logic or resources. This example adds options for the breakout editor not included in the editor_definition of the component's meta definition file. It also includes a reference to CSS resources that are required if the list of unicorns includes more than 20 items.

         magicalBreakout.js

'use strict';
 
var URLUtils = require('dw/web/URLUtils');
 
module.exports.init = function(editor) {
 var optionsConfig = editor.configuration.options.config;
 var optionsInit = [
  'Blythe',
  'Cadillac',
  'Calimerio',
  'Jasper',
  'Joshi',
  'Julius',
  'Mika',
  'Nightwind',
  'Rainbow',
  'Wynstar'
 ];
 
 // Add more unicorns programmatically
 editor.configuration.options.put('init', optionsInit);
 
 // Provide `baseUrl` to the static assets/content
 editor.configuration.put('baseUrl', URLUtils.staticURL('/experience/editors/com/sfcc/').https().toString());
 
 // Conditionally add a resource which is only required in case of a lot of unicorns
 if ((optionsConfig.length + optionsInit.length) > 20) {
  editor.resources.styles.push('/experience/editors/com/sfcc/magical_extreme.css');
 }
};