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

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

@@ -0,0 +1,86 @@
+/* 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

@@ -0,0 +1,60 @@
+/* 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/Enhancement.less

@@ -0,0 +1,67 @@
+@import (reference) url('../../../../Reset.less');
+
+.Enhancement {
+  margin: var(--Text-height) 0;
+  position: relative;
+
+  &.readOnly {
+    .Icon.is-s;
+    .Text.is-s;
+
+    background: var(--color-gray1);
+    margin: var(--Text-height) calc(0px - var(--gap-m));
+    padding: var(--gap-m);
+
+    ::selection,
+    &.ProseMirror-selectednode {
+      color: var(--color-black);
+    }
+
+    &.ProseMirror-selectednode {
+      background: var(--color-dominant2);
+    }
+  }
+
+  &-initialBody {
+    display: block;
+    font-style: italic;
+  }
+
+  &.is-locked {
+    cursor: auto;
+  }
+
+  &.block {
+    display: block;
+  }
+
+  &.inPlay {
+    opacity: 0.2;
+  }
+
+  .rte2-block-preview {
+    .rte2-style-ins-delete & {
+      margin: 0;
+    }
+
+    .rte2-style-ins-insert & {
+      margin: 0;
+    }
+
+    .rte2-style-ins-ai & {
+      margin: 0;
+    }
+  }
+
+  .rte2-style-ins-delete & {
+    background: var(--color-red3);
+  }
+
+  .rte2-style-ins-insert & {
+    background: var(--color-green3);
+  }
+
+  .rte2-style-ins-ai & {
+    background: var(--color-blue3);
+  }
+}

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

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

@@ -0,0 +1,102 @@
+/* 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 }

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

@@ -0,0 +1,45 @@
+@import (reference) url('../../../../Text.less');
+
+.Enhancement {
+  &.hasPreview {
+    ::selection {
+      background: transparent;
+    }
+  }
+
+  &.readOnly.ProseMirror-selectednode.block .Enhancement-preview {
+    background: var(--color-dominant2);
+  }
+
+  &:focus {
+    background-color: transparent;
+  }
+
+  &-preview {
+    .Text.is-m;
+
+    background: var(--color-gray1);
+    margin-left: calc(var(--gap-m) * -1);
+    margin-right: calc(var(--gap-m) * -1);
+    padding: var(--gap-s) var(--gap-m);
+
+    &-label {
+      font-style: italic;
+    }
+  }
+
+  &:not(.block) .Enhancement-preview {
+    background: transparent;
+  }
+
+  .rte2-block-preview {
+    margin-top: var(--gap-m);
+
+    img {
+      display: block;
+      height: auto;
+      max-height: 30vh;
+      max-width: 100%;
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/enhancement_manager/views/ProsemirrorEnhancementMenu.less

@@ -0,0 +1,113 @@
+@import (reference) url('../../../../Icon.less');
+@import (reference) url('../../../../IconButton.less');
+@import (reference) url('../../../../Reset.less');
+
+.ProsemirrorEnhancementMenuContainer {
+  display: none;
+  max-width: 50vw;
+  position: absolute;
+  z-index: 2;
+
+  @media (@mq-l) {
+    max-width: 31vw;
+  }
+
+  &.open {
+    display: block;
+  }
+}
+
+.ProsemirrorEnhancementMenu:not(:first-child) {
+  margin-top: var(--gap-xs);
+}
+
+.ProsemirrorEnhancementMenu {
+  margin-bottom: 0;
+
+  &.open {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &-container {
+    align-items: center;
+    background: var(--color-white);
+    box-shadow: var(--shadow-3);
+    display: flex;
+    font-size: var(--fontSize-s);
+    line-height: var(--lineHeight-s);
+    margin-bottom: 0;
+    position: relative;
+    white-space: nowrap;
+
+    --Text-height: var(--lineHeight-s);
+
+    &-link,
+    &-link-goto {
+      color: var(--Input-placeholderColor);
+      cursor: pointer;
+      line-height: 28px;
+    }
+
+    &-link,
+    &-link-goto {
+      margin-right: 10px;
+      text-decoration: underline;
+    }
+
+    &-link {
+      display: none;
+      max-width: 15vw;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      @media (@mq-l) {
+        display: inline-block;
+      }
+    }
+
+    &-link-goto {
+      margin-right: 10px;
+      text-decoration: underline;
+
+      @media (@mq-l) {
+        display: none;
+      }
+    }
+
+    &-label {
+      background: var(--color-dominant1);
+      font-weight: 700;
+      height: calc(var(--Icon-size) + 2 * var(--gap-s));
+      line-height: var(--Icon-size);
+      margin-right: 5px;
+      padding: var(--gap-s) var(--gap-m);
+    }
+
+    &-button {
+      .IconButton;
+
+      &::before {
+        content: attr(data-icon);
+      }
+
+      &.remove {
+        .IconButton.is-red;
+      }
+    }
+
+    &.is-block {
+      background: transparent;
+      box-shadow: none;
+      position: absolute;
+      right: calc(var(--gap-m) - var(--gap-s));
+      top: calc(var(--gap-m) - var(--gap-s));
+      z-index: 3;
+    }
+
+    .open & {
+      visibility: visible;
+    }
+  }
+}