v0.21.3

Docs

• Update Broken Links for (Component Types, and Commands) by @AbdelrhmanSaid in #5196
• Update rich_text_editor.md by @gxanshu in #5201

Added

• Added addStyles option to editor.Css.setRule #5173

Changed

• Improve typings by @Julia-Alberici in #5192
• Refactor Traits Collection by @xQwexx in #4983

Fixed

• Fixed usePlugin is not a function #5167
• Fixed PropertyStack in bundled dts file #5154
• Handle properly Component model defaults as functions #5199
• Fixed broken link in README.md by @pfaffmann in #5188

Full Changelog: v0.21.2...v0.21.3

v0.21.2

Docs

• Added Pages module doc
• Updated Plugins doc
• Updated Replace Rich Text Editor doc

Added

• Added experimental disableTextInnerChilds option to Components module configuration.
  With this option, you're able to decide which inner component inside text should be disabled (eg. no select, no hover, no layer visibility) once edited.

  grapesjs.init({
    // ...
    domComponents: {
      // disable all inner childs
      disableTextInnerChilds: true,
      // disable all except link components
      disableTextInnerChilds: (child) => !child.is('link'),
    }
  })

• Added usePlugin for a better TS support with plugins
• Added Component.forEachChild method.
• Added more TS exports and fixed Editor#setZoom type by @PaulRill00 in #5106

Changed

• Improve TS for Components.addType
• Updated German locale by @c9a2334 in #5114
• Trigger component:styleUpdate on component style changes #4897

Fixed

• Fixed addStyle(string, string) #5105
• Take into account scroll data on drop in absolute mode
• Fixed element jumping when resizing on zoomed frame #5103
• Fixed TS autocomplete for editor events
• Fix StyleManager.addProperty TS #5135

Removed

• Removed unused fonts folder

New Contributors

• @c9a2334 made their first contribution in #5114

Full Changelog: v0.21.1...v0.21.2

v0.21.1

⚠️ POSSIBLY BREAKING CHANGE

What's Changed

The biggest change we introduce with this release is the complete rewrite of modules to Typescript. This deprecates the old ./index.d.ts (manually updated) in favor of ./dist/index.d.ts (generated from the source).
So there are no real changes to the core API itself if not the new TS declaration file which includes type/interfaces changes in order to bring more naming consistency with the code.
This is how you might have used the import of types in the previous version:

import type grapesjs from 'grapesjs';

// plugin
const plugin: grapesjs.Plugin = function (editor: grapesjs.Editor, opt: ...) {...};

Now you can get types directly without specifying the grapesjs namespace (which is the most common way to import types):

import type { Editor, Plugin } from 'grapesjs';

// plugin
const plugin: Plugin = function (editor: Editor, opt: ...) {...};

Added

• Added new noCustom option to Component.getName() in order to skip custom name assigned to the component.
• Added rename method to SelectorManager
• Added fetchOptions to AssetManager configs
• Added options to ExportTemplate command

Fixed

• Clear deferred stuff on editor destroy #4940
• Fixed slider in StyleManager #4965
• Fixed checkbox trait values on undo/redo #4972
• Fixed sorter placeholder with grid elements #4991
• Fixed showOffsetsSelected #4998
• Fixed bug with top/left being sticky when resizing from l/t side by @PaulRill00 in #5017
• Fixed for when no implicit type by @wilsonsergio2500 in #4903
• Fixed broken links in the docs by @lexoyo in #4914
• Fixed typing of trigger to include args by @Zaxcoding in #4910
• Fixed broken links in the docs by @himansh-gjr in #4963

Other

• TS Types: Extends the type of property that scripts/styles can takes by @estebgonza in #4924
• Convert Trait test into TS by @xQwexx in #4899
• Update Components.md by @jacobisknight in #4952
• docs: Fix a few typos by @timgates42 in #4957
• Module cleanup by @xQwexx in #4985
• improve typing by @Singwai in #5010

New Contributors

• @wilsonsergio2500 made their first contribution in #4903
• @Zaxcoding made their first contribution in #4910
• @estebgonza made their first contribution in #4924
• @jacobisknight made their first contribution in #4952
• @himansh-gjr made their first contribution in #4963
• @PaulRill00 made their first contribution in #5017

Full Changelog: v0.20.4...v0.21.1

v0.20.4

What's Changed

• Add new locale for Hebrew language by @Oren-Hahiashvili in #4831
• Add missing colorPicker option properties in index.d.ts by @KaoDeo in #4849
• small grammar fix by @Julia-Alberici in #4870
• small grmmar fix by @Julia-Alberici in #4871
• Adds more @silexlabs plugins (fonts and symbols) by @lexoyo in #4877
• small clarification by @javipons22 in #4884
• types fix by @Julia-Alberici in #4886
• Pass storage response to storage:load/storage:store events #4826
• Add @ to Selector.escapeName #4865

New Contributors

• @Oren-Hahiashvili made their first contribution in #4831
• @KaoDeo made their first contribution in #4849
• @Julia-Alberici made their first contribution in #4870
• @javipons22 made their first contribution in #4884

Full Changelog: v0.20.3...v0.20.4

v0.20.3

Fixed

• Fix D&D in Dragger class #4792
• Fix block events inconsistency #4791
• Fix trait init value #4803

Full Changelog: v0.20.2...v0.20.3

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