Magic Editor X

Strapi 5 plugin · Node.js 22

A block editor custom field for Strapi

Magic Editor X adds an Editor.js-based custom field with structured content, Media Library integration, configurable custom blocks and collaboration support.

Manifest compatibility: Strapi ^5.57.0; Node.js >=22.22.2 <23.

What it does

Features

Editor.js content

Store editor output as structured block JSON in a Strapi custom field.

Editor tools

Includes configured text, list, quote, table, image, embed and formatting tools.

Custom blocks

Create simple or embedded-entry blocks in the admin UI, subject to license-tier limits.

Media Library

Use Strapi's upload service for editor images and attachments.

Collaboration support

Yjs and Socket.IO code provides configurable real-time collaboration support. Live provider connections are not verified here.

Version history

Admin routes support listing, creating and restoring document snapshots.

Getting started

Install

Install the published package in your Strapi project:

npm install magic-editor-x

Enable the plugin in config/plugins.js or config/plugins.ts:

module.exports = () => ({
  'magic-editor-x': {
    enabled: true,
  },
});

Then rebuild the Strapi admin. Add the Magic Editor X custom field to a content type in the Content-Type Builder.

Plugin settings

Configuration

Plugin options are set under the magic-editor-x key in config/plugins. Defaults include a 10-second link-preview timeout, 10 MB image and file limits, selected editor tools, and enabled collaboration support.

module.exports = () => ({
  'magic-editor-x': {
    enabled: true,
    config: {
      debug: false,
      linkPreviewTimeout: 10000,
      maxImageSize: 10 * 1024 * 1024,
      maxFileSize: 10 * 1024 * 1024,
      collaboration: {
        enabled: true,
        sessionTTL: 2 * 60 * 1000,
        wsPath: '/magic-editor-x/realtime',
        wsUrl: null,
        allowedOrigins: [],
        allowedAdminRoles: ['strapi-super-admin'],
        allowedAdminUserIds: [],
      },
      api: { autoParseJSON: true },
    },
  },
});

Allowed image MIME types default to JPEG, PNG, GIF and WebP. The plugin also accepts an enabledTools list and API JSON auto-parsing setting.

Access boundaries

Security

The current editor, upload, collaboration, license, snapshot and custom-block routes are Strapi admin routes. They are not public Content API endpoints. Routes require an authenticated admin. Editor and collaboration-permission routes also check the plugin access permission; image and attachment uploads additionally check the Strapi upload-create permission. Collaboration sessions check the configured collaboration access rules.

Remote preview and URL-upload requests validate HTTP(S) URLs, resolve public addresses, recheck redirects, and enforce response size, MIME-type and timeout limits. Use normal Strapi admin permissions and review who can grant collaboration access. This page does not claim live external-service or collaboration testing.

Admin routes

API

Routes use the Strapi admin API base and require the access described above. The plugin currently declares no Content API routes.

  • GET /magic-editor-x/link fetches link-preview metadata.
  • POST /magic-editor-x/image/byFile, /image/byUrl and /file/upload handle editor uploads.
  • /magic-editor-x/collaboration/… manages collaboration permissions and access.
  • /magic-editor-x/license/… reads license status and limits or stores a license key.
  • /magic-editor-x/snapshots/… lists, creates and restores snapshots.
  • /magic-editor-x/custom-blocks/… manages custom blocks and tier limits.
  • POST /magic-editor-x/collab/session requests a collaboration session.

Development

Releases and testing

Releases use semantic-release on Node.js 22 and Conventional Commits. The release workflow installs from the lockfile, runs tests, builds and verifies the package before publishing to npm.

npm ci --legacy-peer-deps
npm test
npm run build
npm run verify

Release history · Source and issue tracker · npm package