@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/rte/plugins/menubar/views/MenuView.js

@@ -1,842 +0,0 @@
-import { closeSuggestionsList } from '../../spellcheck/spellcheck-plugin'
-import { getPluginState } from '../../../utilities'
-import { resolveIconCompat } from '../../../../dom/resolveIconCompat'
-import Tether from '../../../../dom/Tether'
-import { v1 as uuidv1 } from 'uuid'
-import create from '../../../../dom/create'
-import {
-  toggleMenu,
-  setupMenuForAria,
-} from '../../../../../../../dom/popupMenu'
-
-if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
-  await import('./MenuView.less')
-}
-
-/**
- * Functional representation of an individual menu item.
- *
- * @param {Object.<string|boolean|Function>} props
- *  @param {string} props.name example 'bold'
- *  @param {string} props.className example 'B'
- *  @param {boolean} props.isActive active state to assist in determining
- *      class names
- *  @param {Function} onClick Function the parent menu expected to be called
- *      when the item is clicked on
- * @return {Element} The menu item
- */
-/**
- * Functional representation of an individual menu item.
- *
- * @param {Object.<string|boolean|Function>} props
- *  @param {string} props.className Example 'B'.
- *  @param {string} props.tooltip Becomes the title attribute.
- *  @param {string} props.displayName The default text of the link.
- *  @param {boolean} props.isActive active state to assist in determining
- *      class names.
- *  @param {Function} props.onClick Function the parent menu expected to be called
- *      when the item is clicked on.
- *  @param {boolean} props.clusterStart Indicates if this menu item starts a cluster.
- *    A cluster is a group of menu items separated from other menu items via
- *    a vertical rule.
- *  @param {boolean} props.isCompatible Indicates if this menu item is compatible with the
- *    current RTE selection.
- *  @param {string} props.target Becomes the target attribute of the link.
- *  @param {string} props.customUrl Custom URL, e.g. the upload action item url.
- *  @param {string} props.icon The off state icon, if any, to be shown.
- *  @param {string} props.onIcon The on state icon, if any, to be shown.
- *  @param {Function} props.command The command to be called when the item is engaged.
- *  @param {boolean} props.isOutOfContext True if this item is out of the context of the
- *    current selection.
- *  @param {string} props.metaData Extra text to be displayed next to the default text of the
- *    item (e.g. Track Changes Accept All and Reject All display the number of changes in the
- *    document).
- * @return {Element} The menu item
- */
-const createMenuItem = (props) => {
-  const {
-    className,
-    tooltip,
-    displayName,
-    isActive,
-    onClick,
-    clusterStart,
-    isCompatible,
-    target,
-    customUrl,
-    icon,
-    onIcon,
-    command,
-    isOutOfContext,
-    popup,
-    metaData,
-  } = props
-  let linkClass = isActive ? `${className} active` : `${className}`
-  linkClass = isCompatible ? linkClass : `${linkClass} disabled`
-  linkClass = icon ? linkClass : `${linkClass} rte2-toolbar-noicon`
-  linkClass = isOutOfContext ? `${linkClass} outOfContext disabled` : linkClass
-  let listItemClass = clusterStart
-    ? 'ProseMirrorToolbar-action clusterStart'
-    : 'ProseMirrorToolbar-action'
-  listItemClass =
-    isCompatible && !isOutOfContext
-      ? `${listItemClass}`
-      : `${listItemClass} disabled`
-  listItemClass = isActive ? `${listItemClass} active` : `${listItemClass}`
-
-  const listItem = document.createElement('li')
-  listItem.className = listItemClass
-  listItem.title = tooltip
-  listItem.setAttribute('data-rte-style', className)
-  const targetAttr = target ? `target="${target}"` : ''
-  let iconAttr = icon ? `data-icon=${icon}` : ''
-  iconAttr = isActive && onIcon ? `data-icon=${onIcon}` : iconAttr
-  const ariaHasPopupAttr = customUrl || popup ? 'aria-haspopup="true"' : ''
-  const ariaDisabledAttr =
-    isCompatible && !isOutOfContext ? '' : 'aria-disabled="true"'
-  const metaDataStr = metaData ? `(${metaData})` : ''
-  const link = `
-    <a
-      href="${customUrl || '#'}"
-      class="${linkClass}"
-      tabindex="-1"
-      role="button"
-      title="${tooltip}"
-      aria-label="${tooltip}"
-      ${ariaDisabledAttr}
-      ${ariaHasPopupAttr}
-      ${targetAttr}
-      ${iconAttr}
-    >
-      ${displayName || tooltip} ${metaDataStr}
-    </a>
-  `
-  listItem.innerHTML = link
-
-  const linkEl = listItem.querySelector('a')
-  const iconName = linkEl?.dataset.icon
-  if (iconName) {
-    resolveIconCompat(iconName, linkEl)
-  }
-
-  if (isCompatible) {
-    listItem.addEventListener('click', (evt) => {
-      if (listItem.classList.contains('disabled')) {
-        return
-      }
-      evt.preventDefault()
-      onClick(command, evt)
-    })
-  }
-
-  return listItem
-}
-
-const removeOpenedMenu = (button) => {
-  const toolbar = document.querySelector('.ProseMirrorToolbar.is-visible')
-  if (toolbar) toolbar.classList.remove('is-visible')
-  const menuId = button
-    .querySelector('button[aria-controls]')
-    .getAttribute('aria-controls')
-  const list = document.getElementById(menuId)
-  if (!list) return
-  if (list.classList.contains('is-removing')) return
-  list.classList.add('is-removing')
-  list.addEventListener(
-    'transitionend',
-    (e) => {
-      button?.observer?.disconnect()
-      list.classList.remove('is-removing', 'is-opening')
-      list.setAttribute('aria-hidden', true)
-      if (window.BRIGHTSPOT?.ui.cms.enableV5UI) {
-        list.hidePopover()
-      } else {
-        button ? button.appendChild(list) : list.remove()
-      }
-      button?.classList.remove('is-open')
-    },
-    { once: true },
-  )
-}
-
-window.addEventListener('click', (e) => {
-  handleSubmenuClick(e)
-})
-
-/**
- * The UI component of the menubar. It controls the behavior
- * of when its child menu items are clicked to decouple the menu
- * items from this view. This allows for mixing and matching of menu items
- * and menus for customization per RTE instance.
- *
- * Instantiation and updating of the menubar state is managed by the plugin
- * itself, which also allows for modularity as well as follows
- * Prosemirror's best practices. State can be retrieved from the
- * view's state, as seen in the `getPluginState` utility method.
- *
- * @param {Prosemirror.EditorView} editorView
- * @param {string} myKey The key of this plugin, used for easy retrieval
- *  of the plugin from the EditorView.
- */
-class MenuView {
-  constructor(editorView, myKey) {
-    const textarea = editorView.dom
-      .closest('.ProseMirrorContainer')
-      .parentElement.querySelector('.richtext')
-    this.editorView = editorView
-    this.myKey = myKey
-    this.dom = document.createElement('ul')
-    this.dom.role = 'toolbar'
-    this.dom.tabIndex = -1
-    this.dom.setAttribute('aria-controls', textarea.id)
-    this.dom.setAttribute('aria-label', textarea.ariaLabel)
-
-    this.dom.addEventListener('mousedown', (e) => {
-      e.preventDefault()
-      closeSuggestionsList(this.editorView)
-    })
-
-    PubSub.subscribe('engageTrackManager', () => {
-      this.openSubmenu = 'Track'
-    })
-
-    PubSub.subscribe('disengageTrackManager', () => {
-      this.openSubmenu = null
-    })
-
-    this.render()
-  }
-
-  handleMenuSelection(command, evt) {
-    const menu = this.dom.querySelector('.rte2-toolbar-submenu-2.is-open')
-    if (menu) {
-      this.dom.style.zIndex = 9
-
-      const menuId = menu
-        .querySelector('button[aria-controls]')
-        .getAttribute('aria-controls')
-      const menuMoved = document.getElementById(menuId)
-
-      Tether.toggle(menu, menuMoved, () => {
-        removeOpenedMenu(menu)
-      })
-    }
-
-    const editorView = this.editorView
-    editorView.focus()
-    command(editorView.state, editorView.dispatch, editorView, evt)
-  }
-
-  /**
-   * Builds out the menu action list item.
-   *
-   * @param {Object.<Object>} item Object literal representation
-   *  of the list item.
-   * @param {string} key The list item property key.
-   * @param {ProseMirror.State} state
-   * @return {Element} The menu action list item.
-   */
-  getListItem = (item, key, state) => {
-    const itemsDOM = item.dom
-    let isActive =
-      state.get('activeStates').get(key) ||
-      state.get('activeMarks').get(key) ||
-      state.get('activeNodes').get(key)
-    const activeIfUnset = item.activeIfUnset
-    if (activeIfUnset && activeIfUnset.length) {
-      activeIfUnset.forEach((item) => {
-        if (!state.get('activeMarks').get(item)) {
-          isActive = true
-        }
-      })
-    }
-    let isCompatible =
-      state.get('compatibleNodes').get(key) == null &&
-      state.get('compatibleActions').get(key) == null
-        ? true
-        : state.get('compatibleNodes').get(key) ||
-          state.get('compatibleActions').get(key)
-
-    const inactiveIfSet = item.inactiveIfSet
-    if (inactiveIfSet && inactiveIfSet.length) {
-      inactiveIfSet.forEach((item) => {
-        if (state.get('activeMarks').get(item)) {
-          isCompatible = false
-        }
-        if (state.get('activeNodes').get(item)) {
-          isCompatible = false
-        }
-        if (state.get('activeStates').get(item)) {
-          isCompatible = false
-        }
-      })
-    }
-
-    if (
-      (state.get('disabledStates') && state.get('disabledStates').get(key)) ||
-      (isActive && item.dom.disableIfActive)
-    ) {
-      isCompatible = false
-    }
-
-    const parentName = state.get('parent')
-      ? state.get('parent').type.name
-      : null
-
-    let isInContext = true
-
-    if (item.context && item.context.length) {
-      isInContext = item.context.some((tag) => {
-        if (tag === parentName) {
-          return true
-        }
-
-        if (tag === null && (parentName === 'line' || parentName === 'p')) {
-          return true
-        }
-
-        if (state.get('activeMarks').get(tag)) {
-          return true
-        }
-
-        return false
-      })
-    }
-
-    const metaData = state.get('metaData').get(key)
-
-    return createMenuItem({
-      className: itemsDOM.className,
-      displayName: itemsDOM.displayName,
-      tooltip: itemsDOM.tooltip,
-      isActive,
-      isCompatible,
-      onClick: this.handleMenuSelection.bind(this),
-      clusterStart: item.cluster,
-      target: itemsDOM.target,
-      customUrl: item.customUrl,
-      icon: itemsDOM.icon,
-      onIcon: itemsDOM.onIcon,
-      command: item.command,
-      isOutOfContext: !isInContext,
-      popup: itemsDOM.popup === true,
-      metaData,
-    })
-  }
-
-  /**
-   * Builds out a nested list (e.g custom css properties
-   * drop-down menus).
-   *
-   * @param {string} title The title of the nested list.
-   * @param {Array.<Object>} children The nested list's child
-   *  objects.
-   * @param {ProseMirror.State} state
-   * @param {number} index Indicates what number in a series of
-   *  nested lists the list is - used to determine if it should
-   *  receive the clusterStart class name.
-   * @return {Element} A nested list item.
-   */
-  getList = (title, icon, children, state) => {
-    const isActive =
-      state.get('activeStates').get(title) ||
-      state.get('activeMarks').get(title) ||
-      state.get('activeNodes').get(title)
-    const isDisabled = state.get('disabledStates').get(title)
-    const parentList = document.createElement('li')
-    if (title === 'Track') {
-      parentList.className = 'rte2-toolbar-submenu-horizontal '
-    } else {
-      parentList.className = 'rte2-toolbar-submenu-2 '
-    }
-
-    if (title) {
-      parentList.setAttribute('data-rte-toolbar-submenu', title)
-    }
-    if (isActive) {
-      parentList.classList.add('active')
-    }
-    if (isDisabled) {
-      parentList.classList.add('disabled')
-    }
-    if (icon) {
-      parentList.classList.add('rte2-toolbar-submenu-2-with-icon')
-    }
-    if (!title && !icon) {
-      parentList.classList.add('rte2-toolbar-submenu-2-no-icon-no-text')
-    }
-
-    const baseMenuId = uuidv1()
-    const heading = document.createElement('button')
-    heading.type = 'button'
-    heading.id = `b${baseMenuId}`
-    heading.setAttribute('aria-haspopup', true)
-    heading.setAttribute('aria-label', title)
-    heading.setAttribute('aria-controls', `m${baseMenuId}`)
-    if (isDisabled) {
-      heading.setAttribute('aria-disabled', true)
-    }
-    heading.tabIndex = -1
-    heading.classList.add('rte2-toolbar-submenu-2-heading-icon', 'Link')
-    heading.setAttribute('title', title)
-    const headingText = document.createElement('span')
-    headingText.textContent = title
-    headingText.className = 'rte2-toolbar-submenu-2-heading'
-    heading.appendChild(headingText)
-
-    parentList.appendChild(heading)
-
-    const list = document.createElement('ul')
-    list.id = `m${baseMenuId}`
-    list.role = 'menu'
-    list.classList.add('rte2-toolbar-submenu-2-items')
-    list.setAttribute('aria-label', title)
-    list.setAttribute('aria-hidden', true)
-
-    if (window.BRIGHTSPOT?.ui.cms.enableV5UI)
-      if (!parentList.classList.contains('rte2-toolbar-submenu-horizontal'))
-        list.setAttribute('popover', 'manual')
-
-    let numDisabledChild = 0
-    children.forEach((child) => {
-      const listItem = this.getListItem(child, child.dom.name, state)
-      listItem.role = 'menuitem'
-
-      if (listItem.classList.contains('disabled')) {
-        numDisabledChild++
-      }
-
-      if (listItem.classList.contains('active')) {
-        parentList.classList.add('active')
-      }
-
-      list.appendChild(listItem)
-    })
-    list.addEventListener('keydown', (evt) => {
-      evt.target.parentElement.classList.remove('focus')
-      switch (evt.key) {
-        case 'ArrowUp':
-          if (
-            evt.currentTarget.firstElementChild === evt.target.parentElement
-          ) {
-            evt.currentTarget.lastElementChild.firstElementChild.focus()
-            evt.currentTarget.lastElementChild.classList.add('focus')
-          } else {
-            evt.target.parentElement.previousElementSibling.firstElementChild.focus()
-            evt.target.parentElement.previousElementSibling.classList.add(
-              'focus',
-            )
-          }
-          break
-        case 'ArrowDown':
-          if (evt.currentTarget.lastElementChild === evt.target.parentElement) {
-            evt.currentTarget.firstElementChild.firstElementChild.focus()
-            evt.currentTarget.firstElementChild.classList.add('focus')
-          } else {
-            evt.target.parentElement.nextElementSibling.firstElementChild.focus()
-            evt.target.parentElement.nextElementSibling.classList.add('focus')
-          }
-          break
-        case 'Escape':
-        case 'Tab':
-          heading.click()
-          heading.focus()
-          break
-      }
-    })
-    parentList.appendChild(list)
-    if (numDisabledChild === children.length) {
-      parentList.classList.add('disabled')
-      parentList.classList.add('outOfContext')
-      heading.setAttribute('aria-disabled', true)
-    }
-    return parentList
-  }
-
-  createSeparator = () => {
-    return create('li', { className: 'separator' }, '')
-  }
-
-  createToggle = (el) => {
-    const elAnchor = el.querySelector('a')
-    const clone = create('li', {
-      className:
-        `${
-          el.classList.contains('ProseMirrorToolbar-action')
-            ? 'ProseMirrorToolbar-action '
-            : ''
-        }` +
-        `${el.classList.contains('active') ? 'active ' : ''}` +
-        `${el.classList.contains('disabled') ? 'disabled ' : ''}`,
-    })
-    const anchor = create(
-      'a',
-      {
-        className: elAnchor?.className || '',
-        href: '#',
-        tabIndex: -1,
-        role: 'menuitem',
-        dataset: { icon: elAnchor?.dataset.icon || '' },
-      },
-      '',
-    )
-
-    // Splits text like: "Outdent (Ctrl + [" into two parts: "Outdent" and "(Ctrl + [)".
-    const splitStringWithParentheses = (str) => {
-      let regex = /(.+?)\s*(\([^)]*\))/
-      const match = str.match(regex)
-
-      // If there's a match, return an array with two parts
-      if (match) {
-        return [match[1].trim(), match[2].trim()]
-      } else {
-        // If there's no match, return an array with the original string as the first element and an empty string as the second element
-        return [str, '']
-      }
-    }
-
-    // Render a shortcut tooltip if one exists.
-    let tooltip = el.firstElementChild?.getAttribute('aria-label')
-    if (!tooltip) tooltip = el.firstElementChild?.innerText
-    const result = splitStringWithParentheses(tooltip)
-
-    // If the tooltip is too long, use the first child's text content if possible.
-    result[0] =
-      result[0].length >= 28
-        ? el.firstElementChild?.innerText || result[0]
-        : result[0]
-
-    anchor.innerText = result[0]
-    if (result[1]) {
-      anchor.append(create('span', { class: 'shortcut' }, result[1]))
-    }
-
-    if (!clone.classList.contains('disabled')) {
-      clone.onclick = (evt) => {
-        el.querySelector('a')?.click()
-        evt.stopImmediatePropagation()
-      }
-    }
-    clone.append(anchor)
-
-    const iconName = anchor.dataset?.icon
-    if (iconName) {
-      resolveIconCompat(iconName, anchor)
-    }
-
-    return clone
-  }
-
-  createSubmenu = (el) => {
-    const btn = el.querySelector('button[aria-haspopup="true"]')
-    const parentItem = document.createElement('li')
-    const submenu = create(
-      'ul',
-      { className: 'overflow-submenu', role: 'group' },
-      btn
-        ? btn.querySelector('.rte2-toolbar-submenu-2-heading')?.innerText
-        : '',
-    )
-    parentItem.appendChild(submenu)
-
-    // Render all the children of the submenu
-    const list = el.querySelector('.rte2-toolbar-submenu-2-items')
-    if (list) {
-      list.childNodes.forEach((subitem, index, array) => {
-        if (subitem.classList.contains('separator')) return
-        submenu.append(this.createToggle(subitem))
-      })
-    }
-    return parentItem
-  }
-
-  getOverflowItem = (children) => {
-    const overflowBtnWrap = document.createElement('li')
-    overflowBtnWrap.className = 'rte2-toolbar-submenu-2 rte-overflow-btn'
-    const title = window.BRIGHTSPOT?.ui?.rte?.buttonMoreMenu
-    overflowBtnWrap.setAttribute(
-      'data-rte-toolbar-submenu',
-      window.BRIGHTSPOT?.ui?.rte?.buttonMoreMenu,
-    )
-
-    const baseMenuId = uuidv1()
-    const overflowBtn = document.createElement('button')
-    overflowBtn.type = 'button'
-    overflowBtn.id = `b${baseMenuId}`
-    overflowBtn.setAttribute('aria-haspopup', 'menu')
-    overflowBtn.setAttribute('aria-expanded', false)
-    overflowBtn.setAttribute('aria-label', title)
-    overflowBtn.setAttribute('aria-controls', `m${baseMenuId}`)
-    overflowBtn.tabIndex = -1
-    overflowBtn.classList.add('rte2-toolbar-submenu-2-heading-icon', 'Link')
-    overflowBtn.setAttribute('title', title)
-
-    overflowBtnWrap.appendChild(overflowBtn)
-
-    const list = document.createElement('ul')
-    list.id = `m${baseMenuId}`
-    list.role = 'menu'
-    list.classList.add('rte2-toolbar-submenu-2-items', 'overflow-items')
-    list.setAttribute('aria-label', title)
-
-    if (window.BRIGHTSPOT?.ui.cms.enableV5UI)
-      list.setAttribute('popover', 'manual')
-
-    children.forEach((child) => {
-      let itemType = 'toggle'
-      if (child.classList.contains('rte2-toolbar-submenu-2')) {
-        itemType = 'submenu'
-      }
-      if (child.classList.contains('rte2-toolbar-separator')) {
-        itemType = 'separator'
-      }
-
-      // Different render methods for each item type:
-      let listItem
-      if (itemType === 'toggle') {
-        listItem = this.createToggle(child)
-      } else if (itemType === 'submenu') {
-        listItem = this.createSubmenu(child)
-      } else if (itemType === 'separator') {
-        listItem = this.createSeparator(child)
-      }
-
-      if (listItem.classList.contains('active')) {
-        overflowBtnWrap.classList.add('active')
-      }
-
-      list.appendChild(listItem)
-    })
-
-    setupMenuForAria(list, overflowBtn)
-    overflowBtnWrap.appendChild(list)
-    return overflowBtnWrap
-  }
-
-  /**
-   * Renders the menu view.
-   */
-  render() {
-    const state = getPluginState(this.editorView, this.myKey)
-    if (!state.get('hasChange')) {
-      return
-    }
-
-    this.dom.innerHTML = ''
-
-    state.get('menuItems').forEach((value, key) => {
-      const items = value.items
-      const rollAt = value.rollAt
-
-      items.forEach((item, index) => {
-        const name = item.dom.name
-        if (name === 'separator') {
-          const li = document.createElement('li')
-          li.className = 'rte2-toolbar-separator'
-          this.dom.appendChild(li)
-        } else if (rollAt == null || (rollAt > 0 && index < rollAt)) {
-          const li = this.getListItem(item, item.dom.name, state)
-          this.dom.appendChild(li)
-        }
-      })
-
-      if (rollAt != null && items.slice(rollAt).length > 0) {
-        const topListItem = this.getList(
-          value.topLevelText,
-          value.topLevelIcon,
-          items.slice(rollAt),
-          state,
-        )
-
-        let submenu
-        if (this.dom.parentNode) {
-          submenu = this.dom.parentNode.querySelector(
-            '.ProseMirrorToolbar-horizontalSubmenu',
-          )
-        }
-
-        if (this.openSubmenu === value.topLevelText) {
-          submenu.innerHTML = ''
-          submenu.appendChild(topListItem.querySelector('ul'))
-        } else {
-          // When submenu is in opened state do not clear out on repaints of menu.
-          if (submenu && !this.openSubmenu) {
-            submenu.innerHTML = ''
-          }
-          this.dom.appendChild(topListItem)
-        }
-      }
-    })
-
-    const first = this.dom.querySelector('[tabindex]')
-
-    if (first) {
-      first.tabIndex = 0
-    }
-
-    this.dom.addEventListener('keydown', (event) => {
-      const { key, target } = event
-      for (
-        let move = target.closest('li');
-        (move =
-          key === 'ArrowLeft'
-            ? move.previousElementSibling
-            : key === 'ArrowRight'
-              ? move.nextElementSibling
-              : null);
-
-      ) {
-        const { width, height } = move.getBoundingClientRect()
-
-        if (
-          width > 0 &&
-          height > 0 &&
-          getComputedStyle(move).pointerEvents !== 'none' &&
-          move.dataset.rteStyle !== 'RichTextEditor-upload'
-        ) {
-          const tab = move.querySelector(':scope > [tabindex]')
-
-          if (tab) {
-            tab.focus()
-            return
-          }
-        }
-      }
-
-      if (key === 'ArrowDown' || key === 'ArrowUp') {
-        event.preventDefault()
-        handleSubmenuClick({ target })
-      }
-    })
-
-    return true
-  }
-
-  update() {
-    if (this.render()) {
-      this.dom.dispatchEvent(new Event('btu-toolbar-update'))
-    }
-  }
-
-  onOverflowUpdate({ items, target }) {
-    // Remove the overflow menu if it exists.
-    if (this.overflowMenuBtn) {
-      this.overflowMenuBtn.innerHTML = ''
-    }
-
-    // Exit early if there are no items to overflow.
-    if (!items || items.length === 0) {
-      return
-    }
-
-    // Create an overflow menu item and append it to the menu.
-    const container = target.insertAdjacentElement(
-      'beforebegin',
-      this.getOverflowItem(items),
-    )
-    const btn = container?.querySelector('button')
-    if (!btn) return
-
-    this.overflowMenuBtn = btn
-
-    // Find the overflow menu list.
-    const menuId = this.overflowMenuBtn.getAttribute('aria-controls')
-    const list = document.getElementById(menuId)
-
-    this.overflowMenuBtn.addEventListener('click', () => {
-      toggleMenu(list, this.overflowMenuBtn)
-    })
-  }
-
-  destroy() {
-    this.dom.remove()
-  }
-}
-
-const handleSubmenuClick = (e) => {
-  let menu = e.target.closest('.rte2-toolbar-submenu-2')
-  if (!menu) return
-  const menuId = menu
-    .querySelector('button[aria-controls]')
-    .getAttribute('aria-controls')
-  const menuItems = document.getElementById(menuId)
-  if (!menuItems) return
-  let toolbar = menu?.parentElement
-  if (!toolbar) return
-  if (
-    menu?.classList.contains('is-blocked') ||
-    menu?.classList.contains('disabled')
-  ) {
-    return
-  }
-  menuItems
-    ?.querySelectorAll('li.focus')
-    .forEach((li) => li.classList.remove('focus'))
-
-  const toggleCallback = () => {
-    if (menu && !menu.classList.contains('is-open')) {
-      if (!menuItems) return
-      menu.classList.add('is-blocked')
-      const isV5 = window.BRIGHTSPOT?.ui.cms.enableV5UI
-      if (!isV5) document.body.appendChild(menuItems)
-      toolbar.style.zIndex = 10
-      toolbar.closest('.ProseMirrorToolbar').classList.add('is-visible')
-      setTimeout(() => {
-        if (isV5) menuItems.showPopover()
-        menuItems.classList.add('is-opening')
-      }, 0)
-
-      menuItems.addEventListener(
-        'transitionend',
-        (e) => {
-          menu.classList.remove('is-blocked')
-        },
-        { once: true },
-      )
-      menu.observer = new IntersectionObserver((changes) => {
-        changes.forEach((change) => {
-          if (menuItems.classList.contains('is-removing')) return
-          if (change.isIntersecting) {
-            menuItems.style.visibility = 'visible'
-            menuItems.setAttribute('aria-hidden', false)
-            if (menuItems.firstElementChild?.firstElementChild) {
-              menuItems.firstElementChild?.firstElementChild?.focus()
-            } else {
-              menuItems.firstElementChild?.focus()
-            }
-            menuItems.firstElementChild.classList.add('focus')
-            e.target.setAttribute('aria-expanded', true)
-            menuItems.scrollTo(0, 0)
-          } else {
-            menuItems.style.visibility = 'hidden'
-            menuItems.setAttribute('aria-hidden', true)
-          }
-        })
-      })
-      menu.observer.observe(menu)
-    } else {
-      if (e.target.classList.contains('rte2-toolbar-submenu-2-items')) return
-      if (!menu) {
-        const menuId = e.target
-          .closest('button[aria-controls]')
-          .getAttribute('aria-controls')
-        if (menuId) {
-          menu = document.getElementById(menuId)
-        }
-        if (menu && !toolbar) {
-          toolbar = menu.closest('ul')
-        }
-      }
-
-      removeOpenedMenu(menu)
-      e.target.removeAttribute('aria-expanded')
-      if (toolbar) toolbar.style.zIndex = 9
-    }
-
-    return menu?.classList.toggle('is-open')
-  }
-
-  Tether.toggle(menu, menuItems, toggleCallback)
-}
-
-export { MenuView }