@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/Reset.less

@@ -0,0 +1,373 @@
+@import (css) url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
+@import (css)
+  url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1');
+@import (reference) './Icon.less';
+@import (reference) './Text.less';
+
+@font-face {
+  font-family: 'Noto Sans';
+  src: local('Helvetica Neue'), local('Arial');
+  unicode-range: U+60;
+}
+
+@mq-s: ~'min-width: 577px';
+@mq-m: ~'min-width: 769px';
+@mq-l: ~'min-width: 993px';
+@mq-xl: ~'min-width: 1201px';
+@mq-xxl: ~'min-width: 1681px';
+
+:root {
+  .Icon.is-m;
+  .Text.is-m;
+
+  --borderWidth-thin: 1px;
+  --borderWidth-thick: 3px;
+  --fontFamily-monospace: 'Noto Mono', monospace;
+  --fontFamily-sansSerif: 'Noto Sans', sans-serif;
+  --fontFamily-serif: 'Noto Serif', serif;
+  --fontSize-xs: 10px;
+  --fontSize-s: 12px;
+  --fontSize-m: 14px;
+  --fontSize-l: 16px;
+  --fontSize-xl: 18px;
+  --fontSize-xxl: 30px;
+  --gap-xs: 3px;
+  --gap-s: 6px;
+  --gap-m: 11px;
+  --gap-l: 18px;
+  --gap-xl: 30px;
+  --iconSize-xs: 18px;
+  --iconSize-s: 20px;
+  --iconSize-m: 24px;
+  --iconSize-l: 30px;
+  --iconSize-xl: 36px;
+  --lineHeight-xs: 14px;
+  --lineHeight-s: 18px;
+  --lineHeight-m: 20px;
+  --lineHeight-l: 24px;
+  --lineHeight-xl: 26px;
+  --lineHeight-xxl: 44px;
+  --shadow-1: 0 0 var(--gap-s) 0 rgb(var(--rgb-black) / 13%);
+  --shadow-2: 0 0 13px 0 rgb(var(--rgb-black) / 21%);
+  --shadow-3: 0 0 21px 0 rgb(var(--rgb-black) / 34%);
+  --shadow-4: 0 0 34px 0 rgb(var(--rgb-black) / 55%);
+  --time-xs: 0.15s;
+  --time-s: 0.25s;
+  --time-m: 0.35s;
+  --time-l: 0.5s;
+  --time-xl: 1s;
+
+  // Cubic: https://easings.net/
+  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-outBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@media (@mq-xl) {
+  :root:not(.is-compact) {
+    --fontSize-xs: 12px;
+    --fontSize-s: 14px;
+    --fontSize-m: 16px;
+    --fontSize-l: 20px;
+    --fontSize-xl: 24px;
+    --fontSize-xxl: 40px;
+    --gap-xs: 4px;
+    --gap-s: 8px;
+    --gap-m: 14px;
+    --gap-l: 24px;
+    --gap-xl: 40px;
+    --iconSize-s: 24px;
+    --iconSize-m: 28px;
+    --iconSize-l: 36px;
+    --iconSize-xl: 48px;
+    --lineHeight-xs: 18px;
+    --lineHeight-s: 20px;
+    --lineHeight-m: 24px;
+    --lineHeight-l: 28px;
+    --lineHeight-xl: 34px;
+    --lineHeight-xxl: 58px;
+  }
+}
+
+*,
+*::before,
+*::after {
+  border: 0;
+  box-sizing: border-box;
+  color: inherit;
+  font-family: inherit;
+  font-size: 100%;
+  font-style: inherit;
+  // For accurate RTE cursor position calculation.
+  font-variant-ligatures: no-common-ligatures;
+  font-weight: inherit;
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:focus {
+  outline: none;
+}
+
+:not(input, textarea, .ProseMirror, .EIG-title, .RCIG-title):focus-visible,
+input[type='range']:focus-visible,
+.Checkbox:focus-visible,
+.FileInput:has(:focus-visible),
+.EIG-item:has(.EIG-title:focus-visible),
+.RCIG-item:has(.RCIG-title:focus-visible) {
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 4px var(--color-dominant5);
+}
+
+.inputContainer input[type='range']:focus-visible {
+  box-shadow: none;
+}
+
+::selection {
+  background: var(--color-dominant5);
+  color: var(--color-white);
+}
+
+abbr {
+  border-bottom: 1px dotted var(--color-gray4);
+}
+
+body {
+  background: var(--color-gray2);
+  color: var(--color-black);
+  font-family: var(--fontFamily-sansSerif);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  word-wrap: break-word;
+}
+
+button,
+input {
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+}
+
+input[type='radio'] {
+  -webkit-appearance: none;
+  border-width: 0;
+  padding: 0;
+  vertical-align: middle;
+  width: auto;
+
+  &::after {
+    .Icon;
+
+    --Icon-fill: 'FILL' 0;
+
+    content: 'radio_button_unchecked';
+    display: block;
+    top: 0;
+  }
+
+  &:checked::after {
+    content: 'radio_button_checked';
+  }
+
+  &:focus {
+    background: transparent;
+    border-width: 0;
+    padding: 0;
+  }
+}
+
+input[type='range'] {
+  -webkit-appearance: none;
+  border-width: 0;
+  height: var(--Text-height);
+  padding: 0;
+
+  .track() {
+    background: var(--color-gray4);
+    border-radius: calc(var(--Text-height) / 4);
+    cursor: pointer;
+    height: calc(var(--Text-height) / 4);
+    width: 100%;
+  }
+
+  &::-webkit-slider-runnable-track {
+    .track();
+  }
+
+  &::-moz-range-track {
+    .track();
+  }
+
+  .thumb() {
+    background: var(--color-gray5);
+    border-radius: var(--Text-height);
+    cursor: pointer;
+    height: var(--Text-height);
+    margin-top: calc(0px - var(--Text-height) / 2 + var(--Text-height) / 8);
+    width: var(--Text-height);
+  }
+
+  &::-webkit-slider-thumb {
+    .thumb();
+
+    -webkit-appearance: none;
+  }
+
+  &::-moz-range-thumb {
+    .thumb();
+
+    border-width: 0;
+  }
+
+  &:focus {
+    background: transparent;
+    border-width: 0;
+    padding: 0;
+
+    .track-focus() {
+      background: var(--color-dominant4);
+    }
+
+    &::-webkit-slider-runnable-track {
+      .track-focus();
+    }
+
+    &::-moz-range-track {
+      .track-focus();
+    }
+
+    .thumb-focus() {
+      background: var(--color-dominant5);
+    }
+
+    &::-webkit-slider-thumb {
+      .thumb-focus();
+    }
+
+    &::-moz-range-thumb {
+      .thumb-focus();
+    }
+  }
+}
+
+figure {
+  display: inline-table;
+  max-height: 30vh;
+  max-width: 100%;
+
+  iframe,
+  img {
+    display: block;
+    max-height: 100%;
+    max-width: 100%;
+  }
+
+  figcaption {
+    caption-side: top;
+    color: var(--color-gray5);
+    display: table-caption;
+    font-style: italic;
+    padding-top: var(--gap-xs);
+
+    &:last-child {
+      caption-side: bottom;
+    }
+  }
+}
+
+h2 {
+  .Text.is-s;
+
+  font-weight: bold;
+  margin: var(--gap-l) 0;
+}
+
+html {
+  height: 100%;
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+}
+
+input:-webkit-autofill {
+  &,
+  &:active,
+  &:hover,
+  &:focus {
+    // Workaround for not being able to set the background directly.
+    -webkit-appearance: none !important;
+    -webkit-box-shadow: 0 0 0 var(--Text-height) var(--color-yellow1) inset !important;
+    -webkit-text-fill-color: var(--color-black) !important;
+  }
+
+  // Workaround for Chrome not respecting the current font styling.
+  &::first-line {
+    font-family: var(--fontFamily-sansSerif) !important;
+    font-size: var(--fontSize-m) !important;
+  }
+}
+
+mark {
+  background: var(--color-yellow2);
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+select {
+  -webkit-appearance: none;
+  background: transparent;
+  border-bottom: 1px solid var(--Input-borderColor);
+  border-radius: 0;
+  height: calc(var(--gap-s) * 2 + var(--Text-height));
+  max-width: 100%;
+  padding: var(--gap-s) calc(var(--gap-s) * 2 + var(--Icon-size))
+    calc(var(--gap-s) - 1px) 0;
+}
+
+table {
+  border: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+th {
+  text-align: left;
+}
+
+template {
+  display: none !important;
+}
+
+textarea {
+  display: block;
+}
+
+video {
+  max-width: 100%;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Legacy.
+.frame.loading {
+  visibility: hidden;
+}

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

@@ -0,0 +1,50 @@
+.Revision {
+  --Revision-revisionColor: transparent;
+  --Revision-revisionActiveColor: transparent;
+  --Revision-revisionTextColor: var(--color-black);
+  --Revision-revisionBackgroundColor: transparent;
+
+  &.is-live,
+  .Message.is-live {
+    --Revision-revisionColor: var(--color-green5);
+    --Revision-revisionActiveColor: var(--color-green6);
+    --Revision-revisionTextColor: var(--color-black);
+    --Revision-revisionBackgroundColor: var(--color-green1);
+  }
+
+  &.is-archived,
+  .Message.is-archived {
+    --Revision-revisionColor: var(--color-red6);
+    --Revision-revisionActiveColor: var(--color-red6);
+    --Revision-revisionTextColor: var(--color-white);
+    --Revision-revisionBackgroundColor: var(--color-red3);
+  }
+
+  &.is-updated,
+  .Message.is-updated {
+    --Revision-revisionColor: var(--color-green3);
+    --Revision-revisionActiveColor: var(--color-green4);
+    --Revision-revisionTextColor: var(--color-black);
+    --Revision-revisionBackgroundColor: var(--color-green1);
+  }
+
+  &.is-draft,
+  &.is-scheduled,
+  .Message.is-draft,
+  .Message.is-scheduled {
+    --Revision-revisionColor: var(--color-yellow3);
+    --Revision-revisionActiveColor: var(--color-yellow4);
+    --Revision-revisionTextColor: var(--color-black);
+    --Revision-revisionBackgroundColor: var(--color-yellow1);
+  }
+
+  &.is-workflow,
+  .Message.is-workflow,
+  &.is-progress,
+  .Message.is-progress {
+    --Revision-revisionColor: var(--color-gray6);
+    --Revision-revisionActiveColor: var(--color-gray7);
+    --Revision-revisionTextColor: var(--color-black);
+    --Revision-revisionBackgroundColor: var(--color-gray1);
+  }
+}

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

@@ -0,0 +1,32 @@
+.richtext {
+  visibility: hidden;
+}
+
+.ProseMirror-loader {
+  border: 1px solid var(--Input-borderColor);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 10;
+
+  &.hide {
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.25s var(--ease-out);
+  }
+
+  &::after {
+    .Icon;
+
+    animation: spin var(--time-xl) infinite ease-in-out;
+    color: var(--color-black);
+    content: 'autorenew';
+    left: calc(50% - var(--Icon-size) / 2);
+    position: absolute;
+    top: calc(50% - var(--Icon-size) / 2);
+    z-index: 10;
+  }
+}

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

@@ -0,0 +1,154 @@
+import onFind from './dom/onFind'
+import create from './dom/create'
+import onVisible from './dom/onVisible'
+
+// Lazily loads the rich text editor.
+
+// To prevent FOUC, we have hidden the textarea with
+// css and are adding a 'loading' div that holds a spinner
+// to indicate the RTE is loading. Once loaded, the RTE
+// code will look for this element and hide it with css.
+onFind('.richtext', (element) => {
+  const parent = element.closest('div')
+  parent.style.position = 'relative'
+  // The textarea will be moved when the ProseMirror code
+  // runs, so we can't rely on it to maintain the height
+  // of the 'fake' rte container and its parent. The 'fake'
+  // rte container is positioned absolute, so we need a
+  // min-height on the parent to maintain the proper
+  // vertical distance between it and the next field.
+  const height = element.getBoundingClientRect().height
+  const loader = create('div', { className: 'ProseMirror-loader' })
+  // const fakeProseMirror = document.createElement('div')
+  // fakeProseMirror.className = 'ProseMirror-fake'
+  loader.style.minHeight = `${height}px`
+  parent.appendChild(loader)
+})
+
+/**
+ * Some projects are using characters such as colons and periods in their tag names,
+ * but while that is xml-compliant, that is not HTML-5 compliant.
+ * As such, some of ProseMirror's code that relies on methods such as
+ * `element.matches` https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
+ * fails, so we need to replace those characters.
+ * Also see: https://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#syntax-tag-name
+ *
+ * We put the non-compliant characters back at serializtion time.
+ */
+const compliantTagNameMap = new Map()
+
+RICH_TEXT_ELEMENTS.forEach((obj) => {
+  let tagName = obj.tag
+  let compliantTagName = ''
+  const regex = /[\u0030-\u0039\u0061-\u007A\u0041-\u005A-]/g
+  ;[...tagName].forEach((char) => {
+    let validChar = char
+    if (!char.match(regex)) {
+      validChar = `--${char.charCodeAt(0)}--`
+    }
+    compliantTagName = compliantTagName + validChar
+  })
+  compliantTagNameMap.set(tagName, compliantTagName)
+})
+
+window.RICH_TEXT_ELEMENTS_PM = RICH_TEXT_ELEMENTS.map((obj) => {
+  obj.tag = compliantTagNameMap.get(obj.tag)
+  if (obj.context) {
+    const newContext = []
+    obj.context.forEach((item) => {
+      let newItem = item
+      if (newItem) {
+        newItem = compliantTagNameMap.get(item)
+      }
+      newContext.push(newItem)
+    })
+    obj.context = newContext
+  }
+  return obj
+})
+
+onVisible('.richtext', async (element) => {
+  const { RTE } = await import(
+    /* webpackChunkName: 'RTEProseMirror' */ './rte/ProseMirror'
+  )
+  const customMenuType = element.getAttribute('data-rte-toolbar')
+  let customMenuBar = RICH_TEXT_TOOLBARS[customMenuType]
+
+  // Remove AI buttons from toolbar if AI is disabled
+  if (!window.BRIGHTSPOT?.ai?.AI_CHAT_ENABLED) {
+    const aiButtons = ['rte2-toolbar-track-ai', 'rte2-toolbar-ai-inline']
+    customMenuBar = customMenuBar.filter(
+      (item) => !aiButtons.includes(item.className),
+    )
+  }
+
+  const numLines = element.getAttribute('data-rte-lines')
+  const isInline = element.getAttribute('data-inline') === 'true'
+  const userLabel = element.getAttribute('data-user')
+  const userId = element.getAttribute('data-user-id')
+  let richTextElementTags = element.getAttribute('data-rte-tags')
+  if (richTextElementTags) {
+    try {
+      const richTextElementTagsJSON = JSON.parse(richTextElementTags)
+      richTextElementTags = richTextElementTagsJSON.map((tag) => {
+        return compliantTagNameMap.get(tag)
+      })
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
+  const fieldName = element.getAttribute('name')
+  const isCollab = element.getAttribute('data-collab') === 'true'
+  const rte = new RTE(
+    element,
+    customMenuBar,
+    isInline,
+    userLabel,
+    userId,
+    richTextElementTags,
+    fieldName,
+    isCollab,
+    compliantTagNameMap,
+    parseInt(numLines, 10) || 1,
+    RICH_TEXT_ELEMENTS_PM,
+  )
+  rte.init()
+
+  // Expose RTE instance for Delivery.
+  element.rte = rte
+  element.dispatchEvent(
+    new CustomEvent('brightspot.rte.init', { bubbles: true, detail: { rte } }),
+  )
+})
+onFind('.RichTextEditor-uploadComplete', (element) => {
+  let html = element.dataset.html
+  if (!html) {
+    return
+  }
+  const $element = $(element)
+  const $source = $element.popup('source')
+  if (!$source) {
+    return
+  }
+  const dataEventId = $source.attr('data-event-id')
+  html = html.replace(/<br>/g, '')
+  const tmpDiv = document.createElement('div')
+  tmpDiv.innerHTML = html
+  const enhancements = tmpDiv.children
+  const enhancementData = []
+  ;[...enhancements].forEach((enhancement) => {
+    const attrsMap = [...enhancement.attributes]
+    const attrs = attrsMap.reduce((prev, next) => {
+      prev[next.name] = next.value
+      return prev
+    }, {})
+    enhancementData.push({
+      label: enhancement.innerText,
+      data: attrs,
+      tag: enhancement.tagName.toLowerCase(),
+    })
+  })
+  PubSub.publish(dataEventId, enhancementData)
+  $element.popup('close')
+})