@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/plugins/menubar/Menubar.js

@@ -0,0 +1,485 @@
+/* eslint-disable no-debugger */
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { MenuView } from './views/MenuView'
+import { getActiveMarks, getActiveNodes } from '../../utilities'
+import debounce from '../../../util/debounce'
+import create from '../../../dom/create'
+
+const key = new PluginKey('menubar')
+
+/**
+ *
+ * @param {*} state
+ */
+const getCompatibleActions = (state) => {
+  const actions = state.plugins
+    .filter((plugin) => {
+      return (
+        plugin.getState(state) &&
+        plugin.getState(state).has !== void 0 &&
+        plugin.getState(state).has('compatibleActions')
+      )
+    })
+    .map((plugin) => {
+      return plugin.getState(state).get('compatibleActions')
+    })
+
+  return new Map(...actions)
+}
+
+const getMetaData = (state) => {
+  let map = new Map()
+  const metaData = state.plugins
+    .filter((plugin) => {
+      return (
+        plugin.getState(state) &&
+        plugin.getState(state).has !== void 0 &&
+        plugin.getState(state).has('metaData')
+      )
+    })
+    .map((plugin) => {
+      return plugin.getState(state).get('metaData')
+    })
+
+  metaData.forEach((data) => {
+    map = new Map([...map, ...data])
+  })
+
+  return map
+}
+
+/**
+ *
+ * @param {*} state
+ */
+const getActiveStates = (state) => {
+  let map = new Map()
+  const actions = state.plugins
+    .filter((plugin) => {
+      return (
+        plugin.getState(state) &&
+        plugin.getState(state).has !== void 0 &&
+        plugin.getState(state).has('activeStates')
+      )
+    })
+    .map((plugin) => {
+      return plugin.getState(state).get('activeStates')
+    })
+
+  actions.forEach((action) => {
+    map = new Map([...map, ...action])
+  })
+
+  return map
+}
+
+/**
+ *
+ * @param {*} state
+ */
+const getDisabledStates = (state) => {
+  let map = new Map()
+  const actions = state.plugins
+    .filter((plugin) => {
+      return (
+        plugin.getState(state) &&
+        plugin.getState(state).has !== void 0 &&
+        plugin.getState(state).has('disabledStates')
+      )
+    })
+    .map((plugin) => {
+      return plugin.getState(state).get('disabledStates')
+    })
+
+  actions.forEach((action) => {
+    map = new Map([...map, ...action])
+  })
+
+  return map
+}
+
+/**
+ *
+ * @param {*} state
+ */
+const getCompatibleNodes = (state) => {
+  let map = new Map()
+  const nodes = state.plugins
+    .filter((plugin) => {
+      return (
+        plugin.getState(state) &&
+        plugin.getState(state).has !== void 0 &&
+        plugin.getState(state).has('compatibleNodes')
+      )
+    })
+    .map((plugin) => {
+      return plugin.getState(state).get('compatibleNodes')
+    })
+
+  nodes.forEach((node) => {
+    map = new Map([...map, ...node])
+  })
+
+  return map
+}
+
+/**
+ * Plugin state represented as a Map. Currently only keeping track
+ * of the active states of menu items.
+ *
+ * @param {Object} menuItems Configuration object mapping menu items
+ *  to commands and the text that should appear in the menubar
+ * @param {Map} activeMarks Map of active marks
+ * @return {Map} Plugin state represented as a Map
+ */
+const getNewStateMap = (
+  menuItems,
+  activeMarks,
+  activeNodes,
+  compatibleNodes,
+  compatibleActions,
+  activeStates,
+  disabledStates,
+  metaData,
+  parent,
+  hasChange,
+) => {
+  const state = new Map()
+  state.set('menuItems', new Map(Object.entries(menuItems)))
+  state.set('activeMarks', activeMarks)
+  state.set('activeNodes', activeNodes)
+  state.set('compatibleNodes', compatibleNodes)
+  state.set('compatibleActions', compatibleActions)
+  state.set('activeStates', activeStates)
+  state.set('disabledStates', disabledStates)
+  state.set('metaData', metaData)
+  state.set('parent', parent)
+  state.set('hasChange', hasChange)
+  return state
+}
+
+/**
+ * Tests if 2 maps are equal.
+ *
+ * @param {Map} map1
+ * @param {Map} map2
+ */
+const isEqual = (map1, map2) => {
+  let testVal
+  if (map1.size !== map2.size) {
+    return false
+  }
+  for (var [key, val] of map1) {
+    testVal = map2.get(key)
+    if (testVal !== val || (testVal === undefined && !map2.has(key))) {
+      return false
+    }
+  }
+  return true
+}
+
+/**
+ * Extends Prosemirror to include a menubar with menu items for decorating
+ * content in the RTE (e.g. making text bold). It keeps track of active marks
+ * and active nodes.
+ *
+ * This can be used as is, or the menu bar view and/or the menu items
+ * configuation could be customized to fit a project's needs and the plugin
+ * behavior will remain the same.
+ *
+ * Plugin itself manages its own state and updates itself when a transaction is
+ * dispatched based on the new state produced by the transaction. Every transaction creates
+ * a new state, per Prosemirror best practices to keep the transaction history immutable.
+ * Plugin state is maintained in the EditorState as a field and can be accessed
+ * from anywhere within the app that can access the EditorState using its key `menubar`.
+ *
+ * When a dispatch triggers the plugin state's update method to run, the state
+ * will be updated the active marks, which will trigger the view's update method
+ * and the view will re-render with the new state. Active state of the menu items
+ * is not determined by what event that just happened but rather by what state the
+ * editor is in: If the current selection has a mark, then its corresponding menu
+ * icon with be active and vice versa.
+ *
+ * @param {Object} menuItems Configuration object mapping menu items
+ *  to commands and the text that should appear in the menubar. Used
+ *  to create the initial state of the menubar.
+ */
+const menuPlugin = (menuItems) => {
+  return new Plugin({
+    key,
+
+    view(editorView) {
+      let toolbarView = new MenuView(editorView, this.key.key)
+      let menuBar = editorView.dom.parentNode.querySelector(
+        '.ProseMirrorToolbar',
+      )
+      menuBar.appendChild(toolbarView.dom)
+
+      const toolbarWrapper = toolbarView.dom.parentElement
+
+      toolbarView.dom.addEventListener('btu-toolbar-overflow-found', (e) => {
+        const overflowItems = e.detail
+        overflowItems.items.filter((item) => {
+          if (item.classList.contains('is-open')) {
+            item.click()
+          }
+        })
+        toolbarView.onOverflowUpdate(overflowItems)
+      })
+
+      const doOverflow = () => {
+        toolbarView.dom.querySelectorAll('.rte-overflow-btn').forEach((el) => {
+          el.remove()
+        })
+        getOverflow()
+      }
+
+      toolbarView.dom.addEventListener('btu-toolbar-update', (e) => {
+        handleOverflowDebounced()
+      })
+
+      const ignoredByOverflow = (el) => {
+        return (
+          el.dataset.rteStyle === 'rte2-toolbar-ai-inline' ||
+          el.classList.contains('rte-overflow-btn') ||
+          el.dataset.rteStyle === 'rte2-toolbar-find' ||
+          el.dataset.rteStyle === 'rte2-toolbar-fullscreen' ||
+          el.dataset.rteStyle?.startsWith('com-psddev-indesign') ||
+          el.querySelector(':scope > a.outOfContext') ||
+          !el.checkVisibility({ visibilityProperty: true }) ||
+          (el.querySelector(':scope > a.rte2-toolbar-noicon') &&
+            el.querySelector(':scope > a')?.innerText === '')
+        )
+      }
+
+      /*
+        Returns the items that overflow the toolbar and the target item to insert the overflow button before.
+      */
+      const getOverflow = () => {
+        const toolbar = toolbarView.dom
+        const toolbarRow = toolbar.closest('.ProseMirrorToolbar')
+        const actions = toolbar.querySelectorAll(
+          ':scope > li:not(.rte2-toolbar-submenu-horizontal, [data-rte-style="rte2-toolbar-fullscreen"], [data-rte-style="rte2-toolbar-find"])',
+        )
+
+        // Batch DOM reads and writes to avoid layout thrashing
+        // READ: Check if cover offset exists
+        const hasCoverOffset =
+          toolbarWrapper.style.getPropertyValue('--cover-offset-x')
+
+        // WRITE: Update classes based on read
+        toolbar.classList.remove('coverIntro', 'coverOutro')
+        if (!hasCoverOffset) {
+          toolbar.classList.add('coverIntro')
+        }
+
+        // Opportunities to overflow are after separators.
+        let overflowBreaks = toolbar.querySelectorAll(
+          ':scope li.rte2-toolbar-separator + :has(~ li)',
+        )
+
+        // When no separators are found, overflow can happen at each item.
+        if (!overflowBreaks.length) {
+          overflowBreaks = actions
+        } else {
+          // If separators are present, overflow can also occur at actions that precede the first separator.
+          // This ensures overflow button still appears in a narrow RTE container.
+          const firstActions = []
+          for (const action of actions) {
+            if (action.matches('.rte2-toolbar-separator')) {
+              break
+            } else {
+              firstActions.push(action)
+            }
+          }
+          overflowBreaks = [...firstActions, ...overflowBreaks]
+        }
+
+        // Use IntersectionObserver to determine which actions fit into first row of toolbar
+        // so that overflow menu button's position (if applicable) is correct.
+        const observer = new IntersectionObserver(
+          (changes) => {
+            let latestBreak = null
+            let offsetInline
+
+            let firstRowActionsCt = 0
+            let latestBreakIndex = 0
+            let totalActionsCt = 0
+
+            for (const change of changes) {
+              // Find last non-wrapping action where overflow button can be inserted.
+              if (change.isIntersecting) {
+                const currentIndex = Array.from(actions).indexOf(change.target)
+                if (currentIndex >= latestBreakIndex) {
+                  latestBreak = change.target
+                  latestBreakIndex = currentIndex
+                }
+                firstRowActionsCt++
+              }
+              totalActionsCt++
+
+              // After all toolbar actions are observed, dispatch event indicating overflow position.
+              if (totalActionsCt === overflowBreaks.length) {
+                observer.disconnect()
+                overflowBreaks.forEach((item) => delete item.dataset.isObserved)
+
+                const noOverflow = firstRowActionsCt === totalActionsCt
+
+                // Batch layout reads and writes using RAF to avoid layout thrashing
+                requestAnimationFrame(() => {
+                  // READ PHASE: Batch all layout reads together
+                  if (noOverflow || !latestBreak) {
+                    offsetInline = -1
+                  } else if (
+                    document.documentElement.getAttribute('dir') === 'rtl'
+                  ) {
+                    offsetInline =
+                      latestBreak.offsetParent.offsetWidth -
+                      latestBreak.offsetLeft -
+                      latestBreak.offsetWidth
+                  } else {
+                    offsetInline = latestBreak.offsetLeft
+                  }
+
+                  // Calculate overflowed items
+                  let overflowedItems = []
+                  let insertionTarget = null
+
+                  if (!noOverflow && latestBreak) {
+                    overflowedItems = [...actions]
+                      .splice(latestBreakIndex)
+                      .filter((item) => !ignoredByOverflow(item))
+                    insertionTarget = latestBreak
+                  }
+
+                  // WRITE PHASE: Batch all DOM updates in next frame
+                  requestAnimationFrame(() => {
+                    // Cover up overflowed items
+                    toolbarWrapper.style.setProperty(
+                      '--cover-offset-x',
+                      offsetInline > 0 ? offsetInline + 'px' : null,
+                    )
+
+                    // Dispatch event with overflow data
+                    toolbar.dispatchEvent(
+                      new CustomEvent('btu-toolbar-overflow-found', {
+                        detail: {
+                          items: overflowedItems,
+                          target: insertionTarget,
+                        },
+                      }),
+                    )
+                  })
+                })
+              }
+            }
+          },
+          { root: toolbarRow },
+        )
+
+        for (const item of overflowBreaks) {
+          if (item.dataset.isObserved) return
+          item.dataset.isObserved = 'true'
+          observer.observe(item)
+        }
+      }
+
+      const handleOverflowDebounced = debounce(200, () => {
+        doOverflow()
+      })
+
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          handleOverflowDebounced()
+        }
+      })
+
+      const submenu = document.createElement('div')
+      submenu.className = 'ProseMirrorToolbar-horizontalSubmenu'
+      menuBar.appendChild(submenu)
+      resizeObserver.observe(toolbarWrapper)
+      return toolbarView
+    },
+
+    state: {
+      init(config) {
+        const activeMarks = new Map()
+        const activeNodes = new Map()
+        const compatibleNodes = new Map()
+        const compatibleActions = new Map()
+        const activeStates = new Map()
+        const disabledStates = new Map()
+        const metaData = new Map()
+        const parent = null
+        const hasChange = true
+        return getNewStateMap(
+          menuItems,
+          activeMarks,
+          activeNodes,
+          compatibleNodes,
+          compatibleActions,
+          activeStates,
+          disabledStates,
+          metaData,
+          parent,
+          hasChange,
+        )
+      },
+
+      apply(transaction, value, oldState, newState) {
+        const activeMarks = getActiveMarks(newState)
+        const activeNodes = getActiveNodes(newState)
+        const compatibleNodes = getCompatibleNodes(newState)
+        const compatibleActions = getCompatibleActions(newState)
+        const activeStates = getActiveStates(newState)
+        const disabledStates = getDisabledStates(newState)
+        const metaData = getMetaData(newState)
+        const parent = newState.selection.$anchor.parent
+        let hasChange
+
+        hasChange = value.get('parent') === parent
+
+        if (!hasChange) {
+          const maps = [
+            activeMarks,
+            activeNodes,
+            compatibleNodes,
+            compatibleActions,
+            activeStates,
+            disabledStates,
+            metaData,
+          ]
+          const mapsOld = [
+            value.get('activeMarks'),
+            value.get('activeNodes'),
+            value.get('compatibleNodes'),
+            value.get('compatibleActions'),
+            value.get('activeStates'),
+            value.get('disabledStates'),
+            value.get('metaData'),
+          ]
+          hasChange = maps.some((map, index) => {
+            return !isEqual(map, mapsOld[index])
+          })
+        }
+
+        const newStateMap = getNewStateMap(
+          menuItems,
+          activeMarks,
+          activeNodes,
+          compatibleNodes,
+          compatibleActions,
+          activeStates,
+          disabledStates,
+          metaData,
+          parent,
+          hasChange,
+        )
+
+        return newStateMap
+      },
+    },
+  })
+}
+
+export { menuPlugin }

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

@@ -0,0 +1,40 @@
+# Brightspot Rich Text Editor Menubar Plugin
+
+Extends Prosemirror to include a menubar with menu items for decorating content in the RTE (e.g. making text bold). This can be used as is, or the menu bar view and/or the menu items configuation could be customized to fit a project's needs, and the plugin behavior will remain the same.
+
+## Table of Contents
+
+1.  [Must Knows](#must-knows)
+2.  [Usage](#usage)
+3.  [Component and Directory Structure](#component-and-directory-structure)
+    1.  [menubar views](#menubar-views)
+
+## Must Knows
+
+1.  You can swap out the menu items and the menubar views and while you will get a new look, the plugin will still function the same in that it will react to state changes, calculate the new state, and pass on the new plugin state.
+2.  You can just swap out the menu items configuration to have an entirely different sent of menu items (you might need to also update your commands then as well).
+3.  The menu icons can be styled via setting a class name in the menu items configuration. The class name rule should contain the name
+    of the icon to be used (see the Settings ReadMe for more information). Or, the menu icon can be markup that you provide via the configuration. This is useful for when there is not a corresponding icon for an action.
+4.  You can create "clusters" of menu icons so that you can group them together via css. A cluster class is applied to the first item marked cluster in the menu configuration.
+5.  Nested (1-level) lists are supported. They will convert to a drop-down menu. An example is the custom css styling.
+
+## 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
+
+### Menubar Views
+
+1.  This is where the DOM is built. The views should remain as "dumb" as possible: Any events they capture should be handed off to either a built-in/custom command (which will trigger a transaction dispatch) or dispatch a transaction. It should have an update method that will be fired by Prosemirror when the EditorView state changes and it should re-render its DOM accordingly.
+
+**Example**:
+
+1.  User clicks the Bold menu icon
+2.  The icon DOM captures the event and calls the menubar's event handler
+3.  The event handler calls the command mapped to that menu item
+4.  The command handles updating the EditorView state. In this example, it will update the marks for the selected text in the state object. It will then dispatch the transaction and all listeners (which includes are plugin) will be notifed with the new editorState (along with the transaction).
+5.  This triggers the `apply` method we set up in the plugin, which creates a new state based on the new EditorView state. In our case, this updates the `activeMarks` Map that is a member of the plugins `state` Map.
+6.  This triggers the `update` method of the view, which can determine if the view should re-render, and if so, triggers the view's render method. The view re-renders using the new `state`. In our case, the `activeMarks` map will indicate that the `bold` mark is active. This property is passed into the menu items builder function and the class of the menu item is derived based on the mark's active state.
+
+_Note_: Updating state always means creating a new state derived from the old state + changes. State should always remain immutable.