Panda Editor

A modular, extensible rich text editor using EditorJS for Rails applications. Extracted from Panda CMS.

• 🎨 Rich Content Blocks: Paragraph, Header, List, Quote, Table, Image, Alert, and more
• 🔧 Extensible Architecture: Easy to add custom block types
• 🚀 Rails Integration: Works seamlessly with Rails 7.1+
• 💾 Smart Caching: Automatic HTML caching for performance
• 🎯 Clean API: Simple concern-based integration for ActiveRecord models

Add this line to your application's Gemfile:

gem 'panda-editor'

And then execute:

bundle install

Include the concern in your model:

class Post < ApplicationRecord
  include Panda::Editor::Content
end

This adds:

• content field for storing EditorJS JSON
• cached_content field for storing rendered HTML
• Automatic HTML generation on save

# In your controller
@post = Post.find(params[:id])

# In your view
<%= raw @post.cached_content %>

# Or render directly from JSON
renderer = Panda::Editor::Renderer.new(@post.content)
<%= raw renderer.render %>

In your application.js:

import { EditorJSInitializer } from "panda/editor"

// Initialize an editor
const element = document.querySelector("#editor")
const editor = new EditorJSInitializer(element, {
  data: existingContent,
  onSave: (data) => {
    // Handle save
  }
})

Create a custom block:

class CustomBlock < Panda::Editor::Blocks::Base
  def render
    html_safe("<div class='custom'>#{sanitize(data['text'])}</div>")
  end
end

# Register it
Panda::Editor::Engine.config.custom_renderers['custom'] = CustomBlock

• Paragraph: Standard text content
• Header: H1-H6 headings
• List: Ordered and unordered lists
• Quote: Blockquotes with captions
• Table: Tables with optional headers
• Image: Images with captions and styling options
• Alert: Alert/notification boxes

# config/initializers/panda_editor.rb
Panda::Editor::Engine.configure do |config|
  # Add custom EditorJS tools
  config.editor_js_tools = ['customTool']
  
  # Register custom renderers
  config.custom_renderers = {
    'customBlock' => MyCustomBlockRenderer
  }
end

Uses Rails importmaps for individual module loading.

Compiled assets are automatically downloaded from GitHub releases or can be compiled locally:

rake panda_editor:assets:compile

After checking out the repo, run:

bundle install
bundle exec rspec

Bug reports and pull requests are welcome on GitHub at https://github.com/tastybamboo/panda-editor.

The gem is available as open source under the terms of the BSD-3-Clause License.

Copyright © 2024, Otaina Limited