@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/utilities.d.ts

@@ -0,0 +1,4 @@
+import { EditorView } from 'prosemirror-view'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function getPluginState(editorView: EditorView, key: string): any

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

@@ -0,0 +1,359 @@
+/* eslint-disable no-debugger */
+import { constants } from './settings'
+import { EditorState, AllSelection, TextSelection } from 'prosemirror-state'
+import { getPlugins } from './plugins/PluginProvider'
+import { DOMParser } from 'prosemirror-model'
+import { getLegacyHTMLTextForProsemirror } from './codemirror-shim'
+
+/**
+ * @file
+ * Utility/helper functions to help set up the RTE or assist with
+ * parsing content. Separating them out from the class to keep
+ * the size of the class objects down since these aren't really
+ * needed on the object's prototype chain and don't serve any
+ * purpose as a static method.
+ */
+
+/**
+ * Retrieves a nested object value without triggering an
+ * NPE if one of the keys is undefined and if an NPE is encountered will return
+ * a default value if one is passed in
+ *
+ * @param {Object.<*>} obj Object literal trying to crawl
+ * @param {string} path Path to property you are trying to retrieve
+ *        represented as a string with dot notation
+ * @param {*=} defaultValue Whatever you want returned if the lookup
+ *         fails
+ * @return {*|undefined} Returns value if found, defaultValue if NPE and
+ *         default is defined or undefined
+ *
+ * @example
+ * const object = {
+ * foo: {
+ *  bar: {
+ *     baz: 'fizzpop'
+ *   }
+ *  }
+ * }
+ * getObject(object, 'foo.bar.baz', 'defaultText') -> 'fizzpop'
+ */
+const getObjectValue = (obj, path, defaultValue) => {
+  const pathArr = path.split('.')
+  const value = pathArr.reduce((prev, next) => {
+    if (prev === void 0) {
+      console.warn(`Unable to retrieve [${next}] from object`)
+      return undefined
+    }
+    return prev[next]
+  }, obj)
+
+  return value || defaultValue || undefined
+}
+
+/**
+ * ProseMirror does not serialize directly to HTML, and the author's
+ * recommendation is to follow this pattern to create HTML/HTML strings
+ * from the serialized ProseMirror data.
+ *
+ * Our current implementation takes and returns a string
+ * of HTML.
+ *
+ * @param {!Prosemirror.DOMSerializer} serializer ProseMirror DOM Serializer.
+ * @param {!Prosemirror.Fragment} content A node's collection of child nodes to
+ *      be converted into HTML.
+ * @return {string} String representation of the converted HTML elements.
+ */
+const convertToHTML = (serializer, content) => {
+  const tmpElement2 = document.createElement(constants.ELEMENTS.DIV)
+  const fragment = serializer.serializeFragment(content, {
+    target: tmpElement2,
+  })
+  const tmpElement = document.createElement(constants.ELEMENTS.DIV)
+  tmpElement.appendChild(fragment)
+  return tmpElement.innerHTML
+}
+
+/**
+ * Builds a Prosemirror editor state from the initial value provided
+ * by the textarea.
+ *
+ * @param {?string} initialContent HTML markup as a string from provided
+ *  by the textarea.
+ * @param {!OrderedMap} menuItems Menubar configuration.
+ * @param {!Function} buildKeymap Menubar configuration.
+ * @param {ProseMirror.Model.Schema} schema Schema configuration.
+ * @param {string} userId The userID of the current user.
+ * @param {string} userLabel The user label of the current user.
+ * @param {number} version The version number from which this editor is starting.
+ * @param {Object.<Object>} anchorMap Key/value pairs of userIds to RTE positions.
+ * @param {Array.<Object>} rangeList List of key/value pairs of userIds to RTE selection ranges.
+ * @param {boolean} isCollab True indicates collab editing is enabled for this field.
+ * @return {Prosemirror.EditorState} Prosemirror editor state.
+ */
+const getState = (
+  doc,
+  menuItems,
+  buildKeymap,
+  schema,
+  userId,
+  userLabel,
+  version,
+  anchorMap,
+  rangeList,
+  lockedList,
+  isCollab,
+  ctx,
+  compliantTagNameMap,
+) => {
+  return EditorState.create({
+    doc,
+    plugins: getPlugins({
+      schema,
+      menuItems,
+      buildKeymap,
+      userId,
+      userLabel,
+      version,
+      anchorMap,
+      rangeList,
+      lockedList,
+      isCollab,
+      ctx,
+      compliantTagNameMap,
+    }),
+  })
+}
+
+/**
+ * Gets the state for just a plugin
+ *
+ * @param {!Prosemirror.EditorView} editorView
+ * @param {string} key
+ * @return {*} Plugin states can be of any type and are
+ *  defined by the plugin.
+ */
+const getPluginState = (editorView, key) => {
+  return editorView.state[key]
+}
+
+/**
+ * Retrieves a mark's state within the current selection. Selection
+ * is retrieved from the EditorState.
+ *
+ * @param {Prosemirror.EditorState} state
+ * @param {Prosemirror.Mark} type The mark
+ * @return {string} 'active' if active; 'inactive' if not active
+ */
+// TODO(teckels): Should this just return a boolean?
+const getMarkState = (state, type) => {
+  const { from, $from, to, empty } = state.selection
+  let isActive = false
+
+  if (empty) {
+    isActive = type.isInSet(state.storedMarks || $from.marks())
+    return isActive ? 'active' : 'inactive'
+  }
+
+  isActive = state.doc.rangeHasMark(from, to, type)
+  return isActive ? 'active' : 'inactive'
+}
+
+/**
+ * Finds all the active marks for the current selection.
+ *
+ * @param {Prosemirror.EditorState} state
+ * @return {Map.<string.<boolean>>} Map of marks to their active states
+ *  expressed as true for `active` and false for `inactive`
+ */
+const getActiveMarks = (state) => {
+  const schema = state.config.schema
+  const activeMarks = Object.keys(schema.marks).map((key) => {
+    const isActive = getMarkState(state, schema.marks[key]) === 'active'
+    if (isActive) {
+      return [key, true]
+    }
+
+    return [key, false]
+  })
+
+  return new Map(activeMarks)
+}
+
+/**
+ * Finds the active block nodes for the current selection. Because
+ * nodes form a tree, this could and probably will be be a number of nodes
+ * (e.g. doc -> unorderedList -> listItem -> listItemDiv)
+ *
+ * @param {Prosemirror.EditorState} state
+ * @return {Map.<string.<boolean>>} Map of active nodes.
+ */
+const getActiveNodes = (state) => {
+  const { $anchor } = state.selection
+  const activeNodes = $anchor.path
+    .filter((item) => typeof item !== 'number')
+    .map((item) => {
+      return [getObjectValue(item, 'type.name'), true]
+    })
+
+  return new Map(activeNodes)
+}
+
+/**
+ * Determines if the selection is in a list.
+ *
+ * @param {Prosemirror.NodeRange} range
+ * @return {boolean}
+ */
+const getIsInAList = (range) => {
+  // Avoiding triple operator because this could be `undefined`
+  return range && constants.NODES.LISTS[range.parent.type.name] != null
+}
+
+/**
+ * Determines if the node is the first in the RTE AFTER the
+ * doc element.
+ *
+ * @param {Prosemirror.EditorState} state
+ * @return {Boolean} True if the node is the first in the RTE
+ */
+const getIsFirstNode = (state) => {
+  const { $anchor, anchor } = state.selection
+  let pos = anchor
+  if (state.selection instanceof TextSelection) {
+    pos = $anchor.before($anchor.depth)
+  }
+  return pos === 0
+}
+/**
+ * Determines if the node is the last in the RTE.
+ *
+ * @param {Prosemirror.EditorState} state
+ * @return {Boolean} True if the node is the last in the RTE
+ */
+const getIsLastNode = (state) => {
+  const { $anchor } = state.selection
+  let pos = $anchor.index(0)
+  if (state.selection instanceof TextSelection) {
+    pos = $anchor.before($anchor.depth)
+  }
+  return pos === state.doc.childCount - 1
+}
+
+/**
+ * Replaces the whole document with new content.
+ *
+ * @param {ProseMirror.State} state
+ * @param {string} newContent
+ * @param {Map} compliantTagNameMap
+ * @param {ProseMirror.View.Dispatch} dispatch
+ */
+const replaceWholeDocumentWithNewContent = (
+  state,
+  newContent,
+  compliantTagNameMap,
+  dispatch,
+  addToHistory,
+  removeTracking,
+  resetCursor,
+  disableNativeEvent,
+) => {
+  let tr = state.tr
+  const tmpElement = document.createElement('div')
+  const shimmed = getLegacyHTMLTextForProsemirror(
+    newContent,
+    state.config.schema,
+    compliantTagNameMap,
+  )
+  tmpElement.innerHTML = shimmed
+  const parsed = DOMParser.fromSchema(state.config.schema).parse(tmpElement, {
+    preserveWhitespace: 'full',
+  })
+  const allSelection = new AllSelection(state.doc)
+  if (!addToHistory) {
+    tr.setMeta('addToHistory', false)
+  }
+  if (removeTracking) {
+    tr.setMeta('removeFromTracking', true)
+  }
+  if (disableNativeEvent) {
+    tr.setMeta('disableNativeEvent', true)
+  }
+  tr.setSelection(allSelection).replaceSelectionWith(parsed)
+  if (resetCursor) {
+    const textSelection = TextSelection.create(state.doc, 1)
+    tr.setSelection(textSelection)
+  }
+  dispatch(tr)
+}
+
+/**
+ * Constructs a string representation of a DOM element using
+ * the browser APIs.
+ *
+ * @param {string} tag The tag of the element to be created.
+ * @param {string} innerHTML The contents of the element.
+ * @param {Object.<string>} attributes The attributes to set on the element.
+ * @return {String} The element markup as a string.
+ */
+const getElementMarkupAsString = (tag, innerHTML, attributes) => {
+  const el = document.createElement(tag)
+  if (attributes) {
+    for (let key in attributes) {
+      el.setAttribute(key, attributes[key])
+    }
+  }
+  el.innerHTML = innerHTML
+  return el.outerHTML
+}
+
+/**
+ * Closes popups at the same level or above the triggering event.
+ *
+ * @param {Event} evt DOM event that triggered a new popup to open.
+ */
+const closeLayeredPopups = (evt) => {
+  const enhancementSelector =
+    '.Popup[data-popup-source-class^="rte2-toolbar"],' +
+    '.Popup[data-popup-source-class*="RichTextElement"],' +
+    '.Popup[data-popup-source-class^="ProsemirrorEnhancementMenu-container-button"]'
+
+  const sourceEnhancementPopup = evt.target.closest(
+    '.Popup[data-popup-source-class*="objectId-create"],' +
+      '.Popup[data-popup-source-class*="ContentSelector-edit"],' +
+      '.Popup[data-popup-source-class*="RichTextElement"],' +
+      '.Popup[data-popup-source-class^="ProsemirrorEnhancementMenu-container-button"]',
+  )
+
+  if (sourceEnhancementPopup) {
+    const $siblingEnhancementPopups = $(sourceEnhancementPopup).nextAll(
+      enhancementSelector,
+    )
+    if ($siblingEnhancementPopups.length > 0) {
+      $siblingEnhancementPopups.popup('close')
+    }
+  } else if (evt.target.closest('.rte2-toolbar-submenu-2-items')) {
+    const $rteToolbarPopups = $(
+      '.Popup[data-popup-source-class^="rte2-toolbar"]',
+    )
+    if ($rteToolbarPopups.length > 0) $rteToolbarPopups.popup('close')
+  } else {
+    const $enhancementPopups = $(enhancementSelector)
+    if ($enhancementPopups.length > 0) $enhancementPopups.popup('close')
+  }
+}
+
+export {
+  closeLayeredPopups,
+  convertToHTML,
+  getState,
+  getActiveMarks,
+  getMarkState,
+  getPluginState,
+  getObjectValue,
+  getActiveNodes,
+  getIsFirstNode,
+  getIsLastNode,
+  replaceWholeDocumentWithNewContent,
+  getElementMarkupAsString,
+  getIsInAList,
+}

package/src/legacy/tool-ui/src/main/webapp/v4/theme/ColorRotator.js

@@ -0,0 +1 @@
+export { default } from '../../../../theme/ColorRotator'

package/src/legacy/tool-ui/src/main/webapp/v4/theme/Theme.less

@@ -0,0 +1,224 @@
+.Theme-toggle {
+  .IconButton;
+
+  --IconButton-name: 'brush';
+
+  color: transparent;
+  position: fixed;
+  right: calc(0px - var(--gap-s));
+  top: calc(0px - var(--gap-s));
+  z-index: 10000;
+
+  html:not(.is-lightHeader) & {
+    .IconButton.is-white;
+  }
+}
+
+.Theme {
+  .Text.is-xs;
+
+  background: var(--color-white);
+  bottom: 0;
+  box-shadow: 0 0 16px rgb(0 0 0 / 20%);
+  opacity: 0;
+  padding: var(--gap-l);
+  position: fixed;
+  right: 0;
+  transform: scaleY(0);
+  transform-origin: bottom center;
+  transition:
+    opacity var(--time-xs) var(--ease-in),
+    transform var(--time-s) var(--ease-out);
+  z-index: 1000;
+
+  &.is-open {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.Theme-close {
+  .IconButton;
+
+  --IconButton-name: 'close';
+
+  position: absolute;
+  right: var(--gap-m);
+  top: var(--gap-xs);
+}
+
+.Theme-presetBar {
+  margin: var(--gap-m) 0;
+}
+
+.Theme-presetLabel {
+  display: inline-block;
+}
+
+.Theme-preset {
+  .Link;
+
+  cursor: pointer;
+  display: inline-block;
+  margin-left: var(--gap-s);
+}
+
+.Theme-title {
+  margin: calc(-1 * var(--gap-m) - var(--gap-l)) calc(-1 * var(--gap-l)) 0;
+  z-index: unset;
+}
+
+.Theme .Message {
+  margin: 0 calc(-1 * var(--gap-l));
+}
+
+.Theme-saveButtons {
+  border-top: 1px solid var(--color-gray3);
+  margin-top: var(--gap-l);
+  padding-top: var(--gap-l);
+
+  button:not(:last-child) {
+    margin-right: var(--gap-l);
+  }
+}
+
+.CIG-row[data-field-name='cms.colors'] {
+  &.is-hidden {
+    display: none;
+  }
+}
+
+.Theme-options {
+  td {
+    padding: 0 var(--gap-s);
+  }
+
+  .Checkbox {
+    .Checkbox.is-toggle;
+  }
+}
+
+.Theme-colors {
+  td {
+    min-width: var(--gap-l);
+
+    input[type] {
+      width: 3em;
+    }
+  }
+
+  tr:not(:first-child) {
+    td {
+      &:first-child,
+      &:nth-child(2) {
+        padding-right: var(--gap-s);
+      }
+    }
+  }
+
+  .sp-replacer {
+    width: 10em;
+  }
+}
+
+.is-boxedInput {
+  .Checkbox {
+    padding: 0;
+  }
+
+  .ComboInput {
+    padding-left: var(--gap-s);
+
+    &::before {
+      border-width: 1px;
+    }
+  }
+
+  .ComboInput[aria-expanded='true'] {
+    &::before {
+      border-bottom-width: 1px;
+    }
+  }
+
+  input[data-previewable='true']:not([data-preview]),
+  input[data-previewable='true'][data-preview=''] {
+    + .ContentSelector-search {
+      border-width: 1px;
+      padding: calc(var(--gap-s) - 1px);
+      padding-right: calc(var(--gap-m) + var(--Icon-size) - 1px);
+    }
+  }
+
+  .ContentEdit-publish,
+  .ContentEdit-previewControls,
+  .ContentEdit-previewTypes {
+    .DateTimeInput::before {
+      border-width: 0;
+    }
+
+    @media (@mq-s) {
+      .DateTimeInput {
+        &::before {
+          border-width: 1px;
+        }
+
+        &.is-empty {
+          padding-left: 0;
+
+          &::before {
+            border-width: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .DateTimeInput {
+    @media (@mq-s) {
+      padding-left: var(--gap-s);
+
+      &::before {
+        border-width: 1px;
+      }
+    }
+  }
+
+  .ProseMirror-fullscreen-container-header .InputWrapper input[type='text'] {
+    border-bottom-width: 1px;
+  }
+
+  .SearchInput {
+    label {
+      left: calc(1px + var(--gap-s));
+    }
+
+    input[type='text'] {
+      padding-left: calc(1px + var(--gap-s) + var(--Icon-size) + var(--gap-xs));
+    }
+  }
+
+  .FormFilter-container,
+  .SearchInput.is-filter {
+    label {
+      left: calc(var(--gap-l) / 2);
+    }
+
+    input[type='text'] {
+      padding-left: calc(var(--Icon-size) + var(--gap-xs) - 1px);
+    }
+  }
+
+  .TextInput {
+    border-width: 1px;
+    padding: calc(var(--gap-s) - 1px);
+  }
+
+  .Calendar-time {
+    .ComboInput {
+      &,
+      .ComboInput-filter {
+        width: calc(2em + var(--gap-s) * 2 + var(--Icon-size) + 1px);
+      }
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/translation/Translation.less

@@ -0,0 +1,114 @@
+.UnsuccessfulTranslation-link {
+  margin-left: 0;
+}
+
+.TranslationReadOnlyTargetLocales {
+  > li {
+    padding-bottom: 5px;
+  }
+}
+
+.TranslationsTab-actionsToggle {
+  .IconButton;
+
+  --IconButton-name: 'more_horiz';
+
+  &.is-active {
+    .IconButton.is-focus;
+
+    --IconButton-name: 'close';
+  }
+}
+
+.TranslationsTab-actions {
+  .Dropdown;
+
+  [role='menuitem'] {
+    .Dropdown-item;
+  }
+}
+
+.TranslationsTab-actions.is-open {
+  .Dropdown.is-open;
+}
+
+.TranslationFrame {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--gap-xl);
+  min-height: 800px;
+
+  .LinkTable {
+    width: calc(100% - var(--gap-l) * 2);
+
+    thead th:first-child {
+      padding-top: 0;
+      vertical-align: top;
+    }
+
+    td:last-child {
+      padding-bottom: 0;
+      padding-top: 0;
+      vertical-align: middle;
+    }
+  }
+}
+
+.TranslationFrame-controls {
+  .DashboardWidget-filters;
+
+  justify-content: space-between;
+  margin-left: calc(0px - var(--gap-xl));
+  margin-right: calc(0px - var(--gap-xl));
+  margin-top: var(--Widget-padding);
+  overflow-y: scroll;
+  width: unset;
+}
+
+.TranslationFrame-filters {
+  display: flex;
+  flex: none;
+  flex-direction: row;
+  flex-grow: 2;
+  margin-left: 10px;
+}
+
+.TranslationFrame-sorts {
+  flex: none;
+  padding-right: 10px;
+}
+
+.TranslationTable-updated {
+  > b {
+    color: var(--color-orange4);
+  }
+}
+
+.TranslationTable-errors {
+  color: var(--color-red5);
+
+  a {
+    color: var(--color-red5);
+  }
+}
+
+.TranslationTable-errorLabel {
+  color: var(--color-gray6);
+  font-style: italic;
+}
+
+.TranslationTable-source {
+  &:not(:last-child) {
+    border-bottom: 5px solid;
+  }
+}
+
+.TranslationTable-sourceLabel {
+  color: var(--color-gray6);
+  font-style: italic;
+}
+
+.TranslationTable-statusLabel {
+  color: var(--color-gray6);
+  font-style: italic;
+}

package/src/legacy/tool-ui/src/main/webapp/v4/util/debounce.js

@@ -0,0 +1 @@
+export { default } from '../../../../util/debounce'

package/src/legacy/tool-ui/src/main/webapp/v4/util/getComponentKey.js

@@ -0,0 +1 @@
+export { default } from '../../../../util/getComponentKey'

package/src/legacy/tool-ui/src/main/webapp/v4/util/noise.js

@@ -0,0 +1 @@
+export { default } from '../../../../util/noise'

package/src/legacy/tool-ui/src/main/webapp/v4/util/repaint.js

@@ -0,0 +1 @@
+export { default } from '../../../../util/repaint'

package/src/legacy/tool-ui/src/main/webapp/v4/util/storage.js

@@ -0,0 +1 @@
+export { default } from '../../../../util/storage'