@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/rte/plugins/paste_manager/PasteManager.js

@@ -0,0 +1,368 @@
+import { Plugin, PluginKey } from 'prosemirror-state'
+import Cookies from 'js.cookie'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+import { DOMParser, Fragment, Slice } from 'prosemirror-model'
+import { getLegacyHTMLTextForProsemirror } from '../../codemirror-shim'
+import { runSpellCheck } from '../spellcheck/spellcheck-plugin'
+import { v1 as uuidv1 } from 'uuid'
+
+if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
+  await import('./views/PastePopup.less')
+}
+
+const PASTE_POPUP_TITLE =
+  typeof RTE_PASTE_POPUP_TITLE !== 'undefined'
+    ? RTE_PASTE_POPUP_TITLE
+    : 'Replace All'
+const PASTE_POPUP_INSTRUCTIONS =
+  typeof RTE_PASTE_POPUP_INSTRUCTIONS !== 'undefined'
+    ? RTE_PASTE_POPUP_INSTRUCTIONS
+    : 'Replace All will replace the selected text and any contained enhancements with the contents of your clipboard. Use Replace Text if you want to retain enhancements and their relevant positioning.'
+const PASTE_POPUP_TEXT_ONLY_BUTTON =
+  typeof RTE_PASTE_POPUP_TEXT_ONLY_BUTTON !== 'undefined'
+    ? RTE_PASTE_POPUP_TEXT_ONLY_BUTTON
+    : 'Replace Text'
+const PASTE_POPUP_ALL_BUTTON =
+  typeof RTE_PASTE_POPUP_ALL_BUTTON !== 'undefined'
+    ? RTE_PASTE_POPUP_ALL_BUTTON
+    : 'Replace All'
+
+const RICH_TEXT_ELEMENTS_PM_MAP = new Map()
+RICH_TEXT_ELEMENTS_PM.forEach((item) => {
+  RICH_TEXT_ELEMENTS_PM_MAP.set(item.tag, item)
+})
+
+/**
+ * Sends to the back-end for transformation of the markup
+ * pasted into the HTML. The content returned from the
+ * server will be what is pasted into the RTE.
+ *
+ * @param {string} text Text the user pasted into the RTE.
+ * @param {ProseMirror.EditorView} view The view of the RTE.
+ * @param {string} typeId The type ID of the content being pasted into.
+ * @param {string} fieldName The type ID of the content being pasted into.
+ * @return {Promise} The response from the server (could be an error)
+ */
+const getPasted = async (text, view, typeId, fieldName) => {
+  try {
+    const headers = new Headers()
+    headers.append('Brightspot-CSRF', Cookies.get('bsp.csrf'))
+    const body = new FormData()
+    const form = view.dom.closest('form[data-content-id]')
+
+    body.append('contentId', form?.dataset.contentId)
+    body.append('contentTypeId', form?.dataset.typeId)
+    body.append('locale', $('html').attr('lang') || 'en-US')
+    body.append('text', text)
+    body.append('typeId', typeId)
+    body.append('fieldName', fieldName)
+
+    const response = await fetch(CONTEXT_PATH + 'richTextTransformer', {
+      method: 'POST',
+      credentials: 'include',
+      headers,
+      body,
+    })
+    return response.json()
+  } catch (error) {
+    console.debug(error)
+    return error
+  }
+}
+
+const getPasteOnlyPopupContent = () => {
+  return `
+    <div class="Widget Paste-popup">
+      <h1 class="Widget-title">${PASTE_POPUP_TITLE}</h1>
+      <div class="Paste-popup-content Message">${PASTE_POPUP_INSTRUCTIONS}</div>
+      <div class="Paste-popup-action-items ActionBar">
+        <button class="Paste-popup-text-only-button">${PASTE_POPUP_TEXT_ONLY_BUTTON}</button>
+        <button class="Paste-popup-all-button">${PASTE_POPUP_ALL_BUTTON}</button>
+      </div>
+    </div>
+  `
+}
+
+const key = new PluginKey('pasteManager')
+
+const pasteManagerPlugin = (ctx, compliantTagNameMap) => {
+  return new Plugin({
+    key,
+    state: {
+      init() {
+        return DecorationSet.empty
+      },
+      apply(tr, set, state) {
+        // Adjust decoration positions to changes made by the transaction
+        set = set.map(tr.mapping, tr.doc)
+        let action = tr.getMeta(this)
+        let deco
+
+        if (action && action.add) {
+          if (action.add.to) {
+            deco = Decoration.inline(
+              action.add.from,
+              action.add.to,
+              { class: 'Prosemirror-placeholder' },
+              {
+                id: action.add.id,
+              },
+            )
+          } else {
+            const widget = document.createElement('placeholder')
+            deco = Decoration.widget(action.add.from, widget, {
+              id: action.add.id,
+            })
+          }
+
+          set = set.add(tr.doc, [deco])
+        } else if (action && action.remove) {
+          set = set.remove(
+            set.find(null, null, (spec) => spec.id === action.remove.id),
+          )
+        }
+
+        return set
+      },
+    },
+    props: {
+      decorations(state) {
+        return this.getState(state)
+      },
+      transformPastedHTML: (html) => {
+        // Do initial cleanup of pasted HTML prior to parsing.
+        const template = document.createElement('template')
+        template.innerHTML = html
+        const fragment = template.content
+        const walker = document.createTreeWalker(fragment)
+        let currentNode = walker.currentNode
+
+        while (currentNode) {
+          if (currentNode.nodeType === 1) {
+            currentNode.removeAttribute('id')
+            currentNode.removeAttribute('label')
+            if (
+              currentNode.hasAttribute('class') &&
+              currentNode.getAttribute('class').indexOf('rte2-style') > -1
+            ) {
+              currentNode.removeAttribute('class')
+            }
+          }
+          currentNode = walker.nextNode()
+        }
+        return template.innerHTML
+      },
+      handlePaste: (view, event, incomingSlice) => {
+        const { dispatch, state } = view
+        let tr = state.tr
+        // User is writing raw html, let the editor handle
+        // cutting and pasting without processing from
+        // the Java,
+        const rawTextManagerState = state.rawTextManager$
+        if (
+          rawTextManagerState &&
+          rawTextManagerState.get('activeStates') &&
+          rawTextManagerState.get('activeStates').get('html')
+        ) {
+          return false
+        }
+        // Content from the clipboard. Note that ProseMirror
+        // modifies the content on the clipboard so this is not
+        // the true data from the clipboard.
+        let content = event.clipboardData.getData('text/html')
+        if (!content) {
+          content = event.clipboardData.getData('text')
+        }
+        const isAllSelected = state.selection.toJSON().type === 'all'
+        // Because the Java has to process the data, we need to make an async
+        // call, which means we have to keep track of the position in the document
+        // where the user intended to paste. We keep track of this as a decoration so
+        // that the plugin can map through any state changes that occur prior to the content
+        // returning from the Java, allowing for the position to be updated correctly.
+        let id = uuidv1()
+        let { from, to, empty } = state.selection
+        if (state.doc.childCount === 1 && state.doc.textContent === '') {
+          from = 0
+          to = 0
+        }
+        if (empty) {
+          tr = tr.setMeta(key, {
+            add: { id, from },
+          })
+        } else {
+          tr = tr.setMeta(key, {
+            add: { id, from, to },
+          })
+        }
+        dispatch(tr)
+        // Users can replace all the current text content with new content
+        // but leave the current block enhancements in place. If the user has
+        // selected All and then pastes, we prompt the user to confirm this is what
+        // the user intends. The prompt is a popup, so we need
+        // to wait for the user to respond. Subsequently, we initialize the popup in
+        // a promise. We resolve the promise if there is no need for the popup or when
+        // the user exits the popup.
+        const promise = new Promise(function (resolve) {
+          if (isAllSelected) {
+            const popUpDom = document.createElement('div')
+            popUpDom.innerHTML = getPasteOnlyPopupContent()
+            view.dom.parentElement.appendChild(popUpDom)
+            const textOnlybutton = popUpDom.querySelector(
+              '.Paste-popup-text-only-button',
+            )
+            const allButton = popUpDom.querySelector('.Paste-popup-all-button')
+            textOnlybutton.addEventListener('click', (e) => {
+              e.preventDefault()
+              e.stopImmediatePropagation()
+
+              resolve(true)
+              $popUpDom.popup('close')
+              view.focus()
+              popUpDom.remove()
+            })
+            allButton.addEventListener('click', (e) => {
+              e.preventDefault()
+              e.stopImmediatePropagation()
+
+              resolve(false)
+              $popUpDom.popup('close')
+              view.focus()
+              popUpDom.remove()
+            })
+            const $popUpDom = $(popUpDom)
+            $popUpDom.popup()
+            $popUpDom.popup('open')
+            $popUpDom.show()
+            // The user might close the popup via the standard close
+            // button without making a selection, but we still need to
+            // resolve the promise.
+            $popUpDom.bind('close.popup', () => {
+              resolve()
+              view.focus()
+            })
+          } else {
+            // The user didn't select All, so no need for popup.
+            // Just resolve the promise.
+            resolve(false)
+          }
+        })
+        promise.then((shouldPasteTextOnly) => {
+          if (typeof shouldPasteTextOnly === 'undefined') {
+            return
+          }
+
+          getPasted(
+            content,
+            view,
+            view.dom.closest('.CIG')?.getAttribute('data-type-id'),
+            view.dom.closest('.CIG-row')?.getAttribute('data-field'),
+          ).then(
+            (data) => {
+              let pos = findPlaceholder(view, id)
+              if (pos == null) return
+              const pluginMeta = tr.getMeta(key)
+              const text = pluginMeta.add.text
+              // Request failed, insert the text we collected and stored on the deco
+              // when the user pasted and remove the decoration.
+              if (!data.status || data.status !== 'ok') {
+                view.dispatch(
+                  tr.insertText(text).setMeta(key, { remove: { id } }),
+                )
+                return
+              }
+              let toHTMLString = data.text
+              toHTMLString = getLegacyHTMLTextForProsemirror(
+                toHTMLString,
+                state.schema,
+                compliantTagNameMap,
+                true,
+              )
+              // compliantTagNameMap.forEach((value, key) => {
+              //   const regex = new RegExp(key, 'g')
+              //   toHTMLString = toHTMLString.replace(regex, value)
+              // })
+              const tmpElement = document.createElement('div')
+              tmpElement.innerHTML = toHTMLString
+              let slice = DOMParser.fromSchema(state.config.schema).parseSlice(
+                tmpElement,
+              )
+
+              // The user selected all, then pasted, and confirmed
+              // intent to paste text-only.
+              if (shouldPasteTextOnly && ctx.value) {
+                const currentContent = state.doc.content
+                // Keep track of all the current block level enhancements and
+                // their positions.
+                const map = {}
+                const newNodes = []
+                currentContent.content.forEach((item, index) => {
+                  if (
+                    RICH_TEXT_ELEMENTS_PM_MAP.get(item.type.name) &&
+                    RICH_TEXT_ELEMENTS_PM_MAP.get(item.type.name).line
+                  ) {
+                    map[index] = item
+                  }
+                })
+                let numInserted = 0
+                // If there was an enhancement at this position,
+                // insert it into the new content at the same position,
+                // remembering to map forward the number previously
+                // inserted.
+                slice.content.content.forEach((item, index) => {
+                  newNodes.push(item)
+                  if (map[index]) {
+                    newNodes.splice(index + numInserted, 0, map[index])
+                    numInserted++
+                  }
+                })
+
+                // The lines of pasted text might be shorter than the amount of
+                // enhancements that we have, so we just stack whatever is
+                // leftover.
+                if (numInserted < Object.keys(map).length) {
+                  Object.keys(map).forEach((key, index) => {
+                    if (index >= numInserted) {
+                      newNodes.push(map[key])
+                      numInserted++
+                    }
+                  })
+                }
+                const fragment = Fragment.fromArray(newNodes)
+                slice = new Slice(fragment, 0, 0)
+              }
+              dispatch(
+                view.state.tr
+                  .replaceRange(pos.from, pos.to || 1, slice)
+                  .setMeta(key, { remove: { id } }),
+              )
+              // From the spellcheck API. Runs the spellcheck.
+              runSpellCheck(state.doc)
+            },
+            () => {
+              view.dispatch(tr.setMeta(key, { remove: { id } }))
+            },
+          )
+        })
+        return true
+      },
+    },
+  })
+}
+
+/**
+ * Helper function to find the placeholder decoration that has a spec
+ * that provides the current position of the decoration (and thus where
+ * to insert the pasted text).
+ *
+ * @param {ProseMirror.EditorView} view
+ * @param {string} id The ID of the plugin that we want to find.
+ * @return {number|null} The current position of the decoration or null
+ *  if the decoration was not found.
+ */
+function findPlaceholder(view, id) {
+  let decos = pasteManagerPlugin().getState(view.state)
+  let found = decos.find(null, null, (spec) => spec.id === id)
+  return found.length ? found[0] : null
+}
+
+export { pasteManagerPlugin }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/paste_manager/views/PastePopup.less

@@ -0,0 +1,5 @@
+.Paste-popup {
+  .Paste-popup-content {
+    margin: var(--gap-l);
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/placeholder_manager/PlaceHolderManager.js

@@ -0,0 +1,128 @@
+/* eslint-disable  */
+import {
+  Plugin,
+  PluginKey,
+  AllSelection,
+  TextSelection,
+} from 'prosemirror-state'
+import { defaultBrightspotDOMSerializer } from '../../settings/BSSerializer'
+import { replaceWholeDocumentWithNewContent } from '../../utilities'
+import { constants } from '../../settings/constants'
+
+const key = new PluginKey('placeholderManager')
+const EDITABLE_PLACEHOLDER_ATTR = 'data-editable-placeholder'
+const PLACEHOLDER_ATTR = 'placeholder'
+const POPUP_IS_VISIBLE_SELECTOR = '.Popup.is-visible'
+
+/**
+ * Mimics native placeholder functionality, using the following rules:
+ *
+ * 1. At load time, if there is no value for the field, the placeholder
+ * value should appear in the RTE styled similarly to a native placeholder. This
+ * is handled in ProseMirror.js.
+ * 2. If this is not a `data-editable-placeholder` field, then when the RTE
+ * is focused, the placeholder should go away.
+ * 3. If this is not a `data-editable-placeholder` field, then when the RTE
+ * is blurred, the placeholder should come back if the RTE is empty.
+ * 4. If this is a `data-editable-placeholder` field, then when the RTE is
+ * focused, the placeholder value becomes the value of the RTE if the RTE is empty.
+ * 5. If this is a `data-editable-placeholder` field, then when the RTE is
+ * blurred, the placeholder should come back if the RTE is empty.
+ * 6. Like a native placeholder, the placeholder value is never saved. In the case
+ * of a `data-editable-placeholder` field, if the RTE value is the same as the placeholder,
+ * it should also not be saved. This check is handled before the RTE value
+ * saved back to the textarea in the `dispatchAction` callback in ProseMirror.js.
+ *
+ * @param {Element} ctx The RTE textarea.
+ * @param {Map} compliantTagNameMap Compliant tags, used for serialization.
+ */
+const placeholderManagerPlugin = (ctx, compliantTagNameMap) => {
+  return new Plugin({
+    key: key,
+    props: {
+      handleDOMEvents: {
+        focus: (view) => {
+          if (!ctx.hasAttribute(PLACEHOLDER_ATTR)) {
+            return
+          }
+          const { state, dom, dispatch } = view
+          const { tr, doc } = state
+
+          // If this isn't an editable placeholder and we are showing
+          // the 'placeholder' content, the field should be emptied.
+          if (
+            !ctx.hasAttribute(EDITABLE_PLACEHOLDER_ATTR) &&
+            dom.parentElement.classList.contains(
+              constants.CLASSES.IS_PLACEHOLDER_CONTENT,
+            )
+          ) {
+            const allSelection = new AllSelection(doc)
+            const storedMarks = tr.storedMarks
+
+            dispatch(
+              tr
+                .setMeta('removeFromTracking', true)
+                .setMeta('addToHistory', false)
+                .setSelection(allSelection)
+                .deleteSelection()
+                .setStoredMarks(storedMarks),
+            )
+          }
+          dom.parentElement.classList.remove(
+            constants.CLASSES.IS_PLACEHOLDER_CONTENT,
+          )
+        },
+        blur: (view) => {
+          // The user might be interacting with an enhancement popup, which will blur the
+          // editor, but in this case we don't want to handle potentially emptying the
+          // editor.
+          const placeholderContent = ctx.getAttribute(PLACEHOLDER_ATTR)
+          let currentContent = ctx.value
+          if (!currentContent && ctx.hasAttribute('placeholder')) {
+            currentContent = ctx.getAttribute('placeholder')
+          }
+          if (
+            document.querySelector(POPUP_IS_VISIBLE_SELECTOR) ||
+            !ctx.hasAttribute(PLACEHOLDER_ATTR) ||
+            (currentContent.length > 0 && currentContent !== placeholderContent)
+          ) {
+            return
+          }
+          const { state, dispatch } = view
+          const doc = state.doc
+          const content = defaultBrightspotDOMSerializer.serialize(
+            doc.content,
+            compliantTagNameMap,
+          )
+          const isEmpty =
+            doc.childCount === 1 &&
+            doc.firstChild.isTextblock &&
+            doc.firstChild.content.size === 0 &&
+            !view.docView.contentDOM.textContent
+          if (content === placeholderContent || isEmpty) {
+            view.dom.parentNode.classList.add(
+              constants.CLASSES.IS_PLACEHOLDER_CONTENT,
+            )
+          }
+          // If this isn't an editable placeholder field, the field was
+          // emptied when it was focused. If the field is still empty,
+          // we need to put the placeholder content back.
+          if (isEmpty) {
+            replaceWholeDocumentWithNewContent(
+              state,
+              placeholderContent,
+              compliantTagNameMap,
+              dispatch,
+              false,
+              true,
+              undefined,
+              true,
+            )
+          }
+        },
+      },
+    },
+  })
+}
+
+export { placeholderManagerPlugin }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/raw_text_manager/README.md

@@ -0,0 +1,13 @@
+# Brightspot Rich Text Editor Raw Code Manager Plugin
+
+Extends Prosemirror to add marks around content the user wants denoted as raw code.
+
+## Table of Contents
+
+1.  [Must Knows](#must-knows)
+
+## Must Knows
+
+1. The `raw` code marks are added by the shim during RTE content creation. The shim loops through the content elements and compares them to the schema. If the element is not in the schema, it adds a code tag around the content in that element and removes the element. The `raw` mark provides the styling for the raw content.
+2. The `raw` code marks are stripped away by the serializer so that when the content is saved, it will not be saved.
+3. This plugin wraps the `raw` code marks around any content the user enters after engaging the raw content command.

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/raw_text_manager/RawTextManager.js

@@ -0,0 +1,96 @@
+/* eslint-disable no-debugger */
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { ChangeSet } from 'prosemirror-changeset'
+
+/**
+ * Command triggered when user engages the raw html command.
+ * Dispatches a meta update to toggle the raw state.
+ */
+const doRaw = () => {
+  return function (state, dispatch) {
+    dispatch(
+      state.tr.setMeta(key, {
+        toggleRaw: true,
+      }),
+    )
+  }
+}
+
+const key = new PluginKey('rawTextManager')
+
+/**
+ * Manages toggling a `raw` active state for when users
+ * engage the raw tag command. The `appendTransaction` adds a `raw` mark
+ * around new text the user enters when the raw state is active.
+ */
+const rawTextManagerPlugin = () => {
+  return new Plugin({
+    key: key,
+
+    state: {
+      init() {
+        const pluginState = new Map()
+        const activeStates = new Map()
+        activeStates.set('html', false)
+        pluginState.set('activeStates', activeStates)
+        return pluginState
+      },
+
+      apply(transaction, value) {
+        const pluginState = value
+        const meta = transaction.getMeta(key)
+        if (meta && meta.hasOwnProperty('toggleRaw')) {
+          const currentState = pluginState
+          const newCurrentState = !currentState.get('activeStates').get('html')
+          pluginState.get('activeStates').set('html', newCurrentState)
+        }
+        return pluginState
+      },
+    },
+
+    appendTransaction(transactions, oldState, newState) {
+      const pluginState = newState[key.key]
+      const isRawMode = pluginState.get('activeStates').get('html')
+
+      if (!isRawMode) {
+        return
+      }
+
+      let tr = newState.tr
+      const schema = newState.config.schema
+      const markType = schema.marks.html
+      const mark = markType.create()
+
+      const changeSets = []
+
+      transactions.forEach((transaction) => {
+        const changeSet = ChangeSet.create(oldState.doc).addSteps(
+          newState.doc,
+          transaction.mapping.maps,
+        )
+        if (changeSet.changes.length) {
+          changeSets.push(changeSet)
+        }
+      })
+
+      // Unless there are actual changes in the returned transaction ProseMirror
+      // will go into an infinite loop. This is a known danger when implementing
+      // appendTransaction that implementers must guard against.
+      if (changeSets.length > 0) {
+        changeSets.forEach((cs) => {
+          cs.changes.forEach((change) => {
+            change.inserted.forEach((inserted) => {
+              tr = tr.addMark(change.fromA, change.toB, mark)
+            })
+          })
+        })
+
+        return tr
+      }
+
+      return
+    },
+  })
+}
+
+export { rawTextManagerPlugin, doRaw }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/spellcheck/index.js

@@ -0,0 +1,3 @@
+import { spellcheckPlugin } from './spellcheck-plugin'
+
+export { spellcheckPlugin }