v0.20.2

Changed

• Update ComponentTextNode escape (don't escape ", ', ``` in node content)
• Remove _undoexc from the Component JSON #4763
• Migrate Asset Manager to TS #4604
• Update Blocks TS #4685
• Typings: Added editor parameter to onStore by @JamieStivala in #4605
• Update TS: ButtonOptions by @stljeff1 in #4615
• Some typescript updates by @froodian in #4678
• Add plugin "Ui Suggest Classes" in the readme by @lexoyo in #4746
• Minor typo by @agreif #4767

Fixed

• Update icons box-sizing in Layers #4608
• Fix color picker update on component change #4691
• Update transform style property for i18n labels #4698
• Fix CSS rule creation with at-rule different from media #4727
• Avoid children selection of already selected components #4607
• Fix style manager with rules containing !important #4719
• Fix editable text cursor on touch devices #4422
• Fix for stylePrefix config by @JonathanRiche #4753
• Fix trait update with defined classes in attributes #4759
• Add missing ccid in component TS definition by @Singwai #4696
• Fixed page.select/remove function signature in Type Definitions by @stljeff1 #4628

Full Changelog: v0.20.1...v0.20.2

v0.20.1

⚠️ POSSIBLY BREAKING CHANGE

If for any reason you're still using the legacy API for registering your custom components you have to switch to the documented one.
Legacy API (which uses extended components via typeModelOrView.extend):

Components.addType('component-id', {
 model: defaultModel.extend({
   defaults: {
        ...defaultModel.prototype.defaults,
       someProp: '...',
       // ...
   }
 }),
// same for the view
});

Current API:

Components.addType('component-id', {
 model: {
   defaults: {
       someProp: '...',
       // ...
   }
 },
// same for the view
});

Added

• Added Arabic language support @DevMetwaly #4535
• Add el prop to onEnd arguments in Resizer #4579

Changed

• Update iframe size on device update
• Use mousePosFetcher also on start in Resizer #4580

Fixed

• Support textable for extended Text components #4440
• Fixed headless mode with images and videos #4473 #4474
• Fixed iframe component view #4480
• Avoid inserting default line breaks in RTE with insertOrderedList/insertUnorderedList commands #4449
• Update the iframe size on page select #4489
• Ensure to always update the layer name #4544
• Correct type traits to support a list of string and object #4536
• Honor the config.optsHtml option in HTMLGenerator
• Update Components.resetFromString to avoid removing cloned elements during RTE editing (CLOSE #4559)
• Fixed "TypeError: this.parseStyle is not a function" when setStyles is called internally @collins-lagat #4520
• Fixed mobile first sort on CSS rules view @iagormoraes #4521
• Fixed broken link in Selector Manager Config @zerexei #4504

Full Changelog: v0.19.5...v0.20.1

v0.19.5

Docs

• Added Layers API documentation.
• Added Layers module documentation.

Added

• Added Vietnamese translation @saosangmo #4378
• Added Component.parents() method.

Changed

• Updates/fixes on TS definition (@gubertcalixto #4389)

Fixed

• Lint staged include ts @Singwai #4375
• Handle default svg properly in the component image when reloading from storage @Singwai #4373
• Properly update ItemView on Layer root change #4370
• Take canvas offsets into account when dropping a new block on the canvas (absolute mode) @contentfree #4387
• Fix trait button command #4388
• Protect Selector Manager views from XSS #4411
• Update Resizer pointer events #4401
• Fix video component autoplay from src #462

v0.19.4

⚠️ Breaking changes

• The main breaking change in this release, is the refactoring of the Storage module in order to bring consistency across various storages (custom and built-in).
  We highly recommend checking out the new Storage module documentation which also shows some common use cases and will be helpful in the upgrade process.
  We're also in the process to release new versions for the related plugins: grapesjs-indexeddb, grapesjs-firestore
  Here is an overview of all the breaking changes:
  • editor.store(currentStorageOptions) and editor.load(currentStorageOptions) are now asynchronous methods and returns respectivly the stored and loaded project data (their first argument is not a callback anymore).
  • Storage Manager methods store/load are also asynchronous now and the signature of their arguments is also changed.
  • Storage API for adding custom storages is also changed.
    Before

    editor.StorageManager.add('new-storage-id', {
      load(keys, clb, clbErr) {...},
      store(data, clb, clbErr) {...},
    }

    After

    editor.StorageManager.add('new-storage-id', {
      async load(storageOptions) {...},
      async store(data, storageOptions) {...},
    }

  • Changed StorageManager configuration. Now all storage type options are moved in their correspective config.storageManager.options[STORAGE_TYPE] default configurations.
    storageManager.checkLocal -> storageManager.options.local.checkLocal
storageManager.headers -> storageManager.options.remote.headers
storageManager.urlStore -> storageManager.options.remote.urlStore
storageManager.urlLoad -> storageManager.options.remote.urlLoad
storageManager.contentTypeJson -> storageManager.options.remote.contentTypeJson
storageManager.credentials -> storageManager.options.remote.credentials
storageManager.fetchOptions -> storageManager.options.remote.fetchOptions
  • Removed config.domComponents.storeWrapper options. The project data will always store the wrapper of your pages.
  • Removed following configurations from StorageManager: storeHtml, storeCss, storeComponents, storeStyles, beforeSend, onComplete, params. The project data JSON doesn't extract any HTML/CSS from your pages anymore, but you're still able to extend your storages in order to enrich your data.

Added

• Added drop validity check before pasting @m-jojo-s #4243
• Added config.canvas.frameContent and config.canvas.frameStyle options (frameStyle deprecates config.baseCss).
• Added norwegian (NB) translation @sifferhans #4283
• Added editor.getProjectData(), editor.loadProjectData(json) methods.
• Added config.projectData option.

Changed

• Convert transform to stack property @codingaddicted #4267
• Create by default all canvas iframes in Standard mode.
• Take into account the canvas scroll offset.

Fixed

• Fixed append of blocks on click #4224
• Fixed order change with the drag of multiple components @lexoyo #4220
• Fixed style manager on selectors sync #4239
• Fixed StyleManager with componentFirst option and combined classes #4310
• Avoid errors from Resizer if the component is removed #4333
• Fixed color picker update on the component select change
• Fixed style image preview from parsed CSS #4362

v0.18.4

⚠️ Removed

• Removed config.wrapperIsBody, config.exportWrapper options.
  Now is the wrapper component itself to indicate what tagName to use and how to output the HTML.
  So, if necessary you can extend the default wrapper as any other component and specify your logic.

editor.Components.addType('wrapper', {
 model: {
   defaults: {
     tagName: 'div', // use `div` instead of `body` in HTML export
   },

   // Skip wrapper in the HTML output
   toHTML(opts) {
     return this.getInnerHTML(opts);
   }
 }
})

Added

• Added index.d.ts file. Thanks to @erdomke

Changed

• Update component toolbar icons
• Improve component delete command

Fixed

• Prevent form submit in ClassTagsView #4166
• Fixed editing logic for links #4145
• Fixed RTE icons in Firefox #4176
• Fixed tagName for SVG elements #4188
• Ensure frame existence in SelectComponent #4187
• Prevent divs on RTE paste and plain text #4195
• Fix issues with the state rule. Closes #4208

v0.18.3

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 #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

v0.18.2 - Security fixes

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

v0.18.1

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

v0.17.29

• Fixed the build #3902

v0.17.28

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 #3672 (reply in thread)