⚠️ POSSIBLY BREAKING CHANGE

Docs

• Updated Traits module page

Changed

• ⚠️ editor.addComponents now returns always an array of added components. So, if you ever used its result like this:

  const component = editor.addComponents('<div>...');

  now it should be

  const component = editor.addComponents('<div>...')[0];

• ⚠️ Updated traits layout. If you've ever customized the CSS of your traits you might see something broken
• Upgrade to Babel 7
• Recreate view element on script prop update
• Log a warning in case no sector, in StyleManager, is found #2068

Added

• Added support for components generated from JSX (React preset).
  In this way, you can use editor.addComponents(<div>Hello JSX</div>) to add components. JSX helps the editor in performances as it skips the parsing of an HTML string but keeps the readability of your code.
  If you work in a different framework environment with JSX support (eg. writing JSX in Vue SFC generates another kind of objects) you can use a custom processor callback function as an option in the DomComponent module to transform those objects (quick example from the code).
• Added the possibility to specify the position on sector add via API #2094
• Added draggableComponents option (default true) in DomComponents. This allows moving
  components by dragging the component itself (not only by the move icon in the toolbar)
• Allow dropping blocks absolutely when the absolute mode is active
• Added script-export property to Component (check the API Reference of the property)
• Added escapeName option and method in SelectorManager #1703
  With this option you can now set a custom name escape strategy on selectors (eg. classes)

  grapesjs.init({
      ...
      selectorManager: {
        escapeName: name => name.replace(' ', '___'),
      },
  });

• Added props method in Trait and Component
• Added new [API for extending Traits] (https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type)
• Added new Drag Mode API for changing drag modes of components in canvas
  • config.dragMode - The initial configuration for the global drag mode
  • editor.setDragMode - change the global drag mode of components
  • component.setDragMode - change the drag mode of a single component

Fixed

• Update defaults on top/right/bottom/left properties #2091
• Fix autoscroll on dragging components in absolute mode
• Update border-radius ordering in Style Manager #2105
• Use stopCommand in Preview command #2174
• Canvas Touch Support iOS #2175
• Fixed issues around Drag Mode API