panda-cms 0.7.4 → 0.8.0

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

@@ -1,334 +0,0 @@
-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)
-
-      // Wait for EditorJS to be available
-      await this.waitForEditorJS()
-
-      // Load CSS directly
-      await ResourceLoader.embedCSS(this.document, this.document.head, EDITOR_JS_CSS)
-
-      // Then load all tools sequentially to ensure proper initialization order
-      for (const resource of EDITOR_JS_RESOURCES.slice(1)) {
-        try {
-          await ResourceLoader.loadScript(this.document, this.document.head, resource)
-          // Extract tool name from resource URL
-          const toolName = resource.split('/').pop().split('@')[0]
-          // Wait for tool to be initialized
-          const toolClass = await this.waitForTool(toolName)
-
-          // If this is the nested-list tool, also make it available as 'list'
-          if (toolName === 'nested-list') {
-            const win = this.document.defaultView || window
-            win.List = toolClass
-          }
-
-          console.debug(`[Panda CMS] Successfully loaded tool: ${toolName}`)
-        } catch (error) {
-          console.error(`[Panda CMS] Failed to load tool: ${resource}`, error)
-          throw error
-        }
-      }
-
-      console.debug('[Panda CMS] All tools successfully loaded and verified')
-    } catch (error) {
-      console.error('[Panda CMS] Error loading Editor.js resources:', error)
-      throw error
-    }
-  }
-
-  async waitForEditorJS(timeout = 10000) {
-    console.debug('[Panda CMS] Waiting for EditorJS core...')
-    const start = Date.now()
-    while (Date.now() - start < timeout) {
-      if (typeof this.document.defaultView.EditorJS === 'function') {
-        console.debug('[Panda CMS] EditorJS core is ready')
-        return
-      }
-      await new Promise(resolve => setTimeout(resolve, 100))
-    }
-    throw new Error('[Panda CMS] Timeout waiting for EditorJS')
-  }
-
-  /**
-   * Wait for a specific tool to be available in window context
-   */
-  async waitForTool(toolName, timeout = 10000) {
-    if (!toolName) {
-      console.error('[Panda CMS] Invalid tool name provided')
-      return null
-    }
-
-    // Clean up tool name to handle npm package format
-    const cleanToolName = toolName.split('/').pop().replace('@', '')
-
-    const toolMapping = {
-      'paragraph': 'Paragraph',
-      'header': 'Header',
-      'nested-list': 'NestedList',
-      'list': 'NestedList',
-      'quote': 'Quote',
-      'simple-image': 'SimpleImage',
-      'table': 'Table',
-      'embed': 'Embed'
-    }
-
-    const globalToolName = toolMapping[cleanToolName] || cleanToolName
-    const start = Date.now()
-
-    while (Date.now() - start < timeout) {
-      const win = this.document.defaultView || window
-      if (win[globalToolName] && typeof win[globalToolName] === 'function') {
-        // If this is the NestedList tool, make it available as both list and nested-list
-        if (globalToolName === 'NestedList') {
-          win.List = win[globalToolName]
-        }
-        console.debug(`[Panda CMS] Successfully loaded tool: ${globalToolName}`)
-        return win[globalToolName]
-      }
-      await new Promise(resolve => setTimeout(resolve, 100))
-    }
-    throw new Error(`[Panda CMS] Timeout waiting for tool: ${cleanToolName} (${globalToolName})`)
-  }
-
-  async initializeEditor(element, initialData = {}, editorId = null) {
-    try {
-      // Wait for EditorJS core to be available with increased timeout
-      await this.waitForEditorJS(15000)
-
-      // Get the window context (either iframe or parent)
-      const win = this.document.defaultView || window
-
-      // Create a unique ID for this editor instance if not provided
-      const uniqueId = editorId || `editor-${Math.random().toString(36).substring(2)}`
-
-      // Check if editor already exists
-      const existingEditor = element.querySelector('.codex-editor')
-      if (existingEditor) {
-        console.debug('[Panda CMS] Editor already exists, cleaning up...')
-        existingEditor.remove()
-      }
-
-      // Create a holder div for the editor
-      const holder = this.document.createElement("div")
-      holder.id = uniqueId
-      holder.classList.add("editor-js-holder")
-      element.appendChild(holder)
-
-      // Process initial data to handle list items and other content
-      let processedData = initialData
-      if (initialData.blocks) {
-        processedData = {
-          ...initialData,
-          blocks: initialData.blocks.map(block => {
-            if (block.type === 'list' && block.data && Array.isArray(block.data.items)) {
-              return {
-                ...block,
-                data: {
-                  ...block.data,
-                  items: block.data.items.map(item => {
-                    // Handle both string items and object items
-                    if (typeof item === 'string') {
-                      return {
-                        content: item,
-                        items: []
-                      }
-                    } else if (item.content) {
-                      return {
-                        content: item.content,
-                        items: Array.isArray(item.items) ? item.items : []
-                      }
-                    } else {
-                      return {
-                        content: String(item),
-                        items: []
-                      }
-                    }
-                  })
-                }
-              }
-            }
-            return block
-          })
-        }
-      }
-
-      console.debug('[Panda CMS] Processed initial data:', processedData)
-
-      // Create editor configuration
-      const config = {
-        holder: holder,
-        data: processedData,
-        placeholder: 'Click to start writing...',
-        tools: {
-          paragraph: {
-            class: win.Paragraph,
-            inlineToolbar: true,
-            config: {
-              preserveBlank: true,
-              placeholder: 'Click to start writing...'
-            }
-          },
-          header: {
-            class: win.Header,
-            inlineToolbar: true,
-            config: {
-              placeholder: 'Enter a header',
-              levels: [1, 2, 3, 4, 5, 6],
-              defaultLevel: 2
-            }
-          },
-          'list': {  // Register as list instead of nested-list
-            class: win.NestedList,
-            inlineToolbar: true,
-            config: {
-              defaultStyle: 'unordered',
-              enableLineBreaks: true
-            }
-          },
-          quote: {
-            class: win.Quote,
-            inlineToolbar: true,
-            config: {
-              quotePlaceholder: 'Enter a quote',
-              captionPlaceholder: 'Quote\'s author'
-            }
-          }
-        },
-        onChange: (api, event) => {
-          console.debug('[Panda CMS] Editor content changed:', { api, event })
-          // Save content to data attributes
-          api.saver.save().then((outputData) => {
-            const jsonString = JSON.stringify(outputData)
-            element.dataset.editablePreviousData = btoa(jsonString)
-            element.dataset.editableContent = jsonString
-            element.dataset.editableInitialized = 'true'
-          })
-        },
-        onReady: () => {
-          console.debug('[Panda CMS] Editor ready with data:', processedData)
-          element.dataset.editableInitialized = 'true'
-          holder.editorInstance = editor
-        },
-        onError: (error) => {
-          console.error('[Panda CMS] Editor error:', error)
-          element.dataset.editableInitialized = 'false'
-          throw error
-        }
-      }
-
-      // Remove any undefined tools from the config
-      config.tools = Object.fromEntries(
-        Object.entries(config.tools)
-          .filter(([_, value]) => value?.class !== undefined)
-      )
-
-      console.debug('[Panda CMS] Creating editor with config:', config)
-
-      // Create editor instance with extended timeout
-      return new Promise((resolve, reject) => {
-        try {
-          // Add timeout for initialization
-          const timeoutId = setTimeout(() => {
-            reject(new Error('Editor initialization timeout'))
-          }, 15000) // Increased to 15 seconds
-
-          // Create editor instance with onReady callback
-          const editor = new win.EditorJS({
-            ...config,
-            onReady: () => {
-              console.debug('[Panda CMS] Editor ready with data:', processedData)
-              clearTimeout(timeoutId)
-              holder.editorInstance = editor
-              element.dataset.editableInitialized = 'true'
-              resolve(editor)
-            },
-            onChange: (api, event) => {
-              console.debug('[Panda CMS] Editor content changed:', { api, event })
-              // Save content to data attributes
-              api.saver.save().then((outputData) => {
-                const jsonString = JSON.stringify(outputData)
-                element.dataset.editablePreviousData = btoa(jsonString)
-                element.dataset.editableContent = jsonString
-              })
-            },
-            onError: (error) => {
-              console.error('[Panda CMS] Editor error:', error)
-              element.dataset.editableInitialized = 'false'
-              clearTimeout(timeoutId)
-              reject(error)
-            }
-          })
-
-          // Add error handler
-          editor.isReady
-            .then(() => {
-              console.debug('[Panda CMS] Editor is ready')
-              element.dataset.editableInitialized = 'true'
-            })
-            .catch((error) => {
-              console.error('[Panda CMS] Editor failed to initialize:', error)
-              element.dataset.editableInitialized = 'false'
-              clearTimeout(timeoutId)
-              reject(error)
-            })
-        } catch (error) {
-          element.dataset.editableInitialized = 'false'
-          reject(error)
-        }
-      })
-    } catch (error) {
-      console.error('[Panda CMS] Error initializing editor:', error)
-      throw error
-    }
-  }
-}

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

@@ -1,110 +0,0 @@
-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

@@ -1,204 +0,0 @@
-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)
-  }
-
-  /**
-   * Load a script into the document
-   * @param {Document} doc - The document to load the script into
-   * @param {HTMLElement} target - The element to append the script to
-   * @param {string} url - The URL of the script to load
-   * @returns {Promise<void>}
-   */
-  static async loadScript(doc, target, url) {
-    return new ResourceLoader().loadScript(doc, target, url)
-  }
-
-  /**
-   * Embed CSS into the document
-   * @param {Document} doc - The document to embed the CSS into
-   * @param {HTMLElement} target - The element to append the style to
-   * @param {string} css - The CSS to embed
-   * @returns {Promise<void>}
-   */
-  static async embedCSS(doc, target, css) {
-    return new ResourceLoader().embedCSS(doc, target, css)
-  }
-
-  /**
-   * Instance method to load a script
-   */
-  async loadScript(doc, target, url) {
-    try {
-      // Check if script is already loaded
-      const existingScript = doc.querySelector(`script[src="${url}"]`)
-      if (existingScript) {
-        console.debug(`[Panda CMS] Script already loaded: ${url}, skipping`)
-        return
-      }
-
-      // Create and configure script element
-      const script = doc.createElement("script")
-      script.type = "text/javascript"
-      script.src = url
-      script.async = true
-
-      // Create a promise to track loading
-      const loadPromise = new Promise((resolve, reject) => {
-        script.onload = () => {
-          console.debug(`[Panda CMS] Script loaded: ${url}`)
-          resolve()
-        }
-        script.onerror = (error) => {
-          console.error(`[Panda CMS] Script failed to load: ${url}`, error)
-          reject(error)
-        }
-      })
-
-      // Add script to document
-      target.appendChild(script)
-
-      // Wait for script to load
-      await loadPromise
-    } catch (error) {
-      console.error(`[Panda CMS] Error loading script ${url}:`, error)
-      throw error
-    }
-  }
-
-  /**
-   * Instance method to embed CSS
-   */
-  async embedCSS(doc, target, css) {
-    try {
-      // Check if styles are already embedded
-      const existingStyle = doc.querySelector('style[data-panda-cms-styles]')
-      if (existingStyle) {
-        console.debug(`[Panda CMS] CSS already embedded, skipping`)
-        return
-      }
-
-      // Create and configure style element
-      const style = doc.createElement('style')
-      style.setAttribute('data-panda-cms-styles', 'true')
-      style.textContent = css
-
-      // Add style to document
-      target.appendChild(style)
-      console.debug(`[Panda CMS] Embedded CSS styles`)
-    } catch (error) {
-      console.error('[Panda CMS] Error embedding CSS:', error)
-      throw error
-    }
-  }
-}