@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/settings/menuItemsBuilder.js

@@ -0,0 +1,559 @@
+import { toggleMark } from 'prosemirror-commands'
+import { clearFormatting, toggleAlignment } from './commands'
+import { undo, redo } from 'prosemirror-history'
+import { sinkListItem, liftListItem } from 'prosemirror-schema-list'
+import {
+  insertEnhancement,
+  insertEnhancementWithoutPopup,
+  insertEditableInlineEnhancements,
+  insertNonEditableNoFieldsEnhancements,
+} from '../plugins/enhancement_manager'
+import { goFullScreen } from '../plugins/fullscreen_manager'
+import {
+  doTrack,
+  rejectChanges,
+  acceptChanges,
+  togglePreview,
+  acceptChangesAll,
+  rejectChangesAll,
+} from '../plugins/track_manager/TrackManager'
+import { toggleAiContent } from '../plugins/ai_manager/AiManager'
+import { toggleAIInline } from '../plugins/ai_inline_manager/AIInlineManager'
+import { doRaw } from '../plugins/raw_text_manager/RawTextManager'
+import {
+  mergeCells,
+  addRowAfter,
+  addRowBefore,
+  addColumnBefore,
+  addColumnAfter,
+  deleteRow,
+  deleteColumn,
+} from 'prosemirror-tables'
+import { insertTable } from '../plugins/table_manager/commands'
+import {
+  removeComment,
+  collapseComments,
+} from '../plugins/comment_manager/CommentManager'
+import { openKeyboard } from '../plugins/custom_keyboard/CustomKeyboard'
+import { toggleFind } from '../plugins/find_replace_manager/FindReplaceManager'
+import { modeToggle } from '../plugins/html_editor_manager/htmlEditorManager'
+import moment from 'moment'
+import { toggleListItem } from '../plugins/list_manager'
+import { findKeyMapping } from './keymapBuilder'
+import { TextSelection } from 'prosemirror-state'
+
+const hasNavigator = typeof navigator !== 'undefined'
+const isMac = hasNavigator
+  ? /Mac/.test(navigator.platform) || // being deprecated
+    /macOS/.test(navigator.userAgentData?.platform)
+  : false
+
+const getUnicodeChars = () => {
+  return [
+    ...(window.BRIGHTSPOT?.ui.customKeyboardConfig || []),
+    ...(typeof RTE_UNICODE !== 'undefined' ? RTE_UNICODE : []),
+  ]
+}
+
+// Generate text for hover tooltip display containing configured keyboard keymap value.
+const createTooltip = (value) => {
+  if (value.tooltip) {
+    let keymapDisplay
+
+    if (value.keymap) {
+      keymapDisplay =
+        isMac && value.keymap.length === 2 ? value.keymap[1] : value.keymap[0]
+    } else {
+      keymapDisplay = findKeyMapping(value.name)
+    }
+
+    if (keymapDisplay) {
+      keymapDisplay = keymapDisplay
+        .replace(/Mod/g, isMac ? '⌘' : 'Ctrl')
+        .replace(/"/g, '"')
+        .replace(/Cmd/g, '⌘')
+        .replace(/Ctrl/g, isMac ? '⌃' : 'Ctrl')
+        .replace(/Shift/g, isMac ? '⇧' : 'Shift')
+        .split('-')
+
+      let lastValue = keymapDisplay[keymapDisplay.length - 1]
+
+      if (lastValue.length === 1) {
+        keymapDisplay[keymapDisplay.length - 1] = lastValue.toUpperCase()
+      }
+
+      return `${value.tooltip} (${keymapDisplay.join(' + ')})`
+    }
+
+    return value.tooltip
+  }
+  return ''
+}
+
+/**
+ * This builds the menu item list based on a passed in custom
+ * menu bar configuration. Right now filter for
+ * `inline: true` and must have the following
+ * properties set: `className`, `style`. We have hard-coded that
+ * `style` can not be of value `link` because these are handled
+ * as enhancements. They also must not have the property `separator`.
+ *
+ * For now html menu item is filtered (when the `style` property
+ * equals `html`) until we work on adding the to html functionality.
+ *
+ * Enhancements will be added as well in the future.
+ *
+ * @param {Object.<Object|string>} customMenuBar
+ * @param {Object.<Object|string>} schema
+ * @param {boolean} isInline True if the RTE instance is inline.
+ * @param {string} userLabel The CMS user's label/user name
+ * @param {userId} userId The CMS user's id
+ * @param {Object.<string>} richTextElementTags Rich Text Elements that are allowed in
+ * this instance of the RTE
+ */
+const buildMenuItemsFromConfig = (
+  customMenuBar,
+  schema,
+  isInline,
+  userLabel,
+  userId,
+  richTextElementTags,
+) => {
+  const specialCommands = {
+    alignLeft: toggleAlignment(schema.nodes.alignLeft, schema.nodes.line),
+    alignRight: toggleAlignment(schema.nodes.alignRight, schema.nodes.line),
+    alignCenter: toggleAlignment(schema.nodes.alignCenter, schema.nodes.line),
+    ul: toggleListItem(schema.nodes.ul),
+    ol: toggleListItem(schema.nodes.ol),
+    indent: sinkListItem(schema.nodes.listItem),
+    outdent: liftListItem(schema.nodes.listItem),
+    clear: clearFormatting(schema),
+    html: doRaw(schema),
+    table: insertTable(),
+    mergeTableCells: mergeCells,
+    addRowAfter,
+    addRowBefore,
+    addColumnAfter,
+    addColumnBefore,
+    deleteRow,
+    deleteColumn,
+    toggleAiContent: toggleAiContent(schema),
+    toggleAIInline: toggleAIInline(schema),
+    trackChanges: doTrack(schema),
+    acceptChanges: acceptChanges(schema),
+    rejectChanges: rejectChanges(schema),
+    togglePreview: togglePreview(schema),
+    acceptChangesAll: acceptChangesAll(),
+    rejectChangesAll: rejectChangesAll(),
+    comment: function (state, dispatch) {
+      if (!RTE_CREATE_COMMENT_FROM_HIGHLIGHT) {
+        if (!state.selection.empty) {
+          const selection = new TextSelection(
+            state.doc.resolve(state.selection.to),
+          )
+          const tr = state.tr.setSelection(selection)
+          state = state.apply(tr)
+        }
+      }
+      toggleMark(schema.marks.comment, {
+        'data-user-id': userId,
+        'data-user-label': userLabel,
+        'data-time': moment().format('MM/D/YYYY h:mm:ss A'),
+        title: `${userLabel}: ${moment().format('MM/D/YYYY h:mm:ss A')}`,
+      })(state, dispatch)
+    },
+    collapseComments: collapseComments(),
+    removeComment: removeComment(),
+    undo,
+    redo,
+    unicodeKeyboard: openKeyboard(getUnicodeChars()),
+    fullscreen: goFullScreen(schema),
+    upload: insertEnhancement({
+      isCustom: true,
+      customUrl: 'content/upload?context=RTE',
+      isDataFramePost: false,
+      popup: true,
+    }),
+    find: toggleFind(),
+    modeToggle: modeToggle(),
+  }
+
+  const getName = (menuItem) => {
+    let name
+    if (menuItem.style) {
+      return menuItem.style
+    } else if (menuItem.separator) {
+      return 'separator'
+    } else if (menuItem.upload) {
+      return 'upload'
+    } else if (menuItem.action) {
+      name = menuItem.action
+      switch (menuItem.action) {
+        case 'table':
+          name = 'addTable'
+          break
+        case 'highlightAiContentToggle':
+          name = 'toggleAiContent'
+          break
+        case 'showAIToggleInline':
+          name = 'toggleAIInline'
+          break
+        case 'trackChangesToggle':
+          name = 'trackChanges'
+          break
+        case 'trackChangesAccept':
+          name = 'acceptChanges'
+          break
+        case 'trackChangesReject':
+          name = 'rejectChanges'
+          break
+        case 'trackChangesAcceptAll':
+          name = 'acceptChangesAll'
+          break
+        case 'trackChangesRejectAll':
+          name = 'rejectChangesAll'
+          break
+        case 'trackChangesShowFinalToggle':
+          name = 'togglePreview'
+          break
+        case 'fullscreen':
+          name = 'fullscreen'
+          break
+        case 'collapse':
+          name = 'collapseComments'
+          break
+        case 'cleartext':
+          if (
+            menuItem.cleartextStyle &&
+            menuItem.cleartextStyle === 'comment'
+          ) {
+            name = 'removeComment'
+          }
+          break
+        case 'clear':
+          name = 'clear'
+          break
+      }
+      return name
+    }
+  }
+
+  const getCommand = (menuItem) => {
+    let command
+    if (menuItem.style) {
+      return (
+        specialCommands[menuItem.style] ||
+        toggleMark(schema.marks[menuItem.style])
+      )
+    } else if (menuItem.separator) {
+      return null
+    } else if (menuItem.upload) {
+      return specialCommands.upload
+    } else if (menuItem.action) {
+      command = specialCommands[menuItem.action]
+      switch (menuItem.action) {
+        case 'highlightAiContentToggle':
+          command = specialCommands['toggleAiContent']
+          break
+        case 'showAIToggleInline':
+          command = specialCommands['toggleAIInline']
+          break
+        case 'trackChangesToggle':
+          command = specialCommands['trackChanges']
+          break
+        case 'trackChangesAccept':
+          command = specialCommands['acceptChanges']
+          break
+        case 'trackChangesReject':
+          command = specialCommands['rejectChanges']
+          break
+        case 'trackChangesAcceptAll':
+          command = specialCommands['acceptChangesAll']
+          break
+        case 'trackChangesRejectAll':
+          command = specialCommands['rejectChangesAll']
+          break
+        case 'trackChangesShowFinalToggle':
+          command = specialCommands['togglePreview']
+          break
+        case 'fullscreen':
+          command = specialCommands['fullscreen']
+          break
+        case 'collapse':
+          command = specialCommands['collapseComments']
+          break
+        case 'cleartext':
+          if (
+            menuItem.cleartextStyle &&
+            menuItem.cleartextStyle === 'comment'
+          ) {
+            command = specialCommands['removeComment']
+          }
+          break
+        case 'clear':
+          command = specialCommands['clear']
+          break
+      }
+      return command
+    }
+  }
+
+  let newMenu2 = []
+  const customMenuBarWithSubmenus = new Map()
+  let separatorCounter = 0
+
+  customMenuBar.forEach((menuItem) => {
+    if (menuItem.style && menuItem.style === 'link') {
+      return
+    }
+    menuItem.command = getCommand(menuItem)
+    menuItem.name = getName(menuItem)
+    if (menuItem.submenu) {
+      if (customMenuBarWithSubmenus.has(menuItem.submenu)) {
+        customMenuBarWithSubmenus.get(menuItem.submenu).push(menuItem)
+      } else {
+        customMenuBarWithSubmenus.set(menuItem.submenu, [menuItem])
+      }
+    } else {
+      let key
+      let value
+      menuItem.command = getCommand(menuItem)
+      menuItem.name = getName(menuItem)
+      if (menuItem.style) {
+        key = menuItem.style
+        value = menuItem
+      } else if (menuItem.action) {
+        key = menuItem.action
+        value = menuItem
+      } else if (menuItem.richTextElements) {
+        key = 'richTextElements'
+        value = menuItem.richTextElements
+      } else if (menuItem.upload) {
+        key = 'upload'
+        value = menuItem.upload
+      } else if (menuItem.custom) {
+        key = 'custom'
+        value = menuItem.custom
+      } else if (menuItem.separator) {
+        key = `separator${separatorCounter}`
+        value = menuItem
+        separatorCounter = separatorCounter + 1
+      }
+
+      if (key && value) {
+        customMenuBarWithSubmenus.set(key, value)
+      }
+    }
+  })
+
+  customMenuBarWithSubmenus.forEach((value, key) => {
+    let newClusterObj = {}
+    let newItems = []
+    let command
+    let name
+    let newItem
+
+    if (Array.isArray(value)) {
+      newClusterObj.rollAt = 0
+      newClusterObj.topLevelIcon = null
+      newClusterObj.topLevelText = key
+
+      value.forEach((menuItem) => {
+        const command = menuItem.command
+        const name = menuItem.name
+        const config = {
+          command,
+          dom: {
+            className: menuItem.className || '',
+            name,
+            displayName: menuItem.text,
+            tooltip: createTooltip(menuItem),
+            icon: menuItem.icon || '',
+            onIcon: menuItem.onIcon,
+          },
+          activeIfUnset: menuItem.activeIfUnset || [],
+          inactiveIfSet: menuItem.inactiveIfSet || [],
+        }
+
+        if (menuItem.target) {
+          config.dom.target = menuItem.target
+        }
+
+        if (menuItem.customUrl) {
+          config.customUrl = menuItem.customUrl
+        }
+
+        newItems.push(config)
+      })
+
+      newClusterObj.items = newItems
+      newMenu2.push(newClusterObj)
+    } else {
+      if (key === 'upload') {
+        newItem = {
+          command: insertEnhancement({
+            isCustom: true,
+            customUrl: 'content/upload?context=RTE',
+            isDataFramePost: false,
+            popup: true,
+          }),
+          dom: {
+            className: 'RichTextEditor-upload screen-reader-only',
+            name: 'upload',
+            tooltip: 'Upload Files',
+            target: `contentEnhancement-${Date.now()}`,
+            icon: 'arrow_upward',
+          },
+          customUrl: `${CONTEXT_PATH}content/upload?context=RTE`,
+        }
+        newItems.push(newItem)
+        newClusterObj.items = newItems
+        newMenu2.push(newClusterObj)
+      } else if (key === 'richTextElements') {
+        const richTextElementsMap = new Map()
+
+        RICH_TEXT_ELEMENTS_PM.forEach((item) => {
+          if (item.tag === 'tr' || item.tag === 'td') {
+            return
+          }
+          if (item.submenu) {
+            if (richTextElementsMap.get(item.submenu)) {
+              richTextElementsMap.get(item.submenu).push(item)
+            } else {
+              richTextElementsMap.set(item.submenu, [item])
+            }
+          } else {
+            richTextElementsMap.set(item.tag, item)
+          }
+        })
+
+        richTextElementsMap.forEach((value, key) => {
+          newClusterObj = {}
+          newItems = []
+          if (Array.isArray(value)) {
+            newClusterObj.rollAt = 0
+            newClusterObj.topLevelIcon = null
+            newClusterObj.topLevelText = key
+
+            value.forEach((menuItem) => {
+              if (
+                (isInline && menuItem.line) ||
+                (richTextElementTags &&
+                  richTextElementTags.indexOf(menuItem.tag) < 0)
+              ) {
+                return
+              }
+              let name = menuItem.tag.toLowerCase()
+              let command = insertEnhancement(menuItem)
+              if (menuItem.tag === 'table') {
+                command = insertTable()
+              } else if (!menuItem.popup) {
+                if (!menuItem.readOnly) {
+                  if (!menuItem.line) {
+                    command = insertEditableInlineEnhancements(menuItem)
+                  } else {
+                    command = insertEnhancementWithoutPopup(menuItem)
+                  }
+                } else {
+                  command = insertNonEditableNoFieldsEnhancements(menuItem)
+                }
+              }
+
+              newItem = {
+                command,
+                dom: {
+                  className: menuItem.styleName,
+                  name,
+                  tooltip: createTooltip(menuItem),
+                  displayName: menuItem.displayName,
+                  icon: menuItem.icon,
+                  onIcon: menuItem.onIcon,
+                  popup: menuItem.popup,
+                },
+                context: menuItem.context || [],
+              }
+              newItems.push(newItem)
+            })
+            newClusterObj.items = newItems
+            newMenu2.push(newClusterObj)
+          } else {
+            if (
+              (isInline && value.line) ||
+              (richTextElementTags &&
+                richTextElementTags.indexOf(value.tag) < 0)
+            ) {
+              return
+            }
+            let name = value.tag.toLowerCase()
+            let command = insertEnhancement(value)
+            if (value.tag === 'table') {
+              command = insertTable()
+            } else if (value.tag === 'ul') {
+              command = specialCommands.ul
+            } else if (value.tag === 'ol') {
+              command = specialCommands.ol
+            } else if (!value.popup) {
+              if (!value.readOnly) {
+                if (!value.line) {
+                  command = insertEditableInlineEnhancements(value)
+                } else {
+                  command = insertEnhancementWithoutPopup(value)
+                }
+              } else {
+                command = insertNonEditableNoFieldsEnhancements(value)
+              }
+            }
+            newItem = {
+              command,
+              dom: {
+                className: value.styleName,
+                name,
+                tooltip: createTooltip(value),
+                displayName: value.displayName,
+                icon: value.icon,
+                onIcon: value.onIcon,
+                popup: value.popup,
+              },
+              context: value.context || [],
+              activeIfUnset: value.activeIfUnset || [],
+              inactiveIfSet: value.inactiveIfSet || [],
+            }
+            newItems.push(newItem)
+            newClusterObj.items = newItems
+            newMenu2.push(newClusterObj)
+          }
+        })
+      } else {
+        command = value.command
+        name = value.name
+        newItem = {
+          command,
+          dom: {
+            className: value.className || '',
+            name,
+            displayName: value.text || '',
+            tooltip: createTooltip(value),
+            icon: value.icon || '',
+            onIcon: value.onIcon,
+          },
+          activeIfUnset: value.activeIfUnset || [],
+          inactiveIfSet: value.inactiveIfSet || [],
+        }
+        if (value.target) {
+          newItem.dom.target = value.target
+        }
+
+        if (value.customUrl) {
+          newItem.customUrl = value.customUrl
+        }
+        newItems.push(newItem)
+        newClusterObj.items = newItems
+        newMenu2.push(newClusterObj)
+      }
+    }
+  })
+
+  return newMenu2
+}
+
+export { buildMenuItemsFromConfig }