editor-js / embed Goto Github PK
View Code? Open in Web Editor NEWEmbed Tool for Editor.js
License: MIT License
Embed Tool for Editor.js
License: MIT License
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]
},
}
}
},
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:
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".
config: {
services: {
youtube: true,
vimeo: true,
imgur: false,
twitter: false
}
}
is there a way to support multi links (pasting many links once)
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.
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
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.
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
<iframe src="https://player.twitch.tv/?channel=twitchpresents" />
<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:
Thank you for consideration
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.