editor-js / embed Goto Github PK

After installing editor-js/embed and adding it to tools, editor-js is still returning incorrect data.
It is recognizing embedded elements as paragraphs, returning type: "paragraph" and, text and level keys in the data object instead of:

{
  "type" : "embed",
  "data" : {
    "service" : "...",
    "source" : "...",
    "embed" : "...",
    "width" : ***,
    "height" : ***,
    "caption" : "..."
  }

Howdy folks. I've built a plugin to handle rendering of Twitter iframes without relying on 3rd party service (Twitframe). I wanted to share it with you guys. Not sure if this is the proper channel to do that - my apologies in advance.

Github: https://github.com/Aror/twitter-embed-editorjs-plugin
NPM: https://www.npmjs.com/package/twitter-embed-editorjs-plugin

I was hoping that at some point this could be integrated with the Embed tool if there is interest

Can you please add an option to embedd Github gist and with read-only option enabled,
Plugins avaibale for GitHub gist does not provide an read-only option

it sometime comes to case when some one also want to embed github's link and it will be nice to also have one service for github

For example, imagine typing the source URL in a text input, then feeding it to the insert() method:

editor.blocks.insert('embed', {source: url}, {}, index, true)

Of course, that won't work because the service and embed URL have not been set.

How can you insert an embed block based just on the source URL, without parsing the service and embed URL yourself?

Working on a project which had been using 2.3.1, with @editorjs/editorjs 2.19.1. Yesterday I updated the Embed tool to 2.4.0, and started seeing this error being thrown when clicking in the Editor instance in the blank space after the last paragraph:

Uncaught TypeError: Cannot read property 'updateCurrentInput' of undefined
    at y.value (editor.js?9336:2)
    at k.value (editor.js?9336:2)
    at HTMLDocument.eval (editor.js?9336:2)
value @ editor.js?9336:2
value @ editor.js?9336:2
eval @ editor.js?9336:2

Clicking on existing text in the Editor instance does not throw this error.

After reverting to @editorjs/embed to 2.3.1 I do not see the error locally any more.

Hello,
I'm using this plugin for one of my client. I tried adding a custom service, fairly simple, but it does not seem to be taking into account. I tried everything, re-wrote many times the regex. The exemple on the readme seems to work only because it is already included in the default services.

Here is my configuration:

airtable: {
  regex: /https?:\/\/airtable\.com\/([a-zA-Z0-9]*)/,
  embedUrl: "https://airtable.com/embed/<%= remote_id %>",
  html: "<iframe height='300' scrolling='no' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>",
},

Is anyone else having same trouble?

Hi, i am trying to add gist github service but it is not working. This is what i tried

'github': {
              regex: /https?:\/\/gist.github.com\/([^\/\?\&]*)\/([^\/\?\&]*)/,
              embedUrl: 'https://gist.github.com/<%= remote_id %>',
              html: "<iframe height='300' scrolling='no' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>",
              height: 300,
              id: (groups) => groups.join('/')
          }

What am i doing wrong?

When I try to update data like

this.data = {
    html: "<div><p>TESTING</p></div>"
}

Block is updated as

{
 html: "TESTING"
}

It doesn't update whole html.

like this:

video: {
    class: Embed,
    inlineToolbar: true,
    config: {
        // video service
    }
},
music: {
    class: Embed,
    inlineToolbar: true,
    config: {
        // music service
    }
},

In the output format, are width and height guaranteed to always be integers, or can they be floating point numbers?

Context: I'm a back-end .NET developer needing to parse Editor.js documents. Back-end deserialization/parsing in strongly typed languages requires me to choose to deserialize to either int (the simplest and most constrained) or float (the most general, but unnecessary if it's guaranteed to always be an integer). If these properties are guaranteed to always be int, then that guarantee should ideally be added to the readme to ensure it is formalized and kept in the future.

I'm tríing to get embed to work but I noticed that some urls won't work. I think it has something to do with url length. For reproduction of the issue use following config and Uel:

embed:
{
class: Embed,
inlineToolbar: itb,
config:
{
services:
{
falstad:
{
regex: /https?://(www.)?falstad.com/circuit/circuitjs.html?ctz=(.*)/,
embedUrl: 'https://www.falstad.com/circuit/circuitjs.html?ctz=<%= remote_id %>',
html: "<iframe height='300' scrolling='no' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>",
height: 400,
width: 800,
id: (groups) => groups[1]
},
}
}
},

http://www.falstad.com/circuit/circuitjs.html?ctz=CQAgjCAMB0l3BWcMBMcUHYMGZIA4UA2ATmIxAUgpABZsAoANxAFowU8RcbX3Ox2UcBSpIq46AnoATVnioCUtfoKXSApgDMAhgFcANgBd6AJxDFC4QRa6QeCuPQDuchYLYcrSyM+VfzlopQvjbcvJ5hPswoCJZhMYGCCiLU4lCSMlx4PCgoPNjZ-mpaekaZ2NhxdlyVIGicxToGxrIVlvU1iUqNpS1Z+dUFOXl1IBpNZS5t-kP+PlO1YbORvglFeCreqxvrDfjBLhx7nNMd83Wxtjk7K4c31Ud1I+ePufmFbwf9-jQ2QefLaq-Kr2UwUGg8IIICFXIRgRw0SDYVg0fgYSzyOqIoQoAD6hBouMguMRpFxCCJsApxLxeIYiORiIU6IonjyaRQYHxhOJpOI5MpkGpuNpXIYLmhkMEwLmvklsJlKyAA

Halfway through the url it works well (meaning it will properly insert the iframe with the incomplete link) but the while url does not insert the embed iframe.

Long live the devs!

I have designed a custom service to embed genially presentation as following:

genially: { regex: /https?:\/\/view.genial.ly\/(\w+)\/?(\w+(-[\w]+)+)?/, embedUrl: 'https://view.genial.ly/<%= remote_id %>', html: "<div style='position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;'><iframe frameborder='0' style='width: 100%; height: 100%;' type='text/html' allowscriptaccess='always' allowfullscreen='true' scrolling='yes' allownetworking='all'></iframe></div>" }

Unfortunately there is no joy.

I also introduce a block dynamically by the time I import a record somewhere in the code where I ingest records from a CSV:

if (id) { content.blocks.push({ "id": nanoid(10), "type": "embed", "data": { "service": "genially", "source":https://view.genial.ly/${id}`,
"embed": https://view.genial.ly/${id},
"caption": title
}
});
}`

And it doesn't show neither.

Is there something slipping my attention or I just bumped into a dodo?

These are typically genially links:

• https://view.genial.ly/60c8e13fb16c270dc0e31d08/presentation-simple-presentation
• https://view.genial.ly/60c77528dd18b30db40f58c3/presentation-umbra-producerea-eclipselor
• https://view.genial.ly/60406bc2ead6200f87f37500
• https://view.genial.ly/601583b91bd3060d78c622f4/presentation-sunetul-caracteristici

thank you.

The generated embed link is like http://imgur.com/{id}/embed

but the actual embed link should look like https://imgur.com/a/{id}/embed?pub=true&;w=540

Kindly look into this issue soon.

I did a lot of tests with config. And looks like it doesn't work.
It only supports default services from official list.

A year ago: I added Twitch clips support but it can no longer work.

I can use this embed tool with another editor? If yes, how?

Twitframe's postMessage API is inclined for jQuery only. Does anyone figured out how to fix the big space/height of Twitter embeds in React?

I wanna use the Aparat service. When I passed this URL into editor content https://www.aparat.com/v/rE9gU the iframe doesn`t inject into my body.

Setting the keys according to https://github.com/editor-js/embed/blob/master/docs/services.md to false does nothing and still loads all services as of "@editorjs/embed": "^2.4.6".

https://imgur.com/a/4y0MB3p

config: {
  services: {
    youtube: true,
    vimeo: true,
    imgur: false,
    twitter: false
  }
}

is there a way to support multi links (pasting many links once)

Nice plugin. Is there a way how to disable a caption? I do not want it in my editor. Thank you

When embedding Facebook ( https://www.facebook.com/hbajanssen/posts/10225124680457455 )
`
ErrorUtils caught an error:

Cannot listen to an undefined element. [Caught in: Tried to listen to element of type click]

Subsequent non-fatal errors won't be logged; see https://fburl.com/debugjs.
`

I am using EditorJS with Directus (version 9.13.0) and Embed 2.5.2.

In order to avoid repeating too much when overriding a service’s configuration only partially, it’d be great to be able to extend the bundled configuration:

import Embed, { services } from '@editorjs/embed'

// …

embed: {
    class: Embed,
    config: {
        services: {
            vimeo: {
                ...services.vimeo,
                html: `<div class="vimeo-wrap">${services.vimeo.html}</div>`
            }
        }
    }
}

...\node_modules\@editorjs\embed\dist\bundle.js:1:5165: Unexpected token (1:5165)

I get this error when I

import Embed from '@editorjs/embed';

and run

parcel serve main.js

package.json:

{
  ...
  "devDependencies": {
    "@editorjs/editorjs": "^2.17.0"
  },
  "dependencies": {
    "@editorjs/embed": "^2.3.1",
    "@editorjs/header": "^2.4.1",
    "@editorjs/list": "^1.4.0"
  }
}

Tried to include the embed plugin in toolbox, Everthing is working without errors, but its not visible in the toolbox.

I have tested with two tweets and there is a big space after the tweet preview

Suppose you have dim= width or height with
%
px
em
then Number.isFinite(dim)
will make your config invalid for those cases.

I paste once. The URL is inserted twice.

That’s it. That’s the entire issue.

I noticed that instagram links are not converted

there is my code：https://github.com/calibur-tv/Mahoo/blob/ae018bf80006e6bde11cfac02461263ea937327b/components/editor/index.vue#L105

editor.saver.save() returns this error. Does this plugin only support "Youtube and Vime(?)"? I'm using version 2.5.2. And editorjs's version is 2.25.0. I'm trying to use Aparat urls.

I just install and import it through my component, not config or using any parameters yet.
And the react error popup shows the 'ReferenceError: window is not defined' message.
file-path: ~/node_modules/@editorjs/embed/dist/bundle.js
and my dependencies:
{
"@editorjs/checklist": "^1.3.0",
"@editorjs/code": "^2.7.0",
"@editorjs/delimiter": "^1.2.0",
"@editorjs/editorjs": "^2.23.2",
"@editorjs/embed": "^2.5.1",
"@editorjs/header": "^2.6.2",
"@editorjs/image": "^2.6.2",
"@editorjs/inline-code": "^1.3.1",
"@editorjs/link": "^2.4.0",
"@editorjs/list": "^1.7.0",
"@editorjs/marker": "^1.2.2",
"@editorjs/paragraph": "^2.8.0",
"@editorjs/quote": "^2.4.0",
"@editorjs/raw": "^2.3.0",
"@editorjs/simple-image": "^1.4.1",
"@editorjs/table": "^2.0.1",
"@editorjs/warning": "^1.2.0",
"autoprefixer": "^10.4.4",
"next": "12.1.4",
"postcss": "^8.4.12",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-editor-js": "^2.0.6",
"react-icons": "^4.3.1"
}

Please check it and notify me if I miss any steps or you found a solution.
Many thanks,

When embedding Instagram ( https://www.instagram.com/p/CTpsDdiLaHO/ ) :

`35fd650da79f.js:160 ErrorUtils caught an error:

No hash offset available

Subsequent non-fatal errors won't be logged; see https://fburl.com/debugjs.`

I am using EditorJS with Directus (version 9.13.0) and Embed 2.5.2

Hi I am new to editor.js and I am amazed by its potential to compete with Gutenberg. I have read the doc, and it seems like that block template is not a thing in Editor.js at the moment.

IMO this features is essential if we need to build a more complex editor(e.g Form, Profile entry), which it can limit how user can interact with the form.

UI: https://zpl.io/a7JqXxK

Trying to add a support for NSFW version of gfycat

`redgifs: {

regex: /(?:https://)?(?:www.)?redgifs.com/watch/([a-zA-Z]+)$/gm,
embedUrl: 'https://redgifs.com/ifr/<%= remote_id %>',
html: "<iframe height='360' scrolling='no' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>",
width: 640, height: 360
}`

gfycat itself works

For a valid embed block, can any of the service, source, embed, width, height, or caption properties under any circumstances (now or in the future) be null or omitted? Are any of the aforementioned properties guaranteed to always be present and non-null for this block to be valid?

Context: I'm a back-end .NET developer needing to parse Editor.js documents. The readme lists all of the aforementioned properties but does not explicitly guarantee that they will always be present and non-null. Back-end deserialization/parsing in strongly typed languages would be easier with some guarantees about which properties can and can not be null/omitted. (Ideally, any such guarantees should be added to the readme to ensure they are formalized and kept in the future.)

Caption placeholder unchangable

my embedUrl is: //music.163.com/outchain/player?type=2&height=66&id=<%= remote_id %>,

and get content is：//music.163.com/outchain/player?type=2&height=66&id=22793199

Twitch dose not work, cause Twitch Embedded Player has updated.

Twitch Embedded Player Updates in 2020

Before

<iframe src="https://player.twitch.tv/?channel=twitchpresents" />

After

<iframe src="https://player.twitch.tv/?channel=twitchpresents&parent=streamernews.example.com&parent=embeds.example.com" />

It seems that embedding for Twitch has gone as twitch-video & twitch-channel return the following:
Security Error: Content at chrome://browser/skin/privatebrowsing/aboutPrivateBrowsing.css may not load data from blob:null/9c869394-8ec8-4d19-9d1e-33bc6e8e449a.

When I upgrade to the latest EditorJS version (2.20.2) the config settings do not get passed down to the Embed tool (all services are turned on and my custom services do not work). I don't know if this is an issue with EditorJS or if something needs to be upgraded in the embed package.

Happy to help debug anyway I can!

Hi,
I'm trying to embed a reel URL, but it doesn't work as for Ig posts. There is any chance to embed that? Thanks

for example:
https://www.youtube.com/watch?v=UTFJDjBKgWk&feature=youtu.be

looks like the &feature=youtu.be url param, prevents from Embed to recognise this is as a youtube link

Would you consider a drastic change that embed would not be inline but block element? I think it would be logical because the link is converted into some preview which is block. It would work this way:

• There should be a button in Plus toolbar to add new Embed block.
• When user types or pastes the supported URL, the current paragraph will be split and new Embed block will be inserted

Thank you for consideration