npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@oak-digital/strapi-plugin-react-editorjs

v0.0.3

Published

Plugin for Strapi Headless CMS, hiding the standard WYSIWYG editor and replacing it with Editor.js

Downloads

3

Readme

⚠️ This is the Strapi v4 version of this plugin! In order to use with v3, please use release v.1.5.1.

🙉 What it is?

This is a plugin for Strapi Headless CMS that replaces the standard wysiwyg editor with the cool Editor.js and all its compatible add-ons.

🍀 Supported official add-ons

All of the above add-ons (if added) work initially when the plugin is loaded. You can also customize the add-ons available in your application using the instructions below.

🤟🏻 Getting Started

yarn add strapi-plugin-react-editorjs
# or
npm install 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': ['*'],
        },
      }
    },
  },
  // ...
];

⚙️ How to extend/develop this plugin (optional)

If you want to change the look of the editor or add/remove editorJS plugins, you will need to do the following:

  1. If this plugin is already install via yarn or npm, uninstall:
yarn remove strapi-plugin-react-editorjs
# or
npm uninstall strapi-plugin-react-editorjs
  1. Go to the ./src/plugins folder (create it if it doesn't exist) and clone the project:
# If you wish to clone the Master Branch
git clone https://github.com/melishev/strapi-plugin-react-editorjs.git
# If you wish to clone the Beta Branch
git clone --single-branch --branch beta https://github.com/melishev/strapi-plugin-react-editorjs.git
  1. Go into the plugin and install dependencies:
    • cd strapi-plugin-react-editorjs
    • yarn install or npm install
  2. 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 }) => ({
  // ...
  'editorjs': {
    enabled: true,
    resolve: './src/plugins/strapi-plugin-react-editorjs'
  },
  // ...
})
  1. To make changes to EditorJS plugins, edit the ./src/plugins/strapi-plugin-react-editorjs/admin/src/config/customTools.js file.
    • Note: the Image Tool add-on has been highly customized in order to work in Strapi and cannot be edited in the customTools.js file. If you wish to develop it further, you may, but it will take much more advanced knowledge and testing.
  2. Rebuild Strapi after installation and after any changes made in the plugin.
yarn build
# or
npm run build

Please note that the add-ons are configured for Strapi, be careful when changing the configuration.

👨🏻‍🏭 Developing

  1. Personality Tool
  2. Attaches Tool
  3. Full screen mode

⭐️ Show your support

Give a star if this project helped you.