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

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

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

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

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