panda-editor 0.1.0

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

@@ -0,0 +1,162 @@
+import EditorJS from "@editorjs/editorjs"
+import Paragraph from "@editorjs/paragraph"
+import Header from "@editorjs/header"
+import List from "@editorjs/list"
+import Quote from "@editorjs/quote"
+import Table from "@editorjs/table"
+import NestedList from "@editorjs/nested-list"
+
+export default class RichTextEditor {
+  constructor(element, iframe) {
+    this.element = element
+    this.iframe = iframe
+    this.editor = null
+    this.initialized = false
+    this.initialize()
+  }
+
+  async initialize() {
+    if (this.initialized) return
+    console.debug("[Panda CMS] Initializing EditorJS")
+
+    try {
+      let content = this.element.dataset.editableContent || ""
+      let previousData = this.element.dataset.editablePreviousData || ""
+      console.debug("[Panda CMS] Initial content:", content)
+      console.debug("[Panda CMS] Previous data:", previousData)
+
+      let parsedContent
+      if (previousData) {
+        try {
+          // Try to decode base64 first
+          const decodedData = atob(previousData)
+          console.debug("[Panda CMS] Decoded base64 data:", decodedData)
+          parsedContent = JSON.parse(decodedData)
+          console.debug("[Panda CMS] Successfully parsed base64 data:", parsedContent)
+        } catch (e) {
+          console.debug("[Panda CMS] Not base64 encoded or invalid, trying direct JSON parse:", e)
+          try {
+            parsedContent = JSON.parse(previousData)
+            console.debug("[Panda CMS] Successfully parsed JSON data:", parsedContent)
+          } catch (e2) {
+            console.error("[Panda CMS] Failed to parse previous data:", e2)
+            parsedContent = this.getDefaultContent()
+          }
+        }
+      } else if (content) {
+        try {
+          parsedContent = JSON.parse(content)
+          console.debug("[Panda CMS] Successfully parsed content:", parsedContent)
+        } catch (e) {
+          console.error("[Panda CMS] Failed to parse content:", e)
+          parsedContent = this.getDefaultContent()
+        }
+      } else {
+        parsedContent = this.getDefaultContent()
+      }
+
+      // Create holder element before initialization
+      const holderId = `editor-${Math.random().toString(36).substr(2, 9)}`
+      const holderElement = document.createElement("div")
+      holderElement.id = holderId
+      holderElement.className = "editor-js-holder codex-editor"
+
+      // Clear any existing content and append holder
+      this.element.textContent = ""
+      this.element.appendChild(holderElement)
+
+      // Initialize EditorJS
+      this.editor = new EditorJS({
+        holder: holderId,
+        data: parsedContent,
+        placeholder: "Click to start writing...",
+        tools: {
+          paragraph: {
+            class: Paragraph,
+            inlineToolbar: true
+          },
+          header: {
+            class: Header,
+            inlineToolbar: true
+          },
+          list: {
+            class: NestedList,
+            inlineToolbar: true,
+            config: {
+              defaultStyle: 'unordered',
+              enableLineBreaks: true
+            }
+          },
+          quote: {
+            class: Quote,
+            inlineToolbar: true
+          },
+          table: {
+            class: Table,
+            inlineToolbar: true
+          }
+        },
+        onChange: () => {
+          this.save()
+        }
+      })
+
+      await this.editor.isReady
+      this.initialized = true
+      console.debug("[Panda CMS] EditorJS initialized successfully")
+    } catch (error) {
+      console.error("[Panda CMS] Error initializing EditorJS:", error)
+    }
+  }
+
+  getDefaultContent() {
+    return {
+      time: Date.now(),
+      blocks: [
+        {
+          type: "paragraph",
+          data: {
+            text: ""
+          }
+        }
+      ],
+      version: "2.28.2"
+    }
+  }
+
+  async save() {
+    if (!this.editor) return null
+
+    try {
+      const savedData = await this.editor.save()
+      const jsonString = JSON.stringify(savedData)
+      // Store both base64 and regular JSON
+      this.element.dataset.editablePreviousData = btoa(jsonString)
+      this.element.dataset.editableContent = jsonString
+      return jsonString
+    } catch (error) {
+      console.error("[Panda CMS] Error saving EditorJS content:", error)
+      return null
+    }
+  }
+
+  async clear() {
+    if (!this.editor) return
+
+    try {
+      await this.editor.clear()
+      this.element.dataset.editablePreviousData = ""
+      this.element.dataset.editableContent = ""
+    } catch (error) {
+      console.error("[Panda CMS] Error clearing EditorJS content:", error)
+    }
+  }
+
+  destroy() {
+    if (this.editor) {
+      this.editor.destroy()
+      this.editor = null
+      this.initialized = false
+    }
+  }
+}

data/app/services/panda/editor/html_to_editor_js_converter.rb

@@ -0,0 +1,195 @@
+# frozen_string_literal: true
+
+module Panda
+  module Editor
+    class HtmlToEditorJsConverter
+      class ConversionError < StandardError; end
+
+      def self.convert(html)
+        return {} if html.blank?
+
+        # If it's already in EditorJS format, return as is
+        return html if html.is_a?(Hash) && (html["blocks"].present? || html[:blocks].present?)
+
+        begin
+          # Parse the HTML content
+          doc = Nokogiri::HTML.fragment(html.to_s)
+          raise ConversionError, "Failed to parse HTML content" unless doc
+
+          blocks = []
+          current_text = ""
+
+          doc.children.each do |node|
+            case node.name
+            when "h1", "h2", "h3", "h4", "h5", "h6"
+              # Add any accumulated text as a paragraph before the header
+              if current_text.present?
+                blocks << create_paragraph_block(current_text)
+                current_text = ""
+              end
+
+              blocks << {
+                "type" => "header",
+                "data" => {
+                  "text" => node.text.strip,
+                  "level" => node.name[1].to_i
+                }
+              }
+            when "p", "div"
+              # Add any accumulated text first
+              if current_text.present?
+                blocks << create_paragraph_block(current_text)
+                current_text = ""
+              end
+
+              if node.name == "div"
+                # Process div children separately
+                node.children.each do |child|
+                  case child.name
+                  when "h1", "h2", "h3", "h4", "h5", "h6"
+                    blocks << {
+                      "type" => "header",
+                      "data" => {
+                        "text" => child.text.strip,
+                        "level" => child.name[1].to_i
+                      }
+                    }
+                  when "p"
+                    text = process_inline_elements(child)
+                    paragraphs = text.split(%r{<br\s*/?>\s*<br\s*/?>}).map(&:strip)
+                    paragraphs.each do |paragraph|
+                      blocks << create_paragraph_block(paragraph) if paragraph.present?
+                    end
+                  when "ul", "ol"
+                    items = child.css("li").map { |li| process_inline_elements(li) }
+                    next if items.empty?
+
+                    blocks << {
+                      "type" => "list",
+                      "data" => {
+                        "style" => (child.name == "ul") ? "unordered" : "ordered",
+                        "items" => items
+                      }
+                    }
+                  when "blockquote"
+                    blocks << {
+                      "type" => "quote",
+                      "data" => {
+                        "text" => process_inline_elements(child),
+                        "caption" => "",
+                        "alignment" => "left"
+                      }
+                    }
+                  when "text"
+                    text = child.text.strip
+                    current_text += text if text.present?
+                  end
+                end
+              else
+                # Handle p with nested content
+                text = process_inline_elements(node)
+                paragraphs = text.split(%r{<br\s*/?>\s*<br\s*/?>}).map(&:strip)
+                paragraphs.each do |paragraph|
+                  blocks << create_paragraph_block(paragraph) if paragraph.present?
+                end
+              end
+            when "br"
+              current_text += "\n\n"
+            when "text"
+              text = node.text.strip
+              current_text += text if text.present?
+            when "ul", "ol"
+              # Add any accumulated text first
+              if current_text.present?
+                blocks << create_paragraph_block(current_text)
+                current_text = ""
+              end
+
+              items = node.css("li").map { |li| process_inline_elements(li) }
+              next if items.empty?
+
+              blocks << {
+                "type" => "list",
+                "data" => {
+                  "style" => (node.name == "ul") ? "unordered" : "ordered",
+                  "items" => items
+                }
+              }
+            when "blockquote"
+              # Add any accumulated text first
+              if current_text.present?
+                blocks << create_paragraph_block(current_text)
+                current_text = ""
+              end
+
+              blocks << {
+                "type" => "quote",
+                "data" => {
+                  "text" => process_inline_elements(node),
+                  "caption" => "",
+                  "alignment" => "left"
+                }
+              }
+            end
+          end
+
+          # Add any remaining text
+          blocks << create_paragraph_block(current_text) if current_text.present?
+
+          # Return the complete EditorJS structure
+          {
+            "time" => Time.current.to_i * 1000,
+            "blocks" => blocks,
+            "version" => "2.28.2"
+          }
+        rescue => e
+          Rails.logger.error "HTML to EditorJS conversion failed: #{e.message}"
+          Rails.logger.error e.backtrace.join("\n")
+          raise ConversionError, "Failed to convert HTML to EditorJS format: #{e.message}"
+        end
+      end
+
+      def self.create_paragraph_block(text)
+        {
+          "type" => "paragraph",
+          "data" => {
+            "text" => text.strip
+          }
+        }
+      end
+
+      def self.process_inline_elements(node)
+        result = ""
+        node.children.each do |child|
+          case child.name
+          when "br"
+            result += "<br>"
+          when "text"
+            result += child.text
+          when "strong", "b"
+            result += "<b>#{child.text}</b>"
+          when "em", "i"
+            result += "<i>#{child.text}</i>"
+          when "a"
+            href = child["href"]
+            text = child.text.strip
+            # Handle email links specially
+            if href&.start_with?("mailto:")
+              email = href.sub("mailto:", "")
+              result += "<a href=\"mailto:#{email}\">#{text}</a>"
+            else
+              result += "<a href=\"#{href}\">#{text}</a>"
+            end
+          else
+            result += if child.text?
+              child.text
+            else
+              child.to_html
+            end
+          end
+        end
+        result.strip
+      end
+    end
+  end
+end

data/config/importmap.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+# Pin npm packages by running ./bin/importmap
+
+pin_all_from "app/javascript/panda/editor", under: "panda/editor"
+
+# EditorJS Core and plugins (from CDN)
+pin "@editorjs/editorjs", to: "https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.28.2/+esm"
+pin "@editorjs/paragraph", to: "https://cdn.jsdelivr.net/npm/@editorjs/paragraph@2.11.3/+esm"
+pin "@editorjs/header", to: "https://cdn.jsdelivr.net/npm/@editorjs/header@2.8.1/+esm"
+pin "@editorjs/nested-list", to: "https://cdn.jsdelivr.net/npm/@editorjs/nested-list@1.4.2/+esm"
+pin "@editorjs/quote", to: "https://cdn.jsdelivr.net/npm/@editorjs/quote@2.6.0/+esm"
+pin "@editorjs/simple-image", to: "https://cdn.jsdelivr.net/npm/@editorjs/simple-image@1.6.0/+esm"
+pin "@editorjs/table", to: "https://cdn.jsdelivr.net/npm/@editorjs/table@2.3.0/+esm"
+pin "@editorjs/embed", to: "https://cdn.jsdelivr.net/npm/@editorjs/embed@2.7.0/+esm"

data/lib/panda/editor/asset_loader.rb

@@ -0,0 +1,151 @@
+# frozen_string_literal: true
+
+require "net/http"
+require "json"
+
+module Panda
+  module Editor
+    class AssetLoader
+      GITHUB_RELEASES_URL = "https://api.github.com/repos/tastybamboo/panda-editor/releases/latest"
+      ASSET_CACHE_DIR = Rails.root.join("tmp", "panda_editor_assets")
+
+      class << self
+        def load_assets
+          if use_compiled_assets?
+            load_compiled_assets
+          else
+            load_development_assets
+          end
+        end
+
+        def javascript_url
+          if use_compiled_assets?
+            compiled_javascript_url
+          else
+            "/assets/panda/editor/application.js"
+          end
+        end
+
+        def stylesheet_url
+          if use_compiled_assets?
+            compiled_stylesheet_url
+          else
+            "/assets/panda/editor/application.css"
+          end
+        end
+
+        private
+
+        def use_compiled_assets?
+          Rails.env.production? || 
+            Rails.env.test? || 
+            ENV["PANDA_EDITOR_USE_COMPILED_ASSETS"] == "true"
+        end
+
+        def load_compiled_assets
+          ensure_assets_downloaded
+          {
+            javascript: compiled_javascript_url,
+            stylesheet: compiled_stylesheet_url
+          }
+        end
+
+        def load_development_assets
+          {
+            javascript: "/assets/panda/editor/application.js",
+            stylesheet: "/assets/panda/editor/application.css"
+          }
+        end
+
+        def compiled_javascript_url
+          asset_path = find_latest_asset("js")
+          asset_path ? "/panda-editor-assets/#{File.basename(asset_path)}" : nil
+        end
+
+        def compiled_stylesheet_url
+          asset_path = find_latest_asset("css")
+          asset_path ? "/panda-editor-assets/#{File.basename(asset_path)}" : nil
+        end
+
+        def find_latest_asset(extension)
+          pattern = Rails.root.join("public", "panda-editor-assets", "panda-editor-*.#{extension}")
+          Dir.glob(pattern).max_by { |f| File.mtime(f) }
+        end
+
+        def ensure_assets_downloaded
+          return if assets_exist?
+
+          download_assets_from_github
+        end
+
+        def assets_exist?
+          js_exists = Dir.glob(Rails.root.join("public", "panda-editor-assets", "panda-editor-*.js")).any?
+          css_exists = Dir.glob(Rails.root.join("public", "panda-editor-assets", "panda-editor-*.css")).any?
+          js_exists && css_exists
+        end
+
+        def download_assets_from_github
+          Rails.logger.info "[Panda Editor] Downloading assets from GitHub releases..."
+          
+          begin
+            release_data = fetch_latest_release
+            download_release_assets(release_data["assets"])
+          rescue => e
+            Rails.logger.error "[Panda Editor] Failed to download assets: #{e.message}"
+            use_fallback_assets
+          end
+        end
+
+        def fetch_latest_release
+          uri = URI(GITHUB_RELEASES_URL)
+          response = Net::HTTP.get_response(uri)
+          
+          if response.code == "200"
+            JSON.parse(response.body)
+          else
+            raise "GitHub API returned #{response.code}"
+          end
+        end
+
+        def download_release_assets(assets)
+          assets.each do |asset|
+            next unless asset["name"].match?(/panda-editor.*\.(js|css)$/)
+            
+            download_asset(asset)
+          end
+        end
+
+        def download_asset(asset)
+          uri = URI(asset["browser_download_url"])
+          response = Net::HTTP.get_response(uri)
+          
+          if response.code == "200"
+            save_asset(asset["name"], response.body)
+          end
+        end
+
+        def save_asset(filename, content)
+          dir = Rails.root.join("public", "panda-editor-assets")
+          FileUtils.mkdir_p(dir)
+          
+          File.write(dir.join(filename), content)
+          Rails.logger.info "[Panda Editor] Downloaded #{filename}"
+        end
+
+        def use_fallback_assets
+          Rails.logger.warn "[Panda Editor] Using fallback embedded assets"
+          # Copy embedded assets from gem to public directory
+          copy_embedded_assets
+        end
+
+        def copy_embedded_assets
+          source_dir = Panda::Editor::Engine.root.join("public", "panda-editor-assets")
+          dest_dir = Rails.root.join("public", "panda-editor-assets")
+          
+          FileUtils.mkdir_p(dest_dir)
+          FileUtils.cp_r(Dir.glob(source_dir.join("*")), dest_dir)
+        end
+      end
+    end
+  end
+end

data/lib/panda/editor/blocks/alert.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Panda
+  module Editor
+    module Blocks
+      class Alert < Base
+        def render
+          message = sanitize(data["message"])
+          type = data["type"] || "primary"
+
+          html_safe(
+            "<div class=\"#{alert_classes(type)} p-4 mb-4 rounded-lg\">" \
+              "#{message}" \
+            "</div>"
+          )
+        end
+
+        private
+
+        def alert_classes(type)
+          case type
+          when "primary" then "bg-blue-100 text-blue-800"
+          when "secondary" then "bg-gray-100 text-gray-800"
+          when "success" then "bg-green-100 text-green-800"
+          when "danger" then "bg-red-100 text-red-800"
+          when "warning" then "bg-yellow-100 text-yellow-800"
+          when "info" then "bg-indigo-100 text-indigo-800"
+          else "bg-blue-100 text-blue-800"
+          end
+        end
+      end
+    end
+  end
+end

data/lib/panda/editor/blocks/base.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Panda
+  module Editor
+    module Blocks
+      class Base
+        include ActionView::Helpers::SanitizeHelper
+        include ActionView::Helpers::TagHelper
+
+        attr_reader :data, :options
+
+        def initialize(data, options = {})
+          @data = data
+          @options = options
+        end
+
+        def render
+          ""
+        end
+
+        protected
+
+        def html_safe(content)
+          content.html_safe
+        end
+
+        def sanitize(text)
+          Rails::Html::SafeListSanitizer.new.sanitize(text, tags: %w[b i u a code])
+        end
+      end
+    end
+  end
+end

data/lib/panda/editor/blocks/header.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Panda
+  module Editor
+    module Blocks
+      class Header < Base
+        def render
+          content = sanitize(data["text"])
+          level = data["level"] || 2
+          html_safe("<h#{level}>#{content}</h#{level}>")
+        end
+      end
+    end
+  end
+end

data/lib/panda/editor/blocks/image.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Panda
+  module Editor
+    module Blocks
+      class Image < Base
+        def render
+          url = data["url"]
+          caption = sanitize(data["caption"])
+          with_border = data["withBorder"]
+          with_background = data["withBackground"]
+          stretched = data["stretched"]
+
+          css_classes = ["prose"]
+          css_classes << "border" if with_border
+          css_classes << "bg-gray-100" if with_background
+          css_classes << "w-full" if stretched
+
+          html_safe(<<~HTML)
+            <figure class="#{css_classes.join(" ")}">
+              <img src="#{url}" alt="#{caption}" />
+              #{caption_element(caption)}
+            </figure>
+          HTML
+        end
+
+        private
+
+        def caption_element(caption)
+          return "" if caption.blank?
+
+          "<figcaption>#{caption}</figcaption>"
+        end
+      end
+    end
+  end
+end

data/lib/panda/editor/blocks/list.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Panda
+  module Editor
+    module Blocks
+      class List < Base
+        def render
+          list_type = (data["style"] == "ordered") ? "ol" : "ul"
+          html_safe(
+            "<#{list_type}>" \
+            "#{render_items(data["items"])}" \
+            "</#{list_type}>"
+          )
+        end
+
+        private
+
+        def render_items(items)
+          items.map do |item|
+            content = item.is_a?(Hash) ? item["content"] : item
+            nested = (item.is_a?(Hash) && item["items"].present?) ? render_nested(item["items"]) : ""
+            "<li>#{sanitize(content)}#{nested}</li>"
+          end.join
+        end
+
+        def render_nested(items)
+          self.class.new({"items" => items, "style" => data["style"]}).render
+        end
+      end
+    end
+  end
+end

data/lib/panda/editor/blocks/paragraph.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Panda
+  module Editor
+    module Blocks
+      class Paragraph < Base
+        def render
+          content = sanitize(data["text"])
+          return "" if content.blank?
+
+          html_safe("<p>#{content}</p>")
+        end
+      end
+    end
+  end
+end