@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/ProseMirrorContainer.less

@@ -0,0 +1,29 @@
+.ProseMirrorContainer {
+  border: 1px solid var(--Input-borderColor);
+  margin-bottom: var(--gap-m);
+  opacity: 1;
+  position: relative;
+  transition: all 1s var(--ease-out);
+
+  &.hide {
+    opacity: 0;
+  }
+
+  &:hover {
+    border-color: var(--Input-focusColor);
+  }
+
+  &:focus-within {
+    border-color: var(--Input-focusColor);
+  }
+
+  .CodeMirror {
+    border-width: 0;
+  }
+}
+
+&.is-htmlMode {
+  .CIG-wordCount {
+    display: none;
+  }
+}

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

@@ -0,0 +1,68 @@
+# Brightspot Rich Text Editor
+
+This is the new Brightspot RTE, which is built on top of [ProseMirror](https://prosemirror.net/). Custom functionality is added to the RTE via Prosemirror's Plugin architecture. Our plugins live in the `plugin` diretory. Settings for the RTE app are in the `settings` directory. This directory holds the default configuration settings for this RTE. Your customizations will likely entail extending any or all of these settings (as well as adding a plugin).
+
+## Table of Contents
+
+1. [Must Knows](#must-knows)
+2. [Usage](#usage)
+3. [Collaborative Editing](#collaborative-editing)
+4. [Component and Directory Structure](#component-and-directory-structure)
+5. [Root](#root)
+6. [Plugins](#plugins)
+7. [menubar](#menubar)
+   1. [menubar views](#menubar-views)
+   2. [menubar plugin](#menubar-plugin)
+8. [plugin-setup](#plugin-setup)
+9. [Settings](#settings)
+10. [schema](#schema)
+11. [commands](#commands)
+12. [constants](#constants)
+13. [keymap](#keymap)
+14. [menuitems](#menuitems)
+
+## Must Knows
+
+1. Content produced by the legacy RTE built on CodeMirror is not compatible with Prosemirror-generated content because of the way in which both handle new lines: our codemirror only supports inline breaks while prosemirror must have block-level elements that wrap either text or other block-level elements. To handle this, there is a shim that does minimal translating of the markup whenever the editor state changes. This markup is saved to the original textarea, whose value is submitted when the user saves the content item. You can always see this translated markup by checking the value of the original text editor DOM element at any time, as both the Prosemirror editor and the textarea are kept in sync.
+2. **Warning**: Any block-level elements not defined in the schema will be ignored by the prosemirror parser. You can tell what has been defined by looking at the `schema` file.
+3. **Warning**: This currently comes with a limited menu bar that allows the user to bold, italicize, strikethru, sub, sup, left align, center align, and right align text. The menubar configuration of menu items and commands is in the **settings** directory.
+
+## Usage
+
+1.  Import the RTE class file. Example:
+
+```js
+import { RTE } from './rte/index'
+```
+
+2.  Instantiate an RTE object by passing in a DOM element. It does not have to be a textarea but it needs to be an element that can have its values set and get.
+
+```js
+const rte = new RTE(element)
+rte.init()
+```
+
+## Collaborative Editing
+
+Collaborative editing functionality is assisted by the ProseMirror [collab plugin](https://prosemirror.net/docs/ref/#collab). The following diagram encompasses the collab flow. Major takeaways are:
+
+1. Our backend is the authority in the form of a record per each RTE field. It holds the last document structure in JSON form, all of the steps taken by users on this field and the clientIds who made those changes, as well as current users' anchors and/or selection ranges.
+
+2. We use our RTC for constant communication between the server and the users. Upon initialization, the RTE will be drawn from the information stored in the record if there is one or the textarea if there is not one. This guarantees the collab plugin will be instantiated with the correct version number, which matches the number of steps held in the record.
+
+3. If a user attemps to post a content change to the authority (i.e. update the record for this field) and the change version number is behind the current version number stored on the server, the change will be rejected by the server.
+
+![Flow chart of workflow](./collab-workflow.jpeg)
+
+## Component and Directory Structure
+
+### Root
+
+1. RTE Class - sets up an RTE object per object instantiated, which occurs in `v3.js`. Much of the code that involves setting up the instance lives in the `utilites` file.
+2. styles - all styles impacting the RTE are in the `rte.css` file.
+3. codemirror-shim - bridges the gap between codemirror and prosemirror (in particular, handling of lines) for those users who are able to toggle back and forth between the two RTE implementations.
+
+### Plugins
+
+To make it easy to package and enable extra editor functionality, ProseMirror has a [plugin system](http://prosemirror.net/docs/ref/#state.Plugin_System). Additional functionality should be added here as a plugin. Plugins can have views, their own states, styling as well as influece the EditorState during transactions.
+See the ReadMe in the plugins directory for more information on our plugins.

package/src/legacy/tool-ui/src/main/webapp/v4/rte/codemirror-shim.d.ts

@@ -0,0 +1,8 @@
+import { Schema } from 'prosemirror-model'
+
+export function getLegacyHTMLTextForProsemirror(
+  text: string,
+  schema: Schema,
+  compliantTagNameMap: Map<string, string>,
+  preserveWhitespace: boolean,
+): string

package/src/legacy/tool-ui/src/main/webapp/v4/rte/codemirror-shim.js

@@ -0,0 +1,274 @@
+import DOMPurify from 'dompurify'
+import create from '../dom/create'
+
+/* eslint-disable no-debugger */
+
+/**
+ * Prosemirror generated content is not quite compatible with our legacy RTE generated
+ * content because of the way in which both handle new lines. The serializer
+ * handles translation for translating back to CodeMirror (backend-needed) code. This
+ * does mimimal parsing to make a few adjustments to display the content correctly
+ * in ProseMirror.
+ *
+ * @param {string} text HTML markup as a string, possibly with line breaks
+ * @param {ProseMirror.Schema} schema
+ * @param {Map} compliantTagNameMap
+ * @param {boolean} skipRawTagsCheck Optional flag to indicate if the raw tags
+ *    check should be skipped.
+ * @return {string} HTML markup as a string with any line breaks `replaced`
+ *  with paragraphs
+ */
+const getLegacyHTMLTextForProsemirror = (
+  string,
+  schema,
+  compliantTagNameMap,
+  skipRawTagsCheck,
+  sanitize,
+) => {
+  const blockSet = new Set()
+  const allowedTagsSet = new Set()
+  compliantTagNameMap.forEach((value, key) => {
+    const regex = new RegExp(key, 'g')
+    string = string.replace(regex, value)
+  })
+  Object.keys(schema.nodes).forEach((key) => {
+    const isBlock = schema.nodes[key].isBlock
+    if (!schema.nodes[key].spec.hasOwnProperty('parseDOM')) {
+      return
+    }
+    schema.nodes[key].spec.parseDOM.forEach((dom) => {
+      // this.allowedTags[dom.tag] = true
+      allowedTagsSet.add(dom.tag)
+      if (isBlock && dom.tag !== 'br') {
+        blockSet.add(dom.tag)
+      }
+    })
+  })
+  Object.keys(schema.marks).forEach((key) => {
+    if (!schema.marks[key].spec.hasOwnProperty('parseDOM')) {
+      return
+    }
+    schema.marks[key].spec.parseDOM.forEach((dom) => {
+      allowedTagsSet.add(dom.tag)
+    })
+  })
+
+  const element = document.createElement('div')
+
+  if (sanitize) {
+    element.innerHTML = DOMPurify.sanitize(string, {
+      CUSTOM_ELEMENT_HANDLING: {
+        tagNameCheck: () => true,
+        attributeNameCheck: null,
+        allowCustomizedBuiltInElements: true,
+      },
+    })
+  } else {
+    element.innerHTML = string
+  }
+
+  wrapUnsupportedTags(element, allowedTagsSet, skipRawTagsCheck)
+
+  const buckets = getBucketsFromElement([...element.childNodes], blockSet)
+  const newElement = processBuckets(buckets, blockSet)
+  return newElement.innerHTML
+}
+
+const getBucketsFromElement = (nodes, blockSet) => {
+  let prevChild = null
+  const buckets = []
+  let bucketNumber = -1
+
+  nodes.forEach((child) => {
+    const childNodeName = child.nodeName.toLowerCase()
+
+    // If node is essentially empty skip since we will wrap them in a line. This
+    // becomes problematic with whitespace etc before/after elements added in HTML
+    // mode.
+    if (
+      blockSet.has(prevChild) &&
+      childNodeName === '#text' &&
+      child.wholeText.trim().length === 0
+    ) {
+      return
+    }
+
+    const classList = child.className ? child.className.split(' ') : []
+    let hasBlockClass = classList.some((className) => {
+      return blockSet.has(`.${className}`)
+    })
+    // ins and del are special marks that can be block-level or inline. If
+    // this is a block level mark, we don't want to surround it with a bsp-line.
+    // We know if this is a block level mark by checking if any of its children
+    // are block-level nodes.
+    if (
+      classList.indexOf('rte2-style-ins-delete') !== -1 ||
+      classList.indexOf('rte2-style-ins-insert') !== -1 ||
+      classList.indexOf('rte2-style-ins-ai') !== -1 ||
+      childNodeName === 'ai' ||
+      childNodeName === 'del' ||
+      childNodeName === 'ins'
+    ) {
+      const childChildren = child.children
+      const hasBlockChild = [...childChildren].some((ele) => {
+        const nodeName = ele.nodeName.toLowerCase()
+        return blockSet.has(nodeName) || nodeName === 'br'
+      })
+
+      if (hasBlockChild) {
+        hasBlockClass = true
+
+        // when ins/del span across lines we will no longer detect the br+br
+        // sibling combination so strip out since this child will be treated
+        // as block already.
+        if (child.childNodes.length > 1) {
+          for (let grandChild of childChildren) {
+            if (grandChild.nodeName.toLowerCase() === 'br') {
+              grandChild.remove()
+            }
+          }
+        }
+      }
+    }
+    if (blockSet.has(childNodeName) || hasBlockClass) {
+      bucketNumber++
+      buckets[bucketNumber] = []
+      buckets[bucketNumber].push(child)
+      buckets[bucketNumber].isBlock = true
+    } else if (
+      childNodeName !== 'br' &&
+      (prevChild === null || prevChild === 'br' || blockSet.has(prevChild))
+    ) {
+      bucketNumber++
+      buckets[bucketNumber] = []
+      buckets[bucketNumber].push(child)
+    } else if (childNodeName !== 'br' && prevChild !== 'br') {
+      if (buckets[bucketNumber].isBlock) {
+        bucketNumber++
+        buckets[bucketNumber] = []
+      }
+      buckets[bucketNumber].push(child)
+    } else if (childNodeName === 'br' && prevChild === null) {
+      bucketNumber++
+      buckets[bucketNumber] = []
+      buckets[bucketNumber].push(child)
+      buckets[bucketNumber].isBreaks = true
+      buckets[bucketNumber].isFirst = true
+    } else if (childNodeName === 'br' && prevChild !== 'br') {
+      bucketNumber++
+      buckets[bucketNumber] = []
+      buckets[bucketNumber].push(child)
+      buckets[bucketNumber].isBreaks = true
+    } else if (childNodeName === 'br' && prevChild === 'br') {
+      buckets[bucketNumber].push(child)
+    }
+    prevChild = childNodeName
+  })
+
+  return buckets
+}
+
+const processBuckets = (buckets, blockSet) => {
+  const newElement = document.createElement('div')
+  let prevBucketBlock = false
+  buckets.forEach((bucket, index) => {
+    if (bucket.isBreaks && bucket.isFirst) {
+      bucket.forEach((child, index) => {
+        if (index === 0 && child.length > 1) {
+          return
+        }
+        const line = document.createElement('bsp-line')
+        newElement.appendChild(line)
+      })
+      prevBucketBlock = false
+    } else if (bucket.isBreaks && index === buckets.length - 1) {
+      const line = document.createElement('bsp-line')
+      newElement.appendChild(line)
+    } else if (bucket.isBreaks) {
+      bucket.forEach((child, index) => {
+        if (index === 0 && !prevBucketBlock) {
+          return
+        }
+        const line = document.createElement('bsp-line')
+        newElement.appendChild(line)
+      })
+      prevBucketBlock = false
+    } else if (bucket.isBlock) {
+      bucket.forEach((child) => {
+        const childBuckets = getBucketsFromElement(
+          [...child.childNodes],
+          blockSet,
+        )
+        let processedChildren = processBuckets(childBuckets, blockSet)
+        child.innerHTML = ''
+        ;[...processedChildren.childNodes].forEach((processedChild) => {
+          child.appendChild(processedChild)
+        })
+        newElement.appendChild(child)
+      })
+      prevBucketBlock = true
+    } else {
+      const line = document.createElement('bsp-line')
+      bucket.forEach((child) => {
+        line.appendChild(child)
+      })
+      newElement.appendChild(line)
+      prevBucketBlock = false
+    }
+  })
+  return newElement
+}
+
+/**
+ * If a node is of a type not known to the schema the opening and closing tags
+ * should be wrapped in a 'code' element.
+ *
+ * @param {Node} root The root node.
+ * @param {Set} allowedTagsSet A set of tag names known to the schema.
+ * @param {boolean} skipRawTagsCheck Skip this check altogether.
+ */
+function wrapUnsupportedTags(root, allowedTagsSet, skipRawTagsCheck) {
+  const nodes = []
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: function (node) {
+      const classList = node.className
+        ? node.className.toString().split(' ')
+        : []
+      const hasAllowedClass = classList.some((className) => {
+        return allowedTagsSet.has(`.${className}`)
+      })
+
+      if (
+        !allowedTagsSet.has(node.nodeName.toLowerCase()) &&
+        !hasAllowedClass &&
+        !skipRawTagsCheck
+      ) {
+        return NodeFilter.FILTER_ACCEPT
+      }
+      return NodeFilter.FILTER_REJECT
+    },
+  })
+
+  // Just collect nodes, manipulation will need to be done outside of TreeWalker.
+  while (walker.nextNode()) {
+    nodes.push(walker.currentNode)
+  }
+
+  nodes.forEach((unsupported) => {
+    const parent = unsupported.parentNode
+    const codeStart = create(
+      'code',
+      unsupported.outerHTML.slice(0, unsupported.outerHTML.indexOf('>') + 1),
+    )
+    const codeEnd = create('code', `</${unsupported.nodeName.toLowerCase()}>`)
+
+    parent.insertBefore(codeStart, unsupported)
+    while (unsupported.firstChild) {
+      parent.insertBefore(unsupported.firstChild, unsupported)
+    }
+    parent.insertBefore(codeEnd, unsupported)
+    parent.removeChild(unsupported)
+  })
+}
+
+export { getLegacyHTMLTextForProsemirror }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/interchangeable.ts

@@ -0,0 +1,250 @@
+import { DOMParser, Schema } from 'prosemirror-model'
+import Cookies from 'js-cookie'
+import { Plugin, PluginKey, TextSelection } from 'prosemirror-state'
+import { constants } from './settings/constants'
+import { EditorView } from 'prosemirror-view'
+
+export const interchangeable = (schema: Schema) => {
+  return new Plugin({
+    key: new PluginKey('interchangeable'),
+    props: {
+      handleDOMEvents: {
+        interchange: (view, evt) => {
+          const drawerUrl = '/cms/drawer/item-interchange'
+          const detail = evt.detail
+
+          // Conversion inside RTE Body
+          if (detail.loadableTypes) {
+            const enhancement = detail.node
+            const meta = enhancement.attrs.meta
+            const attributes = enhancement.attrs.attributes
+            const tr = view.state.tr
+
+            const query = new URLSearchParams()
+            query.set('typeId', meta.typeId)
+            query.set('targetTypeId', attributes['data-convert-target'])
+            query.set('itemState', attributes['data-state'])
+            query.set('isRte', 'true')
+            query.set('isConvert', 'true')
+
+            const headers = new Headers()
+            const cookie = Cookies.get('bsp.csrf')
+
+            if (cookie) {
+              headers.append('Brightspot-CSRF', cookie)
+            }
+
+            fetch(`${drawerUrl}`, {
+              method: 'POST',
+              credentials: 'include',
+              body: query,
+              headers,
+            }).then((response) => {
+              response.text().then((text) => {
+                const data = { ...JSON.parse(text) }
+
+                // Update state and loadable types after conversion
+                attributes['data-state'] = data['data-state']
+                attributes['data-loadable-types'] = data['data-loadable-types']
+
+                const newEnhancement = enhancement.type.create({
+                  attributes: data,
+                  typeId: attributes['data-convert-target'],
+                  meta: meta,
+                  id: enhancement.attrs.id,
+                })
+
+                tr.replaceSelectionWith(newEnhancement)
+
+                view.dispatch(tr)
+              })
+            })
+
+            return
+          }
+
+          const sortableTypes =
+            evt.detail.to.dataset.sortableValidItemTypes.split(' ')
+          const items =
+            evt.detail.items.length > 0 ? evt.detail.items : [evt.detail.item]
+
+          processItems(view, schema, items, drawerUrl, sortableTypes)
+        },
+      },
+    },
+  })
+}
+
+/** Process each item to be inserted into the editor
+ * @param view - The ProseMirror editor view
+ * @param schema - The ProseMirror schema
+ * @param items - The list of HTML elements representing the items to be processed
+ * @param drawerUrl - The URL endpoint for fetching item data
+ * @param sortableTypes - The list of valid sortable item types
+ */
+async function processItems(
+  view: EditorView,
+  schema: Schema,
+  items: HTMLElement[],
+  drawerUrl: string,
+  sortableTypes: string[],
+): Promise<void> {
+  for (const selected in items) {
+    const item = items[selected]
+    let meta: any
+
+    const loadTypes = item.dataset.sortableLoadTypes?.split(' ') || []
+    const id = item.dataset.id
+    const targetTypeId = loadTypes.find((type: string) =>
+      sortableTypes.includes(type),
+    )
+    const query = new URLSearchParams()
+    query.set('id', id || '')
+    query.set('targetTypeId', targetTypeId || '')
+    query.set('isRte', 'true')
+
+    const headers = new Headers()
+    const cookie = Cookies.get('bsp.csrf')
+
+    if (cookie) {
+      headers.append('Brightspot-CSRF', cookie)
+    }
+
+    await fetch(`${drawerUrl}`, {
+      method: 'POST',
+      credentials: 'include',
+      body: query,
+      headers,
+    })
+      .then(async (response) => {
+        const text = await response.text()
+        const data = { ...JSON.parse(text) }
+        const label = data.label
+
+        const elements = window.RICH_TEXT_ELEMENTS
+
+        if (elements instanceof Array) {
+          meta = elements.find(
+            (item: { tag: string }) => item.tag === data.tagName,
+          )
+        }
+
+        if (meta) {
+          let enhancementType
+          let enhancement
+
+          // Ensure we have a collapsed cursor, not a selection range
+          const selection = view.state.selection
+          const from = selection.ranges[0].$to.pos
+          let to = from
+          const tr = view.state.tr
+
+          // If there's a selection range, collapse it to a cursor at the end
+          if (!selection.empty) {
+            const $pos = tr.doc.resolve(from)
+            tr.setSelection(TextSelection.near($pos))
+          }
+
+          if (meta.tag === 'a') {
+            enhancementType = schema.marks[meta.tag]
+            enhancement = enhancementType.create({
+              label,
+              attributes: data,
+              typeId: targetTypeId,
+              meta: meta,
+              id: id,
+            })
+            const domFragment = document.createElement('div')
+            domFragment.innerHTML = label || ''
+
+            // Add line breaks if multiple link items are dropped
+            if (items.length > 1) {
+              domFragment.append(document.createElement('br'))
+            }
+
+            const slice = DOMParser.fromSchema(schema).parseSlice(domFragment, {
+              preserveWhitespace: 'full',
+            })
+
+            to = from + slice.size
+
+            tr.replaceSelection(slice).addMark(from, to, enhancement)
+            // Use TextSelection.near to find valid selection position
+            const $pos = tr.doc.resolve(to)
+            tr.setSelection(TextSelection.near($pos))
+          } else {
+            enhancementType = schema.nodes[meta.tag]
+            enhancement = enhancementType.create({
+              label: meta.tag !== 'bsp-module' ? label : null,
+              attributes: data,
+              typeId: targetTypeId,
+              meta: meta,
+              id: id,
+            })
+
+            const $from = tr.doc.resolve(from)
+            const parent = $from.parent
+            const isAtEndOfBlock =
+              parent.isTextblock && $from.parentOffset === parent.content.size
+
+            let selectionPos: number
+
+            if (parent.isTextblock && isAtEndOfBlock) {
+              // At end of textblock - insert after the block
+              const insertDepth =
+                $from.depth > 1 ? $from.depth - 1 : $from.depth
+              const insertPos = $from.after(insertDepth)
+              tr.insert(insertPos, enhancement)
+
+              const afterEnhancement = insertPos + enhancement.nodeSize
+
+              // If at document end, add a new line for subsequent content
+              if (afterEnhancement >= tr.doc.content.size) {
+                const lineType = schema.nodes['line']
+                if (lineType) {
+                  tr.insert(afterEnhancement, lineType.create())
+                  selectionPos = afterEnhancement + 1
+                } else {
+                  selectionPos = afterEnhancement
+                }
+              } else {
+                selectionPos = afterEnhancement
+              }
+            } else {
+              // In middle of content - replaceSelectionWith handles splitting
+              tr.replaceSelectionWith(enhancement)
+              selectionPos = from + enhancement.nodeSize
+            }
+
+            const $selPos = tr.doc.resolve(selectionPos)
+            tr.setSelection(TextSelection.near($selPos, 1))
+          }
+
+          tr.setMeta('enhancementManager$', {
+            remove: { id },
+          })
+
+          if (
+            view.dom.parentElement?.classList.contains(
+              constants.CLASSES.IS_PLACEHOLDER_CONTENT,
+            )
+          ) {
+            view.dom.parentElement?.classList.remove(
+              constants.CLASSES.IS_PLACEHOLDER_CONTENT,
+            )
+          }
+
+          try {
+            view.dispatch(tr)
+          } catch (error) {
+            // Do nothing
+          }
+        } else {
+          return
+        }
+      })
+      .catch(() => {
+        // Do nothing
+      })
+  }
+}