panda-editor 0.5.0 → 0.8.2

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

@@ -9,78 +9,78 @@ module Panda
         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?)
+        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
+          raise ConversionError, "Failed to parse HTML content" unless doc
 
           blocks = []
-          current_text = ''
+          current_text = ""
 
           doc.children.each do |node|
             case node.name
-            when 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
+            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 = ''
+                current_text = ""
               end
 
               blocks << {
-                'type' => 'header',
-                'data' => {
-                  'text' => node.text.strip,
-                  'level' => node.name[1].to_i
+                "type" => "header",
+                "data" => {
+                  "text" => node.text.strip,
+                  "level" => node.name[1].to_i
                 }
               }
-            when 'p', 'div'
+            when "p", "div"
               # Add any accumulated text first
               if current_text.present?
                 blocks << create_paragraph_block(current_text)
-                current_text = ''
+                current_text = ""
               end
 
-              if node.name == 'div'
+              if node.name == "div"
                 # Process div children separately
                 node.children.each do |child|
                   case child.name
-                  when 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
+                  when "h1", "h2", "h3", "h4", "h5", "h6"
                     blocks << {
-                      'type' => 'header',
-                      'data' => {
-                        'text' => child.text.strip,
-                        'level' => child.name[1].to_i
+                      "type" => "header",
+                      "data" => {
+                        "text" => child.text.strip,
+                        "level" => child.name[1].to_i
                       }
                     }
-                  when 'p'
+                  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) }
+                  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
+                      "type" => "list",
+                      "data" => {
+                        "style" => (child.name == "ul") ? "unordered" : "ordered",
+                        "items" => items
                       }
                     }
-                  when 'blockquote'
+                  when "blockquote"
                     blocks << {
-                      'type' => 'quote',
-                      'data' => {
-                        'text' => process_inline_elements(child),
-                        'caption' => '',
-                        'alignment' => 'left'
+                      "type" => "quote",
+                      "data" => {
+                        "text" => process_inline_elements(child),
+                        "caption" => "",
+                        "alignment" => "left"
                       }
                     }
-                  when 'text'
+                  when "text"
                     text = child.text.strip
                     current_text += text if text.present?
                   end
@@ -93,41 +93,41 @@ module Panda
                   blocks << create_paragraph_block(paragraph) if paragraph.present?
                 end
               end
-            when 'br'
+            when "br"
               current_text += "\n\n"
-            when 'text'
+            when "text"
               text = node.text.strip
               current_text += text if text.present?
-            when 'ul', 'ol'
+            when "ul", "ol"
               # Add any accumulated text first
               if current_text.present?
                 blocks << create_paragraph_block(current_text)
-                current_text = ''
+                current_text = ""
               end
 
-              items = node.css('li').map { |li| process_inline_elements(li) }
+              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
+                "type" => "list",
+                "data" => {
+                  "style" => (node.name == "ul") ? "unordered" : "ordered",
+                  "items" => items
                 }
               }
-            when 'blockquote'
+            when "blockquote"
               # Add any accumulated text first
               if current_text.present?
                 blocks << create_paragraph_block(current_text)
-                current_text = ''
+                current_text = ""
               end
 
               blocks << {
-                'type' => 'quote',
-                'data' => {
-                  'text' => process_inline_elements(node),
-                  'caption' => '',
-                  'alignment' => 'left'
+                "type" => "quote",
+                "data" => {
+                  "text" => process_inline_elements(node),
+                  "caption" => "",
+                  "alignment" => "left"
                 }
               }
             end
@@ -138,11 +138,11 @@ module Panda
 
           # Return the complete EditorJS structure
           {
-            'time' => Time.current.to_i * 1000,
-            'blocks' => blocks,
-            'version' => '2.28.2'
+            "time" => Time.current.to_i * 1000,
+            "blocks" => blocks,
+            "version" => "2.28.2"
           }
-        rescue StandardError => e
+        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}"
@@ -151,41 +151,41 @@ module Panda
 
       def self.create_paragraph_block(text)
         {
-          'type' => 'paragraph',
-          'data' => {
-            'text' => text.strip
+          "type" => "paragraph",
+          "data" => {
+            "text" => text.strip
           }
         }
       end
 
       def self.process_inline_elements(node)
-        result = ''
+        result = ""
         node.children.each do |child|
           case child.name
-          when 'br'
-            result += '<br>'
-          when 'text'
+          when "br"
+            result += "<br>"
+          when "text"
             result += child.text
-          when 'strong', 'b'
+          when "strong", "b"
             result += "<b>#{child.text}</b>"
-          when 'em', 'i'
+          when "em", "i"
             result += "<i>#{child.text}</i>"
-          when 'a'
-            href = child['href']
+          when "a"
+            href = child["href"]
             text = child.text.strip
             # Handle email links specially
-            if href&.start_with?('mailto:')
-              email = href.sub('mailto:', '')
+            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
+              child.text
+            else
+              child.to_html
+            end
           end
         end
         result.strip

data/app/stylesheets/editor.css

@@ -0,0 +1,120 @@
+/* Base content styles, where .codex-editor applies them to the Panda editor too */
+@layer components {
+  .codex-editor__redactor .ce-block .ce-block__content {
+    @apply text-base font-normal font-sans text-dark leading-[1.6] space-y-[1.6rem];
+
+    h1.ce-header {
+      @apply text-3xl md:text-4xl font-semibold font-sans text-[#104071] leading-[1.2] max-w-[85ch];
+    }
+
+    h2.ce-header {
+      @apply text-2xl font-medium font-sans text-[#104071] leading-[1.3] mb-4 mt-8 max-w-[85ch];
+    }
+
+    h3.ce-header {
+      @apply text-xl font-normal font-sans text-[#104071] leading-[1.3] mb-4 mt-6 max-w-[85ch];
+    }
+
+    p,
+    li {
+      @apply leading-[1.6] tracking-wide max-w-[85ch];
+
+      a {
+        @apply text-[#1A9597] underline underline-offset-2 hover:text-[#158486] focus:outline-2 focus:outline-offset-2 focus:outline-[#1A9597];
+      }
+
+      strong,
+      b {
+        @apply font-semibold;
+      }
+    }
+
+    p {
+      @apply mb-4;
+    }
+
+    .cdx-quote {
+      @apply bg-[#eef0f3] border-l-inactive border-l-8 p-6 mb-4;
+
+      .cdx-quote__caption {
+        @apply block ml-6 mt-2 text-sm text-dark;
+      }
+
+      .cdx-quote__text {
+        quotes: "\201C" "\201D" "\2018" "\2019";
+        @apply pl-6;
+
+        &:before {
+          @apply -ml-8 mr-2 text-dark text-6xl leading-4 align-text-bottom font-serif;
+          content: open-quote;
+        }
+
+        p {
+          @apply inline italic text-lg;
+        }
+      }
+    }
+
+    .cdx-list {
+      @apply mb-4 pl-6;
+
+      &--ordered {
+        @apply list-decimal;
+      }
+
+      &--unordered {
+        @apply list-disc;
+      }
+
+      .cdx-list {
+        @apply mt-2 mb-0;
+      }
+
+      .cdx-list__item {
+        @apply mb-2 pl-2;
+      }
+    }
+
+    .cdx-nested-list {
+      @apply mb-4 pl-6;
+
+      &--ordered {
+        @apply list-decimal;
+      }
+
+      &--unordered {
+        @apply list-disc;
+      }
+
+      .cdx-nested-list {
+        @apply mt-2 mb-0;
+      }
+
+      .cdx-nested-list__item {
+        @apply mb-2 pl-2;
+      }
+    }
+
+    .cdx-table {
+      @apply w-full border-collapse border-2 border-dark my-6;
+
+      &__head {
+        @apply font-semibold border-dark border-r-2 p-3 bg-light;
+      }
+
+      &__row {
+        @apply border-dark border-b-2;
+      }
+
+      &__cell {
+        @apply border-dark border-r-2 p-3;
+      }
+    }
+
+    .cdx-embed {
+      iframe {
+        @apply w-full border-none;
+      }
+    }
+  }
+}

data/config/importmap.rb

@@ -2,14 +2,25 @@
 
 # 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'
+# Entry points (required by panda_core_javascript helper)
+# These must use absolute paths to work with JavaScriptMiddleware
+pin "panda/editor/application", to: "/panda/editor/application.js", preload: true
+pin "panda/editor/controllers/index", to: "/panda/editor/controllers/index.js"
+
+# Individual modules used by panda-cms controllers
+pin "panda/editor/editor_js_config", to: "/panda/editor/editor_js_config.js"
+pin "panda/editor/editor_js_initializer", to: "/panda/editor/editor_js_initializer.js"
+pin "panda/editor/resource_loader", to: "/panda/editor/resource_loader.js"
+pin "panda/editor/plain_text_editor", to: "/panda/editor/plain_text_editor.js"
+pin "panda/editor/css_extractor", to: "/panda/editor/css_extractor.js"
+pin "panda/editor/rich_text_editor", to: "/panda/editor/rich_text_editor.js"
+
+# EditorJS Core and plugins (from esm.sh - better ES module handling than jsdelivr)
+pin "@editorjs/editorjs", to: "https://esm.sh/@editorjs/editorjs@2.28.2"
+pin "@editorjs/paragraph", to: "https://esm.sh/@editorjs/paragraph@2.11.3"
+pin "@editorjs/header", to: "https://esm.sh/@editorjs/header@2.8.1"
+pin "@editorjs/nested-list", to: "https://esm.sh/@editorjs/nested-list@1.4.2"
+pin "@editorjs/quote", to: "https://esm.sh/@editorjs/quote@2.6.0"
+pin "@editorjs/simple-image", to: "https://esm.sh/@editorjs/simple-image@1.6.0"
+pin "@editorjs/table", to: "https://esm.sh/@editorjs/table@2.3.0"
+pin "@editorjs/embed", to: "https://esm.sh/@editorjs/embed@2.7.0"

data/docs/FOOTNOTES.md

@@ -29,6 +29,7 @@ The footnote system consists of three main components:
 - 📍 **Position-based injection**: Place footnote markers at any character position
 - 🎨 **Collapsible UI**: Clean, accessible sources section
 - 🔗 **Bidirectional links**: Navigate between citations and sources
+- 💬 **Hover tooltips**: Preview footnote content without scrolling to sources
 
 ## How It Works
 
@@ -181,10 +182,17 @@ Both paragraphs will reference the same footnote number, and the source will app
 
 ### Inline Markers
 
+Footnote markers include native browser tooltips and data attributes for custom tooltip implementations:
+
 ```html
-<p>Climate change has accelerated significantly since 1980<sup id="fnref:1"><a href="#fn:1" class="footnote">1</a></sup></p>
+<p>Climate change has accelerated significantly since 1980<sup id="fnref:1" class="footnote-ref" data-footnote-content="IPCC. (2023). Climate Change 2023: Synthesis Report." title="IPCC. (2023). Climate Change 2023: Synthesis Report."><a href="#fn:1" class="footnote">1</a></sup></p>
 ```
 
+**Tooltip Attributes:**
+- `class="footnote-ref"` - Identifies footnote markers for styling
+- `data-footnote-content` - Contains processed footnote content (with markdown/HTML if enabled) for custom tooltips
+- `title` - Contains plain text version for native browser tooltips on hover
+
 ### Sources Section
 
 ```html
@@ -442,6 +450,91 @@ def generate_cached_content
 end
 ```
 
+## Tooltips
+
+Footnote markers automatically include tooltip support through two mechanisms:
+
+### Native Browser Tooltips
+
+The `title` attribute provides instant, zero-JavaScript tooltips:
+
+```html
+<sup title="IPCC. (2023). Climate Change 2023: Synthesis Report.">
+  <a href="#fn:1" class="footnote">1</a>
+</sup>
+```
+
+This works immediately in all browsers with no additional code required. However, native tooltips have limitations:
+- Cannot contain HTML formatting
+- Limited styling options
+- Inconsistent behavior across browsers
+
+### Custom Tooltips
+
+For richer tooltips, use the `data-footnote-content` attribute with your preferred tooltip library:
+
+**With Tippy.js:**
+
+```javascript
+import tippy from 'tippy.js'
+import 'tippy.js/dist/tippy.css'
+
+// Initialize tooltips for all footnote markers
+tippy('[data-footnote-content]', {
+  content: (reference) => reference.getAttribute('data-footnote-content'),
+  allowHTML: true,
+  theme: 'light',
+  placement: 'top',
+  maxWidth: 400
+})
+```
+
+**With Bootstrap:**
+
+```javascript
+// Initialize Bootstrap tooltips
+document.querySelectorAll('[data-footnote-content]').forEach(element => {
+  new bootstrap.Tooltip(element, {
+    title: element.getAttribute('data-footnote-content'),
+    html: true,
+    placement: 'top'
+  })
+})
+```
+
+**With Custom CSS Tooltips:**
+
+```css
+/* Pure CSS tooltip */
+.footnote-ref {
+  position: relative;
+}
+
+.footnote-ref::after {
+  content: attr(data-footnote-content);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.5rem;
+  background: #333;
+  color: white;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+  z-index: 1000;
+}
+
+.footnote-ref:hover::after {
+  opacity: 1;
+}
+```
+
+**Security Note:** The `data-footnote-content` attribute is properly HTML-escaped to prevent XSS attacks. When using `allowHTML: true` with tooltip libraries, the content is safe because special characters are already escaped.
+
 ## CSS Styling
 
 The rendered HTML includes Tailwind CSS classes. You can customize the appearance:
@@ -621,11 +714,11 @@ bundle exec rspec spec/lib/panda/editor/renderer_spec.rb
 
 ## Future Enhancements
 
-Potential improvements for future versions:
+See GitHub issue [#2](https://github.com/tastybamboo/panda-editor/issues/2) for planned improvements including:
 
 - [ ] Support for footnotes in other block types (headers, quotes, etc.)
 - [x] Rich text formatting within footnote content (implemented via markdown support)
-- [ ] Footnote tooltips on hover
+- [x] Footnote tooltips on hover (implemented with native browser tooltips and custom tooltip data attributes)
 - [ ] Customizable footnote markers (*, †, ‡, etc.)
 - [ ] Export footnotes to bibliography formats (BibTeX, etc.)
 - [ ] Footnote management UI in EditorJS

data/lefthook.yml

@@ -0,0 +1,16 @@
+---
+assert_lefthook_installed: true
+colors: true
+pre-commit:
+  parallel: true
+  jobs:
+    - name: standardrb
+      run: bundle exec standardrb
+      glob: "*.rb"
+      stage_fixed: true
+
+pre-push:
+  parallel: true
+  jobs:
+    - name: standardrb
+      run: bundle exec standardrb