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

package/src/legacy/tool-ui/src/main/webapp/v4/rte/settings/schemaBuilder.js

@@ -0,0 +1,1281 @@
+import { Schema } from 'prosemirror-model'
+import { constants } from './constants'
+import { v1 as uuidv1 } from 'uuid'
+
+const PENDING = RTE_PENDING || 'Pending' /* global RTE_PENDING */
+
+/**
+ * Taken from ProseMirror table's plugin.
+ *
+ * @param {Element} dom The table cell from which to get the
+ *    attributes.
+ */
+const getCellAttrs = (dom) => {
+  let widthAttr = dom.getAttribute('data-colwidth')
+  let widths =
+    widthAttr && /^\d+(,\d+)*$/.test(widthAttr)
+      ? widthAttr.split(',').map((s) => Number(s))
+      : null
+  let colspan = Number(dom.getAttribute('colspan') || 1)
+  const result = {
+    colspan,
+    rowspan: Number(dom.getAttribute('rowspan') || 1),
+    colwidth: widths && widths.length === colspan ? widths : null,
+  }
+  const attributes = Object.fromEntries(
+    Array.from(dom.attributes)
+      .filter((attr) => !(attr.name in result))
+      .map((attr) => [attr.name, attr.value]),
+  )
+  result.attributes = attributes
+
+  return result
+}
+
+/**
+ * Taken from ProseMirror table's plugin.
+ *
+ * @param {ProseMirror.Model.Node} node The table cell node representation.
+ */
+const setCellAttrs = (node) => {
+  let attrs = {}
+  if (node.attrs.colspan !== 1) attrs.colspan = node.attrs.colspan
+  if (node.attrs.rowspan !== 1) attrs.rowspan = node.attrs.rowspan
+  if (node.attrs.colwidth) {
+    attrs['data-colwidth'] = node.attrs.colwidth.join(',')
+  }
+  for (let key in node.attrs) {
+    attrs[key] = node.attrs[key]
+  }
+  return attrs
+}
+
+const DOC_CONTENT = `(line
+  | ${constants.NODES.GROUPS.aligned}
+  | ${constants.NODES.GROUPS.list}
+  | ${constants.NODES.GROUPS.block})+`
+
+const LIST_ITEM_CONTENT = `(line
+  | ${constants.NODES.GROUPS.list}
+  | ${constants.NODES.GROUPS.block})+`
+
+const baseNodes = {
+  doc: {
+    content: DOC_CONTENT,
+    marks: 'del ins',
+  },
+  line: {
+    content: `${constants.NODES.GROUPS.inline}*`,
+    group: `${constants.NODES.GROUPS.block}`,
+    marks: '_',
+    parseDOM: [
+      {
+        tag: 'bsp-line',
+      },
+      {
+        tag: 'br',
+      },
+    ],
+    toDOM(node) {
+      return ['bsp-line', node.attrs, 0]
+    },
+  },
+  p: {
+    content: 'inline*',
+    group: `block`,
+    parseDOM: [{ tag: 'p' }],
+    toDOM(node) {
+      return ['p', node.attrs, 0]
+    },
+  },
+  table: {
+    attrs: {
+      id: { default: 'rte-' + uuidv1() },
+      attributes: { default: {} },
+      _state: { default: {} },
+    },
+    content: 'tableRow+',
+    tableRole: 'table',
+    isolating: true,
+    group: `block`,
+    parseDOM: [
+      {
+        tag: 'table',
+        getAttrs(dom) {
+          const attributes = [...dom.attributes].reduce((prev, next) => {
+            prev[next.name] = next.nodeValue
+            return prev
+          }, {})
+          return {
+            id: dom.id || 'rte-' + uuidv1(),
+            attributes,
+          }
+        },
+      },
+    ],
+    toDOM(node) {
+      return [
+        'table',
+        {
+          ...node.attrs.attributes,
+          id: node.attrs.id || 'rte-' + uuidv1(),
+        },
+        ['tbody', 0],
+      ]
+    },
+  },
+  tableBody: {
+    attrs: {
+      attributes: { default: {} },
+    },
+    content: 'tableRow+',
+    parseDOM: [{ tag: 'tbody' }],
+    toDOM(node) {
+      return ['tbody', node.attrs.attributes, 0]
+    },
+  },
+  tableRow: {
+    attrs: {
+      attributes: { default: {} },
+    },
+    content: '(tableCell | tableHeader)*',
+    tableRole: 'row',
+    parseDOM: [
+      {
+        tag: 'tr',
+        getAttrs(dom) {
+          const attributes = [...dom.attributes].reduce((prev, next) => {
+            prev[next.name] = next.nodeValue
+            return prev
+          }, {})
+          return {
+            attributes,
+          }
+        },
+      },
+    ],
+    toDOM(node) {
+      return ['tr', node.attrs.attributes, 0]
+    },
+  },
+  tableCell: {
+    content: `(block | ${constants.NODES.GROUPS.list} | ${constants.NODES.GROUPS.aligned})+`,
+    attrs: {
+      colspan: { default: 1 },
+      rowspan: { default: 1 },
+      colwidth: { default: null },
+      attributes: { default: {} },
+    },
+    tableRole: 'cell',
+    isolating: true,
+    parseDOM: [{ tag: 'td', getAttrs: (dom) => getCellAttrs(dom) }],
+    toDOM(node) {
+      return ['td', setCellAttrs(node), 0]
+    },
+  },
+  tableHeader: {
+    content: 'block+',
+    attrs: {
+      colspan: { default: 1 },
+      rowspan: { default: 1 },
+      colwidth: { default: null },
+      attributes: { default: {} },
+    },
+    tableRole: 'header_cell',
+    isolating: true,
+    parseDOM: [{ tag: 'th', getAttrs: (dom) => getCellAttrs(dom) }],
+    toDOM(node) {
+      return ['th', setCellAttrs(node), 0]
+    },
+  },
+  [constants.NODES.TEXT.text]: {
+    group: constants.NODES.GROUPS.inline,
+  },
+}
+
+const richTextNodes = []
+const richTextElementsStyleNameToTagMap = new Map()
+
+const editableInlineWithFieldsEnhancements = [] // marks with attrs
+const editableLineWithFieldsEnhancements = [] // nodes text content with attrs
+const editableInlineWithNoFieldsEnhancements = [] // marks
+const editableLineWithNoFieldsEnhancements = [] // nodes text content
+const nonEditableInlineEnhancements = [] // nodes no content with attrs
+const nonEditableLineEnhancements = [] // nodes no content with attrs
+const nonEditableLineWithNoFieldsEnhancements = [] // nodes
+
+/**
+ * The alignment nodes (left, center, right) need special
+ * handling and as such are configured here accordingly. We
+ * still use the menu config later to determine whether they should
+ * be included in the schema or not.
+ *
+ * @type {Object.<Object|string>}
+ */
+const alignmentNodes = {
+  [constants.NODES.ALIGNED.alignedLeft]: {
+    attrs: {
+      class: { default: constants.CLASSES.CMS_ALIGN_LEFT },
+    },
+    content: `${constants.NODES.GROUPS.inline}*`,
+    group: `${constants.NODES.GROUPS.aligned}`,
+    parseDOM: [
+      {
+        tag: `.${constants.CLASSES.CMS_ALIGN_LEFT}`,
+      },
+      {
+        tag: `.${constants.CLASSES.RTE_ALIGN_LEFT}`,
+      },
+    ],
+    toDOM(node) {
+      return [constants.ELEMENTS.DIV, node.attrs, 0]
+    },
+  },
+  [constants.NODES.ALIGNED.alignedRight]: {
+    attrs: {
+      class: { default: constants.CLASSES.CMS_ALIGN_RIGHT },
+    },
+    content: `${constants.NODES.GROUPS.inline}*`,
+    group: `${constants.NODES.GROUPS.aligned}`,
+    parseDOM: [
+      {
+        tag: `.${constants.CLASSES.CMS_ALIGN_RIGHT}`,
+      },
+      {
+        tag: `.${constants.CLASSES.RTE_ALIGN_RIGHT}`,
+      },
+    ],
+    toDOM(node) {
+      return [constants.ELEMENTS.DIV, node.attrs, 0]
+    },
+  },
+  [constants.NODES.ALIGNED.alignedCenter]: {
+    attrs: {
+      class: { default: constants.CLASSES.CMS_ALIGN_CENTER },
+    },
+    content: `${constants.NODES.GROUPS.inline}*`,
+    group: `${constants.NODES.GROUPS.aligned}`,
+    parseDOM: [
+      {
+        tag: `.${constants.CLASSES.CMS_ALIGN_CENTER}`,
+      },
+      {
+        tag: `.${constants.CLASSES.RTE_ALIGN_CENTER}`,
+      },
+    ],
+    toDOM(node) {
+      return [constants.ELEMENTS.DIV, node.attrs, 0]
+    },
+  },
+}
+
+/**
+ * The list nodes (ul, ol) need special
+ * handling and as such are configured here accordingly. We
+ * still use the menu config later to determine whether they should
+ * be included in the schema or not.
+ *
+ * @type {Object.<Object|string>}
+ */
+const listNodes = {
+  [constants.NODES.LISTS.ol]: {
+    content: `${constants.NODES.GROUPS.listItem}*`,
+    group: `${constants.NODES.GROUPS.list}`,
+    attrs: {
+      class: { default: constants.CLASSES.RTE_LIST_ORDERED },
+      id: { default: 'rte-' + uuidv1() },
+      order: { default: 1 },
+      attributes: { default: {} },
+    },
+    marks: '_',
+    parseDOM: [
+      {
+        tag: 'ol',
+        getAttrs(dom) {
+          const attributes = {}
+          attributes['class'] = constants.CLASSES.RTE_LIST_ORDERED
+          Array.from(dom.attributes).forEach(
+            (attr) => (attributes[attr.name] = attr.value),
+          )
+          return {
+            id: dom.id || 'rte-' + uuidv1(),
+            order: dom.hasAttribute('start') ? +dom.getAttribute('start') : 1,
+            attributes,
+          }
+        },
+      },
+    ],
+    toDOM(node) {
+      return [
+        'ol',
+        {
+          ...node.attrs.attributes,
+          id: node.attrs.id || 'rte-' + uuidv1(),
+          start: node.attrs.order || 1,
+          class: constants.CLASSES.RTE_LIST_ORDERED,
+        },
+        0,
+      ]
+    },
+  },
+  [constants.NODES.LISTS.ul]: {
+    content: `${constants.NODES.GROUPS.listItem}*`,
+    group: `${constants.NODES.GROUPS.list}`,
+    attrs: {
+      class: { default: constants.CLASSES.RTE_LIST_UNORDERED },
+      id: { default: 'rte-' + uuidv1() },
+      attributes: { default: {} },
+    },
+    marks: '_',
+    parseDOM: [
+      {
+        tag: 'ul',
+        getAttrs(dom) {
+          const attributes = {}
+          attributes['class'] = constants.CLASSES.RTE_LIST_UNORDERED
+          Array.from(dom.attributes).forEach(
+            (attr) => (attributes[attr.name] = attr.value),
+          )
+          return {
+            id: dom.id || 'rte-' + uuidv1(),
+            attributes,
+          }
+        },
+      },
+    ],
+    toDOM(node) {
+      return [
+        'ul',
+        {
+          ...node.attrs.attributes,
+          id: node.attrs.id || 'rte-' + uuidv1(),
+        },
+        0,
+      ]
+    },
+  },
+  [constants.NODES.LISTS.listItem]: {
+    content: LIST_ITEM_CONTENT,
+    attrs: {
+      class: { default: constants.CLASSES.CMS_LI_LIST_ITEM_DIV },
+    },
+    marks: '_',
+    parseDOM: [
+      {
+        tag: constants.ELEMENTS.LI,
+      },
+      {
+        tag: `.${constants.CLASSES.CMS_LI_LIST_ITEM_DIV}`,
+      },
+    ],
+    toDOM(node) {
+      return [constants.ELEMENTS.LI, node.attrs, 0]
+    },
+    defining: true,
+  },
+  [constants.NODES.LISTS.listItemDiv]: {
+    content: `${constants.NODES.GROUPS.inline}*`,
+    isTextBlock: true,
+    group: constants.NODES.GROUPS.block,
+    attrs: {
+      class: { default: constants.CLASSES.CMS_LIST_ITEM_DIV },
+    },
+    marks: '_',
+    parseDOM: [
+      {
+        tag: `.${constants.CLASSES.CMS_LIST_ITEM_DIV}`,
+      },
+    ],
+    toDOM(node) {
+      return [constants.ELEMENTS.DIV, node.attrs, 0]
+    },
+  },
+}
+
+/**
+ * This builds the enhancements node objects. Only used
+ * when a toolbar configuration calls for enhancements
+ * inclusion.
+ */
+const getEnhancements = () => {
+  const enhancements = {}
+
+  RICH_TEXT_ELEMENTS_PM.forEach((obj) => {
+    if (
+      obj.tag === 'table' ||
+      obj.tag === 'tr' ||
+      obj.tag === 'td' ||
+      obj.tag === 'ul' ||
+      obj.tag === 'ol'
+    ) {
+      return
+    }
+    richTextElementsStyleNameToTagMap.set(obj.styleName, obj.tag)
+    if (obj.popup) {
+      if (obj.readOnly) {
+        if (obj.line) {
+          nonEditableLineEnhancements.push(obj)
+        } else {
+          nonEditableInlineEnhancements.push(obj)
+        }
+      } else {
+        if (obj.line) {
+          editableLineWithFieldsEnhancements.push(obj)
+        } else {
+          editableInlineWithFieldsEnhancements.push(obj)
+        }
+      }
+    } else {
+      if (obj.readOnly) {
+        if (obj.line) {
+          nonEditableLineWithNoFieldsEnhancements.push(obj)
+        } else {
+          nonEditableInlineEnhancements.push(obj)
+        }
+      } else {
+        if (obj.line) {
+          editableLineWithNoFieldsEnhancements.push(obj)
+        } else {
+          editableInlineWithNoFieldsEnhancements.push(obj)
+        }
+      }
+    }
+  })
+
+  nonEditableLineWithNoFieldsEnhancements.forEach((obj) => {
+    enhancements[obj.tag] = {
+      attrs: {
+        class: {
+          default: '',
+        },
+        contenteditable: {
+          default: false,
+        },
+        meta: { default: {} },
+        label: { default: '' },
+      },
+      content: 'inline*',
+      group: 'block',
+      toDOM(node) {
+        node.attrs.class = `rte2-style-${obj.styleName}`
+        if (obj.extraCssClasses) {
+          node.attrs.class = `${node.attrs.class} ${obj.extraCssClasses}`
+        }
+        node.attrs.meta = obj
+        return [obj.tag, node.attrs, 0]
+      },
+      parseDOM: [
+        {
+          tag: obj.tag,
+          getAttrs(dom) {
+            return {
+              label: dom.innerHTML,
+              meta: obj,
+            }
+          },
+        },
+        {
+          tag: `.${obj.styleName}`,
+          getAttrs(dom) {
+            return {
+              label: dom.innerHTML,
+              meta: obj,
+            }
+          },
+        },
+      ],
+    }
+  })
+
+  editableLineWithNoFieldsEnhancements.forEach((obj) => {
+    enhancements[obj.tag] = {
+      attrs: {
+        class: {
+          default: '',
+        },
+        meta: { default: {} },
+        label: { default: '' },
+      },
+      content: 'inline*',
+      group: 'block',
+      toDOM(node) {
+        node.attrs.class = `rte2-style-${obj.styleName}`
+        if (obj.extraCssClasses) {
+          node.attrs.class = `${node.attrs.class} ${obj.extraCssClasses}`
+        }
+        node.attrs.meta = obj
+        return [obj.tag, node.attrs, 0]
+      },
+      parseDOM: [
+        {
+          tag: obj.tag,
+          getAttrs(dom) {
+            return {
+              label: obj.readOnly ? dom.innerHTML : obj.displayName,
+              meta: obj,
+            }
+          },
+        },
+        {
+          tag: `.${obj.styleName}`,
+          getAttrs(dom) {
+            return {
+              label: obj.readOnly ? dom.innerHTML : obj.displayName,
+              meta: obj,
+            }
+          },
+        },
+      ],
+    }
+  })
+
+  editableLineWithFieldsEnhancements.forEach((obj) => {
+    enhancements[obj.tag] = {
+      attrs: {
+        attributes: { default: {} },
+        label: { default: '' },
+        meta: { default: {} },
+        typeId: { default: '' },
+        id: { default: '' },
+      },
+      content: 'inline*',
+      group: 'block',
+      toDOM(node) {
+        const domAttrs = {
+          label: node.attrs.label,
+          ...node.attrs.attributes,
+        }
+        if (obj.extraCssClasses) {
+          domAttrs.class = `${domAttrs.class || ''} ${obj.extraCssClasses}`
+        }
+        return [obj.tag, domAttrs, 0]
+      },
+      parseDOM: [
+        {
+          tag: obj.tag,
+          getAttrs(dom) {
+            const attributes = [...dom.attributes].reduce((prev, next) => {
+              prev[next.name] = next.nodeValue
+              return prev
+            }, {})
+            return {
+              attributes: attributes,
+              label: dom.innerHTML,
+              meta: obj,
+              id: dom.id || `enhancement-${uuidv1()}`,
+            }
+          },
+        },
+      ],
+    }
+  })
+
+  nonEditableLineEnhancements.forEach((obj) => {
+    enhancements[obj.tag] = {
+      attrs: {
+        attributes: { default: {} },
+        label: { default: '' },
+        meta: { default: {} },
+        id: { default: '' },
+      },
+      inline: false,
+      marks: 'del ins',
+      group: 'block',
+      toDOM(node) {
+        const element = document.createElement(obj.tag)
+        element.innerHTML = node.attrs.label
+        element.setAttribute('label', node.attrs.label)
+        element.setAttribute('id', node.attrs.id)
+
+        if (node.attrs.attributes) {
+          for (const [name, value] of Object.entries(node.attrs.attributes)) {
+            element.setAttribute(name, value)
+          }
+        }
+
+        if (obj.extraCssClasses) {
+          element.classList.add(...obj.extraCssClasses.split(' '))
+        }
+
+        return element
+      },
+      parseDOM: [
+        {
+          tag: obj.tag,
+          getAttrs(dom) {
+            const attributes = [...dom.attributes].reduce((prev, next) => {
+              prev[next.name] = next.nodeValue
+              return prev
+            }, {})
+
+            // Clean up any pre-existing bsp-line tags within the enhancement preview
+            const children = dom.querySelectorAll('bsp-line')
+            const isMultiLine = children.length > 1
+            for (const item of children) {
+              const br = isMultiLine ? [document.createElement('br')] : []
+              item.replaceWith(...item.childNodes, ...br)
+            }
+
+            return {
+              attributes: attributes,
+              label: dom.innerHTML,
+              meta: obj,
+              id: `enhancement-${uuidv1()}`,
+            }
+          },
+        },
+      ],
+    }
+  })
+
+  nonEditableInlineEnhancements.forEach((obj) => {
+    enhancements[obj.tag] = {
+      attrs: {
+        attributes: { default: {} },
+        label: { default: '' },
+        meta: { default: {} },
+        id: { default: '' },
+      },
+      inline: true,
+      group: constants.NODES.GROUPS.inline,
+      toDOM(node) {
+        const text =
+          node?.content?.textBetween(0, node.content.size) || node.attrs.label
+        const element = document.createElement(obj.tag)
+        element.innerHTML = text
+        element.setAttribute('label', text)
+        element.setAttribute('id', node.attrs.id)
+
+        for (const [name, value] of Object.entries(node.attrs.attributes)) {
+          element.setAttribute(name, value)
+        }
+
+        if (obj.extraCssClasses) {
+          element.classList.add(...obj.extraCssClasses.split(' '))
+        }
+
+        return element
+      },
+      parseDOM: [
+        {
+          tag: obj.tag,
+          getAttrs(dom) {
+            const attributes = [...dom.attributes].reduce((prev, next) => {
+              prev[next.name] = next.nodeValue
+              return prev
+            }, {})
+            return {
+              attributes: attributes,
+              label: dom.text || dom.textContent,
+              meta: obj,
+              id: `enhancement-${uuidv1()}`,
+            }
+          },
+        },
+      ],
+    }
+  })
+
+  return {
+    ...enhancements,
+  }
+}
+
+/**
+ * This builds the nodes object for the schema nodes property.
+ * The custom menubar indicates inclusion of the enhancements
+ * by the `richTextElements` property. Otherwise they are not
+ * includedin the nodes list.
+ *
+ * @param {Object.<Object|string>} customMenuBar
+ * @param {Object.<string>} richTextElementTags Rich Text Elements that are allowed in
+ *    this instance of the RTE
+ * @return {Object.<Object|string} The schema marks object.
+ */
+const getNodesConfig = (customMenuBar, richTextElementTags) => {
+  let nodes = {
+    ...baseNodes,
+    ...alignmentNodes,
+    ...listNodes,
+  }
+
+  const hasRichTextEnhancements = customMenuBar.some((obj) => {
+    return !!obj['richTextElements']
+  })
+
+  const hasCustomEnhancements = !!(
+    hasRichTextEnhancements ||
+    richTextElementTags ||
+    RICH_TEXT_ELEMENTS_PM
+  )
+
+  if (hasCustomEnhancements) {
+    const enhancements = getEnhancements()
+    const richTextNodesConfig = {}
+    richTextNodes.forEach((obj) => {
+      richTextNodesConfig[obj.tag] = {
+        content: `${constants.NODES.GROUPS.inline}*`,
+        group: 'block',
+        attrs: {
+          class: { default: `rte2-style-${obj.styleName}` },
+        },
+        parseDOM: [
+          {
+            tag: obj.tag,
+          },
+          {
+            tag: `.${obj.styleName}`,
+          },
+        ],
+        toDOM(node) {
+          return [obj.tag, node.attrs, 0]
+        },
+      }
+    })
+    nodes = {
+      ...nodes,
+      ...enhancements,
+      ...richTextNodesConfig,
+    }
+  }
+
+  return nodes
+}
+
+/**
+ * Configuration for mutually exclusive marks. Will
+ * be used when building the schema's mark property.
+ *
+ * @param {Object.<string>} customMenuBar
+ */
+const markExcludes = {
+  subscript: 'superscript',
+  superscript: 'subscript',
+}
+
+/**
+ * This builds the marks object for the schema marks property.
+ * The marks are represented in the configuration from the
+ * server as `inline: true` and must have the following
+ * properties set: `className`, `style`. We have hard-coded that
+ * `style` can not be of value `link` because these are handled
+ * as enhancements. They also must not have the property `separator`.
+ *
+ * @param {Object.<Object|string>} customMenuBar
+ * @return {Object.<Object|string>} The schema marks object.
+ */
+const getMarksConfig = (customMenuBar, compliantTagNameMap) => {
+  const marks = {}
+  const marksArr = customMenuBar.filter((mark) => {
+    return (
+      mark.inline &&
+      mark.className &&
+      mark.style &&
+      mark.style !== 'link' &&
+      !mark.separator
+    )
+  })
+
+  /**
+   * Hard-coded Default config for google cut and paste
+   * marks. This presumes the keys in this object literal
+   * are what is given from the backend.
+   *
+   * @type {Object.<Array.<Object.<string>>>}
+   */
+  let googCopyAndPasteConfig = {
+    italic: [
+      {
+        style: 'font-style=italic',
+      },
+    ],
+    bold: [
+      {
+        style: 'font-weight=bold',
+      },
+      {
+        style: 'font-weight=700',
+      },
+    ],
+    underline: [
+      {
+        style: 'text-decoration=underline',
+      },
+    ],
+    superscript: [
+      {
+        style: 'vertical-align=super',
+      },
+    ],
+    subscript: [
+      {
+        style: 'vertical-align=sub',
+      },
+    ],
+    strikethrough: [
+      {
+        style: 'text-decoration=line-through',
+      },
+      {
+        style: 'text-decoration=underline line-through',
+      },
+    ],
+  }
+
+  // The order in which you define your marks — those with lower precedence
+  // (defined earlier) always wrap around those with higher precedence - and
+  // mark DOM elements for adjacent inline nodes are combined when possible,
+  // so with links for example, which are typically low-precedence, you tend
+  // to get uninterrupted nodes.
+  editableInlineWithFieldsEnhancements.forEach((mark) => {
+    marks[mark.tag] = {
+      attrs: {
+        class: { default: '' },
+        attributes: { default: {} },
+        label: { default: '' },
+        meta: { default: {} },
+        id: { default: '' },
+      },
+      inclusive: mark.inclusive,
+      toDOM(node) {
+        const domAttrs = {
+          label: node.attrs.label,
+          class: `rte2-style-${mark.styleName}`,
+          id: node.attrs.id,
+          ...node.attrs.attributes,
+        }
+        if (mark.extraCssClasses) {
+          domAttrs.class = `${domAttrs.class} ${mark.extraCssClasses}`
+        }
+        return [mark.tag, domAttrs, 0]
+      },
+      parseDOM: [
+        {
+          tag: `.rte2-style-${mark.styleName}`,
+          getAttrs(dom) {
+            const attributes = [...dom.attributes].reduce((prev, next) => {
+              prev[next.name] = next.nodeValue
+              return prev
+            }, {})
+            return {
+              attributes: attributes,
+              label: dom.text || dom.textContent || attributes.label,
+              meta: mark,
+              class: `rte2-style-${mark.styleName}`,
+              id: attributes.id || `enhancement-${uuidv1()}`,
+            }
+          },
+        },
+        {
+          tag: mark.tag,
+          getAttrs(dom) {
+            const attributes = [...dom.attributes].reduce((prev, next) => {
+              prev[next.name] = next.nodeValue
+              return prev
+            }, {})
+            return {
+              attributes: attributes,
+              label: dom.text || dom.textContent || attributes.label,
+              meta: mark,
+              class: `rte2-style-${mark.styleName}`,
+              id: attributes.id || `enhancement-${uuidv1()}`,
+            }
+          },
+        },
+      ],
+    }
+    if (mark.clear && mark.clear.length) {
+      const excludes = mark.clear.map((item) => {
+        return richTextElementsStyleNameToTagMap.get(item)
+      })
+      marks[mark.tag].excludes = excludes.join(' ')
+    }
+  })
+  editableInlineWithNoFieldsEnhancements.forEach((mark) => {
+    marks[mark.tag] = {
+      attrs: {
+        attributes: { default: {} },
+        class: { default: '' },
+      },
+      toDOM(node) {
+        const domAttrs = {
+          class: `rte2-style-${mark.styleName} rte2-style-${mark.styleName}-start rte2-style-${mark.styleName}-end`,
+          ...node.attrs.attributes,
+        }
+        if (mark.extraCssClasses) {
+          domAttrs.class = `${domAttrs.class} ${mark.extraCssClasses}`
+        }
+        return [mark.tag, domAttrs, 0]
+      },
+      parseDOM: [
+        {
+          tag: `.rte2-style-${mark.styleName}`,
+          getAttrs(dom) {
+            const attributes = [...dom.attributes].reduce((prev, next) => {
+              prev[next.name] = next.nodeValue
+              return prev
+            }, {})
+            return {
+              class: `rte2-style-${mark.styleName}`,
+              attributes: attributes,
+            }
+          },
+        },
+        {
+          tag: mark.tag,
+          getAttrs(dom) {
+            const attributes = [...dom.attributes].reduce((prev, next) => {
+              prev[next.name] = next.nodeValue
+              return prev
+            }, {})
+            return {
+              attributes: attributes,
+              class: `rte2-style-${mark.styleName}`,
+            }
+          },
+        },
+      ],
+    }
+    if (mark.clear && mark.clear.length) {
+      const excludes = mark.clear.map((item) => {
+        return richTextElementsStyleNameToTagMap.get(item)
+      })
+      marks[mark.tag].excludes = excludes.join(' ')
+    }
+
+    if (googCopyAndPasteConfig.hasOwnProperty(mark.tag)) {
+      googCopyAndPasteConfig[mark.tag].forEach((rule) => {
+        marks[mark.tag].parseDOM.push(rule)
+      })
+    }
+  })
+
+  // Projects can decorate the default config for cut and paste marks by
+  // providing a global `PM_CLIPBOARD_SANITIZATION_OBJ` object. It should
+  // follow the same format as the `googCopyAndPasteConfig` object above.
+  // Only rich text elements are supported currently.
+  if (window.PM_CLIPBOARD_SANITIZATION_OBJ) {
+    const customClipboardSanitizationObject = {}
+    Object.keys(window.PM_CLIPBOARD_SANITIZATION_OBJ).forEach((key) => {
+      const sanitizedKey = compliantTagNameMap.get(key)
+      if (sanitizedKey) {
+        customClipboardSanitizationObject[sanitizedKey] =
+          window.PM_CLIPBOARD_SANITIZATION_OBJ[key]
+      } else {
+        console.warn(`${key} is not a valid rich text element.`)
+      }
+    })
+
+    googCopyAndPasteConfig = Object.assign(
+      {},
+      googCopyAndPasteConfig,
+      customClipboardSanitizationObject,
+    )
+  }
+
+  marksArr.forEach((mark) => {
+    const className = mark.className.replace('toolbar', 'style')
+    const excludes = markExcludes[mark.style]
+    marks[mark.style] = {
+      attrs: {
+        class: { default: '' },
+      },
+      toDOM(node) {
+        node.attrs.class = className
+        return [mark.text.toLowerCase(), node.attrs, 0]
+      },
+      parseDOM: [
+        {
+          tag: `.${className}`,
+          getAttrs() {
+            return { class: className }
+          },
+        },
+        {
+          tag: mark.style.toLowerCase(),
+          getAttrs() {
+            return { class: className }
+          },
+        },
+        {
+          tag: mark.text.toLowerCase(),
+          getAttrs() {
+            return { class: className }
+          },
+        },
+      ],
+      excludes,
+    }
+    if (googCopyAndPasteConfig.hasOwnProperty(mark.style)) {
+      googCopyAndPasteConfig[mark.style].getAttrs = () => {
+        return { class: className }
+      }
+      googCopyAndPasteConfig[mark.style].forEach((rule) => {
+        marks[mark.style].parseDOM.push(rule)
+      })
+    }
+  })
+
+  marks.ai = {
+    attrs: {
+      class: { default: 'rte2-style-ins-ai' },
+      'data-user-label': { default: '' },
+      'data-time': { default: PENDING },
+      'data-user-id': { default: '' },
+      'data-chat-id': { default: '' },
+      'data-response-id': { default: '' },
+    },
+    inclusive: false,
+    toDOM(node) {
+      return ['ai', node.attrs, 0]
+    },
+    parseDOM: [
+      {
+        tag: 'ai',
+        getAttrs(dom) {
+          const dataUserLabel = dom.getAttribute('data-user-label')
+          const dataTime = dom.getAttribute('data-time')
+          const dataUserId = dom.getAttribute('data-user-id')
+          const dataChatId = dom.getAttribute('data-chat-id')
+          const dataResponseId = dom.getAttribute('data-response-id')
+          return {
+            'data-user-label': dataUserLabel,
+            'data-time': dataTime,
+            'data-user-id': dataUserId,
+            'data-chat-id': dataChatId,
+            'data-response-id': dataResponseId,
+            title: dataTime ? `${dataUserLabel}: ${dataTime}` : dataUserLabel,
+          }
+        },
+      },
+    ],
+  }
+
+  marks.aiInlineIns = {
+    attrs: {
+      class: { default: 'rte2-style-ai-inline-ins' },
+    },
+    inclusive: false,
+    toDOM(node) {
+      return ['ai-inline-ins', node.attrs, 0]
+    },
+    parseDOM: [
+      {
+        tag: 'ai-inline-ins',
+      },
+    ],
+  }
+
+  marks.aiInlineDel = {
+    attrs: {
+      class: { default: 'rte2-style-ai-inline-del' },
+    },
+    inclusive: false,
+    toDOM(node) {
+      return ['ai-inline-del', node.attrs, 0]
+    },
+    parseDOM: [
+      {
+        tag: 'ai-inline-del',
+      },
+    ],
+  }
+
+  marks.ins = {
+    attrs: {
+      class: { default: 'rte2-style-ins-insert' },
+      'data-user-label': { default: '' },
+      'data-time': { default: PENDING },
+      'data-user-id': { default: '' },
+      'data-target-id': { default: '' },
+      title: { default: '' },
+    },
+    excludes: 'del ins',
+    inclusive: false,
+    toDOM(node) {
+      return ['ins', node.attrs, 0]
+    },
+    parseDOM: [
+      {
+        tag: 'ins',
+        getAttrs(dom) {
+          const dataUserLabel = dom.getAttribute('data-user-label')
+          const dataTime = dom.getAttribute('data-time')
+          const dataUserId = dom.getAttribute('data-user-id')
+          const dataTargetId = dom.getAttribute('data-target-id')
+          return {
+            'data-user-label': dataUserLabel,
+            'data-time': dataTime,
+            'data-user-id': dataUserId,
+            'data-target-id': dataTargetId,
+            title: dataTime ? `${dataUserLabel}: ${dataTime}` : dataUserLabel,
+          }
+        },
+      },
+    ],
+  }
+
+  marks.del = {
+    attrs: {
+      class: { default: 'rte2-style-ins-delete' },
+      'data-user-label': { default: '' },
+      'data-time': { default: PENDING },
+      'data-user-id': { default: '' },
+      'data-target-id': { default: '' },
+      title: { default: '' },
+    },
+    inclusive: false,
+    toDOM(node) {
+      return ['del', node.attrs, 0]
+    },
+    parseDOM: [
+      {
+        tag: 'del',
+        getAttrs(dom) {
+          const dataUserLabel = dom.getAttribute('data-user-label')
+          const dataTime = dom.getAttribute('data-time')
+          const dataUserId = dom.getAttribute('data-user-id')
+          const dataTargetId = dom.getAttribute('data-target-id')
+          return {
+            'data-user-label': dataUserLabel,
+            'data-time': dataTime,
+            'data-user-id': dataUserId,
+            'data-target-id': dataTargetId,
+            title: dataTime ? `${dataUserLabel}: ${dataTime}` : dataUserLabel,
+          }
+        },
+      },
+    ],
+  }
+  marks.html = {
+    attrs: {
+      class: { default: 'rte2-style-html' },
+    },
+    inclusive: marks.inclusive,
+    toDOM(node) {
+      return ['code', node.attrs, 0]
+    },
+    parseDOM: [
+      {
+        tag: 'code',
+      },
+    ],
+  }
+
+  marks.comment = {
+    excludes: '_',
+    attrs: {
+      class: {
+        default:
+          'rte2-style-comment rte2-style-comment-start rte2-style-comment-end',
+      },
+      'data-user-id': {
+        default: '',
+      },
+      'data-user-label': {
+        default: '',
+      },
+      'data-time': {
+        default: '',
+      },
+      'data-replies': {
+        default: '',
+      },
+      'data-collapse': {
+        default: false,
+      },
+      content: {
+        default: '',
+      },
+      title: {
+        default: '',
+      },
+    },
+    toDOM(node) {
+      return ['comment', node.attrs, 0]
+    },
+    parseDOM: [
+      {
+        tag: 'comment',
+        getAttrs(dom) {
+          const dataUserLabel = dom.getAttribute('data-user-label')
+          const dataUserId = dom.getAttribute('data-user-id')
+          const dataTime = dom.getAttribute('data-time')
+          const replies = dom.getAttribute('data-replies')
+          const collapse = dom.getAttribute('data-collapse')
+          return {
+            'data-user-label': dataUserLabel,
+            'data-user-id': dataUserId,
+            'data-time': dataTime,
+            'data-replies': replies,
+            'data-collapse': collapse,
+            title: `${dataUserLabel}: ${dataTime}`,
+            content: dom.innerText,
+          }
+        },
+      },
+      {
+        tag: '.rte2-style-comment',
+        getAttrs(dom) {
+          const dataUserLabel = dom.getAttribute('data-user-label')
+          const dataUserId = dom.getAttribute('data-user-id')
+          const dataTime = dom.getAttribute('data-time')
+          const replies = dom.getAttribute('data-replies')
+          const collapse = dom.getAttribute('data-collapse')
+          return {
+            'data-user-label': dataUserLabel,
+            'data-user-id': dataUserId,
+            'data-time': dataTime,
+            'data-replies': replies,
+            'data-collapse': collapse,
+            title: `${dataUserLabel}: ${dataTime}`,
+            content: dom.innerText,
+          }
+        },
+      },
+      {
+        tag: '.rte-comment',
+        getAttrs(dom) {
+          const dataUserLabel = dom.getAttribute('data-user-label')
+          const dataUserId = dom.getAttribute('data-user-id')
+          const dataTime = dom.getAttribute('data-time')
+          const replies = dom.getAttribute('data-replies')
+          const collapse = dom.getAttribute('data-collapse')
+          return {
+            'data-user-label': dataUserLabel,
+            'data-user-id': dataUserId,
+            'data-time': dataTime,
+            'data-replies': replies,
+            'data-collapse': collapse,
+            title: `${dataUserLabel}: ${dataTime}`,
+            content: dom.innerContent,
+          }
+        },
+      },
+    ],
+  }
+
+  return marks
+}
+
+/**
+ * Stitches together the schema from the nodes
+ * and marks that are returned from their
+ * 'getter' functions above.
+ *
+ * @param {Object.<Object|string>} customMenuBar
+ * @param {Object.<string>} richTextElementTags Rich Text Elements that are allowed in
+ *    this instance of the RTE
+ * @return {Prosemirror.Model.Schema}
+ */
+const buildSchemaFromConfig = (
+  customMenuBar,
+  richTextElementTags,
+  compliantTagNameMap,
+) => {
+  const nodes = getNodesConfig(customMenuBar, richTextElementTags)
+  const marks = getMarksConfig(customMenuBar, compliantTagNameMap)
+  return new Schema({ nodes, marks })
+}
+
+export { buildSchemaFromConfig }