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

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/comment_manager/CommentManager.js

@@ -0,0 +1,348 @@
+/* eslint-disable no-debugger */
+import { ChangeSet } from 'prosemirror-changeset'
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+import { keydownHandler } from 'prosemirror-keymap'
+import { findKeyMapping, keyMappingHandler } from '../../settings/keymapBuilder'
+import moment from 'moment'
+
+const key = new PluginKey('comment')
+const keyHandler = {}
+
+keyHandler[findKeyMapping('comment')] = keyMappingHandler(
+  'rte2-toolbar-comment',
+)
+
+/**
+ * Return the position of the mark.
+ */
+const markPosition = (state, pos, markType) => {
+  const $pos = state.doc.resolve(pos)
+
+  const { parent, parentOffset } = $pos
+  const start = parent.childAfter(parentOffset)
+  if (!start.node) return
+
+  const mark = start.node.marks.find((mark) => mark.type === markType)
+  if (!mark) return
+
+  let startIndex = $pos.index()
+  let from = $pos.start() + start.offset
+  let endIndex = startIndex + 1
+  let to = from + start.node.nodeSize
+  while (startIndex > 0 && mark.isInSet(parent.child(startIndex - 1).marks)) {
+    startIndex -= 1
+    from -= parent.child(startIndex).nodeSize
+  }
+  while (
+    endIndex < parent.childCount &&
+    mark.isInSet(parent.child(endIndex).marks)
+  ) {
+    to += parent.child(endIndex).nodeSize
+    endIndex += 1
+  }
+  return { from, to, mark }
+}
+
+const addMark = (tr, state, markType, change, markAttrs) => {
+  const position = markPosition(state, change.fromA, markType)
+  if (!position) {
+    return tr
+  }
+  const { from, to } = position
+  tr = tr.addMark(from, to, markType.create(markAttrs))
+  return tr
+}
+
+const handleInsertion = (change, newState, markType, tr, userLabel, userId) => {
+  const time = moment().format('MM/D/YYYY h:mm:ss A')
+  tr = addMark(tr, newState, markType, change, {
+    'data-user-id': userId,
+    'data-user-label': userLabel,
+    'data-time': time,
+    title: `${userLabel}: ${time}`,
+  })
+
+  return tr
+}
+
+const handleDeletion = (
+  newState,
+  markType,
+  tr,
+  changeFrom,
+  userLabel,
+  userId,
+) => {
+  const time = moment().format('MM/D/YYYY h:mm:ss A')
+  const mark = markType.create({
+    'data-user-id': userId,
+    'data-user-label': userLabel,
+    'data-time': time,
+    title: `${userLabel}: ${time}`,
+  })
+
+  const position = markPosition(newState, changeFrom, markType)
+  if (!position) {
+    return tr
+  }
+  const { from, to } = position
+  tr = tr.addMark(from, to, mark)
+  return tr
+}
+
+/**
+ * Removes the comment the user is on from the document.
+ */
+const removeComment = () => {
+  return function (state, dispatch) {
+    const markType = state.schema.marks.comment
+    let { empty, $cursor, ranges, $anchor, $from } = state.selection
+    let tr = state.tr
+    if (empty && !$cursor) return false
+    if ($cursor) {
+      if (markType.isInSet(state.storedMarks || $cursor.marks())) {
+        const deleteFrom = $anchor.nodeBefore
+          ? $from.pos - $anchor.nodeBefore.nodeSize
+          : $from.pos
+        const deleteTo =
+          $anchor.nodeAfter && $anchor.textOffset !== 0
+            ? $from.pos + $anchor.nodeAfter.nodeSize
+            : $from.pos
+        tr = tr.delete(deleteFrom, deleteTo)
+
+        dispatch(tr)
+      }
+    } else {
+      let offset = 0
+      for (let i = 0; i < ranges.length; i++) {
+        const { $from, $to } = ranges[i]
+        state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+          const marks = node.marks
+          marks.forEach((mark) => {
+            if (mark.type.name === 'comment') {
+              tr.delete(pos - offset, pos + node.nodeSize - offset)
+              offset = offset + node.nodeSize
+            }
+          })
+        })
+      }
+      dispatch(tr)
+    }
+  }
+}
+
+/**
+ * Alerts the plugin via its meta data that the collapse
+ * comments functionality should be toggled.
+ */
+const collapseComments = () => {
+  return function (state, dispatch, editorView) {
+    let tr = state.tr
+    tr = tr.setMeta(key, { toggleCollapse: true })
+
+    const markType = state.schema.marks.comment
+    const isCollapsed =
+      state.comment$.get('activeStates')?.get('collapseComments') !== true
+    state.doc.descendants((node, pos, parent) => {
+      if (node.isText && markType.isInSet(node.marks)) {
+        const mark = node.marks.find((m) => m.type.name === 'comment')
+        const attrs = { ...mark.attrs, 'data-collapse': isCollapsed }
+        const to = pos + node.nodeSize
+        tr.removeMark(pos, to, markType)
+        tr.addMark(pos, to, markType.create(attrs))
+      }
+    })
+
+    dispatch(tr)
+  }
+}
+
+/**
+ * Adds decoration to all the comment marks, which sets
+ * a class to 'collapsed' to adjust styling to make it
+ * look like the comments have been collapsed.
+ *
+ * @param {ProseMirror.EditorState} state
+ */
+const applyCollapsedDecos = (state) => {
+  const decos = []
+  const markType = state.schema.marks.comment
+  state.doc.descendants((node, pos, parent) => {
+    if (node.isText && markType.isInSet(node.marks)) {
+      decos.push(
+        Decoration.inline(pos, pos + node.nodeSize, {
+          class: 'collapsed',
+        }),
+      )
+    }
+  })
+  return DecorationSet.create(state.doc, decos)
+}
+
+/**
+ * The comment plugin.
+ *
+ * @param {*} schema The RTE schema.
+ */
+const commentPlugin = (schema, userLabel, userId) => {
+  return new Plugin({
+    key,
+    state: {
+      init(state) {
+        const { doc } = state
+        const pluginState = new Map()
+        const activeStates = new Map()
+        const disabledStates = new Map()
+
+        activeStates.set('collapseComments', false)
+        disabledStates.set('removeComment', true)
+        pluginState.set('activeStates', activeStates)
+        pluginState.set('disabledStates', disabledStates)
+        pluginState.set('decos', DecorationSet.create(doc, []))
+
+        // When RTE is loaded check if comments are collapsed and trigger the event.
+        PubSub.subscribe('rteLoaded', (rte) => {
+          if (rte.view.dom.querySelector('comment[data-collapse="true"]')) {
+            const button = rte.toolbarWrapper.querySelector(
+              '.rte2-toolbar-comment-collapse',
+            )
+            if (button) {
+              button.click()
+            }
+          }
+        })
+
+        return pluginState
+      },
+      apply(transaction, value, oldState, newState) {
+        const pluginState = value
+        const currentState = pluginState
+        const meta = transaction.getMeta(key)
+        if (meta && meta.hasOwnProperty('toggleCollapse')) {
+          const newCurrentState = !currentState
+            .get('activeStates')
+            .get('collapseComments')
+          pluginState
+            .get('activeStates')
+            .set('collapseComments', newCurrentState)
+          // We don't want commenting and remove comment to be available while the comments
+          // are collapsed because that causes weird ui side affects
+          pluginState.get('disabledStates').set('comment', newCurrentState)
+          pluginState
+            .get('disabledStates')
+            .set('removeComment', newCurrentState)
+        }
+
+        if (pluginState.get('activeStates').get('collapseComments')) {
+          pluginState.set('decos', applyCollapsedDecos(newState))
+        } else {
+          pluginState.set('decos', DecorationSet.create(newState.doc, []))
+          // Disabling and enabling the removeComment button based on whether the
+          // user is on a comment or not
+          const { $cursor, empty, ranges } = newState.selection
+          const markType = newState.schema.marks.comment
+          if (empty && $cursor) {
+            if (markType.isInSet(newState.storedMarks || $cursor.marks())) {
+              pluginState.get('disabledStates').set('removeComment', false)
+            } else {
+              pluginState.get('disabledStates').set('removeComment', true)
+            }
+          } else {
+            if (ranges) {
+              ranges.forEach((range) => {
+                const { $from, $to } = range
+                const has = newState.doc.rangeHasMark(
+                  $from.pos,
+                  $to.pos,
+                  markType,
+                )
+                if (has) {
+                  pluginState.get('disabledStates').set('removeComment', false)
+                } else {
+                  pluginState.get('disabledStates').set('removeComment', true)
+                }
+              })
+            }
+          }
+        }
+
+        return pluginState
+      },
+    },
+    props: {
+      decorations(state) {
+        return this.getState(state).get('decos')
+      },
+      handleKeyDown: keydownHandler(keyHandler),
+      handlePaste: (editorView, evt, slice) => {
+        const { state, dispatch } = editorView
+        const text = evt.clipboardData.getData('text/plain')
+        const currentNode = state.doc.nodeAt(state.selection.from)
+        const filter = (mark) => mark.type.name === 'comment'
+        const mark =
+          currentNode && currentNode.marks.some(filter)
+            ? currentNode.marks.find(filter)
+            : state.storedMarks
+              ? state.storedMarks.find(filter)
+              : null
+
+        if (text && mark) {
+          const tr = state.tr
+          tr.addMark(mark)
+          tr.insertText(text)
+          dispatch(tr)
+          return true
+        }
+        return false
+      },
+    },
+    appendTransaction(transactions, oldState, newState) {
+      const schema = newState.config.schema
+      const markType = schema.marks.comment
+
+      let tr = newState.tr
+
+      if (
+        !tr.storedMarks ||
+        !tr.storedMarks.some((mark) => mark.type.name === 'comment')
+      ) {
+        return
+      }
+
+      transactions.forEach((transaction) => {
+        const changeSet = ChangeSet.create(oldState.doc).addSteps(
+          newState.doc,
+          transaction.mapping.maps,
+        )
+
+        if (changeSet.changes.length) {
+          changeSet.changes.forEach((change) => {
+            change.inserted.forEach(() => {
+              tr = handleInsertion(
+                change,
+                newState,
+                markType,
+                tr,
+                userLabel,
+                userId,
+              )
+            })
+            change.deleted.forEach(() => {
+              tr = handleDeletion(
+                newState,
+                markType,
+                tr,
+                change.fromA,
+                userLabel,
+                userId,
+              )
+            })
+          })
+        }
+      })
+      return tr
+    },
+  })
+}
+export { commentPlugin, collapseComments, removeComment }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/custom_keyboard/CustomKeyboard.js

@@ -0,0 +1,110 @@
+/* eslint-disable no-debugger */
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { keydownHandler } from 'prosemirror-keymap'
+import { findKeyMapping, keyMappingHandler } from '../../settings/keymapBuilder'
+import { closeLayeredPopups } from '../../utilities'
+
+if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
+  await import('./CustomKeyboard.less')
+}
+
+const key = new PluginKey('keyboard')
+const keyHandler = {}
+let $customKeyboard
+
+keyHandler[findKeyMapping('unicodeKeyboard')] = keyMappingHandler(
+  'rte2-toolbar-custom-keyboard',
+)
+
+/**
+ * Builds the markup of the list of buttons per each
+ * character.
+ *
+ * @param {Array.<string>} chars The characters to be inserted
+ *    into the UI
+ * @return {string} The markup of all the list items
+ */
+const getWidgetContentMarkup = (chars) => {
+  let str = ''
+  chars.forEach((char) => {
+    str += `<li>
+              <button class="CustomKeyboard-button">${char}</button>
+            </li>`
+  })
+  return str
+}
+
+/**
+ * Builds the containing widget markup.
+ *
+ * @param {Array.<string>} chars The characters to be inserted
+ *    into the UI.
+ */
+const getWidgetMarkup = (chars) => {
+  return `
+    <div class="Widget">
+      <h1 class="Widget-title">Custom Keyboard</h1>
+      <ol class="CustomKeyboard">${getWidgetContentMarkup(chars)}</ol>
+    </div>
+  `
+}
+
+/**
+ * Updates the transaction to insert the character into the UI.
+ *
+ * @param {ProseMirror.EditorState} state
+ * @param {ProseMirror.EditorView.dispatch} dispatch
+ * @param {ProseMirror.EditorView} editorView
+ * @param {Event} event The event that triggered this event handler. We
+ *    get the character to be inserted from the event target.
+ */
+const insertCharacter = (state, dispatch, editorView, event) => {
+  const char = event.target.innerText
+  let transaction = state.tr
+  transaction = transaction.insertText(char)
+  dispatch(transaction)
+}
+
+const openKeyboard = (chars) => {
+  return function (state, dispatch, editorView, evt) {
+    closeLayeredPopups(evt)
+
+    $customKeyboard = $(document.createElement('div'))
+    const widgetMarkup = getWidgetMarkup(chars)
+    $customKeyboard.html(widgetMarkup)
+    const buttons = $customKeyboard[0].querySelectorAll(
+      '.CustomKeyboard-button',
+    )
+    ;[...buttons].forEach((button) => {
+      button.addEventListener('click', (event) => {
+        event.preventDefault()
+        insertCharacter(state, dispatch, editorView, event)
+        $customKeyboard.popup('close')
+        editorView.focus()
+      })
+    })
+    $customKeyboard.popup()
+    $customKeyboard.popup('source', $(evt.target), evt)
+    $customKeyboard.popup('open')
+    $customKeyboard.show()
+  }
+}
+
+/**
+ * This plugin contains the functions needed to build a custom keyboard on the fly
+ * based on a set of characters passed into the openKeyboard command. It will call
+ * the popup and populate a keyboard-like view with buttons representing the characters
+ * as well as add event handlers to those buttons to hanlde the insertion of the characters
+ * into the RTE.
+ *
+ * @param {*} schema The RTE schema.
+ */
+const keyboardPlugin = (schema) => {
+  return new Plugin({
+    key,
+    props: {
+      handleKeyDown: keydownHandler(keyHandler),
+    },
+  })
+}
+export { keyboardPlugin, openKeyboard }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/custom_keyboard/CustomKeyboard.less

@@ -0,0 +1,21 @@
+.CustomKeyboard {
+  li {
+    display: inline-block;
+
+    button {
+      margin-bottom: var(--gap-s);
+      margin-right: var(--gap-s);
+      min-height: 24px;
+      min-width: 48px;
+      text-transform: none;
+
+      &:hover {
+        box-shadow: calc(var(--gap-s) / 2) calc(var(--gap-xs) / 2)
+          calc(var(--gap-xs) / 2) var(--color-gray4);
+        position: relative;
+        transform: scale(1.5);
+        z-index: 99;
+      }
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/custom_keyboard/README.md

@@ -0,0 +1,29 @@
+# Brightspot Rich Text Editor Custom Keyboard Plugin
+
+Extends Prosemirror to allow users to create custom keyboards.
+
+## Table of Contents
+
+1.  [Must Knows and Usage](#must-knows)
+
+## Must Knows and Usage
+
+1.  Custom keyboards can be added via adding to the `keyboardObject` in the menuItemsBuilder, which lives in the settings directory.
+
+```js
+const keyboardObject = {
+  unicodeKeyboard: {
+    command: openKeyboard(getUnicodeChars()),
+    dom: {
+      className: 'rte2-toolbar-custom-keyboard popup',
+      name: 'unicodeKeyboard',
+      tooltip: 'Insert Unicode Character',
+      displayName: 'Insert Unicode Character',
+      icon: 'keyboard',
+    },
+    cluster: 'keyboards',
+  },
+}
+```
+
+The example above adds a keyboard with unicode characters. You can customize the appearance in the toolbar via the `dom` properties. The key name of the object, `unicodeKeyboard` in the above example, should match the `name` property of the `dom` object. Command should be `openKeyboard([yourChars])` where `yourChars` is an array of the characters that should be displayed in the custom keyboard. Adding `cluster` will add the separator bar in front of this toolbar item.