@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/settings/README.md

@@ -0,0 +1,80 @@
+# Brightspot Rich Text Editor Settings
+
+To make it easy to implement your own RTE or extend this one, settings that impact how the RTE functions are all located in this directory and are broken into separate files based on subject area. In theory, you could replace this whole folder with all your own settings and have an RTE with same base functionality but your own customized settings (e.g. menu items, key commands, schema, etc).
+
+## Table of Contents
+
+1.  [Component and Directory Structure](#component-and-directory-structure)
+1.  [Commands](#commands)
+1.  [Constants](#constants)
+1.  [Keymap](#keymap)
+1.  [Menu Items](#menu-items)
+1.  [Schema](#schema)
+
+## Component and Directory Structure
+
+### Commands
+
+1.  [Commands](https://prosemirror.net/docs/guide/#commands) are the actions that Prosemirror calls when a user interacts with the RTE (most often used with a menu bar). Many useful commands are available through [Prosemirror's Commands plugin](https://github.com/ProseMirror/prosemirror-commands), but we also have our own. In our default setup, for example, we have a command that clears all formatting on selected text.
+
+#### Constants
+
+1.  Constants used throughout the RTE app.
+
+#### Keymap
+
+1.  Mapping of keyboard shortcuts to commands. Prosemirror comes with a Keymap plugin, but you will likely need to add more for things like a custom menubar.
+
+#### Menu Items
+
+1.  This defines what functionality the menu bar will contain. A menu item has the following configurations:
+
+##### With Class Name and Material Icons
+
+```js
+undo: {
+    command: undo, // Maps to the command function name to be called
+    dom: { // Describes how the menu item DOM is built
+      className: 'rte2-toolbar-undo', // Self explanatory
+      name: 'undo' // Shows up in the element title attribute
+    },
+    cluster: 'actions' // Indicates this is the start of a cluster. This will add a class to the menu item, `cluster` which you can then style. In our default set up, this adds a vertical rule in between the clusters.
+  },
+```
+
+```less
+.rte2-toolbar-undo {
+  &:extend(.IconButton all);
+  --IconButton-name: 'undo'; // Name of the material icon to be used
+}
+```
+
+See the [Material Icon site](https://material.io/tools/icons/?style=baseline) for available icons and their names. Plug the name into the `--IconButton-name` css rule as shown above.
+
+#### Schema
+
+1.  Defines the [schema](https://prosemirror.net/docs/guide/#schema) that maps DOM elements and styling to Prosemirror nodes and marks. This is a [Persistent Ordered Map](https://github.com/marijnh/orderedmap), so you can extend this if you only need to make a few modifications.
+
+### Menu Items and Schema Configuration APIs
+
+1. Menu items that are marks (bold, italics, etc) should be configured like the following example:
+
+```js
+{
+  "inline": true, // Must be inline
+  "text": "B",
+  "className": "rte2-toolbar-bold", // Must have a className. This will be used to style both the menu icon and the content in the RTE.
+  "tooltip": "Bold",
+  "style": "bold", // Must have a style. This will be used as the tag name in the RTE.
+  "activeIfUnset": null
+}
+```
+
+This is the format the current backend uses, so our PM code is adapted to work with what we already have in pace on the backend. Currently this configuration can be found in the page as globals, but the RTE can accept an object in this format from anywhere when the RTE is instantiated.
+
+2. Nodes and Menu items representing the creation of list nodes and aligned blocks are handled with special commands and as such are defined in the code. However, the code looks for clues in the config to determine whether these nodes and menu options should be available for the RTE.
+
+- For aligned blocks, we are looking for `align` to be at the beginning of the style property value.
+- For lists, we are looking for the style to be `ul` or `ol`.
+
+3. Enhancement menu items and nodes are in another PR and will be a part of this once these are all merged together.

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

@@ -0,0 +1,98 @@
+/* eslint-disable no-debugger */
+import { setBlockType } from 'prosemirror-commands'
+import { CellSelection } from 'prosemirror-tables'
+import { getObjectValue } from '../utilities'
+
+/**
+ * Removes all marks in a given selection. The selection
+ * is retrieved from the editor's state selection. The check for
+ * empty content or no cursor ensure that the use has selected a range
+ * of text (and not just clicked into text).
+ */
+const clearFormatting = () => {
+  return function (state, dispatch) {
+    const { empty, $cursor, ranges } = state.selection
+    const noDeleteList = ['comment', 'del', 'ins']
+    if (empty && !$cursor) {
+      return false
+    }
+
+    if (!dispatch || $cursor) {
+      return true
+    }
+
+    const tr = state.tr
+
+    ranges.forEach((range) => {
+      const { $from, $to } = range
+      state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+        const marks = node.marks
+        marks.forEach((mark) => {
+          if (noDeleteList.indexOf(mark.type.name) !== -1) {
+            return
+          }
+
+          tr.removeMark(pos, pos + node.nodeSize)
+        })
+      })
+    })
+
+    dispatch(tr.scrollIntoView())
+
+    return true
+  }
+}
+
+/**
+ * Toggles the alignment of a selection. If the user is toggling an
+ * off an alignment, then it should fall back to a default alignment,
+ * to mirror our codemirror implementation (e.g. user selects alignCenter
+ * menu uption but it is already selected, so that aligment is removed
+ * and a the defaultAlignment is taken on.)
+ *
+ * @param {Prosemirror.NodeType} selectedAlignment The selected alignment
+ *  node that is being toggled
+ * @param {Prosemirror.NodeType} defaultAlignment The default alignment
+ *  node to default to when the user is toggling off the selected alignment
+ * @return {Boolean} Returning true to signal to Prosemirror that command
+ *  is complete
+ */
+const toggleAlignment = (selectedAlignment, defaultAlignment) => {
+  return function (state, dispatch) {
+    const { $anchor, ranges } = state.selection
+    let tr = state.tr
+    if (state.selection instanceof CellSelection) {
+      let isAligned = false
+      for (let i = 0; i < ranges.length; i++) {
+        const { $from } = ranges[i]
+        const parent = $from.parent
+        parent.descendants((node) => {
+          if (!isAligned) {
+            isAligned = node.hasMarkup(selectedAlignment)
+          }
+        })
+        if (isAligned) {
+          break
+        }
+      }
+      const newAlignmentState = isAligned ? defaultAlignment : selectedAlignment
+
+      ranges.forEach((range) => {
+        const { $from, $to } = range
+        tr = tr.setBlockType($from.pos, $to.pos, newAlignmentState)
+      })
+      dispatch(tr)
+    } else {
+      const parentNodeType = getObjectValue($anchor, 'parent.type.name')
+      const newAlignmentState =
+        parentNodeType === getObjectValue(selectedAlignment, 'name')
+          ? defaultAlignment
+          : selectedAlignment
+      setBlockType(newAlignmentState)(state, dispatch)
+    }
+
+    return true
+  }
+}
+
+export { clearFormatting, toggleAlignment }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/settings/constants.d.ts

@@ -0,0 +1,84 @@
+// TODO: Remove this file once index.js is converted to TypeScript.
+export const constants = {
+  PM_PLUGIN_KEY: string,
+  ATTRIBUTE: {
+    ENHANCEMENT_DATA: string,
+  },
+  SELECTORS: {
+    RICH_TEXT_AREA: string,
+  },
+  STYLES: {
+    DISPLAY_NONE: string,
+  },
+  EVENTS: {
+    CLICK: string,
+    KEYDOWN: string,
+    MOUSEOVER: string,
+    MOUSEOUT: string,
+    DBLCLICK: string,
+  },
+  CLASSES: {
+    CMS_ALIGN_LEFT: string,
+    RTE_ALIGN_LEFT: string,
+    CMS_ALIGN_RIGHT: string,
+    RTE_ALIGN_RIGHT: string,
+    CMS_ALIGN_CENTER: string,
+    RTE_ALIGN_CENTER: string,
+    RTE_LIST_ORDERED: string,
+    RTE_LIST_UNORDERED: string,
+    CMS_LIST_ITEM_DIV: string,
+    CMS_LI_LIST_ITEM_DIV: string,
+    RTE_CORE_LINK: string,
+    RTE_CORE_ELEMENT_START: string,
+    RTE_CORE_ELEMENT_END: string,
+    ENHANCEMENT: string,
+    PM_AVATAR_WRAPPER: string,
+    IS_PLACEHOLDER_CONTENT: string,
+  },
+  ELEMENTS: {
+    DIV: string,
+    OL: string,
+    UL: string,
+    LI: string,
+    A: string,
+    SPAN: string,
+  },
+  KEY_MAPPINGS: {
+    MOD_Z: string,
+    SHIFT_MOD_Z: string,
+    MOD_Y: string,
+    MOD_B: string,
+    MOD_I: string,
+    MOD_U: string,
+    BACKSPACE: string,
+    DELETE: string,
+    ESCAPE: string,
+    STRIKE: string,
+    SUP: string,
+    SUB: string,
+    CLEAR: string,
+  },
+  NODES: {
+    LISTS: {
+      ol: string,
+      ul: string,
+      listItem: string,
+      listItemDiv: string,
+    },
+    ALIGNED: {
+      alignedLeft: string,
+      alignedCenter: string,
+      alignedRight: string,
+    },
+    TEXT: {
+      text: string,
+    },
+    GROUPS: {
+      block: string,
+      inline: string,
+      aligned: string,
+      list: string,
+      listItem: string,
+    },
+  },
+}

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

@@ -0,0 +1,87 @@
+const constants = {
+  PM_PLUGIN_SUFFIX: '$',
+  ATTRIBUTES: {
+    ENHANCEMENT_DATA: 'enhancement-data',
+  },
+  SELECTORS: {
+    RICH_TEXT_AREA: '.richtext',
+  },
+  STYLES: {
+    DISPLAY_NONE: 'display: none',
+  },
+  EVENTS: {
+    CLICK: 'click',
+    KEYDOWN: 'keydown',
+    MOUSEOVER: 'mouseover',
+    MOUSEOUT: 'mouseout',
+    DBLCLICK: 'dblclick',
+  },
+  CLASSES: {
+    CMS_ALIGN_LEFT: 'cms-textAlign-left',
+    RTE_ALIGN_LEFT: 'rte2-style-align-left',
+    CMS_ALIGN_RIGHT: 'cms-textAlign-right',
+    RTE_ALIGN_RIGHT: 'rte2-style-align-right',
+    CMS_ALIGN_CENTER: 'cms-textAlign-center',
+    RTE_ALIGN_CENTER: 'rte2-style-align-center',
+    RTE_LIST_ORDERED: 'rte2-style-ol',
+    RTE_LIST_UNORDERED: 'rte2-style-ul',
+    CMS_LIST_ITEM_DIV: 'cms-list-item-div',
+    CMS_LI_LIST_ITEM_DIV: 'li-cms-list-item-div',
+    RTE_CORE_LINK: 'rte2-style-brightspot-core-link-LinkRichTextElement',
+    RTE_CORE_ELEMENT_START:
+      'rte2-style-brightspot-core-link-LinkRichTextElement-start',
+    RTE_CORE_ELEMENT_END:
+      'rte2-style-brightspot-core-link-LinkRichTextElement-end',
+    ENHANCEMENT: 'Enhancement',
+    PM_AVATAR_WRAPPER: 'ProseMirrorAvatarWrapper',
+    IS_PLACEHOLDER_CONTENT: 'isPlaceholderContent',
+  },
+  ELEMENTS: {
+    DIV: 'div',
+    OL: 'ol',
+    UL: 'ul',
+    LI: 'li',
+    A: 'a',
+    SPAN: 'span',
+  },
+  KEY_MAPPINGS: {
+    MOD_Z: 'Mod-z',
+    SHIFT_MOD_Z: 'Shift-Mod-z',
+    MOD_Y: 'Mod-y',
+    MOD_B: 'Mod-b',
+    MOD_I: 'Mod-i',
+    MOD_U: 'Mod-u',
+    BACKSPACE: 'Backspace',
+    DELETE: 'Delete',
+    ESCAPE: 'Escape',
+    STRIKE: 'Mod-Shift-s',
+    SUP: 'Mod-.',
+    SUB: 'Mod-,',
+    CLEAR: 'Mod-f',
+  },
+  NODES: {
+    LISTS: {
+      ol: 'ol',
+      ul: 'ul',
+      listItem: 'listItem',
+      listItemDiv: 'listItemDiv',
+    },
+    ALIGNED: {
+      alignedLeft: 'alignLeft',
+      alignedCenter: 'alignCenter',
+      alignedRight: 'alignRight',
+    },
+    TEXT: {
+      text: 'text',
+    },
+    GROUPS: {
+      block: 'block',
+      inline: 'inline',
+      aligned: 'aligned',
+      list: 'list',
+      listItem: 'listItem',
+    },
+  },
+}
+
+export { constants }

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

@@ -0,0 +1,13 @@
+import { buildSchemaFromConfig } from './schemaBuilder'
+import { constants } from './constants'
+import { clearFormatting } from './commands'
+import { buildMenuItemsFromConfig } from './menuItemsBuilder'
+import { buildKeymap } from './keymapBuilder'
+
+export {
+  constants,
+  clearFormatting,
+  buildMenuItemsFromConfig,
+  buildKeymap,
+  buildSchemaFromConfig,
+}

package/src/legacy/tool-ui/src/main/webapp/v4/rte/settings/keymapBuilder.js

@@ -0,0 +1,223 @@
+/* eslint-disable no-debugger */
+import {
+  chainCommands,
+  newlineInCode,
+  createParagraphNear,
+  liftEmptyBlock,
+  toggleMark,
+  splitBlock,
+  splitBlockKeepMarks,
+} from 'prosemirror-commands'
+import { undo, redo } from 'prosemirror-history'
+import { clearFormatting, toggleAlignment } from './commands'
+import { constants } from './constants'
+import {
+  liftListItem,
+  sinkListItem,
+  splitListItem,
+} from 'prosemirror-schema-list'
+
+const hasNavigator = typeof navigator !== 'undefined'
+const isMac = hasNavigator ? /Mac/.test(navigator.platform) : false
+
+// Maps schema mark name to array of key binding(s). [0] = Win|both, [1] = Mac
+const KEY_MAPPINGS = {
+  bold: ['Mod-b'],
+  italic: ['Mod-i'],
+  underline: ['Mod-u'],
+  strikethrough: ['Ctrl-Alt-x', 'Cmd-Shift-x'],
+  superscript: ['Ctrl-Shift-+', 'Cmd-.'],
+  subscript: ['Ctrl-=', 'Cmd-,'],
+  html: ['Ctrl-Shift-c'],
+  comment: ["Ctrl-Shift-'"],
+  clear: ['Ctrl-Space', 'Cmd-\\'],
+  undo: ['Mod-z'],
+  redo: ['Mod-y', 'Mod-Shift-z'],
+  alignLeft: ['Ctrl-Alt-l', 'Cmd-Shift-l'],
+  alignCenter: ['Ctrl-Alt-e', 'Cmd-Shift-e'],
+  alignRight: ['Ctrl-Alt-r', 'Cmd-Shift-r'],
+  unicodeKeyboard: ['Mod-Shift-k'],
+  find: ['Mod-f'],
+  fullscreen: ['Mod-Shift-f'],
+  ul: ['Mod-Shift-8'],
+  ol: ['Mod-Shift-7'],
+  indent: ['Ctrl-]'],
+  outdent: ['Ctrl-['],
+}
+
+// Returns true if menuItems contains a className value ending with the normalized name.
+function hasMenubarItem(name, menuItems) {
+  if (menuItems) {
+    let normalizedName = name.replace(/[A-Z]/g, '-$&').toLowerCase()
+
+    return (
+      menuItems
+        .flatMap((item) => item.items)
+        .flatMap((button) => button.dom.className)
+        .findIndex((name) => name.endsWith(normalizedName)) !== -1
+    )
+  }
+  return false
+}
+
+// Captures 'Enter' key presses differentiating between when in a list or not.
+function handleEnter(createParagraphOnEnter) {
+  return (EditorState, dispatch) => {
+    const listItemType = EditorState.schema.nodes.listItem
+    const grandParent = EditorState.selection.$from.node(-1)
+
+    if (
+      listItemType &&
+      grandParent &&
+      listItemType === EditorState.selection.$from.node(-1).type
+    ) {
+      return splitListItem(listItemType)(EditorState, dispatch)
+    }
+    // Note that 'splitBlockKeepMarks' is used to preserve marks after 'Enter' and all other
+    // commands and their ordering are the default provided by ProseMirror.
+    chainCommands(
+      newlineInCode,
+      createParagraphNear,
+      liftEmptyBlock,
+      createParagraphOnEnter
+        ? (state, dispatch) => {
+            return splitBlock(
+              state,
+              dispatch &&
+                ((tr) => {
+                  const marks =
+                    state.storedMarks ||
+                    (state.selection.$to.parentOffset &&
+                      state.selection.$from.marks())
+
+                  state.selection.replaceWith(
+                    tr,
+                    EditorState.schema.nodes.line.create(),
+                  )
+
+                  if (marks) {
+                    tr.ensureMarks(marks)
+                  }
+
+                  dispatch(tr)
+                }),
+            )
+          }
+        : splitBlockKeepMarks,
+    )(EditorState, dispatch)
+    return true
+  }
+}
+
+/**
+ * Returns key mapping string based on users platform (Win|Mac).
+ *
+ * @param {*} name of mark defined in schema.
+ */
+export function findKeyMapping(name) {
+  let mapping = KEY_MAPPINGS[name]
+  return !mapping
+    ? undefined
+    : mapping.length === 2
+      ? isMac
+        ? mapping[1]
+        : mapping[0]
+      : mapping[0]
+}
+
+/**
+ * This is a little bit of a hack for key bindings that defer to an item in the menubar.
+ * To conform to that API, the keymap trigger triggers a click on the corresponding menu
+ * icon to insert the enhancement instead of calling the command directly.
+ *
+ * @param {string} className The class name of the menu icon to 'click'
+ */
+export function keyMappingHandler(className) {
+  return function (state, dispatch, editorView) {
+    const menuPluginView = editorView.pluginViews.find((view) => {
+      return view.myKey === `menubar${constants.PM_PLUGIN_SUFFIX}`
+    })
+    const menuIcon = menuPluginView.dom.getElementsByClassName(className)[0]
+    if (menuIcon) {
+      menuIcon.click()
+    }
+  }
+}
+
+export function buildKeymap(options, mapKeys) {
+  const schema = options.schema
+  let keys = {}
+  let type
+
+  function bind(key, cmd) {
+    if (mapKeys) {
+      let mapped = mapKeys[key]
+      if (mapped === false) return
+      if (mapped) key = mapped
+    }
+    keys[key] = cmd
+  }
+
+  // Windows with CapsLock enabled sends key as uppercase so will need to bind both.
+  function bindAsUppercase(name, command) {
+    if (!isMac) {
+      bind(findKeyMapping(name).toUpperCase(), command)
+    }
+  }
+
+  bind(findKeyMapping('undo'), undo)
+  bindAsUppercase('undo', undo)
+  bind(findKeyMapping('redo'), redo)
+  bindAsUppercase('redo', redo)
+  bind(findKeyMapping('clear'), (EditorState, dispatch) => {
+    clearFormatting()(EditorState, dispatch)
+  })
+
+  // Bind key mappings to existing ProseMirror commands.
+  ;[
+    'bold',
+    'italic',
+    'underline',
+    'strikethrough',
+    'superscript',
+    'subscript',
+  ].forEach((markName) => {
+    if ((type = schema.marks[markName])) {
+      bind(findKeyMapping(type.name), toggleMark(type))
+      bindAsUppercase(type.name, toggleMark(type))
+    }
+  })
+
+  keys['Enter'] = handleEnter(RTE_CREATE_PARAGRAPH_ON_ENTER)
+
+  if (RTE_CREATE_PARAGRAPH_ON_ENTER) {
+    keys['Shift-Enter'] = handleEnter(false)
+  }
+
+  if ((type = schema.nodes.listItem)) {
+    bind(findKeyMapping('indent'), sinkListItem(type))
+    bind(findKeyMapping('outdent'), liftListItem(type))
+    bind('Tab', sinkListItem(type))
+    bind('Shift-Tab', liftListItem(type))
+    bind('Shift-Enter', (EditorState, dispatch) => {
+      chainCommands(
+        newlineInCode(EditorState, dispatch),
+        createParagraphNear(EditorState, dispatch),
+        splitBlock(EditorState, dispatch),
+      )
+    })
+  }
+
+  // Bind key mappings to alignment buttons in toolbar.
+  ;['alignLeft', 'alignCenter', 'alignRight'].forEach((name) => {
+    if (
+      (type = schema.nodes[name]) &&
+      hasMenubarItem(name, options.menuItems)
+    ) {
+      bind(findKeyMapping(name), toggleAlignment(type, schema.nodes.line))
+      bindAsUppercase(name, toggleAlignment(type, schema.nodes.line))
+    }
+  })
+
+  return keys
+}