Strapi plugin logo for Rich Text Blocks (Extended)

Rich Text Blocks (Extended)

An extended version of the JSON based native Strapi field "Rich Text (Blocks)" that provides enhanced customization options and features.

thumbnail for Rich Text Blocks (Extended)

Strapi Plugin - Rich Text (Blocks - Extended)

An extended version of the JSON based native Strapi field "Rich Text (Blocks)" that provides enhanced customization options and features.

Preview

Documentation Image

🚀 Features

  • 📝 All native Rich Text Blocks features
  • 🎨 Customizable font families with presets
  • 🌈 Custom color palettes
  • 📱 Configurable viewport options
  • 📏 Custom font sizes
  • ↕️ Adjustable line heights
  • ↔️ Letter spacing control
  • ⬅️ Text alignment options
  • 🔠 Text formatting options including uppercase transform
  • ✨ On-the-fly custom values for font size, line height, and letter spacing
  • 🔄 Expandable editor interface
  • ➖ Separator blocks with customizable styling
  • 📐 Viewport-specific image dimensions with aspect ratio locking

🖼️ Image Block Support

The image block is now fully functional! Thanks to the integration with strapi-plugin-media-extended, you can:

  • Select single or multiple images from the media library
  • Upload new images directly from the editor
  • Organize images in folders
  • Full media library functionality within the rich text editor
  • Viewport-specific image dimensions: Set custom width and height for each breakpoint
  • Aspect ratio locking: Maintain proportional dimensions when resizing images

Image Settings

The image block includes advanced viewport-specific settings:

Viewport-specific settings (configurable per device breakpoint):

  • Image Width: Set custom width for images at different viewports
  • Image Height: Set custom height for images at different viewports
  • Aspect Ratio Lock: Toggle to maintain proportional dimensions when adjusting width or height
    • When locked, changing width automatically adjusts height proportionally (and vice versa)
    • Uses the image's intrinsic dimensions to calculate the aspect ratio
    • Default state is locked to preserve image proportions

Default behavior:

  • Mobile viewport automatically uses the image's intrinsic dimensions as defaults
  • Other viewports start with no explicit dimensions (allowing responsive behavior)
  • Aspect ratio is locked by default to prevent image distortion

Note: The strapi-plugin-media-extended plugin is required for image block functionality.

⚙️ Installation

# Using npm
npm install strapi-plugin-rich-text-blocks-extended strapi-plugin-media-extended

# Using yarn
yarn add strapi-plugin-rich-text-blocks-extended strapi-plugin-media-extended

Note: The strapi-plugin-media-extended package is required for image block functionality.

🔧 Configuration

Basic Settings

OptionTypeDefaultDescription
disableDefaultFontsbooleanfalseEnable to use custom font presets
customFontsPresetsstring-Custom font families (format: "Label:value")
disableDefaultColorsbooleanfalseEnable to use custom color presets
customColorsPresetsstring-Custom colors (format: "Label:#HEX")

Example font presets:

1Arial:arial
2Open Sans:open-sans
3Times New Roman:times-new-roman
4Georgia:georgia

Example color presets:

1Black:#000000
2White:#FFFFFF
3Gray:#808080
4Light Gray:#D3D3D3
5Dark Gray:#A9A9A9

Advanced Settings

OptionTypeDefaultDescription
disableDefaultViewportsbooleanfalseEnable to use custom viewport presets
customViewportsPresetsstring-Custom viewports (format: "Label:value")
disableDefaultSizesbooleanfalseEnable to use custom font sizes
customSizesPresetsstring-Custom font sizes (one per line)
disableDefaultLineHeightsbooleanfalseEnable to use custom line heights
customLineHeightsPresetsstring-Custom line heights (one per line)
disableDefaultTrackingbooleanfalseEnable to use custom letter spacing
customTrackingPresetsstring-Custom letter spacing values (one per line)
disableDefaultAlignmentsbooleanfalseEnable to use custom alignments
customAlignmentsPresetsstring-Custom alignments (format: "Label:value")

Example viewport presets:

1Mobile:mobile
2Tablet:tablet
3Desktop:desktop

Example size presets:

16
28
39
410
511
612
714
816
918
1024
1130
1248

Example alignment presets:

1Left:left
2Center:center
3Right:right
4Justify:justify

🎯 Usage

  1. After installation, the plugin will be available as a custom field type in your Content-Types Builder.
  2. Add a new field and select "Rich Text Blocks (Extended)" as the field type.
  3. Configure the field options according to your needs using the settings above.

🔡 Text Formatting

The editor supports various text formatting options:

  • Uppercase: Transform selected text to uppercase using the AA button in the toolbar
  • Superscript: Apply using the sup button in the toolbar
  • Subscript: Apply using the sub button in the toolbar
  • Bold: Apply using the B button in the toolbar or Ctrl/Cmd+B
  • Italic: Apply using the I button in the toolbar or Ctrl/Cmd+I
  • Underline: Apply using the U button in the toolbar or Ctrl/Cmd+U
  • Strikethrough: Apply using the S button in the toolbar or Ctrl/Cmd+Shift+S
  • Inline code: Apply using the Code button in the toolbar or Ctrl/Cmd+E

These formatting options can be applied to any text within paragraphs, headings, lists, and quotes.

📝 Block Types

The plugin supports various block types including:

  • Paragraphs
  • Headings (H1-H6)
  • Lists
  • Links
  • Images (with full media library support)
  • Quotes
  • Code blocks
  • Separators

🎯 Separator Block

The separator block allows you to add visual dividers between content sections with the following customizable options:

Non-viewport specific settings:

  • Style: Choose from solid, dashed, dotted, or double line styles
  • Color: Select from the available color palette

Viewport-specific settings (configurable per device breakpoint):

  • Size: Control the thickness of the separator (0-100)
  • Length: Set the width percentage of the separator (0-100%)
  • Orientation: Choose between horizontal or vertical orientation

These viewport-specific settings allow you to create responsive separators that adapt to different screen sizes.

🤝 Contributing

Feel free to contribute to this plugin by:

  1. Creating issues for bugs or feature requests
  2. Submitting pull requests for improvements
  3. Providing feedback and suggestions

📄 License

MIT License - Copyright (c) Jorge Pizzati

Install now

npm install strapi-plugin-rich-text-blocks-extended

STATS

3 GitHub stars113 weekly downloads

Last updated

5 days ago

Strapi Version

5.12.5 and above

Author

github profile image for Jorge Pizzati
Jorge Pizzati

Useful links

Create your own plugin

Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.