Objetivo:null al añadir vídeo

Versión GrapesJS

• Confirmo que se debe usar la última versión de GrapesJS

¿Qué navegador usas?

Versión nueva de Chrome

Enlace de demo reproducible

https://codesandbox.io/s/react-redux-toolkit-application-forked-l5rhp?file=/src/pages/Editor.js

Describe el bicho

¿Cómo reproducir el bicho?

1. Arrastrar y soltar el vídeo al área de lienzo desde el administrador de bloques
2. Intenta añadir vídeo en el modal pasando el cursor por el vídeo y pulsando el botón usar vídeo

¿Cuál es el comportamiento esperado? Cuando el usuario navega un vídeo y hace clic en usar el botón de vídeo, debería añadir un vídeo a la etiqueta de vídeo en un lienzo

¿Cuál es el comportamiento actual? Cuando el usuario flota sobre un vídeo en modal y pulsa el botón de usar vídeo, el vídeo no se añade en absoluto y en consola muestra objetivo: null

Si es necesario ejecutar algo de código para reproducir el error, pégalo aquí abajo: Aquí está el código del editor de Grapes JS, el código completo se puede encontrar aquí https://codesandbox.io/s/react-redux-toolkit-application-forked-l5rhp?file=/src/pages/Editor.js:715-4094 '''js

useEffect(() => { const editor = grapesjs.init({ contenedor: "#editor", storageManager: false, blockManager: cierto, Plugins: [bloquear] });

editor.on("component:create", (model) => { if (model.get("type") === "video") { setAddVideo(false); console.log("url de vídeo.", videos.videoUrl); editor. Commands.run("open-assets", { objetivo: editor.getSelected(), URL: videos.videoUrl }); } });

editor. DomComponents.addType("video", { modelo: { Predeterminados: { etiquetaNombre: "vídeo", reproducción automática: Cierto, LOOP: Cierto, Silenciado: Cierto, Controles: falso, Cartel: "poster.png", src: "", Arrastrable: Cierto, removible: cierto, Copiable: Cierto, redimensionable: cierto, estilable: [], Rasgos: [] }, init() { console.debug("vídeo - modelo - init"); }, updated(property, value) { si (propiedad === "src") this.set("src", valor); } }, Vista: { eventos: { dblclick: "onActive" }, init() { console.debug("vídeo - ver - init"); const { modelo } = esto;

props const = [ "bucle", "reproducción automática", "controles", "color", "Rel", "modestbranding", "póster" ]; eventos const = props.map((p) => 'change:${p}').join(" ");

this.listenTo(model, "change:src", this.updateSrc); this.listenTo(modelo, eventos, this.updateVideo); }, onRender() { console.debug("vídeo - ver - onRender");

this.updateVideo(); }, updateVideo() { const { model, el } = this;

el.loop = model.get("loop"); el.autoplay = model.get("autoplay"); el.controls = model.get("controls"); el.poster = model.get("poster"); }, updateSrc() { console.debug("vídeo - ver - updateSrc");

const { model, el } = this; si (!el) regresa;

Sea src = model.get("src"); el.src = src; }, onActive(e) { console.debug("vídeo - ver - onActive");

editor.runCommand("open-assets", { Objetivo: esto.modelo, tipos: ["vídeos"], aceptar: "vídeo/*", onSelect() { console.debug("vídeo - subido - onSelect"); editor. Modal.close(); editor. AssetManager.setTarget(null); } });

e.stopPropagation(); } } });

setEditor (editor); }, [despacho]);

si (editor) { editor. Commands.add("open-assets", { run(editor, sender, opts = {}) { dispatch(setIsOpen(true)); console.log("opts", opts); console.log("opts URL", opts.url); if (addVideo) { opts.target.set("src", opts.url); if (opts.url) { dispatch(setIsOpen(false)); } } } }); } const handleUseVideo = (video) => { console.log("vídeo..", vídeo); setAddVideo(true); dispatch(setVideoUrl(video)); editor. Commands.run("open-assets", { objetivo: editor.getSelected(), URL: vídeo }); };

@artf me he quedado sin ideas y necesito ayuda 

### Código de conducta

- [X] Acepto seguir el Código de Conducta de este proyecto