CMS Block Editor

A powerful, feature-rich block editor for CMS applications built with Lexical and React. Create beautiful, responsive content with an intuitive editing experience.

Features

✨ Rich Text Editing - Full formatting support (bold, italic, underline, headings, lists, etc.)
🎨 Sections - 10 pre-designed section templates (hero, features, pricing, testimonials, etc.)
📐 Layouts - Flexbox and CSS Grid support with visual controls
🖼️ Images - Upload, resize, drag-and-drop, and advanced editing with filters
🎨 Image Filters - 7 adjustable filters with 6 professional presets
🎬 Videos - Native HTML5 video upload with playback controls
🎥 Embeds - YouTube, Facebook, Instagram, Twitter, TikTok, Vimeo, Spotify, SoundCloud
🔗 Links - Custom link insertion with labels and options
📊 Tables - Visual table builder with configurable rows/columns and professional styling
🎨 Styling - Background colors, images, gradients, opacity controls
🌈 Themes - 10 preset themes with light/dark mode and custom theme support
🔍 SEO Tools - Complete SEO optimization with meta tags, structured data, and analysis
📱 Responsive - Mobile-first design with automatic responsive behavior
💾 Export/Import - HTML and Markdown support
🎯 Section Editor - Full control over section layout, spacing, and styling
⚡ Performance - Optimized rendering and minimal bundle size

Installation

npm install cms-block-editor

Quick Start

import { CMSBlockEditor, ThemeProvider } from 'cms-block-editor';
import 'cms-block-editor/dist/index.css';

function App() {
  const [content, setContent] = useState('');

  return (
    <ThemeProvider defaultTheme="light" defaultMode="auto">
      <CMSBlockEditor 
        value={content}
        onChange={(editorState) => {
          setContent(JSON.stringify(editorState));
        }}
      />
    </ThemeProvider>
  );
}

Rendering Content

import { CMSRenderer } from 'cms-block-editor';
import 'cms-block-editor/dist/index.css';

function BlogPost({ content }) {
  return (
    <article>
      <CMSRenderer content={content} />
    </article>
  );
}

Core Components

CMSBlockEditor

Main editor component with full editing capabilities.

Props:

• value?: string - Initial editor state (JSON string)
• onChange?: (state: any) => void - Callback fired when content changes
• onImageAdded?: (file: File) => Promise<string> - Custom image upload handler that returns the image URL
• onVideoAdded?: (file: File) => Promise<string> - Custom video upload handler that returns the video URL
• useBase64Url?: boolean - Use base64 encoding for images (default: true)
• seoMetadata?: SEOMetadata - SEO metadata for the content
• onSEOMetadataChange?: (metadata: SEOMetadata) => void - Callback when SEO metadata changes
• showSEO?: boolean - Show/hide SEO button (default: true)

CMSRenderer

Read-only renderer for displaying saved content.

Props:

• content: string - Serialized editor state (JSON string)
• className?: string - Additional CSS classes

Available Features

Text Formatting

• Headings (H1, H2, H3)
• Bold, Italic, Underline, Strikethrough
• Inline code
• Text alignment (left, center, right, justify)
• Bullet and numbered lists
• Blockquotes
• Code blocks

Media

• Images: Upload from computer, resize with 8-point handles, drag-and-drop positioning, custom upload handler support, advanced editing with filters
• Image Filters: Brightness, contrast, saturation, blur, grayscale, sepia, hue rotation with 6 presets
• Videos: Native HTML5 video upload, drag-and-drop, playback controls (autoplay, loop, mute), resize support
• YouTube: Embed videos with custom sizing
• Embeds: Support for 8+ platforms with automatic URL detection
• Tables: Visual builder with configurable dimensions, header rows, and professional styling

Sections

10 pre-designed templates:

• Hero Section
• Features Grid
• Call to Action
• Testimonial
• Pricing Table
• Team Members
• Statistics
• FAQ Section
• Contact Form
• Newsletter Signup

Section Controls

• Background colors (30 presets + custom)
• Background images with gradient overlays
• Layout types (Block, Flex, Grid)
• Flexbox controls (direction, wrap, align, justify)
• CSS Grid controls (columns, rows)
• Spacing controls (padding, margin, gap)
• Text alignment
• Opacity control

Export & Import

• Export to HTML (clean or with styles)
• Export to Markdown
• Import from HTML
• Import from Markdown
• Download as files
• Copy to clipboard

Advanced Usage

Theme System

Use preset themes or create custom ones:

import { CMSBlockEditor, ThemeProvider, ThemeSwitcher } from 'cms-block-editor';

function App() {
  return (
    <ThemeProvider defaultTheme="ocean" defaultMode="auto">
      <div>
        <ThemeSwitcher />
        <CMSBlockEditor value={content} onChange={setContent} />
      </div>
    </ThemeProvider>
  );
}

Available Themes: light, dark, ocean, forest, sunset, rose, midnight, dracula, monokai, minimal

Custom Theme:

import { Theme, lightTheme } from 'cms-block-editor';

const myTheme: Theme = {
  ...lightTheme,
  name: 'my-theme',
  colors: {
    ...lightTheme.colors,
    primary: '#ff6b6b',
    primaryHover: '#ee5a52',
  },
};

<ThemeProvider defaultTheme={myTheme}>
  <CMSBlockEditor />
</ThemeProvider>

Custom Video Upload

Upload videos to your server:

import { CMSBlockEditor } from 'cms-block-editor';

function Editor() {
  const [content, setContent] = useState('');

  const handleVideoUpload = async (file: File): Promise<string> => {
    const formData = new FormData();
    formData.append('video', file);
    
    const response = await fetch('/api/upload-video', {
      method: 'POST',
      body: formData,
    });
    
    const data = await response.json();
    return data.url;
  };

  return (
    <CMSBlockEditor 
      value={content}
      onChange={(state) => setContent(JSON.stringify(state))}
      onVideoAdded={handleVideoUpload}
    />
  );
}

Custom Image Upload

Upload images to your server instead of using base64 encoding:

import { CMSBlockEditor } from 'cms-block-editor';

function Editor() {
  const [content, setContent] = useState('');

  const handleImageUpload = async (file: File): Promise<string> => {
    // Upload to your server
    const formData = new FormData();
    formData.append('image', file);
    
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    });
    
    const data = await response.json();
    return data.url; // Return the uploaded image URL
  };

  return (
    <CMSBlockEditor 
      value={content}
      onChange={(state) => setContent(JSON.stringify(state))}
      onImageAdded={handleImageUpload}
      useBase64Url={false}
    />
  );
}

Image Upload Options:

• With onImageAdded: Provide a custom upload handler that uploads the file to your server and returns the URL
• With useBase64Url={true} (default): Images are encoded as base64 strings (no server upload needed)
• With useBase64Url={false} and no onImageAdded: Image upload will be disabled

With Persistence

import { CMSBlockEditor } from 'cms-block-editor';

function Editor() {
  const [content, setContent] = useState(() => {
    return localStorage.getItem('content') || '';
  });

  const handleChange = (state) => {
    const serialized = JSON.stringify(state);
    setContent(serialized);
    localStorage.setItem('content', serialized);
  };

  return <CMSBlockEditor value={content} onChange={handleChange} />;
}

Export Utilities

import { 
  exportToHTML, 
  exportToMarkdown,
  downloadHTML,
  downloadMarkdown 
} from 'cms-block-editor';

// Export to HTML string
const html = exportToHTML(editor);

// Export to Markdown string
const markdown = exportToMarkdown(editor);

// Download as file
downloadHTML(editor, 'content.html', { includeStyles: true });
downloadMarkdown(editor, 'content.md');

Import Utilities

import { 
  importFromHTML,
  importFromMarkdown 
} from 'cms-block-editor';

// Import HTML
importFromHTML(editor, '<h1>Hello World</h1>');

// Import Markdown
importFromMarkdown(editor, '# Hello World');

SEO Optimization

Manage SEO metadata and analyze content:

import { CMSBlockEditor, SEOMetadata } from 'cms-block-editor';
import { useState } from 'react';

function Editor() {
  const [content, setContent] = useState('');
  const [seoMetadata, setSeoMetadata] = useState<SEOMetadata>({
    title: 'My Page Title',
    description: 'My page description for search engines',
    keywords: ['keyword1', 'keyword2', 'keyword3'],
    ogImage: 'https://example.com/image.jpg',
    twitterCard: 'summary_large_image',
  });

  return (
    <CMSBlockEditor
      value={content}
      onChange={setContent}
      seoMetadata={seoMetadata}
      onSEOMetadataChange={setSeoMetadata}
      showSEO={true}
    />
  );
}

SEO Features:

• Meta tags (title, description, keywords, author, canonical)
• Open Graph tags for social media
• Twitter Card support
• Article metadata
• Schema.org structured data
• Real-time SEO analysis with scoring
• Keyword extraction
• Slug generation

Programmatic SEO Analysis:

import { analyzeSEO, generateMetaTags } from 'cms-block-editor';

// Analyze content
const analysis = analyzeSEO(htmlContent, metadata);
console.log('SEO Score:', analysis.score); // 0-100

// Generate meta tags
const metaTags = generateMetaTags(metadata);
// Returns HTML string with all meta tags

Styling

The editor comes with default styles. Import the CSS file:

import 'cms-block-editor/dist/index.css';

Custom Styling

Override default styles with your own CSS:

.cms-editor-shell {
  border: 2px solid #your-color;
  border-radius: 8px;
}

.cms-toolbar {
  background: #your-color;
}

.cms-section {
  /* Custom section styles */
}

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

TypeScript Support

Full TypeScript support with type definitions included.

import { CMSBlockEditor, CMSRenderer } from 'cms-block-editor';
import type { SerializedEditorState } from 'lexical';

Performance

• Optimized rendering with Lexical
• Minimal re-renders
• Lazy loading of plugins
• Small bundle size (~200KB minified)
• Tree-shakeable exports

Examples

Check out the example app for a complete implementation with:

• Basic editor
• Persistence with localStorage
• Custom styling
• All features demonstrated

Documentation

Comprehensive guides available:

• Features Summary - Complete overview of all features
• SEO Optimization Guide - Complete SEO tools and best practices
• Theme System Guide - Complete theming and customization
• Advanced Theming Guide - Theme customizer and builder API
• Video Upload Guide - Native HTML5 video upload and playback
• Image Editing Guide - Advanced image filters and effects
• Section Creator Guide
• Section Editing Guide
• Background Image Guide
• Embed Guide
• Table Guide
• Responsive Rendering Guide

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © [Your Name]

Support

For issues and questions:

• GitHub Issues
• Documentation

Acknowledgments

Built with:

• Lexical - Extensible text editor framework
• React - UI library
• React Icons - Icon library