@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/comment_manager/CommentManager.js

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

@@ -1,110 +0,0 @@
-/* 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/README.md

@@ -1,29 +0,0 @@
-# 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.