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

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

@@ -1,758 +0,0 @@
-import debounce from './util/debounce'
-
-const parseMarkerNodeData = (data) => {
-  const spaceAt = data.indexOf(' ')
-  const content = JSON.parse(spaceAt > -1 ? data.substring(spaceAt + 1) : data)
-  return content
-}
-
-window._deferInit
-
-window.addEventListener('load', (event) => {
-  // These are the conditions for rendering the preview overlay frame:
-  // - The preview is loaded in an iframe; which indicates that the User has not loaded the preview in a new tab.
-  // - The preview page contains the server-side preview data needed for rendering the overlay UI.
-  const previewToEditParticipating =
-    window.location !== window.parent.location && window.PREVIEW_DATA
-
-  const top = window.parent ? window.parent.parent : null
-
-  if (window.PREVIEW_TO_EDIT_ENABLED && !previewToEditParticipating) {
-    console.debug(
-      'Although preview to edit is enabled, this preview is not participating in preview to edit.',
-    )
-  }
-
-  // The preview data is stored as a string to speed up finding matching module id's.
-  const previewData = window.PREVIEW_DATA
-  const contents = []
-  const previewContainerId = window.PREVIEW_CONTAINER_ID
-  const contentIdMeta = document.head.querySelector(
-    '[name="brightspot.contentId"]',
-  )
-  const contentId = contentIdMeta ? contentIdMeta.getAttribute('content') : null
-
-  // trigger dom parsing if it was paused/deferred previously
-  const parseDom = () => {
-    if (window._deferInit === undefined || window._deferInit === true) {
-      window._deferInit = false
-      init()
-    }
-  }
-
-  if (previewToEditParticipating) {
-    top?.postMessage(
-      {
-        type: 'BSP.Preview.ContentLoad',
-        previewContainerId,
-      },
-      '*',
-    )
-
-    window.addEventListener('mouseover', parseDom)
-  }
-
-  window.addEventListener('message', async ({ data }) => {
-    if (typeof data !== 'object') return
-
-    const type = data.type
-
-    if (type === 'BSP.Preview.PointerEvents') {
-      window.document.body.style.pointerEvents = data.value
-    }
-
-    if (type === 'BSP.ContentEdit.ViewportDeviceChanged') {
-      consecutiveResizes = 0
-      init()
-    } else if (type === 'BSP.Preview.Init') {
-      window._deferInit = false
-      init()
-    } else if (type === 'BSP.Preview.UpdateInitToggle') {
-      window._deferInit = data.deferPreviewInit
-    }
-  })
-
-  let consecutiveResizes = 0
-  let maxConsecutiveResizes = 3
-  let intervalId
-
-  const getPreviewHeight = (previewFrame) => {
-    const { height, y } = previewFrame.getBoundingClientRect()
-    // document body height including margin
-    const frameHeight = Math.ceil(height + y)
-    // total content height of document including content not visible on the screen
-    const totalContentHeight = Math.ceil(previewFrame.scrollHeight)
-    /**
-     * 1. When viewing preview in p2e mode, set the overlay frame height to the maximum scrollable content height
-     * 2. When p2e is disabled/not initialized, set the overlay frame height to include the
-     *    height of visible content + margin & borders
-     */
-    return previewToEditParticipating
-      ? Math.max(totalContentHeight, frameHeight)
-      : frameHeight
-  }
-
-  const handleResize = debounce(500, (entries) => {
-    if (consecutiveResizes >= maxConsecutiveResizes) return
-
-    const entry = entries[0]
-    const previewFrame = entry.target
-    const previewHeight = getPreviewHeight(previewFrame)
-    let prevHeight = previewHeight
-
-    top?.postMessage(
-      {
-        type: 'BSP.Preview.onChangedHeight',
-        height: previewHeight,
-        previewContainerId,
-      },
-      '*',
-    )
-
-    document.body.style.height = 'initial'
-
-    if (intervalId) clearInterval(intervalId)
-
-    intervalId = setInterval(() => {
-      const adjustedHeight = getPreviewHeight(previewFrame)
-      if (adjustedHeight === prevHeight) {
-        // if the data-defer-init flag is not explicitly set to 'false', defer parsing
-        if (window._deferInit === false) init()
-        clearInterval(intervalId)
-        intervalId = null
-      }
-      prevHeight = adjustedHeight
-    }, 500)
-
-    consecutiveResizes++
-  })
-
-  const observer = new ResizeObserver(handleResize)
-  observer.observe(document.body)
-
-  const init = () => {
-    if (!previewToEditParticipating) return
-
-    let listOverlays = new Map()
-    let payload = new Map()
-    let imageData = new Map()
-    let allOverlays = new Map()
-    let objectBeginMap = new Map()
-    let decodedTexts = new Map()
-    const root = document.body
-
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT, {
-      acceptNode: function (node) {
-        let nextSibling = node.nextSibling
-        const data = node.data
-        let filterResponse = NodeFilter.FILTER_ACCEPT
-
-        // If the next node is a comment reject, we want to use the last field
-        // comment prior to the Element node.
-        if (nextSibling) {
-          const nextNextSibling = nextSibling.nextSibling
-
-          // TODO: This isn't working correctly.
-          if (
-            nextSibling.nodeType === Node.COMMENT_NODE ||
-            (nextNextSibling &&
-              nextSibling === Node.TEXT_NODE &&
-              nextNextSibling.nodeType === Node.COMMENT_NODE)
-          ) {
-            return filterResponse
-          }
-        }
-
-        if (nextSibling && nextSibling.nodeType === Node.TEXT_NODE) {
-          nextSibling = nextSibling.nextElementSibling
-        }
-
-        if (data.startsWith('BrightspotCmsObjectBegin') && nextSibling) {
-          const content = parseMarkerNodeData(data)
-
-          // PreviewData is the string representation of the Content edit object data.
-          // If this marker id is found in that data and it isn't the "main"
-          // content object (like a "Gallery" or "Article") then accept this marker.
-          if (
-            previewData.indexOf(content.id) !== -1 &&
-            content.id !== contentId
-          ) {
-            nextSibling.dataset.brightspotField = true
-            filterResponse = NodeFilter.FILTER_ACCEPT
-          }
-        } else if (
-          data.startsWith('BrightspotCmsFieldAccess') &&
-          nextSibling &&
-          nextSibling.nodeType === Node.ELEMENT_NODE &&
-          !nextSibling.closest('[data-brightspot-field]')
-        ) {
-          const content = parseMarkerNodeData(data)
-
-          if (previewData.indexOf(content.id) !== -1) {
-            nextSibling.dataset.brightspotField = true
-            filterResponse = NodeFilter.FILTER_ACCEPT
-          }
-        }
-
-        return filterResponse
-      },
-    })
-
-    const textMatched = (element, text, contentKey, rteFlagged) => {
-      const processText = (str) => {
-        // replaces smart quotes if any with plain quotes
-        // replaces multiple spaces with a single space within the string
-        str = str.replace(/[“”]/g, '"')
-        str = str.replace(/[‘’]/g, "'")
-        str = str
-          .replace(/[\r\n\t]| /g, '')
-          .split(' ')
-          .filter((s) => s !== '')
-          .join(' ')
-        return str
-      }
-
-      const normalize = (text, override = false) => {
-        const decodedText = decodedTexts.get(contentKey)
-        if (decodedText && !override) return decodedText
-        // Removes surrounding whitespace.
-        text = text.trim()
-        // Create a temporary div element to decode any html entities
-        // and remove any html tags
-        const tmpl = document.createElement('div')
-        tmpl.innerHTML = text
-        const normalizedText = processText(tmpl.textContent)
-        decodedTexts.set(contentKey, normalizedText)
-        return normalizedText
-      }
-
-      const hasEnhancements = (element) => {
-        return (
-          element.querySelector('[data-state], [class*="Enhancement"]') !== null
-        )
-      }
-
-      const removeEnhancements = (element) => {
-        // Enhancements shown in the theme may not be formatted the same way
-        // as the enhancement state data suggests.
-        // So we remove them from the element before string matching.
-        const enhancements = element.querySelectorAll(
-          '[data-state], [class*="Enhancement"]',
-        )
-        enhancements.forEach((enhancement) => {
-          const space = document.createTextNode(' ')
-          enhancement.parentElement?.insertBefore(space, enhancement)
-          enhancement.parentElement?.removeChild(enhancement)
-        })
-      }
-
-      let elementText
-
-      // If marker suggests the element is rich text, we need to
-      // remove enhancements before comparing text.
-      if (rteFlagged && hasEnhancements(element)) {
-        const textWrapper = document.createElement('div')
-        textWrapper.innerHTML = text
-        removeEnhancements(textWrapper)
-        text = normalize(textWrapper.textContent, true)
-
-        const tmp = element.cloneNode(true)
-        removeEnhancements(tmp)
-        elementText = processText(tmp.textContent)
-      } else {
-        elementText = processText(element.textContent)
-        text = normalize(text)
-      }
-
-      if (elementText === text) {
-        return true
-      }
-      return false
-    }
-
-    let nextCascadingElement = null
-
-    while (walker.nextNode()) {
-      const node = walker.currentNode
-      const data = node.data
-
-      if (
-        data.startsWith('BrightspotCmsObjectBegin') ||
-        data.startsWith('BrightspotCmsFieldAccess')
-      ) {
-        let content = parseMarkerNodeData(data)
-
-        /* ignore cascading page layout preview markers and the preview elements for now */
-        const layoutKeys = [
-          'cascadingPage.above',
-          'cascadingPage.below',
-          'cascadingPage.aside',
-          'cascadingPage.footer',
-        ]
-
-        if (content.isEmpty === 'false' && layoutKeys.includes(content.name)) {
-          nextCascadingElement = node.nextElementSibling
-          continue
-        }
-
-        if (data.startsWith('BrightspotCmsObjectBegin')) {
-          content.type = 'bspModule'
-        } else if (data.startsWith('BrightspotCmsFieldAccess')) {
-          content.type = 'bspField'
-        }
-
-        // Try to associate the node with rich text.
-        if (
-          (node.element && node.element.classList.contains('.RichTextBody')) ||
-          node.parentElement?.closest('.RichTextBody') ||
-          (node.element &&
-            node.element.classList.contains('[class*="Enhancement"]')) ||
-          node.parentElement?.closest('.RichTextBody, [class*="Enhancement"]')
-        ) {
-          content.referencesRichText = true
-        }
-
-        let element =
-          content.isEmpty !== 'true' ? node.nextElementSibling : null
-
-        // Skip if element is the nextCascadingElement or its descendant
-        if (
-          nextCascadingElement &&
-          (element === nextCascadingElement ||
-            nextCascadingElement.contains(element))
-        ) {
-          continue
-        }
-
-        let prevElement = node.previousElementSibling || node.parentNode
-        let textMatchFound = false
-        const maxAttempts = 10
-        if (element && content.text) {
-          const contentKey = content.id + '/' + content.name
-          const isRTE = content.isRTE === 'true'
-          const exists = allOverlays.get(contentKey)
-          if (exists && exists.textMatched) continue
-          if (textMatched(element, content.text, contentKey, isRTE)) {
-            textMatchFound = true
-          } else {
-            let attempts = 1
-            for (const child of element.querySelectorAll(
-              ':scope *:not(script):not(style):not(iframe)',
-            )) {
-              if (textMatched(child, content.text, contentKey, isRTE)) {
-                textMatchFound = true
-                element = child
-                break
-              } else if (attempts === maxAttempts) {
-                attempts = 1
-                console.debug(
-                  `Preview: looking for text match... Giving up after ${maxAttempts} attempts.`,
-                )
-                break
-              }
-              attempts++
-            }
-          }
-        }
-
-        // A non-empty comment marker which is associated to a text field
-        // could be the only child. In that case use its parent element
-        // for the preview element reference.
-        /* eg:
-          <div class="parent">
-            <!--BrightspotCmsFieldAccess {"internalType":"text","displayName":"foo","isEmpty":"false","text":"Some text or nothing at all." ... }-->
-            "Some text or nothing at all."
-          </div>
-        */
-        if (
-          !textMatchFound &&
-          content.type === 'bspField' &&
-          content.internalType === 'text' &&
-          content.isEmpty !== 'true'
-        ) {
-          const elmToIgnore = element
-          element = node.parentElement
-          const isRTE = content.isRTE === 'true'
-          if (element) {
-            element.dataset.brightspotParentAssociated = true
-            if (
-              textMatched(
-                element,
-                content.text,
-                content.id + '/' + content.name,
-                isRTE,
-              )
-            ) {
-              textMatchFound = true
-            } else {
-              let attempts = 1
-              // Compare text of parent's immediate children.
-              // When the correct preview element is not the first immediate child.
-              for (const child of element.querySelectorAll(
-                ':scope > *:not(script):not(style):not(iframe)',
-              )) {
-                if (
-                  !child.isEqualNode(elmToIgnore) &&
-                  textMatched(
-                    child,
-                    content.text,
-                    content.id + '/' + content.name,
-                    isRTE,
-                  )
-                ) {
-                  textMatchFound = true
-                  element = child
-                  break
-                } else if (attempts === maxAttempts) {
-                  attempts = 1
-                  console.debug(
-                    `Preview: looking for text match... Giving up after ${maxAttempts} attempts.`,
-                  )
-                  break
-                }
-                attempts++
-              }
-            }
-          }
-        }
-
-        // Finally, no matches were found so we fallback to the
-        // closest sibling to the marker.
-        if (
-          !textMatchFound &&
-          node.nextElementSibling &&
-          node.nextElementSibling.tagName !== 'BR'
-        ) {
-          element = node.nextElementSibling
-        }
-
-        let prevSibling
-
-        if (content.isEmpty === 'true') {
-          while (!prevSibling || prevElement !== document.documentElement) {
-            prevSibling = prevElement.previousElementSibling
-            if (prevSibling) break
-            prevElement = prevElement.parentNode
-          }
-        }
-
-        content.textMatched = textMatchFound
-
-        let exists = allOverlays.get(
-          content.id + '/' + content.name || content.typeLabel,
-        )
-
-        const name = content.name || content.typeLabel
-
-        if (exists && exists.textMatched) {
-          content = Object.assign({}, content, {
-            parentNode: exists.parentNode,
-            previewElement: exists.previewElement,
-            textMatched: exists.textMatched,
-          })
-        } else if (exists && !exists.textMatched && textMatchFound) {
-          content = Object.assign({}, exists, content, {
-            parentNode: prevElement,
-            previewElement: element,
-          })
-        }
-
-        if (!exists) {
-          contents.push(content)
-        }
-
-        // build overlays map
-        let overlayId = content.id + '/' + name
-        let overlay = null
-        let numOfElements = 0
-
-        // Markers which are unsupported:
-        if (
-          content.internalType === 'number' ||
-          content.internalType === 'boolean' ||
-          (content.type === 'bspField' && content.internalType === undefined)
-        ) {
-          continue
-        }
-
-        // Skip to the next node if no preview element exists.
-        // or if the field is not in default 'Main' tab or is hidden
-        // or it has dimensions but is inside a hidden ancestor element
-        let parentNode = element?.parentNode
-        parentNode = parentNode && parentNode !== root ? parentNode : element
-        if (
-          !element ||
-          !parentNode.offsetParent ||
-          content.isFieldHidden === 'true'
-        ) {
-          continue
-        }
-
-        if (content.type === 'bspModule') {
-          if (allOverlays.has(overlayId)) {
-            overlay = allOverlays.get(overlayId)
-            if (overlay.previewElements.indexOf(element) === -1) {
-              overlay.previewElements.push(element)
-              overlay.dimensions.push(element?.getBoundingClientRect())
-            }
-            numOfElements = overlay.previewElements.length
-          } else {
-            const previewElements = []
-            previewElements.push(element)
-            const dimensions = []
-            dimensions.push(element?.getBoundingClientRect())
-            allOverlays.set(overlayId, {
-              id: content.id,
-              name: name,
-              previewElements: previewElements,
-              fieldValue: content.fieldValue ? content.fieldValue : null,
-              type: content.type,
-              internalType: content.internalType,
-              isEmpty: content.isEmpty,
-              label: content.displayName,
-              parentNode: prevElement?.getBoundingClientRect(),
-              textMatched: content.textMatched,
-              dimensions: dimensions,
-              referencesRichText: content.referencesRichText,
-            })
-            numOfElements = 1
-          }
-          const objectBegin = allOverlays.get(overlayId)
-          objectBeginMap.set(overlayId, objectBegin)
-        } else {
-          // Is not a bspModule.
-          if (
-            !exists ||
-            (exists && !exists.textMatched && textMatchFound) ||
-            (exists && !content.text)
-          ) {
-            // Skip <source> elements so that <img> elements can be processed correctly.
-            if (exists && element.tagName === 'SOURCE') {
-              continue
-            }
-
-            allOverlays.set(overlayId, {
-              id: content.id,
-              name: name,
-              previewElement: element,
-              children: content.children
-                ? content.children.split(',').map((item) => item.trim())
-                : null,
-              fieldValue: content.fieldValue ? content.fieldValue : null,
-              listType: content.children ? true : false,
-              type: content.type,
-              internalType: content.internalType,
-              isEmpty: content.isEmpty,
-              label: content.displayName,
-              textMatched: content.textMatched,
-              parentNode: prevElement?.getBoundingClientRect(),
-              dimensions: element?.getBoundingClientRect(),
-              referencesRichText: content.referencesRichText,
-            })
-          } else if (
-            content.internalType === 'text' &&
-            content.referencesRichText
-          ) {
-            // Handles richtext fields which, for whatever reason,
-            // don't result in a text match.
-            allOverlays.set(overlayId, {
-              id: content.id,
-              name: name,
-              previewElement: element,
-              children: content.children
-                ? content.children.split(',').map((item) => item.trim())
-                : null,
-              fieldValue: content.fieldValue ? content.fieldValue : null,
-              listType: content.children ? true : false,
-              type: content.type,
-              internalType: content.internalType,
-              isEmpty: content.isEmpty,
-              label: content.displayName,
-              textMatched: content.textMatched,
-              parentNode: prevElement?.getBoundingClientRect(),
-              dimensions: element?.getBoundingClientRect(),
-              referencesRichText: content.referencesRichText,
-            })
-          }
-        }
-
-        // Try to find the image element nearby.
-        let img =
-          element.nodeName !== 'IMG'
-            ? element.querySelector(':scope > img, :scope > picture > img')
-            : element
-
-        if (img) {
-          const prevSib = img.previousSibling
-          if (
-            prevSib?.nodeName === '#comment' &&
-            prevSib?.nodeValue.startsWith('BrightspotThemeData')
-          ) {
-            const {
-              image: { name, height, width },
-            } = parseMarkerNodeData(prevSib.data)
-            imageData.set(JSON.stringify(img.getBoundingClientRect()), {
-              name,
-              height,
-              width,
-              rect: img.getBoundingClientRect(),
-            })
-          }
-        }
-
-        if (content.children) {
-          listOverlays.set(overlayId, allOverlays.get(overlayId))
-        }
-        const overlayDimensions = allOverlays.get(overlayId).dimensions
-
-        payload.set(overlayId, {
-          id: content.id,
-          children: content.children
-            ? content.children.split(',').map((item) => item.trim())
-            : null,
-          type: content.type,
-          name: name,
-          label: content.displayName,
-          internalType: content.internalType,
-          hasElement:
-            (content.type === 'bspField' || content.type === 'bspModule') &&
-            element
-              ? true
-              : false,
-          fieldValue: content.fieldValue ? content.fieldValue : null,
-          isEmpty: content.isEmpty === 'true',
-          dimensions: overlayDimensions,
-          parentNode: prevSibling?.getBoundingClientRect(),
-          listType: content.children ? true : false,
-          textMatched: content.textMatched,
-          referencesRichText: content.referencesRichText,
-        })
-
-        if (content.type === 'bspModule') {
-          payload.numOfElements = numOfElements
-        }
-      }
-    }
-
-    listOverlays.forEach((overlay, key) => {
-      const children = overlay.children
-      let childElms = []
-      children.forEach((child) => {
-        const childOverlay = allOverlays.get(child)
-        if (childOverlay) {
-          if (childOverlay.previewElements) {
-            childElms.push.apply(childElms, childOverlay.previewElements)
-          } else if (childOverlay.previewElement) {
-            childElms.push(childOverlay.previewElement)
-          }
-        }
-      })
-      if (children.length === childElms.length) {
-        let parent = childElms[0]
-        childElms.shift()
-        if (childElms.length) {
-          let common = false
-          while (!common) {
-            const node = parent
-            let num = 0
-            childElms.forEach((childElm) => {
-              if (parent.contains(childElm)) {
-                num = num + 1
-              }
-            })
-            if (num === childElms.length) {
-              common = true
-            } else {
-              parent = node.parentNode
-            }
-          }
-        }
-        if (parent) {
-          const existing = payload.get(key)
-          existing.dimensions = parent?.getBoundingClientRect()
-          overlay.previewElement = parent
-        }
-      }
-    })
-
-    const sortPreviewElements = (elements) => {
-      const compareDepth = (a, b) => {
-        return a.dataset.depth - b.dataset.depth
-      }
-      elements.forEach((elm) => {
-        let depth = 1
-        let parent = elm.parentNode
-        while (parent !== root) {
-          depth = depth + 1
-          parent = parent.parentNode
-          // To ensure efficiency, only check up to a max depth of 30 nodes
-          if (depth > 30) {
-            break
-          }
-        }
-        elm.dataset.depth = depth
-      })
-      elements.sort(compareDepth)
-    }
-
-    objectBeginMap.forEach((overlay, key) => {
-      let prev = null
-      let res = overlay
-      let resMatches = []
-      let payloadOverlay
-      let noMatches = false
-      let matches
-      resMatches.push(overlay)
-      while (!noMatches) {
-        prev = res
-        matches = []
-        const resMatch = resMatches.map((match) => {
-          return match.id
-        })
-
-        allOverlays.forEach((ovr) => {
-          if (
-            resMatch.includes(ovr.fieldValue?.split('/')[0]) &&
-            !resMatch.includes(ovr.id) &&
-            !ovr.visited
-          ) {
-            matches.push(ovr)
-            ovr.visited = true
-          }
-        })
-        if (matches.length) {
-          noMatches = false
-          resMatches = matches
-        } else {
-          noMatches = true
-        }
-      }
-
-      if (overlay.previewElements.length > 1) {
-        sortPreviewElements(overlay.previewElements)
-      }
-      resMatches.forEach((res, index) => {
-        if (res !== overlay) {
-          res.linked = key
-          res.previewElement = overlay.previewElements[index]
-          const ovrKey = res.id + '/' + res.name
-          payloadOverlay = payload.get(ovrKey)
-          payloadOverlay.linked = key
-          payloadOverlay.linkedIdx = index
-          payloadOverlay.dimensions =
-            res.previewElement?.getBoundingClientRect()
-        }
-      })
-    })
-
-    top?.postMessage(
-      {
-        type: 'BSP.Preview.DOMParsed',
-        overlays: payload,
-        previewContainerId,
-        imageData,
-      },
-      '*',
-    )
-  }
-})