maglevcms 1.8.0 → 2.0.0

data/app/frontend/editor/locales/editor.fr.json

@@ -2,7 +2,7 @@
   "headerNav": {
     "pages": "Pages :",
     "pageSettings": "Paramètres page",
-    "previewSite": "Prévisualiser site",
+    "previewSite": "Prévisualiser",
     "previewToggler": {
       "button": "Voir site",
       "draftLink": "Version brouillon",
@@ -22,7 +22,7 @@
     }
   },
   "sidebarNav": {
-    "addNewSectionTooltip": "Ajouter une nouvelle section au bas de la page",
+    "listPagesTooltip": "Gérer les pages de votre site",
     "managePageSectionsTooltip": "Gérer les sections de la page",
     "editStyleTooltip": "Modifier le style du site",
     "openImageLibraryTooltip": "Ouvrir la galerie d'images",
@@ -43,14 +43,16 @@
       "title": "Liste des pages",
       "subTitle": "Gérer les pages de votre site",
       "newButton": "Nouvelle page",
-      "searchPlaceholder": "Tapez un titre de page...",
-      "item": {
-        "edit": "Éditer les paramètres",
-        "clone": "Dupliquer",
-        "hide": "Cacher",
-        "show": "Montrer",
-        "delete": "Supprimer"
-      }
+      "searchPlaceholder": "Tapez votre recherche ici..."
+    },
+    "actions": {
+      "edit": "Modifier les paramètres",
+      "clone": "Dupliquer",
+      "hide": "Masquer",
+      "show": "Afficher",
+      "delete": "Supprimer",
+      "copyUrlToClipboard": "Copier l'URL",
+      "copyUrlToClipboardSuccess": "Copié !"
     },
     "new": {
       "title": "Créer une nouvelle page",
@@ -97,7 +99,8 @@
     },
     "listPane": {
       "title": "Organiser les sections",
-      "empty": "Vous n'avez aucune section."
+      "empty": "Vous n'avez aucune section.",
+      "addButton": "Ajouter une nouvelle section"
     }
   },
   "sectionPane": {
@@ -113,6 +116,7 @@
   "sectionBlockPane": {
     "tabs": {
       "settings": "Contenu",
+      "blocks": "Blocs",
       "advanced": "Paramètres"
     }
   },
@@ -121,7 +125,13 @@
   },
   "style": {
     "edit": {
-      "title": "Styler site"
+      "title": "Styler votre site",
+      "submitButton": {
+        "default": "Mettre à jour le style",
+        "inProgress": "Mise à jour...",
+        "success": "Style mis à jour !",
+        "fail": "Échec !"
+      }
     }
   },
   "imageInput": {
@@ -228,7 +238,12 @@
     "staleRecord": {
       "title": "Nous sommes désolés 🙇",
       "message": "Nous n'avons pu sauvegarder vos modifications car de plus récentes viennent d'être effectuées par une autre personne.",
-      "button": "Recharger la page"
+      "button": "Veuillez recharger votre page"
+    },
+    "forbidden": {
+      "title": "Nous sommes désolés 🙇",
+      "message": "Vous n'êtes pas autorisé à effectuer cette action. Veuillez contacter votre administrateur.",
+      "button": "Fermer"
     }
   },
   "support": {

data/app/frontend/editor/locales/editor.pt-BR.json

@@ -22,7 +22,7 @@
     }
   },
   "sidebarNav": {
-    "addNewSectionTooltip": "Adicionar uma nova seção na parte inferior da página",
+    "listPagesTooltip": "Gerenciar as páginas do seu site",
     "managePageSectionsTooltip": "Reordenar / excluir as seções da página",
     "editStyleTooltip": "Alterar o estilo do seu site",
     "openImageLibraryTooltip": "Abrir a galeria de imagens",
@@ -43,14 +43,16 @@
       "title": "Lista de páginas",
       "subTitle": "Gerenciar as páginas do seu site",
       "newButton": "Nova página",
-      "searchPlaceholder": "Digite sua pesquisa aqui...",
-      "item": {
-        "edit": "Editar configurações da página",
-        "clone": "Clonar página",
-        "hide": "Ocultar página",
-        "show": "Mostrar página",
-        "delete": "Excluir página"
-      }
+      "searchPlaceholder": "Digite sua pesquisa aqui..."
+    },
+    "actions": {
+      "edit": "Editar configurações",
+      "clone": "Clonar",
+      "hide": "Ocultar",
+      "show": "Mostrar",
+      "delete": "Excluir",
+      "copyUrlToClipboard": "Copiar URL",
+      "copyUrlToClipboardSuccess": "Copiado!"
     },
     "new": {
       "title": "Criar uma nova página",
@@ -97,7 +99,8 @@
     },
     "listPane": {
       "title": "Organizar seções",
-      "empty": "Não há seções."
+      "empty": "Não há seções.",
+      "addButton": "Adicionar uma nova seção"
     }
   },
   "sectionPane": {
@@ -236,6 +239,11 @@
       "title": "Pedimos desculpas 🙇",
       "message": "Não conseguimos salvar suas alterações porque outra pessoa atualizou o conteúdo no intervalo de tempo.",
       "button": "Por favor, recarregue a página"
+    },
+    "forbidden": {
+      "title": "Pedimos desculpas 🙇",
+      "message": "Você não tem permissão para realizar esta ação. Consulte seu administrador.",
+      "button": "Fechar"
     }
   },
   "support": {

data/app/frontend/editor/locales/index.js

@@ -2,9 +2,11 @@ import EditorEN from './editor.en.json'
 import EditorES from './editor.es.json'
 import EditorFR from './editor.fr.json'
 import EditorPTBR from './editor.pt-BR.json'
+import EditorAR from './editor.ar.json'
 import { deepMerge } from '@/misc/utils'
 
 const overriddenEN = window.customTranslations?.en ?? {}
+const overriddenAR = window.customTranslations?.ar ?? {}
 const overriddenES = window.customTranslations?.es ?? {}
 const overriddenFR = window.customTranslations?.fr ?? {}
 const overriddenPTBR =
@@ -17,4 +19,5 @@ export default {
   es: deepMerge(EditorES, overriddenES),
   fr: deepMerge(EditorFR, overriddenFR),
   'pt-BR': deepMerge(EditorPTBR, overriddenPTBR),
+  ar: deepMerge(EditorAR, overriddenAR),
 }

data/app/frontend/editor/mixins/error-modal.js

@@ -1,4 +1,5 @@
-import StaleRecord from '@/components/errors/stale-record.vue'
+import StaleRecordModal from '@/components/errors/stale-record.vue'
+import ForbiddenModal from '@/components/errors/forbidden.vue'
 
 export default {
   methods: {
@@ -7,9 +8,13 @@ export default {
 
       switch (errorType) {
         case 'staleRecord':
-          ModalComponent = StaleRecord
+          ModalComponent = StaleRecordModal
+          break
+        case 'forbidden':
+          ModalComponent = ForbiddenModal
           break
         default:
+          console.warn("Unknown errorType:", errorType)
           return // unknown error type
       }
 

data/app/frontend/editor/mixins/preview-transformation.js

@@ -9,7 +9,6 @@ export default {
     previewPaneMaxWidth() {
       const sectionPaneWidth =
         document.querySelector('.slide-pane')?.offsetWidth || 0
-      console.log('previewPaneMaxWidth', this.windowWidth, sectionPaneWidth)
       return this.windowWidth - sectionPaneWidth
     },
     previewScaleRatio() {

data/app/frontend/editor/plugins/i18n.js

@@ -4,24 +4,9 @@ import messages from '@/locales'
 
 Vue.use(VueI18n)
 
-const AVAILABLE_LOCALES = ['en', 'fr']
-var locale = 'en'
-
-if (document.documentElement.lang) {
-  // fetch the local from the HTML tag
-  locale = document.documentElement.lang
-} else {
-  // try to fetch the browser locale
-  const language = navigator.languages[0]
-  if (language) {
-    locale = language.split('-')[0]
-    if (AVAILABLE_LOCALES.indexOf(locale) === -1) locale = null
-  }
-}
-
 const i18n = new VueI18n({
-  locale,
-  fallbackLocale: AVAILABLE_LOCALES[0],
+  locale: window.uiLocale,
+  fallbackLocale: 'en',
   messages,
 })
 

data/app/frontend/editor/services/__tests__/section.spec.js

@@ -30,4 +30,10 @@ describe('SectionService', () => {
       ])
     })
   })
+  describe('#getSectionLabel', () => {
+    it('returns the label of the section', () => {
+      const label = service.getSectionLabel(simpleContentSection, theme.sections[0])
+      expect(label).toEqual('preTitle')
+    })
+  })
 })

data/app/frontend/editor/services/collection-item.js

@@ -9,4 +9,12 @@ export default (api) => ({
       .get(`/collections/${collectionId}`, options)
       .then(({ data }) => data)
   },
+  findOne: (collectionId, id) => {
+    console.log(
+      `[CollectionItem] Fetching the item ${id} of ${collectionId}`,
+    )
+    return api
+      .get(`/collections/${collectionId}/${id}`)
+      .then(({ data }) => data)
+  },
 })

data/app/frontend/editor/services/live-preview.js

@@ -26,6 +26,12 @@ export const removeSection = (sectionId) => {
   postMessage('section:remove', { sectionId })
 }
 
+export const pingSection = (sectionId) => {
+  if (!sectionId) return
+  postMessage('section:ping', { sectionId })
+}
+
+
 // === Block related actions ===
 export const addBlock = (content, section, sectionBlock) => {
   postMessage('block:add', { content, section, sectionBlock })
@@ -43,6 +49,10 @@ export const removeBlock = (content, section, sectionBlockId) => {
   postMessage('block:remove', { content, section, sectionBlockId })
 }
 
+export const simulateFakeScroll = () => {
+  notifyScrolling(null)
+}
+
 // === Other actions ===
 
 export const updateStyle = (content, style) => {
@@ -113,7 +123,7 @@ const openSettingPane = (name, params) => {
   })
 }
 
-const notifyScrolling = (boundingRect) => {
+export const notifyScrolling = (boundingRect) => {
   const event = new CustomEvent('maglev:preview:scroll', {
     detail: { boundingRect },
   })

data/app/frontend/editor/services/page.js

@@ -89,7 +89,7 @@ export default (api) => ({
 
   clone: (id) => {
     console.log('[PageService] Cloning page #', id)
-    return api.post(`/pages/${id}/clones`, {})
+    return api.post(`/pages/${id}/clones`, {}).then(({ data }) => data)
   },
 
   destroy: (id) => {

data/app/frontend/editor/services/section.js

@@ -146,6 +146,36 @@ const buildDefaultBlocks = (definition) => {
   return blocks
 }
 
+export const getSectionLabel = (section, definition) => {
+  let label = null
+
+  definition.settings.some((setting) => {
+    const value = section.settings.find(
+      (contentSetting) => contentSetting.id === setting.id,
+    )?.value
+
+    if (value === undefined) return false
+
+    switch (setting.type) {
+      case 'text':
+        const doc = new DOMParser().parseFromString(value.replace(/<br\/?>/g, ' '), 'text/html')
+        label = doc.body.textContent
+        break
+      case 'link':
+        if (!isBlank(value?.text)) label = value.text
+        break
+      case 'collection_item':
+        if (!isBlank(value?.label)) label = value.label
+        break
+      default:
+        break
+    }
+
+    return !!label
+  })
+  return label
+}
+
 export const getBlockLabel = (block, definition, index) => {
   let label, image
   definition.settings.forEach((setting) => {

data/app/frontend/editor/services/site.js

@@ -12,10 +12,10 @@ export default (api) => ({
       return response.headers['lock-version']
     })
   },
-  publish() {
-    return api.post(`/publication`).then(({ data }) => data)
+  publish({ pageId }) {
+    return api.post(`/publication`, { page_id: pageId }).then(({ data }) => data)
   },
-  getLastPublication() {
-    return api.get(`/publication`).then(({ data }) => data)
+  getLastPublication({ pageId }) {
+    return api.get('/publication', { params: { page_id: pageId }}).then(({ data }) => data)
   },
 })

data/app/frontend/editor/services/theme.js

@@ -1,5 +1,6 @@
 export const buildCategories = (theme) => {
   return theme.sectionCategories.map((category) => ({
+    id: category.id,
     name: category.name,
     children: theme.sections
       .filter((section) => section.category == category.id)

data/app/frontend/editor/spec/__mocks__/page.js

@@ -204,6 +204,7 @@ export const page = {
   ogDescription: null,
   ogImageUrl: null,
   previewUrl: '/maglev/preview',
+  liveUrl: '/',
   sectionNames: [
     { id: 'GrYZW-VP', name: 'Navbar 01' },
     { id: '8hKSujtd', name: 'Content #1' },
@@ -418,13 +419,14 @@ export const normalizedPage = {
         ogDescription: null,
         ogImageUrl: null,
         previewUrl: '/maglev/preview',
+        liveUrl: '/',
         sectionNames: [
           { id: 'GrYZW-VP', name: 'Navbar 01' },
           { id: '8hKSujtd', name: 'Content #1' },
           { id: 'xM6f-kyh', name: 'List #1' },
         ],
         lockVersion: 1,
-        translated: true,
+        translated: true,        
       },
     },
   },

data/app/frontend/editor/spec/__mocks__/services.js

@@ -39,6 +39,7 @@ const sectionService = {
   build: vi.fn(),
   getSettings: vi.fn(),
   buildDefaultBlock: vi.fn(),
+  getSectionLabel: vi.fn(),
 }
 
 const blockService = {

data/app/frontend/editor/store/__tests__/getters.spec.js

@@ -1,5 +1,5 @@
 import Vuex from 'vuex'
-import { vi } from 'vitest'
+import { describe, vi } from 'vitest'
 import { createLocalVue } from '@vue/test-utils'
 import defaultState from '@/store/default-state'
 import buildGetters from '@/store/getters'
@@ -29,6 +29,58 @@ describe('Getters', () => {
     store.commit('SET_SITE', site)
   })
 
+  describe('#currentPagePath', () => {
+    let freshNormalizedPage = null
+    beforeEach(() => {
+      freshNormalizedPage = structuredClone(normalizedPage)
+      mockedServices.page.normalize = vi.fn(() => freshNormalizedPage)
+    })
+    describe('Given this is the home page', () => {
+      it('returns the path of the page', () => {
+        store.commit('SET_PAGE', page)
+        expect(store.getters.currentPagePath).toStrictEqual('/index')
+      })
+    })
+    describe('Given this is a random page', () => {
+      it('returns the path of the page', () => {
+        freshNormalizedPage.entities.page['1'].path = '/bonjour'
+        freshNormalizedPage.entities.page['1'].liveUrl = '/fr/bonjour'
+        store.commit('SET_PAGE', page)
+        expect(store.getters.currentPagePath).toStrictEqual('/fr/bonjour')
+      })
+    })
+    describe('Given the liveUrl contains the domain name', () => {
+      it('returns the path of the page', () => {
+        freshNormalizedPage.entities.page['1'].liveUrl = 'https://example.com:8080/fr'
+        freshNormalizedPage.entities.page['1'].path = 'index'
+        store.commit('SET_PAGE', page)
+        expect(store.getters.currentPagePath).toStrictEqual('/fr/index')
+      })
+    })
+  })
+
+  describe('#currentPageUrl', () => {
+    let freshNormalizedPage = null
+    beforeEach(() => {
+      freshNormalizedPage = structuredClone(normalizedPage)
+      mockedServices.page.normalize = vi.fn(() => freshNormalizedPage)
+    })
+    describe('Given the page live URL is not prefixed with the base URL', () => {
+      it('returns the url of the page', () => {
+        freshNormalizedPage.entities.page['1'].liveUrl = '/hello-world'
+        store.commit('SET_PAGE', page)
+        expect(store.getters.currentPageUrl).toStrictEqual('http://localhost:3000/hello-world')
+      })
+    })
+    describe('Given the page live URL is prefixed with the base URL', () => {
+      it('returns the url of the page', () => {
+        freshNormalizedPage.entities.page['1'].liveUrl = 'https://example.com:8080/fr'
+        store.commit('SET_PAGE', page)
+        expect(store.getters.currentPageUrl).toStrictEqual('https://example.com:8080/fr')
+      })
+    })
+  })
+
   describe('#content', () => {
     it('returns the content of the sections for the page', () => {
       mockedServices.page.denormalize = vi.fn(() => page)
@@ -83,18 +135,21 @@ describe('Getters', () => {
           id: 'GrYZW-VP',
           type: 'navbar_01',
           name: 'Navbar 01',
+          label: undefined,
           viewportFixedPosition: false,
         },
         {
           id: '8hKSujtd',
           type: 'content_01',
           name: 'Content #1',
+          label: undefined,
           viewportFixedPosition: false,
         },
         {
           id: 'xM6f-kyh',
           type: 'list_01',
           name: 'List #1',
+          label: undefined,
           viewportFixedPosition: false,
         },
       ])

data/app/frontend/editor/store/actions/index.js

@@ -6,6 +6,7 @@ import buildSectionBlockActions from './section-block'
 export default (services) => ({
   setDevice({ commit }, value) {
     commit('SET_DEVICE', value)
+    commit('SET_HOVERED_SECTION', null)
   },
   setTheme({ commit }, theme) {
     commit('SET_THEME', theme)

data/app/frontend/editor/store/actions/site.js

@@ -7,15 +7,19 @@ export default (services) => ({
       commit('SET_STYLE', style)
     })
   },
-  loadPublishButtonState({ commit }) {
+  loadPublishButtonState({ state, commit }) {
     services.site
-      .getLastPublication()
+      .getLastPublication({ pageId: state.page.id })
       .then((data) => commit('SET_PUBLISH_BUTTON_STATE', data))
   },
-  async publishSite({ commit }) {
+  async publishSite({ state, commit }) {
     services.site
-      .publish()
+      .publish({ pageId: state.page.id })
       .then((data) => commit('SET_PUBLISH_BUTTON_STATE', data))
+      .catch(({ response: { status } }) => {
+        console.log('[Maglev] could not publish the page', status)
+        if (status === 403) commit('OPEN_ERROR_MODAL', 'forbidden')
+      })
   },
   pollLastPublication({ dispatch }) {
     dispatch('loadPublishButtonState')

data/app/frontend/editor/store/getters.js

@@ -1,4 +1,14 @@
+import { isBlank } from '@/misc/utils'
+
 export default (services) => ({
+  currentPagePath: ({ page }) => {
+    const nakedPath = page.liveUrl.startsWith('http') ? new URL(page.liveUrl).pathname : page.liveUrl
+    return page.path === 'index' ? `${nakedPath}/index`.replace('//', '/') : nakedPath
+  },
+  currentPageUrl: ({ page }) => {
+    if (page.liveUrl.startsWith('http')) return page.liveUrl
+    return new URL(page.liveUrl, location.origin).toString()
+  },
   sectionList: (
     { page, sections, sectionBlocks },
     { sectionDefinition: getSectiondefinition },
@@ -14,6 +24,7 @@ export default (services) => ({
         id: sectionContent.id,
         type: sectionContent['type'],
         name: sectionDefinition.name,
+        label: services.section.getSectionLabel(sectionContent, sectionDefinition),
         viewportFixedPosition: !!sectionDefinition.viewportFixedPosition,
       }
     })

data/app/frontend/editor/views/page-preview.vue

@@ -19,6 +19,7 @@
         v-if="currentPage"
       >
         <div
+          id="iframe-wrapper"
           class="transition-all duration-100 ease-in-out"
           :class="{ [deviceClass]: true, hidden: isPageEmpty }"
           :style="{ opacity: previewReady ? 1 : 0 }"
@@ -64,7 +65,7 @@
           >
             <template v-slot:icon>
               <uikit-icon
-                name="add-box-line"
+                name="ri-stack-line"
                 size="1.5rem"
                 class="mx-1 text-black"
               />

data/app/frontend/images/favicon.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ns0:svg height="314px" version="1.1" viewBox="0 0 464 314" width="464px" xmlns:ns0="http://www.w3.org/2000/svg">
+<ns0:defs>
+
+</ns0:defs>
+<ns0:g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1">
+<ns0:g fill="#000000" id="maglev-3">
+<ns0:path d="M454.3,164.08 L419.43,88.31 C394.87,34.93 341.49,0.74 282.74,0.74 L103.98,0.74 C92.95,0.74 84.01,9.68 84.01,20.71 C84.01,31.74 92.95,40.68 103.98,40.68 L229.29,40.68 C229.29,40.68 219.11,64.98 219.11,64.98 C212.3,81.22 196.41,91.79 178.8,91.79 L20.74,91.79 C9.71,91.79 0.77,100.73 0.77,111.76 C0.77,122.79 9.71,131.73 20.74,131.73 L191.14,131.73 C191.14,131.73 180.96,156.04 180.96,156.04 C174.15,172.28 158.26,182.85 140.65,182.85 L52.82,182.85 C41.79,182.85 32.85,191.79 32.85,202.82 C32.85,213.85 41.79,222.79 52.82,222.79 L414.89,222.79 C418.73,222.79 421.53,226.58 420.25,230.19 C417.74,237.29 413.97,244.05 408.92,250.15 C396.11,265.63 376.56,273.93 356.46,273.93 L126,273.93 C114.97,273.93 106.03,282.87 106.03,293.9 C106.03,304.93 114.97,313.87 126,313.87 L355.88,313.87 C390.23,313.87 423.3,298.4 443.55,270.65 C466.4,239.34 470.31,198.94 454.28,164.09 L454.3,164.08 Z" id="Path"/>
+</ns0:g>
+</ns0:g>
+</ns0:svg>

data/app/frontend/images/logo.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="464px" height="314px" viewBox="0 0 464 314" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient x1="0.00215870369%" y1="49.9984032%" x2="100.004107%" y2="49.9984032%" id="linearGradient-1">
+            <stop stop-color="#0061FF" offset="0%"></stop>
+            <stop stop-color="#EC1FDA" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="maglev-3" fill="url(#linearGradient-1)">
+            <path d="M454.3,164.08 L419.43,88.31 C394.87,34.93 341.49,0.74 282.74,0.74 L103.98,0.74 C92.95,0.74 84.01,9.68 84.01,20.71 C84.01,31.74 92.95,40.68 103.98,40.68 L229.29,40.68 C229.29,40.68 219.11,64.98 219.11,64.98 C212.3,81.22 196.41,91.79 178.8,91.79 L20.74,91.79 C9.71,91.79 0.77,100.73 0.77,111.76 C0.77,122.79 9.71,131.73 20.74,131.73 L191.14,131.73 C191.14,131.73 180.96,156.04 180.96,156.04 C174.15,172.28 158.26,182.85 140.65,182.85 L52.82,182.85 C41.79,182.85 32.85,191.79 32.85,202.82 C32.85,213.85 41.79,222.79 52.82,222.79 L414.89,222.79 C418.73,222.79 421.53,226.58 420.25,230.19 C417.74,237.29 413.97,244.05 408.92,250.15 C396.11,265.63 376.56,273.93 356.46,273.93 L126,273.93 C114.97,273.93 106.03,282.87 106.03,293.9 C106.03,304.93 114.97,313.87 126,313.87 L355.88,313.87 C390.23,313.87 423.3,298.4 443.55,270.65 C466.4,239.34 470.31,198.94 454.28,164.09 L454.3,164.08 Z" id="Path"></path>
+        </g>
+    </g>
+</svg>

data/app/frontend/live-preview-client/iframe-decorator.js

@@ -53,6 +53,19 @@ export const start = (config) => {
 
   // click on links
   disableLinks(previewDocument)
+
+  // Only works on Google Chrome
+  selectHoveredSectionAtStartup(previewDocument, config.stickySectionIds)
+}
+
+const selectHoveredSectionAtStartup = (previewDocument, stickySectionIds) => {
+  setTimeout(() => {
+    const section = previewDocument.querySelector('[data-maglev-section-id]:hover')
+
+    if (section) {
+      onSectionHovered(previewDocument, section, stickySectionIds, true)
+    }
+  }, 200)
 }
 
 const listen = (previewDocument, eventType, handler) => {
@@ -96,28 +109,18 @@ const listen = (previewDocument, eventType, handler) => {
 }
 
 const listenScrolling = (previewDocument) => {
-  let mouseX = 0
-  let mouseY = 0
-
-  addEventListener(previewDocument, 'mousemove', (e) => {
-    mouseX = e.clientX
-    mouseY = e.clientY
-  })
-
-  const debouncedScrollNotifier = debounce(() => {
-    const el = previewDocument
-      .elementFromPoint(mouseX, mouseY)
-      ?.closest('[data-maglev-section-id]')
-
+  const scrollNotifier = () => {
+    const el = previewDocument.querySelector('[data-maglev-section-id]:hover')
     if (el) postMessage('scroll', { boundingRect: el.getBoundingClientRect() })
-  }, 10)
+  }
 
-  addEventListener(previewDocument, 'scroll', debouncedScrollNotifier)
+  addEventListener(previewDocument, 'scroll', scrollNotifier)
 }
 
-const onSectionHovered = (previewDocument, el, stickySectionIds) => {
+const onSectionHovered = (previewDocument, el, stickySectionIds, force = false) => {
   const sectionId = el.dataset.maglevSectionId
-  if (hoveredSectionId !== sectionId) {
+
+  if (hoveredSectionId !== sectionId || force) {
     postMessage('section:hover', {
       sectionId,
       sectionRect: el.getBoundingClientRect(),

data/app/frontend/live-preview-client/message.js

@@ -21,6 +21,7 @@ export const listenMessages = () => {
       case 'section:move':
       case 'section:update':
       case 'section:remove':
+      case 'section:ping':
       case 'block:add':
       case 'block:move':
       case 'block:update':