Free and Open source Web Builder Framework. Next generation tool for building templates without coding
storage:load/storage:store events https://github.com/artf/grapesjs/discussions/4826
@ to Selector.escapeName #4865Full Changelog: https://github.com/GrapesJS/grapesjs/compare/v0.20.3...v0.20.4
Full Changelog: https://github.com/artf/grapesjs/compare/v0.20.2...v0.20.3
", ', ``` in node content)_undoexc from the Component JSON #4763Full Changelog: https://github.com/artf/grapesjs/compare/v0.20.1...v0.20.2
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
});
el prop to onEnd arguments in Resizer #4579mousePosFetcher also on start in Resizer #4580Components.resetFromString to avoid removing cloned elements during RTE editing (CLOSE https://github.com/artf/grapesjs/issues/4559)"TypeError: this.parseStyle is not a function" when setStyles is called internally @collins-lagat https://github.com/artf/grapesjs/pull/4520
Full Changelog: https://github.com/artf/grapesjs/compare/v0.19.5...v0.20.1
Component.parents() method.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).store/load are also asynchronous now and the signature of their arguments is also changed.editor.StorageManager.add('new-storage-id', {
load(keys, clb, clbErr) {...},
store(data, clb, clbErr) {...},
}
editor.StorageManager.add('new-storage-id', {
async load(storageOptions) {...},
async store(data, storageOptions) {...},
}
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
config.domComponents.storeWrapper options. The project data will always store the wrapper of your pages.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.config.canvas.frameContent and config.canvas.frameStyle options (frameStyle deprecates config.baseCss).editor.getProjectData(), editor.loadProjectData(json) methods.config.projectData option.componentFirst option and combined classes #4310config.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);
}
}
})
index.d.ts file. Thanks to @erdomkewrap action to default RTE.isInstanceOf, isChildOf methods to Component.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;
}
});
script function is empty https://github.com/artf/grapesjs/pull/4140
draggableComponents disabled #4099component:mount once the DOM is appended to the parent #4136Component.getInnerHTML method.withProps and altQuoteAttr options to Component.toHTML method.onlyMatched option to CSS code generator.editor.Parser.parseHtml.config.parser.optionsHtml configuration options.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.⚠️ 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
Property, PropertyNumber, PropertySelect, PropertyComposite, PropertyStack, Layer in API StyleManager Reference.getDevice, getState, getComponent methods to CssRule.getTraits/setTraits to Component API.messagesAdd option in I18n module.styleManagerConfig.clearProperties by default.draggable Component property to accept function.scroll option for the current frame when requested #3938editor.destroy with selected components #2681