Added

• Add new wrap action to default RTE.
• Added isInstanceOf, isChildOf methods to Component.
• Added component:select:before, component:hover:before events.
  These could be used to prevent some components from being selected/hovered.

editor.on('component:select:before component:hover:before', (cmp, opts) => {
  if (['b', 'i', 'u'].indexOf(cmp.get('tagName')) >= 0) {
    opts.abort = true;
  }
});

Changed

• Avoid JS output if component script function is empty https://github.com/artf/grapesjs/pull/4140

Fixed

• Fixed textable components #2771
• Fixed toolbar position on undo/redo.
• Avoid selected text HTML5 D&D with draggableComponents disabled #4099
• Fixed sector and property visibility update in Style Manager #4116
• Trigger component:mount once the DOM is appended to the parent #4136

Added

• Added Component.getInnerHTML method.
• Added withProps and altQuoteAttr options to Component.toHTML method.
• Added onlyMatched option to CSS code generator.
• Added new options to editor.Parser.parseHtml.
• Added config.parser.optionsHtml configuration options.

Changed

• Make the component resize command more extendable #4097
• Deprecated config.allowScripts in favor of config.parser.optionsHtml.allowScripts.
  ⚠️ As before, config.parser.optionsHtml.allowScripts is false by default but now we also remove unsafe attributes from parsed HTML (eg. on* inline event handlers). In case you need to enable unsafe attributes, you can do it via config.parser.optionsHtml.allowUnsafeAttr option.

Fixed

• Fix XSS in ClassTagsView #4076
• Fix external D&D for Image components #4094

⚠️ BREAKING CHANGE
This release refactors heavily the Style Manager module by removing private methods and events on which some old plugins were relying, like grapesjs-style-gradient, grapesjs-style-filter and grapesjs-style-bg (they won't work properly with this version until their update).
This change was necessary in order to improve the stability of the module and enable higher customizability.
If you have any customization based on GrapesJS Style Manager, please refer to the new API methods/events here: https://grapesjs.com/docs/api/style_manager.html

Docs

• New Style Manager module page
• Moved all available module events to their relative pages.
• Added Property, PropertyNumber, PropertySelect, PropertyComposite, PropertyStack, Layer in API StyleManager Reference.

Added

• Added getDevice, getState, getComponent methods to CssRule.
• Added getTraits/setTraits to Component API.
• Added messagesAdd option in I18n module.
• Now you can get/add/update builtIn properties via Style Manager API.

Changed

• Improve check for layer visibility #4010
• Enable styleManagerConfig.clearProperties by default.
• Adjust draggable Component property to accept function.

Fixed

• Fixed asset upload events https://github.com/artf/grapesjs/pull/3934
• Fixed the scroll option for the current frame when requested #3938
• Fixed color input trait #3931
• Adjust position in Absolute Mode for children #3770
• Allow for the title of a block to be passed as an attribute https://github.com/artf/grapesjs/pull/3992
• Disable pointer events from block labels #3986
• Avoid errors on paste in root #4000
• Fixed devices select padding #4026
• Fixed editor.destroy with selected components #2681
• Update Layer name on the component name change.

• Fixed the build #3902

Docs

• Added SelectorManager module documentation
• Added Selector API documentation
• Added State API documentation
• Improved SelectorManager API documentation

Added

• Added new methods to SelectorManager API
• Added new methods to Selector API
• Added getChildAt(index) and getLastChild to Component API
• Track component Selectors in UndoManager #3879

Fixed

• Fixed SVG parsing #3866
• Fixed next/prev selection #3861
• Fixed color picker input update with missing hex #3883
• Fixed headless option https://github.com/artf/grapesjs/discussions/3672#discussioncomment-1433844

Docs

• Updated Blocks module documentation.
• Updated CSSRule model documentation.
• Added Components & CSS section.
• Added Frame model documentation.

Added

• Added getAllWrapper method to Pages API.
• Added remove and addRules methods to CssComposer API.
• Added onReady method to Editor instance.
• Added support for component related styles.
• Added support for custom Block Manager with the new config.blockManager.custom option. More about this here.

Changed

Fixed

• Fixed CssComposer add/get methods
• Fixed default render of modules containing appendTo #3835

Docs

• Added Modal module documentation.
• Added Asset model documentation.
• Improved Modal API documentation.
• Improved Assets module documentation.

Added

• Support custom Modal with the new config.modal.custom option.
  More about this here.
• Added modal catch-all event to Modal module.
• Support custom AssetManager with the new config.assetManager.custom option.
  More about this here.
• Added open and close methods to AssetManager.
• Added getType and getSrc methods to Asset class.

Fixed

• Fixed rendering issue with custom traits #3735

Docs

• Added Parser API Reference
• Added CssRule API Reference
• Added Block API Reference
• Added Device API Reference
• Updated Devices API Reference

Added

• Added headless option in order to use GrapesJS in Nodejs.
  Not all the API are supported: https://github.com/artf/grapesjs/discussions/3672
• Added canvas.getCoords and canvas.setCoords methods #3668
• Added default device option in deviceManager configuration #3679
• Added onClick property to Block
• Allow Content-Security-Policy without unsafe eval #3558

Fixed

• Fix default color in ColorPicker https://github.com/artf/grapesjs/pull/3670
• Sync text component before store #3615
• Make asset selection more consistent #3613
• Fix badge positioning https://github.com/artf/grapesjs/issues/3675
• Fix absolute mode positioning #2547

Added

• Allow exporting CSS rules from code manager by using json option.
  editor.CodeManager.getCode(component, 'css', { json: 1 })
• Generate CSS code from the array of rules in code manager.
  editor.CodeManager.getCode(null, 'css', { rules: [...] })
• Added editor.addStyle method
• Added editor.getEditing method

Fixed

• Fix error when adding iframe as HTML code #3575
• Fix activatable blocks on drop #3579
• Don't escape textnodes in script components #3620
• Escape asset rendering #3596
• Update style manager properties on dragMode change #2374

Added

• Added iframe component #3491
• Allow editing iframe content before load #3285

Changed

• Deprecated style-signature Component property

Fixed

• Fixed button trait type #3497
• Fixed errors on page remove
• Avoid unselectable components in component-enter command #3511
• Fixed default command run post frame load #3475
• Fixed conflicts in RTE with multiple editor instances #3475
• Fixed layers visibility change #3508

Added

• Add a new extend option in LayerManager config, in order to extend the layer item view

Changed

• Allow droppable component property to be a function for a more granular check https://github.com/artf/grapesjs/pull/3393

Fixed

• Avoid tracking device changes in undo manager #3437
• Prevent breaking the changes counter #3412
• Fix destroy method #3442
• Check target in sorter before move #2498
• Fixed issue with panels visible attribute being not used https://github.com/artf/grapesjs/pull/3430

Removed

• Remove old staticRules option in CssComposer #3425
• Remove old wrapper related configurations #3459

⚠️ POSSIBLY BREAKING CHANGE

Added

• ⚠️ New Pages API for handling multi-pages in GrapesJS Check PR - Demo
• Adds a title attribute to layers panel elements https://github.com/artf/grapesjs/pull/3360
• Added Swedish translation https://github.com/artf/grapesjs/pull/3384

Changed

• Update _gjs_canvas.scss, allow vars to override and fix missing use of $canvasTop #3391

Changed

• Expose the view for block category models #3293

Fixed

• Improve Layer name editing #3319
• Fix string symbols #3325

Added

• Expose CodeMirror in CodeMirrorEditor.js #3286

Changed

• Resize components properly with percentages #3186

Fixed

• Fix clone #3291
• Avoid rendering blocks twice #3283 #3284
• Fix for old Components with JS containing comments https://github.com/artf/grapesjs/pull/3300

Removed

• Remove useless code from Block #3274

Added

• Added root options optsHtml and optsCss, in order to pass them as default to editor.toHtml() and editor.toCss() (eg. used already in the export code and the Storage)
• Added cleanId option to editor.getHtml in order to remove unnecessary IDs (eg. those created automatically)
• Added Component.removeAttributes method
• Added options as a second argument to the Component.components() method
• Added ComponentView.onAttrUpdate callback
• Added component:remove:before event. This allows to put conditions before deleting a component

editor.on('component:remove:before', function(component, remove, opts) {
  if (component.is('my-custom-type')) {
    opts.abort = true; // This will abort the remove
    // Pseudo-code of some modal/dialog
    yourAsyncDialog('Are you sure?', {
      confirmed: () => remove(), // complete the remove
    });
  }
});

Changed

• Skip the CSSRule from the JSON if there is no style
• Avoid rendering content if the component has children components

Fixed

• Fixed useless updates in component.addAttributes
• Defer SelectComponent in order to prevent canvas "freeze" #2692
• Make the Droppable end event more reliable
• Hide toolbars properly
• Pass properly options in setStyle #3176
• Trigger the counter change on text update #3224
• Fixed Sorter errors and moved them in the warning logs
• Avoid dropping non-selectable and non-editable text nodes inside the editor

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 https://github.com/artf/grapesjs/pull/3201
• Hide properly the toolbar on the preview on #3209

Added

• Added Catalan language https://github.com/artf/grapesjs/pull/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 https://github.com/artf/grapesjs/pull/3147
• Added keydown event to handle up and down arrows in InputNumber https://github.com/artf/grapesjs/pull/3158
• Added contains method to Component
• Started Symbol implementation (for now, only private APIs)

Changed

• Codemirror version upgrade https://github.com/artf/grapesjs/pull/3106
• Improve number trait #3132
• Replaced node-sass with dart-sass https://github.com/artf/grapesjs/pull/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 https://github.com/artf/grapesjs/issues/3087

Changed

• Allow removing parent component from children #2940
• Fixed German translations https://github.com/artf/grapesjs/pull/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 https://github.com/artf/grapesjs/pull/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 https://github.com/artf/grapesjs/pull/2872
• Added Korean language https://github.com/artf/grapesjs/pull/2983
• New API for custom properties in Style Manager (similar to Traits)

Changed

• Made Helvetica sans-serif by default https://github.com/artf/grapesjs/pull/2881
• Replace obsolete tag <strike> by <s> in RTE https://github.com/artf/grapesjs/pull/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 https://github.com/artf/grapesjs/pull/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 https://github.com/artf/grapesjs/pull/2975
• Fixed retrieval of text component content with custom RTE https://github.com/artf/grapesjs/pull/2977
• Fixed issues with the stack property in StyleManager

Added

• Added Bosnian locale file https://github.com/artf/grapesjs/pull/2736
• Added Chinese (simplified) locale file https://github.com/artf/grapesjs/pull/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