@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/enhancement_manager/views/SubmenuView.js

@@ -1,365 +0,0 @@
-import {
-  clearEnhancement,
-  editEnhancement,
-  removeEnhancement,
-  moveEnhancementUp,
-  moveEnhancementDown,
-  moveEnhancement,
-} from '../commands'
-import { constants } from '../../../settings'
-import { ActionButtonView } from './ActionButtonView'
-import create from '../../../../dom/create'
-
-if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
-  await import('./Enhancement.less')
-  await import('./ProsemirrorEnhancementMenu.less')
-}
-
-/**
- * This is the submenu for enhancements.
- */
-class SubmenuView {
-  /**
-   * @param {Prosemirror.Model.Node} node The node associated with this submenu
-   * @param {Prosemirror.EditorView} editorView
-   * @param {Element} companionDom The DOM element in the RTE associated with this
-   *    view
-   */
-  constructor(node, editorView, getPos, companionDom) {
-    this.node = node
-    this.companionDom = companionDom
-    this.editorView = editorView
-    this.getPos = getPos
-    this.submenuDOM = document.createElement('div')
-    this.companionDom.submenu = this.submenuDOM
-
-    this.render()
-
-    PubSub.subscribe('blockEnhancementCleared', (evt) => {
-      this.close(evt)
-    })
-  }
-
-  /**
-   * This is a small hack to handle keyboard events for
-   * accessibility. Since the frame API needs a DOM
-   * event trigger, we need to simulate a click
-   * on the keyboard event trigger.
-   *
-   * @param {Event} evt
-   */
-  _handleKeyboardInteraction(evt) {
-    const key = evt.key
-    if (key === 'Enter') {
-      evt.target.click()
-    } else {
-      return false
-    }
-  }
-
-  /**
-   * Event handler for when the user interacts with
-   * the submenu buttons.
-   *
-   * @private
-   * @param {Event} evt
-   * @param {string} actionType
-   */
-  _handleAction = (evt, actionType) => {
-    if (evt.key) {
-      this._handleKeyboardInteraction(evt)
-      return
-    }
-    evt.preventDefault()
-    switch (actionType) {
-      case 'clearFormatting':
-        clearEnhancement(this.node)(
-          this.editorView.state,
-          this.editorView.dispatch,
-          this.editorView,
-        )
-        break
-      case 'edit':
-        editEnhancement(this.node)(
-          this.editorView.state,
-          this.editorView.dispatch,
-          this.editorView,
-          evt,
-        )
-        break
-
-      case 'convert':
-        break
-      case 'remove':
-        removeEnhancement(this.editorView, this.getPos)
-        break
-      case 'upward':
-        moveEnhancementUp(this.editorView, this.getPos)
-        break
-      case 'downward':
-        moveEnhancementDown(this.editorView, this.getPos)
-        break
-      case 'pointAndClick':
-        moveEnhancement(this.editorView, this.getPos)
-        break
-    }
-    this.close(evt)
-    // Calling render again ensures we have a clean set of menu buttons
-    // after the item has moved (e.g. to help determine if the upward
-    // and downward arrows should be displayed).
-    // Should not run if the user clicked on the convert button dropdown
-    if (actionType !== 'convert') {
-      this.render()
-    }
-  }
-
-  _getActions = (meta) => {
-    const actions = []
-    const loadableTypes = this.node.attrs.attributes['data-loadable-types']
-
-    if (meta.popup) {
-      actions.push({
-        action: 'edit',
-        title: 'Edit',
-        icon: 'edit',
-      })
-    }
-
-    if (meta.isConvertible && loadableTypes) {
-      actions.push({
-        action: 'convert',
-        title: 'Convert',
-        icon: 'more_horiz',
-        loadableTypes: loadableTypes,
-      })
-    }
-    if (meta.line) {
-      actions.push({
-        action: 'upward',
-        title: 'Move Up',
-        icon: 'arrow_upward',
-      })
-      actions.push({
-        action: 'downward',
-        title: 'Move Down',
-        icon: 'arrow_downward',
-      })
-      if (meta.readOnly) {
-        actions.push({
-          action: 'pointAndClick',
-          title: 'Anchor',
-          icon: 'open_with',
-        })
-      }
-    }
-    if (!meta.readOnly) {
-      actions.push({
-        action: 'clearFormatting',
-        title: 'Clear Formatting',
-        icon: 'link_off',
-      })
-    } else {
-      actions.push({
-        action: 'remove',
-        title: 'Remove',
-        icon: 'remove',
-      })
-    }
-    return actions
-  }
-
-  /**
-   * Generates the content for the submenu
-   *
-   * @private
-   * @return {Element} All of the content wrapped inside this
-   *    element.
-   */
-  _getContent() {
-    const attributes = this.node.attrs.attributes
-    const meta = this.node.attrs.meta
-    const container = document.createElement(constants.ELEMENTS.DIV)
-    container.className = 'ProsemirrorEnhancementMenu-container'
-    const href = attributes ? attributes.href : null
-    const label = meta.displayName
-    const actions = this._getActions(meta)
-
-    container.appendChild(
-      create(
-        'span',
-        { className: 'ProsemirrorEnhancementMenu-container-label' },
-        label,
-      ),
-    )
-
-    if (href) {
-      container.appendChild(
-        create(
-          'a',
-          {
-            className: 'ProsemirrorEnhancementMenu-container-link-goto',
-            href: href,
-            target: '_blank',
-          },
-          'Go to Link',
-        ),
-      )
-      container.appendChild(
-        create(
-          'a',
-          {
-            'data-frame-post': '',
-            class: 'ProsemirrorEnhancementMenu-container-link',
-            href: href,
-            target: '_blank',
-          },
-          href,
-        ),
-      )
-    }
-
-    actions.forEach((metaObj) => {
-      const { action, title, icon } = metaObj
-      const rteId = this.editorView.props.props.ctx.id
-      const handleAction = this._handleAction
-      const button = new ActionButtonView({
-        action,
-        title,
-        icon,
-        handleAction,
-        rteId,
-      })
-      container.appendChild(button)
-    })
-
-    return container
-  }
-
-  /**
-   * Positions the submenu.
-   */
-  positionSubmenu = () => {
-    if (!this.editorView.submenu.isOpen) {
-      return
-    }
-    const enhancementPos =
-      this.editorView.submenu.tetheredTo.getBoundingClientRect()
-    const enhancementTop = enhancementPos.top
-    const enhancementLeft = enhancementPos.left
-    const enhancementRight = enhancementPos.right
-    const prosemirrorContainer = this.editorView.dom.parentNode
-    const prosemirrorContainerPos = prosemirrorContainer.getBoundingClientRect()
-    const containerTop = prosemirrorContainerPos.top
-    const containerLeft = prosemirrorContainerPos.left
-    const containerRight = prosemirrorContainerPos.right
-    this.editorView.submenu.style.top = `${
-      enhancementTop - containerTop + 20
-    }px`
-
-    const submenuPos = this.editorView.submenu.getBoundingClientRect()
-    const submenuWidth = submenuPos.width
-
-    if (
-      submenuWidth > containerRight - enhancementLeft &&
-      submenuWidth < enhancementRight - containerLeft
-    ) {
-      this.editorView.submenu.style.right = `${
-        containerRight - enhancementRight
-      }px`
-      this.editorView.submenu.style.left = 'auto'
-    } else if (enhancementLeft + submenuWidth > containerRight) {
-      this.editorView.submenu.style.left = `${
-        containerRight - submenuWidth - containerLeft
-      }px`
-      this.editorView.submenu.style.right = 'auto'
-    } else {
-      this.editorView.submenu.style.left = `${
-        enhancementLeft - containerLeft
-      }px`
-      this.editorView.submenu.style.right = 'auto'
-    }
-  }
-
-  /**
-   * Draws the submenu.
-   */
-  render() {
-    const rteId = this.editorView.props.props.ctx.id
-    PubSub.publish(`${rteId}-submenu-view-destroy`)
-    this.submenuDOM.innerHTML = ''
-    this.submenuDOM.className = 'ProsemirrorEnhancementMenu'
-    const contentElement = this._getContent()
-    this.submenuDOM.appendChild(contentElement)
-  }
-
-  /**
-   * Opens the submenu.
-   *
-   * @param {Event} evt The event object.
-   */
-  open = (evt) => {
-    evt.preventDefault()
-    evt.stopImmediatePropagation()
-    const target =
-      evt.currentTarget.parentElement.closest('.Enhancement') ||
-      evt.currentTarget
-    const pos = this.editorView.state.selection.$from.pos
-    const nodeAtPos = this.editorView.state.doc.nodeAt(pos)
-
-    this.editorView.submenu.isOpen = true
-    this.editorView.submenu.tetheredTo = target
-    this.editorView.submenu.innerHTML = ''
-
-    // Check if cursor is on other marks and show the additional submenus.
-    if (nodeAtPos) {
-      const domNode = this.editorView.domAtPos(pos, 1).node
-      const elements = new Set()
-
-      if (domNode.nodeType === Node.TEXT_NODE) {
-        let parent = domNode.parentElement
-        while (parent) {
-          if (
-            RICH_TEXT_ELEMENTS.some((item) => {
-              return item.tag === parent.tagName.toLowerCase()
-            })
-          ) {
-            elements.add(parent)
-          } else if (parent?.classList.contains('.ProseMirror')) {
-            break
-          }
-          parent = parent.parentElement
-        }
-      }
-
-      if (elements.size > 0) {
-        elements.forEach((element) => {
-          if (element.submenu) {
-            this.editorView.submenu.appendChild(element.submenu)
-          }
-        })
-      } else {
-        this.editorView.submenu.appendChild(this.submenuDOM)
-      }
-    } else {
-      this.editorView.submenu.appendChild(this.submenuDOM)
-    }
-
-    this.editorView.submenu.classList.add('open')
-    this.positionSubmenu()
-  }
-
-  /**
-   * Closes the submenu.
-   * @param {Event} evt The event object.
-   */
-  close(evt) {
-    if (evt && evt.key && evt.key !== constants.KEY_MAPPINGS.ESCAPE) {
-      return
-    }
-    this.editorView.submenu.classList.remove('open')
-    this.editorView.submenu.isOpen = false
-    this.editorView.submenu.tetheredTo = null
-  }
-}
-
-export { SubmenuView }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/find_replace_manager/FindReplaceManager.js

@@ -1,239 +0,0 @@
-import { Plugin, PluginKey } from 'prosemirror-state'
-import { FindView } from './views/FindView'
-import { Decoration, DecorationSet } from 'prosemirror-view'
-import { keydownHandler } from 'prosemirror-keymap'
-import { findKeyMapping, keyMappingHandler } from '../../settings/keymapBuilder'
-
-const key = new PluginKey('findReplace')
-const keyHandler = {}
-
-keyHandler[findKeyMapping('find')] = keyMappingHandler('rte2-toolbar-find')
-
-/**
- * Menu action for when user toggles the find menu icon.
- */
-const toggleFind = () => {
-  return function (state, dispatch, editorView) {
-    dispatch(
-      state.tr.setMeta(key, {
-        toggleFind: true,
-      }),
-    )
-
-    return true
-  }
-}
-
-/**
- * Escapes string of text so that it can be used as a regex.
- *
- * @param {string} text String to be escaped
- */
-const escapeRegEx = (text) => {
-  return text.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
-}
-
-/**
- * Creates a decoration set based on the items 'found' by our view. This is triggered
- * by the user interacting with the Find and Replace view widget.
- *
- * @param {ProseMirror.EditorView} doc
- * @param {Array.<Object.<number|string>>} toFind Data representation
- *    of found items
- * @returns {ProseMirror.DecorationSet}
- */
-const getDecos = (doc, toFind) => {
-  const decos = toFind.map((item) => {
-    let className = 'ProseMirrorFindReplace-found'
-    if (item.isActive) {
-      className = `${className} active`
-    }
-    return Decoration.inline(
-      item.from,
-      item.to,
-      {
-        class: className,
-      },
-      {
-        text: item.text,
-        idx: item.idx,
-      },
-    )
-  })
-  return DecorationSet.create(doc, decos)
-}
-
-/**
- * This also creates a decoration set of 'found' items, but this is triggered directly
- * by state changes in the editorView (e.g. user has already run a find and left the find open
- * and then typed the word to be found in the editorView).
- *
- * @param {ProseMirror.EditorView} doc
- * @param {string} text
- * @param {number} current
- * @param {boolean} matchCase
- * @param {boolean} matchWholeWord
- * @param {boolean} isReplaceAction
- */
-const handleFind = (
-  doc,
-  text,
-  current,
-  matchCase,
-  matchWholeWord,
-  isReplaceAction,
-) => {
-  let options = 'gi'
-  if (matchCase) {
-    options = 'g'
-  }
-  const escapedText = escapeRegEx(text)
-  let wordRegEx = new RegExp(escapedText, options)
-  if (matchWholeWord) {
-    wordRegEx = new RegExp(`\\b${escapedText}\\b`, options)
-  }
-  const decos = []
-  current = current ? parseInt(current) : 0
-  let idx = 1
-  let found = []
-  doc.descendants((node, pos) => {
-    if (node.isText) {
-      let match
-      while ((match = wordRegEx.exec(node.text))) {
-        let className = 'ProseMirrorFindReplace-found'
-        if (idx === current && !isReplaceAction) {
-          className = 'ProseMirrorFindReplace-found active'
-        }
-        decos.push(
-          Decoration.inline(
-            pos + match.index,
-            pos + match.index + match[0].length,
-            {
-              class: className,
-            },
-            {
-              text,
-              idx,
-            },
-          ),
-        )
-        idx++
-        found.push({
-          from: pos + match.index,
-          to: pos + match.index + match[0].length,
-        })
-      }
-    }
-  })
-
-  return {
-    set: DecorationSet.create(doc, decos),
-    total: decos.length,
-    found,
-  }
-}
-
-/**
- * Find and replace plugin.
- */
-const findReplacePlugin = () => {
-  return new Plugin({
-    key,
-
-    view(editorView) {
-      this.view = new FindView(editorView, this.key.key)
-      const dom = this.view.dom
-      const toolbar = editorView.dom.parentNode.querySelector(
-        '.ProseMirrorToolbar',
-      )
-      toolbar.appendChild(dom)
-      return this.view
-    },
-
-    state: {
-      init(config) {
-        const pluginState = new Map()
-        const activeStates = new Map()
-        activeStates.set('find', false)
-        pluginState.set('activeStates', activeStates)
-        const decos = DecorationSet.empty
-        pluginState.set('decos', decos)
-        return pluginState
-      },
-
-      apply(tr, value, oldState, newState) {
-        const pluginState = value
-        const meta = tr.getMeta(this)
-        let decos = pluginState.get('decos').map(tr.mapping, tr.doc)
-
-        if (meta && meta.hasOwnProperty('toggleFind')) {
-          const currentState = pluginState
-          const newCurrentState = !currentState.get('activeStates').get('find')
-          if (!newCurrentState) {
-            this.spec.view.findInputEle.value = ''
-            decos = DecorationSet.empty
-            PubSub.publish('findReset', {
-              total: 0,
-            })
-          }
-          pluginState.get('activeStates').set('find', newCurrentState)
-        }
-
-        if (meta && meta.hasOwnProperty('toFind')) {
-          decos = getDecos(newState.doc, meta.toFind)
-        } else if (
-          this.spec.view.findInputEle &&
-          this.spec.view.findInputEle.value
-        ) {
-          const results = handleFind(
-            newState.doc,
-            this.spec.view.findInputEle.value,
-            this.spec.view.current,
-            this.spec.view.matchCase.checked,
-            this.spec.view.matchWholeWord.checked,
-            this.spec.view.isReplaceAction,
-          )
-          decos = results.set
-
-          // The following publishes are set up so that this plugin can
-          // let its view know that UI state data has changed and allow the
-          // view to update itself accordingly, rather than the plugin accessing
-          // view methods to update the view. UI state data changes can be triggered
-          // either by our widget view or by editorView itself, but this isolates
-          // UI state data changes to be made only in the view.
-          if (this.spec.view.total < results.total) {
-            PubSub.publish('findAdded', {
-              total: results.total,
-            })
-          }
-
-          if (this.spec.view.total > results.total) {
-            PubSub.publish('findRemoved', {
-              total: results.total,
-            })
-          }
-        }
-
-        pluginState.set('decos', decos)
-        return pluginState
-      },
-    },
-
-    props: {
-      decorations(state) {
-        const pluginState = this.getState(state)
-        return pluginState.get('decos')
-      },
-      handleKeyDown: (view, event) => {
-        keydownHandler(keyHandler)(view, event)
-
-        // Prevent native find from opening when in RTE.
-        if (event.key === 'f' && event.metaKey) {
-          return true
-        }
-      },
-    },
-  })
-}
-
-export { findReplacePlugin, toggleFind, escapeRegEx }