Strapi V4 support?

[Lengo46]

Will v4 be supported as it's the new stable version?

[melishev]

Hello @Lengo46 , yes, of course, in the coming days I will update the plugin, if of course it is needed

[melishev]

I checked the docs and similar plugins but couldn't find any answers. Plus, Strapi v4 itself still looks damp, and I would not recommend using it.

For now, I'll wait for the official documentation from the Strapi team to come out to find out what to do next.

[bogdaaamn]

They will be having a session about plugins migration to v4 today, I assume they will soon write about it as well (I hope)

https://twitter.com/strapijs/status/1468864266476441600?s=21

[melishev]

@BogDAAAMN

Yes, the article should definitely come out and I really look forward to it. I also follow the working plugins of other developers, hoping to see the implementation of the transition to version 4 from them.

[philohelp]

EditorJS would be a great addition to v4

[melishev]

@philohelp yes, I agree with you.

[melishev]

@philohelp @BogDAAAMN @RicardormDev @Lengo46

But at the moment I can't dedicate myself to developing a new version of the plugin for Strapi v4.

To be honest, I was close to porting the plugin to the new version, but the guys at Strapi have made their Front-end a little more complicated, which makes the porting process a bit more difficult at the moment.

At the moment I am busy with another project, if you have a desire to help in porting the plugin to a new version, I will be happy to tell you in which direction you should move and what problems I encountered during the port.

[jaskipper]

I would absolutely love to have this on v4 as well. I'm new to Strapi, but not EditorJS. I've been trying to get this working on v4. I've tried the plugin migration tool (which fails), and also tried following tutorials for other v4 editors, but to no avail. Unfortunately I've never worked with React, and just can't quite seem to figure out how to get this working. I've eventually gone back to Strapi v3 in order to use this, but it seems that Strapi is pushing very hard to move everyone over to v4.

[opheliagame]

@jaskipper i'm kind of in a similar situation and wondering if there is a guide on how to go back to v3 easily that you used, or will i have to setup a new project from scratch?

[jaskipper]

@opheliagame - I'm still in the process of setting things up from scratch, so I didn't migrate backwards. I just set up a v3 from scratch. Unfortunately I wouldn't know how to tell you how to migrate backwards.

[jaskipper]

@melishev - Good news. I've actually been able to migrate this over to version 4... somewhat. I have it working in a way that it is pulling up the interface, and I can add blocks. The Headers aren't styling, the link tool isn't working, and although I can pull up the image dialog, I can't add an image. But it is actually pulling up.

I've gone through the process of migrating the folder structure with the strapi codemods tool, I've updated dependencies, and had to change several things around. At this point, I'm not sure what I've changed and what I haven't. I'll keep fooling with it and will report back. Not sure what I would need to do to share the code back.

[melishev]

Hey @jaskipper

This is very cool, I'm glad you could do it. I also got to this point, when the headers did not work out properly, due to the banal lack of styles in the Strapi itself.

As far as I know, they switched to a full-fledged design system, which probably has a headers component (otherwise I don’t know how else they implemented headers in their own). I'll look up their design system and post a link here later.

I can look at your code tomorrow if you let me)

[jaskipper]

@melishev - I've now gotten styling working. At this point, the only items that don't work are the Link plugin and the Image plugin, from what I can tell.

Yes, you can absolutely see/have/edit the code.

[jaskipper]

@melishev - Here's the code that I've been working on. Link and Image tools not yet working. There aren't options in roles & permissions to enable for either tool. https://github.com/jaskipper/strapi-plugin-react-editorjs/tree/beta-v4

[melishev]

@jaskipper - This is awesome, you're a cool dude. I'll see what I can do in the next few hours, and I'll be sure to post my results here.

[melishev]

@jaskipper - How did you manage to solve the problem with headers?

[jaskipper]

@melishev - Good deal! Thanks!

Strapi v4 resets all styles, so I added the styles in directly to the Wysiwyg/wrapper.js file. I'm also going by examples that I see in other v4 plugins.

I just uploaded a commit that allows the routes to show up in Users & Permissions > Roles.

I think that the problem with the Link & Image plugins are that they are not showing up in the API. Been working on those a little this morning, but haven't found a fix yet.

[melishev]

Well, good news.

It seems that we are starting (or already finishing) work on porting the plugin to version 4 of Strapi.

I have just included the Semantic Release and Commitizen packages in the project, for convenient future management of the plugin publication.

@jaskipper , I got acquainted with your work and it is simply amazing, thanks for your contribution to the development of the project. In order for me to accept it and continue working on it, please follow the instructions below:

1. Fork or update your existing repository.
2. Correct your existing commit messages according to the Angular Convention Commits.
3. Create a PR for the beta branch so that I can accept your changes.

You may not like it all the way, but in the end it will make the package easier for both us developers and its consumers. If you have any questions, please email me.

[jaskipper]

@melishev - Yes, I'll do as you say and will create a PR for the beta branch so you can accept. I'll need to do that later this evening.

In continued news, I now have the Link tool working, although it's not showing the thumbnail correctly as of yet. I'll see if I can fix that before I finalize and send. So far, the image tool isn't working. I haven't had a chance to look into what the issue is with that though.

[jaskipper]

@melishev - So sorry to hear about this. Thanks for the report, and I'm very sure that most Russians do not want what Putin wants. He absolutely doesn't define you. Yes, this situation is very sad. Praying for the safety of both Russians and those from Ukraine who have been drug into this... and for a quick resolution.

[philohelp]

Thank you to share these thoughts with us. This won't last forever - may the future bring wiser and more rational politicians. But since that moment, please be careful for yourself and the ones you care for.

[melishev]

@Lengo46 , @philohelp , @opheliagame , @BogDAAAMN Thank you.

I accepted the changes that @jaskipper made. At the moment they are in the beta branch and we will continue to work on adapting the plugin.

If you are ready to test it, then you can download the beta version of the release using npm or yarn: https://www.npmjs.com/package/strapi-plugin-react-editorjs/v/2.0.0-beta.1

You can also read the beta information from @jaskipper: https://github.com/melishev/strapi-plugin-react-editorjs/releases/tag/v2.0.0-beta.1

[jaskipper]

@melishev - Thanks. I hope to get some more work in this weekend. Let me know if you have any breakthroughs on the Image tool, as I know that you have a much better idea of what is going on there. I'll keep working on figuring it out. Where should conversations about different parts of the code occur? I use git for all of the development that I do, which is almost always my own work on private BitBucket repositories. However, I'm very new to collaboration. So definitely let me know how I should be doing things.

[melishev]

@jaskipper of course, no problem, you can contact me via Telegram, if you use it of course, this is the most convenient way for me. We can also use email

[jaskipper]

@melishev - Ha, sorry! I meant where here on GitHub. Should we just continue the conversation here, should I open up new issues, or should I create pull requests and we discuss there? Just trying to learn the correct way of doing things.

[melishev]

@jaskipper - Well, there are no rules. The most adequate option, as for me, is to decide on the tasks and draw up an issue for each of them.

Each task should be a separate PR to the beta branch

If the task is small and does not need additional attention, then I think it is not necessary to create an Issue.

[jaskipper]

@melishev - I just submitted another pull request with a fix for the Image tool. As far as I can tell, everything is working in normal start and develop modes. For some reason, the link tool doesn't work in develop --watch-admin mode. I get no console feedback as to why it isn't working in that mode.

[melishev]

@jaskipper - It already depends on the Strapi developers. As far as I remember, this launch mode did not work correctly before.

[jaskipper]

@melishev - In pull request #20, I have now completely updated every part of the code and the README instructions. Everything is working well in Strapi v4, and once merged, this can close many open issues, including this one.

• 24

• 22

• 21

• 16

• 11

• 5

This also addresses and adds fixes/features for several closed issues:

• 13

• 12

• 10

• 6

[derrickmehaffy]

@melishev - In pull request #20, I have now completely updated every part of the code and the README instructions. Everything is working well in Strapi v4, and once merged, this can close many open issues, including this one.

• Beta - Strapi v4: How to Customize Editor #24
• Beta - Strapi v4: Collection of responsive URL's in Image Tool #22
• Beta - Strapi v4: README updates #21
• Get the size of an Image in Request #16
• Strapi V4 support? #11
• Image Tool: uploading failed because of ReferenceError: axios is not defined #5

This also addresses and adds fixes/features for several closed issues:

• Inline link button is missing #13
• Inline Link possible? #12
• npm v8 is not supported #10
• [Future Request] response not only a link to the original image, but also a collection with modified dimensions using strapi-plugin-responsive-image #6

Hey Jaskipper just wanted to swing by and say well done working on the port over to Strapi v4 :) Was testing this out earlier today and really liking the look and feel of it. Couple of rough edges I see but still very solid.

We have an open feature request (that I opened :laughing: ) about looking at alternatives for our default editor here for those interested in joining the convo: https://github.com/strapi/strapi/issues/12440

[jaskipper]

@derrickmehaffy - so cool! Love that you've opened that feature request with Strapi! Would love any feedback on what rough edges you are finding. I'm very new to the Strapi world, so this has been a great project to dive in and learn on.

[jaskipper]

Also, @derrickmehaffy. I don't know if you've realized this or not, but my latest changes have not been incorporated into the beta version. My latest changes are on the beta-v4 branch. Here's how you can use the latest changes.

1. If this plugin is already installed via yarn or npm, uninstall:

   yarn remove strapi-plugin-react-editorjs
   # or
   npm uninstall strapi-plugin-react-editorjs

2. Go to the ./src/plugins folder (create it if it doesn't exist) and clone the project:

git clone --single-branch --branch beta-v4 https://github.com/jaskipper/strapi-plugin-react-editorjs.git

3. Go into the plugin and install dependencies:
   • cd strapi-plugin-react-editorjs
   • yarn install or npm install
4. In an editor add the following code into the main Strapi v4 ./config/plugins.js file (create the file if it doesn't exist)

module.exports = ({ env }) => ({
  // ...
  'react-editorjs': {
    enabled: true,
    resolve: './src/plugins/strapi-plugin-react-editorjs'
  },
  // ...
})

In order for Strapi to show the Link Tool thumbnails correctly, you will need to edit the 'strapi::security' line in ./config/middlewares.js. Change that line to the following (do this at your own risk).

module.exports = [
  // ...
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        directives: {
          'img-src': ['*'],
        },
      }
    },
  },
  // ...
];

[jaskipper]

@melishev - Is there any way that we can get #20 merged to avoid all of the issues that users are having?

[derrickmehaffy]

By the way, since my current salary has gone from $2,500 to $1,500, I'm looking for a new job, I'll be glad if you put in a good word for me with your bosses 😄

Ah sorry to hear about that, Strapi is constantly putting up new postings on our website https://strapi.io/jobs

Your in our hearts and minds 🫂

[jaskipper]

@melishev - Wow, definitely sorry to hear about that. I'm sure your life is crazy right now. Hope your emigration process goes quickly and smoothly. About the code, it appears that quite a few people are wanting to use it, so merging it tomorrow would be great! Of course, I'm using it personally, and at this point is working great for me... but making it easier for others to use would be awesome.

[melishev]

@melishev - Wow, definitely sorry to hear about that. I'm sure your life is crazy right now. Hope your emigration process goes quickly and smoothly. About the code, it appears that quite a few people are wanting to use it, so merging it tomorrow would be great! Of course, I'm using it personally, and at this point is working great for me... but making it easier for others to use would be awesome.

Yes, of course, my friend, I promise to do it today or tomorrow. You did a great job, that's awesome.

[melishev]

By the way, since my current salary has gone from $2,500 to $1,500, I'm looking for a new job, I'll be glad if you put in a good word for me with your bosses 😄

Ah sorry to hear about that, Strapi is constantly putting up new postings on our website https://strapi.io/jobs

Your in our hearts and minds 🫂

Yes, that's cool, I looked at your vacancies. But React is not my main work framework, I'm still more of a Vue developer. Now I have a lot of work to do in terms of moving, paperwork, learning English (you need to practice speaking English properly), but in any case, it's very cool. I think later, I can try)

[melishev]

Well, as promised, I checked out the changes, most of them are related to styles. I left my answer in PR #20 . I'll take another look tomorrow!

[jaskipper]

@melishev Good deal. Yes, I've now made all of the requested changes. Let me know if anything else is needed!

[melishev]

@derrickmehaffy , @Lengo46 , @philohelp , @opheliagame Well guys, the new version⚠️ is ready and waiting. Thanks - @jaskipper

[jaskipper]

Awesome @melishev! Thank you!

[melishev]

💥 Well guys, I've released the beta to the official release.

[philohelp]

Congratulations !

[jaskipper]

@melishev - Awesome!