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

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

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