panda-editor 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: a96fbed654e5115930ed44a6e5561c732a36c27be96d10888989570ec4c6a705
+  data.tar.gz: 0efd2b485067e1f83d59e2903cab40279dc8830fdbe073b5ae3ae5d31346ff29
+SHA512:
+  metadata.gz: 7961ae1af4bddbdd37543d7c73cffd3aaf3962cd75815c1206c6023cebc1e2e1095ac1d5de218132f4041e94eb1a3a48a02b4bc8d17f4b92655ba74c33a88427
+  data.tar.gz: '0602738109c87304058c6fd0c52cfc87f71ab19ed3fcc1b6766da150687c2bab232358395c31dbfc9e41f402377944039590defb03e3b4c0aa4ccf05e78a8298'

data/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright © 2024, Otaina Limited
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

data/README.md

@@ -0,0 +1,146 @@
+# Panda Editor
+
+A modular, extensible rich text editor using EditorJS for Rails applications. Extracted from [Panda CMS](https://github.com/tastybamboo/panda-cms).
+
+## Features
+
+- 🎨 **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
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'panda-editor'
+```
+
+And then execute:
+
+```bash
+bundle install
+```
+
+## Usage
+
+### Basic Setup
+
+Include the concern in your model:
+
+```ruby
+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
+
+### Rendering Content
+
+```ruby
+# 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 %>
+```
+
+### JavaScript Integration
+
+In your application.js:
+
+```javascript
+import { EditorJSInitializer } from "panda/editor"
+
+// Initialize an editor
+const element = document.querySelector("#editor")
+const editor = new EditorJSInitializer(element, {
+  data: existingContent,
+  onSave: (data) => {
+    // Handle save
+  }
+})
+```
+
+### Custom Block Types
+
+Create a custom block:
+
+```ruby
+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
+```
+
+## Available Blocks
+
+- **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
+
+## Configuration
+
+```ruby
+# 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
+```
+
+## Assets
+
+### Development
+Uses Rails importmaps for individual module loading.
+
+### Production
+Compiled assets are automatically downloaded from GitHub releases or can be compiled locally:
+
+```bash
+rake panda_editor:assets:compile
+```
+
+## Development
+
+After checking out the repo, run:
+
+```bash
+bundle install
+bundle exec rspec
+```
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/tastybamboo/panda-editor.
+
+## License
+
+The gem is available as open source under the terms of the [BSD-3-Clause License](https://opensource.org/licenses/BSD-3-Clause).
+
+## Copyright
+
+Copyright © 2024, Otaina Limited

data/app/javascript/panda/editor/application.js

@@ -0,0 +1,25 @@
+// Panda Editor Application JavaScript
+// This file serves as the entry point for all EditorJS functionality
+
+import { EditorJSInitializer } from "./editor_js_initializer"
+import { EditorJSConfig } from "./editor_js_config"
+import { RichTextEditor } from "./rich_text_editor"
+
+// Export for global access
+window.PandaEditor = {
+  EditorJSInitializer,
+  EditorJSConfig,
+  RichTextEditor,
+  VERSION: "0.1.0"
+}
+
+// Auto-initialize on DOMContentLoaded
+document.addEventListener("DOMContentLoaded", () => {
+  console.log("[Panda Editor] Loaded v" + window.PandaEditor.VERSION)
+  
+  // Auto-initialize any editors on the page
+  const editors = document.querySelectorAll("[data-panda-editor]")
+  editors.forEach(element => {
+    new EditorJSInitializer(element)
+  })
+})

data/app/javascript/panda/editor/css_extractor.js

@@ -0,0 +1,80 @@
+export class CSSExtractor {
+  /**
+   * Extracts CSS rules from within a specific selector and transforms them for EditorJS
+   * @param {string} css - The CSS content to parse
+   * @returns {string} The extracted and transformed CSS rules
+   */
+  static extractStyles(css) {
+    const rules = []
+    let inComponents = false
+    let inContentRule = false
+    let braceCount = 0
+    let currentRule = ''
+
+    // Split CSS into lines and process each line
+    const lines = css.split('\n')
+
+    for (const line of lines) {
+      const trimmedLine = line.trim()
+
+      // Check if we're entering components layer
+      if (trimmedLine === '@layer components {') {
+        inComponents = true
+        continue
+      }
+
+      // Only process lines within components layer
+      if (!inComponents) continue
+
+      // If we find the .content selector
+      if (!inContentRule && trimmedLine.startsWith('.content')) {
+        inContentRule = true
+        braceCount++
+        // Transform the selector for EditorJS
+        currentRule = '.codex-editor__redactor .ce-block .ce-block__content'
+        if (trimmedLine.includes('{')) {
+          currentRule += ' {'
+        }
+        continue
+      }
+
+      // If we're inside a content rule
+      if (inContentRule) {
+        // Transform selectors for EditorJS
+        let transformedLine = line
+          .replace(/\.content\s+/g, '.codex-editor__redactor .ce-block .ce-block__content ')
+          .replace(/\bh1\b(?![-_])/g, 'h1.ce-header')
+          .replace(/\bh2\b(?![-_])/g, 'h2.ce-header')
+          .replace(/\bh3\b(?![-_])/g, 'h3.ce-header')
+          .replace(/\bul\b(?![-_])/g, 'ul.cdx-list')
+          .replace(/\bol\b(?![-_])/g, 'ol.cdx-list')
+          .replace(/\bli\b(?![-_])/g, 'li.cdx-list__item')
+          .replace(/\bblockquote\b(?![-_])/g, '.cdx-quote')
+
+        currentRule += '\n' + transformedLine
+
+        // Count braces to handle nested rules
+        braceCount += (trimmedLine.match(/{/g) || []).length
+        braceCount -= (trimmedLine.match(/}/g) || []).length
+
+        // If braces are balanced, we've found the end of the rule
+        if (braceCount === 0) {
+          rules.push(currentRule)
+          inContentRule = false
+          currentRule = ''
+        }
+      }
+    }
+
+    return rules.join('\n\n')
+  }
+
+  /**
+   * Gets all styles from a stylesheet that apply to the editor
+   * @param {string} css - The CSS content to parse
+   * @returns {string} The extracted CSS rules
+   */
+  static getEditorStyles(css) {
+    return this.extractStyles(css)
+  }
+}

data/app/javascript/panda/editor/editor_js_config.js

@@ -0,0 +1,306 @@
+export const EDITOR_JS_RESOURCES = [
+  "https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.28.2",
+  "https://cdn.jsdelivr.net/npm/@editorjs/paragraph@2.11.3",
+  "https://cdn.jsdelivr.net/npm/@editorjs/header@2.8.1",
+  "https://cdn.jsdelivr.net/npm/@editorjs/nested-list@1.4.2",
+  "https://cdn.jsdelivr.net/npm/@editorjs/quote@2.6.0",
+  "https://cdn.jsdelivr.net/npm/@editorjs/simple-image@1.6.0",
+  "https://cdn.jsdelivr.net/npm/@editorjs/table@2.3.0",
+  "https://cdn.jsdelivr.net/npm/@editorjs/embed@2.7.0"
+]
+
+// Allow applications to add their own resources
+if (window.PANDA_CMS_EDITOR_JS_RESOURCES) {
+  EDITOR_JS_RESOURCES.push(...window.PANDA_CMS_EDITOR_JS_RESOURCES)
+}
+
+export const EDITOR_JS_CSS = `
+  .codex-editor {
+    position: relative;
+  }
+  .codex-editor::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 65px;
+    margin-right: 5px;
+    background-color: #f9fafb;
+    border-right: 2px dashed #e5e7eb;
+    z-index: 0;
+  }
+  .ce-block {
+    padding-left: 70px;
+    position: relative;
+    min-height: 40px;
+    margin: 0;
+    padding-bottom: 1em;
+  }
+  .ce-block__content {
+    position: relative;
+    max-width: none;
+    margin: 0;
+  }
+  .ce-paragraph {
+    padding: 0;
+    line-height: 1.6;
+    min-height: 1.6em;
+    margin: 0;
+  }
+  /* Override inherited heading styles */
+  .ce-header h1,
+  .ce-header h2,
+  .ce-header h3,
+  .ce-header h4,
+  .ce-header h5,
+  .ce-header h6 {
+    margin: 0;
+    padding: 0;
+    line-height: 1.6;
+    font-weight: 600;
+  }
+  .ce-header h1 { font-size: 2em; }
+  .ce-header h2 { font-size: 1.5em; }
+  .ce-header h3 { font-size: 1.17em; }
+  .ce-header h4 { font-size: 1em; }
+  .ce-header h5 { font-size: 0.83em; }
+  .ce-header h6 { font-size: 0.67em; }
+
+  .codex-editor__redactor {
+    padding-bottom: 150px !important;
+    min-height: 100px !important;
+  }
+  /* Base toolbar styles */
+  .ce-toolbar {
+    left: 0 !important;
+    right: auto !important;
+    background: none !important;
+    position: absolute !important;
+    width: 65px !important;
+    height: 40px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    padding: 0 !important;
+    margin-left: -70px !important;
+    margin-top: -5px !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+    pointer-events: all !important;
+    z-index: 2 !important;
+  }
+  /* Ensure toolbar is visible for all blocks */
+  .ce-block .ce-toolbar {
+    display: flex !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+  }
+  .ce-toolbar__content {
+    max-width: none;
+    left: 70px !important;
+    display: flex !important;
+    position: relative !important;
+  }
+  .ce-toolbar__actions {
+    position: relative !important;
+    left: 5px !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+    background: transparent !important;
+    z-index: 2;
+    display: flex !important;
+    align-items: center !important;
+    gap: 5px !important;
+    height: 40px !important;
+    padding: 0 !important;
+  }
+  .ce-toolbar__plus {
+    position: relative !important;
+    left: 0px !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+    background: transparent !important;
+    border: none !important;
+    z-index: 2;
+    display: block !important;
+  }
+  .ce-toolbar__settings-btn {
+    position: relative !important;
+    left: -10px !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+    background: transparent !important;
+    border: none !important;
+    z-index: 2;
+    display: block !important;
+  }
+  /* Style the search input */
+  .ce-popover__search {
+    padding-left: 3px !important;
+  }
+  .ce-popover__search input {
+    outline: none !important;
+    box-shadow: none !important;
+    border: none !important;
+  }
+  .ce-popover__search input::placeholder {
+    content: 'Search';
+  }
+  /* Ensure popups still work */
+  .ce-popover {
+    z-index: 4;
+  }
+  .ce-inline-toolbar {
+    z-index: 3;
+  }
+  /* Override any hiding behavior */
+  .ce-toolbar--closed,
+  .ce-toolbar--opened,
+  .ce-toolbar--showed {
+    display: flex !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+  }
+  /* Force toolbar to show on every block */
+  .ce-block:not(:focus):not(:hover) .ce-toolbar,
+  .ce-block--selected .ce-toolbar,
+  .ce-block--focused .ce-toolbar,
+  .ce-block--hover .ce-toolbar {
+    opacity: 1 !important;
+    visibility: visible !important;
+    display: flex !important;
+  }
+
+  /* Ensure last block has bottom spacing */
+  .ce-block:last-child {
+    padding-bottom: 2em;
+  }
+
+  /* Reset all block type margins */
+  .ce-header,
+  .ce-paragraph,
+  .ce-quote,
+  .ce-list {
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+`
+
+export const getEditorConfig = (elementId, previousData, doc = document) => {
+  // Validate holder element exists
+  const holder = doc.getElementById(elementId)
+  if (!holder) {
+    throw new Error(`Editor holder element ${elementId} not found`)
+  }
+
+  // Get the correct window context
+  const win = doc.defaultView || window
+
+  // Ensure we have a clean holder element
+  holder.innerHTML = ""
+
+  const config = {
+    holder: elementId,
+    data: previousData || {},
+    placeholder: 'Click the + button to add content...',
+    inlineToolbar: true,
+    onChange: () => {
+      // Ensure the editor is properly initialized before handling changes
+      if (holder && holder.querySelector('.codex-editor')) {
+        const event = new Event('editor:change', { bubbles: true })
+        holder.dispatchEvent(event)
+      }
+    },
+    i18n: {
+      toolbar: {
+        filter: {
+          placeholder: 'Search'
+        }
+      }
+    },
+    tools: {
+      header: {
+        class: win.Header,
+        inlineToolbar: true,
+        config: {
+          placeholder: 'Enter a header',
+          levels: [1, 2, 3, 4, 5, 6],
+          defaultLevel: 2
+        }
+      },
+      paragraph: {
+        class: win.Paragraph,
+        inlineToolbar: true,
+        config: {
+          placeholder: 'Start writing or press Tab to add content...'
+        }
+      },
+      list: {
+        class: win.NestedList,
+        inlineToolbar: true,
+        config: {
+          defaultStyle: 'unordered',
+          enableLineBreaks: true
+        }
+      },
+      quote: {
+        class: win.Quote,
+        inlineToolbar: true,
+        config: {
+          quotePlaceholder: 'Enter a quote',
+          captionPlaceholder: 'Quote\'s author'
+        }
+      },
+      image: {
+        class: win.SimpleImage,
+        inlineToolbar: true,
+        config: {
+          placeholder: 'Paste an image URL...'
+        }
+      },
+      table: {
+        class: win.Table,
+        inlineToolbar: true,
+        config: {
+          rows: 2,
+          cols: 2
+        }
+      },
+      embed: {
+        class: win.Embed,
+        inlineToolbar: true,
+        config: {
+          services: {
+            youtube: true,
+            vimeo: true
+          }
+        }
+      }
+    }
+  }
+
+  // Remove any undefined tools from the config
+  config.tools = Object.fromEntries(
+    Object.entries(config.tools)
+      .filter(([_, value]) => value?.class !== undefined)
+      .map(([name, tool]) => {
+        if (!tool.class) {
+          throw new Error(`Tool ${name} has no class defined`)
+        }
+        return [name, tool]
+      })
+  )
+
+  // Allow applications to customize the config through Ruby
+  if (window.PANDA_CMS_EDITOR_JS_CONFIG) {
+    Object.assign(config.tools, window.PANDA_CMS_EDITOR_JS_CONFIG)
+  }
+
+  // Allow applications to customize the config through JavaScript
+  if (typeof window.customizeEditorJS === 'function') {
+    window.customizeEditorJS(config)
+  }
+
+  return config
+}