panda_cms 0.6.0 → 0.6.1

data/app/javascript/panda_cms/controllers/editor_controller.js

@@ -0,0 +1,247 @@
+import { Controller } from "@hotwired/stimulus"
+import { PlainTextEditor } from "panda_cms_editor/plain_text_editor";
+import { ResourceLoader } from "panda_cms_editor/resource_loader";
+
+export class EditorController extends Controller {
+  /**
+   * Defines the static values that can be set on the EditorController.
+   *
+   * @property {number} pageId - The ID of the page being edited.
+   * @property {string} adminPath - The path to the admin section of the application.
+   * @property {boolean} autosave - Whether the editor should automatically save changes.
+   */
+  static values = {
+    pageId: Number,
+    adminPath: String,
+    autosave: Boolean
+  }
+
+  /**
+   * Connects the EditorController to the DOM and initializes the editors.
+   * This method is called when the EditorController is connected to the DOM.
+   * It sets up the necessary properties and event listeners to manage the editors,
+   * and then calls the `initializeEditors()` method to start the initialization process.
+   */
+  connect() {
+    console.debug("[Panda CMS] Editor controller connected")
+    this.frame = this.element
+
+    // In CI, show what's going on, otherwise hide the frame
+    if (!window.location.href.includes("0.0.0.0:3001")) {
+      this.frame.style.display = "none"
+    }
+
+    if (document.querySelector('meta[name="csrf-token"]')) {
+      this.csrfToken = document.querySelector('meta[name="csrf-token"]').content
+    } else {
+      this.csrfToken = ""
+    }
+
+    this.editors = []
+    this.editorsInitialized = {
+      plain: false,
+      rich: false
+    }
+
+    this.frame.addEventListener("load", () => {
+      console.debug("[Panda CMS] Frame loaded")
+      this.frameDocument = this.frame.contentDocument || this.frame.contentWindow.document
+      this.body = this.frameDocument.body
+      this.head = this.frameDocument.head
+      this.initializeEditors()
+    })
+  }
+
+  /**
+   * Initializes the plain text and rich text editors for the page.
+   * This method is responsible for finding all editable elements on the page and initializing the appropriate editor instances for them.
+   * It sets the editorsInitialized flags to true once the initialization is complete and calls the checkAllEditorsInitialized method.
+   */
+  initializeEditors() {
+    console.debug("[Panda CMS] Starting editor initialization")
+    this.initializePlainTextEditors()
+    this.initializeRichTextEditors()
+  }
+
+  /**
+   * Initializes the plain text editors for the page.
+   * This method is responsible for finding all elements on the page that have the "plain_text", "markdown", or "html" data-editable-kind attributes,
+   * and initializing a PlainTextEditor instance for each of them. It also sets the editorsInitialized.plain flag to true
+   * and calls the checkAllEditorsInitialized method to notify that the plain text editors have been initialized.
+   */
+  initializePlainTextEditors() {
+    const plainTextElements = this.body.querySelectorAll('[data-editable-kind="plain_text"], [data-editable-kind="markdown"], [data-editable-kind="html"]')
+    console.debug(`[Panda CMS] Found ${plainTextElements.length} plain text elements`)
+
+    plainTextElements.forEach(element => {
+      console.debug(`[Panda CMS] Initializing plain text editor for element:`, element)
+      const editor = new PlainTextEditor(element, this.frameDocument, {
+        autosave: this.autosaveValue,
+        adminPath: this.adminPathValue,
+        csrfToken: this.csrfToken
+      })
+      this.editors.push(editor)
+    })
+
+    this.editorsInitialized.plain = true
+    this.checkAllEditorsInitialized()
+  }
+
+  /**
+   * Initializes the rich text editors for the page.
+   * This method is responsible for finding all elements on the page that have the "rich_text" data-editable-kind attribute,
+   * and initializing a RichTextEditor instance for each of them. It also sets the editorsInitialized.rich flag to true
+   * and calls the checkAllEditorsInitialized method to notify that the rich text editors have been initialized.
+   */
+  initializeRichTextEditors() {
+    const richTextElements = this.body.querySelectorAll('[data-editable-kind="rich_text"]')
+    console.debug(`[Panda CMS] Found ${richTextElements.length} rich text elements`)
+
+    if (richTextElements.length > 0) {
+      Promise.all([
+        ResourceLoader.loadScript(this.frameDocument, this.head, "https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"), // Base EditorJS
+        ResourceLoader.loadScript(this.frameDocument, this.head, "https://cdn.jsdelivr.net/npm/@editorjs/header@latest"), // Header Tool
+        ResourceLoader.loadScript(this.frameDocument, this.head, "https://cdn.jsdelivr.net/npm/@editorjs/list@latest"), // List Tool
+        ResourceLoader.loadScript(this.frameDocument, this.head, "https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"), // Quote Tool
+        ResourceLoader.loadScript(this.frameDocument, this.head, "https://cdn.jsdelivr.net/npm/@editorjs/nested-list@latest"), // Nested List Tool
+        ResourceLoader.loadScript(this.frameDocument, this.head, "https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"), // Simple Image Tool
+        ResourceLoader.loadScript(this.frameDocument, this.head, "https://cdn.jsdelivr.net/npm/@editorjs/table@latest"), // Table Tool
+        ResourceLoader.loadScript(this.frameDocument, this.head, "https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"), // Link Tool
+        ResourceLoader.loadScript(this.frameDocument, this.head, "https://cdn.jsdelivr.net/npm/editorjs-alert@latest"), // Alert Tool
+        ResourceLoader.embedCSS(this.frameDocument, this.head, ".ce-toolbar__content { margin: 0 !important; margin-left: 40px; max-width: 100% !important; width: 100% !important; } .ce-block__content { max-width: 100%; margin: 0 !important; margin-left: 10px !important; }")
+      ]).then(() => {
+        richTextElements.forEach(element => {
+          console.debug(`[Panda CMS] Initializing rich text editor for element:`, element)
+
+          // TODO: Need a way to override this per-site ... or rather, block/editor?
+          const elementAsId = element.id.replace(/-/g, "_")
+          const adminPathValue = this.adminPathValue
+          const pageId = element.getAttribute("data-editable-page-id")
+          const blockContentId = element.getAttribute("data-editable-block-content-id")
+          const csrfToken = this.csrfToken
+          const previousData = element.getAttribute("data-editable-previous-data")
+          const editorConfig = `{
+            holder: '${element.id}',
+            data: ${previousData},
+            tools: {
+              header: {
+                class: Header,
+                config: {
+                  placeholder: 'Enter a header',
+                  levels: [2, 3],
+                  defaultLevel: 2
+                }
+              },
+              list: {
+                class: NestedList,
+                inlineToolbar: true,
+                config: {
+                  defaultStyle: 'unordered'
+                },
+              },
+              alert: {
+                class: Alert,
+                inlineToolbar: true,
+                config: {
+                  defaultType: 'primary',
+                  messagePlaceholder: 'Enter something',
+                  types: {
+                    primary: 'Primary',
+                    secondary: 'Secondary',
+                    success: 'Success',
+                    danger: 'Danger',
+                    warning: 'Warning',
+                    info: 'Info'
+                  }
+                }
+              },
+              quote: Quote,
+              table: {
+                class: Table,
+                inlineToolbar: true,
+                config: {
+                  rows: 2,
+                  cols: 3
+                }
+              },
+              image: SimpleImage,
+              embed: {
+                class: Embed,
+                config: {
+                  services: {
+                    youtube: true,
+                    instagram: true,
+                    miro: true,
+                    vimeo: true,
+                    pinterest: true,
+                    github: true
+                  }
+                }
+              },
+            }
+          }`
+
+          // console.log(editorConfig);
+
+          ResourceLoader.embedScript(
+            `EditorJS configuration for ${element.id}`,
+            this.frameDocument,
+            this.head,
+            `
+              const ${elementAsId} = new EditorJS(${editorConfig})
+              parent.document.getElementById('saveEditableButton').addEventListener('click', (element) => {
+                ${elementAsId}.save().then((outputData) => {
+                  outputData.source = "editorJS"
+                  console.log('Saving successful, here is outputData:')
+                  dataToSend = JSON.stringify({ content: outputData })
+                  console.log(dataToSend)
+                  fetch("${adminPathValue}/pages/${pageId}/block_contents/${blockContentId}", {
+                    method: "PATCH",
+                    headers: {
+                      "Content-Type": "application/json",
+                      "X-CSRF-Token": "${this.csrfToken}"
+                    },
+                    body: dataToSend
+                  })
+                  .then(response => console.log(response))
+                  .then(() => alert("Saved"))
+                  .catch((error) => alert("Saving failed (1): " + error))
+                }).catch((error) => {
+                  console.log('Saving failed: ', error)
+                  alert('Saving failed (2): ' + error)
+                })
+              })
+
+              console.debug("[Panda CMS] Initialized rich text editor for element: ${elementAsId}")
+            `
+          )
+          this.editors.push(elementAsId)
+        })
+      }).then(() => {
+        this.editorsInitialized.rich = true
+        this.checkAllEditorsInitialized()
+      })
+    }
+  }
+
+  /**
+   * Checks if all editors have been initialized and sets the iFrame to visible if so.
+   * This is called after the plain text and rich text editors have been initialized.
+   */
+  checkAllEditorsInitialized() {
+    console.debug("[Panda CMS] Editor initialization status:", this.editorsInitialized)
+    if (this.editorsInitialized.plain && this.editorsInitialized.rich) {
+      console.debug("[Panda CMS] All editors initialized, showing iFrame")
+      this.setiFrameVisible()
+    }
+  }
+
+  /**
+   * Sets the visibility of the iFrame to visible.
+   * This is called after all editors have been initialized to show the iFrame.
+   */
+  setiFrameVisible() {
+    console.debug("[Panda CMS] Setting iFrame to visible")
+    this.frame.style.display = ""
+  }
+}

data/app/javascript/panda_cms/controllers/index.js

@@ -1,10 +1,10 @@
-console.debug("[Panda CMS] Importing Panda CMS Stimulus Controller...");;
+console.debug("[Panda CMS] Importing Panda CMS Stimulus Controller...")
 
 import { Application as PandaCmsApplication } from "@hotwired/stimulus"
 
 const pandaCmsApplication = PandaCmsApplication.start()
 
-console.debug("[Panda CMS] Application started...");;
+console.debug("[Panda CMS] Application started...")
 
 // Configure Stimulus development experience
 pandaCmsApplication.debug = false
@@ -14,13 +14,16 @@ console.debug("[Panda CMS] window.pandaCmsStimulus available...")
 
 console.debug("[Panda CMS] Registering controllers...")
 
-// Grab our internal controllers manually
-import { DashboardController } from "controllers/dashboard_controller"
+// Grab our internal controllers manually, prefixed with panda_cms_controllers so not to conflict
+import { DashboardController } from "panda_cms_controllers/dashboard_controller"
 pandaCmsApplication.register("dashboard", DashboardController)
 
-import { SlugController } from "controllers/slug_controller"
+import { SlugController } from "panda_cms_controllers/slug_controller"
 pandaCmsApplication.register("slug", SlugController)
 
+import { EditorController } from "panda_cms_controllers/editor_controller"
+pandaCmsApplication.register("editor", EditorController)
+
 console.debug("[Panda CMS] Registering components...")
 
 // Import and register all TailwindCSS Components or just the ones you need
@@ -35,8 +38,8 @@ pandaCmsApplication.register('slideover', Slideover)
 pandaCmsApplication.register('tabs', Tabs)
 pandaCmsApplication.register('toggle', Toggle)
 
-console.debug("[Panda CMS] Components registered...");
+console.debug("[Panda CMS] Components registered...")
 
 export { pandaCmsApplication }
 
-console.debug("[Panda CMS] Application exported...");
+console.debug("[Panda CMS] Application exported...")

data/app/javascript/panda_cms/editor/plain_text_editor.js

@@ -0,0 +1,102 @@
+export class PlainTextEditor {
+  /**
+   * Constructs a new PlainTextEditor instance.
+   *
+   * @param {HTMLElement} element - The HTML element representing the plain text editor.
+   * @param {HTMLIFrameElement} frame - The HTML iframe element containing the plain text editor.
+   * @param {Object} options - An object containing configuration options for the plain text editor.
+   */
+  constructor(element, frame, options) {
+    this.element = element
+    this.frame = frame
+    this.options = options
+    this.setupStyles()
+    this.bindEvents()
+  }
+
+  /**
+   * Sets up the styles for the plain text editor element.
+   *
+   * This method applies various CSS styles to the editor element, such as a dashed border, no outline, a pointer cursor, and a background color transition. It also sets the white-space and font-family styles based on the data-editable-kind attribute of the element.
+   */
+  setupStyles() {
+    this.element.style.border = "1px dashed #ccc"
+    this.element.style.outline = "none"
+    this.element.style.cursor = "pointer"
+    this.element.style.transition = "background 500ms linear"
+    this.element.style.backgroundColor = "inherit"
+
+    if (this.element.getAttribute("data-editable-kind") == "html") {
+      this.element.style.whiteSpace = "pre-wrap"
+      this.element.style.fontFamily = "monospace"
+    }
+  }
+
+  /**
+   * Binds event listeners for the plain text editor.
+   *
+   * If the `autosave` option is enabled, this method adds a `blur` event listener to the editor element, which triggers the `save()` method when the editor loses focus.
+   *
+   * Additionally, this method adds a `click` event listener to the "Save Editable" button, which also triggers the `save()` method when clicked.
+   */
+  bindEvents() {
+    if (this.options.autosave) {
+      this.element.addEventListener("blur", () => this.save())
+    }
+
+    document.getElementById('saveEditableButton').addEventListener('click', () => this.save())
+  }
+
+  /**
+   * Saves the content of the plain text editor to the server.
+   *
+   * This method sends a PATCH request to the server with the updated content of the plain text editor. It retrieves the necessary data from the editor element's attributes, such as the block content ID and the content type (HTML or plain text). If the save is successful, it calls the `showSuccess()` method, otherwise it calls the `showError()` method with the error.
+   */
+  save() {
+    const blockContentId = this.element.getAttribute("data-editable-block-content-id")
+    const pageId = this.element.getAttribute("data-editable-page-id")
+    const content = this.element.getAttribute("data-editable-kind") == "html" ?
+      this.element.innerText :
+      this.element.innerHTML
+
+    fetch(`${this.options.adminPath}/pages/${pageId}/block_contents/${blockContentId}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": this.options.csrfToken
+      },
+      body: JSON.stringify({ content: content })
+    })
+    .then(response => response.json())
+    .then(() => this.showSuccess())
+    .catch(error => this.showError(error))
+  }
+
+  /**
+   * Displays a success message by temporarily changing the background color of the editor element.
+   *
+   * This method is called after a successful save operation to provide visual feedback to the user.
+   */
+  showSuccess() {
+    this.element.style.backgroundColor = "#66bd6a50"
+    setTimeout(() => {
+      this.element.style.backgroundColor = "inherit"
+    }, 1000)
+  }
+
+  /**
+   * Displays an error message by temporarily changing the background color of the editor element and logging the error to the console.
+   *
+   * This method is called after a failed save operation to provide visual and textual feedback to the user.
+   *
+   * @param {Error} error - The error object that occurred during the save operation.
+   */
+  showError(error) {
+    this.element.style.backgroundColor = "#dc354550"
+    setTimeout(() => {
+      this.element.style.backgroundColor = "inherit"
+    }, 1000)
+    console.log(error)
+    alert("Error:", error)
+  }
+}

data/app/javascript/panda_cms/editor/resource_loader.js

@@ -0,0 +1,69 @@
+export class ResourceLoader {
+  static loadScript(frameDocument, head, src) {
+    return new Promise((resolve, reject) => {
+      const script = frameDocument.createElement("script")
+      script.src = src
+      head.append(script)
+
+      script.onload = () => {
+        console.debug(`[Panda CMS] Script loaded: ${src}`)
+        resolve(script)
+      }
+      script.onerror = () => reject(new Error(`[Panda CMS] Script load error for ${src}`))
+    })
+  }
+
+  static importScript(frameDocument, head, module, src) {
+    return new Promise((resolve, reject) => {
+      const script = frameDocument.createElement("script")
+      script.type = "module"
+      script.textContent = `import ${module} from "${src}"`
+      head.append(script)
+
+      script.onload = () => {
+        console.debug(`[Panda CMS] Module script loaded: ${src}`)
+        resolve(script)
+      }
+      script.onerror = () => reject(new Error(`[Panda CMS] Module script load error for ${src}`))
+    })
+  }
+
+  static embedScript(description, frameDocument, head, code) {
+    return new Promise((resolve) => {
+      const script = frameDocument.createElement("script")
+      script.textContent = code
+      head.append(script)
+      resolve(script)
+      console.debug(`[Panda CMS] Embedded script loaded (${description})`)
+    })
+  }
+
+  static loadStylesheet(frameDocument, head, href) {
+    return new Promise((resolve, reject) => {
+      const link = frameDocument.createElement("link")
+      link.rel = "stylesheet"
+      link.href = href
+      link.media = "none"
+      head.append(link)
+
+      link.onload = () => {
+        if (link.media != "all") {
+          link.media = "all"
+        }
+        console.debug(`[Panda CMS] Stylesheet loaded: ${href}`)
+        resolve(link)
+      }
+      link.onerror = () => reject(new Error(`[Panda CMS] Stylesheet load error for ${href}`))
+    })
+  }
+
+  static embedCSS(frameDocument, head, css) {
+    return new Promise((resolve) => {
+      const style = frameDocument.createElement("style")
+      style.textContent = css
+      head.append(style)
+      console.debug(`[Panda CMS] Embedded CSS loaded`)
+      resolve(style)
+    })
+  }
+}

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

@@ -0,0 +1,89 @@
+// import EditorJS from '@editorjs/editorjs';
+
+// export class RichTextEditor {
+//   /**
+//    * Constructs a new RichTextEditor instance.
+//    *
+//    * @param {HTMLElement} element - The HTML element that represents the rich text editor.
+//    * @param {HTMLIFrameElement} frame - The HTML iframe element containing the rich text editor.
+//    * @param {Object} options - An object containing configuration options for the rich text editor.
+//    */
+//   constructor(element, frame, options) {
+//     this.element = element
+//     this.frame = frame
+//     this.options = options
+//     this.bindEvents()
+//   }
+
+//   save() {
+
+//   }
+
+//   /**
+//    * Binds event listeners for the rich text editor.
+//    *
+//    * If the `autosave` option is enabled, this method adds a `blur` event listener to the editor element, which triggers the `save()` method when the editor loses focus.
+//    *
+//    * Additionally, this method adds a `click` event listener to the "Save Editable" button, which also triggers the `save()` method when clicked.
+//    */
+//   bindEvents() {
+//     if (this.options.autosave) {
+//       this.element.addEventListener("blur", () => this.save())
+//     }
+
+//     document.getElementById('saveEditableButton').addEventListener('click', () => this.save())
+//   }
+
+//   /**
+//    * Saves the content of the plain text editor to the server.
+//    *
+//    * This method sends a PATCH request to the server with the updated content of the plain text editor. It retrieves the necessary data from the editor element's attributes, such as the block content ID and the content type (HTML or plain text). If the save is successful, it calls the `showSuccess()` method, otherwise it calls the `showError()` method with the error.
+//    */
+//   save() {
+//     alert('save');
+//     return false;
+
+//     const blockContentId = this.element.getAttribute("data-editable-block-content-id")
+//     const pageId = this.element.getAttribute("data-editable-page-id")
+
+//     fetch(`${this.options.adminPath}/pages/${pageId}/block_contents/${blockContentId}`, {
+//       method: "PATCH",
+//       headers: {
+//         "Content-Type": "application/json",
+//         "X-CSRF-Token": this.options.csrfToken
+//       },
+//       body: JSON.stringify({ content: content })
+//     })
+//     .then(response => response.json())
+//     .then(() => this.showSuccess())
+//     .catch(error => this.showError(error))
+//   }
+
+//   /**
+//    * Displays a success message by temporarily changing the background color of the editor element.
+//    *
+//    * This method is called after a successful save operation to provide visual feedback to the user.
+//    */
+//   showSuccess() {
+//     this.element.style.backgroundColor = "#66bd6a50"
+//     setTimeout(() => {
+//       this.element.style.backgroundColor = "inherit"
+//     }, 1000)
+//   }
+
+//   /**
+//    * Displays an error message by temporarily changing the background color of the editor element and logging the error to the console.
+//    *
+//    * This method is called after a failed save operation to provide visual and textual feedback to the user.
+//    *
+//    * @param {Error} error - The error object that occurred during the save operation.
+//    */
+//   showError(error) {
+//     this.element.style.backgroundColor = "#dc354550"
+//     setTimeout(() => {
+//       this.element.style.backgroundColor = "inherit"
+//     }, 1000)
+//     console.log(error)
+//     alert("Error:", error)
+//   }
+// }

data/app/lib/panda_cms/demo_site_generator.rb

@@ -24,8 +24,6 @@ module PandaCms
         @templates[key] = PandaCms::Template.find_or_create_by!(template)
       end
 
-      PandaCms::Template.generate_missing_blocks
-
       @templates
     end
 

data/app/lib/panda_cms/editor_js/blocks/alert.rb

@@ -0,0 +1,32 @@
+module PandaCms
+  module EditorJs
+    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/app/lib/panda_cms/editor_js/blocks/base.rb

@@ -0,0 +1,28 @@
+module PandaCms
+  module EditorJs
+    module Blocks
+      class Base
+        attr_reader :data, :options
+
+        def initialize(data, options = {})
+          @data = data
+          @options = options
+        end
+
+        def render
+          ""
+        end
+
+        private
+
+        def sanitize(text)
+          Rails::Html::SafeListSanitizer.new.sanitize(text, tags: %w[b i u a code])
+        end
+
+        def html_safe(text)
+          text.to_s.html_safe
+        end
+      end
+    end
+  end
+end

data/app/lib/panda_cms/editor_js/blocks/header.rb

@@ -0,0 +1,13 @@
+module PandaCms
+  module EditorJs
+    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/app/lib/panda_cms/editor_js/blocks/image.rb

@@ -0,0 +1,34 @@
+module PandaCms
+  module EditorJs
+    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