panda-editor 0.6.0 → 0.8.2

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

data/lib/panda/editor/asset_loader.rb

@@ -1,13 +1,13 @@
 # frozen_string_literal: true
 
-require 'net/http'
-require 'json'
+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')
+      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
@@ -22,7 +22,7 @@ module Panda
           if use_compiled_assets?
             compiled_javascript_url
           else
-            '/assets/panda/editor/application.js'
+            "/assets/panda/editor/application.js"
           end
         end
 
@@ -30,7 +30,7 @@ module Panda
           if use_compiled_assets?
             compiled_stylesheet_url
           else
-            '/assets/panda/editor/application.css'
+            "/assets/panda/editor/application.css"
           end
         end
 
@@ -39,7 +39,7 @@ module Panda
         def use_compiled_assets?
           Rails.env.production? ||
             Rails.env.test? ||
-            ENV['PANDA_EDITOR_USE_COMPILED_ASSETS'] == 'true'
+            ENV["PANDA_EDITOR_USE_COMPILED_ASSETS"] == "true"
         end
 
         def load_compiled_assets
@@ -52,23 +52,23 @@ module Panda
 
         def load_development_assets
           {
-            javascript: '/assets/panda/editor/application.js',
-            stylesheet: '/assets/panda/editor/application.css'
+            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 = 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 = 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}")
+          pattern = Rails.root.join("public", "panda-editor-assets", "panda-editor-*.#{extension}")
           Dir.glob(pattern).max_by { |f| File.mtime(f) }
         end
 
@@ -79,18 +79,18 @@ module Panda
         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 = 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...'
+          Rails.logger.info "[Panda Editor] Downloading assets from GitHub releases..."
 
           begin
             release_data = fetch_latest_release
-            download_release_assets(release_data['assets'])
-          rescue StandardError => e
+            download_release_assets(release_data["assets"])
+          rescue => e
             Rails.logger.error "[Panda Editor] Failed to download assets: #{e.message}"
             use_fallback_assets
           end
@@ -100,30 +100,30 @@ module Panda
           uri = URI(GITHUB_RELEASES_URL)
           response = Net::HTTP.get_response(uri)
 
-          raise "GitHub API returned #{response.code}" unless response.code == '200'
+          raise "GitHub API returned #{response.code}" unless response.code == "200"
 
           JSON.parse(response.body)
         end
 
         def download_release_assets(assets)
           assets.each do |asset|
-            next unless asset['name'].match?(/panda-editor.*\.(js|css)$/)
+            next unless asset["name"].match?(/panda-editor.*\.(js|css)$/)
 
             download_asset(asset)
           end
         end
 
         def download_asset(asset)
-          uri = URI(asset['browser_download_url'])
+          uri = URI(asset["browser_download_url"])
           response = Net::HTTP.get_response(uri)
 
-          return unless response.code == '200'
+          return unless response.code == "200"
 
-          save_asset(asset['name'], response.body)
+          save_asset(asset["name"], response.body)
         end
 
         def save_asset(filename, content)
-          dir = Rails.root.join('public', 'panda-editor-assets')
+          dir = Rails.root.join("public", "panda-editor-assets")
           FileUtils.mkdir_p(dir)
 
           File.write(dir.join(filename), content)
@@ -131,17 +131,17 @@ module Panda
         end
 
         def use_fallback_assets
-          Rails.logger.warn '[Panda Editor] Using fallback embedded 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')
+          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)
+          FileUtils.cp_r(Dir.glob(source_dir.join("*")), dest_dir)
         end
       end
     end

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

@@ -5,13 +5,13 @@ module Panda
     module Blocks
       class Alert < Base
         def render
-          message = sanitize(data['message'])
-          type = data['type'] || 'primary'
+          message = sanitize(data["message"])
+          type = data["type"] || "primary"
 
           html_safe(
             "<div class=\"#{alert_classes(type)} p-4 mb-4 rounded-lg\">" \
               "#{message}" \
-            '</div>'
+            "</div>"
           )
         end
 
@@ -19,13 +19,13 @@ module Panda
 
         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'
+          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

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

@@ -15,7 +15,7 @@ module Panda
         end
 
         def render
-          ''
+          ""
         end
 
         protected

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

@@ -5,8 +5,8 @@ module Panda
     module Blocks
       class Header < Base
         def render
-          content = sanitize(data['text'])
-          level = data['level'] || 2
+          content = sanitize(data["text"])
+          level = data["level"] || 2
           html_safe("<h#{level}>#{content}</h#{level}>")
         end
       end

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

@@ -5,19 +5,19 @@ module Panda
     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']
+          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
+          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(' ')}">
+            <figure class="#{css_classes.join(" ")}">
               <img src="#{url}" alt="#{caption}" />
               #{caption_element(caption)}
             </figure>
@@ -27,7 +27,7 @@ module Panda
         private
 
         def caption_element(caption)
-          return '' if caption.blank?
+          return "" if caption.blank?
 
           "<figcaption>#{caption}</figcaption>"
         end

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

@@ -5,10 +5,11 @@ module Panda
     module Blocks
       class List < Base
         def render
-          list_type = data['style'] == 'ordered' ? 'ol' : 'ul'
+          style = data["style"] || data[:style]
+          list_type = (style == "ordered") ? "ol" : "ul"
           html_safe(
             "<#{list_type}>" \
-            "#{render_items(data['items'])}" \
+            "#{render_items(data["items"] || data[:items] || [])}" \
             "</#{list_type}>"
           )
         end
@@ -16,15 +17,33 @@ module Panda
         private
 
         def render_items(items)
+          return "" unless items.is_a?(Array)
+
           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>"
+            content = extract_content(item)
+            nested_items = extract_nested_items(item)
+            nested = nested_items.present? ? render_nested(nested_items) : ""
+            "<li>#{sanitize(content.to_s)}#{nested}</li>"
           end.join
         end
 
+        def extract_content(item)
+          return item unless item.is_a?(Hash)
+
+          # Handle both string and symbol keys
+          item["content"] || item[:content] || ""
+        end
+
+        def extract_nested_items(item)
+          return [] unless item.is_a?(Hash)
+
+          # Handle both string and symbol keys
+          item["items"] || item[:items] || []
+        end
+
         def render_nested(items)
-          self.class.new({ 'items' => items, 'style' => data['style'] }).render
+          style = data["style"] || data[:style]
+          self.class.new({"items" => items, "style" => style}).render
         end
       end
     end