strapi-plugin-lexical

Integrates the Lexical WYSIWYG editor as a custom field in Strapi.

Alpha Software
This plugin is in active development. Contributions in the form of bug reports, feature suggestions, and pull requests are highly encouraged!

Table of contents

• strapi-plugin-lexical
  • Installation
  • Usage
  • Roadmap
    • v0 - Alpha
    • v1 - Stable
  • Contributing
  • Resources

Installation

1. Install the plugin:

   npm install strapi-plugin-lexical

2. Include the required CSS and Prism.js in your Strapi admin:

   // ./src/admin/app.js
   import "../../node_modules/strapi-plugin-lexical/dist/style.css";
   import "prismjs";

   (Why importing so weird? See here)

3. Add Vite support for Prism.js:

   • Install the plugin:

     npm install --save-dev vite-plugin-prismjs

   • Update your Vite configuration:

     // ./src/admin/vite.config.js
     import { mergeConfig } from "vite";
     import prismjs from "vite-plugin-prismjs";
     
     export default (config) =>
       mergeConfig(config, {
         plugins: [
           prismjs({
             languages: "all", // Load all languages or customize as needed
           }),
         ],
       });

   Note: Prism.js is required even if you don't plan to support code blocks. If you find a workaround, please share it with us via a pull request or issue.

---

Usage

• A new Lexical field type will be available in the Strapi content-type builder.
• Currently, it supports features migrated from the Lexical playground.
• For rendering content on your frontend, consider using libraries like payload-lexical-react-renderer or similar tools.

---

Roadmap

v0 - Alpha

• Implement basic functionality.
• Port features from the Lexical playground as the initial foundation.
• Create field presets:
  • Simple, Complex, and Full (selectable during field setup).
• Gather community feedback.
• Look for a potential co-maintainer.

v1 - Stable

• Introduce plugin-based architecture:
  • Allow users to extend functionality with their own plugins.
• Enable configuration of presets via plugin settings.
• Open to community ideas! Submit an issue.

---

Contributing

We welcome contributions! Here’s how you can help:

• Report bugs or suggest features via the issue tracker.
• Submit pull requests to improve functionality or documentation.
• Share your feedback and ideas to shape the plugin’s future.

---

Resources

• Lexical Documentation
• Lexical Playground
• Payload Lexical React Renderer
• Strapi Plugin Development Guide