Saved data validation
Let see what happens if we create several Blocks of Simple Image, left them empty and save the Editor:
saved data will be following:
{
"time": 1552751755369,
"blocks": [
{
"type": "image",
"data": {
"url": "https://cdn.pixabay.com/photo/2017/09/01/21/53/blue-2705642_1280.jpg"
}
},
{
"type": "image",
"data": {
"url": ""
}
},
{
"type": "image",
"data": {
"url": ""
}
}
],
"version": "2.11.10"
}
To skip empty or wrongly filled Blocks we can provide validate method. It will accept the saved Block's data returned by our save method, check it for correctness and returns a boolean value of validation result.
class SimpleImage {
// ... toolbox static getter
// ... constructor
// ... render
save(blockContent){
const input = blockContent.querySelector('input');
return {
url: input.value
}
}
validate(savedData){
if (!savedData.url.trim()){
return false;
}
return true;
}
}
lets see what we got with saving now:
{
"time": 1552751783125,
"blocks": [
{
"type": "image",
"data": {
"url": "https://cdn.pixabay.com/photo/2017/09/01/21/53/blue-2705642_1280.jpg"
}
}
],
"version": "2.11.10"
}
As you can see, all empty Image Blocks was skipped due to our validation method. You can add any validation logic here.
In the next guide we will consider how to change a Block view: when user pastes an URL, we will show the Image and Caption elements