@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/list_manager/ListManager.js

@@ -0,0 +1,342 @@
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { DecorationSet, Decoration } from 'prosemirror-view'
+import { keydownHandler } from 'prosemirror-keymap'
+import { constants } from '../../settings'
+import {
+  DISTANCE_FROM_LIST_ITEM_TO_NEAREST_CHILD_BLOCK,
+  ACTIONS,
+} from './constants'
+import { getEnhancementEditFormURL } from '../enhancement_manager/EnhancementManager'
+import { getIsInAList } from '../../utilities'
+import { findKeyMapping, keyMappingHandler } from '../../settings/keymapBuilder'
+import { html, render } from 'lit-html'
+import { v1 as uuidv1 } from 'uuid'
+import create from '../../../dom/create'
+
+if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
+  await import('./ListManager.less')
+}
+
+const key = new PluginKey('listManager')
+const keyHandler = {}
+
+keyHandler[findKeyMapping('ul')] = keyMappingHandler('rte2-toolbar-ul')
+keyHandler[findKeyMapping('ol')] = keyMappingHandler('rte2-toolbar-ol')
+
+/**
+ * Lists' Magic States
+ *
+ * The following are states that a selection can be in
+ * regarding lists. They are tightly coupled with an RTE
+ * schema implementation to avoid code complexity, and
+ * subsequently modifying the schema can impact the method of
+ * determining a selection's state. We are abstracting this out
+ * into methods in one spot for that reason.
+ *
+ * This also makes the code human-readable by giving the
+ * methods names that correspond to a state. Selection state
+ * regarding lists is derived by math (ranges, depths, etc),
+ * equations, which can be difficult to read/understand quickly.
+ */
+
+/**
+ * Determines if the selection is pointing to the top level
+ * list item in a list. When in this state, there are certain
+ * rules the RTE should follow (e.g. the top level list item
+ * can not be indented any further than it is).
+ *
+ * @param {Prosemirror.ResolvedPos} $from
+ * @param {boolean} empty
+ * @param {Prosemirror.NodeRange} range
+ * @return {boolean}
+ */
+const getIsTopOfExistingListItem = ($from, empty, range) => {
+  if (
+    empty ||
+    (range && range.parent.type.name === constants.NODES.LISTS.listItem)
+  ) {
+    const distance = DISTANCE_FROM_LIST_ITEM_TO_NEAREST_CHILD_BLOCK
+    return $from.index(range.depth - distance) === 0
+  }
+
+  return $from.index(range.depth) === 0
+}
+
+/**
+ * Builds a map of compatible actions for the
+ * current Editor selection.
+ *
+ * @param {Prosemirror.EditorState} state
+ * @return {Map<string.<boolean>>} Map of actions to
+ *    a boolean. True indictes action is compatible.
+ */
+const getCompatibleActions = (state) => {
+  const { $from, $to, empty } = state.selection
+  const range = $from.blockRange($to)
+
+  const actionItems = ACTIONS.map((action) => {
+    const isInAList = getIsInAList(range)
+
+    if (!isInAList) {
+      return [action, false]
+    }
+
+    switch (action) {
+      case 'indent': {
+        const isTopOfExistingListItem = getIsTopOfExistingListItem(
+          $from,
+          empty,
+          range,
+        )
+
+        if (isTopOfExistingListItem) {
+          return [action, false]
+        }
+
+        return [action, true]
+      }
+
+      case 'outdent':
+        return [action, true]
+
+      default:
+        return [action, false]
+    }
+  })
+
+  return new Map(actionItems)
+}
+
+/**
+ * Builds the new state map for this plugin.
+ *
+ * @param {Map} compatibleActions
+ */
+const getNewStateMap = (compatibleActions, decos) => {
+  const state = new Map()
+  state.set('compatibleActions', compatibleActions)
+  state.set('decos', decos)
+  return state
+}
+
+/**
+ * This plugin manages unordered and ordered list nodes, their child
+ * nodes, and actions. It knows what menu icons to enable and disable,
+ * what nodes are compatible and imcompatible, and how to behave when
+ * the state of the Editor changes.
+ *
+ * It currently only keeps track in its state compatible nodes and
+ * compatible actions, which the menu plugin uses to enable and disable,
+ * highlight, etc, menu icons.
+ */
+const listManagerPlugin = (schema) => {
+  return new Plugin({
+    key,
+
+    state: {
+      init(_, state) {
+        const compatibleActions = new Map()
+        return getNewStateMap(compatibleActions)
+      },
+
+      apply(transaction, value, oldState, newState) {
+        const compatibleActions = getCompatibleActions(newState)
+        const pluginState = getNewStateMap(compatibleActions)
+
+        const selection = newState.selection
+        let depth = selection.$from.depth
+
+        // Check if an 'ol' or 'ul' Rich Text Element exists and if so add edit decorator.
+        for (let i = 1; i < depth; i++) {
+          const parent = selection.$from.node(i)
+
+          if (
+            parent &&
+            (parent.type.name === 'ol' || parent.type.name === 'ul')
+          ) {
+            const listEnhancement = RICH_TEXT_ELEMENTS_PM.find(
+              (obj) => obj.tag === parent.type.name,
+            )
+
+            if (!listEnhancement) {
+              break
+            }
+
+            const pos = selection.$from.before(i)
+
+            pluginState.set(
+              'decos',
+              DecorationSet.create(newState.doc, [
+                Decoration.widget(
+                  pos,
+                  (view, getPos) => {
+                    const widget = create('div', {
+                      class: 'ListManager-edit',
+                    })
+                    render(
+                      editTemplate(view, pos, parent, listEnhancement),
+                      widget,
+                    )
+
+                    return widget
+                  },
+                  {
+                    ignoreSelection: true,
+                  },
+                ),
+              ]),
+            )
+            return pluginState
+          }
+        }
+
+        return pluginState
+      },
+    },
+    props: {
+      handleKeyDown: keydownHandler(keyHandler),
+      handleDoubleClickOn: (view, pos, node, nodePos, event, direct) => {
+        if (
+          node.type.name === 'ol' &&
+          event.target.nodeName.toLowerCase() === 'li'
+        ) {
+          const pluginState = view.state[key.key]
+
+          pluginState.set(
+            'decos',
+            DecorationSet.create(view.state.doc, [
+              Decoration.widget(
+                pos,
+                (view, getPos) => {
+                  const widget = create('div', { class: 'ListManager-widget' })
+                  render(template(view, pos, node), widget)
+                  setTimeout(() => {
+                    widget.scrollIntoView({
+                      behavior: 'smooth',
+                      block: 'center',
+                    })
+                  }, 300)
+                  return widget
+                },
+                {
+                  stopEvent: (evt) => {
+                    return true
+                  },
+                  ignoreSelection: true,
+                },
+              ),
+            ]),
+          )
+
+          return true
+        }
+        return false
+      },
+      decorations: (state) => {
+        const pluginState = state[key.key]
+        if (pluginState) {
+          return pluginState.get('decos')
+        }
+        return null
+      },
+    },
+  })
+}
+
+function editTemplate(view, pos, parent, listEnhancement) {
+  // get enhancement url
+  let url = getEnhancementEditFormURL(listEnhancement.typeId, view.dom)
+
+  url += `&attributes=${encodeURIComponent(
+    JSON.stringify(parent.attrs.attributes),
+  )}`
+
+  const tempId = uuidv1()
+
+  return html`<div class="ProsemirrorEnhancementMenu-container">
+    <span class="ProsemirrorEnhancementMenu-container-label"
+      >${listEnhancement.displayName}</span
+    ><a
+      @click=${(e) => handleEditClick(e, view, pos, tempId)}
+      href="${url}"
+      target="${tempId}"
+      data-event-id="${tempId}"
+      data-frame-post="true"
+      class="ProsemirrorEnhancementMenu-container-button edit"
+      data-icon="edit"
+      title="${window.BRIGHTSPOT.ui.tooltips.edit}"
+      tabindex="0"
+      >${window.BRIGHTSPOT.ui.tooltips.edit}</a
+    >
+  </div>`
+}
+
+function handleEditClick(e, view, pos, tempId) {
+  PubSub.subscribe(tempId, (incomingData) => {
+    const tr = view.state.tr
+    const parentNode = view.state.doc.nodeAt(pos)
+
+    tr.setNodeMarkup(pos, null, {
+      ...parentNode.attrs,
+      attributes: incomingData.data,
+    })
+    view.dispatch(tr)
+  })
+}
+
+function handleOk(e, view, pos, node) {
+  e.preventDefault()
+
+  const value = e.target
+    .closest('.ListManager-widget')
+    .querySelector('input').value
+  if (value) {
+    // Find 'ol' if not current pos
+    while (pos > 0) {
+      const parent = view.docView.node.nodeAt(--pos)
+      if (parent?.type?.name === 'ol') {
+        break
+      }
+    }
+
+    const tr = view.state.tr
+    tr.setNodeMarkup(pos, node.type, { ...node.attrs, order: value })
+    view.dispatch(tr)
+  }
+}
+
+function handleCancel(e, view) {
+  e.preventDefault()
+  const tr = view.state.tr
+  view.dispatch(tr)
+}
+
+function template(view, pos, node) {
+  return html`<h1 class="Widget-title">
+      ${window.BRIGHTSPOT?.ui?.rte?.olWidgetTitle || 'Reset Number'}
+    </h1>
+    <a
+      class="Widget-close"
+      @click=${(e) => handleCancel(e, view)}
+      title="${window.BRIGHTSPOT?.ui?.rte?.buttonCancel || 'Cancel'}"
+      >${window.BRIGHTSPOT?.ui?.rte?.buttonCancel || 'Cancel'}</a
+    >
+    <div class="Widget-container">
+      <input
+        type="number"
+        name="start"
+        value="${node.attrs.order || 1}"
+        data-hide-word-count="true"
+      />
+      <div class="Widget-controls">
+        <button @click=${(e) => handleOk(e, view, pos, node)}>
+          ${window.BRIGHTSPOT?.ui?.rte?.buttonOk || 'Save'}
+        </button>
+        <button @click=${(e) => handleCancel(e, view)}>
+          ${window.BRIGHTSPOT?.ui?.rte?.buttonCancel || 'Cancel'}
+        </button>
+      </div>
+    </div>`
+}
+
+export { listManagerPlugin, getCompatibleActions }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/list_manager/ListManager.less

@@ -0,0 +1,42 @@
+@import (reference) '../../../IconButton.less';
+
+.ListManager-edit {
+  display: inline-block;
+}
+
+.ListManager-widget {
+  background: var(--color-white);
+  border: solid 1px var(--color-gray3);
+  box-shadow: var(--shadow-1);
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  z-index: 8;
+
+  .Widget-title {
+    position: relative;
+  }
+
+  .Widget-close {
+    .IconButton;
+
+    position: absolute;
+    right: var(--gap-xs);
+    top: var(--gap-xs);
+    z-index: 10;
+
+    --IconButton-name: 'close';
+  }
+
+  .Widget-container {
+    margin: 0 var(--gap-l);
+  }
+
+  .Widget-controls {
+    position: initial;
+
+    button {
+      white-space: nowrap;
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+# Brightspot Rich Text Editor List Manager Plugin
+
+Extends Prosemirror to allow users to create ordered and unordered lists in the RTE, as well as perform common actions on those list items (e.g. indent, outdent, etc).
+
+## Table of Contents
+
+1.  [Must Knows](#must-knows)
+2.  [Usage](#usage)
+3.  [Component and Directory Structure](#component-and-directory-structure)
+    1.  [Commands](#commands)
+    2.  [Constants](#constants)
+    3.  [List Manager Plugin](#list-manager-plugin)
+
+## Must Knows
+
+1.  The Prosemirror list plugin is used as the base for this plugin, and that plugin only supports a schema architecture of something like:
+    a. List
+    b. List Item
+    c. Block Element
+    d. Content
+2.  Traversing around the RTE to perform actions such as wrapping content in a list node or indenting and outdenting requires knowing nodes' positions. Determining positions are tightly coupled with the math involved in evaluating the schema and the current state of the Editor (in particular the depth of node ranges). This creates magic states and magic numbers and subsequently difficult-to-read code. To help with code maintenance, magic numbers are abstracted into constants and state detection is abstracted into methods in 1 spot. Should schema changes occur, updating this plugin should be localized to these constants and methods.
+
+## Usage
+
+1.  Because they are a part of configuration for the RTE, the menu items configuration file lives in the `settings` directory. See the ReadMe there for more information on extending the default configuration.
+
+## Component and Directory Structure
+
+### Commands
+
+This is where all state mutations should occur. Commands are exposed to the RTE api and can be triggered from anywhere in the RTE, such as menu icons and keyboard commands.
+
+The following scenarios are supported:
+
+1. User can select 1 or multiple text blocks and wrap them in a list.
+2. User can swap ordered list items for unordered lists and vice versa. If the user selects list content across different
+   hierarchical lists, the top most list will be converted.
+3. User can indent any list item as long as it's not at the top of a list. User can indent one or many items at a time. Like the list conversions, hierarchical crossings are possible.
+4. The user can outdent any list item. A list item in the root of the list that is outdented will become a text block and be moved out of the list. If this is a list item in the middle of a list, this will split the list into two -- one before and one after the newly outdented text.
+5. Select All and selecting across mixed types of content is not allowed.
+
+### Constants
+
+Constants localized to the list plugin.
+
+### List Manager Plugin
+
+The state management aspect of the plugin, which is also what is registered with the plugin setup. Currently we only manage state for compatible actions and nodes, which is useful for the menu plugin.
+
+_Note_: Updating state always means creating a new state derived from the old state + changes. State should always remain immutable.

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/list_manager/commands.js

@@ -0,0 +1,207 @@
+/* eslint-disable no-debugger */
+import { constants } from '../../settings'
+import { wrapInList, liftListItem } from 'prosemirror-schema-list'
+import { getIsInAList } from '../../utilities'
+import { autoJoin } from 'prosemirror-commands'
+import { findWrapping, canSplit } from 'prosemirror-transform'
+
+/**
+ * Converts all direct descendants in a selection that
+ * are textblock nodes to a listItem div node. This is
+ * needed to wrap the content in a list.
+ *
+ * @param {Prosemirror.EditorView} editorView
+ * @return {booleab} True if intended action completed.
+ */
+const convertNode = (editorView) => {
+  const state = editorView.state
+  const transaction = state.tr
+  const { from, to } = state.selection
+  const schema = state.config.schema
+
+  state.doc.nodesBetween(from, to, (node, position) => {
+    if (node.isTextblock) {
+      transaction.setNodeMarkup(position, schema.nodes.line)
+    }
+
+    return false
+  })
+
+  const newState = state.apply(transaction)
+  editorView.updateState(newState)
+
+  return true
+}
+
+/**
+ * Reduces the indent of a list item. This is how the user
+ * can convert a list item back to a text node if the node
+ * after outdent is at the doc root level.
+ *
+ * @param {Prosemiror.NodeType} nodeType
+ * @return {boolean} True if the action completed.
+ */
+const outdentListItem = (nodeType) => {
+  return function (state, dispatch, editorView) {
+    liftListItem(nodeType)(state, dispatch)
+
+    const { $from, $to } = editorView.state.selection
+    const range = $from.blockRange($to)
+
+    if (constants.NODES.LISTS[range.parent.type.name] == null) {
+      convertNode(editorView, dispatch)
+    }
+
+    return true
+  }
+}
+
+const wrapMixedList = (listType) => {
+  return function (state, dispatch) {
+    let tr = state.tr
+    const { $from, $to, from } = state.selection
+    const range = $from.blockRange($to)
+    let parent = range.parent
+    const wrappers = findWrapping(range, listType)
+    const firstChildSelection = parent.child(range.startIndex)
+    let innerRange = range
+    if (firstChildSelection.type.name === listType.name) {
+      const $pos = state.doc.resolve(
+        range.start + parent.child(range.startIndex).nodeSize,
+      )
+      innerRange = $pos.blockRange($to)
+    }
+
+    tr = tr.wrap(innerRange, wrappers)
+    let splitPos = innerRange.start + wrappers.length
+    for (
+      let i = innerRange.startIndex, first = true;
+      i < innerRange.endIndex;
+      i++, first = false
+    ) {
+      if (
+        !first &&
+        canSplit(tr.doc, splitPos, 1) &&
+        parent.child(i).type.name !== listType.name
+      ) {
+        tr.split(splitPos, 1)
+        splitPos += 2
+      }
+      splitPos += parent.child(i).nodeSize
+    }
+    dispatch(tr)
+    return true
+  }
+}
+
+/**
+ * Toggles Lists and list items.
+ *
+ * 1. When the cursor is positioned on an item that's bulleted:
+ *    1. If the user clicks on `Bulleted List`, lifts the list item up,
+ *       which could convert the item to a plain line if it's at the
+ *       outermost list level. Will split the list in 2 if the item is not first
+ *       or last.
+ *    2. If the user clicks on `Numbered List`, converts the entire list
+ *       (but not nested lists) into a numbered list.
+ * 2. When the cursor is positioned on an item that's numbered:
+ *    1. If the user clicks on `Numbered List`, lifts the list item up,
+ *       which could convert the item to a plain line if it's at the
+ *       outermost list level. Will split the list in 2 if the item is not first
+ *       or last.
+ *    2. If the user clicks on `Bulleted List`, converts the entire list
+ *       (but not nested lists) into a bulleted list.
+ * 3. When a range of bulleted items has been selected:
+ *    1. If the user clicks on `Bulleted List`, all the highlighted items, including
+ *       their nested lists, are lifted up.
+ *    2. If the user clicks on `Numbered List` and only a portion of the list is highlighted,
+ *       the list is converted to a numbered list but any nested lists are not converted.
+ *    3. If the user clicks on `Numbered List` and the whole list is highlighted,
+ *       the list is converted to a numbered list as well as any nested lists.
+ * 4. When a range of numbered items has been selected:
+ *    1. If the user clicks on `Numbered List`, all the highlighted items, including
+ *       their nested lists, are lifted up.
+ *    2. If the user clicks on `Bulleted List` and only a portion of the list is highlighted,
+ *       the list is converted to a bulleted list but any nested lists are not converted.
+ *    3. If the user clicks on `Bulleted List` and the whole list is highlighted,
+ *       the list is converted to a bulleted list as well as any nested lists.
+ * 5. If the user is not in a list, converts the selected items to the list type that the
+ *    user selected.
+ *
+ * @param {ProseMirror.Node.type} listType The node type being toggled
+ */
+const toggleListItem = (listType) => {
+  return function (state, dispatch) {
+    const { $from, $to, empty, from, to } = state.selection
+    const range = $from.blockRange($to)
+    const isInAList = getIsInAList(range)
+    if (isInAList) {
+      let currentListType = null
+      let grandparentType = null
+      if (empty) {
+        currentListType = $from.node(range.depth - 1).type
+        grandparentType = $from.node(range.depth - 2).type
+      } else {
+        currentListType = $from.node(range.depth).type
+        grandparentType = $from.node(range.depth - 1).type
+      }
+      if (
+        currentListType.name === listType.name ||
+        (!empty && grandparentType.name === listType.name)
+      ) {
+        liftListItem(state.schema.nodes.listItem)(state, dispatch)
+      } else {
+        let tr = state.tr
+        if (empty) {
+          tr = tr.setNodeMarkup(
+            $from.before(range.depth - 1),
+            state.schema.nodes[listType.name],
+          )
+        } else {
+          const parentType = $from.node(range.depth).type
+          let nodePos = $from.before(range.depth)
+          if (parentType.name === 'listItem') {
+            nodePos = $from.before(range.depth - 1)
+          }
+          tr = tr.setNodeMarkup(nodePos, state.schema.nodes[listType.name])
+          const parent = $from.node(range.depth)
+          const parentName = parent.type.name
+          if (parentName === 'ul' || parentName === 'ol') {
+            parent.descendants((node, pos, parent) => {
+              const childNodeName = node.type.name
+              if (
+                (childNodeName === 'ul' || childNodeName === 'ol') &&
+                childNodeName !== listType.name &&
+                pos >= from &&
+                pos <= to
+              ) {
+                tr = tr.setNodeMarkup(
+                  pos + 1,
+                  state.schema.nodes[listType.name],
+                )
+              }
+            })
+          }
+        }
+        dispatch(tr)
+      }
+    } else {
+      const parent = $from.node(range.depth)
+      let listNodes = []
+      parent.forEach((node, offset, index) => {
+        if (index >= range.startIndex && index <= range.endIndex) {
+          if (node.type.name === listType.name) {
+            listNodes.push(node)
+          }
+        }
+      })
+      const command =
+        listNodes.length && listNodes.length !== parent.childCount
+          ? wrapMixedList(listType)
+          : wrapInList(listType)
+      autoJoin(command, ['ol', 'ul'])(state, dispatch)
+    }
+  }
+}
+
+export { outdentListItem, toggleListItem }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/list_manager/constants.js

@@ -0,0 +1,26 @@
+import { constants } from '../../settings/constants'
+
+// const LIST_TEXT_BLOCK_NODE = schema.nodes[constants.NODES.LISTS.listItemDiv]
+
+const GROUP_LIST = constants.NODES.GROUPS.list
+const ACTIONS = ['indent', 'outdent']
+
+/**
+ * Lists' Magic Numbers
+ *
+ * The following are numbers that help with determining node
+ * position related to lists. They are tightly coupled with an RTE
+ * schema implementation to avoid code complexity, and
+ * subsequently modifying the schema can impact the method of
+ * determining a selection's state. We are abstracting this out
+ * into constants in one spot for that reason.
+ */
+
+const DISTANCE_FROM_LIST_ITEM_TO_NEAREST_CHILD_BLOCK = 1
+
+export {
+  // LIST_TEXT_BLOCK_NODE,
+  GROUP_LIST,
+  DISTANCE_FROM_LIST_ITEM_TO_NEAREST_CHILD_BLOCK,
+  ACTIONS,
+}

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/list_manager/index.js

@@ -0,0 +1,4 @@
+import { outdentListItem, toggleListItem } from './commands'
+import { listManagerPlugin } from './ListManager'
+
+export { listManagerPlugin, outdentListItem, toggleListItem }