panda-cms 0.7.0

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

@@ -0,0 +1,177 @@
+export const EDITOR_JS_RESOURCES = [
+  "https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.28.2",
+  "https://cdn.jsdelivr.net/npm/@editorjs/paragraph@2.11.3",
+  "https://cdn.jsdelivr.net/npm/@editorjs/header@2.8.1",
+  "https://cdn.jsdelivr.net/npm/@editorjs/nested-list@1.4.2",
+  "https://cdn.jsdelivr.net/npm/@editorjs/quote@2.6.0",
+  "https://cdn.jsdelivr.net/npm/@editorjs/simple-image@1.6.0",
+  "https://cdn.jsdelivr.net/npm/@editorjs/table@2.3.0",
+  "https://cdn.jsdelivr.net/npm/@editorjs/embed@2.7.0"
+]
+
+// Allow applications to add their own resources
+if (window.PANDA_CMS_EDITOR_JS_RESOURCES) {
+  EDITOR_JS_RESOURCES.push(...window.PANDA_CMS_EDITOR_JS_RESOURCES)
+}
+
+export const EDITOR_JS_CSS = `
+/* Editor layout styles */
+.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;
+}
+
+/* Ensure proper nesting for content styles to apply */
+.codex-editor .codex-editor__redactor {
+  position: relative;
+}
+
+.codex-editor .codex-editor__redactor .ce-block {
+  position: relative;
+}
+
+.codex-editor .codex-editor__redactor .ce-block .ce-block__content {
+  position: relative;
+}
+
+/* Remove default editor styles that might interfere */
+.ce-header {
+  padding: 0 !important;
+  margin: 0 !important;
+  background: none !important;
+  border: none !important;
+}
+
+.ce-paragraph {
+  padding: 0 !important;
+  margin: 0 !important;
+  line-height: inherit !important;
+}
+
+/* Lists */
+.ce-block--list ul,
+.ce-block--list ol {
+  margin: 0;
+  padding-left: inherit;
+}
+
+.ce-block--list li {
+  margin: 0;
+  padding-left: inherit;
+}
+
+/* Ensure editor toolbar is above content */
+.ce-toolbar {
+  z-index: 100;
+}
+
+/* Style the block selection */
+.ce-block--selected {
+  background-color: rgba(16, 64, 113, 0.05);
+  border-radius: 4px;
+}`
+
+export const getEditorConfig = (elementId, previousData, doc = document) => {
+  // Validate holder element exists
+  const holder = doc.getElementById(elementId)
+  if (!holder) {
+    throw new Error(`Editor holder element ${elementId} not found`)
+  }
+
+  const config = {
+    holder: elementId,
+    data: previousData || {},
+    placeholder: 'Click the + button to add content...',
+    inlineToolbar: true,
+    tools: {
+      header: {
+        class: window.Header,
+        inlineToolbar: true,
+        config: {
+          placeholder: 'Enter a header',
+          levels: [1, 2, 3, 4, 5, 6],
+          defaultLevel: 2
+        }
+      },
+      paragraph: {
+        class: window.Paragraph,
+        inlineToolbar: true,
+        config: {
+          placeholder: 'Start writing or press Tab to add content...'
+        }
+      },
+      list: {
+        class: window.NestedList,
+        inlineToolbar: true,
+        config: {
+          defaultStyle: 'unordered'
+        }
+      },
+      quote: {
+        class: window.Quote,
+        inlineToolbar: true,
+        config: {
+          quotePlaceholder: 'Enter a quote',
+          captionPlaceholder: 'Quote\'s author'
+        }
+      },
+      table: {
+        class: window.Table,
+        inlineToolbar: true,
+        config: {
+          rows: 2,
+          cols: 2
+        }
+      },
+      image: {
+        class: window.SimpleImage,
+        inlineToolbar: true,
+        config: {
+          placeholder: 'Paste an image URL...'
+        }
+      },
+      embed: {
+        class: window.Embed,
+        inlineToolbar: true,
+        config: {
+          services: {
+            youtube: true,
+            vimeo: true
+          }
+        }
+      }
+    }
+  }
+
+  // Remove any undefined tools from the config
+  config.tools = Object.fromEntries(
+    Object.entries(config.tools)
+      .filter(([_, value]) => value?.class !== undefined)
+      .map(([name, tool]) => {
+        if (!tool.class) {
+          throw new Error(`Tool ${name} has no class defined`)
+        }
+        return [name, tool]
+      })
+  )
+
+  // Allow applications to customize the config through Ruby
+  if (window.PANDA_CMS_EDITOR_JS_CONFIG) {
+    Object.assign(config.tools, window.PANDA_CMS_EDITOR_JS_CONFIG)
+  }
+
+  // Allow applications to customize the config through JavaScript
+  if (typeof window.customizeEditorJS === 'function') {
+    window.customizeEditorJS(config)
+  }
+
+  return config
+}

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

@@ -0,0 +1,285 @@
+import { ResourceLoader } from "panda/cms/editor/resource_loader"
+import { EDITOR_JS_RESOURCES, EDITOR_JS_CSS, getEditorConfig } from "panda/cms/editor/editor_js_config"
+import { CSSExtractor } from "panda/cms/editor/css_extractor"
+
+export class EditorJSInitializer {
+  constructor(document, withinIFrame = false) {
+    this.document = document
+    this.withinIFrame = withinIFrame
+  }
+
+  /**
+   * Initializes the EditorJS instance for a given element.
+   * This method loads necessary resources and returns the JavaScript code for initializing the editor.
+   *
+   * @param {HTMLElement} element - The DOM element to initialize the editor on
+   * @param {Object} initialData - The initial data for the editor
+   * @param {string} editorId - The ID to use for the editor holder
+   * @returns {Promise<EditorJS>} A promise that resolves to the editor instance
+   */
+  async initialize(element, initialData = {}, editorId = null) {
+    await this.loadResources()
+    const result = await this.initializeEditor(element, initialData, editorId)
+    return result
+  }
+
+  /**
+   * Gets the application's styles from its configured stylesheet
+   * @returns {Promise<string>} The extracted CSS rules
+   */
+  async getApplicationStyles() {
+    try {
+      // Get the configured stylesheet URL, defaulting to Tailwind Rails default
+      const stylesheetUrl = window.PANDA_CMS_CONFIG?.stylesheetUrl || '/assets/application.tailwind.css'
+
+      // Fetch the CSS content
+      const response = await fetch(stylesheetUrl)
+      const css = await response.text()
+      return CSSExtractor.getEditorStyles(css)
+    } catch (error) {
+      return ''
+    }
+  }
+
+  /**
+   * Loads the necessary resources for the EditorJS instance.
+   * This method fetches the required scripts and stylesheets and embeds them into the document.
+   */
+  async loadResources() {
+    try {
+      // First load EditorJS core
+      const editorCore = EDITOR_JS_RESOURCES[0]
+      await ResourceLoader.loadScript(this.document, this.document.head, editorCore)
+
+      // Then load all tools in parallel
+      const toolLoads = EDITOR_JS_RESOURCES.slice(1).map(async (resource) => {
+        await ResourceLoader.loadScript(this.document, this.document.head, resource)
+      })
+
+      // Load CSS directly
+      await ResourceLoader.embedCSS(this.document, this.document.head, EDITOR_JS_CSS)
+
+      // Wait for all resources to load
+      await Promise.all(toolLoads)
+
+      // Wait for EditorJS to be available
+      await this.waitForEditorJS()
+    } catch (error) {
+      throw error
+    }
+  }
+
+  async initializeEditor(element, initialData = {}, editorId = null) {
+    // Generate a consistent holder ID if not provided
+    const holderId = editorId || `editor-${element.id || Math.random().toString(36).substr(2, 9)}`
+
+    // Create or find the holder element in the correct document context
+    let holderElement = this.document.getElementById(holderId)
+    if (!holderElement) {
+      // Create the holder element in the correct document context
+      holderElement = this.document.createElement('div')
+      holderElement.id = holderId
+      holderElement.className = 'editor-js-holder codex-editor'
+
+      // Append to the element and force a reflow
+      element.appendChild(holderElement)
+      void holderElement.offsetHeight // Force a reflow
+    }
+
+    // Verify the holder element exists in the correct document context
+    const verifyHolder = this.document.getElementById(holderId)
+    if (!verifyHolder) {
+      throw new Error(`Failed to create editor holder element ${holderId}`)
+    }
+
+    // Clear any existing content in the holder
+    holderElement.innerHTML = ''
+
+    // Add source to initial data
+    if (initialData && !initialData.source) {
+      initialData.source = "editorJS"
+    }
+
+    // Get the base config but pass our document context
+    const config = getEditorConfig(holderId, initialData, this.document)
+
+    // Override specific settings for iframe context
+    const editorConfig = {
+      ...config,
+      holder: holderElement, // Use element reference instead of ID
+      minHeight: 1, // Prevent auto-height issues in iframe
+      autofocus: false, // Prevent focus issues
+      logLevel: 'ERROR', // Only show errors
+      tools: {
+        ...config.tools,
+        // Ensure tools use the correct window context
+        paragraph: { ...config.tools.paragraph, class: this.document.defaultView.Paragraph },
+        header: { ...config.tools.header, class: this.document.defaultView.Header },
+        list: { ...config.tools.list, class: this.document.defaultView.NestedList },
+        quote: { ...config.tools.quote, class: this.document.defaultView.Quote },
+        table: { ...config.tools.table, class: this.document.defaultView.Table },
+        image: { ...config.tools.image, class: this.document.defaultView.SimpleImage },
+        embed: { ...config.tools.embed, class: this.document.defaultView.Embed }
+      }
+    }
+
+    // Create editor instance directly
+    const editor = new this.document.defaultView.EditorJS({
+      ...editorConfig,
+      onReady: () => {
+        // Store the editor instance globally for testing
+        if (this.withinIFrame) {
+          this.document.defaultView.editor = editor
+        } else {
+          window.editor = editor
+        }
+
+        // Mark editor as ready
+        editor.isReady = true
+
+        // Force redraw of toolbar and blocks
+        setTimeout(async () => {
+          try {
+            const toolbar = holderElement.querySelector('.ce-toolbar')
+            const blockWrapper = holderElement.querySelector('.ce-block')
+
+            if (!toolbar || !blockWrapper) {
+              // Clear and insert a new block to force UI update
+              await editor.blocks.clear()
+              await editor.blocks.insert('paragraph')
+
+              // Force a redraw by toggling display
+              holderElement.style.display = 'none'
+              void holderElement.offsetHeight
+              holderElement.style.display = ''
+            }
+
+            // Call the ready hook if it exists
+            if (typeof window.onEditorJSReady === 'function') {
+              window.onEditorJSReady(editor)
+            }
+          } catch (error) {
+            console.error('Error during editor redraw:', error)
+          }
+        }, 100)
+      },
+      onChange: async (api, event) => {
+        try {
+          // Save the current editor data
+          const outputData = await api.saver.save()
+          outputData.source = "editorJS"
+          const contentJson = JSON.stringify(outputData)
+
+          if (!this.withinIFrame) {
+            // For form-based editors, update the hidden input
+            const form = element.closest('[data-controller="editor-form"]')
+            if (form) {
+              const hiddenInput = form.querySelector('[data-editor-form-target="hiddenField"]')
+              if (hiddenInput) {
+                hiddenInput.value = contentJson
+                hiddenInput.dataset.initialContent = contentJson
+                hiddenInput.dispatchEvent(new Event('change', { bubbles: true }))
+              }
+            }
+          } else {
+            // For iframe-based editors, update the element's data attribute
+            element.setAttribute('data-content', contentJson)
+            element.dispatchEvent(new Event('change', { bubbles: true }))
+
+            // Get the save button from parent window
+            const saveButton = parent.document.getElementById('saveEditableButton')
+            if (saveButton) {
+              // Store the current content on the save button for later use
+              saveButton.dataset.pendingContent = contentJson
+
+              // Add click handler if not already added
+              if (!saveButton.hasAttribute('data-handler-attached')) {
+                saveButton.setAttribute('data-handler-attached', 'true')
+                saveButton.addEventListener('click', async () => {
+                  try {
+                    const pageId = element.getAttribute("data-editable-page-id")
+                    const blockContentId = element.getAttribute("data-editable-block-content-id")
+                    const pendingContent = JSON.parse(saveButton.dataset.pendingContent || '{}')
+
+                    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: pendingContent })
+                    })
+
+                    if (!response.ok) {
+                      throw new Error('Save failed')
+                    }
+
+                    // Clear pending content after successful save
+                    delete saveButton.dataset.pendingContent
+                  } catch (error) {
+                    console.error('Error saving content:', error)
+                  }
+                })
+              }
+            }
+          }
+        } catch (error) {
+          console.error('Error in onChange handler:', error)
+        }
+      }
+    })
+
+    // Store editor instance on the holder element to maintain reference
+    holderElement.editorInstance = editor
+
+    if (!this.withinIFrame) {
+      // Store the editor instance on the controller element for potential future reference
+      const form = element.closest('[data-controller="editor-form"]')
+      if (form) {
+        form.editorInstance = editor
+      }
+    } else {
+      // For iframe editors, store the instance on the element itself
+      element.editorInstance = editor
+    }
+
+    // Return a promise that resolves when the editor is ready
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        reject(new Error('Editor initialization timed out'))
+      }, 30000)
+
+      const checkReady = () => {
+        if (editor.isReady) {
+          clearTimeout(timeout)
+          resolve(editor)
+        } else {
+          setTimeout(checkReady, 100)
+        }
+      }
+      checkReady()
+    })
+  }
+
+  /**
+   * Wait for EditorJS core to be available in window
+   */
+  async waitForEditorJS() {
+    let attempts = 0
+    const maxAttempts = 30 // 3 seconds with 100ms intervals
+
+    await new Promise((resolve, reject) => {
+      const check = () => {
+        attempts++
+        if (window.EditorJS) {
+          resolve()
+        } else if (attempts >= maxAttempts) {
+          reject(new Error('EditorJS core failed to load'))
+        } else {
+          setTimeout(check, 100)
+        }
+      }
+      check()
+    })
+  }
+}

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

@@ -0,0 +1,110 @@
+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.innerHTML :
+      this.element.innerText
+
+    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(() => {
+        // Show success message in parent window
+        parent.document.getElementById("successMessage").classList.remove("hidden")
+        setTimeout(() => {
+          parent.document.getElementById("successMessage").classList.add("hidden")
+        }, 3000)
+        // Show visual feedback in the editor
+        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,115 @@
+export class ResourceLoader {
+  static loadedResources = new Set()
+
+  /**
+   * Embeds CSS styles into the document head.
+   *
+   * @param {Document} frameDocument - The document object to create elements in
+   * @param {HTMLElement} head - The head element to append styles to
+   * @param {string} css - The CSS styles to embed
+   * @returns {Promise} A promise that resolves when the styles are embedded
+   */
+  static embedCSS(frameDocument, head, css) {
+    const cssHash = this.hashString(css)
+    if (this.loadedResources.has(`css:${cssHash}`)) {
+      console.debug("[Panda CMS] CSS already embedded, skipping")
+      return Promise.resolve()
+    }
+
+    return new Promise((resolve) => {
+      const style = frameDocument.createElement("style")
+      style.textContent = css
+      head.append(style)
+      this.loadedResources.add(`css:${cssHash}`)
+      resolve(style)
+      console.debug("[Panda CMS] Embedded CSS styles")
+    })
+  }
+
+  /**
+   * Loads a script from a URL and appends it to the document head.
+   *
+   * @param {Document} frameDocument - The document object to create elements in
+   * @param {HTMLElement} head - The head element to append the script to
+   * @param {string} src - The URL of the script to load
+   * @returns {Promise} A promise that resolves when the script is loaded
+   */
+  static loadScript(frameDocument, head, src) {
+    if (this.loadedResources.has(`script:${src}`)) {
+      console.debug(`[Panda CMS] Script already loaded: ${src}, skipping`)
+      return Promise.resolve()
+    }
+
+    return new Promise((resolve, reject) => {
+      const script = frameDocument.createElement("script")
+      script.src = src
+      script.onload = () => {
+        this.loadedResources.add(`script:${src}`)
+        resolve(script)
+        console.debug(`[Panda CMS] Script loaded: ${src}`)
+      }
+      script.onerror = () => reject(new Error(`[Panda CMS] Script load error for ${src}`))
+      head.append(script)
+    })
+  }
+
+  static importScript(frameDocument, head, module, src) {
+    const key = `module:${module}:${src}`
+    if (this.loadedResources.has(key)) {
+      console.debug(`[Panda CMS] Module already imported: ${src}, skipping`)
+      return Promise.resolve()
+    }
+
+    return new Promise((resolve, reject) => {
+      const script = frameDocument.createElement("script")
+      script.type = "module"
+      script.textContent = `import ${module} from "${src}"`
+      head.append(script)
+
+      script.onload = () => {
+        this.loadedResources.add(key)
+        console.debug(`[Panda CMS] Module script loaded: ${src}`)
+        resolve(script)
+      }
+      script.onerror = () => reject(new Error(`[Panda CMS] Module script load error for ${src}`))
+    })
+  }
+
+  static loadStylesheet(frameDocument, head, href) {
+    if (this.loadedResources.has(`stylesheet:${href}`)) {
+      console.debug(`[Panda CMS] Stylesheet already loaded: ${href}, skipping`)
+      return Promise.resolve()
+    }
+
+    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"
+        }
+        this.loadedResources.add(`stylesheet:${href}`)
+        console.debug(`[Panda CMS] Stylesheet loaded: ${href}`)
+        resolve(link)
+      }
+      link.onerror = () => reject(new Error(`[Panda CMS] Stylesheet load error for ${href}`))
+    })
+  }
+
+  /**
+   * Simple string hashing function for tracking embedded CSS
+   */
+  static hashString(str) {
+    let hash = 0
+    for (let i = 0; i < str.length; i++) {
+      const char = str.charCodeAt(i)
+      hash = ((hash << 5) - hash) + char
+      hash = hash & hash // Convert to 32bit integer
+    }
+    return hash.toString(36)
+  }
+}