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