panda-cms 0.7.4 → 0.8.0

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

@@ -1,80 +0,0 @@
-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)
-  }
-}

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

@@ -1,306 +0,0 @@
-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 = `
-  .codex-editor {
-    position: relative;
-  }
-  .codex-editor::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 65px;
-    margin-right: 5px;
-    background-color: #f9fafb;
-    border-right: 2px dashed #e5e7eb;
-    z-index: 0;
-  }
-  .ce-block {
-    padding-left: 70px;
-    position: relative;
-    min-height: 40px;
-    margin: 0;
-    padding-bottom: 1em;
-  }
-  .ce-block__content {
-    position: relative;
-    max-width: none;
-    margin: 0;
-  }
-  .ce-paragraph {
-    padding: 0;
-    line-height: 1.6;
-    min-height: 1.6em;
-    margin: 0;
-  }
-  /* Override inherited heading styles */
-  .ce-header h1,
-  .ce-header h2,
-  .ce-header h3,
-  .ce-header h4,
-  .ce-header h5,
-  .ce-header h6 {
-    margin: 0;
-    padding: 0;
-    line-height: 1.6;
-    font-weight: 600;
-  }
-  .ce-header h1 { font-size: 2em; }
-  .ce-header h2 { font-size: 1.5em; }
-  .ce-header h3 { font-size: 1.17em; }
-  .ce-header h4 { font-size: 1em; }
-  .ce-header h5 { font-size: 0.83em; }
-  .ce-header h6 { font-size: 0.67em; }
-
-  .codex-editor__redactor {
-    padding-bottom: 150px !important;
-    min-height: 100px !important;
-  }
-  /* Base toolbar styles */
-  .ce-toolbar {
-    left: 0 !important;
-    right: auto !important;
-    background: none !important;
-    position: absolute !important;
-    width: 65px !important;
-    height: 40px !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: flex-start !important;
-    padding: 0 !important;
-    margin-left: -70px !important;
-    margin-top: -5px !important;
-    opacity: 1 !important;
-    visibility: visible !important;
-    pointer-events: all !important;
-    z-index: 2 !important;
-  }
-  /* Ensure toolbar is visible for all blocks */
-  .ce-block .ce-toolbar {
-    display: flex !important;
-    opacity: 1 !important;
-    visibility: visible !important;
-  }
-  .ce-toolbar__content {
-    max-width: none;
-    left: 70px !important;
-    display: flex !important;
-    position: relative !important;
-  }
-  .ce-toolbar__actions {
-    position: relative !important;
-    left: 5px !important;
-    opacity: 1 !important;
-    visibility: visible !important;
-    background: transparent !important;
-    z-index: 2;
-    display: flex !important;
-    align-items: center !important;
-    gap: 5px !important;
-    height: 40px !important;
-    padding: 0 !important;
-  }
-  .ce-toolbar__plus {
-    position: relative !important;
-    left: 0px !important;
-    opacity: 1 !important;
-    visibility: visible !important;
-    background: transparent !important;
-    border: none !important;
-    z-index: 2;
-    display: block !important;
-  }
-  .ce-toolbar__settings-btn {
-    position: relative !important;
-    left: -10px !important;
-    opacity: 1 !important;
-    visibility: visible !important;
-    background: transparent !important;
-    border: none !important;
-    z-index: 2;
-    display: block !important;
-  }
-  /* Style the search input */
-  .ce-popover__search {
-    padding-left: 3px !important;
-  }
-  .ce-popover__search input {
-    outline: none !important;
-    box-shadow: none !important;
-    border: none !important;
-  }
-  .ce-popover__search input::placeholder {
-    content: 'Search';
-  }
-  /* Ensure popups still work */
-  .ce-popover {
-    z-index: 4;
-  }
-  .ce-inline-toolbar {
-    z-index: 3;
-  }
-  /* Override any hiding behavior */
-  .ce-toolbar--closed,
-  .ce-toolbar--opened,
-  .ce-toolbar--showed {
-    display: flex !important;
-    opacity: 1 !important;
-    visibility: visible !important;
-  }
-  /* Force toolbar to show on every block */
-  .ce-block:not(:focus):not(:hover) .ce-toolbar,
-  .ce-block--selected .ce-toolbar,
-  .ce-block--focused .ce-toolbar,
-  .ce-block--hover .ce-toolbar {
-    opacity: 1 !important;
-    visibility: visible !important;
-    display: flex !important;
-  }
-
-  /* Ensure last block has bottom spacing */
-  .ce-block:last-child {
-    padding-bottom: 2em;
-  }
-
-  /* Reset all block type margins */
-  .ce-header,
-  .ce-paragraph,
-  .ce-quote,
-  .ce-list {
-    margin: 0 !important;
-    padding: 0 !important;
-  }
-`
-
-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`)
-  }
-
-  // Get the correct window context
-  const win = doc.defaultView || window
-
-  // Ensure we have a clean holder element
-  holder.innerHTML = ""
-
-  const config = {
-    holder: elementId,
-    data: previousData || {},
-    placeholder: 'Click the + button to add content...',
-    inlineToolbar: true,
-    onChange: () => {
-      // Ensure the editor is properly initialized before handling changes
-      if (holder && holder.querySelector('.codex-editor')) {
-        const event = new Event('editor:change', { bubbles: true })
-        holder.dispatchEvent(event)
-      }
-    },
-    i18n: {
-      toolbar: {
-        filter: {
-          placeholder: 'Search'
-        }
-      }
-    },
-    tools: {
-      header: {
-        class: win.Header,
-        inlineToolbar: true,
-        config: {
-          placeholder: 'Enter a header',
-          levels: [1, 2, 3, 4, 5, 6],
-          defaultLevel: 2
-        }
-      },
-      paragraph: {
-        class: win.Paragraph,
-        inlineToolbar: true,
-        config: {
-          placeholder: 'Start writing or press Tab to add content...'
-        }
-      },
-      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'
-        }
-      },
-      image: {
-        class: win.SimpleImage,
-        inlineToolbar: true,
-        config: {
-          placeholder: 'Paste an image URL...'
-        }
-      },
-      table: {
-        class: win.Table,
-        inlineToolbar: true,
-        config: {
-          rows: 2,
-          cols: 2
-        }
-      },
-      embed: {
-        class: win.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
-}