Issue #3098Opened October 27, 2020by meyerco2 reactions

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)

GoodPHPOctober 30, 20201 reactions

Hi,

If you didn't find answer here, you can contact with Devfuture Team: https://devfuture.pro/contact/

We specialise on GrapesJS.

artfNovember 9, 20201 reactions

@meyerco pass an empty fallback: '' property also

meyercoOctober 29, 20200 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.