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

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/menubar/views/MenuView.js

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