maglevcms 3.0.0.beta2 → 3.0.0

data/app/assets/config/maglev_manifest.js

@@ -1,6 +1,7 @@
-//= link_directory ../stylesheets/maglev .css
+//= link_directory ../builds/maglev .css
+//= link maglev/application.css
 
-//= link_tree ../../../vendor/javascript .js
+//= link_tree ../../../vendor/javascript/maglev .js
 //= link_tree ../../components .js
 //= link_tree ../javascripts/maglev .js
 

data/app/assets/javascripts/maglev/client/dom-operations.js

@@ -1,4 +1,4 @@
-import { debounce, postMessageToEditor } from 'maglev-client/utils'
+import { debounce, log, postMessageToEditor } from 'maglev-client/utils'
 import runScripts from 'maglev-client/run-scripts'
 
 const parentDocument = window.parent.document
@@ -79,7 +79,7 @@ const removeSection = (event) => {
 
 const checkSectionLockVersion = (event) => {
   const { sectionId, lockVersion } = event.detail
-  console.log('[DOM Operations] checkSectionLockVersion', event)
+  log('[DOM Operations] checkSectionLockVersion', event)
   const section = previewDocument.querySelector(`[data-maglev-section-id='${sectionId}']`)
   const localLockVersion = section?.getAttribute('data-maglev-section-lock-version')
   if (lockVersion !== localLockVersion && lockVersion !== '') {
@@ -180,7 +180,7 @@ const updateStyle = async (event) => {
 // }
 
 const updateTextSetting = (sourceId, change) => {
-  console.log('[DOM Operations] updateTextSetting', sourceId, change)
+  log('[DOM Operations] updateTextSetting', sourceId, change)
   const selector = `[data-maglev-id='${sourceId}.${change.settingId}']`
   const settings = previewDocument.querySelectorAll(selector)
   settings.forEach(($el) => ($el.innerHTML = change.value))
@@ -188,11 +188,11 @@ const updateTextSetting = (sourceId, change) => {
 }
 
 const updateLinkSetting = (sourceId, change) => {
-  console.log('updateLinkSetting', sourceId, change)
+  log('updateLinkSetting', sourceId, change)
 }
 
 const updatePreviewDocument = async ({ sectionId, insertAt = undefined, scrollToSection = false }) => {
-  console.log('[DOM Operations] updatePreviewDocument', sectionId, insertAt, scrollToSection)
+  log('[DOM Operations] updatePreviewDocument', sectionId, insertAt, scrollToSection)
 
   const doc = await getUpdatedDoc({ section_id: sectionId })
 

data/app/assets/javascripts/maglev/client/iframe-decorator.js

@@ -3,6 +3,7 @@ import { isBlank, postMessageToEditor } from 'maglev-client/utils'
 // keep track of the current hovered section
 let listeners = []
 let hoveredSectionId = null
+let hoveredSettingKey = null
 let lastCursorPosition = { x: 0, y: 0 }
 
 export const start = (config) => {
@@ -172,6 +173,7 @@ const getMinTop = (previewDocument, currentSectionId, stickySectionIds) => {
 const onSectionLeft = () => {
   postMessageToEditor('section:leave')
   hoveredSectionId = null
+  hoveredSettingKey = null
 }
 
 const onBlockHovered = (el) => {
@@ -200,10 +202,32 @@ const onSettingHovered = (el) => {
     window.getComputedStyle(el).borderRadius === '0px'
   )
     el.style.borderRadius = '2px'
+
+  const fragments = el.dataset.maglevId.split('.')
+  const section = el.closest('[data-maglev-section-id]')
+  const sectionId = section?.dataset?.maglevSectionId
+  const sectionBlock = el.closest('[data-maglev-block-id]')
+  const sectionBlockId = sectionBlock?.dataset?.maglevBlockId
+  const settingId = fragments[1]
+
+  if (!sectionId || !settingId) return
+
+  const key = `${sectionId}:${sectionBlockId || 'none'}:${settingId}`
+  if (key === hoveredSettingKey) return
+
+  hoveredSettingKey = key
+
+  const prefix = sectionBlockId ? 'sectionBlock' : 'section'
+  postMessageToEditor(`${prefix}:setting:hovered`, {
+    sectionId,
+    sectionBlockId,
+    settingId,
+  })
 }
 
 const onSettingLeft = (el) => {
   el.style.boxShadow = 'none'
+  hoveredSettingKey = null
 }
 
 const onSettingClicked = (el, event) => {

data/app/assets/javascripts/maglev/client/incoming-messages.js

@@ -1,12 +1,14 @@
 import { start as decorateIframe } from 'maglev-client/iframe-decorator'
-import { postMessageToEditor } from 'maglev-client/utils'
+import { log, postMessageToEditor } from 'maglev-client/utils'
+
+const PAGE_UPDATED_EVENTS = ['section:add', 'section:move', 'section:update', 'section:remove', 'block:add', 'block:move', 'block:remove', 'setting:update', 'style:update']
 
 export const start = () => {
   window.addEventListener('message', ({ data: { type, ...data } }) => {
     // a message MUST have a type
     if (!type) return
 
-    const internalType = type.replace('maglev:', '')
+    const internalType = getInternalType(type)
 
     switch (internalType) {
       case 'config':
@@ -36,7 +38,7 @@ export const start = () => {
         triggerEvent(type, data)
         break
       default:
-        console.log('[maglev][iframe] unknown message type', type)
+        log('[maglev][iframe] unknown message type', type)
         break
     }
   })
@@ -46,4 +48,12 @@ export const start = () => {
 const triggerEvent = (type, data) => {
   const event = new CustomEvent(type, { detail: data })
   window.dispatchEvent(event)
+
+  if (PAGE_UPDATED_EVENTS.includes(getInternalType(type))) {
+    window.dispatchEvent(new CustomEvent('maglev:page-updated', { detail: { type, data } }))
+  }
 }
+
+function getInternalType(type) {
+  return type.replace('maglev:', '')
+}

data/app/assets/javascripts/maglev/client/index.js

@@ -1,8 +1,9 @@
 import { start as startListeningEvents } from 'maglev-client/dom-operations'
 import { start as startListeningMessages } from 'maglev-client/incoming-messages'
+import { log } from 'maglev-client/utils'
 
 const initializeClient = () => {
-  console.log('Maglev Client v2 🚆')
+  log('Maglev Client v3 🚆')
 
   // no need to start the client when the site is being visited outside the editor
   // (shouldn't happen, but just in case)
@@ -14,7 +15,7 @@ const initializeClient = () => {
   // listen local events (converted from messages) and process them
   startListeningEvents()  
 
-  console.log('Maglev Client v2 ✅')
+  console.log('Maglev Client v3 ✅')
 }
 
 // Check if document is already ready

data/app/assets/javascripts/maglev/client/utils.js

@@ -7,6 +7,28 @@ export const isBlank = (object) => {
   )
 }
 
+const getParentEditorConfig = () => {
+  try {
+    return window.parent?.maglevEditorConfig
+  } catch (_) {
+    return undefined
+  }
+}
+
+const getEditorConfig = () => {
+  return window.maglevEditorConfig || getParentEditorConfig() || {}
+}
+
+export const isEditorJsLogsEnabled = () => {
+  return getEditorConfig().jsLogsEnabled === true
+}
+
+export const log = (...args) => {
+  if (isEditorJsLogsEnabled()) {
+    console.log(...args)
+  }
+}
+
 export const debounce = (fn, time) => {
   let timeoutId
   function wrapper(...args) {

data/app/assets/javascripts/maglev/editor/controllers/app/forms/section_form_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 import { useDebounce } from 'stimulus-use'
+import { log } from 'maglev-controllers/utils'
 
 export default class extends Controller {
   static targets = ['lockVersion']
@@ -20,7 +21,7 @@ export default class extends Controller {
   }
 
   onSettingChange(event) {
-    console.log('[SectionForm::onSettingChange]', this.sourceId , event.detail)
+    log('[SectionForm::onSettingChange]', this.sourceId , event.detail)
     const { detail: { settingType, settingId, value } } = event
     this.dispatch('updateSetting', { detail: {
         sourceId: this.sourceId,
@@ -30,12 +31,12 @@ export default class extends Controller {
   }
 
   onPersist(event) {
-    console.log('[SectionForm::onPersist]', event.detail, typeof event.detail)
+    log('[SectionForm::onPersist]', event.detail, typeof event.detail)
     this.lockVersionTarget.value = event.detail.lockVersion
   }
 
   async afterSettingUpdate(event) {
-    console.log('[SectionForm::afterSettingUpdate] 🙌🙌', event.detail)
+    log('[SectionForm::afterSettingUpdate] 🙌🙌', event.detail)
     await this.element.requestSubmit()
     
     if (!event.detail.updated) {

data/app/assets/javascripts/maglev/editor/controllers/app/forms/style_form_controller.js

@@ -1,10 +1,11 @@
 import { Controller } from '@hotwired/stimulus'
+import { log } from 'maglev-controllers/utils'
 
 export default class extends Controller {
   static values = { style: Array }
 
   update(event) {
-    console.log('[StyleForm] update', event.detail, this.styleValue)
+    log('[StyleForm] update', event.detail, this.styleValue)
 
     const newStyle = this.styleValue
     newStyle.forEach(style => {

data/app/assets/javascripts/maglev/editor/controllers/app/page_preview_controller.js

@@ -6,9 +6,12 @@ export default class extends Controller {
   connect() {
     this.setupTransformations()
     this.numberOfSections = null
+    this.syncPreviewTimer = null
   }
 
   disconnect() {
+    clearTimeout(this.syncPreviewTimer)
+    this.syncPreviewTimer = null
     this.teardownTransformations()
   }
 
@@ -33,6 +36,14 @@ export default class extends Controller {
     this.element.classList.remove('is-empty') 
   }
 
+  // force reload the iframe
+  reload() {
+    this.startLoading()
+    if (!this.reloadIframeInPlace()) {
+      this.iframeTarget.src = this.iframeTarget.src
+    }
+  }
+
   // called when the Maglev client JS lib has been fully loaded on the iframe
   clientReady(event) {
     const { numberOfSections } = event.detail
@@ -47,20 +58,100 @@ export default class extends Controller {
     this.updateEmptyMessageState()
   }
 
-  // called when the user navigates to a new page in the editor (another Maglev page OR in a different locale) 
+  // Preview markup lives outside the Turbo morph root (#root), so the iframe persists while <head>
+  // meta updates. Reading meta on turbo:load can race; we debounce. After Back, compare the live
+  // iframe document URL (same-origin) to meta, not only the src attribute.
   detectUrlChange() {
-    const currentPath = new URL(this.iframeTarget.src).pathname
-    const newPath = document.querySelector('meta[name=page-preview-url]').content
+    clearTimeout(this.syncPreviewTimer)
+    this.syncPreviewTimer = setTimeout(() => {
+      this.syncPreviewTimer = null
+      this.syncPreview()
+    }, 0)
+  }
+
+  syncPreview() {
+    const meta = document.querySelector('meta[name=page-preview-url]')
+    if (!meta?.content) return
+
+    let targetHref
+    try {
+      targetHref = new URL(meta.content, document.baseURI).href
+    } catch {
+      return
+    }
 
-    if (currentPath !== newPath) {
+    const currentHref = this.livePreviewHref()
+    const targetKey = this.previewUrlKey(targetHref)
+    const currentKey = this.previewUrlKey(currentHref)
+
+    if (currentKey !== targetKey) {
       this.startLoading()
-      this.iframeTarget.src = newPath
+      this.assignIframeSrcWithoutHistory(targetHref)
     } else {
       this.element.classList.add('is-loaded')
       this.updateEmptyMessageState()
     }
   }
 
+  livePreviewHref() {
+    try {
+      const win = this.iframeTarget.contentWindow
+      const href = win?.location?.href
+      if (href && !href.startsWith("about:")) {
+        return new URL(href, document.baseURI).href
+      }
+    } catch {
+      // cross-origin preview document
+    }
+    try {
+      return new URL(this.iframeTarget.src, document.baseURI).href
+    } catch {
+      return this.iframeTarget.src
+    }
+  }
+
+  previewUrlKey(href) {
+    try {
+      const u = new URL(href, document.baseURI)
+      u.hash = ""
+      let path = u.pathname
+      if (path.length > 1 && path.endsWith("/")) {
+        path = path.slice(0, -1)
+      }
+      return `${u.origin}${path}${u.search}`
+    } catch {
+      return href
+    }
+  }
+
+  // Assigning iframe.src pushes a joint session-history entry in most browsers, so the first Back
+  // pops the iframe instead of the parent Turbo visit. replace/reload avoid that when same-origin.
+  assignIframeSrcWithoutHistory(resolvedHref) {
+    try {
+      const win = this.iframeTarget.contentWindow
+      if (win?.location?.replace) {
+        win.location.replace(resolvedHref)
+        return
+      }
+    } catch {
+      // cross-origin iframe document: fall back to src
+    }
+    this.iframeTarget.src = resolvedHref
+  }
+
+  reloadIframeInPlace() {
+    try {
+      const win = this.iframeTarget.contentWindow
+      if (win?.location?.reload) {
+        win.location.reload()
+        return true
+      }
+    } catch {
+      // cross-origin: caller will fall back to reassigning src
+    }
+    return false
+  }
+
   updateEmptyMessageState() {
     if (this.numberOfSections === 0) {
       this.element.classList.add('is-empty')

data/app/assets/javascripts/maglev/editor/controllers/app/preview_notification_center_controller.js

@@ -1,25 +1,42 @@
 import { Controller } from "@hotwired/stimulus"
-import { isSamePath } from"maglev-controllers/utils"
+import { isSamePath, log } from "maglev-controllers/utils"
 
 export default class extends Controller { 
   static targets = ["iframe"]
   static values = {
     sectionPath: String,
-    sectionBlockPath: String
+    sectionBlockPath: String,
+    primaryColor: String,
+    stickySectionIds: Array,
   }
 
   connect() {
     this.isClientReady = false
-    this.clientReadyCallbacks = []    
+    this.clientReadyCallbacks = []
+    this.prefetchedPaths = new Set()
+    this.lastConfiguredDocument = null
+
+    // The iframe `load` event can fire before Stimulus wires `load->sendConfig`.
+    // If that happens, no config is sent and the client stays undecorated.
+    this.sendConfigIfIframeAlreadyLoaded()
   }
 
   // called when the iframe DOM is loaded
-  sendConfig(event) {
-    const { primaryColor, stickySectionIds } = event.params
+  sendConfig() {
+    const { primaryColorValue, stickySectionIdsValue } = this
+    const iframeDocument = this.iframeTarget?.contentDocument
+    if (!iframeDocument) return
+
+    // Prevent duplicate `config` for the same document (load + fallback path).
+    if (this.lastConfiguredDocument === iframeDocument) return
+
     this.postMessage('config', {
-      primaryColor,
-      stickySectionIds,
+      primaryColor: primaryColorValue,
+      stickySectionIds: stickySectionIdsValue,
     })
+
+    // Prevent duplicate `config` for the same document (load + fallback path).
+    this.lastConfiguredDocument = iframeDocument
   }
 
   // called when the Maglev client JS lib has been fully loaded on the iframe
@@ -30,61 +47,70 @@ export default class extends Controller {
 
   // called by the iframe when the user clicks on a setting of a section or a section block
   editSection(event) {
-    console.log('[PreviewNotificationCenter][editSection]', event.detail)
+    log('[PreviewNotificationCenter][editSection]', event.detail)
     const { sectionId, sectionBlockId, settingId } = event.detail
-    const pathTemplate = sectionBlockId ? this.sectionBlockPathValue : this.sectionPathValue
-    const path = `${pathTemplate}#${settingId}`.replace(':section_id', sectionId).replace(':section_block_id', sectionBlockId)
+    const path = this.buildSettingPath({ sectionId, sectionBlockId, settingId })
     
     if (isSamePath(path)) {
       window.location.hash = settingId
     } else {
-      Turbo.visit(path)
+      this.visitPath(path)
     }
   }
 
   editSectionBlock(event) {
-    console.log('[PreviewNotificationCenter][editSectionBlock]', event.detail)
+    log('[PreviewNotificationCenter][editSectionBlock]', event.detail)
     const { sectionId, sectionBlockId } = event.detail
     const pathTemplate = this.sectionBlockPathValue
     const path = `${pathTemplate}#${sectionBlockId}`.replace(':section_id', sectionId).replace(':section_block_id', sectionBlockId)
-    Turbo.visit(path)
+    this.visitPath(path)
+  }
+
+  prefetchEditSectionOrBlock(event) {
+    const { sectionId, sectionBlockId, settingId } = event.detail
+    const path = this.buildSettingPath({ sectionId, sectionBlockId, settingId })
+    const prefetchPath = this.stripHash(path)
+
+    if (isSamePath(prefetchPath) || this.prefetchedPaths.has(prefetchPath)) return
+
+    this.enqueuePrefetch(prefetchPath)
   }
   
   // === SECTIONS ===
 
   addSection(event) {
-    console.log('addSection', event.detail.fetchResponse.response.headers.get('X-Section-Id'), event.detail.fetchResponse.response.headers.get('X-Section-Position'))
+    log('addSection', event.detail.fetchResponse.response.headers.get('X-Section-Id'), event.detail.fetchResponse.response.headers.get('X-Section-Position'))
     const sectionId = event.detail.fetchResponse.response.headers.get('X-Section-Id')
     const position = event.detail.fetchResponse.response.headers.get('X-Section-Position')
     this.postMessage('section:add', { sectionId, insertAt: parseInt(position) })
   }
 
   deleteSection(event) {
-    console.log('deleteSection', event.params)
+    log('deleteSection', event.params)
     const { sectionId } = event.params
     this.postMessage('section:remove', { sectionId  })
   }
 
   moveSection(event) {
-    console.log('moveSection 💨💨💨', event.detail)
+    log('moveSection 💨💨💨', event.detail)
     const { oldIndex, newIndex } = event.detail
     this.postMessage('section:move', { oldIndex, newIndex })
   }
 
   updateSection(event) {
-    console.log('updateSection 🧼🧼🧼', event.detail)
+    log('updateSection 🧼🧼🧼', event.detail)
     const { sectionId  } = event.detail
     this.postMessage('section:update', { sectionId })
   }
 
   checkSectionLockVersion(event) {
-    console.log('checkSectionLockVersion 🕵🏻‍♂️🕵🏻‍♂️🕵🏻‍♂️', event)
+    log('checkSectionLockVersion 🕵🏻‍♂️🕵🏻‍♂️🕵🏻‍♂️', event)
     const { sectionId, lockVersion } = event.detail
     this.postMessage('section:checkLockVersion', { sectionId, lockVersion })
   }
 
   pingSection(event) {
-    console.log('pingSection 🏓🏓🏓', event.detail, this.isClientReady)
+    log('pingSection 🏓🏓🏓', event.detail, this.isClientReady)
     const { sectionId } = event.detail
     this.postMessageWhenClientReady('section:ping', { sectionId })
   }
@@ -92,26 +118,26 @@ export default class extends Controller {
   // === SECTION BLOCKS ===
 
   addSectionBlock(event) {
-    console.log('addSectionBlock ➕➕➕', event.params)
+    log('addSectionBlock ➕➕➕', event.params)
     const { sectionId } = event.params
     this.postMessage('block:add', { sectionId })
   }
 
   deleteSectionBlock(event) {
-    console.log('deleteSectionBlock 🗑️🗑️🗑️', event.params)
+    log('deleteSectionBlock 🗑️🗑️🗑️', event.params)
     const { sectionId, sectionBlockId } = event.params
     this.postMessage('block:remove', { sectionId, sectionBlockId })
   }
 
   moveSectionBlocks(event) {
-    console.log('moveSectionBlocks 💨💨💨', event.params)
+    log('moveSectionBlocks 💨💨💨', event.params)
     const sectionId = event.params.sectionId
     const { oldItemId: sectionBlockId, newItemId: targetSectionBlockId, direction } = event.detail    
     this.postMessage('block:move', { sectionId, sectionBlockId, targetSectionBlockId, direction })
   }
 
   pingSectionBlock(event) {
-    console.log('pingSectionBlock 🏓🏓🏓', event.detail)
+    log('pingSectionBlock 🏓🏓🏓', event.detail)
     const { sectionBlockId } = event.detail
     this.postMessageWhenClientReady('block:ping', { sectionBlockId })
   }
@@ -132,6 +158,62 @@ export default class extends Controller {
 
   // === UTILS ===
 
+  buildSettingPath({ sectionId, sectionBlockId, settingId }) {
+    const pathTemplate = sectionBlockId ? this.sectionBlockPathValue : this.sectionPathValue
+    return `${pathTemplate}#${settingId}`.replace(':section_id', sectionId).replace(':section_block_id', sectionBlockId)
+  }
+
+  stripHash(path) {
+    const url = new URL(path, window.location.origin)
+    url.hash = ''
+    return `${url.pathname}${url.search}`
+  }
+
+  enqueuePrefetch(path) {
+    if (this.prefetchedPaths.has(path)) return
+
+    this.prefetchedPaths.add(path)
+
+    // Use Turbo's own prefetch pipeline so the visit cache is warmed,
+    // which avoids the full loading-bar behavior on subsequent click.
+    const link = document.createElement('a')
+    link.href = path
+    link.dataset.maglevPrefetch = 'true'
+    link.dataset.turboPrefetch = 'true'
+    link.hidden = true
+    document.body.appendChild(link)
+
+    link.dispatchEvent(new MouseEvent('mouseenter', {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+    }))
+
+    setTimeout(() => link.remove(), 500)
+  }
+
+  visitPath(path) {
+    const url = new URL(path, window.location.origin)
+    const visitPath = `${url.pathname}${url.search}`
+    const hash = url.hash
+
+    if (hash) this.applyHashAfterVisit(hash)
+    Turbo.visit(visitPath)
+  }
+
+  applyHashAfterVisit(hash) {
+    window.addEventListener('turbo:load', () => {
+      window.location.hash = hash
+    }, { once: true })
+  }
+
+  sendConfigIfIframeAlreadyLoaded() {
+    const iframeDocument = this.iframeTarget?.contentDocument
+    if (!iframeDocument || iframeDocument.readyState !== 'complete') return
+
+    this.sendConfig()
+  }
+
   postMessage(type, data) {
     this.iframeTarget.contentWindow.postMessage({ type: `maglev:${type}`, ...(data || {}) }, '*')
   }

data/app/assets/javascripts/maglev/editor/controllers/app/setting_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
+import { log } from 'maglev-controllers/utils'
 
 export default class extends Controller {
   static values = { 
@@ -8,7 +9,7 @@ export default class extends Controller {
   }
 
   connect() {
-    console.log('[Editor::Setting] connect', this.settingIdValue)
+    log('[Editor::Setting] connect', this.settingIdValue)
 
     if (window.location.hash) {
       // dirty way to wait for the underlying controller to be connected
@@ -17,7 +18,7 @@ export default class extends Controller {
   }
 
   change(event) {
-    console.log('[Editor::Setting] change', event.detail)
+    log('[Editor::Setting] change', event.detail)
     this.dispatch('change', { 
       detail: {         
         settingId: this.settingIdValue,

data/app/assets/javascripts/maglev/editor/controllers/shared/copy_to_clipboard_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
+import { log } from 'maglev-controllers/utils'
 
 export default class extends Controller {
   static targets = ['text', 'success']
@@ -15,7 +16,7 @@ export default class extends Controller {
     if (navigator.clipboard) {
       navigator.clipboard.writeText(this.sourceValue)
     } else {
-      console.log('Clipboard API not supported or unavailable.')
+      log('Clipboard API not supported or unavailable.')
     }
     
     this.timeout = setTimeout(() => {