@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/ai_manager/AiManager.ts

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

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

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