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

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/track_manager/TrackManager.js

@@ -0,0 +1,905 @@
+import { Plugin, PluginKey, TextSelection } from 'prosemirror-state'
+import { ChangeSet } from 'prosemirror-changeset'
+//import { DefaultEncoder } from 'prosemirror-changeset/src/diff.ts' // Use this when converting to TypeScript
+
+const key = new PluginKey('track')
+const incompatibleMarks = ['comment']
+const PENDING = RTE_PENDING || 'Pending' /* global RTE_PENDING */
+
+const removeEntireLine = (previousNode) => {
+  return (
+    previousNode?.isBlock &&
+    previousNode?.content.size > 0 &&
+    previousNode?.content.content.every((n) =>
+      n.marks.some((mark) => mark.type.name === 'del'),
+    )
+  )
+}
+
+const removeMark = (tr, node, markType, from, to) => {
+  if (node.isBlock) {
+    const marks = node.marks.slice().filter((mark) => mark.type !== markType)
+    tr = tr.setNodeMarkup(from, node.type, node.attrs, marks)
+  } else {
+    tr = tr.removeMark(from, to, markType)
+  }
+  return tr
+}
+
+const isAllInserts = (slice) => {
+  let isAllInserts = true
+
+  slice.content.descendants((child) => {
+    if (child.type.name !== 'line' && isAllInserts) {
+      isAllInserts = child.marks.some((mark) => mark.type.name === 'ins')
+    }
+  })
+
+  return isAllInserts
+}
+
+/**
+ * The 'id' of the Enhancement is copied as a 'data-' attribute on the
+ * 'ins' and 'del' marks for identification when an Enhancement is moved.
+ */
+const marksHaveSameTargetId = (nodeA, nodeB) => {
+  const markA = nodeA.marks.find(
+    (mark) => mark.attrs['data-target-id'] !== undefined,
+  )
+  const markB = nodeB.marks.find(
+    (mark) => mark.attrs['data-target-id'] !== undefined,
+  )
+  return (
+    markA &&
+    markB &&
+    markA.attrs['data-target-id'] === markB.attrs['data-target-id']
+  )
+}
+
+/**
+ * Command triggered when user engages tracking. Dispatches
+ * a meta update to toggle the tracking state.
+ */
+const doTrack = () => {
+  return function (state, dispatch, doc) {
+    const isActive = state.track$.get('activeStates').get('trackChanges')
+    const storage = window.sessionStorage
+    const contentId = doc.props.props.ctx.name
+    const toggleKey = 'BSP.TrackChanges.toggleOn.' + contentId
+    if (isActive) {
+      PubSub.publish('disengageTrackManager')
+      storage.removeItem(toggleKey)
+    } else {
+      PubSub.publish('engageTrackManager')
+      storage.setItem(toggleKey, 1)
+    }
+
+    dispatch(
+      state.tr.setMeta(key, {
+        toggleTracking: true,
+      }),
+    )
+  }
+}
+
+const togglePreview = () => {
+  return function (state, dispatch, editorView) {
+    dispatch(
+      state.tr.setMeta(key, {
+        togglePreview: true,
+      }),
+    )
+
+    editorView.dom.classList.toggle('ProseMirror-previewMode')
+  }
+}
+
+/**
+ * This method does the actual work of deleting marks and nodes
+ * as appropriate for the type of action.
+ *
+ * @param {ProseMirror.EditorState} state
+ * @param {ProseMirror.Dispatch} dispatch
+ * @param {string} type Indicates the type of action - should be `accept`
+ *    or `reject`
+ */
+const handleAcceptReject = (state, dispatch, view, type) => {
+  const trackChangesState = state.track$.get('activeStates').get('trackChanges')
+  state.track$.get('activeStates').set('trackChanges', false)
+  const { $cursor, ranges } = state.selection
+  let tr = state.tr
+  const insertMark = state.schema.marks.ins
+  const deleteMark = state.schema.marks.del
+  let removeMarkType = insertMark
+  let removeNodeType = deleteMark
+
+  if (type === 'reject') {
+    removeMarkType = deleteMark
+    removeNodeType = insertMark
+  }
+  // User has clicked onto the editor but did not select any text.
+  if ($cursor) {
+    if (
+      removeMarkType.isInSet(
+        state.storedMarks ||
+          $cursor.marksAcross(state.selection.$cursor) ||
+          $cursor.marks(),
+      )
+    ) {
+      const nodeWithMark = state.doc.nodeAt($cursor.pos)
+      state.doc.descendants((node, pos, parent) => {
+        if (nodeWithMark === node) {
+          tr = tr.removeMark(pos, pos + node.nodeSize, removeMarkType)
+        }
+      })
+    }
+    if (
+      removeNodeType.isInSet(
+        state.storedMarks ||
+          $cursor.marksAcross(state.selection.$cursor) ||
+          $cursor.marks(),
+      )
+    ) {
+      const nodeWithMark = state.doc.nodeAt($cursor.pos)
+      state.doc.descendants((node, pos, parent) => {
+        if (nodeWithMark === node) {
+          tr = tr.delete(pos, pos + node.nodeSize)
+        }
+      })
+    }
+  } else {
+    // We keep track of all the different nodes when user has highlighted
+    // a selection because the user could highlight both nodes that are marked
+    // for insertion as well as deletion in 1 highlight. We are using a set
+    // to make sure only unique nodes are stored.
+    let numDeleted = 0
+    let lastLineDeleted = 0
+    state.selection.content().content.descendants((nodeWithMark) => {
+      const marks = nodeWithMark.marks
+      if (removeMarkType.isInSet(marks)) {
+        state.doc.descendants((node, pos) => {
+          if (nodeWithMark === node) {
+            const from = pos - numDeleted
+            tr = removeMark(
+              tr,
+              node,
+              removeMarkType,
+              from,
+              from + node.nodeSize,
+            )
+          }
+        })
+      }
+
+      if (removeNodeType.isInSet(marks)) {
+        state.doc.descendants((node, pos, parent) => {
+          // If a line has been deleted, we don't want to delete any nodes inside again
+          if (nodeWithMark === node && pos > lastLineDeleted) {
+            const previousNode = state.doc.nodeAt(pos - 1)
+            if (previousNode === parent && removeEntireLine(previousNode)) {
+              tr = tr.delete(
+                pos - 1 - numDeleted,
+                pos - 1 + parent.nodeSize - numDeleted,
+              )
+              numDeleted = numDeleted + parent.nodeSize
+              lastLineDeleted = pos - 1 + parent.nodeSize
+            } else {
+              tr = tr.delete(pos - numDeleted, pos + node.nodeSize - numDeleted)
+              numDeleted = numDeleted + node.nodeSize
+            }
+          }
+        })
+      }
+    })
+  }
+
+  dispatch(tr)
+  state = view.state
+  tr = state.tr
+  tr = tr.setMeta(key, {
+    toggleTracking: true,
+  })
+  dispatch(tr)
+  state.track$.get('activeStates').set('trackChanges', trackChangesState)
+}
+
+/**
+ * The command fired when users accept tracked changes. Insert marks will be removed
+ * and nodes with delete marks around them will be removed entirely. When a user
+ * clicks onto a node with either mark, we will delete the entire mark/remove the node, accordingly.
+ * When the user selects text/node, we will delete the entire mark/remove the node, accordingly, even
+ * if the user only selected part of the mark.
+ */
+const acceptChanges = () => {
+  return function (state, dispatch, view) {
+    handleAcceptReject(state, dispatch, view, 'accept')
+  }
+}
+
+/**
+ * The command fire when users reject all changes.
+ */
+const rejectChangesAll = () => {
+  return function (state, dispatch, view) {
+    const trackChangesState = state.track$
+      .get('activeStates')
+      .get('trackChanges')
+    state.track$.get('activeStates').set('trackChanges', false)
+    const delType = state.schema.marks.del
+    let tr = state.tr
+    let numDeleted = 0
+    state.doc.descendants((node, pos) => {
+      const marks = node.marks
+      const hasDel = marks.some((mark) => {
+        return mark.type.name === 'del'
+      })
+      if (hasDel) {
+        tr = removeMark(
+          tr,
+          node,
+          delType,
+          pos - numDeleted,
+          pos + node.nodeSize - numDeleted,
+        )
+      }
+      const hasIns = marks.some((mark) => {
+        return mark.type.name === 'ins'
+      })
+      if (hasIns) {
+        tr = tr.delete(pos - numDeleted, pos + node.nodeSize - numDeleted)
+        numDeleted = numDeleted + node.nodeSize
+      }
+    })
+
+    dispatch(tr)
+    state = view.state
+    tr = state.tr
+    tr = tr.setMeta(key, 'triggerUpdate')
+    dispatch(tr)
+    tr = tr.setMeta(key, {
+      toggleTracking: true,
+    })
+    dispatch(tr)
+    state.track$.get('activeStates').set('trackChanges', trackChangesState)
+  }
+}
+
+/**
+ * The command fired when users accept all changes.
+ */
+const acceptChangesAll = () => {
+  return function (state, dispatch, view) {
+    const trackChangesState = state.track$
+      .get('activeStates')
+      .get('trackChanges')
+    state.track$.get('activeStates').set('trackChanges', false)
+    const insType = state.schema.marks.ins
+    let tr = state.tr
+    let numDeleted = 0
+    let lastLineDeleted = 0
+    state.doc.descendants((node, pos, parent) => {
+      const marks = node.marks
+      const hasIns = marks.some((mark) => mark.type.name === 'ins')
+      if (hasIns) {
+        const from = pos - numDeleted
+        tr = removeMark(tr, node, insType, from, from + node.nodeSize)
+      }
+      const hasDel = marks.some((mark) => {
+        return mark.type.name === 'del'
+      })
+      // If a line has been deleted, we don't want to delete any nodes inside again
+      if (hasDel && pos > lastLineDeleted) {
+        const previousNode = state.doc.nodeAt(pos - 1)
+        if (previousNode === parent && removeEntireLine(previousNode)) {
+          tr = tr.delete(
+            pos - 1 - numDeleted,
+            pos - 1 + parent.nodeSize - numDeleted,
+          )
+          numDeleted = numDeleted + parent.nodeSize
+          lastLineDeleted = pos - 1 + parent.nodeSize
+        } else {
+          tr = tr.delete(pos - numDeleted, pos + node.nodeSize - numDeleted)
+          numDeleted = numDeleted + node.nodeSize
+        }
+      }
+    })
+
+    dispatch(tr)
+    state = view.state
+    tr = state.tr
+    tr = tr.setMeta(key, 'triggerUpdate')
+    dispatch(tr)
+    tr = tr.setMeta(key, {
+      toggleTracking: true,
+    })
+    dispatch(tr)
+    state.track$.get('activeStates').set('trackChanges', trackChangesState)
+  }
+}
+
+/**
+ * The command fired when users reject tracked changes. Delete marks will be removed
+ * and nodes with ins marks around them will be removed entirely. When a user
+ * clicks onto a node with either mark, we will delete the entire mark/remove the node, accordingly.
+ * When the user selects text/node, we will delete the entire mark/remove the node, accordingly, even
+ * if the user only selected part of the mark.
+ */
+const rejectChanges = () => {
+  return function (state, dispatch, view) {
+    handleAcceptReject(state, dispatch, view, 'reject')
+  }
+}
+
+const handleInsertion = (change, newState, markType, tr, userLabel, userId) => {
+  const { fromB, toB } = change
+  const slice = newState.doc.slice(fromB, toB)
+  const markedBlocks = []
+
+  const mark = markType.create({
+    'data-user-label': userLabel,
+    'data-time': PENDING,
+    'data-user-id': userId,
+    title: `${userLabel}: ${PENDING}`,
+  })
+
+  // The set of "return" checks are for RTE editor inserts that should go through
+  // without being wrapped in 'ins' tag for tracking.
+  if (
+    [...incompatibleMarks].some((mark) => {
+      return newState.doc.rangeHasMark(
+        change.fromB,
+        change.toB,
+        newState.schema.marks[mark],
+      )
+    })
+  ) {
+    return tr
+  }
+
+  // Slice is nothing but new inserts.
+  if (isAllInserts(slice)) {
+    return tr
+  }
+
+  tr = tr.addMark(fromB, toB, mark)
+
+  // Block nodes won't have mark applied with 'addMark' method so must alternatively add
+  // via the 'setNodeMarkup' method.
+  slice.content.forEach((node, offset) => {
+    tr.doc.forEach((child, offset, index) => {
+      if (
+        child.isBlock &&
+        child.attrs.id &&
+        node.eq(child) &&
+        !markedBlocks.includes(child)
+      ) {
+        markedBlocks.push(child)
+        const mark = markType.create({
+          'data-user-label': userLabel,
+          'data-time': PENDING,
+          'data-user-id': userId,
+          'data-target-id': node?.attrs?.id,
+          title: `${userLabel}: ${PENDING}`,
+        })
+        const marks = node.marks.slice()
+        marks.push(mark)
+        tr = tr.setNodeMarkup(offset, node.type, node.attrs, marks)
+      }
+    })
+  })
+
+  return tr
+}
+
+const handleDeletion = (
+  changes,
+  change,
+  oldState,
+  newState,
+  markType,
+  markTypeDeleted,
+  tr,
+  transactions,
+  index,
+  userLabel,
+  originalTransaction,
+  userId,
+) => {
+  const meta = transactions[index].getMeta(key)
+  if (meta && meta.hasOwnProperty('acceptDeletion')) {
+    return tr
+  }
+  const { fromA, toA } = change
+  const slice = oldState.doc.slice(fromA, toA)
+  const markedBlocks = []
+  let replaceOffset = 0
+
+  const mark = markTypeDeleted.create({
+    'data-user-label': userLabel,
+    'data-time': PENDING,
+    'data-user-id': userId,
+    title: `${userLabel}: ${PENDING}`,
+  })
+
+  // The set of "return" checks are for RTE editor deletes that should go through
+  // without being wrapped in 'del' tag for tracking.
+  if (
+    [...incompatibleMarks].some((mark) => {
+      return oldState.doc.rangeHasMark(
+        change.fromA,
+        change.toA,
+        oldState.schema.marks[mark],
+      )
+    })
+  ) {
+    return tr
+  }
+
+  // Slice is nothing but new inserts.
+  if (isAllInserts(slice)) {
+    return tr
+  }
+
+  // Classify whether the slice contains incompatible marks (e.g. comment) and/or
+  // non-incompatible text nodes to decide how to handle deletion tracking.
+  let hasIncompatible = false
+  let hasNonIncompatibleText = false
+  slice.content.descendants((child) => {
+    if (child.isText) {
+      const isIncompat = incompatibleMarks.some((name) =>
+        oldState.schema.marks[name].isInSet(child.marks),
+      )
+      if (isIncompat) hasIncompatible = true
+      else hasNonIncompatibleText = true
+    }
+  })
+
+  // All incompatible (e.g. cursor backspace within a comment): let deletion run untracked.
+  if (hasIncompatible && !hasNonIncompatibleText) {
+    return tr
+  }
+
+  const isMixed = hasIncompatible && hasNonIncompatibleText
+
+  // An already marked node that was moved (up|down).
+  if (
+    slice.size === 1 &&
+    slice.content.firstChild.marks.some(
+      (mark) => mark.type.name === markType.name,
+    )
+  ) {
+    return tr
+  }
+
+  const nodeType = slice.content.firstChild.type
+  if (
+    nodeType.name === 'bspBreak' ||
+    nodeType.name === 'listItem' ||
+    nodeType.name === 'listItemDiv' ||
+    nodeType.name === 'orderedList' ||
+    nodeType.name === 'table' ||
+    nodeType.name === 'tableCell' ||
+    nodeType.name === 'tableRow' ||
+    nodeType.name === 'unorderedList' ||
+    nodeType.name === 'ul' ||
+    nodeType.name === 'ol' ||
+    nodeType.groups.indexOf('aligned') > -1
+  ) {
+    return tr
+  }
+
+  // When a enhancement is moved via the up|down arrows there are 2 steps in transaction
+  // accounting for a delete and an insert and if so we must account for the potential offset.
+  if (changes.length > 1) {
+    // Pressing the down arrow does a delete and then an insert. Pressing the up arrow does
+    // the opposite so the offset needs to reflect if an actual insert was done prior.
+    replaceOffset = tr.steps.length === 0 ? 0 : 1
+  }
+
+  // N.B. Can not use ProseMirror 'insert' since only a Slice will potentially join when cut
+  // between block nodes and the 'insert' command only takes a Fragment|Node.
+  tr = tr.replaceRange(fromA + replaceOffset, fromA + replaceOffset, slice)
+
+  // Mixed case: selection spans comment-marked and non-comment text. Apply del marks only
+  // to non-comment text nodes; leave comment nodes untouched.
+  if (isMixed) {
+    const searchStart = fromA + replaceOffset
+    const searchEnd = searchStart + slice.content.size
+    tr.doc.nodesBetween(searchStart, searchEnd, (node, pos) => {
+      if (node.isText) {
+        const isIncompat = incompatibleMarks.some((name) =>
+          oldState.schema.marks[name].isInSet(node.marks),
+        )
+        if (!isIncompat) {
+          // Clamp to [searchStart, searchEnd] — adjacent text nodes may have been merged
+          // by replaceRange, extending the node beyond the re-inserted range.
+          const markFrom = Math.max(pos, searchStart)
+          const markTo = Math.min(pos + node.nodeSize, searchEnd)
+          tr = tr.addMark(markFrom, markTo, mark)
+        }
+      }
+    })
+
+    // Delete any ins-marked nodes within the range; leave comment nodes in place.
+    const mixedDeletions = []
+    tr.doc.nodesBetween(searchStart, searchEnd, (node, pos) => {
+      if (node.marks.some((m) => m.type.name === 'ins')) {
+        mixedDeletions.push({ from: pos, to: pos + node.nodeSize })
+        return false
+      }
+    })
+    mixedDeletions.sort((a, b) => b.from - a.from)
+    mixedDeletions.forEach((range) => {
+      tr = tr.delete(range.from, range.to)
+    })
+
+    return tr
+  }
+
+  tr = tr.addMark(fromA, toA, mark)
+
+  // Block nodes won't have mark applied with 'addMark' method so must alternatively add the
+  // mark via the 'setNodeMarkup' method.
+  slice.content.forEach((node, offset) => {
+    tr.doc.forEach((child, offset, index) => {
+      if (
+        child.isBlock &&
+        child.attrs.id &&
+        node.eq(child) &&
+        !markedBlocks.includes(child)
+      ) {
+        markedBlocks.push(child)
+        const mark = markTypeDeleted.create({
+          'data-user-label': userLabel,
+          'data-time': PENDING,
+          'data-user-id': userId,
+          'data-target-id': node?.attrs?.id,
+          title: `${userLabel}: ${PENDING}`,
+        })
+        const marks = node.marks.slice()
+        marks.push(mark)
+        tr = tr.setNodeMarkup(offset, node.type, node.attrs, marks)
+      }
+    })
+  })
+
+  // Now truly delete any inserts or incompatible marks from selection.
+  const deletions = []
+  const searchStart = fromA + replaceOffset
+  const searchEnd = searchStart + slice.content.size
+  tr.doc.nodesBetween(searchStart, searchEnd, (node, pos) => {
+    if (
+      node.marks.some(
+        (mark) =>
+          mark.type.name === 'ins' ||
+          incompatibleMarks.includes(mark.type.name),
+      )
+    ) {
+      deletions.push({ from: pos, to: pos + node.nodeSize })
+      return false // don't descend into nodes we'll delete
+    }
+  })
+
+  // Reverse order to avoid offset issues when deleting multiple nodes
+  deletions.sort((a, b) => b.from - a.from)
+
+  deletions.forEach((range) => {
+    tr = tr.delete(range.from, range.to)
+  })
+
+  return tr
+}
+
+/**
+ * Tallies the number of tracked change marks.
+ *
+ * @param {ProseMirror.Model.Node} doc The top-level node.
+ * @return {number} The number of tracked change marks.
+ */
+const getNumTrackedChanges = (doc) => {
+  let numChanges = 0
+  const targetIds = new Set()
+  doc.descendants((node) => {
+    const marks = node.marks
+    for (let mark of marks) {
+      if (mark.type.name === 'ins' || mark.type.name === 'del') {
+        const dataTargetId = mark.attrs?.['data-target-id']
+        if (dataTargetId && dataTargetId.length > 0) {
+          if (targetIds.has(mark.attrs['data-target-id'])) {
+            continue
+          } else {
+            targetIds.add(mark.attrs['data-target-id'])
+          }
+        }
+
+        numChanges++
+      }
+    }
+  })
+  return numChanges
+}
+
+/**
+ * The track plugin.
+ *
+ * @param {*} schema The RTE schema.
+ */
+const trackPlugin = (schema, userLabel, ctx) => {
+  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('trackChanges', false)
+        activeStates.set('acceptChanges', false)
+        activeStates.set('togglePreview', false)
+        disabledStates.set('acceptChanges', true)
+        disabledStates.set('rejectChanges', true)
+        const numChanges = getNumTrackedChanges(state.doc)
+        const toggleTrackChangesKey = 'BSP.TrackChanges.toggleOn.' + ctx.name
+        if (window.sessionStorage.getItem(toggleTrackChangesKey)) {
+          const subscription = PubSub.subscribe('rteLoaded', (rte) => {
+            PubSub.publish('engageTrackManager')
+            rte.view.dispatch(
+              rte.view.state.tr.setMeta(key, {
+                toggleTracking: true,
+              }),
+            )
+            subscription.remove()
+          })
+        }
+        if (numChanges) {
+          disabledStates.set('acceptChangesAll', false)
+          activeStates.set('acceptChangesAll', true)
+          disabledStates.set('rejectChangesAll', false)
+          activeStates.set('rejectChangesAll', true)
+          metaData.set('acceptChangesAll', numChanges)
+          metaData.set('rejectChangesAll', numChanges)
+        } else {
+          disabledStates.set('acceptChangesAll', true)
+          activeStates.set('acceptChangesAll', false)
+          metaData.set('acceptChangesAll', 0)
+          disabledStates.set('rejectChangesAll', true)
+          activeStates.set('rejectChangesAll', false)
+          metaData.set('rejectChangesAll', 0)
+        }
+        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('toggleTracking')) {
+          const currentTrackState = pluginState
+          const newCurrentTrackState = !currentTrackState
+            .get('activeStates')
+            .get('trackChanges')
+          pluginState
+            .get('activeStates')
+            .set('trackChanges', newCurrentTrackState)
+        }
+        if (meta && meta.hasOwnProperty('togglePreview')) {
+          const currentTrackState = pluginState
+          const newCurrentPreviewState = !currentTrackState
+            .get('activeStates')
+            .get('togglePreview')
+          pluginState
+            .get('activeStates')
+            .set('togglePreview', newCurrentPreviewState)
+        }
+        const markType = schema.marks.ins
+        const markTypeDelete = schema.marks.del
+        const { $cursor, empty, ranges } = newState.selection
+        if (empty && $cursor) {
+          if (
+            markType.isInSet(newState.storedMarks || $cursor.marks()) ||
+            markTypeDelete.isInSet(newState.storedMarks || $cursor.marks())
+          ) {
+            pluginState.get('activeStates').set('acceptChanges', true)
+            pluginState.get('activeStates').set('rejectChanges', true)
+            pluginState.get('disabledStates').set('acceptChanges', false)
+            pluginState.get('disabledStates').set('rejectChanges', false)
+          } else {
+            pluginState.get('activeStates').set('acceptChanges', false)
+            pluginState.get('activeStates').set('rejectChanges', false)
+            pluginState.get('disabledStates').set('acceptChanges', true)
+            pluginState.get('disabledStates').set('rejectChanges', true)
+          }
+        } else {
+          if (ranges) {
+            ranges.forEach((range) => {
+              const { $from, $to } = range
+              const has =
+                newState.doc.rangeHasMark($from.pos, $to.pos, markType) ||
+                newState.doc.rangeHasMark($from.pos, $to.pos, markTypeDelete)
+              if (has) {
+                pluginState.get('activeStates').set('acceptChanges', true)
+                pluginState.get('activeStates').set('rejectChanges', true)
+                pluginState.get('disabledStates').set('acceptChanges', false)
+                pluginState.get('disabledStates').set('rejectChanges', false)
+              } else {
+                pluginState.get('activeStates').set('acceptChanges', true)
+                pluginState.get('activeStates').set('rejectChanges', true)
+                pluginState.get('disabledStates').set('acceptChanges', true)
+                pluginState.get('disabledStates').set('rejectChanges', true)
+              }
+            })
+          }
+        }
+
+        let numTrackChanges = getNumTrackedChanges(newState.doc)
+        if (numTrackChanges) {
+          pluginState.get('disabledStates').set('acceptChangesAll', false)
+          pluginState.get('activeStates').set('acceptChangesAll', true)
+          pluginState.get('metaData').set('acceptChangesAll', numTrackChanges)
+          pluginState.get('disabledStates').set('rejectChangesAll', false)
+          pluginState.get('activeStates').set('rejectChangesAll', true)
+          pluginState.get('metaData').set('rejectChangesAll', numTrackChanges)
+        } else {
+          pluginState.get('disabledStates').set('acceptChangesAll', true)
+          pluginState.get('activeStates').set('acceptChangesAll', false)
+          pluginState.get('metaData').set('acceptChangesAll', 0)
+          pluginState.get('disabledStates').set('rejectChangesAll', true)
+          pluginState.get('activeStates').set('rejectChangesAll', false)
+          pluginState.get('metaData').set('rejectChangesAll', 0)
+        }
+
+        transaction.setMeta('prevStateFromTo', {
+          prevFrom: oldState.selection.from,
+          prevTo: oldState.selection.to,
+        })
+
+        pluginState.set('prevPosition', oldState.selection.from)
+        return pluginState
+      },
+    },
+    appendTransaction(transactions, oldState, newState) {
+      const historyPlugin = newState.history$
+      if (
+        historyPlugin &&
+        historyPlugin.undone &&
+        historyPlugin.undone.eventCount
+      ) {
+        return
+      }
+      const schema = newState.config.schema
+      const markType = schema.marks.ins
+      const markTypeDeleted = schema.marks.del
+      const pluginState = newState[key.key]
+      const userId = ctx.dataset.userId
+
+      const isTracking = pluginState.get('activeStates').get('trackChanges')
+
+      if (!isTracking || transactions[0].meta.appendedTransaction) {
+        return
+      }
+
+      let tr = newState.tr
+      transactions.forEach((transaction, index) => {
+        if (transaction.meta.removeFromTracking) {
+          return
+        }
+
+        // Copy of PM DefaultEncoder updated so compareTokens always returns null for whole word replacement
+        const changeSet = ChangeSet.create(oldState.doc, undefined, {
+          // Standard behavior: returns just the character, ignoring marks.
+          encodeCharacter: (char) => char,
+          // Standard behavior: returns the node type name.
+          encodeNodeStart: (node) => node.type.name,
+          // Standard behavior: returns a fixed value (e.g., -1) for all node ends.
+          encodeNodeEnd: (node) => {
+            const type = node.type
+            let cache =
+              type.schema.cached.changeSetIDs ||
+              (type.schema.cached.changeSetIDs = Object.create(null))
+            let id = cache[type.name]
+            if (id === null)
+              cache[type.name] = id =
+                Object.keys(type.schema.nodes).indexOf(type.name) + 1
+            return id
+          },
+          // Brightspot overriden so diff always returns false for whole word replacement.
+          compareTokens: (a, b) => false,
+        }).addSteps(newState.doc, transaction.mapping.maps)
+
+        if (changeSet.changes.length) {
+          if (
+            changeSet.changes[0].inserted.length &&
+            changeSet.changes[0].deleted.length
+          ) {
+            // User highlighted text and then typed over it
+            changeSet.changes.forEach((change) => {
+              change.inserted.forEach((span) => {
+                tr = handleInsertion(
+                  change,
+                  newState,
+                  markType,
+                  tr,
+                  userLabel,
+                  userId,
+                )
+                tr = handleDeletion(
+                  changeSet.changes,
+                  change,
+                  oldState,
+                  newState,
+                  markType,
+                  markTypeDeleted,
+                  tr,
+                  transactions,
+                  index,
+                  userLabel,
+                  transaction,
+                  userId,
+                )
+              })
+            })
+          } else {
+            changeSet.changes.forEach((change) => {
+              change.inserted.forEach((span) => {
+                tr = handleInsertion(
+                  change,
+                  newState,
+                  markType,
+                  tr,
+                  userLabel,
+                  userId,
+                )
+              })
+
+              change.deleted.forEach((span) => {
+                tr = handleDeletion(
+                  changeSet.changes,
+                  change,
+                  oldState,
+                  newState,
+                  markType,
+                  markTypeDeleted,
+                  tr,
+                  transactions,
+                  index,
+                  userLabel,
+                  transaction,
+                  userId,
+                )
+              })
+            })
+          }
+        }
+      })
+
+      // ProseMirror defaults the cursor to the right of inserted content, but with Track
+      // enabled when the user hits [Backspace] the cursor should move to the left.
+      if (this.keyDown === 'Backspace' && tr.steps.length > 0) {
+        const from = tr.steps[0].from
+        const selection = new TextSelection(
+          tr.doc.resolve(from),
+          tr.doc.resolve(from),
+        )
+        tr = tr.setSelection(selection)
+      }
+      this.keyDown = undefined
+
+      return tr
+    },
+    props: {
+      handleKeyDown(view, event) {
+        this.keyDown = event.key
+      },
+    },
+  })
+}
+export {
+  trackPlugin,
+  doTrack,
+  rejectChanges,
+  acceptChanges,
+  togglePreview,
+  acceptChangesAll,
+  rejectChangesAll,
+}