panda-cms 0.7.0

data/app/javascript/panda/cms/controllers/editor_form_controller.js

@@ -0,0 +1,77 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["editorContainer", "hiddenField"];
+  static values = {
+    editorId: String,
+  };
+
+  connect() {
+    this.initializeEditor();
+  }
+
+  async initializeEditor() {
+    if (this.editor) return;
+
+    try {
+      const holderId =
+        this.editorIdValue + "_holder" ||
+        `editor-${Math.random().toString(36).substring(2, 9)}`;
+      let holderDiv = document.createElement("div");
+      holderDiv.id = holderId;
+      holderDiv.className = "codex-editor";
+      this.editorContainerTarget.innerHTML = "";
+      this.editorContainerTarget.appendChild(holderDiv);
+
+      const { getEditorConfig } = await import(
+        "panda/cms/editor/editor_js_config"
+      );
+      const config = getEditorConfig(holderId, this.getInitialContent());
+
+      editor_content_post;
+
+      this.editor = new EditorJS({
+        ...config,
+        holder: holderId,
+        autofocus: false,
+        minHeight: 1,
+        logLevel: "ERROR",
+        onChange: () => {
+          if (!this.editor) return;
+          this.editor.save().then((outputData) => {
+            outputData.source = "editorJS";
+            this.hiddenFieldTarget.value = JSON.stringify(outputData);
+          });
+        },
+      });
+    } catch (error) {
+      console.error("[Panda CMS] Editor setup failed:", error);
+    }
+  }
+
+  getInitialContent() {
+    try {
+      const value = this.hiddenFieldTarget.value;
+      if (value && value !== "{}") {
+        const data = JSON.parse(value);
+        if (data.blocks) return data;
+      }
+    } catch (e) {
+      console.warn("[Panda CMS] Could not parse initial content:", e);
+    }
+
+    return {
+      time: Date.now(),
+      blocks: [{ type: "paragraph", data: { text: "" } }],
+      version: "2.28.2",
+      source: "editorJS",
+    };
+  }
+
+  disconnect() {
+    if (this.editor) {
+      this.editor.destroy();
+      this.editor = null;
+    }
+  }
+}

data/app/javascript/panda/cms/controllers/editor_iframe_controller.js

@@ -0,0 +1,320 @@
+import { Controller } from "@hotwired/stimulus"
+import { PlainTextEditor } from "panda/cms/editor/plain_text_editor"
+import { EditorJSInitializer } from "panda/cms/editor/editor_js_initializer"
+
+export default class extends Controller {
+  static values = {
+    pageId: Number,
+    adminPath: String,
+    autosave: Boolean
+  }
+
+  connect() {
+    console.debug("[Panda CMS] EditorIframe controller connected")
+    this.frame = this.element
+    this.setupControls()
+    this.setupFrame()
+    this.editors = []
+    this.editorsInitialized = {
+      plain: false,
+      rich: false
+    }
+  }
+
+  setupControls() {
+    // Create editor controls if they don't exist
+    if (!parent.document.querySelector('.editor-controls')) {
+      const controls = parent.document.createElement('div')
+      controls.className = 'editor-controls'
+      parent.document.body.appendChild(controls)
+    }
+
+    // Create save button if it doesn't exist
+    if (!parent.document.getElementById('saveEditableButton')) {
+      const saveButton = parent.document.createElement('a')
+      saveButton.id = 'saveEditableButton'
+      saveButton.href = '#'
+      saveButton.textContent = 'Save Changes'
+      saveButton.className = 'btn btn-primary'
+      parent.document.querySelector('.editor-controls').appendChild(saveButton)
+    }
+  }
+
+  setupFrame() {
+    // Always show the frame initially to ensure it's visible for tests
+    this.frame.style.display = ""
+    this.frame.style.width = "100%"
+    this.frame.style.height = "100%"
+    this.frame.style.minHeight = "500px"
+
+    // Get CSRF token
+    this.csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || ""
+
+    // Setup frame load handler
+    this.frame.addEventListener("load", async () => {
+      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
+
+      // Set up error handling for the iframe
+      this.frameDocument.defaultView.onerror = (message, source, lineno, colno, error) => {
+        // Relay the error to the parent window
+        const fullMessage = `iFrame Error: ${message} (${source}:${lineno}:${colno})`
+        console.error(fullMessage, error)
+
+        // Throw the error in the parent context for Cuprite to catch
+        setTimeout(() => {
+          throw new Error(fullMessage)
+        }, 0)
+
+        return false // Let the error propagate
+      }
+
+      // Set up unhandled rejection handling for the iframe
+      this.frameDocument.defaultView.onunhandledrejection = (event) => {
+        const fullMessage = `iFrame Unhandled Promise Rejection: ${event.reason}`
+        console.error(fullMessage)
+
+        // Throw the error in the parent context for Cuprite to catch
+        setTimeout(() => {
+          throw event.reason
+        }, 0)
+      }
+
+      // Ensure frame is visible after load
+      this.frame.style.display = ""
+      this.ensureFrameVisibility()
+
+      // Wait for document to be ready
+      if (this.frameDocument.readyState !== 'complete') {
+        await new Promise(resolve => {
+          this.frameDocument.addEventListener('DOMContentLoaded', resolve)
+        })
+      }
+
+      // Load Editor.js resources in the iframe context
+      try {
+        const { EDITOR_JS_RESOURCES, EDITOR_JS_CSS } = await import("panda/cms/editor/editor_js_config")
+        const { ResourceLoader } = await import("panda/cms/editor/resource_loader")
+
+        // First load EditorJS core
+        const editorCore = EDITOR_JS_RESOURCES[0]
+        await ResourceLoader.loadScript(this.frameDocument, this.head, editorCore)
+
+        // Then load all tools in parallel
+        const toolLoads = EDITOR_JS_RESOURCES.slice(1).map(async (resource) => {
+          await ResourceLoader.loadScript(this.frameDocument, this.head, resource)
+        })
+
+        // Load CSS directly
+        await ResourceLoader.embedCSS(this.frameDocument, this.head, EDITOR_JS_CSS)
+
+        // Wait for all resources to load
+        await Promise.all(toolLoads)
+        console.debug("[Panda CMS] Editor resources loaded in iframe")
+
+        // Wait a small amount of time for scripts to initialize
+        await new Promise(resolve => setTimeout(resolve, 100))
+
+        // Initialize editors only if we have the body and editable elements
+        if (this.body && this.body.querySelector('[data-editable-kind]')) {
+          await this.initializeEditors()
+        } else {
+          const error = new Error("[Panda CMS] Frame body or editable elements not found")
+          console.error(error)
+          throw error
+        }
+      } catch (error) {
+        console.error("[Panda CMS] Error loading editor resources in iframe:", error)
+        throw error
+      }
+    })
+  }
+
+  ensureFrameVisibility() {
+    // Force frame to be visible
+    this.frame.style.display = ""
+
+    // Check dimensions and fix if needed
+    if (this.frame.offsetWidth === 0 || this.frame.offsetHeight === 0) {
+      console.warn("[Panda CMS] iFrame has zero dimensions, fixing...")
+      this.frame.style.width = "100%"
+      this.frame.style.height = "100%"
+      this.frame.style.minHeight = "500px"
+    }
+
+    // Log visibility state
+    console.debug("[Panda CMS] Frame visibility state:", {
+      display: this.frame.style.display,
+      width: this.frame.offsetWidth,
+      height: this.frame.offsetHeight,
+      visible: this.frame.offsetParent !== null
+    })
+  }
+
+  initializeEditors() {
+    console.debug("[Panda CMS] Starting editor initialization")
+
+    // Get all editable elements
+    const plainTextElements = this.body.querySelectorAll('[data-editable-kind="plain_text"], [data-editable-kind="markdown"], [data-editable-kind="html"]')
+    const richTextElements = this.body.querySelectorAll('[data-editable-kind="rich_text"]')
+
+    console.debug(`[Panda CMS] Found ${plainTextElements.length} plain text elements and ${richTextElements.length} rich text elements`)
+
+    // Always ensure frame is visible
+    this.ensureFrameVisibility()
+
+    // Initialize editors if they exist
+    if (plainTextElements.length > 0 || richTextElements.length > 0) {
+      this.initializePlainTextEditors()
+      this.initializeRichTextEditors()
+    }
+  }
+
+  initializePlainTextEditors() {
+    this.editorsInitialized.plain = false
+    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 => {
+      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()
+  }
+
+  async initializeRichTextEditors() {
+    this.editorsInitialized.rich = false
+    const richTextElements = this.body.querySelectorAll('[data-editable-kind="rich_text"]')
+    console.debug(`[Panda CMS] Found ${richTextElements.length} rich text elements`)
+
+    if (richTextElements.length > 0) {
+      // Verify Editor.js is available in the iframe context
+      if (!this.frameDocument.defaultView.EditorJS) {
+        const error = new Error("Editor.js not loaded in iframe context")
+        console.error("[Panda CMS]", error)
+        throw error // This will bubble up and fail the test
+      }
+
+      const initializer = new EditorJSInitializer(this.frameDocument, true)
+
+      // Don't wrap in try/catch to let errors bubble up
+      const editors = await Promise.all(
+        Array.from(richTextElements).map(async element => {
+          // Create holder element before initialization
+          const holderId = `editor-${Math.random().toString(36).substr(2, 9)}`
+          const holderElement = this.frameDocument.createElement('div')
+          holderElement.id = holderId
+          holderElement.className = 'editor-js-holder codex-editor'
+          element.appendChild(holderElement)
+
+          // Wait for the holder element to be in the DOM
+          await new Promise(resolve => setTimeout(resolve, 0))
+
+          // Verify the holder element exists
+          const verifyHolder = this.frameDocument.getElementById(holderId)
+          if (!verifyHolder) {
+            const error = new Error(`Failed to create editor holder element ${holderId}`)
+            console.error("[Panda CMS]", error)
+            throw error // This will bubble up and fail the test
+          }
+
+          console.debug(`[Panda CMS] Created editor holder: ${holderId}`, {
+            exists: !!verifyHolder,
+            parent: element.id || 'no-id',
+            editorJSAvailable: !!this.frameDocument.defaultView.EditorJS
+          })
+
+          // Initialize editor with empty data
+          const editor = await initializer.initialize(holderElement, {}, holderId)
+
+          // Set up save handler for this editor
+          const saveButton = parent.document.getElementById('saveEditableButton')
+          if (saveButton) {
+            saveButton.addEventListener('click', async () => {
+              const outputData = await editor.save()
+              outputData.source = "editorJS"
+
+              const pageId = element.getAttribute("data-editable-page-id")
+              const blockContentId = element.getAttribute("data-editable-block-content-id")
+
+              const response = await fetch(`${this.adminPathValue}/pages/${pageId}/block_contents/${blockContentId}`, {
+                method: "PATCH",
+                headers: {
+                  "Content-Type": "application/json",
+                  "X-CSRF-Token": this.csrfToken
+                },
+                body: JSON.stringify({ content: outputData })
+              })
+
+              if (!response.ok) {
+                const error = new Error('Save failed')
+                console.error("[Panda CMS]", error)
+                throw error
+              }
+
+              this.handleSuccess()
+            })
+          } else {
+            console.warn("[Panda CMS] Save button not found")
+          }
+
+          return editor
+        })
+      )
+
+      // Filter out any null editors and add the valid ones
+      const validEditors = editors.filter(editor => editor !== null)
+      this.editors.push(...validEditors)
+
+      // If we didn't get any valid editors, that's an error
+      if (validEditors.length === 0) {
+        const error = new Error("No editors were successfully initialized")
+        console.error("[Panda CMS]", error)
+        throw error
+      }
+    }
+
+    this.editorsInitialized.rich = true
+    this.checkAllEditorsInitialized()
+  }
+
+  checkAllEditorsInitialized() {
+    console.log("[Panda CMS] Editor initialization status:", this.editorsInitialized)
+
+    // Always ensure frame is visible
+    this.ensureFrameVisibility()
+  }
+
+  handleError(error) {
+    const errorMessage = parent.document.getElementById("errorMessage")
+    if (errorMessage) {
+      errorMessage.getElementsByClassName('flash-message-text')[0].textContent = error
+      errorMessage.classList.remove("hidden")
+      setTimeout(() => {
+        errorMessage.classList.add("hidden")
+      }, 3000)
+    }
+    console.error("[Panda CMS] Error:", error)
+
+    // Throw the error to fail the test
+    throw error
+  }
+
+  handleSuccess() {
+    const successMessage = parent.document.getElementById("successMessage")
+    if (successMessage) {
+      successMessage.classList.remove("hidden")
+      setTimeout(() => {
+        successMessage.classList.add("hidden")
+      }, 3000)
+    }
+  }
+}

data/app/javascript/panda/cms/controllers/index.js

@@ -0,0 +1,48 @@
+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...")
+
+// Configure Stimulus development experience
+pandaCmsApplication.debug = false
+window.pandaCmsStimulus = pandaCmsApplication
+
+console.debug("[Panda CMS] window.pandaCmsStimulus available...")
+
+console.debug("[Panda CMS] Registering controllers...")
+
+// Use the same paths as defined in _importmap.html.erb
+import DashboardController from "panda/cms/controllers/dashboard_controller"
+pandaCmsApplication.register("dashboard", DashboardController)
+
+import EditorFormController from "panda/cms/controllers/editor_form_controller"
+pandaCmsApplication.register("editor-form", EditorFormController)
+
+import SlugController from "panda/cms/controllers/slug_controller"
+pandaCmsApplication.register("slug", SlugController)
+
+import EditorIframeController from "panda/cms/controllers/editor_iframe_controller"
+pandaCmsApplication.register("editor-iframe", EditorIframeController)
+
+console.debug("[Panda CMS] Registering components...")
+
+// Import and register all TailwindCSS Components or just the ones you need
+import { Alert, Autosave, ColorPreview, Dropdown, Modal, Tabs, Popover, Toggle, Slideover } from "tailwindcss-stimulus-components"
+pandaCmsApplication.register('alert', Alert)
+pandaCmsApplication.register('autosave', Autosave)
+pandaCmsApplication.register('color-preview', ColorPreview)
+pandaCmsApplication.register('dropdown', Dropdown)
+pandaCmsApplication.register('modal', Modal)
+pandaCmsApplication.register('popover', Popover)
+pandaCmsApplication.register('slideover', Slideover)
+pandaCmsApplication.register('tabs', Tabs)
+pandaCmsApplication.register('toggle', Toggle)
+
+console.debug("[Panda CMS] Components registered...")
+
+export { pandaCmsApplication }
+
+console.debug("[Panda CMS] Application exported...")

data/app/javascript/panda/cms/controllers/slug_controller.js

@@ -0,0 +1,87 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = [
+    "existing_root",
+    "input_select",
+    "input_text",
+    "output_text",
+  ];
+
+  connect() {
+    console.debug("[Panda CMS] Slug handler connected...");
+    // Generate path on initial load if title exists
+    if (this.input_textTarget.value) {
+      this.generatePath();
+    }
+  }
+
+  generatePath() {
+    try {
+      const slug = this.createSlug(this.input_textTarget.value);
+      // For posts, we want to store just the slug part
+      const prefix = this.output_textTarget.dataset.prefix || "";
+      this.output_textTarget.value = "/" + slug;
+
+      // If there's a prefix, show it in the UI but don't include it in the value
+      if (prefix) {
+        const prefixSpan = this.output_textTarget.previousElementSibling ||
+          (() => {
+            const span = document.createElement('span');
+            span.className = 'prefix';
+            this.output_textTarget.parentNode.insertBefore(span, this.output_textTarget);
+            return span;
+          })();
+        prefixSpan.textContent = prefix;
+      }
+
+      console.log("Have set the path to: " + this.output_textTarget.value);
+    } catch (error) {
+      console.error("Error generating path:", error);
+      // Add error class to path field
+      this.output_textTarget.classList.add("error");
+    }
+  }
+
+  setPrePath() {
+    try {
+      const match = this.input_selectTarget.options[this.input_selectTarget.selectedIndex].text.match(/.*\((.*)\)$/);
+      if (match) {
+        this.parent_slugs = match[1];
+        const prePath = (this.existing_rootTarget.value + this.parent_slugs).replace(/\/$/, "");
+        const prefixSpan = this.output_textTarget.previousElementSibling;
+        if (prefixSpan) {
+          prefixSpan.textContent = prePath;
+        }
+        console.log("Have set the pre-path to: " + prePath);
+      }
+    } catch (error) {
+      console.error("Error setting pre-path:", error);
+    }
+  }
+
+  // TODO: Invoke a library or helper which can be shared with the backend
+  // and check for uniqueness at the same time
+  createSlug(input) {
+    if (!input) return "";
+
+    var str = input
+      .toLowerCase()
+      .trim()
+      .replace(/[^\w\s-]/g, "-")
+      .replace(/&/g, "and")
+      .replace(/[\s_-]+/g, "-")
+      .trim();
+
+    return this.trimStartEnd(str, "-");
+  }
+
+  trimStartEnd(str, ch) {
+    var start = 0;
+    var end = str.length;
+
+    while (start < end && str[start] === ch) ++start;
+    while (end > start && str[end - 1] === ch) --end;
+    return start > 0 || end < str.length ? str.substring(start, end) : str;
+  }
+}

data/app/javascript/panda/cms/editor/css_extractor.js

@@ -0,0 +1,80 @@
+export class CSSExtractor {
+  /**
+   * Extracts CSS rules from within a specific selector and transforms them for EditorJS
+   * @param {string} css - The CSS content to parse
+   * @returns {string} The extracted and transformed CSS rules
+   */
+  static extractStyles(css) {
+    const rules = []
+    let inComponents = false
+    let inContentRule = false
+    let braceCount = 0
+    let currentRule = ''
+
+    // Split CSS into lines and process each line
+    const lines = css.split('\n')
+
+    for (const line of lines) {
+      const trimmedLine = line.trim()
+
+      // Check if we're entering components layer
+      if (trimmedLine === '@layer components {') {
+        inComponents = true
+        continue
+      }
+
+      // Only process lines within components layer
+      if (!inComponents) continue
+
+      // If we find the .content selector
+      if (!inContentRule && trimmedLine.startsWith('.content')) {
+        inContentRule = true
+        braceCount++
+        // Transform the selector for EditorJS
+        currentRule = '.codex-editor__redactor .ce-block .ce-block__content'
+        if (trimmedLine.includes('{')) {
+          currentRule += ' {'
+        }
+        continue
+      }
+
+      // If we're inside a content rule
+      if (inContentRule) {
+        // Transform selectors for EditorJS
+        let transformedLine = line
+          .replace(/\.content\s+/g, '.codex-editor__redactor .ce-block .ce-block__content ')
+          .replace(/\bh1\b(?![-_])/g, 'h1.ce-header')
+          .replace(/\bh2\b(?![-_])/g, 'h2.ce-header')
+          .replace(/\bh3\b(?![-_])/g, 'h3.ce-header')
+          .replace(/\bul\b(?![-_])/g, 'ul.cdx-list')
+          .replace(/\bol\b(?![-_])/g, 'ol.cdx-list')
+          .replace(/\bli\b(?![-_])/g, 'li.cdx-list__item')
+          .replace(/\bblockquote\b(?![-_])/g, '.cdx-quote')
+
+        currentRule += '\n' + transformedLine
+
+        // Count braces to handle nested rules
+        braceCount += (trimmedLine.match(/{/g) || []).length
+        braceCount -= (trimmedLine.match(/}/g) || []).length
+
+        // If braces are balanced, we've found the end of the rule
+        if (braceCount === 0) {
+          rules.push(currentRule)
+          inContentRule = false
+          currentRule = ''
+        }
+      }
+    }
+
+    return rules.join('\n\n')
+  }
+
+  /**
+   * Gets all styles from a stylesheet that apply to the editor
+   * @param {string} css - The CSS content to parse
+   * @returns {string} The extracted CSS rules
+   */
+  static getEditorStyles(css) {
+    return this.extractStyles(css)
+  }
+}