panda-editor 0.5.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fbf5326beb171bbb5448b7545bfe87fdef49faac3c82f85c1a64a30cc7aa276d
-  data.tar.gz: 05c314fcf2d2b2c5cdfe2d4e2684b392bc2d4cd7231c91870a6f6100a1ca7170
+  metadata.gz: adac7a7394c996ae17e8c3312f0b20bc8517724aa82397694ecce20e82821280
+  data.tar.gz: 595a17b99fde3d04816f1b957ce9c875de521475d69bc9358f3c370e9c380301
 SHA512:
-  metadata.gz: cab18e487c3e4021cebf6ffbd7c98a4c15103ca96a53cbbbd97b3b377a99d83d7c81de246f620359317d166b5716b56d3105be01d7ab1930c96a9f103164ac1b
-  data.tar.gz: 1c3ae8993db2fe42ebd8e4c22c664655aa86961757605d897ca5c4c4553b3c0e4427c203d15b23bfae7ce4d83cfc92d6f02d8aa3dc025f3babb3673bc1850de1
+  metadata.gz: 9395e397b2c94eea2d8d8c0a0183a6262a1bfe79dbc9aae23f833a255b214be22ffc6ca4f92f2e2218adadf948410e388c853bea3b3eaf589ed555ba9c1c2df4
+  data.tar.gz: 6fc84783464e4761bcf1fec9f162ff7fec33b571bf816d026167514c1d63cc4f640ffc8c0863e765bf58730f0713a7a47ff5f62b99c810a5f1806804b62e7f8c

data/CHANGELOG.md

@@ -5,6 +5,25 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.6.0] - 2025-11-09
+
+### Added
+
+- HTML to EditorJS converter for importing existing HTML content
+  - Supports headers (h1-h6), paragraphs, lists (ordered/unordered), quotes, code blocks, tables, and delimiters
+  - Preserves inline formatting (bold, italic, links, etc.) as HTML
+  - Handles edge cases: empty content, malformed HTML, special characters, whitespace
+  - Comprehensive test coverage (22 examples)
+  - Available as `Panda::Editor::HtmlToEditorJsConverter.convert(html)`
+- Markdown to EditorJS converter for importing Markdown content
+  - Uses Redcarpet to parse markdown to HTML, then converts to EditorJS
+  - Supports all standard markdown features: headers, paragraphs, lists, code blocks, tables, blockquotes
+  - Includes advanced features: superscript, footnotes, strikethrough, autolinks
+  - Security-hardened with noopener/noreferrer on links
+  - Comprehensive test coverage (26 examples)
+  - Available as `Panda::Editor::MarkdownToEditorJsConverter.convert(markdown)`
+- Added nokogiri as explicit dependency (required for HTML parsing)
+
 ## [0.5.0] - 2025-11-04
 
 ### Fixed

data/README.md

@@ -55,6 +55,74 @@ renderer = Panda::Editor::Renderer.new(@post.content)
 <%= raw renderer.render %>
 ```
 
+### Converting Content to EditorJS
+
+Panda Editor includes converters for importing existing HTML or Markdown content into EditorJS format:
+
+#### From HTML
+
+```ruby
+html = '<h1>Article Title</h1><p>Introduction with <strong>bold</strong> text.</p><ul><li>Point 1</li><li>Point 2</li></ul>'
+editor_data = Panda::Editor::HtmlToEditorJsConverter.convert(html)
+
+# Save to your model
+@post.content = editor_data
+@post.save
+```
+
+**Supported HTML elements:**
+
+- Headers (h1-h6)
+- Paragraphs with inline formatting (bold, italic, links, etc.)
+- Ordered and unordered lists
+- Blockquotes
+- Code blocks (pre/code)
+- Tables (with or without headers)
+- Horizontal rules (converted to delimiters)
+
+#### From Markdown
+
+```ruby
+markdown = <<~MD
+  # Article Title
+
+  Introduction with **bold** and *italic* text.
+
+  - Point 1
+  - Point 2
+
+  > A famous quote
+
+  ```ruby
+  def hello
+    puts "world"
+  end
+  ```
+MD
+
+editor_data = Panda::Editor::MarkdownToEditorJsConverter.convert(markdown)
+
+# Save to your model
+@post.content = editor_data
+@post.save
+```
+
+**Supported Markdown features:**
+
+- Headers (# through ######)
+- Paragraphs with inline formatting (\*\*bold\*\*, \*italic\*, \`code\`, \~\~strikethrough\~\~)
+- Links (with automatic noopener/noreferrer for security)
+- Ordered and unordered lists
+- Blockquotes
+- Fenced and indented code blocks
+- Tables (GitHub-flavored markdown)
+- Horizontal rules
+- Superscript (^2)
+- Footnotes
+- Automatic URL linking
+
+Both converters return a hash in EditorJS format that can be saved directly to your content field.
+
 ### JavaScript Integration
 
 In your application.js:

data/lib/panda/editor/engine.rb

@@ -12,6 +12,12 @@ module Panda
         g.test_framework :rspec
       end
 
+      # Eager load converter classes
+      config.to_prepare do
+        require 'panda/editor/markdown_to_editor_js_converter'
+        require 'panda/editor/html_to_editor_js_converter'
+      end
+
       initializer 'panda_editor.assets' do |app|
         next unless app.config.respond_to?(:assets)
 

data/lib/panda/editor/html_to_editor_js_converter.rb

@@ -0,0 +1,159 @@
+# frozen_string_literal: true
+
+require "nokogiri"
+
+module Panda
+  module Editor
+    # Converts HTML to EditorJS format
+    # Parses HTML and converts it to EditorJS blocks
+    class HtmlToEditorJsConverter
+      def self.convert(html)
+        new(html).convert
+      end
+
+      def initialize(html)
+        @html = html
+        @blocks = []
+      end
+
+      def convert
+        doc = Nokogiri::HTML.fragment(@html)
+
+        doc.children.each do |node|
+          block = node_to_block(node)
+          @blocks << block if block
+        end
+
+        {
+          time: Time.now.to_i * 1000,
+          blocks: @blocks,
+          version: "2.28.0"
+        }
+      end
+
+      private
+
+      def node_to_block(node)
+        return nil if node.text? && node.text.strip.empty?
+
+        case node.name
+        when "h1", "h2", "h3", "h4", "h5", "h6"
+          header_block(node)
+        when "p"
+          paragraph_block(node)
+        when "ul", "ol"
+          list_block(node)
+        when "blockquote"
+          quote_block(node)
+        when "pre"
+          code_block(node)
+        when "table"
+          table_block(node)
+        when "hr"
+          delimiter_block
+        when "text"
+          # Handle text nodes that aren't wrapped in tags
+          text = node.text.strip
+          text.empty? ? nil : paragraph_block_from_text(text)
+        else
+          # For any other node, try to extract text content
+          text = node.text.strip
+          text.empty? ? nil : paragraph_block_from_text(text)
+        end
+      end
+
+      def header_block(node)
+        level = node.name[1].to_i
+        {
+          type: "header",
+          data: {
+            text: node.inner_html.strip,
+            level: level
+          }
+        }
+      end
+
+      def paragraph_block(node)
+        text = node.inner_html.strip
+        return nil if text.empty?
+
+        {
+          type: "paragraph",
+          data: {
+            text: text
+          }
+        }
+      end
+
+      def paragraph_block_from_text(text)
+        {
+          type: "paragraph",
+          data: {
+            text: text
+          }
+        }
+      end
+
+      def list_block(node)
+        style = node.name == "ol" ? "ordered" : "unordered"
+        items = node.css("li").map { |li| li.inner_html.strip }
+
+        {
+          type: "list",
+          data: {
+            style: style,
+            items: items
+          }
+        }
+      end
+
+      def quote_block(node)
+        {
+          type: "quote",
+          data: {
+            text: node.inner_html.strip,
+            caption: "",
+            alignment: "left"
+          }
+        }
+      end
+
+      def code_block(node)
+        code = node.css("code").first
+        text = code ? code.text : node.text
+
+        {
+          type: "code",
+          data: {
+            code: text
+          }
+        }
+      end
+
+      def table_block(node)
+        content = []
+
+        # Process table rows
+        node.css("tr").each do |row|
+          cells = row.css("th, td").map { |cell| cell.inner_html.strip }
+          content << cells
+        end
+
+        {
+          type: "table",
+          data: {
+            withHeadings: node.css("thead").any? || node.css("th").any?,
+            content: content
+          }
+        }
+      end
+
+      def delimiter_block
+        {
+          type: "delimiter",
+          data: {}
+        }
+      end
+    end
+  end
+end

data/lib/panda/editor/markdown_to_editor_js_converter.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+require "redcarpet"
+
+module Panda
+  module Editor
+    # Converts Markdown to EditorJS format
+    # Uses Redcarpet to parse markdown to HTML, then converts HTML to EditorJS blocks
+    class MarkdownToEditorJsConverter
+      def self.convert(markdown)
+        new(markdown).convert
+      end
+
+      def initialize(markdown)
+        @markdown = markdown
+      end
+
+      def convert
+        # Step 1: Convert Markdown to HTML using Redcarpet
+        html = markdown_to_html
+
+        # Step 2: Convert HTML to EditorJS using existing converter
+        Panda::Editor::HtmlToEditorJsConverter.convert(html)
+      end
+
+      private
+
+      def markdown_to_html
+        renderer = Redcarpet::Render::HTML.new(
+          hard_wrap: true,
+          link_attributes: {rel: "noopener noreferrer"}
+        )
+
+        markdown_processor = Redcarpet::Markdown.new(
+          renderer,
+          autolink: true,
+          tables: true,
+          fenced_code_blocks: true,
+          strikethrough: true,
+          superscript: true,
+          footnotes: true,
+          no_intra_emphasis: true,
+          space_after_headers: true
+        )
+
+        markdown_processor.render(@markdown)
+      end
+    end
+  end
+end

data/lib/panda/editor/version.rb

@@ -2,6 +2,6 @@
 
 module Panda
   module Editor
-    VERSION = '0.5.0'
+    VERSION = '0.6.0'
   end
 end

data/lib/panda/editor.rb

@@ -17,10 +17,12 @@ module Panda
 
     class Error < StandardError; end
 
-    # Autoload components
-    autoload :Renderer, 'panda/editor/renderer'
-    autoload :Content, 'panda/editor/content'
-    autoload :FootnoteRegistry, 'panda/editor/footnote_registry'
+    # Require components
+    require_relative 'editor/renderer'
+    require_relative 'editor/content'
+    require_relative 'editor/footnote_registry'
+    require_relative 'editor/markdown_to_editor_js_converter'
+    require_relative 'editor/html_to_editor_js_converter'
 
     module Blocks
       autoload :Base, 'panda/editor/blocks/base'

data/lib/panda-editor.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+require "panda/editor/version"
+require "panda/editor/engine"
+require "panda/editor"

data/panda-editor.gemspec

@@ -32,6 +32,7 @@ Gem::Specification.new do |spec|
 
   # Rails dependencies
   spec.add_dependency 'dry-configurable', '~> 1.0'
+  spec.add_dependency 'nokogiri', '~> 1.15'
   spec.add_dependency 'rails', '>= 7.1'
   spec.add_dependency 'redcarpet', '~> 3.6'
   spec.add_dependency 'sanitize', '~> 6.0'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: panda-editor
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.6.0
 platform: ruby
 authors:
 - Otaina Limited
@@ -24,6 +24,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '1.0'
+- !ruby/object:Gem::Dependency
+  name: nokogiri
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.15'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.15'
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
@@ -133,6 +147,7 @@ files:
 - app/services/panda/editor/html_to_editor_js_converter.rb
 - config/importmap.rb
 - docs/FOOTNOTES.md
+- lib/panda-editor.rb
 - lib/panda/editor.rb
 - lib/panda/editor/asset_loader.rb
 - lib/panda/editor/blocks/alert.rb
@@ -146,6 +161,8 @@ files:
 - lib/panda/editor/content.rb
 - lib/panda/editor/engine.rb
 - lib/panda/editor/footnote_registry.rb
+- lib/panda/editor/html_to_editor_js_converter.rb
+- lib/panda/editor/markdown_to_editor_js_converter.rb
 - lib/panda/editor/renderer.rb
 - lib/panda/editor/version.rb
 - lib/tasks/assets.rake