Docs

• Updated Components & JS guide with the new approach for the creation of Components with JS (the old one still works).
  The biggest advantage over the previous one is how the final code is created. With the old one, you could have the whole script content duplicated as many times as components of the same type (new script content will be output only once per type). The new approach avoids also issues with different JS minifiers (due to string templates).

Added

• Added script-props property to Component. Read the new Components & JS
• Wherever you add/remove/update a component you can now pass noCount option to avoid triggering the count of changes (eg. for skipping the Storage)

editor.addComponents('<div>New components</div>', { noCount: true });
// or
component.append('<div>New components</div>', { noCount: true });

• Added move() method to the Component

Changed

• Start using grapesjs-cli for the dev server and the build
• In UndoManager, start using noUndo option instead of avoidStore for skipping the trigger
• Rerender Component toolbar when necessary
• Keep track of selected components when turning on/off the preview

Fixed

• Avoid useless change counter updates #3189
• Properly hide all toolbars when a Component is removed #3175
• Pass properly the options when removing components and rules #3176
• Adjust editor listeners in PropertyView #3197
• Avoid twice the storage of src in Image components #3201
• Hide properly the toolbar on the preview on #3209

Added

• Added Catalan language #3105
• Allow to pass el prop to Buttons from Panels module
• New getRules(selector) method added in CssComposer module
• Added and improved destroy method in all modules, in order to fix general memory leaks
• Added limitlessMax and limitlessMin props to InputNumber in order to allow showing calculated values from components #3147
• Added keydown event to handle up and down arrows in InputNumber #3158
• Added contains method to Component
• Started Symbol implementation (for now, only private APIs)

Changed

• Codemirror version upgrade #3106
• Improve number trait #3132
• Replaced node-sass with dart-sass #3148
• Apply avoidDefaults option also to Selectors in toJSON method

Fixed

• Clone properly the component with its related styles #3093
• Fix unbind of keymaps #2758
• Fix RTE update in text components #3069
• Fix update of properties on setTarget in StyleManager #3081
• Fix hover state in Layers #3065
• Prevent frame scroll on the first component drag #3134
• Parse single textnode as component #3034
• Prevent losing component id on undo/redo

Added

• Expose PropertyFactory in StyleManager
• Added tools option to editor.refresh()
• Handle multiple selection in Layers
• Trigger change:style and change:style:PROPERTY event on selected componets during style update via Style Manager
• Added attributes option to the Modal.open() method #2592
  editor.Modal.open({ title: 'T', content: 'C', attributes: { class: 'custom-cls' } })
• Added parse:html and parse:css events for catching parsers results
• Added Polish language #3087

Changed

• Allow removing parent component from children #2940
• Fixed German translations #3024

Fixed

• Fixed for in loop in commands #3006
• Check only the component style for the target update #2657
• Avoid dragging in canvas non-draggable components #3014
• Destroy correctly the LayerManager #3005
• Prevent update trigger from TraitNumberView
• Fixed default value get in TraitNumberView
• Fixed non integer steps for slider property #3029
• Don't use display: block on visible sectors and properites in StyleManager #3067
• Rollback to the strikeThrough RTE command #3047
• Avoid style remove on blur from the text component #3069
• Fixed setTarget method in StyleManager #3081

Added

• Expose options parameter to setStyle & setComponents #2872
• Added Korean language #2983
• New API for custom properties in Style Manager (similar to Traits)

Changed

• Made Helvetica sans-serif by default #2881
• Replace obsolete tag <strike> by <s> in RTE #2886
• Avoid adding, to components, empty parsed HTML strings
• Added options as a second argument of component.addAttributes method

Fixed

• Output properly boolean attributes from HTML string import (eg. required, disabled) #2844
• Update component tools box once image finished to load #2871
• Fixed retrieval of layers' visibility #2863
• Ensure resizer on the correct component #2876
• Disable component drag on preview #2904
• Render correctly the textnode component #2882
• Add list prop to video component (youtube related) #2887
• Ensure selected value in select Trait type #2896
• Fully clear hover state on mouseleave #2907
• Avoid infinite recursion in Firefox on component drag #2911
• Fixed editor.load bug with undo manager #2921
• Make textnodes correctly removable #2918
• Prevent error on editor.destroy() with selection #2953
• Update Style Manager on Layer visibility change #2938
• Prevent errors on body hover #2974
• Added listenToEl option in order to refresh the editor on scrollable elements #2722
• Put quotes around URLs in CSS property like background-image #2975
• Fixed retrieval of text component content with custom RTE #2977
• Fixed issues with the stack property in StyleManager

Added

• Added Bosnian locale file #2736
• Added Chinese (simplified) locale file #2804
• Added colorPicker option to color trait type, for color picker customization
• Added the possibility to change block attributes dynamically

Changed

• Render only visible blocks for external block containers
• Use postRender in ComponentScriptView
• Init a component by using class from attributes if classes property is missing #2836

Fixed

• Ensure selectors on CSS rule add
• Update external SCSS imports
• Prevent errors, in SelectComponent, from debounced functions #2802
• Fixed French translations
• Catch error and skip rendering of invalid Component definitions (eg. invalid attribute name) #2029
• Fixed video component issues #2773
• Trigger change on values with empty value #2835
• Fix remove unused styles #2800
• Prevent default for delete shortcut #2765

Added

• Added Brazilian Portuguese language #2653
• Added closestType and empty methods to Component API
• Added disable property to the Block
• Added module aliases to the Editor object
  DomComponents -> Components
LayerManager -> Layers
CssComposer -> Css
StorageManager -> Storage
AssetManager -> Assets
BlockManager -> Blocks
TraitManager -> Traits
SelectorManager -> Selectors
StyleManager -> Styles
DeviceManager -> Devices

Changed

• Customize Sorter placeholder color via CSS #2662
• Add a default limit (500) of maximum steps in UndoManager
  Can be changed by config.undoManager.maximumStackLength option on init

Fixed

• Update canvas tools on input event trigger in components
• Fix borders not always toggling back when exiting preview #2689
• Close the color picker if click event happens on canvas #2695
• Avoid canvas errors by ensuring the view on the element render
• Fixed wrong toolbar position #2656
• Fixed major memory leaks in components
• Fixed TableRow model component #2697
• Fixes on color picker #2694

Added

• Avoid rendering of private CSS properties (identified by __ prefix)
• Added Dutch language by @jorisros #2643
• Added Persian language by @majidh1 #2649
• Added prepend option to the stack style manager type

Fixed

• Escape selectors in CSS code #2624
• Fix custom panels not hidden in preview mode #2636
• Avoid multiple change events on style property change

Added

• Added style:update and style:update:{property} events for StyleManager
• Added new component:drag events #2500
• Added a new svg-in component to handle better inner SVG elements
• Trigger component:drag events in Layers #2528
• Added German translation by @chickahoona #2578
• Added new config.assetManager.showUrlInput option. by @jcamejo #2602

Changed

• Refactored the canvas #2524
• Improved how the style property is taken in stack properties

Fixed

• Check property visibility on render #2497
• Fix Selector Manager styles for Firefox/IE/Edge #2490
• Update video attributes on render #2501
• Avoid useless attributes on nodes inside text components #2508
• Avoid 404 requests on background property change #2538
• Update style on block drop in absolute mode
• Check visibility borders on preview stop #2589
• Preserve the display value on layer hide #2571
• Check for the href value in appendStyles to avoid 404 errors #2605
• Fix ComponentImage's default src not being base64 encoded #2619

Added

• Added new options for customization to config.selectorManager and the component-first selection via config.selectorManager.componentFirst option #2474
• Added state option in RTE actions to enable custom checks for enabling/disabling action buttons. Thanks @adriangroch #2429
• Added Spanish language. Thanks to @josfh2005 #2443
• Added French language. Thanks to @jmalapeer #2449

Changed

• Escape HTML characters when converting text node to HTML. Thanks @mcammisa #2446
• Use custom-name property on layer name edit
• Update layers view when component prop layerable changes #2433

Fixed

• Export correctly <body> when config.exportWrapper option is used #2096
• Fixed empty text after a drag of a component in editing mode #2452
• Destroy RTE module when editor.destroy is called #2469
• Calibrate the coordinates on toolbar click #2375
• Avoid dragging methods when no target is found #2478

Docs

• Added documentation about I18n Module and its API

Changed

• Sync text component content with custom RTE #2292
• Removed FontAwesome from dependencies to load it asynchronously by the new cssIcons option #644

Added

• I18n module

Fixed

• Fixed text component issue on toolbar commands execution #2294
• Fixed Firefox bug with label editing #2332
• Fixed issues in absolute mode and components with scripts #2359
• Fixed body counter in Layers #2413
• Make integer property extendable #2360
• Fixed issue on component drag in absolute mode #2371
• Preserve selection after canvas:drop #2396
• Remove empty value from target trait #2411

Changed

• Make config.avoidInlineStyle true by default
  We actually gonna stop to support the old inline-style method so this option will be removed soon
• Guarantee the uniqueness of components id
  Now if you update the component with the id attribute that already exists, it will rollback to the previous one

Added

• Added config.styleManager.textLayer option #2246

Fixed

• Remove undefined titles in StyleManager #2248
• Fix errors in IE11 #2247
• Update component CSS rule selectors on id change #2249

⚠️ POSSIBLY BREAKING CHANGE

Docs

• Update docs for richTextEditor config #2241

Changed

• ⚠️ Typo fix config.wrappesIsBody -> config.wrapperIsBody @jcamejo #2222
• Set avoidDefaults true by default
• Support objects/arrays in script interpolations #2239

Added

• Added at option to addProperty method in StyleManager #2213
• Added config.assetManager.beforeUpload callback option (thanks to @tliscomb) #2227

Fixed

• Fix image resize issue #2002
• Fix text component issues in Safari/Firefox #2210
• Fix style properties with undefined #2206
• Fix drag issue with text components

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