@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/ActionButtonView.js

@@ -1,86 +0,0 @@
-/* eslint-disable no-debugger */
-import { constants } from '../../../settings'
-import { NodeSelection } from 'prosemirror-state'
-
-import ContentSelectorActions from '../../../../../../../ContentSelectorActions'
-
-/**
- * The view for the action buttons on the submenu (e.g. move up, edit)
- */
-class ActionButtonView {
-  /**
-   * Creates an action button for the submenu.
-   *
-   * @private
-   * @param {Object.<string|function>} props
-   * @param {string} props.actionType Type of action to associated with this
-   *    button/link
-   *
-   * @return {Element} The action button/link with its event listener
-   *    attached to it.
-   */
-  constructor(props) {
-    this.button = document.createElement(
-      props.action == 'convert' ? constants.ELEMENTS.DIV : constants.ELEMENTS.A,
-    )
-    this.render(props)
-
-    if (props.action == 'convert') {
-      this.button.setAttribute('aria-haspopup', true)
-      this.button.setAttribute('aria-label', 'menu')
-      this.button.setAttribute('role', 'button')
-
-      const options = {
-        loadableTypes: props.loadableTypes,
-        node: props.node,
-        editorView: props.editorView,
-      }
-      new ContentSelectorActions(this.button, options)
-    }
-
-    return this.button
-  }
-
-  /**
-   * Abstracting this so we can remove this event listener later.
-   *
-   * @param {Event} evt
-   * @param {string} action
-   * @param {function} handleAction
-   */
-  _handleAction(evt, action, handleAction) {
-    handleAction(evt, action)
-  }
-
-  /**
-   * Renders the view.
-   *
-   * @param {Object.<string|function>} props
-   */
-  render(props) {
-    const { action, title, icon, handleAction, node, editorView } = props
-    const button = this.button
-    button.className = `ProsemirrorEnhancementMenu-container-button ${icon}`
-    button.setAttribute('data-icon', icon)
-    button.text = title
-    button.title = title
-    button.tabIndex = 0
-
-    if (handleAction) {
-      button.addEventListener(constants.EVENTS.CLICK, (evt) => {
-        this._handleAction(evt, action, handleAction)
-      })
-
-      button.addEventListener(constants.EVENTS.KEYDOWN, (evt) => {
-        if (node && editorView) {
-          const pos = editorView.posAtDOM(evt.target)
-          const selection = NodeSelection.create(editorView.state.doc, pos)
-          editorView.dispatch(editorView.state.tr.setSelection(selection))
-        }
-        this._handleAction(evt, action, handleAction)
-      })
-    }
-  }
-}
-
-export { ActionButtonView }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/enhancement_manager/views/BlockSubmenuView.js

@@ -1,60 +0,0 @@
-/* eslint-disable no-debugger */
-import { SubmenuView } from './SubmenuView'
-import { constants } from '../../../settings'
-import { ActionButtonView } from './ActionButtonView'
-
-class BlockSubmenuView extends SubmenuView {
-  constructor(node, editorView, companionDom, handleCloseSubmenu) {
-    super(node, editorView, companionDom, handleCloseSubmenu)
-    this.companionDom.appendChild(this.submenuDOM)
-  }
-
-  /**
-   * Generates the content for the submenu
-   *
-   * @private
-   * @return {Element} All of the content wrapped inside this
-   *    element.
-   */
-  _getContent() {
-    const meta = this.node.attrs.meta
-    const container = document.createElement(constants.ELEMENTS.DIV)
-    container.className = 'ProsemirrorEnhancementMenu-container is-block'
-    const actions = this._getActions(meta)
-    const loadableTypes =
-      this.node.attrs.attributes['data-loadable-types']?.split(',')
-
-    actions.forEach((metaObj) => {
-      const { action, title, icon } = metaObj
-      const rteId = this.editorView.props.props.ctx.id
-      const handleAction = this._handleAction
-      const editorView = this.editorView
-      const node = this.node
-
-      const button = new ActionButtonView({
-        action,
-        title,
-        icon,
-        handleAction,
-        rteId,
-        loadableTypes,
-        node,
-        editorView,
-      })
-      container.appendChild(button)
-    })
-    return container
-  }
-
-  /**
-   * Draws the submenu.
-   */
-  render() {
-    this.submenuDOM.innerHTML = ''
-    this.submenuDOM.className = 'ProsemirrorEnhancementMenu'
-    const contentElement = this._getContent()
-    this.submenuDOM.appendChild(contentElement)
-  }
-}
-
-export { BlockSubmenuView }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/enhancement_manager/views/EnhancementView.js

@@ -1,208 +0,0 @@
-import { SubmenuView } from './SubmenuView'
-import { BlockSubmenuView } from './BlockSubmenuView'
-import { PreviewView } from './PreviewView'
-import { constants } from '../../../settings'
-import DOMPurify from 'dompurify'
-
-/**
- * This takes precedence over the toDom() method in the schema
- * for display in the RTE. We are using a node view for 2 reasons:
- *
- * 1. So that we can set up and trigger the submenu bar that some
- * enhancements have for editing the enhancement.
- *
- * 2. This is a bit of a hack. PM rules mandates that all
- * attributes on a node be declared in the schema. If they are not,
- * the toDOM() will not add them to the DOM element in the editor,
- * which they need to be for when the whole page is saved in order
- * to be properly processed by the back end. Because the attributes
- * for each enhancement are different and are only declared at run time,
- * we instead use a Node View, which will allow any attributes to be added
- * to the DOM element in the RTE.
- *
- * As long as the backend follows the `label` contract and the config
- * object denotes the `tag` to be used for the enhancement, we can have
- * one node type, one node view for all of the enhancements.
- *
- * @param {Prosemirror.Model.Node} node The node to receive the view. This
- *    is passed in from PM.
- * @param {Prosemirror.EditorView} View This is passed in from PM.
- * @param {Function} getPos Gets the current position of the node at any
- *    given state of the RTE. This is passed in from PM.
- */
-class EnhancementView {
-  constructor(node, view, getPos, lockedList, isCollab) {
-    this.view = view
-    this.node = node
-    this.getPos = getPos
-    this.isCollab = isCollab
-    let metaObject = node.attrs.meta
-
-    this.dom = document.createElement(metaObject.tag)
-    let className = `${constants.CLASSES.ENHANCEMENT} rte2-style-${metaObject.styleName}`
-
-    if (metaObject.line) {
-      className = `${className} block`
-    }
-
-    if (metaObject.extraCssClasses) {
-      className = `${className} ${metaObject.extraCssClasses}`
-    }
-
-    className = `${className} rte2-style-${metaObject.styleName}-start rte2-style-${metaObject.styleName}-end`
-
-    const isLine = !!metaObject.line
-    const label = node.attrs.label || ''
-
-    if (metaObject.readOnly && isLine) {
-      const span = document.createElement('span')
-      span.className = 'Enhancement-label'
-      this.dom.appendChild(span)
-      span.innerText = metaObject.displayName
-      if (metaObject.initialBody) {
-        const initialBody = document.createElement('span')
-        initialBody.className = 'Enhancement-initialBody'
-        initialBody.innerText = metaObject.initialBody
-        this.dom.appendChild(initialBody)
-      }
-    } else if (isLine) {
-      const span = document.createElement('span')
-      span.className = 'Enhancement-editable'
-      this.dom.appendChild(span)
-      this.contentDOM = span
-    } else if (metaObject.readOnly) {
-      this.dom.innerHTML = DOMPurify.sanitize(
-        label || metaObject.initialBody || '',
-      )
-    }
-    this.dom.className = className
-    this.dom.setAttribute('label', label)
-    this.dom.setAttribute('presentation', 'role')
-    if (node.attrs.id) {
-      this.dom.setAttribute('id', node.attrs.id)
-    }
-
-    let attributesObject = node.attrs.attributes
-    if (attributesObject) {
-      Object.keys(attributesObject).forEach((key) => {
-        try {
-          this.dom.setAttribute(key, attributesObject[key])
-        } catch (e) {}
-      })
-    }
-
-    if (isLine || metaObject.popup) {
-      if (isLine && metaObject.readOnly) {
-        this.dom.classList.add('readOnly')
-        this.submenuView = new BlockSubmenuView(
-          this.node,
-          this.view,
-          this.getPos,
-          this.dom,
-        )
-      } else {
-        this.submenuView = new SubmenuView(
-          this.node,
-          this.view,
-          this.getPos,
-          this.dom,
-        )
-        if (
-          this.view.props &&
-          this.view.props.props &&
-          this.view.props.props.resizeCallbacks
-        ) {
-          this.view.props.props.resizeCallbacks.push({
-            callback: this.submenuView.positionSubmenu,
-          })
-        }
-
-        this.dom.addEventListener(constants.EVENTS.CLICK, (evt) => {
-          evt.preventDefault()
-          this._handleOpenSubmenu(evt)
-        })
-
-        view.dom.addEventListener(
-          constants.EVENTS.CLICK,
-          this._handleOpenSubmenu,
-        )
-
-        view.dom.addEventListener(
-          constants.EVENTS.KEYDOWN,
-          this._handleCloseSubmenu,
-        )
-      }
-
-      if (!isLine) {
-        this.dom.addEventListener(constants.EVENTS.DBLCLICK, (evt) => {
-          if (this.dom.classList.contains('is-locked')) {
-            return
-          }
-          let editButton
-          if (metaObject.line) {
-            editButton = this.submenuView.submenuDOM.querySelector('.edit')
-          } else {
-            editButton = this.view.submenu.querySelector('.edit')
-          }
-          if (editButton) {
-            editButton.click()
-          }
-        })
-      }
-    }
-
-    if (metaObject.previewable) {
-      this.previewView = new PreviewView(
-        node,
-        view,
-        getPos,
-        this.dom,
-        isLine,
-        label,
-      )
-    }
-  }
-
-  /**
-   * Handles the call to open the submenu.
-   *
-   * @param {Event} evt
-   */
-  _handleOpenSubmenu = (evt) => {
-    const target =
-      evt.currentTarget.parentElement.closest('.Enhancement') ||
-      evt.currentTarget
-
-    if (!this.dom.contains(target)) {
-      this._handleCloseSubmenu(evt)
-      return
-    }
-
-    if (this.dom.classList.contains('is-locked')) {
-      return
-    }
-
-    this.submenuView.open(evt)
-  }
-  /**
-   * Handles the call to close the submenu. Abstracting this out
-   * for easier testing and to be able to remove the event listener
-   * when the node is destroyed.
-   *
-   * @param {Event} evt
-   */
-  _handleCloseSubmenu = (evt) => {
-    this.submenuView.close(evt)
-  }
-
-  ignoreMutation(record) {
-    return (
-      RICH_TEXT_ELEMENTS.find((e) => e.tag === this.node.type.name)
-        ?.previewable ||
-      this.dom === record.target ||
-      record.target.classList?.contains('Enhancement-preview')
-    )
-  }
-}
-
-export { EnhancementView }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/enhancement_manager/views/PreviewView.js

@@ -1,102 +0,0 @@
-/* eslint-disable no-debugger */
-import { constants } from '../../../settings'
-import Cookies from 'js.cookie'
-
-if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
-  await import('./PreviewView.less')
-}
-
-const RTE_PREVIEW_PATH =
-  window.BRIGHTSPOT.web.pagePaths[
-    'com.psddev.cms.tool.page.content.RichTextElementPreview'
-  ]
-
-/**
- * This is the submenu for enhancements.
- */
-class PreviewView {
-  /**
-   * @param {Prosemirror.Model.Node} node The node associated with this submenu
-   * @param {Prosemirror.EditorView} editorView
-   * @param {Function} getPos Function to get the position of the node in the RTE
-   * @param {Element} companionDom The DOM element in the RTE associated with this
-   *    view
-   */
-  constructor(node, editorView, getPos, companionDom, isLine, label) {
-    this.getPos = getPos
-    this.node = node
-    this.companionDom = companionDom
-    this.editorView = editorView
-    this.isLine = isLine
-    this.label = label
-    this.previewDOM = document.createElement(constants.ELEMENTS.DIV)
-    this.companionDom.appendChild(this.previewDOM)
-    this._render()
-  }
-  async _fetchContent() {
-    let meta = this.node.attrs.meta
-    const body = new FormData()
-    body.append('typeId', meta.typeId)
-    body.append(
-      'attributes',
-      JSON.stringify(this.node.attrs.attributes) || null,
-    )
-    body.append('body', this.node.attrs.label)
-    const response = await fetch(RTE_PREVIEW_PATH, {
-      method: 'POST',
-      headers: {
-        'Brightspot-CSRF': Cookies.get('bsp.csrf'),
-      },
-      body,
-    })
-    return response.text()
-  }
-  /**
-   * Generates the content for the submenu
-   *
-   * @private
-   * @return {Element} All of the content wrapped inside this
-   *    element.
-   */
-  async _getContent() {
-    const meta = this.node.attrs.meta
-    const contentElement = document.createElement(constants.ELEMENTS.DIV)
-    contentElement.className = 'rte2-block-preview'
-    contentElement.setAttribute('data-style-key', meta.styleName)
-    let attributesObject = this.node.attrs.attributes
-    if (attributesObject) {
-      Object.keys(attributesObject).forEach((key) => {
-        contentElement.setAttribute(`data-attr-${key}`, attributesObject[key])
-      })
-    }
-    const fc = await this._fetchContent()
-    contentElement.innerHTML = fc
-    return contentElement
-  }
-  /**
-   * Draws the submenu
-   *
-   * @private
-   */
-  async _render() {
-    const initialBody = this.companionDom.querySelector(
-      '.Enhancement-initialBody',
-    )
-    this.previewDOM.className = 'CodeMirror-linewidget Enhancement-preview'
-    this.previewDOM.setAttribute('cm-ignore-events', 'true')
-    const contentElement = await this._getContent()
-    this.previewDOM.appendChild(contentElement)
-    this.companionDom.appendChild(this.previewDOM)
-    if (this.isLine) {
-      const labelElement = document.createElement('p')
-      labelElement.className = 'Enhancement-preview-label'
-      labelElement.innerHTML = this.label
-      this.previewDOM.appendChild(labelElement)
-    }
-    if (initialBody) {
-      initialBody.remove()
-    }
-  }
-  destroy() {}
-}
-export { PreviewView }