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

package/src/legacy/tool-ui/src/dom/onFind.ts

@@ -0,0 +1,277 @@
+import log from 'loglevel'
+
+export type CallbackFunction<E extends Element> = (element: E) => void
+export type Selectors = string | string[]
+
+let calledIndex = 0
+
+class Callback<E extends Element> {
+  #root
+  #called
+  #selectors
+  #fn
+  #matches
+
+  constructor(root: ParentNode, selectors: Selectors, fn: CallbackFunction<E>) {
+    this.#root = root
+    this.#called = `data-ofc${calledIndex++}`
+
+    if (!Array.isArray(selectors)) {
+      selectors = [selectors]
+    }
+
+    this.#selectors = selectors
+      .map(
+        selectors.some((s) => s.indexOf(',') > -1)
+          ? (s) => s
+          : (s) => `${s}:not([${this.#called}])`,
+      )
+      .join(',')
+
+    this.#fn = fn
+
+    const matches = selectors
+      .map((s) => s.trim())
+      .filter((s) => s.indexOf(' ') < 0 && s.indexOf(',') < 0)
+
+    if (matches.length === selectors.length) {
+      this.#matches = matches
+    }
+  }
+
+  addTriggerElements(triggerElements: Element[], element: Element) {
+    if (this.#root.contains(element)) {
+      if (element.matches(this.#selectors)) {
+        triggerElements.push(element)
+      }
+
+      for (const e of element.querySelectorAll(this.#selectors)) {
+        triggerElements.push(e)
+      }
+    }
+  }
+
+  trigger(elements?: E[]) {
+    if (document.readyState === 'loading') {
+      return
+    }
+
+    if (this.#matches && Array.isArray(elements)) {
+      for (const element of elements) {
+        if (this.#matches.some((m) => element.matches(m))) {
+          this.#callCallback(element)
+        }
+      }
+    } else {
+      for (const element of this.#root.querySelectorAll<E>(this.#selectors)) {
+        this.#callCallback(element)
+      }
+    }
+  }
+
+  #callCallback(element: E) {
+    if (inBlacklist(element)) {
+      return
+    }
+
+    if (!element.hasAttribute(this.#called)) {
+      element.setAttribute(this.#called, '')
+
+      try {
+        this.#fn(element)
+      } catch (error) {
+        log.error('Failed callback!', element, error)
+      }
+    }
+  }
+}
+
+let triggerPaused = false
+let triggerOnResume = false
+let triggerAll = false
+let triggerElements: Element[] = []
+let triggerFrame: number
+const callbacks: Callback<Element>[] = []
+
+function inBlacklist(node: Node) {
+  if (!(node instanceof Element)) return false
+
+  return (
+    node.closest('.CIG-wordCount') !== null ||
+    node.closest('.ContentEdit-previewDisplay') !== null ||
+    node.closest('.ContentLabel') !== null ||
+    node.closest('.PreviewFrame-typeDisplay') !== null ||
+    node.closest('.ProseMirrorToolbar') !== null ||
+    node.closest('.ProseMirror') !== null ||
+    node.closest('.ProseMirrorContainer') !== null ||
+    node.closest('.ProseMirror-fullscreen-container') !== null ||
+    node.closest('.ProseMirror-comments') !== null ||
+    node.closest('.RichTextEditor') !== null ||
+    node.closest('.WorkInProgressSaveStatus') !== null ||
+    node.closest('#aria-live-container') !== null ||
+    node.closest('.widget-urlsAutomatic') !== null
+  )
+}
+
+const every = Array.prototype.every
+const isText = (node: Node) => node.nodeType === Node.TEXT_NODE
+
+function triggerCallbacks(mutations?: MutationRecord[]) {
+  if (triggerPaused) {
+    triggerOnResume = true
+    return
+  }
+
+  const checkMutations = Array.isArray(mutations)
+  const validMutations = []
+
+  if (checkMutations) {
+    for (const mutation of mutations) {
+      const target = mutation.target
+
+      if (inBlacklist(target)) {
+        continue
+      }
+
+      switch (mutation.type) {
+        case 'attributes':
+          if (
+            mutation.oldValue !==
+            (target as Element).getAttribute(mutation.attributeName as string)
+          ) {
+            validMutations.push(mutation)
+          }
+          break
+        case 'childList':
+          if (
+            !every.call(mutation.addedNodes, isText) ||
+            !every.call(mutation.removedNodes, isText)
+          ) {
+            validMutations.push(mutation)
+          }
+          break
+      }
+    }
+
+    if (validMutations.length === 0) {
+      return
+    }
+  }
+
+  if (validMutations.length > 500) {
+    triggerAll = true
+  }
+
+  if (!triggerAll) {
+    if (checkMutations) {
+      for (const mutation of validMutations) {
+        const element = mutation.target as Element
+
+        switch (mutation.type) {
+          case 'attributes':
+            triggerElements.push(element)
+            break
+          case 'childList':
+            for (const callback of callbacks) {
+              callback.addTriggerElements(triggerElements, element)
+            }
+            break
+        }
+      }
+    } else {
+      triggerAll = true
+    }
+  }
+
+  if ((triggerAll || triggerElements.length > 0) && !triggerFrame) {
+    triggerFrame = window.requestAnimationFrame(() => {
+      const elements = triggerAll ? undefined : triggerElements
+      triggerAll = false
+      triggerElements = []
+      triggerFrame = 0
+
+      callbacks.forEach((callback) => callback.trigger(elements))
+    })
+  }
+}
+
+function initialize() {
+  document.documentElement.hidden = false
+  triggerCallbacks()
+
+  new MutationObserver(triggerCallbacks).observe(document, {
+    attributes: true,
+    attributeFilter: [
+      'class',
+      'data-bsp-autosubmit',
+      'data-chart-type',
+      'data-code-type',
+      'data-internal-name',
+      'data-tab',
+      'name',
+      'rel',
+      'target',
+    ],
+    attributeOldValue: true,
+    childList: true,
+    subtree: true,
+  })
+}
+
+document.documentElement.hidden = true
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initialize)
+} else {
+  initialize()
+}
+
+function onFind<E extends Element>(
+  root: ParentNode,
+  selectors: Selectors,
+  fn: CallbackFunction<E>,
+): void
+
+function onFind<E extends Element>(
+  selectors: Selectors,
+  fn: CallbackFunction<E>,
+): void
+
+function onFind<E extends Element>(
+  rootOrSelectors: ParentNode | Selectors,
+  selectorsOrFn: Selectors | CallbackFunction<E>,
+  fn?: CallbackFunction<E>,
+): void {
+  let root: ParentNode
+  let selectors: Selectors
+
+  if (typeof fn !== 'undefined') {
+    root = rootOrSelectors as Element
+    selectors = selectorsOrFn as Selectors
+  } else {
+    root = document
+    selectors = rootOrSelectors as Selectors
+    fn = selectorsOrFn as CallbackFunction<E>
+  }
+
+  const callback = new Callback(root, selectors, fn)
+  callback.trigger()
+  callbacks.push(callback as Callback<Element>)
+}
+
+onFind.triggerCallbacks = triggerCallbacks
+
+onFind.pause = () => {
+  triggerPaused = true
+}
+
+onFind.resume = () => {
+  triggerPaused = false
+
+  if (triggerOnResume) {
+    triggerOnResume = false
+    setTimeout(triggerCallbacks, 100)
+  }
+}
+
+export default onFind

package/src/legacy/tool-ui/src/dom/onFindOnce.ts

@@ -0,0 +1,31 @@
+import type { Selectors } from './onFind'
+
+export default function onFindOnce(selectors: Selectors, callback: () => void) {
+  if (Array.isArray(selectors)) {
+    selectors = selectors.join(',')
+  }
+
+  if (document.querySelector(selectors)) {
+    callback()
+    return
+  }
+
+  let called = false
+
+  const observer = new MutationObserver(async () => {
+    if (document.querySelector(selectors as string)) {
+      observer.disconnect()
+
+      if (!called) {
+        called = true
+        callback()
+      }
+    }
+  })
+
+  observer.observe(document, {
+    attributes: true,
+    childList: true,
+    subtree: true,
+  })
+}

package/src/legacy/tool-ui/src/dom/onRTEReady.ts

@@ -0,0 +1,105 @@
+interface RTEInstance {
+  ctx: HTMLTextAreaElement
+  loaded: boolean
+  view: {
+    dom: HTMLElement
+  }
+}
+
+interface RTETextarea extends HTMLTextAreaElement {
+  rte: RTEInstance
+}
+
+export interface OnRTEReadyOptions {
+  /** If true, auto-unsubscribe after first callback execution. Defaults to true. */
+  once?: boolean
+}
+
+interface ExecuteContext {
+  callback: (rte: RTEInstance) => void
+  once: boolean
+  hasExecuted: boolean
+  subscription: { remove: () => void } | null
+}
+
+/**
+ * Check if a textarea has an RTE instance
+ */
+function hasRTE(textarea: HTMLTextAreaElement | null): textarea is RTETextarea {
+  return (
+    textarea !== null && 'rte' in textarea && typeof textarea.rte === 'object'
+  )
+}
+
+/**
+ * Execute the RTE ready callback with context
+ * @param rte - The RTE instance that has loaded
+ * @param context - Execution context containing callback, once flag, and state
+ */
+function executeCallback(rte: RTEInstance, context: ExecuteContext): void {
+  if (context.once && context.hasExecuted) {
+    return
+  }
+
+  try {
+    context.callback(rte)
+    context.hasExecuted = true
+    if (context.once && context.subscription) {
+      context.subscription.remove()
+      context.subscription = null
+    }
+  } catch (error) {
+    console.error('onRTEReady callback failed', error)
+  }
+}
+
+/**
+ * Execute callback when a specific RTE is fully loaded
+ * @param callback - Function called with RTE instance when ready
+ * @param target - Textarea element or selector for the specific RTE
+ * @param options - Optional configuration
+ * @param options.once - Auto-cleanup after first fire (default: true)
+ * @returns Cleanup function to unsubscribe
+ */
+export default function onRTEReady(
+  callback: (rte: RTEInstance) => void,
+  target: HTMLTextAreaElement | string,
+  options?: OnRTEReadyOptions,
+): () => void {
+  const { once = true } = options || {}
+
+  // Resolve target to textarea element
+  const targetTextarea: HTMLTextAreaElement | null =
+    typeof target === 'string' ? document.querySelector(target) : target
+
+  if (!(targetTextarea instanceof HTMLTextAreaElement)) {
+    return () => {} // No-op
+  }
+
+  // Context shared by all executeCallback invocations
+  const context: ExecuteContext = {
+    callback,
+    once,
+    hasExecuted: false,
+    subscription: null,
+  }
+
+  // Already loaded?
+  if (hasRTE(targetTextarea) && targetTextarea.rte.loaded) {
+    executeCallback(targetTextarea.rte, context)
+    if (once) {
+      return () => {} // Already executed, no cleanup needed
+    }
+  }
+
+  context.subscription = window.PubSub.subscribe(
+    'rteLoaded',
+    (rte: RTEInstance) => {
+      if (rte.ctx === targetTextarea) {
+        executeCallback(rte, context)
+      }
+    },
+  )
+
+  return () => context.subscription?.remove()
+}

package/src/legacy/tool-ui/src/dom/onRemove.ts

@@ -0,0 +1,27 @@
+let triggerPaused = false
+
+/* Triggers a callback when a DOM element is removed from the document. */
+export default function onRemove(element: Element, callback: () => void) {
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const removedNode of mutation.removedNodes) {
+        if (removedNode.contains(element) && !triggerPaused) {
+          observer.disconnect()
+          callback()
+        }
+      }
+    }
+  })
+
+  observer.observe(document, { childList: true, subtree: true })
+}
+
+/* Globally pauses all callback invocations. */
+onRemove.pause = (): void => {
+  triggerPaused = true
+}
+
+/* Globally resumes all callback invocations. */
+onRemove.resume = (): void => {
+  triggerPaused = false
+}

package/src/legacy/tool-ui/src/dom/onVisible.ts

@@ -0,0 +1,29 @@
+import onFind, { Selectors, CallbackFunction } from './onFind'
+
+let calledIndex = 0
+
+export default function onVisible<E extends Element>(
+  selectors: Selectors,
+  callback: CallbackFunction<E>,
+) {
+  const calledId = `_ovc${calledIndex++}`
+
+  const observer = new IntersectionObserver((changes) => {
+    for (const change of changes) {
+      if (change.isIntersecting) {
+        const element = change.target
+        const elementClasses = element.classList
+
+        if (!elementClasses.contains(calledId)) {
+          elementClasses.add(calledId)
+          observer.unobserve(element)
+          callback(element as E)
+        }
+      }
+    }
+  })
+
+  onFind(selectors, (element) => {
+    observer.observe(element)
+  })
+}

package/src/legacy/tool-ui/src/dom/popupMenu.d.ts

@@ -0,0 +1,6 @@
+// TODO: Remove this file once popupMenu is converted to TypeScript.
+export function setupMenuForAria(list, button): void
+
+export function listenForMenuItemClick(list, button): void
+
+export function toggleMenu(list, button, target = list): void