Editor.js content
Store editor output as structured block JSON in a Strapi custom field.
Strapi 5 plugin · Node.js 22
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
Store editor output as structured block JSON in a Strapi custom field.
Includes configured text, list, quote, table, image, embed and formatting tools.
Create simple or embedded-entry blocks in the admin UI, subject to license-tier limits.
Use Strapi's upload service for editor images and attachments.
Yjs and Socket.IO code provides configurable real-time collaboration support. Live provider connections are not verified here.
Admin routes support listing, creating and restoring document snapshots.
Getting started
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
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
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
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 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