After updating from rc 94 to 98 (jump due to database update bug with new login system), the image plugin won't show the image anymore. The json is updated correctly as far as I can tell, but the ui shows the loading spinner.

The following Error is thrown repeatedly:

 Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    at c (index.js:27)
    at l (index.js:27)
    at index.js:27
    at p.show (index.js:27)
    at E.updateToolboxesPosition (index.js:27)
    at E.hideToolboxes (index.js:27)
    at Object.onClick (index.js:27)
    at d.popoverClicked (index.js:27)
    at HTMLDivElement.<anonymous> (index.js:27)

Hello, Sorry, but how do I load the extension into system? I did copy the dist file into interfaces/index.js and reload the Directus instance, but nothing is there.... is there any special instruction I need do?

There is 7 forks of this awesome extension and I can see more coming. Maybe you would like to add a license.

Image blocks doesn't show image.

{"errors":[{"message":"You're not allowed to read item \"5543bca3-5b56-46c9-8607-00b4af72ed0c\" in collection \"directus_files\".","extensions":{"collection":"directus_files","item":"5543bca3-5b56-46c9-8607-00b4af72ed0c","action":"read","stack":"Error: You're not allowed to read item \"5543bca3-5b56-46c9-8607-00b4af72ed0c\" in collection \"directus_files\".\n at AuthorizationService.<anonymous> (/api/src/services/authorization.ts:412:10)\n at Generator.throw (<anonymous>)\n at rejected (/api/src/services/authorization.ts:6:65)\n at runMicrotasks (<anonymous>)\n at processTicksAndRejections (internal/process/task_queues.js:93:5)","code":"FORBIDDEN"}}]}

You will need to pass a token, right?

I got caught by surprise, when updating directus to fix some issues I was experiencing, that this extension stopped working.

It turns out that it needs to be updated to Vue 3.

https://github.com/directus/directus/releases/tag/v9.0.0-rc.75

I had a quick look myself but so far haven't got a working rollup config.

I found interesting bug:

When unchecked "Border" option in interface setting, the Editor turns read-only mode for NON-admin users.
If the Border option checked, everything works fine.

The output error is same as #4

Nice to test out editor.js in Directus 👍🏻

However, I can't get it to work on my Directus instance (v9.0.0-rc.95)...

1. Downloaded a copy of your repo
2. Run npm install in the editorjs dir
3. Run npx directus-extension build
4. Moved the index.js file to extensions/interfaces/editorjs
5. Started up Directus, npm run dev
6. My other extensions are loaded properly, but editorjs doesn't seem to be loaded
7. Created a new JSON field, but editorjs (Blocks) isn't an interface option, no where to be found...

addTokenToURL is no longer available though inject('system') after #7668. Would suggest a fix, but am still investigating where it can be picked from in rc92.

I should be possible to add an image from the clipboard but it results in endless loading without any api request to the server to process the upload.

It would be great to be able to add additional Editor.js plugins and configure them.
In my case, I'd like to use editorjs-layout, which also needs a fair amount of configuration to be useful.

Let me know, if I can provide more input or support.

Hi guys, I see this extension has more than 8 months without update. EditorJS is now in v2.26.5 and I see there is a lot of improvements been added.

I just want to confirm if you have plans to continue working in this nice extension and/or how can we help.

Thanks for all the effort you put on this project.

Hello,

I want to use Embed block, test on youtube embed and got error.

I tested Embed block on Editor.js website and no error

This content is blocked. Contact the site owner to fix the issue.

Thank you

Thanks for the awesome project! But I am not able to get the extension inside of directus working.

I tried to follow your installation steps.

1. Installed extension inside of my fresh Directus repo

npm install directus-extension-editorjs

2. Run Directus

npm run dev
npm run dev -w @directus/app

3. Add Field

• Create Field in Advanced Mode
• select Standard Field
• set Schema->Type to JSON
• switch to Interface

In the Interface section I can not see EditorJs. What I am missing? And one more question, can I also run your extension from the Directus Docker Image directly?

Thanks for your help!

I just installed this interface via yarn with latest into the current version of Directus and it seems some tools (i.e. embed) do not appear, even if activated in the interface settings.

Hello guys,

I want to config domain to image path URL

Image data save right now
/assets/c99aa974-6132-4a6a-8442-5c1e162454a8

Config save to this
https://domain.com/assets/c99aa974-6132-4a6a-8442-5c1e162454a8

Great extension, Thank you

When you select multiple blocks and then hit delete key, the blocks are not deleted. Only one of the blocks is deleted. It's a known issue in Editor.js

Here's a fix #30 and it's based on a workaround provided here codex-team/editor.js#1755 (comment)

Hi Adrian,
Great job on this extension.
When I got to a page with this extension, it triggers the need for an update when just viewing. On inspection, it's caused because EditorJS updates the 'time' variable within the JSON output.

{
"time" : 1550476186479,
"blocks" : [],
"version" : "2.8.1"
}

Do you know of a way of disabling this behaviour?

Thanks
Mark

Is this extension ready for the new editorjs version (v2.23.*)? As for now this extension has an old version (v.2.22.2) which is pretty much far behind...

v2.23.0

• Improvement — EditorConfig — The onChange callback now accepts two arguments: EditorJS API and the CustomEvent with type and detail allowing to determine what happened with a Block
• New — Block API — The new dispatchChange() method allows to manually trigger the 'onChange' callback. Useful when Tool made a state mutation that is invisible for editor core.
• Improvement — UI — Block Tunes toggler moved to the left
• Improvement — UI — Block Actions (BT toggler + Plus Button) will appear on block hovering instead of click
• Improvement — UI — Block Tunes toggler icon and Plus button icon updated
• Improvement — Dev Example Page — The menu with helpful buttons added to the bottom of the screen
• Improvement — Dev Example Page — The 'dark' theme added. Now we can code at night more comfortably.
• Improvement — Rectangle Selection — paint optimized
• Fix — Rectangle Selection — the first click after RS was not clear selection state. Now does.
• Improvement — Blocks API — toolbar moving logic removed from blocks.move() and blocks.swap() methods. Instead, you should use Toolbar API (it was used by MoveUp and MoveDown tunes, they were updated).
• New — Blocks API — The getBlockIndex() method added
• New — Blocks API — the insert() method now has the replace: boolean parameter
• New — Blocks API — the insert() method now returns the inserted Block API
• New — Listeners API — the on() method now returns the listener id.
• New — Listeners API — the new offById() method added
• New — API — The new UiApi section was added. It allows accessing some editor UI nodes and methods.
• New — The Roadmap added to the Readme
• Refactoring — Toolbox became a standalone class instead of a Module. It can be accessed only through the Toolbar module.
• Refactoring — CI flow optimized.
• Fix - Recognize async onPaste handlers in tools codex-team/editor.js#1803.
• Fix — Fire onChange event for native inputs codex-team/editor.js#1750

Latest:
https://github.com/codex-team/editor.js/releases/tag/v2.23.0

Text blocks start out as bold activated on the toolbar.

Toggling bold makes the text slightly thinner in the preview but you barely see the difference.

Either way, the expected <b> tags around the bolded text are missing in the output.

{"time":1659017175051,"blocks":[{"id":"uOLsnA7N8G","type":"paragraph","data":{"text":"Bold text<br>"}}],"version":"2.25.0"}

[email protected]
[email protected]

Thanks for this great plugin, should be the default editor in Directus!

This issue I am having is hard to reproduce:
Around 10% of the time my image block totally disappears after saving. Other blocks don't.

Will add more info to this issue once I found reproduction steps.

Seems to be a styling problem with the link tool.

When selecting a string to link, the link url is the same color as the background:

Hello :)

Thank you for your work on this interface, it's almost perfect.

Do you think it's possible to add the image's dimension (width and height) alongside the file size in the response object ?
I think it's here but I don't know the content of file object. I'll give it a try today.

Thank you !

Hello,
I have a collection named "courses" and a collection named "lessons." Within courses I have a M2A field I named "syllabus" to add lessons to each course item. I can add lessons and add titles to lessons just fine (input field). When I edit a lesson from within a course and try to use the Editor.js field, I am allowed to enter in all the content, but when I save, the panel goes blank.

When I first enter content, I get the following console error (though it does continue to let me add/edit new blocks):

vendor.ef99adf3.js:5 TypeError: Cannot create property 'content' on string '1'
    at Proxy.A (index.5bac3394.entry.js:43:73072)
    at onUpdate:modelValue (index.5bac3394.entry.js:43:75714)
    at Ph (vendor.ef99adf3.js:5:656)
    at W1 (vendor.ef99adf3.js:5:735)
    at nB (vendor.ef99adf3.js:2:21162)
    at h (index.5bac3394.entry.js:43:64094)
    at o.onUpdate:modelValue.$.<computed>.$.<computed> (index.5bac3394.entry.js:43:66546)
    at Ph (vendor.ef99adf3.js:5:656)
    at W1 (vendor.ef99adf3.js:5:735)
    at nB (vendor.ef99adf3.js:2:21162)

When I try to save, I get the following error:

vendor.ef99adf3.js:5 TypeError: Cannot read properties of undefined (reading 'endsWith')
    at index.5bac3394.entry.js:43:75647
    at Proxy.find (<anonymous>)
    at index.5bac3394.entry.js:43:75612
    at KB (vendor.ef99adf3.js:2:62802)
    at Proxy.lM (index.5bac3394.entry.js:43:74199)
    at v5 (vendor.ef99adf3.js:2:22303)
    at C3.pt [as fn] (vendor.ef99adf3.js:2:50749)
    at C3.run (vendor.ef99adf3.js:2:12019)
    at ut (vendor.ef99adf3.js:2:50415)
    at Oe (vendor.ef99adf3.js:2:50017)

Editor works perfectly fine when natively editing a lesson, but when editing a lesson from within a course, it breaks.

When editing within a course:

After saving everything disappears:

This extension is in development and most probably will have file structure change when Directus 9 official releases. Meanwhile breaking changes are possible in anytime.

Now Directus v9 is released. Are you planning to maintain this extension and make it stable? As explained in my other open issue there is problems to get the extension running...

The EditorJS instance won't be loaded when you login with NON-admin account.

The Editor works super fine with any admin accounts, however when you login to Directus CMS with a regular account like 'Editor', the editor itself won't be load correctly, and there is the console errors:

index.js:3 Editor.js is not ready because of Error: To enable read-only mode all connected tools should support it. Tools list don't support read-only mode.
TypeError: Cannot read property 'toggle' of undefined
index.js:3 Uncaught (in promise) Error: To enable read-only mode all connected tools should support it. Tools list don't support read-only mode.

any ideas?

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

Would love to see alt tag support with the Editor Image. I did see an issue request for Alt tag support (editor-js/image#30), but there hasn't been any move on this.

Would it be possible to extend the ImageTool here to support the Alt Tag?

When I enter text into a Paragraph block, the text is rendered as bold in the interface (the bold "B" is even selected when the text is highlighted). However, when it is saved, the accompanying <b> or <strong> tags are not saved with it. This happens even if un-bold and re-bold the text.

ok

When aligning a text with the inline tool (i.e. center), it seems the information is not persisted.

After saving the record, it forgot about the alignment again,

The API returns this:

{
  "id": "DS9xhnKSHr",
  "type": "paragraph",
  "data": {
    "text": "This should be centered."
  }
},

I'm using directus-extension-editorjs-interface v 1.1.0.
Let me know, if I can provide any more information to debug this.

Thanks for your work on this amazing plugin!

I'm having one issue with it. When I insert an image block I can only use the upload or url option from the Directus dialog. When I select from library the drawer opens behind the upload dialog and there is no click-through possible. Trying to select an image closes the dialog overlay and leaves me without an image added.

I'd really like there to be an implementation of editorjs-layout or similar.
It's helpful for blog style content, or landing page content.
Where you'd want a picture next to text etc. (Column layout)

Hi

First of all, big thanks for making this interface, it's really helpful for our Directus use case.

Second, I'd like to point out a bug we encountered. It seems that editorjs is not re-rendered when the value of interface changes, for example:

1. If editorjs interface is translated, then switching languages does not update editorjs
2. When manually updating JSON raw value, editorjs does not update

I've tracked it down to this commit.

It looks like emitValue and watch conflict with one another. emitValue is fired when editorjs initializes and marks isInternalChange as true, but it never resets it back.

A way to fix this would be to:

1. Revert the change in watch routine to change isInternalChange back to false, if it encounters it
2. Add finally to emiValue promise returned that changes isInternalChange back to false

This is what we've done on our forked version of this interface to fix it for us. I'm happy to make PR here as well if necessary

Does this extension allow you to add plugins to editorks? If so how?

I stumbled across this color plugin and thought it might be a valuable addition:
https://github.com/flaming-cl/editorjs-text-color-plugin

Let me know, what you think.