⚠️ 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

Changed

• Avoid the default form behavior on submit
• Prefer target value first in Select trait
• Remove traits information from component JSON
• Update icon styles in layers and component name editing
• Trigger component:add also on inner added components

Added

• Added media option to blocks (for icons)
• Added removeType method in DomComponents module

Fixed

• Update sortMediaObject to sort CSS correctly also in the mobile first approach #1996
• Fix regression with textable components
• Render attributes for temporary components. Fixes #2010
• Fix drag and drop from outside of the canvas
• Avoid fetchFile in temporary image components
• Fix unit change in Style manager #2028
• Avoid errors on class status toggle. Closes #2035
• Fix position of the toolbar when is outside of the canvas
• Propagate the extension of new commands to old. #2054

Docs

• Commands module documentation

Changed

• Avoid scrollIntoView if the element isn't found
• Clean JS from script on component remove
• Print a warning when trying to use not existing component type

Added

• Added Comment component
• Added textable property #481 example
• Added stopCommand method to all commands
• Added extend method to the Commands module
• Added findType, removeTrait, addTrait, updateTrait and getTraitIndex methods to Component
  For more details about those methods check the Component API Reference
• Added options argument to Editor.select method
  The only available option for now is scroll, which allows you to scroll the canvas
  to the selected component: editor.select(component, { scroll: true })
• Added appendOnClick option (default false) to Blocks module #1951
  This would allow appending blocks also on click, not only by drag & drop
• Enable the possibility to accept components as a function
  You can easily create components with dynamic default templates

  domc.addType('some-type', {
    model: {
      defaults: {
    	label: 'Value for some custom prop',
    	// You can return an HTML string, Component object or 
    	// an array which mixes all of them
    	components: component => `<div class="something">
    		${this.get('label')}
    	</div>`,
      }
    }
  });

• Improved addType in Components module. Added extendFn and extendFnView options.
  When you need to reuse functions, of the parent you're extending, generally what you do is this:

  domc.addType('new-type', {
    extend: 'parent-type',
    model: {
      init() {
        domc.getType('parent-type').model.prototype.init.apply(this, arguments);
        // do something;
      },
    }
  });

  Now you can do it faster by doing:

  domc.addType('new-type', {
    extend: 'parent-type',
    extendFn: ['init'], // array of model functions to extend
    model: {
      init() {
        // do something;
      },
    }
  });

  The same would be for the view by using extendFnView

Fixed

• Scroll the RTE toolbar if the text component is bigger than the view. Closes #1980
• Fix autosave issue in remote storage. Closes #1985
• Avoid moving styles from Components to Rules. Fixes #1978
• Store the last return of the stateful command
• Make Layers more reliable and generally more aware of textnodes #1949
• Skip rendering for temporary components #1941
• Avoid undefined value in select traits
• Avoid the default link behavior in the canvas
• Avoid showing in layers not layerable components

Removed

• Removed old deprecated commands: CreateComponent, DeleteComponent, SelectParent

Changed

• Force stop commands in Panels/ButtonView
• Refactor preview command
• Make modal:open/modal:close events more reliable
• Remove related CSS rules of a removed component
• Update the textnode component and make it more compliant to other components
• Refactor DomComponents.clear method

Added

• Added run and stop events for Commands
• Add onceClose/onceOpen methods in Modal module
• Add strict option in Command module configs #1881
• Add fetchOptions for the RemoteStorage. Closes #1885

Fixed

• Refactor buttons and adjust run command order
• Update the global list once a component is removed #1875
• Reset src in the Map Component. Closes #1903
• Fix extendProperties in Sector. Closes #1913

⚠️ POSSIBLY BREAKING CHANGE

Changed

• Allow default as a function in component addType
• Add the possibility to preventDefault from add method, in Keymaps module
• ⚠️ Commands run/stop can't be executed many times in the same state.
  So if the command is already active, calling it via editor.runCommand will
  not trigger that command again. But in case you need to run the command, in any
  way, you can force its execution with force:
  editor.runCommand('CMD', { force: 1 });
• Avoid duplicate IDs on components
• Refactor TraitSelectVIew and listen options changes
• Ensure default units for devices
• Move ratioDefault option from the Resize command to image component
• Accept classes as a string in Component
• Refactor @utils/Resizer and update its container on text component change
• Improve the recognition of stateless commands
• Merge element content in text components before toHTML. Closes #1767

Added

• Added model and property value to the trigger of change:attributes:ATTR event
• Added the possibility to disable StorageManger with storageManager: false (any falsy value is ok)
• Custom tag for buttons in Panels module. Closes #1787
• Added the possibility to zoom the canvas via editor.Canvas.setZoom(VALUE_FROM_0_TO_100)
• Added custom render for blocks. Now you can pass a render callback function when you create blocks (Blocks docs updated)
• Added fallback property to Image component and its default placeholder images
• Added component:type:add and component:type:update events to track changes on component types
• Added update event to generally listen any change to the template (HTML/CSS)

Fixed

• Fixed not working toolbar buttons with Text components. #1567 by @arthuralmeidap
• Ensure default CSS block container. Fixes #1829
• Avoid property breaking in StyleManager without property. Fixes #1830
• Reset upload input file in AssetManager. Closes #1816
• Fix empty provider select in the video component traits
• Check protected attribute before removing a tag #1857 by @WebEtSolutions
• Fix scrollIntoView issue in Layers. Closes #1865

Removed

• Removed old commands: image-comp, text-comp, insert-custom

⚠️ - POSSIBLY BREAKING CHANGE

Docs

• Update broken link in Components. Closes #1689

Changed

• ⚠️ Set contentTypeJson default to true (RemoteStorage)
• Added <a> to default notTextable option in the Canvas configuration. Closes #1699
• Updated add and get methods in Selector module, now they can receive an array of selectors to add/get
• Allow to render blocks container outside by using external option. #1716
• Agjust justify-content in traits style. Closes #1726
• Adjust component toolbar positioning. #1728 by @arthuralmeidap
• Pass the Editor instance on load event
• Update classes in SectorView to allow an easier customization. Closes #1753

Added

• Added autoscrollLimit option in the Canvas module
• Added credentials option in the Storage module (for the RemoteStorage) by @arthuralmeidap
• Added modal:open and modal:close events in the Modal module. Closes #1717
• Added setRule and getRule in CssComposer module
• Added ignoreCategories option to the render method in BlockManager module
• Added customFetch option in AssetManager module

Fixed

• Avoid updating frame offset on Layer click. Fixes #1711
• Fixed UndoManager in components with scripts. Closes #1512 by @thinkanymore

Docs

• Component Lifecycle Hooks
• Component improvement over addType

Changed

• Improved the extension of components via DomComponents.addType
  Read more about this here
• In isComponent is not necessary anymore to return the object with its type to accept it, any truthy value is enough.

// Before
isComponent: el => {
	if (el.tagName === 'SOME-TAG') {
		return { type: 'my-component' };
	}
}
// After
isComponent: el => el.tagName === 'SOME-TAG'

• Add default attributes in the creation of new components
• Emit component:clone event on the component which was cloned
• Clear old attributes in updateAttributes
• Don't trigger component hooks for temporary components
• Improved the parserHtml

Added

• Added getTypes method in DomComponents

Import correctly ItemView. Fixes #1672

Changed

• Changed the method name in ComponentTextView: enableEditing -> onActive
• Update Property (Style Manager), make the toRequire option, work also with IDs of the property

Added

• Added target option in fullscreen command. Closes #1526 by @mcsekar12
• Create PropertySelect in styleManager
• Added component:create and component:mount events
• Added removeAll method in Keymaps module

Fixed

• Fix highlightable property in canvas
• Load traits only if are not instance of Traits. Fixes #1563
• Pass the correct model to component:styleUpdate event. Fixes #1575
• Update correctly the text component on content change. Fixes #1511
• Sort media queries in export code. Fixes #1506
• Update how TextComponent handle children on change. Fixes #1593
• Unbind all key shortcuts on destroy. Fixes #1501

Docs

• Fix links in Blocks. Closes #1559

Changed

• Allow strings in upload function of component image #1462
• Append external styles inside head instead of body #1473
• Improved Style Manager for a better extensibility
• Avoid adding styles for temporary components (eg. created when you drag blocks around the canvas)

Added

• Accepts strings as argument for the assets callback in Style Manager. Closes #1457
• Added valueTrue and valueFalse options to trait checkbox type. Closes #1424
  This feature allows you to customize the boolean attribute on components
  Example:

traits: [{
  type: 'checkbox',
  label: 'Show Name',
  name: 'show-name',
  valueTrue: 'TRUE-value',
  valueFalse: 'FALSE-value',
  // For default values you have to specify same true/false values
  // You can add `value` in trait or on your components
  value: 'FALSE-value',
}]

• Added ComponentStyleClear command and style-signature option in Component
• Added setTarget method in StyleManager
• Added button trait type
• Added styleManager:update:target event to track target changes (Component or CSSRule) in Style Manager
• Added getTrait(traitName) method in Component
• Added new methods in Editor: once, getWrapper
• Added log option to the main config object

Fixed

• Avoid removing component on selector editing
• Store the wrapper if avoidInlineStyle is false #TODO issue in project
• Return body selector, instead of #wrapper, for the wrapper when requested
• Run npm start cross-platform. Closes #1456
• Improve hover in SelectComponent command. Fixes #1448
• Avoid errors in case of textnode selection
• Fix duplicated CSS rules with at-rules. Closes #1513
• Update traits when a component is removed. Fixes #1535