Saved blocks

Users can save their sections by clicking save button while moving mouse over section. To enable this feature set savedBlocks to [], to disable it doesn't set the value at all or set it to null You can hide saved blocks savedBlocks: false.

savedBlocks: [];

Each block has the following structure:

{
  id: 1, // ID of the block, if not set it uses the Array Index
  name: 'My saved block 001', // You can set a name or an image
        img
:
    'http://...', // The editor shows only name or image, not both, if both set it will show the image
        definition
:
    'json'
}

There are three actions you need to implement to make saved blocks work: onBlockSave, onBlockEdit and onBlockRemove. All of them needs to be implemented in callbacks object.

Example:

onBlockSave(json) {
  const name = window.prompt('Enter block name:')
  if (name !== null) {
    console.log('saving block', json)
  }
},
onBlockRemove(id) {
  if (window.confirm('Are you sure?')) {
    console.log('removing block', id)
  }
},
onBlockEdit(id) {
  const name = window.prompt('Block name:', 'My block 001')
  if (name !== null) {
    console.log('saving edited block', id)
  }
}

Since it's your responsibility to take care of those actions, you also need to update the list of saved blocks once updated. To do so you the following function:

TopolPlugin.setSavedBlocks([
  {
    id: 1, // ID of the block, if not set it uses the Array Index
    name: "My saved block 001", // You can set a name or an image
    img: "http://...", // The editor shows only name or image, not both, if both set it will show the image
    definition: "json",
  },
]);

This function takes an array of all saved block you want to show within the editor.