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

@@ -0,0 +1,690 @@
+import {
+  getEnhancementEditFormURL,
+  setUpSubscription,
+  setUpAndTriggerFrame,
+} from './EnhancementManager'
+import { closeLayeredPopups, getObjectValue } from '../../utilities'
+import { toggleMark, setBlockType } from 'prosemirror-commands'
+import { DOMSerializer, Fragment, Slice } from 'prosemirror-model'
+import { v1 as uuidv1 } from 'uuid'
+import { TextSelection, NodeSelection } from 'prosemirror-state'
+import scrollParent from 'scrollparent'
+import Cookies from 'js.cookie'
+
+function fetchInstance(typeId) {
+  const body = new FormData()
+  body.append('typeId', typeId)
+
+  return fetch('/cms/rte/instance', {
+    method: 'POST',
+    headers: {
+      'Brightspot-CSRF': Cookies.get('bsp.csrf'),
+    },
+    body,
+  })
+}
+
+// Returns all slots where an enhancement can be placed.
+function getSlots(state, getPos) {
+  // Find all top level nodes and their offsets.
+  const doc = state.doc
+  const children = []
+
+  doc.forEach((node, offset, index) => {
+    children.push({ node, offset, index })
+  })
+
+  // Find all slots where an enhancement can be placed.
+  const slots = []
+  const from = getPos()
+  const to = from + doc.nodeAt(from).nodeSize
+  const lastIndex = children.length - 1
+  const lineType = state.schema.nodes.line
+
+  for (let i = 0, l = children.length; i < l; ++i) {
+    const { node, offset, index } = children[i]
+
+    const addSlot = (offset, emptyLine) => {
+      slots.push({
+        offset,
+        current: offset === from,
+        emptyLine,
+        betweenLines:
+          i > 0 &&
+          i < lastIndex &&
+          children[i - 1].node.type === lineType &&
+          children[i + 1].node.type === lineType,
+      })
+    }
+
+    if (node.type === lineType) {
+      if (node.textContent === '') {
+        // On an empty line.
+        addSlot(offset, true)
+      } else if (index === 0) {
+        // At the beginning before a line of text.
+        addSlot(offset)
+      } else if (index === lastIndex) {
+        // At the end after a line of text.
+        addSlot(offset + node.nodeSize)
+      }
+    } else {
+      // Before an enhancement, unless there was another enhancement before this
+      // one, because it would've already been added.
+      if (
+        offset !== to &&
+        (slots.length === 0 || offset !== slots[slots.length - 1].offset)
+      ) {
+        addSlot(offset)
+      }
+
+      // After an enhancement, unless this is the current enhancement that's
+      // being moved.
+      if (offset !== from) {
+        addSlot(offset + node.nodeSize)
+      }
+    }
+  }
+
+  return slots
+}
+
+// Moves an enhancement.
+async function moveTo(state, dispatch, view, from, to, scroll) {
+  const tr = state.tr
+  const fromOffset = from.offset
+  let toOffset = to.offset
+  const enh = state.doc.nodeAt(fromOffset)
+
+  // Deletes the enhancement at the original position.
+  const del = () => {
+    tr.setSelection(NodeSelection.create(tr.doc, fromOffset))
+
+    // If the enhancement was in between two lines of text, insert an empty
+    // line to maintain the paragraph structure.
+    if (from.betweenLines) {
+      tr.replaceSelectionWith(state.schema.nodes.line.create())
+    } else {
+      tr.deleteSelection()
+    }
+  }
+
+  // Inserts the enhancement at the new position.
+  const ins = () => {
+    // If the enhancement is being moved in between two lines of text, delete
+    // the empty line that's there.
+    tr.setSelection(
+      (to.emptyLine ? NodeSelection : TextSelection).create(tr.doc, toOffset),
+    )
+
+    tr.replaceSelectionWith(enh)
+  }
+
+  // Insert and delete from the bottom to the top so that the offsets aren't
+  // affected.
+  if (fromOffset > toOffset) {
+    del()
+    ins()
+  } else {
+    ins()
+    del()
+
+    // Recalculate the offset of where the enhancement moved to.
+    toOffset -= enh.nodeSize
+
+    if (from.betweenLines) {
+      // Size of an empty line.
+      toOffset += 2
+    }
+  }
+
+  // Remember the enhancement position before the move.
+  const fromDOM = view.nodeDOM(fromOffset)
+  const parent = scrollParent(fromDOM)
+  const fromTop = fromDOM.getBoundingClientRect().top
+
+  // Select the moved enhancement and finalize the move.
+  const finalize = () => {
+    tr.setSelection(NodeSelection.create(tr.doc, toOffset))
+    dispatch(tr)
+  }
+  // Animate the move using the ViewTransition API if the browser supports
+  // it (https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API).
+  if (window.BRIGHTSPOT?.ui.cms.enableV5UI && document.startViewTransition) {
+    const container = fromDOM.closest('.ProseMirror')
+    container.classList.add('is-viewTransition')
+    const transition = document.startViewTransition(() => finalize())
+    await transition.finished
+    container.classList.remove('is-viewTransition')
+  } else {
+    finalize()
+  }
+
+  // Use the enhancement position before and after the move to scroll the parent
+  // so that the user doesn't have to scroll to get back to the enhancement.
+  if (scroll && parent) {
+    parent.scrollTop +=
+      view.nodeDOM(toOffset).getBoundingClientRect().top - fromTop
+  }
+}
+
+/**
+ * Sets up a popup for any enhancement that has a popup.
+ *
+ * @param {Object} meta
+ * @param {ProseMirror.State} state
+ * @param {ProseMirror.Dispatch} dispatch
+ * @param {Event} evt
+ */
+const setUpPopup = (editorView, meta, state, dispatch, evt) => {
+  let url = getEnhancementEditFormURL(
+    meta.typeId,
+    evt.target,
+    meta.isCustom,
+    meta.customUrl,
+  )
+  // The user might have engaged the insert menu command after selecting
+  // a node in the RTE, which would mean we might have some text that
+  // we can send as the body query param
+  const { from, to } = state.selection
+  const text = state.doc.textBetween(from, to) || ''
+  // Setting the body query param autopopulates the Body Text field. It is
+  // ok to populate with an empty string because the form will handle validation
+  // server-side.
+  url = `${url}&body=${encodeURIComponent(text)}`
+
+  const tempId = `Prosemirror.event-${Date.now()}`
+  evt.target.setAttribute('href', url)
+  evt.target.setAttribute('data-event-id', tempId)
+  if (!meta.isCustom || (meta.isCustom && meta.isDataFramePost)) {
+    evt.target.setAttribute('data-frame-post', 'true')
+  }
+
+  setUpSubscription(editorView, tempId, meta, state, dispatch, evt, text)
+  setUpAndTriggerFrame(evt)
+}
+
+const insertNonEditableNoFieldsEnhancements = (obj) => {
+  return function (state, dispatch, editorView, evt) {
+    fetchInstance(obj.typeId)
+      .then((res) => res.json())
+      .then((data) => {
+        const text = data.body || ''
+        const contentJSON = [
+          {
+            type: obj.tag,
+            content: [{ type: 'text', text: text }],
+            attrs: {
+              meta: obj,
+              label: text,
+            },
+          },
+        ]
+        let fragment = Fragment.fromJSON(state.schema, contentJSON)
+        const slice = new Slice(fragment, 0, 0)
+        let transaction = state.tr
+        transaction = transaction.replaceSelection(slice)
+        dispatch(transaction)
+      })
+      .catch((error) => {
+        console.error('RTE Error:', error)
+      })
+  }
+}
+
+/**
+ * Inserts editable inline enhancements.
+ *
+ * @param {Object} meta The enhancement meta data.
+ */
+const insertEditableInlineEnhancements = (meta) => {
+  return function (state, dispatch, editorView, evt) {
+    if (meta.popup) {
+      setUpPopup(editorView, meta, state, dispatch, evt)
+    } else {
+      toggleMark(state.schema.marks[meta.tag])(state, dispatch)
+    }
+  }
+}
+
+/**
+ * Command to insert enhancements without popups.
+ * Enhancements that do not have popups are inserted as either nodes if they
+ * are line enhancements or marks if they are inline.
+ *
+ * @param {Object.<string|Array.<string>>} obj The object representation
+ *  of the enhancement, which the backend provides
+ */
+const insertEnhancementWithoutPopup = (obj) => {
+  return function (state, dispatch, editorView) {
+    const schema = state.config.schema
+    let { $anchor } = state.selection
+    const nodeType = schema.nodes[obj.tag]
+    const defaultNodeType = schema.nodes.line
+
+    if (obj.line) {
+      fetchInstance(obj.typeId)
+        .then((res) => res.json())
+        .then((data) => {
+          const parentNodeType = getObjectValue($anchor, 'parent.type.name')
+          const newAlignmentState =
+            parentNodeType === getObjectValue(nodeType, 'name')
+              ? defaultNodeType
+              : nodeType
+          setBlockType(newAlignmentState, { meta: obj })(state, dispatch)
+
+          if (
+            state.selection.empty &&
+            data.body &&
+            parentNodeType !== nodeType.name
+          ) {
+            const tr = editorView.state.tr.insert(
+              $anchor.pos,
+              state.schema.text(data.body),
+            )
+            dispatch(tr)
+          }
+        })
+        .catch((error) => {
+          console.error('RTE Error:', error)
+        })
+    } else {
+      toggleMark(schema.marks[obj.tag])(state, dispatch)
+    }
+  }
+}
+
+/**
+ * Command to edit an enhancement, which involves gathering the
+ * data to be sent to the server for the enhancement form generation
+ * we well as triggering a frame with the popup that holds the form.
+ * We also subscribe to when the form successful save topic is published
+ * from the ehancement.jsp.
+ *
+ * @param {Prosemirror.Model.Node} node The node in the document tree that
+ *    represents the enhancement.
+ */
+const editEnhancement = (node) => {
+  /**
+   * @param {Prosemirror.EditorState} state
+   * @param {Prosemirror.EditorView.dispatch} dispatch Announces a transaction
+   *    This method is bound to the view instance, so that it can be easily passed around.
+   * @param {Prosemirror.EditorView} editorView
+   * @param {Event} evt The DOM event that triggered the edit action. We need this to
+   *    properly trigger the frame and popup.
+   */
+  return function (state, dispatch, editorView, evt) {
+    const meta = node.attrs.meta
+    const enhancementID = meta.typeId
+    if (!enhancementID) {
+      return false
+    }
+
+    closeLayeredPopups(evt)
+
+    const doc = state.doc
+    let nodeFrom, nodeTo
+
+    doc.descendants((n, p) => {
+      if (
+        n.attrs.id === node.attrs.id ||
+        n.marks.some((mark) => mark.attrs.id === node.attrs.id)
+      ) {
+        if (!nodeFrom) {
+          nodeFrom = p
+        }
+
+        nodeTo = p + n.nodeSize
+      }
+    })
+
+    const body =
+      DOMSerializer.fromSchema(state.schema).serializeFragment(
+        doc.slice(nodeFrom, nodeTo).content,
+      ).firstElementChild?.innerHTML || ''
+
+    const attributes = JSON.stringify(node.attrs.attributes)
+    let url = getEnhancementEditFormURL(enhancementID, evt.target)
+    url = `${url}&body=${encodeURIComponent(
+      body,
+    )}&attributes=${encodeURIComponent(attributes)}`
+
+    const tempId = `Prosemirror.event-${Date.now()}`
+    evt.target.setAttribute('href', url)
+    evt.target.setAttribute('data-event-id', tempId)
+    evt.target.setAttribute('data-frame-post', 'true')
+
+    const { empty, from, to } = state.selection
+    let tr = state.tr
+    const id = uuidv1()
+    if (empty) {
+      tr = tr.setMeta('enhancementManager$', {
+        add: { id, from },
+      })
+    } else {
+      tr = tr.setMeta('enhancementManager$', {
+        add: { id, from, to },
+      })
+    }
+    dispatch(tr)
+
+    setUpSubscription(
+      editorView,
+      tempId,
+      meta,
+      state,
+      dispatch,
+      evt,
+      body,
+      node,
+      true,
+      id,
+    )
+    setUpAndTriggerFrame(evt, node.attrs.id, editorView)
+    PubSub.publish('collabLock', { id: node.attrs.id })
+  }
+}
+
+/**
+ * Command to insert an enhancement, which involves determining if text
+ * has been selected in the RTE and then the Insert command was invoked
+ * or just invoking the command. We know text has been selected if the state
+ * selection is not empty. We also subscribe to when the form successful
+ * save topic is published from the ehancement.jsp.
+ *
+ * @param {Object.<string>} meta The global config object for this type
+ *    of enhancement. We attach this to the data payload so we can later
+ *    in the publish step add it to the node attrs, making
+ *    it available on the node for when the user edits the enhancement.
+ */
+const insertEnhancement = (meta) => {
+  /**
+   * @param {Prosemirror.EditorState} state
+   * @param {Prosemirror.EditorView.dispatch} dispatch Announces a transaction
+   *    This method is bound to the view instance, so that it can be easily passed around.
+   * @param {Prosemirror.EditorView} editorView
+   * @param {Event} evt The DOM event that triggered the edit action. We need this to
+   *    properly trigger the frame and popup.
+   */
+  return function (state, dispatch, editorView, evt) {
+    if (!meta.popup) {
+      return
+    }
+
+    closeLayeredPopups(evt)
+
+    if (
+      evt.target.classList.contains('active') &&
+      meta.line &&
+      !meta.readOnly
+    ) {
+      clearEnhancement()(state, dispatch, evt)
+      return
+    }
+
+    let url = getEnhancementEditFormURL(
+      meta.typeId,
+      evt.target,
+      meta.isCustom,
+      meta.customUrl,
+    )
+    // The user might have engaged the insert menu command after selecting
+    // a node in the RTE, which would mean we might have some text that
+    // we can send as the body query param.
+    const { empty, from, to } = state.selection
+
+    // Build markup of selected text checking if selection from/to are inline
+    // text nodes and unwrapping if so.
+    const body = document.createElement('DIV')
+
+    body.append(
+      DOMSerializer.fromSchema(state.schema).serializeFragment(
+        state.doc.slice(from, to).content,
+      ),
+    )
+
+    const bodyHtml = body?.innerHTML || ''
+
+    // Setting the body query param autopopulates the Body Text field. It is
+    // ok to populate with an empty string because the form will handle validation
+    // server-side.
+    url = `${url}&body=${encodeURIComponent(bodyHtml)}`
+
+    const tempId = `Prosemirror.event-${Date.now()}`
+    evt.target.setAttribute('href', url)
+    evt.target.setAttribute('data-event-id', tempId)
+    if (!meta.isCustom || (meta.isCustom && meta.isDataFramePost)) {
+      evt.target.setAttribute('data-frame-post', 'true')
+    }
+
+    let tr = state.tr
+    const id = uuidv1()
+    if (empty) {
+      tr = tr.setMeta('enhancementManager$', {
+        add: { id, from },
+      })
+    } else {
+      tr = tr.setMeta('enhancementManager$', {
+        add: { id, from, to },
+      })
+    }
+    dispatch(tr)
+
+    setUpSubscription(
+      editorView,
+      tempId,
+      meta,
+      state,
+      dispatch,
+      evt,
+      bodyHtml,
+      null,
+      false,
+      id,
+    )
+    setUpAndTriggerFrame(evt, id, editorView)
+  }
+}
+
+/**
+ * Removes an enhancement from a text node in the RTE but retains
+ * the text node without the enhancement (e.g. a user removes a link
+ * but wants to retain the text of the link). If we are trying to remove
+ * a mark from a mark's submenu we have to scan the whole document to
+ * find a node that has the mark with the same UUID of the mark we are
+ * trying to remove.
+ *
+ * @param {Prosemirror.Mark} enhancement The enhancement to be removed.
+ */
+const clearEnhancement = (enhancement) => {
+  return function (state, dispatch, evt) {
+    if (!enhancement) {
+      const { $anchor, anchor } = state.selection
+      if (state.selection instanceof TextSelection) {
+        enhancement = $anchor.parent
+      } else {
+        enhancement = state.doc.nodeAt(anchor)
+      }
+    }
+
+    if (!enhancement) {
+      return
+    }
+
+    const id = enhancement.attrs.id
+    let tr = state.tr
+    const isLine = getObjectValue(enhancement, 'attrs.meta.line')
+    if (isLine) {
+      const defaultNodeType = getObjectValue(state, 'schema.nodes.line')
+      if (defaultNodeType) {
+        PubSub.publish('blockEnhancementCleared', evt)
+        return setBlockType(defaultNodeType)(state, dispatch)
+      }
+    } else {
+      state.doc.descendants((node, pos) => {
+        const marks = node.marks
+        const matchingMarks = marks.filter((localMark) => {
+          return localMark.attrs.id === id
+        })
+        matchingMarks.forEach((mark) => {
+          tr = tr.removeMark(pos, pos + node.nodeSize, mark)
+        })
+      })
+    }
+
+    dispatch(tr)
+  }
+}
+
+// Moves an enhancement to where the user clicks.
+const moveEnhancement = (view, getPos) => {
+  // Create an overlay that displays where the user can click.
+  const { state, dispatch } = view
+  const overlay = document.createElement('div')
+
+  overlay.classList.add('ProseMirror-moveEnhancementOverlay')
+
+  const slots = getSlots(state, getPos)
+  const from = slots.find((s) => s.current)
+  const targets = new Map()
+  const viewDOM = view.dom
+
+  // Resize the overlay and position the targets.
+  const position = () => {
+    overlay.style.height = `${viewDOM.offsetHeight}px`
+    overlay.style.left = `${viewDOM.offsetLeft}px`
+    overlay.style.top = `${viewDOM.offsetTop}px`
+    overlay.style.width = `${viewDOM.offsetWidth}px`
+
+    for (const [target, toDOM] of targets) {
+      target.style.top = `${toDOM.offsetTop}px`
+    }
+  }
+
+  const observer = new ResizeObserver(position)
+
+  // Create the targets where the user can click to move the enhancement.
+  const removeOverlay = () => {
+    overlay.parentNode.removeChild(overlay)
+    observer.disconnect()
+  }
+
+  for (const to of slots) {
+    const target = document.createElement('div')
+
+    target.classList.add('ProseMirror-moveEnhancementTarget')
+
+    if (to.emptyLine) {
+      target.classList.add('is-emptyLine')
+    }
+
+    const toDOM = view.nodeDOM(to.offset)
+
+    if (toDOM) {
+      targets.set(target, toDOM)
+    } else {
+      target.classList.add('is-last')
+    }
+
+    if (to.current) {
+      target.classList.add('is-cancel')
+
+      target.innerText = 'Cancel'
+      target.onclick = removeOverlay
+    } else {
+      target.innerText = 'Move'
+
+      target.onclick = () => {
+        // Remember how tall the enhancement was.
+        const fromDOM = view.nodeDOM(from.offset)
+        const parent = scrollParent(fromDOM)
+        const fromHeight = fromDOM.getBoundingClientRect().height
+
+        // Move the enhancement.
+        moveTo(state, dispatch, view, from, to)
+        removeOverlay()
+
+        // If the enhancement was moved down, scroll up so that the RTE is
+        // roughly at the same position as before.
+        if (parent && from.offset < to.offset) {
+          parent.scrollTop -= fromHeight
+        }
+      }
+    }
+
+    overlay.appendChild(target)
+  }
+
+  position()
+  viewDOM.parentNode.insertBefore(overlay, viewDOM.nextSibling)
+  observer.observe(viewDOM)
+}
+
+/**
+ * Removes an enhancement completely.
+ */
+const removeEnhancement = (view, getPos) => {
+  const { state, dispatch } = view
+  const { doc, tr } = state
+  const from = getPos()
+  const before = doc.childBefore(from)?.node?.type
+  const after = doc.childAfter(from + doc.nodeAt(from).nodeSize)?.node?.type
+  const lineType = state.schema.nodes.line
+
+  tr.setSelection(NodeSelection.create(tr.doc, from))
+
+  if (before === lineType && after === lineType) {
+    tr.replaceSelectionWith(lineType.create())
+  } else {
+    tr.deleteSelection()
+  }
+
+  dispatch(tr)
+}
+
+/**
+ * Moves an enhancement up a line.
+ */
+const moveEnhancementUp = (view, getPos) => {
+  const { state, dispatch } = view
+  const slots = getSlots(state, getPos)
+
+  for (let i = 1, l = slots.length; i < l; ++i) {
+    const from = slots[i]
+
+    if (from.current) {
+      moveTo(state, dispatch, view, from, slots[i - 1], true)
+      break
+    }
+  }
+}
+
+/**
+ * Moves an enhancement down a line.
+ */
+const moveEnhancementDown = (view, getPos) => {
+  const { state, dispatch } = view
+  const slots = getSlots(state, getPos)
+
+  for (let i = 0, l = slots.length - 1; i < l; ++i) {
+    const from = slots[i]
+
+    if (from.current) {
+      moveTo(state, dispatch, view, from, slots[i + 1], true)
+      break
+    }
+  }
+}
+
+export {
+  insertEnhancement,
+  clearEnhancement,
+  editEnhancement,
+  removeEnhancement,
+  moveEnhancementUp,
+  moveEnhancementDown,
+  moveEnhancement,
+  insertEnhancementWithoutPopup,
+  insertEditableInlineEnhancements,
+  insertNonEditableNoFieldsEnhancements,
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Enhancements' Globals
+ *
+ * The following are currently globals produced by the backend
+ * and placed directly in the HTML in the head of the document.
+ * Abstracting that here to make it easier to move to a different
+ * mode of backend communication (e.g. servlet) later.
+ */
+
+const PM_CONTEXT_PATH = CONTEXT_PATH
+
+export { PM_CONTEXT_PATH }

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

@@ -0,0 +1,15 @@
+import { enhancementManagerPlugin } from './EnhancementManager'
+import {
+  insertEnhancement,
+  insertEnhancementWithoutPopup,
+  insertEditableInlineEnhancements,
+  insertNonEditableNoFieldsEnhancements,
+} from './commands'
+
+export {
+  enhancementManagerPlugin,
+  insertEnhancement,
+  insertEnhancementWithoutPopup,
+  insertEditableInlineEnhancements,
+  insertNonEditableNoFieldsEnhancements,
+}