@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/Preview.js

@@ -0,0 +1,758 @@
+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,
+      },
+      '*',
+    )
+  }
+})