search

dimitrov-adrian / directus-extension-editorjs-interface

Block editor (Editor.js) interface for Directus 9
https://www.npmjs.com/package/directus-extension-editorjs
GNU General Public License v3.0
180 stars 42 forks source link

Error when pasting url for embed tool #11

Closed benosman closed 3 years ago

benosman commented 3 years ago

I have enabled the embed tool and I'm trying to utilise it.

When trying to paste in a youtube url in a new block I get the following error in the console

addRange(): The given range isn't in document.

The only way I can get it to work is if i type one or more characters and then paste without a space, then the youtube/vimeo or whatever embed works.

I've tried on Chrome and Firefox with the same issue, but the Editor.js official demo works just fine.

This issue occurs with and without #9 & #10

benosman commented 3 years ago

The code causing the issue is here:

https://github.com/dimitrov-adrian/directus-extension-editorjs-interface/blob/71180a35c6434adf7fc4ba27b3b03857f721908e/src/interface.vue#L210

The emit signal is picked up by editor.js: https://github.com/codex-team/editor.js/blob/d5aaa56ca00403c2b776eb39963958240163241a/src/components/selection.ts#L306

It seems like the embed element is not yet in the document , I wonder if the $emit call could be deferred to allow time to build the block.

dimitrov-adrian commented 3 years ago

Yes, issues come by this fact, and the fact that to handle properly external value change (such as if prop of the component is changed) need to listen this event, but when sending the value it also trigger the update as the editorjs trigger it on render() method too, so falling in recursion.

Anyway, I had added a simple debouncer which seems to do the trick until find better way to deal with this.

@benosman could you test against latest dist please?

benosman commented 3 years ago

@dimitrov-adrian

I've tested this out and it seems to work fine!

Thank you 👍

p.s. Do you have any tips on setting up a dev environment for working on Directus extensions? I'd like to get set up so I can contribute to this and other extensions, but found it difficult debugging the frontend code in real time with full source etc.