@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.2

package/src/legacy/tool-ui/src/Diff.ts

@@ -0,0 +1,89 @@
+import Cookies from 'js-cookie'
+import create from './dom/create'
+import onFind from './dom/onFind'
+type DiffFormPostFields = 'left' | 'right'
+
+interface DiffFormPostData extends FormData {
+  append(
+    name: DiffFormPostFields,
+    value: string | Blob,
+    fileName?: string,
+  ): void
+}
+
+// Closes Diff popup when clicking title
+onFind('.Diff-title', (element: HTMLElement) => {
+  element.focus()
+  element.addEventListener('click', () => {
+    element
+      .closest<HTMLElement>('.Popup-content')
+      ?.querySelector<HTMLElement>('.Popup-close')
+      ?.click()
+  })
+})
+
+// Rich Text Element Diff Popup
+onFind('[data-diff-state-id]', (element: HTMLElement) => {
+  const id = element.dataset.diffStateId
+  const container = element.closest<HTMLElement>('.Diff-container')
+  const diffs = container?.querySelectorAll<HTMLElement>(
+    `[data-diff-state-id="${id}"]`,
+  )
+
+  if (diffs?.length) {
+    const diffsLeft = diffs[0]
+    const diffsRight = diffs[1]
+    const diffsLeftDataset = diffsLeft?.dataset
+    const diffsRightDataset = diffsRight?.dataset
+    const diffLeftState = diffsLeftDataset?.diffState
+    const diffRightState = diffsRightDataset?.diffState
+
+    // If the diff pair does not exist remove the attribute from the existing one
+    if (!diffLeftState) {
+      diffs[1]?.removeAttribute('data-diff-state')
+      return
+    } else if (!diffRightState) {
+      diffs[0]?.removeAttribute('data-diff-state')
+      return
+    }
+
+    element.addEventListener('click', async (evt) => {
+      // Closing the diff popup if one is already open to prevent close button weirdness
+      $('.is-diff').popup('close')
+      // If one side has no change the diffs array value can be undefined.  We are checking for that here.
+      const headers = new Headers()
+      const cookie = Cookies.get('bsp.csrf')
+
+      if (cookie) {
+        headers.append('Brightspot-CSRF', cookie)
+      }
+
+      const body: DiffFormPostData = new FormData()
+      body.append('left', diffLeftState)
+      body.append('right', diffRightState)
+
+      try {
+        const response = await fetch('/cms/diffRevision', {
+          method: 'POST',
+          headers,
+          body,
+        })
+        const itemHtml = await response.text()
+
+        document.getElementById('rtediff')?.remove()
+
+        const container = create('div')
+        container.id = 'rtediff'
+        document.body.appendChild(container)
+        container.innerHTML = itemHtml
+
+        const jqueryContainer = $(container).popup()
+        // Attaching marker class to popup for cleanup if the user clicks on a clickable diff field
+        jqueryContainer.popup('container').addClass('is-diff')
+        jqueryContainer.popup('open')
+      } catch (err) {
+        console.error(err)
+      }
+    })
+  }
+})

package/src/legacy/tool-ui/src/Downloads.css

@@ -0,0 +1,7 @@
+.downloadableItems {
+  .action-upload,
+  .ContentSummary-info,
+  .objectId-edit {
+    @apply !hidden;
+  }
+}

package/src/legacy/tool-ui/src/Dropdown.css

@@ -0,0 +1,63 @@
+.Dropdown {
+  --Dropdown-markerSize: 0px;
+  --Link-hoverDecoration: none;
+
+  @apply invisible fixed z-[2000000] max-h-[45dvh] min-w-[240px] max-w-[45vw] origin-top scale-y-0 overflow-auto rounded-lg border border-solid border-gray-100 bg-white py-2 opacity-0 shadow-lg transition-[opacity,_transform,_visibility] duration-300;
+
+  &[data-tether-rx='l'] {
+    @apply /*rtl:ignore*/ left-[--Tether-rl];
+  }
+
+  &[data-tether-rx='r'] {
+    @apply /*rtl:ignore*/ right-[calc(100vw-var(--Tether-rl)-var(--Tether-rw))];
+  }
+
+  &[data-tether-ry='t'] {
+    @apply top-[calc(var(--Tether-rt)+var(--Tether-rh)+var(--Dropdown-markerSize))];
+
+    &:not(.ComboInput-list) {
+      @apply max-h-[calc(100dvh-var(--Tether-rt)-var(--Tether-rh)-theme(spacing.xl))];
+    }
+  }
+
+  &[data-tether-ry='b'] {
+    @apply bottom-[calc(100dvh-var(--Tether-rt)+var(--Dropdown-markerSize))] origin-bottom;
+
+    &:not(.ComboInput-list) {
+      @apply max-h-[calc(var(--Tether-rt)-var(--Page-headerBottom)-theme(spacing.xl))];
+    }
+
+    [popover] & {
+      @apply bottom-[calc(100%-var(--Tether-rt)+var(--Dropdown-markerSize))];
+    }
+  }
+
+  &:where(.ComboInput-list) {
+    --Dropdown-markerSize: 4px;
+  }
+}
+
+.Dropdown-is-open {
+  @apply visible transform-none opacity-100 empty:hidden;
+}
+
+.Dropdown-item {
+  @apply block w-full cursor-pointer bg-transparent px-4 py-2 text-left text-sm font-normal text-gray-700 no-underline focus:ring-offset-0 focus:[&_a]:ring-offset-0 hover:bg-gray-100 hover:text-gray-700 focus:rounded-none focus:bg-primary-50 focus:text-gray-700 focus:ring-0 [&_a]:font-normal [&_a]:text-gray-700 [&_a]:no-underline focus:[&_a]:rounded-none focus:[&_a]:ring-0;
+
+  &[disabled] {
+    @apply pointer-events-none text-gray-300 [&_a]:text-gray-300;
+  }
+}
+
+/* Make sure the click target of inline elements take up the whole width of the dropdown item. */
+.Dropdown-item > :where(span, a) {
+  @apply block;
+}
+
+.Dropdown-item-selected {
+  @apply flex items-center after:btu-icon after:btu-icon-check after:ml-auto;
+}
+
+.Dropdown-button {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-ellipsis;
+}

package/src/legacy/tool-ui/src/EditFieldUpdateCache.ts

@@ -0,0 +1,129 @@
+interface ContentData {
+  contentId: string
+  userId: string
+  [key: string]: any
+}
+
+interface Cache {
+  [key: string]: ContentData[]
+}
+
+declare global {
+  interface Window {
+    DEBUG_EDIT_FIELD_UPDATE_CACHE: boolean
+  }
+}
+
+export default (function () {
+  let cache: Cache = {}
+  let puts = 0
+  let gets = 0
+  let hits = 0
+
+  function log(...args: any[]) {
+    if (
+      !window.DEBUG_EDIT_FIELD_UPDATE_CACHE ||
+      typeof console === 'undefined'
+    ) {
+      return
+    }
+
+    const newArguments = Array.prototype.slice.call(args, 0)
+    newArguments[0] = '[EditFieldUpdateCache] ' + newArguments[0]
+    newArguments.push('puts', puts)
+    newArguments.push('gets', gets)
+    newArguments.push('hits', hits)
+    newArguments.push(
+      (gets === 0 || hits === 0
+        ? 0.0
+        : (gets === 0 ? 1.0 : hits === 0 ? 0.0 : hits / gets) * 100) + '%',
+    )
+    newArguments.push('entries', Object.keys(cache).length)
+
+    console.log(...newArguments)
+  }
+
+  return {
+    init: function (key: string) {
+      if (!cache[key]) {
+        cache[key] = []
+        log('%cinit', 'color: blue', key)
+      }
+    },
+
+    put: function (data: ContentData) {
+      if (!data) {
+        return
+      }
+
+      const contentId = data.contentId
+      if (!contentId) {
+        return
+      }
+
+      if (cache[contentId]) {
+        puts += 1
+        log('%cput', 'color: blue', contentId)
+
+        const userId = data.userId
+        let contentData = cache[contentId]
+        let userDataIndex: number | undefined = undefined
+
+        if (!contentData) {
+          contentData = []
+          cache[contentId] = contentData
+        }
+
+        let index = 0
+        for (const content of contentData) {
+          if (content.userId === userId) {
+            userDataIndex = index
+            break
+          }
+          index++
+        }
+
+        if (userDataIndex !== undefined && userDataIndex >= 0) {
+          contentData.splice(userDataIndex, 1, data)
+        } else {
+          contentData.push(data)
+        }
+      } else {
+        log('%cput (skipped)', 'color: blue', contentId)
+      }
+    },
+
+    get: function (contentId: string): ContentData[] {
+      gets += 1
+      const contentData = cache[contentId]
+
+      if (contentData) {
+        hits += 1
+        log('%cget (hit)', 'color: green', contentId)
+      } else {
+        log('%cget (miss)', 'color: red', contentId)
+      }
+
+      return contentData
+    },
+
+    invalidate: function (contentIds: string[]) {
+      if (contentIds.length < 1) {
+        return
+      }
+
+      // clean out unused cache entries before making call to restore
+      const cleanCache: Cache = {}
+
+      contentIds.forEach(function (contentId) {
+        const contentData = cache[contentId]
+        if (contentData) {
+          cleanCache[contentId] = contentData
+        }
+      })
+
+      cache = cleanCache
+      log('%cinvalidate', 'color: blue', 'keep: ' + contentIds)
+    },
+  }
+})()

package/src/legacy/tool-ui/src/EmbeddedInputGroup/README.md

@@ -0,0 +1,3 @@
+# EmbeddedInputGroup Web Component
+
+This is a web component that resembles an EIG.

package/src/legacy/tool-ui/src/EmbeddedInputGroup/index.ts

@@ -0,0 +1,189 @@
+import { LitElement, nothing } from 'lit'
+import { customElement, queryAsync } from 'lit/decorators.js'
+import { EventEmitterMixin } from '../EventEmitterMixin'
+import create from '../dom/create'
+import onFind from '../dom/onFind'
+import getComponentKey from '../util/getComponentKey'
+
+const ls = window.localStorage
+const tooltips = window.BRIGHTSPOT?.ui.tooltips
+
+@customElement('btu-eig')
+export default class EmbeddedInputGroup extends EventEmitterMixin(LitElement) {
+  @queryAsync('.EIG-item')
+  _eigItem?: Promise<HTMLElement>
+
+  @queryAsync('.EIG-title')
+  _title?: Promise<HTMLElement>
+
+  @queryAsync('.removeButton')
+  _removeButton?: Promise<HTMLElement>
+
+  connectedCallback(): void {
+    super.connectedCallback()
+
+    this.initializeEigItem()
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+
+    this._removeButton?.then((removeButton) => {
+      removeButton?.removeEventListener('click', (evt) => {
+        this._removeItem(evt)
+      })
+    })
+
+    this._title?.then((title) => {
+      title?.removeEventListener('click', () => {
+        this._eigToggle()
+      })
+
+      title?.removeEventListener('keydown', ({ key }) => {
+        if (key === 'Enter' || key === 'Space' || key === ' ') {
+          event?.preventDefault()
+          this._eigToggle()
+        }
+      })
+    })
+  }
+
+  private _eigToggle = () => {
+    this._eigItem?.then((eigItem) => {
+      if (eigItem) {
+        const itemClassList = eigItem.classList
+        if (itemClassList.contains('is-removing')) return
+        itemClassList.toggle('is-collapsed')
+        eigItem.querySelector('.CIG-large')?.toggleAttribute('hidden')
+        const associatedDataField = eigItem.closest<HTMLElement>('[data-field]')
+        if (associatedDataField) {
+          const key = getComponentKey(associatedDataField, 'data-field')
+
+          if (key) {
+            if (ls.getItem(key)) {
+              ls.removeItem(key)
+            } else {
+              ls.setItem(key, '1')
+            }
+          }
+        }
+      }
+    })
+  }
+
+  private _removeItem = (evt: Event) => {
+    const target = evt.target
+    this._eigItem?.then((eigItem) => {
+      if (eigItem) {
+        const eigLiveRegion = eigItem.querySelector('.screen-reader-only')
+        if (eigItem.classList.toggle('is-removing')) {
+          eigItem.querySelector('.CIG-large')?.setAttribute('hidden', '')
+          eigItem
+            .querySelectorAll('input, textarea, select')
+            .forEach((input) => input.setAttribute('disabled', ''))
+
+          if (target instanceof HTMLElement) {
+            target.title = tooltips.restore
+            target.setAttribute('aria-label', tooltips.restore)
+            if (eigLiveRegion) eigLiveRegion.textContent = tooltips?.remove
+          }
+        } else {
+          if (!eigItem.classList.contains('is-collapsed')) {
+            eigItem.querySelector('.CIG-large')?.removeAttribute('hidden')
+          }
+          eigItem
+            .querySelectorAll('input, textarea, select')
+            .forEach((input) => input.removeAttribute('disabled'))
+
+          if (target instanceof HTMLElement) {
+            target.title = tooltips.remove
+            target.setAttribute('aria-label', tooltips.remove)
+            if (eigLiveRegion) eigLiveRegion.textContent = tooltips?.restore
+          }
+        }
+      }
+    })
+  }
+
+  firstUpdated(): void {
+    this.emit('btu-eig-ready')
+  }
+
+  createRenderRoot() {
+    return this
+  }
+
+  initializeEigItem() {
+    this._eigItem?.then((eigItem) => {
+      if (eigItem) {
+        const associatedDataField = eigItem.closest<HTMLElement>('[data-field]')
+        const itemClassList = eigItem.classList
+        let key = null
+
+        // Check if item is collapsed previously
+        if (associatedDataField) {
+          key = getComponentKey(associatedDataField, 'data-field')
+          if (key && ls.getItem(key)) {
+            itemClassList.add('is-collapsed')
+            eigItem.querySelector('.CIG-large')?.setAttribute('hidden', '')
+          }
+        }
+      } else {
+        // No EIG item has been added yet (i.e., Add Module) so monitor for it.
+        onFind(this, '.EIG-item', (eigItem: HTMLElement) => {
+          const title = eigItem.querySelector<HTMLElement>('.EIG-title')
+          const removeButton =
+            eigItem.querySelector<HTMLElement>('.removeButton')
+          this.titleAddEventListeners(title)
+          this.removeButtonAddEventListeners(removeButton)
+        })
+      }
+    })
+
+    this._title?.then((title) => {
+      this.titleAddEventListeners(title)
+    })
+
+    this._removeButton?.then((removeButton) => {
+      this.removeButtonAddEventListeners(removeButton)
+    })
+  }
+
+  titleAddEventListeners(title: HTMLElement | null) {
+    if (!title) return
+    title.addEventListener('click', () => {
+      this._eigToggle()
+    })
+
+    title.addEventListener('keydown', (event) => {
+      const { key } = event
+      if (key === 'Enter' || key === 'Space' || key === ' ') {
+        event.preventDefault()
+        this._eigToggle()
+      }
+    })
+  }
+
+  removeButtonAddEventListeners(removeButton: HTMLElement | null) {
+    if (!removeButton) return
+    const eigLiveRegion = create('span', {
+      class: 'screen-reader-only',
+      'aria-live': 'polite',
+    })
+    removeButton.after(eigLiveRegion)
+
+    removeButton.addEventListener('click', (evt) => {
+      this._removeItem(evt)
+    })
+  }
+
+  render() {
+    return nothing
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'btu-eig': EmbeddedInputGroup
+  }
+}

package/src/legacy/tool-ui/src/EmbeddedInputGroup.css

@@ -0,0 +1,75 @@
+.EIG {
+  @apply relative my-[theme(spacing.2)] w-full;
+}
+
+.EIG:has(.EIG-item) {
+  @apply overflow-clip rounded-lg border border-gray-200 [overflow-clip-margin:content-box];
+}
+
+.EIG-item {
+  @apply flex w-full flex-wrap items-center gap-x-2 bg-white hover:bg-gray-100;
+}
+
+.EIG-item:where(.is-removing) {
+  @apply bg-error-50;
+}
+
+.EIG-item:where(.is-collapsed, .is-removing) {
+  .EIG-title::after {
+    @apply btu-icon-chevron-down;
+  }
+}
+
+/* The active/expanded state */
+.EIG-item:where(:not(.is-collapsed, .is-removing)) {
+  @apply bg-primary-50;
+  .EIG-title {
+    @apply text-primary-600 after:text-primary-600;
+  }
+}
+
+.EIG-item.is-removing > :where(.EIG-title) {
+  @apply pointer-events-none text-error-400 line-through after:text-gray-400;
+}
+
+.EIG-item.is-removing > :where(.EIG-remove) {
+  @apply btu-button-gray before:btu-icon-rotate-ccw;
+}
+
+.EIG-item.is-removing > :where(.CIG-large) {
+  @apply hidden;
+}
+
+.EIG-title {
+  --reserved-for-toggle-icon: calc(2 * theme(spacing.sm) + theme(iconSize.md));
+  @apply btu-heading-6 relative inline-block h-[44px] min-w-0 cursor-pointer truncate py-3 pe-[var(--reserved-for-toggle-icon)] ps-2 font-normal text-gray-900 [flex:1_1_60%] after:btu-icon after:btu-icon-chevron-up after:absolute after:right-0 after:top-2 after:size-7 after:items-center after:justify-center after:rounded-lg after:bg-white touch-device:after:size-9;
+}
+
+.EIG-controls {
+  @apply flex gap-6;
+}
+
+.EIG-add,
+.EIG-search {
+  @apply btu-button btu-button-fill-none btu-button-primary btu-button-container-none before:btu-icon;
+}
+
+.EIG-add {
+  @apply before:btu-icon-plus;
+}
+
+.EIG-remove {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-error btu-button-xs mr-2 bg-white focus-visible:ring-error-100 before:btu-icon before:btu-icon-minus touch-device:btu-button-sm focus-visible:border focus-visible:border-error-600;
+}
+
+.EIG-search {
+  @apply before:btu-icon-search;
+}
+
+.EIG-swap {
+  @apply btu-button btu-button-text-hidden btu-button-gray btu-button-xs bg-white before:btu-icon before:btu-icon-arrow-right-left touch-device:btu-button-sm;
+}
+
+.EIG-item > .CIG-large {
+  @apply w-full grow bg-white p-[--CIG-padding] pt-0 outline outline-[.25rem] outline-white;
+}

package/src/legacy/tool-ui/src/Enhancement.css

@@ -0,0 +1,135 @@
+html::view-transition-group(prosemirror-enhancement) {
+  @apply [animation-duration:500ms] [animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)];
+}
+
+.ProseMirror .Enhancement {
+  @apply relative;
+
+  &.block {
+    @apply my-[var(--lineHeight-m)];
+  }
+
+  &.block.readOnly {
+    @apply grid grid-cols-[1fr_auto] gap-2 rounded-lg border p-2 [grid-template-areas:'label_menu''preview_preview'] hover:border-gray-300 hover:bg-gray-50;
+  }
+
+  &:where(.readOnly.ProseMirror-selectednode) {
+    @apply border-primary-600;
+  }
+}
+
+/* NOTE: does not work with table movements because tables have no attributes to select for */
+.ProseMirror.is-viewTransition
+  .Enhancement:where(.readOnly.ProseMirror-selectednode) {
+  @apply bg-white [view-transition-name:prosemirror-enhancement];
+}
+
+.Enhancement-label {
+  @apply flex gap-2 py-1 text-sm font-medium text-gray-900;
+}
+
+.Enhancement-preview {
+  @apply [grid-area:preview];
+}
+
+.Enhancement .rte2-block-preview img {
+  @apply max-h-[30dvh];
+}
+
+.Enhancement-preview-label {
+  @apply mt-2 text-xs text-gray-500;
+}
+
+/* --- Type-specific Enhancement Icons --- */
+.Enhancement-label {
+  .rte2-style-brightspot-core-carousel-CarouselRichTextElement & {
+    @apply before:btu-icon before:btu-icon-images;
+  }
+
+  .rte2-style-brightspot-core-image-ImageRichTextElement & {
+    @apply before:btu-icon before:btu-icon-image;
+  }
+
+  .rte2-style-brightspot-core-module-ModuleRichTextElement & {
+    @apply before:btu-icon before:btu-icon-blocks;
+  }
+
+  .rte2-style-brightspot-core-quote-QuoteRichTextElement & {
+    @apply before:btu-icon before:btu-icon-quote;
+  }
+
+  .rte2-style-brightspot-core-playlist-PlaylistRichTextElement & {
+    @apply before:btu-icon before:btu-icon-list-video;
+  }
+
+  .rte2-style-brightspot-core-video-VideoRichTextElement & {
+    @apply before:btu-icon before:btu-icon-video;
+  }
+
+  .rte2-style-brightspot-media-podcast-PodcastRichTextElement & {
+    @apply before:btu-icon before:btu-icon-radio;
+  }
+
+  .rte2-style-brightspot-supportdesk-code-rte-CodeBlockRichTextElement &,
+  .rte2-style-com-psddev-cms-rte-ExternalContentRichTextElement & {
+    @apply before:btu-icon before:btu-icon-chevrons-left-right-ellipsis;
+  }
+
+  .rte2-style-brightspot-facebook-rte-FacebookRichTextElement & {
+    @apply before:btu-icon before:btu-icon-facebook;
+  }
+
+  .rte2-style-brightspot-instagram-rte-InstagramRichTextElement & {
+    @apply before:btu-icon before:btu-icon-instagram;
+  }
+
+  .rte2-style-brightspot-twitter-rte-TweetRichTextElement & {
+    @apply before:btu-icon before:btu-icon-twitter;
+  }
+}
+
+/* --- Move Enhancement UI --- */
+.ProseMirror-moveEnhancementOverlay {
+  @apply absolute z-[2] scale-x-100 opacity-100 [transition:opacity_.3s,transform_.15s];
+
+  @starting-style {
+    & {
+      @apply scale-x-95 opacity-0;
+    }
+  }
+}
+
+.ProseMirror-moveEnhancementTarget {
+  --move-button-offset: 3px; /* Accounts for the difference in size between the move button and the line spacing */
+
+  @apply absolute left-0 right-0 mx-auto -mt-[calc(3*var(--lineHeight-m)-var(--move-button-offset))] flex h-[calc(var(--lineHeight-m)-2px)] w-fit cursor-pointer items-center justify-center gap-1 rounded-2xl bg-primary-50 py-0.5 pe-2 ps-1.5 text-xs font-medium text-primary-700 before:btu-icon before:btu-icon-arrow-down-up before:font-semibold before:btu-icon-xs after:absolute after:-z-[1] after:block after:w-[calc(100cqw-2rem)] after:border-b-[1.5px] after:border-dashed after:border-primary-500 first:-mt-[calc(3*var(--lineHeight-m)-var(--move-button-offset))] hover:bg-primary-600 hover:text-white hover:after:border-solid hover:after:border-primary-700;
+
+  &.is-cancel {
+    @apply bg-gray-50 text-gray-700 before:btu-icon-x after:border-gray-500 hover:bg-gray-700 hover:text-white hover:after:border-gray-700;
+  }
+
+  &.is-emptyLine {
+    @apply -mt-[calc(2*var(--lineHeight-m)-var(--move-button-offset))];
+  }
+
+  &.is-last {
+    @apply bottom-px;
+  }
+}
+
+/* Code.css styles for Inline Code enhancements */
+.rte2-style-brightspot-supportdesk-code-rte-CodeInlineRichTextElement,
+bsp-code-inline {
+  @apply bg-gray-200 px-1 font-mono;
+}
+
+.ContentEdit.is-locked .Enhancement {
+  .Enhancement-label,
+  .Enhancement-preview-label {
+    @apply text-gray-400;
+  }
+
+  .rte2-block-preview img {
+    @apply opacity-50;
+  }
+}