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

@@ -1,559 +0,0 @@
-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 }