@brightspot/ui 3.0.0 → 3.0.1-cms-ui-migration.1

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/ai_manager/AiManager.ts

@@ -0,0 +1,199 @@
+import { ChangeSet } from 'prosemirror-changeset'
+import { DOMParser, Schema } from 'prosemirror-model'
+import { EditorState, Plugin, PluginKey, Transaction } from 'prosemirror-state'
+import { EditorView } from 'prosemirror-view'
+import { getLegacyHTMLTextForProsemirror } from '../../codemirror-shim'
+import moment from 'moment'
+
+const key = new PluginKey('ai')
+
+/**
+ * The AI plugin.
+ *
+ * @param {*} schema The RTE schema.
+ */
+const aiPlugin = (
+  schema: Schema,
+  userLabel: string,
+  userId: string,
+  compliantTagNameMap: Map<string, string>,
+) => {
+  return new Plugin({
+    key,
+    state: {
+      init(state) {
+        const pluginState = new Map()
+        const activeStates = new Map()
+        const disabledStates = new Map()
+        const metaData = new Map()
+        activeStates.set('toggleAiContent', false)
+
+        pluginState.set('activeStates', activeStates)
+        pluginState.set('disabledStates', disabledStates)
+        pluginState.set('metaData', metaData)
+        return pluginState
+      },
+      apply(transaction, value, oldState, newState) {
+        const pluginState = value
+        const meta = transaction.getMeta(key)
+
+        if (meta && meta.hasOwnProperty('toggleAiContent')) {
+          const currentTrackState = pluginState
+
+          const newCurrentTrackState = !currentTrackState
+            .get('activeStates')
+            .get('toggleAiContent')
+
+          pluginState
+            .get('activeStates')
+            .set('toggleAiContent', newCurrentTrackState)
+        }
+
+        transaction.setMeta('prevStateFromTo', {
+          prevFrom: oldState.selection.from,
+          prevTo: oldState.selection.to,
+        })
+
+        pluginState.set('prevPosition', oldState.selection.from)
+        return pluginState
+      },
+    },
+    appendTransaction(transactions, oldState, newState) {
+      const tr = newState.tr
+
+      transactions.forEach((transaction: Transaction, index) => {
+        const meta = transaction.getMeta(key)
+
+        const changeSet = ChangeSet.create(oldState.doc).addSteps(
+          newState.doc,
+          transaction.mapping.maps,
+          null,
+        )
+
+        if (changeSet.changes.length) {
+          changeSet.changes.forEach((change) => {
+            const { fromB, toB } = change
+
+            change.inserted.forEach((span) => {
+              if (meta?.addedExternally) {
+                const markType = schema.marks.ai
+                const time = moment().format('MM/D/YYYY h:mm:ss A')
+                const aiMark = markType.create({
+                  'data-user-label': userLabel,
+                  'data-time': time,
+                  'data-user-id': userId,
+                  'data-chat-id': meta?.chatId,
+                  'data-response-id': meta?.responseId,
+                  title: `${userLabel}: ${time}`,
+                })
+
+                tr.addMark(fromB, toB, aiMark)
+              } else {
+                // Ensure that the AI mark is not applied to user typed text
+                const hasAiMarkBefore =
+                  fromB > 0 &&
+                  schema.marks.ai.isInSet(
+                    newState.doc.resolve(fromB - 1).marks(),
+                  )
+                const hasAiMarkAfter =
+                  toB < newState.doc.content.size &&
+                  schema.marks.ai.isInSet(newState.doc.resolve(toB).marks())
+
+                if (hasAiMarkBefore || hasAiMarkAfter) {
+                  tr.removeMark(fromB, toB, schema.marks.ai)
+                }
+              }
+            })
+          })
+        }
+      })
+
+      // Guard against infinite loops by checking if there are actual changes on the
+      // transaction before returning it.
+      if (tr.steps.length > 0) {
+        return tr
+      }
+
+      return
+    },
+    props: {
+      handleDOMEvents: {
+        handleAi: (view, evt) => {
+          const aiContent = evt.detail.aiContent
+          const isReplace = evt.detail.replace
+          const state = view.state
+          const tr = state.tr
+          const chatId = evt.detail.chatId
+          const responseId = evt.detail.responseId
+
+          const domFragment = document.createElement('div')
+          domFragment.innerHTML = getLegacyHTMLTextForProsemirror(
+            aiContent,
+            state.schema,
+            compliantTagNameMap,
+            true,
+          )
+
+          const slice = DOMParser.fromSchema(schema).parseSlice(domFragment, {
+            preserveWhitespace: 'full',
+          })
+
+          if (isReplace) {
+            const markType = schema.marks.ai
+            const time = moment().format('MM/D/YYYY h:mm:ss A')
+            const aiMark = markType.create({
+              'data-user-label': userLabel,
+              'data-time': time,
+              'data-user-id': userId,
+              'data-chat-id': chatId,
+              'data-response-id': responseId,
+              title: `${userLabel}: ${time}`,
+            })
+
+            tr.replaceWith(0, state.doc.content.size, slice.content)
+
+            const newDocSize = tr.doc.content.size
+            tr.addMark(0, newDocSize, aiMark)
+          } else {
+            const from = view.state.selection.ranges[0].$from.pos
+            let to = view.state.selection.ranges[0].$to.pos
+
+            to = from + slice.size + (from === 0 ? 1 : 0)
+
+            tr.replaceSelection(slice)
+          }
+
+          tr.setMeta(key, {
+            addedExternally: true,
+            chatId: chatId,
+            responseId: responseId,
+          })
+
+          view.dispatch(tr)
+        },
+      },
+    },
+  })
+}
+
+/**
+ * Command triggered when user engages AI tracking. Dispatches
+ * a meta update to toggle the tracking state.
+ */
+const toggleAiContent = () => {
+  return function (
+    state: EditorState,
+    dispatch: (tr: Transaction) => void,
+    editorView?: EditorView,
+  ) {
+    dispatch(
+      state.tr.setMeta(key, {
+        toggleAiContent: true,
+      }),
+    )
+
+    editorView?.dom.classList.toggle('ProseMirror-aiPreviewMode')
+  }
+}
+
+export { aiPlugin, toggleAiContent }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/collab_manager/CollabManager.js

@@ -0,0 +1,339 @@
+/* eslint-disable no-debugger */
+/* global RTE_CONTENT_IS_LOCKED */
+/* global RTE_CONTENT_IS_LOCKED_BY_ANOTHER_USER */
+/* global RTE_CONTENT_CANNOT_BE_EDITED_WARNING */
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils'
+import { ChangeSet } from 'prosemirror-changeset'
+import { AvatarView } from './views/AvatarView'
+
+if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
+  await import('./views/CollabEditing.less')
+}
+
+const CONTENT_IS_LOCKED_TEXT =
+  typeof RTE_CONTENT_IS_LOCKED !== 'undefined'
+    ? RTE_CONTENT_IS_LOCKED
+    : 'Pending edit from'
+const CONTENT_CAN_NOT_BE_EDITED_WARNING =
+  typeof RTE_CONTENT_CANNOT_BE_EDITED_WARNING !== 'undefined'
+    ? RTE_CONTENT_CANNOT_BE_EDITED_WARNING
+    : 'This selection has content that is being edited by someone else and can not be modified.'
+const CONTENT_IS_LOCKED_BY_ANOTHER_USER_TEXT =
+  typeof RTE_CONTENT_IS_LOCKED_BY_ANOTHER_USER !== 'undefined'
+    ? RTE_CONTENT_IS_LOCKED_BY_ANOTHER_USER
+    : 'another user'
+let globalLockedList = {}
+const key = new PluginKey('collabManager')
+
+/**
+ * @param {Object.<number>} anchorMap
+ * @param {Array.<Object.<number>>} rangeList
+ * @param {string} userId
+ * @param {ProseMirror.DecorationSet} decos
+ * @param {ProseMirror.Model.Node} doc
+ * @return {ProseMirror.DecorationSet}
+ */
+const getDecos = (anchorMap, rangeList, lockedList, userId, decos, doc) => {
+  const userData = new Map()
+
+  Object.keys(anchorMap).forEach((key) => {
+    decos = decos.remove(decos.find(null, null, (spec) => spec.id === key))
+
+    if (key === userId) {
+      return
+    }
+
+    if (anchorMap[key] === null) {
+      return
+    }
+    const widget = document.createElement('span')
+    // Getting the user's background and title from the user
+    // avatar so that way the colors and title can match up
+    // with the avatar if one exisys. We will store this data
+    // in a map in case we see the same user in the range loop below.
+    const userAvatar = document.querySelector(
+      `.ToolUserAvatar[data-user-id="${key}"]`,
+    )
+    let backgroundColor = 'rgb(255, 71, 71)'
+    let title = ''
+    if (userAvatar && userAvatar.style) {
+      backgroundColor = userAvatar.style.backgroundColor
+      title = userAvatar.title
+      userData.set(key, {
+        backgroundColor,
+        title,
+      })
+    }
+    widget.style.borderColor = backgroundColor
+    widget.style.backgroundColor = backgroundColor
+    widget.title = title
+    widget.className = 'ProseMirror-collabCursor'
+    const deco = Decoration.widget(anchorMap[key], widget, {
+      id: key,
+    })
+    decos = decos.add(doc, [deco])
+  })
+
+  rangeList.forEach((range) => {
+    if (range.clientId === userId) {
+      return
+    }
+
+    let highlightTitle = ''
+    let highlightColor = 'rgb(255, 71, 71)'
+    let red = 255
+    let green = 71
+    let blue = 71
+
+    // Getting the user's background and title from the user
+    // avatar so that way the colors and title can match up
+    // with the avatar if one exists.
+    if (userData.get(range.clientId)) {
+      highlightColor = userData.get(range.clientId).backgroundColor
+      highlightTitle = userData.get(range.clientId).title
+    } else {
+      const userAvatar = document.querySelector(
+        `.ToolUserAvatar[data-user-id="${range.clientId}"]`,
+      )
+      if (userAvatar && userAvatar.style) {
+        highlightColor = userAvatar.style.backgroundColor
+        highlightTitle = userAvatar.title
+      }
+    }
+    // Getting the rgb colors so that we can use rgba for the background
+    // color and set an opacity. Otherwise, the background color is a
+    // little too dark, making it hard to read the text underneath.
+    const match = highlightColor.match(/rgb\((\d+), (\d+), (\d+)\)/)
+    red = match[1]
+    green = match[2]
+    blue = match[3]
+
+    const adjustedHighlightColor = `rgba(${red}, ${green}, ${blue}, .5)`
+
+    decos = decos.remove(
+      decos.find(null, null, (spec) => spec.id === range.clientId),
+    )
+
+    const deco = Decoration.inline(
+      range.from,
+      range.to,
+      {
+        class: 'collab-selection',
+        style: `background-color: ${adjustedHighlightColor};`,
+        title: highlightTitle,
+      },
+      {
+        id: range.clientId,
+      },
+    )
+    decos = decos.add(doc, [deco])
+  })
+
+  doc.descendants((node, pos, parent) => {
+    decos = decos.remove(
+      decos.find(null, null, (spec) => spec.id === node.attrs.id),
+    )
+
+    if (
+      Object.keys(lockedList).indexOf(node.attrs.id) !== -1 &&
+      lockedList[node.attrs.id] !== userId
+    ) {
+      const userAvatar = document.querySelector(
+        `.ToolUserAvatar[data-user-id="${lockedList[node.attrs.id]}"]`,
+      )
+      let userName = CONTENT_IS_LOCKED_BY_ANOTHER_USER_TEXT
+      if (userAvatar && userAvatar.title && userAvatar.title !== '') {
+        userName = userAvatar.title
+      }
+      const widget = document.createElement('span')
+      widget.className = 'CollabEditing-message-isLocked'
+      widget.innerText = `${CONTENT_IS_LOCKED_TEXT} ${userName}`
+      const deco = Decoration.widget(pos, widget, {
+        id: node.attrs.id,
+      })
+      const nodeDeco = Decoration.node(
+        pos,
+        pos + node.nodeSize,
+        {
+          'is-locked': 'true',
+          class: 'is-locked',
+        },
+        {
+          id: node.attrs.id,
+        },
+      )
+      decos = decos.add(doc, [deco, nodeDeco])
+    }
+  })
+  return decos
+}
+
+/**
+ * The Collab plugin. This manages decorations that indicate other users'
+ * cursor placement. It places a mock cursor when a user is simply anchored
+ * or highlights the range a user is selecting. It maps the decorations through
+ * each state change so that the decoration will remain anchored to the original
+ * location, even as state changes modify positions. The plugin will remove anchors
+ * and highlighted ranges when the RTE is notified that the user has changed
+ * position.
+ *
+ * @param {*} schema The RTE schema.
+ * @param {string} userId The current user's ID
+ * @param {Object.<number>} anchorMap A mapping of userIds to their anchors, as
+ *    provided by the backend.
+ * @param {Array.<Object.<number>>} rangeList A list of mappings of userIds to their
+ *    selected ranges, as provided by the backend.
+ * @return {Function} This plugin.
+ */
+const collabPlugin = (schema, userId, anchorMap, rangeList, lockedList) => {
+  return new Plugin({
+    key,
+    view(editorView) {
+      this.view = new AvatarView(editorView, userId, anchorMap)
+      return this.view
+    },
+    state: {
+      init(state) {
+        const pluginState = new Map()
+        let decos = DecorationSet.create(state.doc, [])
+        if (
+          Object.keys(anchorMap).length ||
+          rangeList.length ||
+          Object.keys(lockedList).length
+        ) {
+          decos = getDecos(
+            anchorMap,
+            rangeList,
+            lockedList,
+            userId,
+            decos,
+            state.doc,
+          )
+        }
+        pluginState.set('decos', decos)
+        const connectedIds = new Set()
+        Object.keys(anchorMap).forEach((key) => {
+          if (anchorMap[key] !== null) {
+            connectedIds.add(key)
+          }
+        })
+        pluginState.set('connectedIds', connectedIds)
+        pluginState.set('userId', userId)
+        return pluginState
+      },
+      apply(tr, value, oldState, newState) {
+        const pluginState = value
+        let decos = pluginState.get('decos').map(tr.mapping, tr.doc)
+        const connectedIds = pluginState.get('connectedIds')
+        const meta = tr.getMeta(this)
+        if (meta && (meta.anchorMap || meta.rangeList || meta.lockedList)) {
+          const anchorMap = meta.anchorMap
+          const rangeList = meta.rangeList
+          const lockedList = meta.lockedList
+          globalLockedList = lockedList
+          decos = getDecos(
+            anchorMap,
+            rangeList,
+            lockedList,
+            userId,
+            decos,
+            tr.doc,
+          )
+          Object.keys(anchorMap).forEach((key) => {
+            if (anchorMap[key] === null) {
+              connectedIds.delete(key)
+            } else {
+              connectedIds.add(key)
+            }
+          })
+        }
+        pluginState.set('connectedIds', connectedIds)
+        pluginState.set('decos', decos)
+        return pluginState
+      },
+    },
+    props: {
+      decorations(state) {
+        return this.getState(state).get('decos')
+      },
+    },
+    filterTransaction(tr, state) {
+      let allowTransaction = true
+      const collabManagerPluginState = state.collabManager$
+      const connectedIds = collabManagerPluginState.get('connectedIds')
+      const currentUserId = collabManagerPluginState.get('userId')
+      const decos = collabManagerPluginState.get('decos')
+      // This will hold all the table nodes that are currently being edited by
+      // other users
+      const tableSet = new Set()
+      // Loop through the connected users to find any tables being edited
+      for (let id of connectedIds.values()) {
+        if (id === currentUserId) {
+          continue
+        }
+        let userDecos = decos.find(null, null, (spec) => spec.id === id)
+        let deco = userDecos.length ? userDecos[0] : null
+        if (deco) {
+          const pos = deco.from
+          const tableNode = findParentNodeOfTypeClosestToPos(
+            state.doc.resolve(pos),
+            state.schema.nodes.table,
+          )
+
+          if (tableNode) {
+            tableSet.add(tableNode.node)
+          }
+        }
+      }
+
+      // If we have any tables being edited, loop through the deleted content in the
+      // changeSet to find if any of the content that was deleted contains a table being
+      // edited, and if so, cancel this transaction.
+      if (tableSet.size) {
+        const changeSet = ChangeSet.create(state.doc).addSteps(
+          state.doc,
+          tr.mapping.maps,
+        )
+        changeSet.deleted.forEach((deletedSpan) => {
+          const slice = deletedSpan.slice
+          const content = slice.content.content
+          const hasTableBeingEdited = content.some((node) => tableSet.has(node))
+          if (hasTableBeingEdited) {
+            window.alert(CONTENT_CAN_NOT_BE_EDITED_WARNING)
+            allowTransaction = false
+          }
+        })
+      } else {
+        const steps = tr.steps
+        if (!tr.docs || tr.type === 'received') {
+          return allowTransaction
+        }
+        const prevDoc = tr.docs[0]
+        const nodesModified = []
+        steps.forEach((step) => {
+          const { from, to } = step
+          prevDoc.nodesBetween(from, to, (node) => {
+            nodesModified.push(node)
+          })
+        })
+
+        const hasLockedContent = nodesModified.some((node) => {
+          return (
+            Object.keys(globalLockedList).indexOf(node.attrs.id) !== -1 &&
+            globalLockedList[node.attrs.id] !== userId
+          )
+        })
+
+        if (hasLockedContent) {
+          window.alert(CONTENT_CAN_NOT_BE_EDITED_WARNING)
+          allowTransaction = false
+        }
+      }
+
+      return allowTransaction
+    },
+  })
+}
+export { collabPlugin, getDecos }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/collab_manager/views/AvatarView.js

@@ -0,0 +1,96 @@
+/* eslint-disable no-debugger */
+import { constants } from '../../../settings'
+
+if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
+  await import('./AvatarView.less')
+}
+
+/**
+ * Controls the displaying of user avatars, which
+ * represent concurrent users in the RTE within a
+ * collaborative editing environment.
+ *
+ * @param {Prosemirror.EditorView} editorView
+ * @param {string} userId Current userId
+ * @param {Object.<string>} anchorMap Mapping of user ids to positions
+ *    in the editor.
+ */
+class AvatarView {
+  constructor(editorView, userId, anchorMap) {
+    this.editorView = editorView
+    this.userId = userId
+    this.dom = editorView.dom.parentElement.querySelector(
+      `.${constants.CLASSES.PM_AVATAR_WRAPPER}`,
+    )
+    /**
+     * Holds the userIds of the currently displayed avatars.
+     * @property {Map} currentAvatarIds
+     */
+    this.currentAvatarIds = new Map()
+    const connectedIds = new Set()
+    Object.keys(anchorMap).forEach((key) => {
+      connectedIds.add(key)
+    })
+    this.render(connectedIds)
+  }
+
+  /**
+   * Renders the UI.
+   * @param {Set.<string>} connectedIds The ids of all the
+   *    concurrent users.
+   */
+  render(connectedIds) {
+    // If a user id of a currently displayed avatar is not in
+    // the connectedIds set, we should remove it.
+    this.currentAvatarIds.forEach((value, id) => {
+      if (!connectedIds.has(id)) {
+        const avatar = this.dom.querySelector(
+          `.ToolUserAvatar[data-user-id="${id}"]`,
+        )
+        if (avatar) {
+          avatar.remove()
+          this.currentAvatarIds.delete(id)
+        }
+      }
+    })
+    // For each of the connected users, we should display their avatar
+    // if it's not already displayed. We will just clone the avatar
+    // that is already on the page.
+    connectedIds.forEach((id) => {
+      if (id === this.userId) {
+        return
+      }
+      const avatar = this.dom.querySelector(
+        `.ToolUserAvatar[data-user-id="${id}"]`,
+      )
+      if (!avatar) {
+        const mainAvatar = document.querySelector(
+          `.ToolUserAvatar[data-user-id="${id}"]`,
+        )
+        if (mainAvatar) {
+          const clonedAvatar = mainAvatar.cloneNode(true)
+          this.dom.appendChild(clonedAvatar)
+          this.currentAvatarIds.set(id, true)
+        }
+      }
+    })
+  }
+
+  /**
+   * ProseMirror calls this when the plugin's state
+   * changes.
+   *
+   * @param {ProseMirror.State} oldState
+   * @param {ProseMirror.State} newState
+   */
+  update(oldState, newState) {
+    const connectedIds = newState.collabManager$.get('connectedIds')
+    this.render(connectedIds)
+  }
+
+  destroy() {
+    this.dom.remove()
+  }
+}
+
+export { AvatarView }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/collab_manager/views/AvatarView.less

@@ -0,0 +1,11 @@
+.ProseMirrorAvatarWrapper {
+  position: absolute;
+  right: 0;
+  top: calc(var(--gap-l) * -2);
+
+  .ToolUserAvatar {
+    border: 1px solid var(--color-white);
+    float: left;
+    margin-left: calc(var(--gap-m) * -1);
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/collab_manager/views/CollabEditing.less

@@ -0,0 +1,18 @@
+@import (reference) url('../../../../Text.less');
+
+.CollabEditing {
+  &-message {
+    margin-top: var(--gap-s);
+
+    &-isLocked {
+      .Text.is-s;
+
+      background-color: var(--color-yellow1);
+      border-left: var(--gap-m) solid var(--color-yellow6);
+      color: var(--color-yellow6);
+      display: block;
+      padding-left: var(--gap-m);
+      width: 100%;
+    }
+  }
+}