@brightspot/ui 3.0.0 → 3.0.1-cms-ui-migration.1

package/src/legacy/tool-ui/src/main/webapp/v4/ContentEdit.js

@@ -0,0 +1,2427 @@
+import { announce } from '../../../dom/aria.ts'
+import scrollIntoView from 'scroll-into-view'
+import { v1 as uuidv1 } from 'uuid'
+import create from './dom/create'
+import find from './dom/find'
+import findAll from './dom/findAll'
+import insertBefore from './dom/insertBefore'
+import insertFirst from './dom/insertFirst'
+import insertLast from './dom/insertLast'
+import onFind from './dom/onFind'
+import onRemove from './dom/onRemove'
+import Tether from './dom/Tether'
+import debounce from './util/debounce'
+import repaint from './util/repaint'
+import Preview from './ViewPreview'
+import PreviewOverlay from './PreviewOverlay'
+import { toggleMenu, setupMenuForAria } from '../../../dom/popupMenu'
+import onRTEReady from './dom/onRTEReady'
+
+const tooltips = window.BRIGHTSPOT?.ui.tooltips
+
+// Focus on the first input.
+function focusByLabel(cig, selector) {
+  const id = cig.querySelector(selector)?.htmlFor
+
+  if (id) {
+    document.getElementById(id)?.focus()
+  }
+}
+
+const previewOverlays = new Map()
+let selectedViewport = 0
+
+// Minimum container width (px) to show both preview and widget panels simultaneously
+const DUAL_PANEL_MIN_WIDTH = 900
+
+onFind(['.ContentEdit.is-new', '.StandardForm.is-new'], (form) => {
+  if (document.querySelector('.Admin-nav')) return
+
+  const cig = form.querySelector('.CIG:not(:empty)')
+  if (!cig) return
+
+  let prevTab
+
+  for (const row of cig.querySelectorAll(':scope > [data-tab]')) {
+    const tab = row.dataset.tab
+
+    if (!prevTab) {
+      prevTab = tab
+    } else if (prevTab !== tab) {
+      // If there are multiple tabs, focus on the first input of the first tab.
+      onFind(cig, ':scope > .TabBar', (tb) => {
+        focusByLabel(
+          cig,
+          `:scope > .CIG-row:not(.inputContainer-readOnly)[data-tab="${
+            Array.prototype.filter.call(
+              tb.querySelectorAll('button[data-tab]'),
+              (i) => !i.hidden,
+            )[0]?.dataset.tab
+          }"] > .CIG-label > label`,
+        )
+      })
+      return
+    }
+  }
+
+  focusByLabel(
+    cig,
+    ':scope > .CIG-row:not(.inputContainer-readOnly) > .CIG-label > label',
+  )
+})
+
+// When editing existing content in popup, send focus to ContentEdit popup
+onFind(
+  '.Popup[data-popup-source-class*="ContentSelector-edit"] button.Popup-heading',
+  (backButton) => {
+    backButton.focus()
+  },
+)
+
+// Move messages in top to main.
+onFind('.ContentEdit-top .Message', (message) => {
+  const title = message
+    .closest('.ContentEdit')
+    .querySelector('.ContentEdit-main > .ContentEdit-title')
+  title.parentNode.insertBefore(message, title.nextSibling)
+})
+
+// Controls.
+function appendControls(newList, oldList, tag) {
+  if (oldList) {
+    for (const item of findAll(oldList, tag)) {
+      newList.appendChild(tag === 'li' ? item : create('li', {}, item))
+    }
+
+    oldList.remove()
+  }
+}
+
+onFind('.ContentEdit', (edit) => {
+  const popup = edit.closest('.Popup-content')
+  if (popup) {
+    popup.classList.add('is-editing')
+  } else {
+    document.body.classList.add('is-editing')
+  }
+
+  const top = find(edit, '.widget-publishing')
+  if (!top) return
+
+  const list = create('ul', {
+    className: 'ContentEdit-controlsList',
+    role: 'menu',
+    'aria-label': tooltips.actions?.contentEdit,
+  })
+  const onClassChange = (mutations) => {
+    mutations.forEach((mutation) => {
+      const target = mutation.target
+      const isLocked = target.classList.contains('is-locked')
+      target.querySelectorAll('[accesskey]').forEach((el) => {
+        isLocked
+          ? el.setAttribute('disabled', '')
+          : el.removeAttribute('disabled')
+      })
+    })
+  }
+  const observer = new MutationObserver(onClassChange)
+  observer.observe(edit, { attributeFilter: ['class'] })
+
+  const contentEditBar = find(edit, '.ContentEdit-bar')
+  const publishingExtraLeft = find(edit, '.widget-publishingExtra-left')
+  const saveElement = find(publishingExtraLeft, [
+    '[name="action-draft"]',
+    '[name="action-newDraft"]',
+  ])
+
+  const referenceNode =
+    find(contentEditBar, '.ContentEdit-workflow') ||
+    find(contentEditBar, '.ContentEdit-publish')
+
+  if (saveElement !== null) {
+    const saveClone = saveElement.cloneNode(true)
+
+    // If user sets a schedule but clicks Save then clear schedule date.
+    if (saveClone.name === 'action-draft') {
+      saveClone.addEventListener('click', () => {
+        const publishDateInput = edit.querySelector('input[name="publishDate"]')
+        if (publishDateInput) {
+          publishDateInput.value = ''
+        }
+      })
+    }
+
+    if (referenceNode) {
+      contentEditBar.insertBefore(saveClone, referenceNode)
+    } else {
+      contentEditBar.appendChild(saveClone)
+    }
+
+    if (
+      saveElement.closest('.ContentEdit').classList.contains('is-new') ||
+      saveElement.getAttribute('name') === 'action-draft'
+    ) {
+      saveElement.parentNode.remove()
+    } else {
+      saveClone.style.display = 'none'
+    }
+  }
+  appendControls(list, find(edit, '.widget-contentCreate'), 'li')
+  appendControls(list, publishingExtraLeft, 'li')
+  appendControls(list, find(edit, '.widgetControls'), 'a')
+  appendControls(list, find(edit, '.widget-publishingExtra-right'), 'li')
+  appendControls(list, find(edit, '.widget-publishing > .widget-controls'), 'a')
+
+  const full = find(list, '.widgetControlsEditInFull')
+  if (full && !edit.closest('.Popup')) full.closest('li').remove()
+
+  const controls = create('div', {
+    className: 'ContentEdit-controls',
+  })
+
+  const toggle = create('button', {
+    className: 'ContentEdit-controlsToggle',
+    type: 'button',
+    title: tooltips.actions?.actions,
+    'aria-haspopup': 'menu',
+    'aria-expanded': 'false',
+    'aria-label': tooltips.actions?.contentEdit,
+    onclick: () => {
+      toggleMenu(list, toggle, controls)
+    },
+  })
+
+  setupMenuForAria(list, toggle)
+
+  controls.appendChild(toggle)
+  controls.appendChild(list)
+  controls.setAttribute('data-tether-anchor', '')
+  top.appendChild(controls)
+})
+
+onFind('.ContentEdit-controlsList .DraftAndReturnAction', (hiddenMenuItem) =>
+  hiddenMenuItem.setAttribute('aria-hidden', 'true'),
+)
+
+onFind('.ContentEdit-controlsList .NewDraftAndReturnAction', (hiddenMenuItem) =>
+  hiddenMenuItem.setAttribute('aria-hidden', 'true'),
+)
+
+// Restore.
+onFind('.ContentEdit-restore', (restore) => {
+  const controls = restore.closest('.ContentEdit-controls')
+  controls.parentNode.insertBefore(restore, controls)
+
+  const toggle = create(
+    'div',
+    {
+      className: 'ContentEdit-restoreToggle',
+      onclick: () => {
+        Tether.toggle(toggle, restore, () =>
+          restore.classList.toggle(
+            'is-open',
+            toggle.classList.toggle('is-open'),
+          ),
+        )
+      },
+    },
+    restore.getAttribute('data-restore-label') || 'restore',
+  )
+  restore.parentNode.insertBefore(toggle, restore)
+})
+
+// Workflow.
+onFind('.ContentEdit-workflow', (workflow) => {
+  const dialogContainer = workflow.closest('btu-dialog')
+
+  workflow.setAttribute('hidden', '')
+
+  const triggerCloseMenu = (event) => {
+    if (event.key === 'Escape') {
+      // When hosted by <dialog>, explicity call close().
+      // We can't rely on the jQuery popup close logic since workflow doesn't use it.
+      dialogContainer?.close(event)
+
+      toggle.click()
+      toggle.focus()
+    } else if (
+      event.key === 'Tab' &&
+      !document.activeElement.closest('.ContentEdit-workflow.is-open') &&
+      !document.activeElement.closest('.Popup.is-calendar') &&
+      !document.activeElement.matches('.Page') &&
+      document.activeElement !== toggle
+    ) {
+      toggle.click()
+    }
+  }
+
+  const popupClose = (event) => {
+    // in v5, the workflow popup logic is handled in dialog.ts
+    if (window.BRIGHTSPOT?.ui.cms.enableV5UI) return
+
+    const popup = event.target.closest('.Popup')
+    const proseMirror = find(
+      document,
+      '.ProseMirror-fullscreen-container:not(.hide)',
+    )
+
+    if (
+      (popup && !event.target.matches('.Popup-close')) ||
+      (proseMirror && event.target.closest('.ProseMirrorToolbar-action')) ||
+      event.target.closest('.ProseMirror-fullscreen-container') ||
+      event.target.matches('.rte2-toolbar-fullscreen')
+    ) {
+      toggle.click()
+    }
+  }
+
+  const first = find(
+    workflow,
+    '.ContentEdit-workflowWrapper > .ContentEdit-workflowBody',
+  )
+  let height = 0
+  const publish = find(workflow.parentNode, '.ContentEdit-publish')
+  const toggle = create(
+    'button',
+    {
+      'aria-expanded': false,
+      'aria-haspopup': true,
+      className: 'ContentEdit-workflowToggle',
+      onclick: () => {
+        Tether.toggle(toggle, workflow, () => {
+          const isOpen = toggle.classList.toggle('is-open')
+          const popup = find(document, '.Popup')
+          const proseMirror = find(
+            document,
+            '.ProseMirror-fullscreen-container:not(.hide)',
+          )
+
+          if (isOpen) {
+            workflow.removeAttribute('hidden')
+            window.addEventListener('keyup', triggerCloseMenu)
+            window.addEventListener('click', popupClose)
+          } else {
+            window.removeEventListener('keyup', triggerCloseMenu)
+            if (!popup && !proseMirror) {
+              window.removeEventListener('click', popupClose)
+            }
+          }
+
+          toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false')
+          return workflow.classList.toggle('is-open', isOpen)
+        })
+
+        if (publish) {
+          for (const child of findAll(
+            workflow,
+            '.ContentEdit-workflowWrapper',
+          )) {
+            child.classList.toggle(
+              'is-active',
+              child.getAttribute('data-name') === 'workflow',
+            )
+          }
+        }
+      },
+      type: 'button',
+    },
+    workflow.getAttribute('data-workflow-label') || 'Workflow',
+  )
+  workflow.parentNode.insertBefore(toggle, workflow)
+  workflow.closest('.ContentEdit').classList.add('is-workflow')
+
+  const buttons = workflow.querySelectorAll(
+    '.ContentEdit-workflowActions button[name="action-workflow"]',
+  )
+  const commentRequiredAttr = workflow.querySelector(
+    '.ContentEdit-workflowActions button[data-workflow-comment-required]',
+  )
+
+  if (commentRequiredAttr) {
+    onFind(
+      '.CIG-row[data-field-name="comment"] > .AutoExpand > textarea',
+      (textarea) => {
+        textarea.addEventListener('input', () => {
+          buttons.forEach((button) => {
+            if (button.disabled) {
+              if (textarea.value.trim() !== '') {
+                button.removeAttribute('disabled')
+              } else {
+                button.setAttribute('disabled', 'true')
+              }
+            } else if (textarea.value.trim() === '') {
+              button.setAttribute('disabled', 'true')
+            }
+          })
+        })
+      },
+    )
+  }
+
+  if (publish) {
+    find(
+      workflow,
+      '.ContentEdit-workflowWrapper[data-name="publishOverride"] > .ContentEdit-workflowBody',
+    ).appendChild(publish)
+    workflow.classList.add('is-publishOverride')
+
+    for (const link of findAll(
+      workflow,
+      '.ContentEdit-workflowWrapper > .ContentEdit-workflowLink',
+    )) {
+      link.addEventListener('click', (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        if (link.parentNode.getAttribute('data-name') === 'workflow') {
+          height = first.offsetHeight + '%'
+        }
+        for (const child of findAll(workflow, '.ContentEdit-workflowWrapper')) {
+          child.classList.toggle(
+            'is-active',
+            child.getAttribute('data-name') ===
+              link.getAttribute('data-action'),
+          )
+          if (child.classList.contains('is-active')) {
+            child.querySelector('.DateTimeInput, .AutoExpand textarea')?.focus()
+          }
+        }
+        find(
+          workflow,
+          '.ContentEdit-workflowWrapper:not([data-name="workflow"]) > .ContentEdit-workflowBody',
+        ).style.height = height
+      })
+    }
+  }
+})
+
+// Change publish button state when scheduling.
+onFind('.ContentEdit-publish .ContentEdit-publishButton', (button) => {
+  const publish = button.closest('.ContentEdit-publish')
+  const pdd = publish.querySelector('input[name="publishDate.date"]')
+  const pdt = publish.querySelector('input[name="publishDate.time"]')
+
+  if (!pdd || !pdt) {
+    return
+  }
+
+  const pdAnchor = publish.querySelector('.DateTimeInput')
+  const overrideMessage = find(
+    button.parentNode.parentNode,
+    '.ContentEdit-overrideMessage',
+  )
+
+  const oldButtonText = button.textContent
+
+  function onChange() {
+    if (pdd.value && pdt.value) {
+      publish.classList.add('is-scheduling')
+      button.innerText = button.getAttribute('data-schedule-label')
+      pdAnchor.classList.remove('is-empty')
+    } else {
+      publish.classList.remove('is-scheduling')
+      button.innerText = oldButtonText
+      pdAnchor.classList.add('is-empty')
+    }
+
+    if (overrideMessage) {
+      overrideMessage.innerHTML = publish.classList.contains('is-scheduling')
+        ? overrideMessage.getAttribute('data-schedule-message')
+        : overrideMessage.getAttribute('data-publish-message')
+    }
+  }
+
+  onChange()
+  pdd.addEventListener('change', onChange)
+  pdt.addEventListener('change', onChange)
+
+  const ns = publish.querySelector('select[name="newSchedule"]')
+
+  if (ns) {
+    ns.addEventListener('change', onChange)
+  }
+})
+
+// Change workflow transition button state when scheduling.
+onFind('.ContentEdit-workflowActions .ContentEdit-publishButton', (button) => {
+  const workflowActions = button.closest('.ContentEdit-workflowActions')
+  const pdd = workflowActions.querySelector(
+    'input.ContentEdit-workflowScheduleDate',
+  )
+  const pdt = workflowActions.querySelector(
+    'input.ContentEdit-workflowScheduleTime',
+  )
+
+  if (!pdd || !pdt) {
+    return
+  }
+
+  const pdAnchor = workflowActions.querySelector(
+    '.ContentEdit-workflowScheduleLink',
+  )
+  const oldButtonText = button.textContent
+
+  function onChange() {
+    if (pdd.value && pdt.value) {
+      workflowActions.classList.add('is-scheduling')
+      button.innerText = button.getAttribute('data-schedule-label')
+      if (pdAnchor) {
+        pdAnchor.classList.remove('is-empty')
+      }
+    } else {
+      workflowActions.classList.remove('is-scheduling')
+      button.innerText = oldButtonText
+      if (pdAnchor) {
+        pdAnchor.classList.add('is-empty')
+      }
+    }
+  }
+
+  onChange()
+  pdd.addEventListener('change', onChange)
+  pdt.addEventListener('change', onChange)
+})
+
+const ls = window.localStorage
+
+// Preview.
+let previewFrameIndex = 0
+
+//New Preview System
+onFind('.ContentEdit', (edit) => {
+  const top = edit.querySelector('.ContentEdit-top')
+  if (!top) return
+  const contentId = edit.getAttribute('data-object-id')
+  const container = edit.closest('.Page-content, .Popup')
+  if (!container) return
+  const contentEditPreview = container.querySelector('.ContentEdit-preview')
+  if (!contentEditPreview) return
+  contentEditPreview.setAttribute('inert', '')
+  const previewFrame = contentEditPreview.querySelector('.PreviewFrame')
+  if (!previewFrame) return
+  const previewTypeFrame = contentEditPreview.querySelector(
+    '.PreviewFrame-typeFrame',
+  )
+  if (!previewTypeFrame) return
+
+  window.addEventListener('viewport-device-changed', (evt) => {
+    window.requestAnimationFrame(() => {
+      getPreviewFrame(contentId)?.contentWindow?.postMessage(
+        {
+          type: 'BSP.ContentEdit.ViewportDeviceChanged',
+        },
+        '*',
+      )
+    })
+  })
+
+  const page = edit.closest('.Page.is-previewToEdit')
+  if (page) {
+    container.setAttribute('data-preview-menu', false)
+  }
+
+  // ViewPreview.
+  const resizePreview = repaint(() => {
+    const previewTypeDisplay = previewTypeFrame.querySelector(
+      '.PreviewFrame-typeDisplay',
+    )
+    if (previewTypeDisplay) {
+      const frames = previewTypeDisplay.querySelectorAll('iframe')
+
+      if (frames.length < 1) {
+        return
+      }
+
+      const frame = frames[0]
+      const widthSelect = previewFrame.querySelector('.deviceWidthSelect')
+      let frameWidth = frame.getBoundingClientRect().width
+
+      frame.style.transform = ''
+      frame.style.width = ''
+
+      if (widthSelect) {
+        if (container) {
+          container.style.removeProperty('--ContentEdit-previewWidth')
+
+          const option = widthSelect.options[widthSelect.selectedIndex]
+
+          if (option) {
+            frameWidth = parseInt(option.getAttribute('data-device-width'), 10)
+            frame.style.width = `${frameWidth}px`
+
+            if (frameWidth < previewFrame.getBoundingClientRect().width) {
+              container.style.setProperty(
+                '--ContentEdit-previewWidth',
+                `${frameWidth}px`,
+              )
+            }
+          }
+        }
+      } else {
+        if (container) {
+          //No width control, so reset back to the default
+          container.style.removeProperty('--ContentEdit-previewWidth')
+          frame.style.width = ``
+          frameWidth = 1920
+        }
+      }
+      selectedViewport = frameWidth
+      // Do calculations after styles have been set to get accurate measurement.
+      const scale = previewTypeDisplay.clientWidth / frameWidth
+      frame.style.transform = `scale(${scale})`
+      frame.setAttribute('previewScale', scale)
+      frame.style.setProperty('--PreviewFrame-scale', scale)
+
+      PreviewOverlay.getOverlayWindow(
+        previewTypeFrame
+          .querySelector(':scope iframe:first-of-type')
+          .getAttribute('data-container-id'),
+      )?.dispatchEvent(new Event('resize'))
+    }
+  })
+  let preview = new Preview(previewFrame, resizePreview)
+
+  const deletePreview = function () {
+    setTimeout(function () {
+      preview.deletePreview()
+    }, 500)
+  }
+
+  const addDefaultEvents = function () {
+    window.addEventListener('resize', resizePreview)
+    edit.addEventListener('brightspot-content-state-change', () =>
+      preview.updatePreview(),
+    )
+  }
+
+  const removeDefaultEvents = function () {
+    window.removeEventListener('resize', resizePreview)
+    edit.removeEventListener('brightspot-content-state-change', () =>
+      preview.updatePreview(),
+    )
+  }
+
+  window.ContentEditFields = new Map()
+
+  const rootContentEdit = container.querySelector(
+    '.content-edit > .ContentEdit .ContentEdit-left',
+  )
+  // Find all the form inputs that may be used in Preview.
+  if (rootContentEdit) {
+    onFind(
+      rootContentEdit,
+      `.inputContainer[data-tab="Main"]:not([type="hidden"])`,
+      (inputElement) => {
+        const id = inputElement.dataset.name
+        const removeInvisible =
+          inputElement.closest('.TC-unselected') &&
+          window.ContentEditFields.has(id)
+        if (removeInvisible) {
+          window.ContentEditFields.delete(id)
+        } else {
+          window.ContentEditFields.set(id, inputElement)
+        }
+      },
+    )
+  }
+
+  onFind(edit, ':scope .ContentEdit-previewButton', (previewButton) => {
+    previewButton.type = 'button'
+    previewButton.ariaLabel = container.classList.contains('is-previewing')
+      ? tooltips.preview.close
+      : tooltips.preview.open
+    previewButton.title = previewButton.ariaLabel
+    const toolbar = previewButton.closest('.ContentEdit-toolbar')
+    previewButton.onclick = function () {
+      if (container.classList.toggle('is-previewing')) {
+        if (container.classList.contains('Popup')) {
+          container
+            .querySelector(':scope > .Popup-content')
+            ?.classList.add('is-previewing')
+        }
+        preview.isVisible = true
+        contentEditPreview.removeAttribute('inert')
+        previewButton.title = tooltips.preview.close
+        previewButton.ariaLabel = tooltips.preview.close
+        announce(tooltips.preview.opened)
+        ls.removeItem('BSP.ContentEdit.previewClosed')
+        preview.reloadPreview()
+        addDefaultEvents()
+        const activeTab = toolbar.querySelector(
+          'button.is-active[data-right-tab]',
+        )
+        const shouldClosePanel = window.BRIGHTSPOT?.ui?.cms?.enableV5UI
+          ? container.offsetWidth < DUAL_PANEL_MIN_WIDTH
+          : true
+        if (shouldClosePanel && activeTab) {
+          const panel = edit.querySelector(
+            `.ContentEdit-right[data-right-tab="${activeTab.dataset.iconButtonName}"]`,
+          )
+          togglePanel(activeTab, panel, {
+            container: container,
+            updateStorage: true,
+          })
+        }
+      } else {
+        if (container.classList.contains('Popup')) {
+          container
+            .querySelector(':scope > .Popup-content')
+            ?.classList.remove('is-previewing')
+        }
+        preview.isVisible = false
+        contentEditPreview.setAttribute('inert', '')
+        previewButton.title = tooltips.preview.open
+        previewButton.ariaLabel = tooltips.preview.open
+        announce(tooltips.preview.closed)
+        ls.setItem('BSP.ContentEdit.previewClosed', 1)
+        deletePreview()
+        removeDefaultEvents()
+      }
+    }
+
+    if (
+      window.innerWidth >= 768 &&
+      !contentEditPreview.classList.contains('is-previewClosedByDefault') &&
+      !ls.getItem('BSP.ContentEdit.previewClosed') &&
+      !container.classList.contains('is-previewing')
+    ) {
+      previewButton.title = tooltips.preview.close
+      previewButton.onclick()
+    } else if (container.classList.contains('is-previewing')) {
+      /* Occasionally the local storage setting for previewClosed is out of sync with actual state.
+        In this case don't click the preview button but still update the preview and add the default events.
+      */
+      if (!preview.isVisible) preview.isVisible = true // ensure visibility flag is set for preview
+      preview.updatePreview()
+      addDefaultEvents()
+      contentEditPreview.removeAttribute('inert')
+    }
+  })
+})
+
+//Old Preview System
+onFind('.ContentEdit', (edit) => {
+  const top = edit.querySelector('.ContentEdit-top')
+  if (!top) return
+  const container = edit.closest('.Page-content, .Popup')
+  if (!container) return
+  const preview = container.querySelector('.ContentEdit-preview')
+  if (!preview) return
+  let previewControls = preview.querySelector('.ContentEdit-previewControls')
+  if (!previewControls) return
+  let previewForm = previewControls.querySelector('form[id]')
+  if (!previewForm) return
+  let previewInput = previewForm.querySelector('input[name="_previewObject"]')
+  const display = preview.querySelector('.ContentEdit-previewDisplay')
+  if (!display) return
+  const previewTypes = preview.querySelector('.ContentEdit-previewTypes')
+  let shouldRefresh = true
+  const mainObjectId = edit.getAttribute('data-object-id')
+
+  const page = edit.closest('.Page.is-previewToEdit')
+  if (page) {
+    container.setAttribute('data-preview-menu', false)
+  }
+
+  // Move the ComboInputs that make up the secondary form UI into a new row container.
+  onFind('.ContentEdit-preview', (frame) => {
+    // Query for two different selectors since the preview controls could be loaded initially, or async when previewTypes are present.
+    onFind(
+      frame,
+      [
+        '.widget-preview > .ContentEdit-previewControls',
+        '.frame.loaded[name^="previewControls"] .ContentEdit-previewControls',
+      ],
+      (container) => {
+        const target = container.querySelector('form:last-of-type')
+        if (target) {
+          const secondary = create('div', {
+            class: 'ContentEdit-secondaryPreviewControls',
+          })
+          onFind(
+            target,
+            ':scope select:not(.deviceWidthSelect) + .ComboInput',
+            (combo) => {
+              secondary.appendChild(combo)
+            },
+          )
+          target.appendChild(secondary)
+        }
+      },
+    )
+  })
+
+  // Make sure that the preview form data is always up to date.
+  edit.addEventListener('brightspot-content-state-change', (event) => {
+    for (const input of findAll(
+      previewControls,
+      'input[name="_previewObject"]',
+    )) {
+      input.value = event.detail
+    }
+  })
+
+  // Add the preview link.
+  const previewButton = document.createElement('A')
+  previewButton.className = 'ContentEdit-previewButton'
+  previewButton.href = '#'
+
+  const previewButtonWrapper = create(
+    'div',
+    { className: 'ContentEdit-previewButtonWrapper' },
+    [
+      create('div', { className: 'ContentEdit-previewButtonCircle' }),
+      previewButton,
+    ],
+  )
+
+  const resizePreview = repaint(() => {
+    const frames = display.querySelectorAll('iframe')
+
+    if (frames.length < 1) {
+      return
+    }
+
+    const frame = frames[0]
+    const widthSelect = document.querySelector('.deviceWidthSelect')
+    let frameWidth = frame.getBoundingClientRect().width
+
+    frame.style.transform = ''
+    frame.style.width = ''
+    container.style.removeProperty('--ContentEdit-previewWidth')
+
+    if (widthSelect) {
+      const option = widthSelect.options[widthSelect.selectedIndex]
+
+      if (option) {
+        frameWidth = parseInt(option.getAttribute('data-device-width'), 10)
+        frame.style.width = `${frameWidth}px`
+
+        if (frameWidth < preview.getBoundingClientRect().width) {
+          container.style.setProperty(
+            '--ContentEdit-previewWidth',
+            `${frameWidth}px`,
+          )
+        }
+      }
+    }
+    selectedViewport = frameWidth
+
+    // Do calculations after styles have been set to get accurate measurement.
+    frame.style.transform = `scale(${display.clientWidth / frameWidth})`
+  })
+
+  window.ContentEditFields = new Map()
+
+  const rootContentEdit = container.querySelector(
+    '.content-edit > .ContentEdit .ContentEdit-left',
+  )
+  // Find all the form inputs that may be used in Preview.
+  if (rootContentEdit) {
+    onFind(
+      rootContentEdit,
+      `.inputContainer[data-tab="Main"]:not([type="hidden"])`,
+      (inputElement) => {
+        const id = inputElement.dataset.name
+        const removeInvisible =
+          inputElement.closest('.TC-unselected') &&
+          window.ContentEditFields.has(id)
+        if (removeInvisible) {
+          window.ContentEditFields.delete(id)
+        } else {
+          window.ContentEditFields.set(id, inputElement)
+        }
+      },
+    )
+  }
+
+  const updatePreview = debounce(1000, () => {
+    if (previewInput && previewInput.value === '') {
+      return
+    }
+
+    const frame = document.createElement('IFRAME')
+
+    frame.name = 'ContentEdit-previewFrame' + previewFrameIndex++
+    display.insertBefore(frame, display.firstChild)
+    frame.setAttribute('data-container-id', mainObjectId)
+
+    const popup = frame.closest('.Popup')
+    const toggleAnimation = (force = null) => {
+      const root = popup ?? document
+      root
+        .querySelector('.ContentEdit-previewButtonWrapper')
+        ?.classList.toggle('is-animating', force)
+    }
+
+    toggleAnimation(true)
+
+    resizePreview()
+
+    frame.onload = function () {
+      const nextFrames = []
+
+      for (let f = frame; (f = f.nextElementSibling); ) {
+        if (
+          f.tagName === 'IFRAME' &&
+          !f.classList.contains('Preview-overlayFrame')
+        ) {
+          nextFrames.push(f)
+        }
+      }
+
+      const p = frame.parentNode
+      nextFrames.forEach((f) => p.removeChild(f))
+
+      toggleAnimation(false)
+    }
+
+    onRemove(frame, () => toggleAnimation(false))
+
+    previewForm.target = frame.name
+    previewForm.submit()
+  })
+
+  const deletePreview = function () {
+    setTimeout(function () {
+      let previewIframes = display.querySelectorAll(':scope > iframe')
+      previewIframes.forEach((iframe) => iframe.remove())
+    }, 500)
+  }
+
+  const addDefaultEvents = function () {
+    window.addEventListener('resize', resizePreview)
+    edit.addEventListener('brightspot-content-state-change', updatePreview)
+  }
+
+  const removeDefaultEvents = function () {
+    window.removeEventListener('resize', resizePreview)
+    edit.removeEventListener('brightspot-content-state-change', updatePreview)
+  }
+
+  if (previewTypes) {
+    onFind('.ContentEdit-previewTypesForm', (previewTypesForm) => {
+      const selection = previewTypesForm.querySelector(
+        'select[name="previewType"]',
+      )
+      shouldRefresh =
+        selection.selectedOptions[0].getAttribute('data-refresh') === 'true'
+
+      selection.onchange = function () {
+        display.innerHTML = ''
+        shouldRefresh =
+          selection.selectedOptions[0].getAttribute('data-refresh') === 'true'
+        updatePreview()
+      }
+
+      const previewTypeFrame = previewTypes.querySelector(
+        'div[name^="previewControls"]',
+      )
+      previewTypeFrame.onload = function () {
+        const previousInputValue = previewInput?.value
+
+        // Override local variable values
+        previewControls = previewTypeFrame.querySelector(
+          '.ContentEdit-previewControls',
+        )
+        previewForm = previewControls.querySelector('form[id]')
+        previewInput = previewForm.querySelector('input[name="_previewObject"]')
+
+        if (previewInput && previewInput.value === '') {
+          previewInput.value = previousInputValue
+        }
+
+        if (
+          container.classList.contains('is-previewing') &&
+          (shouldRefresh ||
+            selection.options[selection.selectedIndex].getAttribute(
+              'data-refresh',
+            ) === 'true')
+        ) {
+          updatePreview()
+          addDefaultEvents()
+        } else {
+          removeDefaultEvents()
+        }
+      }
+    })
+  }
+
+  previewButton.onclick = function () {
+    if (container.classList.toggle('is-previewing')) {
+      ls.removeItem('BSP.ContentEdit.previewClosed')
+      ls.removeItem('BSP.ContentEdit.rightPanel')
+      if (!window.BRIGHTSPOT?.ui?.cms?.enableV5UI) {
+        container.style.setProperty('--ContentEdit-rightWidth', '0px')
+      }
+      preview.removeAttribute('inert')
+      if (shouldRefresh) {
+        updatePreview()
+        addDefaultEvents()
+      }
+    } else {
+      ls.setItem('BSP.ContentEdit.previewClosed', 1)
+      preview.setAttribute('inert', '')
+      if (shouldRefresh) {
+        removeDefaultEvents()
+        deletePreview()
+      }
+    }
+
+    return false
+  }
+
+  top.insertBefore(previewButtonWrapper, top.firstChild)
+
+  if (
+    window.innerWidth >= 768 &&
+    !preview.classList.contains('is-previewClosedByDefault') &&
+    !ls.getItem('BSP.ContentEdit.previewClosed')
+  ) {
+    previewButton.onclick()
+  }
+})
+
+// Display the current overlay in the title and allow it to be changed.
+onFind('.ContentEdit-title', (title) => {
+  const form = title.closest('form')
+
+  if (!form) return
+
+  // The title is reparented because it needs to stay put when the "leftSide" animates when opening/closing live preview.
+  form.insertAdjacentElement('afterbegin', title)
+
+  const list = find(title.closest('.content-edit'), '.ContentEdit-overlayList')
+  if (!list) return
+
+  title.insertBefore(
+    create(
+      'button',
+      {
+        className: 'ContentEdit-overlay',
+        type: 'button',
+        'aria-haspopup': 'true',
+        'aria-expanded': 'false',
+        'aria-label': find(list, 'li.selected').textContent,
+        onclick: (e) => {
+          toggleMenu(list, e.target)
+        },
+      },
+      find(list, 'li.selected').textContent,
+    ),
+    title.firstChild,
+  )
+
+  const button = title.querySelector('.ContentEdit-overlay')
+  setupMenuForAria(list, button)
+})
+
+const getPreviewFrame = (mainObjectId) => {
+  let frame
+  if (!mainObjectId) {
+    frame = document.querySelector(
+      '.ContentEdit-previewDisplay iframe:first-of-type',
+    )
+    if (!frame) {
+      frame = document.querySelector(
+        '.PreviewFrame-typeDisplay iframe:first-of-type',
+      )
+    }
+  } else {
+    frame = document.querySelector(
+      `iframe[data-container-id="${mainObjectId}"]`,
+    )
+  }
+  return frame
+}
+
+// TODO: delete, `is-overlaid` no longer used
+// Add overlaid field count to the tabs.
+onFind('.CIG > .TabBar', (bar) => {
+  const cig = bar.closest('.CIG')
+
+  onFind(cig, '.CIG-row.is-overlaid', (row) => {
+    const tab = row.dataset.tab
+    const item = find(bar, `:scope > .TabBar-item[data-tab="${tab}"]`)
+    if (!item) return
+
+    let count = 0
+
+    for (const row of findAll(cig, `:scope > [data-tab="${tab}"]`)) {
+      count += row.classList.contains('is-overlaid')
+        ? 1
+        : findAll(row, '.is-overlaid').length
+    }
+
+    const badge = find(item, ':scope > .Badge')
+
+    if (count > 0) {
+      if (badge) {
+        badge.textContent = count
+      } else {
+        insertLast(create('div', { className: 'Badge' }, count), item)
+      }
+    } else {
+      badge.remove()
+    }
+  })
+})
+
+// Move workstream to the top.
+onFind(
+  ['.Page-content .publishing-workflow', '.Popup .publishing-workflow'],
+  (message) => {
+    const progressText = find(message, ':scope > .progress')
+    const actions = find(message, ':scope > ul')
+    const skip = find(actions, '.icon-step-forward')
+    const stop = find(actions, '.icon-stop')
+
+    message.closest('.Page-content, .Popup').classList.add('is-workstream')
+    message.classList.add('ContentEdit-workstreamMessage')
+    message.removeAttribute('style')
+    progressText.classList.add('ContentEdit-workstreamProgressText')
+    progressText.removeAttribute('style')
+    actions.classList.add('ContentEdit-workstreamActions')
+    skip.classList.add('ContentEdit-workstreamSkip')
+    stop.classList.add('ContentEdit-workstreamStop')
+
+    insertFirst(
+      message,
+      insertBefore(
+        create(
+          'div',
+          { className: 'ContentEdit-workstream' },
+          create(
+            'div',
+            { className: 'ContentEdit-workstreamProgress' },
+            find(progressText, ':scope > .progressBar'),
+            progressText,
+          ),
+          actions,
+        ),
+        message,
+      ),
+    )
+  },
+)
+
+// Finds the TabBar trigger element given a descendant element.
+const findTabs = (el) => {
+  if (!el) return
+
+  let elem = el
+  let tab = null
+
+  let selectedTabs = []
+
+  const queryForTab = function (el) {
+    return !el ? null : el.closest('[data-tab]')
+  }
+
+  for (;;) {
+    tab = queryForTab(elem)
+    if (tab) {
+      const tbName = tab.getAttribute('data-tab')
+      const tbBar = tab.parentNode.querySelector(':scope > .TabBar')
+      if (tbBar) {
+        selectedTabs.push(tbBar.querySelector(`[data-tab="${tbName}"]`))
+      }
+      elem = tab.parentNode
+    } else {
+      break
+    }
+  }
+
+  return selectedTabs
+}
+
+// Triggers Tab selection given a descendant element.
+const selectTab = (descendantEl) => {
+  const tabs = findTabs(descendantEl)
+
+  tabs.forEach((tab) => {
+    if (tab && !tab.classList.contains('is-selected')) {
+      tab.click()
+    }
+  })
+}
+
+const findEditUIByOverlay = (id, name) => {
+  const cig = find(document, `.CIG-row[data-name='${id}/${name}']`)
+  const eig = find(document, `.EIG-title[data-object-id='${id}']`)
+  const option = find(
+    document,
+    `option[value='${id}'], input.objectId[value='${id}']`,
+  )
+  const rteEnhancement = find(
+    document,
+    `[data-rte-container] .Enhancement[data-state*="${id}"]`,
+  )
+  const repeatableCig = find(document, `.RCIG-title[data-object-id="${id}"]`)
+  if (cig) {
+    // Try to find a more specific RCS...
+    const rcs = cig.querySelector(
+      `:scope .RCS ol[data-sortable-input-name='${id}/${name}']`,
+    )
+    if (rcs) {
+      return { type: 'RCS', element: rcs }
+    } else {
+      return { type: 'CIG', element: cig }
+    }
+  } else if (option) {
+    return { type: 'OPTION', element: option }
+  } else if (rteEnhancement) {
+    return { type: 'ENHANCEMENT', element: rteEnhancement }
+  } else if (eig) {
+    return { type: 'EIG', element: eig }
+  } else if (repeatableCig) {
+    return { type: 'RCIG', element: repeatableCig }
+  } else {
+    console.debug('Form element does not exist for the preview overlay')
+    return null
+  }
+}
+
+const openFormFieldPopup = (element, modal, edit, label) => {
+  if (element.classList.contains('is-new-item')) {
+    element.classList.remove('is-new-item')
+  }
+  const container = element.closest('.is-preview-menu')
+  if (!container) {
+    return
+  }
+  const parent = element.parentNode
+  let popupContainer
+  const nextSibling = element.nextElementSibling
+  const closeField = () => {
+    modal.classList.remove('is-visible')
+    popupContainer.removeChild(actions)
+    if (popupHeading) {
+      popupContainer.removeChild(popupHeading)
+    }
+    const clear =
+      element.classList.contains('RCS-item') &&
+      element.querySelector(':scope > .ContentSelector-clear')
+    if (clear) {
+      clear.classList.remove('is-visible')
+    }
+    parent.insertBefore(element, nextSibling)
+    popupContainer.remove()
+  }
+  const cancelButton = create('div', {
+    className: 'Preview-popupCancel',
+    onclick: (event) => {
+      closeField()
+    },
+  })
+  const saveButton = document.createElement('button')
+  saveButton.classList.add('is-save')
+  saveButton.classList.add('is-dominant')
+  saveButton.textContent = 'Save & Close'
+  const actions = create('div', { className: 'ActionBar' })
+  actions.appendChild(saveButton)
+  let popupHeading
+  if (label) {
+    popupHeading = create('div', { className: 'Preview-popupHeading' }, label)
+  }
+  popupContainer = create(
+    'div',
+    {
+      className: 'Preview-popup is-previewEditing',
+    },
+    popupHeading,
+    element,
+    cancelButton,
+    actions,
+  )
+  edit.appendChild(popupContainer)
+  saveButton.addEventListener('click', (event) => {
+    closeField()
+  })
+  modal.classList.add('is-visible')
+}
+
+window.addEventListener('message', async ({ data }) => {
+  if (typeof data !== 'object') return
+
+  const id = data.id
+  const type = data.type
+  const name = data.name
+
+  if (type === 'BSP.Preview.onChangedHeight') {
+    const edit = document.querySelector(
+      `.ContentEdit[data-object-id="${data.previewContainerId}"]`,
+    )
+    if (edit) {
+      const container = edit.closest('.Page-content, .Popup')
+      const contentEditPreview = container?.querySelector(
+        '.ContentEdit-preview',
+      )
+      contentEditPreview?.style.setProperty(
+        '--PreviewFrame-height',
+        `${data.height}px`,
+      )
+    }
+  } else if (type === 'BSP.Preview.OverlayClick') {
+    const parentFields = data.parentFields
+    const hasFormField = data.hasFormField
+
+    const scrollToEditUI = () => {
+      const ui = findEditUIByOverlay(id, name)
+      if (!ui) return
+      findAll(document.body, '.RCIG-item').forEach((item) => {
+        const title = find(item, ':scope > .RCIG-title')
+        if (!title) return
+        if (item.contains(ui.element) || item.isEqualNode(ui.element)) {
+          // expand collapsed RCIG-items that contain the clicked element or are the element
+          if (item.classList.contains('is-collapsed')) {
+            title.click()
+          }
+        } else if (!item.classList.contains('is-collapsed')) {
+          // collapse all the other expandable items that do not contain the clicked element
+          // or are not the element itself
+          title.click()
+        }
+      })
+      const cigRow = ui.element.closest('.CIG-row')
+      if (cigRow && cigRow.classList.contains('is-inHiddenCluster')) {
+        for (let n = cigRow; (n = n.previousElementSibling); ) {
+          if (n.classList.contains('CIG-title')) {
+            n.click()
+            break
+          }
+        }
+      }
+      selectTab(ui.element)
+      const evt = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+      })
+      if (ui.type === 'CIG' || ui.type === 'EIG') {
+        // Refine the match if we can identify the item that this CIG is within.
+        scrollIntoView(ui.element, { align: { top: 0, topOffset: 10 } })
+        const elmFocus = ui.element.querySelector('.CIG-small')
+        if (elmFocus) {
+          onFind(
+            elmFocus,
+            [
+              ':scope > btu-input input',
+              ':scope > textarea',
+              ':scope > btu-textarea-input > textarea',
+              ':scope > .ComboInput',
+              ':scope > input',
+            ],
+            (inputField) => {
+              const proseMirror = elmFocus.querySelector(
+                '.ProseMirrorContainer > .ProseMirror',
+              )
+              if (proseMirror) {
+                proseMirror.focus()
+              } else {
+                inputField.focus()
+              }
+            },
+          )
+        }
+      } else if (ui.type === 'RCS') {
+        const targetEl = ui.element.closest('.CIG-small')
+        if (targetEl.classList.contains('RCS')) {
+          let rcsTarget = ui.element.closest('.RCS-item') ?? targetEl
+          scrollIntoView(rcsTarget, {
+            align: { top: 0, topOffset: 10 },
+          })
+          rcsTarget.dispatchEvent(evt)
+        } else {
+          if (targetEl) {
+            onFind(targetEl, ':scope > .ComboInput', (inputField) => {
+              inputField.focus()
+            })
+          }
+          scrollIntoView(ui.element.closest('.CIG-row'), {
+            align: { top: 0, topOffset: 10 },
+          })
+        }
+        ui.element.dispatchEvent(evt)
+      } else if (ui.type === 'OPTION') {
+        const targetEl = ui.element.closest('.CIG-small')
+        if (targetEl.classList.contains('RCS')) {
+          let rcsTarget = ui.element.closest('.RCS-item') ?? targetEl
+          scrollIntoView(rcsTarget, {
+            align: { top: 0, topOffset: 0 },
+          })
+          rcsTarget.dispatchEvent(evt)
+        } else {
+          if (targetEl) {
+            onFind(targetEl, ':scope > .ComboInput', (inputField) => {
+              inputField.focus()
+            })
+          }
+          scrollIntoView(ui.element.closest('.CIG-row'), {
+            align: { top: 0, topOffset: 10 },
+          })
+        }
+        ui.element.dispatchEvent(evt)
+      } else if (ui.type === 'RCIG') {
+        scrollIntoView(ui.element, {
+          align: { top: 0, topOffset: 10 },
+        })
+      } else if (ui.type === 'ENHANCEMENT') {
+        let topOffset,
+          toolbarHeight = 0
+        const rteContainer = ui.element.closest('.ProseMirrorContainer')
+        if (rteContainer) {
+          toolbarHeight = rteContainer.querySelector(
+            '.ProseMirrorToolbar',
+          )?.offsetHeight
+        }
+        let marginTop = parseInt(window.getComputedStyle(ui.element).marginTop)
+        if (!isNaN(marginTop)) {
+          topOffset = Math.abs(toolbarHeight - marginTop)
+        }
+        scrollIntoView(ui.element, {
+          align: { top: 0, topOffset: topOffset },
+        })
+      }
+
+      if (data.behavior) {
+        let parentEl = ui.element
+        if (ui.type === 'OPTION' && parentEl.closest('.RCS-item')) {
+          parentEl = parentEl.closest('.RCS-item')
+        }
+        const sharedElement = parentEl.querySelector('.ContentSelector-edit')
+        sharedElement?.click()
+      }
+      if (!hasFormField) {
+        parentFields.push({
+          id: data.id,
+          name: data.name,
+        })
+        const overlayWindow = PreviewOverlay.getOverlayWindow(
+          data.previewContainerId,
+        )
+        overlayWindow.postMessage(
+          {
+            type: 'BSP.Preview.UpdateOverlays',
+            overlays: parentFields,
+          },
+          '*',
+        )
+      }
+    }
+
+    const loadEditUI = (parentData) => {
+      const parentKey = parentData.key
+      const { id, name, overlayType, isEnhancement } = data
+      let selector
+      if (isEnhancement) {
+        selector = `.CIG-row[data-name='${parentKey}'] .ProseMirrorContainer`
+      } else if (overlayType === 'bspField') {
+        selector = `.CIG-row[data-name='${id}/${name}']`
+      } else if (overlayType === 'bspModule') {
+        if (parentData.ui.type === 'RCS') {
+          selector = `input.objectId[value="${id}"]`
+        } else {
+          selector = `.repeatableLabel[data-object-id="${id}"]`
+        }
+      }
+
+      onFind(selector, () => {
+        scrollToEditUI()
+      })
+    }
+
+    if (!hasFormField) {
+      // if there is no field yet expand all the collapsed parent fields
+      let promises = []
+      parentFields.forEach((field, index) => {
+        const { id, name, type } = field
+        let selector = ''
+        if (type === 'bspField') {
+          selector = `.CIG-row[data-name='${id}/${name}']`
+        } else if (type === 'bspModule') {
+          selector = `.repeatableLabel[data-object-id="${id}"]`
+        }
+        const expandItem = (resolve, reject) => {
+          onFind(selector, () => {
+            let ui = findEditUIByOverlay(id, name)
+            if (!ui) {
+              reject(
+                'Could not load edit ui: fields for one or more parent overlay(s) are missing in the form',
+              )
+              return
+            }
+            const editElement = ui.element
+            scrollIntoView(editElement, { align: { top: 0, topOffset: 10 } })
+
+            if (data.isEnhancement) {
+              /* Find RTE enhancement and scroll it into view */
+              onRTEReady((rte) => {
+                const enhancementElement = rte.view.dom.querySelector(
+                  `[data-state*='_id":"${data.id}']`,
+                )
+
+                if (enhancementElement) {
+                  scrollIntoView(enhancementElement)
+                  enhancementElement.click()
+                }
+              }, editElement.querySelector('textarea.richtext'))
+            }
+
+            if (ui.type === 'RCIG' && editElement?.closest('.is-collapsed')) {
+              editElement.click()
+            }
+            const cigRow = editElement.closest('.CIG-row')
+            if (cigRow && cigRow.classList.contains('is-inHiddenCluster')) {
+              for (let n = cigRow; (n = n.previousElementSibling); ) {
+                if (n.classList.contains('CIG-title')) {
+                  n.click()
+                  break
+                }
+              }
+            }
+
+            if (resolve) {
+              resolve({ ui: ui, key: id + '/' + name })
+            }
+          })
+        }
+        promises.push(
+          new Promise((resolve, reject) => {
+            expandItem(resolve, reject)
+          }),
+        )
+      })
+
+      Promise.all(promises)
+        .then((parents) => {
+          const immediateParent = parents[parents.length - 1]
+          loadEditUI(immediateParent)
+        })
+        .catch((error) => {
+          console.debug(error)
+        })
+    } else {
+      // scroll to the edit element
+      scrollToEditUI()
+    }
+  } else if (type === 'BSP.Preview.ContentLoad') {
+    const edit = document.querySelector(
+      `.ContentEdit[data-object-id="${data.previewContainerId}"]`,
+    )
+    const isPreviewOpen =
+      edit?.closest('.Page-content.is-previewing') ||
+      edit?.closest('.Popup.is-previewing')
+    const activeElement = document.activeElement
+    let isPreviewFocused =
+      activeElement.closest('.Preview-overlayFrame') ||
+      activeElement.closest(
+        `iframe[data-container-id="${data.previewContainerId}"]`,
+      )
+    // check to see if the preview pane is open and user is hovering over it
+    let deferPreviewInit = !isPreviewOpen || !isPreviewFocused ? true : false
+    const previewFrame = getPreviewFrame(data.previewContainerId)
+    // update data-defer-init attribute for preview & preview overlay frame everytime preview refreshes
+    // to check if the dom parsing and overlay rendering should run
+    previewFrame?.contentWindow.postMessage(
+      {
+        type: 'BSP.Preview.UpdateInitToggle',
+        deferPreviewInit,
+      },
+      '*',
+    )
+    let overlayWindow = PreviewOverlay.getOverlayWindow(data.previewContainerId)
+    overlayWindow?.postMessage(
+      {
+        type: 'BSP.Preview.UpdateInitToggle',
+        deferPreviewInit,
+      },
+      '*',
+    )
+  } else if (type === 'BSP.Preview.DOMParsed') {
+    // Check if the preview is open before rendering the overlays
+    const edit = document.querySelector(
+      `.ContentEdit[data-object-id="${data.previewContainerId}"]`,
+    )
+    const isPreviewToEditParticipating =
+      edit?.closest('.Page-content.is-previewing') ||
+      edit?.closest('.Popup.is-previewing')
+
+    if (!isPreviewToEditParticipating) return
+
+    // Determine which markers should result in Overlays being rendered.
+    let filteredOverlays = new Map()
+
+    const updateOverlays = (key, overlay, parent) => {
+      filteredOverlays.set(key, overlay)
+      if (!parent) return
+      if (parent.type === 'bspModule' && !parent.dimensions) {
+        if (parent.childKeys) {
+          parent.childKeys.push(key)
+        } else {
+          parent.childKeys = [key]
+        }
+      }
+    }
+
+    // Recursive method to find all the form fields and connect them to p2e overlays
+    const getEditElements = (
+      fieldId,
+      parentContainer,
+      parentObj,
+      parentKey,
+      overlayKey,
+    ) => {
+      const isRoot = fieldId === data.previewContainerId
+      const overlay = filteredOverlays.get(overlayKey)
+
+      const rcig = parentContainer.querySelector(
+        `.RCIG-title[data-object-id="${fieldId}"]`,
+      )
+      const eig = parentContainer.querySelector(
+        `.EIG-title[data-object-id="${fieldId}"]`,
+      )
+
+      let contentEditElements
+      let elm
+
+      const objectInput = parentContainer.querySelector(
+        `.objectInputs[data-object-id="${fieldId}"]`,
+      )
+      // For form fields inside a collapsible cluster/widget that are not yet loaded
+      // Will be using data state object to setup overlays map and their hierarchy
+      if ((rcig || eig) && !objectInput) {
+        let childDataKeys = []
+        const immediateParent = parentContainer.querySelector(
+          `input[name="${parentKey}.id"][value="${fieldId}"]`,
+        )?.parentNode
+        const val = immediateParent?.querySelector(
+          `input[name="${parentKey}.data"]`,
+        ).value
+        if (val) {
+          const childData = JSON.parse(val)
+          const recursiveSearch = (obj, keys, parentObj, isEnhancement) => {
+            let moduleKey = parentObj.children?.find((chKey) => {
+              return chKey.split('/')[0] === obj._id
+            })
+            let realParent = parentObj
+            if (moduleKey) {
+              const pOb = data.overlays.get(moduleKey)
+              let overlayData = {
+                id: moduleKey.split('/')[0],
+                hasFormField: false,
+                parentKey: parentObj.id + '/' + parentObj.name,
+                parentRoot: parentObj.parentRoot,
+                depth: parentObj.depth + 1,
+                type: 'bspModule',
+                name: moduleKey.split('/')[1],
+              }
+              if (pOb) {
+                overlayData = Object.assign(overlayData, pOb)
+              }
+              updateOverlays(moduleKey, overlayData, parentObj)
+              realParent = overlayData
+            }
+            keys.forEach((k) => {
+              if (!/^_|^theme./.test(k)) {
+                let o
+                let isCigSelect
+                let isDropdown
+                const val = obj[k]
+                if (obj._id) {
+                  const cKey = obj._id + '/' + k
+                  childDataKeys.push(cKey)
+                  const extn = data.overlays.get(cKey)
+                  if (extn) {
+                    if (val && typeof val === 'object') {
+                      isCigSelect = Object.keys(val).includes(extn.name)
+                      const relevantKey = Object.keys(val).find((rk) => {
+                        return !/^_|^theme./.test(rk)
+                      })
+                      if (!relevantKey) {
+                        isDropdown = true
+                      }
+                    }
+                    if (!isCigSelect || isEnhancement) {
+                      o = Object.assign(
+                        {
+                          parentKey: realParent.id + '/' + realParent.name,
+                          parentRoot: realParent.parentRoot,
+                          depth: realParent.depth + 1,
+                          isInitialized: true,
+                          hasFormField: false,
+                          isShared: obj[k]._ref ? cKey + '_acEdit' : null,
+                          isEnhancement: !!isEnhancement,
+                          isDropdown,
+                        },
+                        extn,
+                      )
+                      updateOverlays(cKey, o, realParent)
+                    }
+                  }
+                }
+                if (!isEnhancement) {
+                  if (isCigSelect) {
+                    o = realParent
+                  } else if (!o) {
+                    o = parentObj
+                  }
+                  if (val) {
+                    if (typeof val === 'object') {
+                      if (Array.isArray(val)) {
+                        val.forEach((child) => {
+                          if (child._ref) {
+                            const rcsKey = o.children?.find((chKey) => {
+                              return child._ref === chKey.split('/')[0]
+                            })
+                            const rcsExtn = data.overlays.get(rcsKey)
+                            if (rcsExtn) {
+                              const rcsOvr = Object.assign({
+                                parentKey: o.id + '/' + o.name,
+                                parentRoot: o.parentRoot,
+                                depth: realParent.depth + 1,
+                                isInitialized: true,
+                                hasFormField: false,
+                                isShared:
+                                  o.id +
+                                  '/' +
+                                  o.name +
+                                  '_' +
+                                  rcsExtn.id +
+                                  '_acEdit',
+                              })
+                              updateOverlays(rcsKey, rcsOvr, o)
+                            }
+                          } else {
+                            recursiveSearch(child, Object.keys(child), o)
+                          }
+                        })
+                      } else {
+                        recursiveSearch(val, Object.keys(val), o)
+                      }
+                    } else if (typeof val === 'string') {
+                      const parser = new DOMParser(),
+                        doc = parser.parseFromString(val, 'text/html'),
+                        elementsWithState = doc.querySelectorAll('[data-state]')
+
+                      elementsWithState.forEach((element) => {
+                        const dataState = element.getAttribute('data-state'),
+                          enhancementState = JSON.parse(dataState)
+
+                        if (enhancementState) {
+                          recursiveSearch(
+                            enhancementState,
+                            Object.keys(enhancementState),
+                            o,
+                            true,
+                          )
+                        }
+                      })
+                    }
+                  }
+                }
+              }
+            })
+          }
+          recursiveSearch(childData, Object.keys(childData), overlay)
+        }
+      } else {
+        // All form fields that are already loaded in the DOM
+        let realParent = parentObj
+        let realParentKey = parentKey
+        elm = objectInput || parentContainer
+        contentEditElements = [
+          ...elm.querySelectorAll(
+            `div.inputContainer[data-name^="${fieldId}"]:not([hidden])`,
+          ),
+        ].filter((inputElement) => {
+          return !inputElement.closest('.TC-unselected')
+        })
+        if (rcig || eig) {
+          // these are the collapsible containers
+          const pOb = data.overlays.get(overlayKey)
+          realParentKey = overlayKey
+          let overlayData = {
+            id: overlayKey.split('/')[0],
+            hasFormField: true,
+            parentKey: parentKey,
+            parentRoot: parentObj.parentRoot,
+            depth: parentObj.depth + 1,
+            type: 'bspModule',
+            name: overlayKey.split('/')[1],
+          }
+          if (pOb) {
+            overlayData = Object.assign(overlayData, pOb)
+          }
+          updateOverlays(overlayKey, overlayData, realParent)
+          realParent = overlayData
+        }
+        contentEditElements.forEach((contentEditElement) => {
+          const key = contentEditElement.dataset.name
+          let ovr
+          const extn = data.overlays.get(key)
+          let isCigSelect
+          let isDropdown
+          if (!extn || extn.isEmpty) return
+          if (extn.type === 'bspField') {
+            isCigSelect =
+              !isRoot &&
+              contentEditElement.querySelector(`select[name="${key}.id"]`)
+            isDropdown = contentEditElement.querySelector(
+              `select[name="${key}.id"]`,
+            )
+            const sharedElement = isShared(
+              key,
+              contentEditElement,
+              extn.fieldValue?.split('/')[0],
+            )
+            const previewElement = extn.hasElement
+            if (sharedElement && !previewElement) {
+              return
+            }
+            let editAction = `${key}_acEdit`
+            if (sharedElement) {
+              sharedElement.dataset.previewAction = editAction
+            }
+            ovr = Object.assign(
+              {
+                isShared: sharedElement ? editAction : false,
+                isLocked: isLocked(contentEditElement),
+                isInitialized: true,
+                depth: isRoot ? 1 : realParent.depth + 1,
+                parentRoot: isRoot ? key : realParent.parentRoot,
+                parentKey: isRoot ? null : realParentKey,
+                hasFormField: true,
+                isDropdown,
+              },
+              extn,
+            )
+            if (!isCigSelect) {
+              updateOverlays(key, ovr, realParent)
+            }
+          } else if (extn.type === 'bspModule') {
+            if (extn.referencesRichText) {
+              const enhancements =
+                parentContainer.querySelectorAll('.Enhancement')
+              enhancements.forEach((enhancement) => {
+                if (enhancement.dataset.state) {
+                  const state = JSON.parse(enhancement.dataset.state)
+                  const id = state._id
+                  if (id === extn.id) {
+                    ovr = Object.assign(
+                      {
+                        isShared: false,
+                        isInitialized: true,
+                        depth: isRoot ? 1 : realParent.depth + 1,
+                        parentRoot: realParent.parentRoot,
+                        parentKey: realParentKey,
+                        hasFormField: true,
+                      },
+                      extn,
+                    )
+                    updateOverlays(key, ovr, realParent)
+                  }
+                }
+              })
+            } else {
+              // currently a no-op for bspModules which are not associated with rich text.
+            }
+          }
+          let children = []
+          if (ovr.children) {
+            children = [...ovr.children]
+          } else if (!ovr.isShared && ovr.fieldValue) {
+            children.push(ovr.fieldValue)
+          }
+          const rcs = contentEditElement.querySelector(
+            `.RCS ol[data-sortable-input-name='${key}']`,
+          )
+          // Check if this is a rich text field with enhancements
+          if (ovr.internalType === 'text') {
+            const updateEnhancements = function (source) {
+              const parser = new DOMParser(),
+                doc = parser.parseFromString(source, 'text/html'),
+                elementsWithState = doc.querySelectorAll('[data-state]')
+
+              elementsWithState.forEach((element) => {
+                const dataState = element.getAttribute('data-state'),
+                  enhancementState = JSON.parse(dataState)
+
+                if (enhancementState) {
+                  Object.keys(enhancementState).forEach((k) => {
+                    if (!/^_|^theme./.test(k)) {
+                      const enhancementKey = enhancementState._id + '/' + k
+                      const extn = data.overlays.get(enhancementKey)
+                      if (extn && !extn.isInitialized) {
+                        updateOverlays(
+                          enhancementKey,
+                          Object.assign(
+                            {
+                              behaviors: false,
+                              isLocked: false,
+                              isInitialized: true,
+                              isRoot: false,
+                              parentKey: key,
+                              depth: ovr.depth + 1,
+                              hasFormField: false,
+                              isEnhancement: true,
+                              parentRoot: ovr.parentRoot,
+                            },
+                            extn,
+                          ),
+                          ovr,
+                        )
+                      }
+                    }
+                  })
+                }
+              })
+            }
+
+            const rteContainer = contentEditElement.querySelector(
+                '[data-rte-container="true"]',
+              ),
+              textarea = contentEditElement.querySelector('textarea')
+
+            if (rteContainer && textarea) {
+              if (rteContainer.dataset.value) {
+                updateEnhancements(rteContainer.dataset.value)
+              } else if (textarea.value) {
+                // Fallback on textarea value if the rteContainer is not scrolled into
+                updateEnhancements(textarea.value)
+              }
+            }
+          }
+          const rcsItems = rcs?.querySelectorAll(`input[name="${key}"]`)
+          children?.forEach((childKey, idx) => {
+            const existing = data.overlays.get(childKey)
+            let childId = childKey.split('/')[0]
+            let rcsItem
+            let isSharedItem
+            let editAction = `${key}_${childId}_acEdit`
+            if (rcs) {
+              rcsItem = [...rcsItems].find((rItem) => {
+                return rItem.value === childId
+              })
+              isSharedItem = isShared(childId, rcsItem, undefined, key)
+              if (isSharedItem) {
+                isSharedItem.dataset.previewAction = editAction
+              }
+            }
+            const overlayData = {
+              id: childId,
+              isInitialized: true,
+              parentKey: key,
+              parentRoot: ovr.parentRoot,
+              depth: ovr.depth + 1,
+              type: 'bspModule',
+              name: childKey.split('/')[1],
+              isShared: rcsItem && isSharedItem ? editAction : false,
+              hasFormField: true,
+            }
+            if (rcsItem && rcsItem.dataset.label) {
+              overlayData.label = rcsItem.dataset.label
+            }
+            if (!isCigSelect) {
+              if (existing) {
+                updateOverlays(
+                  childKey,
+                  Object.assign(overlayData, existing),
+                  ovr,
+                )
+              } else {
+                updateOverlays(childKey, overlayData, ovr)
+                data.overlays.set(childKey, Object.assign({}, overlayData))
+              }
+              getEditElements(
+                childKey.split('/')[0],
+                contentEditElement,
+                ovr,
+                key,
+                childKey,
+              )
+            } else {
+              getEditElements(
+                childKey.split('/')[0],
+                contentEditElement,
+                realParent,
+                realParentKey,
+                childKey,
+              )
+            }
+          })
+        })
+      }
+    }
+    getEditElements(data.previewContainerId, document)
+    // filters out dropdown fields that do not have children preview elements
+    const dropdownOverlays = [...filteredOverlays.values()].filter((t) => {
+      return t.isDropdown && !t.linked && !t.isShared
+    })
+
+    dropdownOverlays.forEach((s) => {
+      const k = s.id + '/' + s.name
+      const hasAChild = [...filteredOverlays.values()].find((t) => {
+        return t.parentKey === k && t.dimensions
+      })
+      if (!hasAChild) {
+        filteredOverlays.delete(k)
+      } else {
+        delete s.isDropdown
+      }
+    })
+
+    if (previewOverlays.get(data.previewContainerId)) {
+      // reload preview overlay frame for every preview refresh
+      let prevFrame = getPreviewFrame(data.previewContainerId)
+      previewOverlays
+        .get(data.previewContainerId)
+        ?._overlayFrame.contentDocument.getElementsByTagName('html')[0]
+        .style.setProperty(
+          '--PreviewScale',
+          prevFrame.getAttribute('previewScale'),
+        )
+
+      previewOverlays
+        .get(data.previewContainerId)
+        .reload(filteredOverlays, data, selectedViewport)
+    } else {
+      // initialize preview overlay frame when preview is loaded the first time
+      const overlay = await PreviewOverlay.create(data)
+      previewOverlays.set(data.previewContainerId, overlay)
+      previewOverlays
+        .get(data.previewContainerId)
+        .reload(filteredOverlays, data, selectedViewport)
+      onRemove(
+        previewOverlays.get(data.previewContainerId)._overlayFrame,
+        () => {
+          previewOverlays.get(data.previewContainerId).destroy()
+          delete previewOverlays.get(data.previewContainerId)
+          previewOverlays.delete(data.previewContainerId)
+        },
+      )
+    }
+  } else if (type === 'BSP.Preview.OverlayActionClick') {
+    const key = data.key
+    const cig = document.querySelector(`.CIG-row[data-name="${key}"]`)
+    const modal = document.querySelector('.ContentEdit-previewModal')
+    const edit = document.querySelector(
+      `.ContentEdit[data-object-id="${data.previewContainerId}"]`,
+    )
+
+    if (data.handler) {
+      const element = data.elementId
+        ? document.querySelector(
+            `.repeatableLabel[data-object-id="${data.elementId}"]`,
+          )
+        : null
+      const li = element.parentElement
+
+      if (data.handler === 'moveUp') {
+        li.parentElement.insertBefore(li, li.previousElementSibling)
+      } else if (data.handler === 'moveDown') {
+        li.parentElement.insertBefore(
+          li,
+          li.nextElementSibling?.nextElementSibling,
+        )
+      }
+
+      edit.dispatchEvent(new Event('change', { bubbles: true }))
+      return
+    }
+
+    if (data.internalType === 'text') {
+      openFormFieldPopup(cig, modal, edit)
+    } else {
+      const element = data.elementId
+        ? document.querySelector(
+            `.repeatableLabel[data-object-id="${data.elementId}"]`,
+          )
+        : null
+      const parent = element ? element.parentNode : document
+      const behaviorEl = parent.querySelector(
+        `[data-preview-action="${data.actionId}"]`,
+      )
+      if (behaviorEl.classList.contains('RCIG-addSelect')) {
+        onFind(behaviorEl, ':scope > .ComboInput', (combo) => {
+          combo.click()
+        })
+      } else {
+        behaviorEl.click()
+      }
+      if (element && behaviorEl.classList.contains('removeButton')) {
+        element.click()
+        scrollIntoView(element)
+      }
+      if (behaviorEl.classList.contains('RCIG-add')) {
+        const rcig = behaviorEl.closest('.RCIG')
+        onFind(
+          rcig,
+          ':scope > .RCIG-list > li.RCIG-item.is-new-item',
+          (item) => {
+            openFormFieldPopup(item, modal, edit)
+          },
+        )
+      } else if (behaviorEl.classList.contains('RCS-add')) {
+        const rcs = behaviorEl.closest('.RCS')
+        const label = data.label
+        onFind(rcs, ':scope > .RCS-list > li.RCS-item.is-new-item', (item) => {
+          openFormFieldPopup(item, modal, edit, label)
+        })
+      } else if (behaviorEl.classList.contains('EIG-add')) {
+        const eig = behaviorEl.closest('.EIG')
+        onFind(eig, ':scope > .EIG-item', (item) => {
+          openFormFieldPopup(item, modal, edit)
+        })
+      } else {
+        const item = behaviorEl.closest('.RCIG-item, .EIG-item')
+        openFormFieldPopup(item, modal, edit)
+      }
+    }
+  }
+})
+
+// ContentEdit Utils:
+// Check if this element is a shared / non-embedded element.
+const isShared = (id, element, fieldValue, parentId) => {
+  if (element === null) return
+  let sharedElement
+  let input = element.querySelector(`input[name="${id}"]`)
+
+  if (input && !parentId) {
+    // Try to find an associated input via the fieldValue.
+    // Otherwise, fallback on the found input.
+    if (fieldValue) {
+      input =
+        element.querySelector(
+          `input[name="${fieldValue}/` + `${id.split('/')[1]}"]`,
+        ) ?? input
+    }
+
+    // Keep looking for the edit element.
+    if (input) {
+      sharedElement =
+        !(
+          input.parentNode.classList.contains('RCIG-item') ||
+          input.parentNode.classList.contains('RCS-item')
+        ) && input.parentNode.querySelector(':scope > .ContentSelector-edit')
+    }
+  } else {
+    // We may have started with an input element
+    // in the case of a child overlay.
+    // This happens with RCS items.
+    if (element.getAttribute('name') === parentId) {
+      // try to find the edit element from the parent
+      sharedElement = element.parentNode.querySelector(
+        ':scope > .ContentSelector-edit',
+      )
+    }
+  }
+
+  return sharedElement
+}
+
+//Check if there is field-level/content level locking
+const isLocked = (element) => {
+  return element.closest('.is-readOnly')
+    ? true
+    : null ||
+        element.classList.contains('is-readOnly') ||
+        element.classList.contains('is-pending') ||
+        element.closest('.is-pending')
+      ? true
+      : null || element.closest('.is-locked')
+        ? true
+        : null
+}
+
+// Updates the guide based on the input.
+function updateGuide(input, value) {
+  if (!input.closest('.Page.is-guideOpen')) {
+    return
+  }
+
+  // Figure out the path to the input.
+  const focuses = []
+
+  for (let group = input, row; (row = group.closest('.CIG-row')); ) {
+    group = row.closest('.CIG')
+
+    focuses.unshift({
+      typeId: group.dataset.typeId,
+      field: row.dataset.fieldName,
+    })
+  }
+
+  if (focuses.length < 1) {
+    return
+  }
+
+  let selector = ''
+
+  for (let i = 0, l = focuses.length; i < l; ++i) {
+    const { typeId, field } = focuses[i]
+    selector += `.Guide-content[data-type-id="${typeId}"] > .Guide-field[data-field="${field}"] `
+
+    if (i + 1 === l) {
+      const select = document.querySelector(`${selector} > form > select`)
+
+      if (select) {
+        select.value = value(focuses[i])
+        select.dispatchEvent(new Event('change', { bubbles: true }))
+      }
+    }
+  }
+
+  // Focus and scroll to the corresponding section in the guide.
+  const observer = new MutationObserver(async () => {
+    const field = document.querySelector(selector)
+
+    if (field) {
+      observer.disconnect()
+      field.scrollIntoView()
+      field.classList.add('is-focus')
+    }
+  })
+
+  observer.observe(document, {
+    attributes: true,
+    childList: true,
+    subtree: true,
+  })
+}
+
+// Update the guide when the user focuses into an input.
+onFind(['.ContentEdit', '.enhancementForm', '.standardForm'], (edit) => {
+  edit.addEventListener('focusin', ({ target }) => {
+    updateGuide(target, (focus) => focus.typeId)
+  })
+
+  edit.addEventListener('focusout', () => {
+    for (const field of document.querySelectorAll('.Guide-field')) {
+      field.classList.remove('is-focus')
+    }
+  })
+})
+
+// Update the guide when the user selects a different embedded form.
+onFind(
+  '.CIG-row[data-type="record"] > .CIG-small > select, .CIG-row[data-type="record"] > .CIG-small > btu-toggleable > select',
+  (select) => {
+    select.addEventListener('change', () => {
+      updateGuide(select, () => {
+        const i = select.selectedIndex
+        return i >= 0 ? select.options[i].dataset.type : null
+      })
+    })
+  },
+)
+
+// Update the guide based on the initial form state.
+onFind('.Guide-field.is-embedded', (field) => {
+  const select = field.querySelector('select')
+  if (!select) return
+
+  const typeId = field.closest('.Guide-content[data-type-id]')?.dataset?.typeId
+  if (!typeId) return
+
+  const value = document.querySelector(
+    `.CIG[data-type-id='${typeId}'] > .CIG-row[data-field-name='${field.dataset.field}'] .CIG`,
+  )?.dataset?.typeId
+
+  if (value) {
+    select.value = value
+    select.dispatchEvent(new Event('change', { bubbles: true }))
+    select.form.requestSubmit()
+  }
+})
+
+// track which right panel is open
+const panelKey = 'BSP.ContentEdit.rightPanel'
+
+const togglePanel = (tab, panel, options) => {
+  const show = tab.classList.toggle('is-active')
+  tab.ariaExpanded = show
+  panel.classList.toggle('is-visible', show)
+  const label = panel.querySelector('.ContentEdit-right-title')?.textContent
+  tab.ariaLabel = `${show ? tooltips.close : tooltips.open} ${label}`
+  tab.title = tab.ariaLabel
+
+  // Manage has-widget-panel-open class for performance (replaces expensive :has() selectors)
+  // Only manage for widget panels, not for manage_search (shelf)
+  if (tab.dataset.iconButtonName !== 'manage_search') {
+    const toolbar = tab.closest('.ContentEdit-toolbar')
+    const containerEl =
+      options?.container ||
+      toolbar?.closest('.Page-content, .Popup-content, .Popup')
+
+    if (containerEl) {
+      if (show) {
+        // Opening a widget panel - add the class
+        containerEl.classList.add('has-widget-panel-open')
+      } else {
+        // Closing a widget panel - only remove class if no other widget panels are active
+        const hasOtherActivePanel = toolbar?.querySelector(
+          'button.is-active:not([data-icon-button-name="manage_search"])',
+        )
+        if (!hasOtherActivePanel) {
+          containerEl.classList.remove('has-widget-panel-open')
+        }
+      }
+    }
+  }
+
+  if (!options) return
+  const { container, updateStorage } = options
+  let contentRightWidth
+  if (container) {
+    if (show) {
+      contentRightWidth = panel.dataset.width
+    } else {
+      contentRightWidth = '0px'
+    }
+    container.style.setProperty('--ContentEdit-rightWidth', contentRightWidth)
+  }
+  if (!container.classList.contains('Popup') && updateStorage) {
+    if (show) {
+      ls.setItem(panelKey, tab.dataset.iconButtonName)
+    } else {
+      ls.removeItem(panelKey)
+    }
+  }
+}
+
+// Content edit side toolbar functionality
+onFind('.ContentEdit-toolbar', (toolbar) => {
+  // by default only toolbar is visible
+  const container = toolbar.closest('.Page-content, .Popup-content, .Popup')
+  // This variable will be updated with panel width
+  container.style.setProperty('--ContentEdit-rightWidth', '0px')
+  const editForm = toolbar.closest('.ContentEdit')
+  if (!editForm) return
+  const formId = editForm.dataset.objectId
+  const selectedPanel = ls.getItem(panelKey)
+  const tabButtons = [...toolbar.querySelectorAll('button[data-right-tab]')]
+
+  tabButtons.forEach((tab) => {
+    // Shelf is handled by ContentEditDrawer.ts
+    if (tab.dataset.iconButtonName === 'manage_search') {
+      return
+    }
+
+    const iconName = tab.dataset.iconButtonName
+    const panel = editForm.querySelector(
+      `.ContentEdit-right[data-right-tab="${iconName}"]`,
+    )
+    if (!panel) return
+    const panelId = formId + '/' + iconName
+    panel.id = panelId
+
+    if (!panel.dataset.width) {
+      const computedWidth = getComputedStyle(panel).getPropertyValue(
+        '--contentRight-width',
+      )
+
+      panel.dataset.width = parseFloat(computedWidth) ? computedWidth : '320px'
+    }
+
+    tab.setAttribute('aria-controls', panel.id)
+    const labelOpen = `${tooltips.open} ${tab.ariaLabel}`
+    tab.ariaLabel = labelOpen
+    tab.title = labelOpen
+    tab.ariaExpanded = false
+
+    onFind('.ContentEdit-right .Widget.is-error', (widget) => {
+      const panel = widget.closest('.ContentEdit-right')
+      if (!panel) return
+      const tab = document.querySelector(`button[aria-controls="${panel.id}"]`)
+      if (!tab) return
+      tab.classList.add('is-error')
+    })
+
+    const panelClose = panel.querySelector('.ContentEdit-right-close')
+    panelClose.ariaLabel = tooltips.close
+    panelClose.title = tooltips.close
+    panelClose.onclick = () => {
+      togglePanel(tab, panel, { container: container, updateStorage: true })
+      // Return focus to the toolbar button when panel is closed
+      tab.focus()
+    }
+
+    tab.onclick = (event) => {
+      const prevSelected = toolbar.querySelector(
+        'button.is-active:not([data-icon-button-name="manage_search"])',
+      )
+      const wasOpen = tab.classList.contains('is-active')
+
+      // V5 UI: close preview if space is limited and we're opening a widget panel
+      if (
+        window.BRIGHTSPOT?.ui?.cms?.enableV5UI &&
+        !wasOpen &&
+        container.classList.contains('is-previewing')
+      ) {
+        if (container.offsetWidth < DUAL_PANEL_MIN_WIDTH) {
+          const previewButton = toolbar.querySelector(
+            '.ContentEdit-previewButton',
+          )
+          previewButton?.click()
+        }
+      }
+
+      togglePanel(tab, panel, { container: container, updateStorage: true })
+
+      if (!prevSelected) {
+        if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
+          if (container.classList.contains('is-previewing')) {
+            const previewButton = toolbar.querySelector(
+              '.ContentEdit-previewButton',
+            )
+            previewButton.click()
+          }
+        }
+      } else if (prevSelected.dataset.iconButtonName !== iconName) {
+        const prevPanel = editForm.querySelector(
+          `.ContentEdit-right.is-visible[data-right-tab=${prevSelected.dataset.iconButtonName}]`,
+        )
+        togglePanel(prevSelected, prevPanel)
+      }
+      // Move focus to the close button when panel is opened by user interaction.
+      // We wait for `transitionend` instead of using setTimeout because the
+      // duration may be near-zero under prefers-reduced-motion (see Page.css).
+      if (!wasOpen && tab.classList.contains('is-active') && event.isTrusted) {
+        container.addEventListener(
+          'transitionend',
+          function handleTransitionEnd(e) {
+            // The grid opens via grid-template-columns; ignore other property firings
+            // to avoid calling focus() multiple times in a single transition sequence.
+            if (e.propertyName !== 'grid-template-columns') return
+            // Always remove unconditionally — prevents leak if panel closes mid-transition.
+            container.removeEventListener('transitionend', handleTransitionEnd)
+            if (tab.classList.contains('is-active')) {
+              panelClose.focus()
+            }
+          },
+        )
+      }
+    }
+
+    if (selectedPanel === iconName) {
+      tab.click()
+    }
+  })
+
+  // V5 UI: Close preview when container becomes too narrow for both panels
+  if (window.BRIGHTSPOT?.ui?.cms?.enableV5UI) {
+    new ResizeObserver(() => {
+      if (
+        container.offsetWidth < DUAL_PANEL_MIN_WIDTH &&
+        container.classList.contains('is-previewing') &&
+        container.querySelector('.ContentEdit-right.is-visible')
+      ) {
+        const previewButton = toolbar.querySelector(
+          '.ContentEdit-previewButton',
+        )
+        previewButton?.click()
+      }
+    }).observe(container)
+  }
+})