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

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

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