@brightspot/ui 3.0.1-cms-ui-migration.3 → 3.0.1

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

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

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

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

@@ -1,63 +0,0 @@
-.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

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

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

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

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

@@ -1,75 +0,0 @@
-.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

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