@acf-int/strapi-plugin-editorjs/README.md

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

<h1 align="center">Strapi Editor.js</h1>

## What it is?

#### This is a plugin for [Strapi Headless CMS](https://strapi.io) that replaces the standard wysiwyg editor with the [Editor.js](https://editorjs.io). This plugin is a fork of [strapi-plugin-react-editorjs](https://market.strapi.io/plugins/strapi-plugin-react-editorjs) refactored to use in acf team.

<br>

## Supported official add-ons

TODO: Update later

- [x] Paragraph Tool (default)
- [x] [Embed Tool](https://github.com/editor-js/embed)
- [x] [Table tool](https://github.com/editor-js/table)
- [x] [List Tool](https://github.com/editor-js/list)
- [x] [Warning Tool](https://github.com/editor-js/warning)
- [x] [Code Tool](https://github.com/editor-js/code)
- [x] [Link Tool](https://github.com/editor-js/link)
- [x] [Image Tool](https://github.com/editor-js/image)
- [x] [Raw HTML Tool](https://github.com/editor-js/raw)
- [x] [Heading Tool](https://github.com/editor-js/header)
- [x] [Quote Tool](https://github.com/editor-js/quote)
- [x] [Marker Tool](https://github.com/editor-js/marker)
- [x] [Checklist Tool](https://github.com/editor-js/checklist)
- [x] [Delimiter Tool](https://github.com/editor-js/delimiter)
- [x] [InlineCode Tool](https://github.com/editor-js/inline-code)
- [x] [Typograf Tool](https://www.npmjs.com/package/@acf-int/editorjs-typograf)
- [x] [Highlight Blocktune](https://www.npmjs.com/package/@acf-int/editorjs-highlight-blocktune)
- [ ] [Personality Tool](https://github.com/editor-js/personality)
- [ ] [Attaches Tool](https://github.com/editor-js/attaches)

<br>

## Getting Started

```bash
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).

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

All plugins are disabled by default. If you need to enable editorjs plugin, you can provide a boolean flag in config/plugins.js

```js
module.exports = {
  editorjs: {
    enabled: true,
    config: {
      header: true,
      image: true,
      quote: true,

      // Other available plugins
      typograf: false,
      highlight: false,
      embed: false,
      table: false,
      list: false,
      warning: false,
      code: false,
      LinkTool: false,
      raw: false,
      checklist: false,
      delimiter: false,
      marker: false,
      inlineCode: false,
    },
  },
};
```

## How to contribute

##### Clone repository

##### Install dependencies

```bash
cd strapi-plugin-editorjs
yarn install
```

##### Create strapi app next to plugin

```bash
cd ..
npx create-strapi-app strapi-playground
```

##### Create plugins.js in config folder and add this code

```js
module.exports = {
  ...

  editorjs: {
    enabled: true,
    resolve: "../strapi-plugin-editorjs",
  },
};
```

##### Start strapi in watch admin mode

```bash
yarn strapi develop --watch-admin
```

## In development

1. Full screen mode
2. Settings tab to configure plugins
3. Medialib modal to upload images