BUG: cannot configure a video block with src=null
Question
Description
- The bug is reproduced on the current demo
What happens ?
I configured my video block with src=null like this :
class Video {
constructor(editor) {
let block = editor.BlockManager.get('video'); //Inherit from plugin
editor.BlockManager.remove(block.id);
return {
content: {
...block.attributes.content,
src: null,
style: {
width: '250px',
height: '150px',
},
},
label: `<div class="callout-icon callout-icon-video"></div>
<div class="callout-block-label">Video</div>`,
category: 'Extra',
attributes: {
class: 'fa',
'data-type': 'video',
},
};
}
}
When i drag the block i get on the generated html an base64 image on the src attribute like this :
<video allowfullscreen="allowfullscreen" id="imm4" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMuNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+" controls="controls"></video>
Expected behavior
- I want to set a block without predefined src and give the user the ability to set the src via the trait .
Steps to reproduce on the demo
- Open the import popup and paste this and click import
<video allowfullscreen="allowfullscreen" id="imm4" controls="controls"></video>
- Reopen the import popup and you will see that the src attribute is set with the base64 image .
<video allowfullscreen="allowfullscreen" id="imm4" controls="controls" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMuNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+">
</video>
<style>* {
box-sizing: border-box;
}
body {
margin: 0;
}
*{
box-sizing:border-box;
}
body{
margin:0;
}
@keyframes fadeEffect{
from{
opacity:0;
}
to{
opacity:1;
}
}
</style>
The conclusions of my research
It seems to be a collision between the video and the image component , because the base64 image is the fallback image for the image component .
Answers (3)
Hi,
If you didn't find answer here, you can contact with Devfuture Team: https://devfuture.pro/contact/
We specialise on GrapesJS.
@meyerco pass an empty fallback: '' property also
To be more precise , the bug is about loading an html that contain a video tag without src attribute .
After loading this html , an scr attribute is added to video tag . This src value is a base64 image (obviously the default base64 image for the image component) .
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2802
[BUG] editor get stucked when switching selection quickly between controls
DescriptionThe bug is reproduced on the current demo What happens ? When switching selection quickly between controls , the editor get stuc...
Issue #3806
BUG: Target :null when adding video
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome new version Reproducible demo link...
Issue #2800
[Bug] when removing a tooltip its css is not removed
DescriptionThe bug is reproduced on the current demo Expected behavior When a tooltip is removed its css is removed What happens instead ?...
Issue #2156
Cannot change existing block's icon
Hi all, great JS plugin btw! Im new to programming and i would like to know a few things: I want to set the icon as a "heading" icon from f...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.