npm - @brightspot/ui - Versions diffs - 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (725) hide show

package/src/legacy/tool-ui/src/main/webapp/v4/__tests__/integration/rte/plugins/track_manager/insert.html ADDED Viewed

@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>RTE Tests</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="/globals.js"></script>
+    <script src="http://localhost:8080/cms/dist/v4.js"></script>
+    <style>
+      .ProseMirrorContainer:focus-within .ProseMirrorToolbar {
+        position: static !important;
+      }
+    </style>
+  </head>
+  <body>
+    <textarea
+      class="richtext"
+      id="insert"
+      name="00000168-95e5-d67a-a77b-bdfd1c2e0000/shortBiography"
+      placeholder=""
+      data-dynamic-placeholder="${content.shortBiographyPlaceholder}"
+      data-dynamic-field-name="shortBiography"
+      data-editable-placeholder=""
+      data-rte-toolbar="brightspot.core.tool.LargeRichTextToolbar"
+      data-rte-lines="0"
+      data-suggested-minimum-message="Too Short"
+      data-suggested-maximum-message="Too Long"
+      data-inline="true"
+      data-user="trey"
+      data-user-id="00000164-149f-dc94-a1e4-fedf67600000"
+      data-first-draft="true"
+      data-track-changes="true"
+    ></textarea>
+  </body>
+</html>

package/src/legacy/tool-ui/src/main/webapp/v4/__tests__/unit/Sortable.test.js ADDED Viewed

@@ -0,0 +1,105 @@
+import { findSortableContainers, updateInputs } from '../../Sortable'
+const singleRoot = document.createElement('div')
+singleRoot.id = 'single-root'
+singleRoot.innerHTML = `
+    <ol id="sortableContainer" data-sortable-valid-item-types="0000015e-5890-d5b0-ab5e-fbbe047d0006">
+        <li id="li-one" data-sortable-item-type="0000015e-5890-d5b0-ab5e-fbbe047d0006">One</li>
+    <ol>
+`
+document.body.appendChild(singleRoot)
+it('Finds the surrounding sortable Container.', () => {
+  const sortableItem = document.querySelector('#li-one')
+  const sortableContainer = findSortableContainers(sortableItem)
+  const expectedContainerArr = [document.querySelector('#sortableContainer')]
+  expect(sortableContainer).toEqual(expectedContainerArr)
+})
+const noAttributesRoot = document.createElement('div')
+noAttributesRoot.id = 'no-attrs-root'
+noAttributesRoot.innerHTML = `
+    <ol id="sortableContainer2" class="Sortable">
+        <li id="li-two">One</li>
+    <ol>
+`
+document.body.appendChild(noAttributesRoot)
+// This tests for sortables that are missing the item-type and data-sortable-valid-item-types attrs.
+it('Finds all sortable Containers in the fallback scenario.', () => {
+  const sortableItem = document.querySelector('#li-two')
+  const sortableContainer = findSortableContainers(sortableItem)
+  const expectedContainerArr = [document.querySelector('#sortableContainer2')]
+  expect(sortableContainer).toEqual(expectedContainerArr)
+})
+const ancestryRoot = document.createElement('div')
+ancestryRoot.id = 'ancestry-root'
+ancestryRoot.innerHTML = `
+<ol id="ancestry-0" data-sortable-valid-item-types="foo">
+    <li>
+        <ol id="false-ancestry"></ol>
+    </li>
+    <li>
+        <ol id="ancestry-1" data-sortable-valid-item-types="foo">
+            <li>
+                <ol id="ancestry-2" data-sortable-valid-item-types="foo">
+                    <li data-sortable-item-type="foo">One</li>
+                    <li id="deepitem" data-sortable-item-type="foo">Two</li>
+                    <li data-sortable-item-type="foo">Three</li>
+                <ol>
+            </li>
+        </ol>
+    </li>
+</ol>
+`
+document.body.appendChild(ancestryRoot)
+it('Finds all sortable Containers in the ancestry.', () => {
+  const sortableItem = document.querySelector('#deepitem')
+  const sortableContainer = findSortableContainers(sortableItem)
+  const expectedContainerArr = []
+  expectedContainerArr.push(document.querySelector('#ancestry-0'))
+  expectedContainerArr.push(document.querySelector('#ancestry-1'))
+  expectedContainerArr.push(document.querySelector('#ancestry-2'))
+  expect(sortableContainer).toEqual(expectedContainerArr)
+})
+const sourceRoot = document.createElement('div')
+sourceRoot.innerHTML = `
+<!-- From -->
+<ol id="SourceSortableFrom" class="Sortable" data-sortable-input-name="cow/old" data-sortable-valid-item-types="cow">
+    <li data-sortable-item-type="cow">
+        <input type="hidden" name="cow/old.foo">
+        <input type="hidden" name="cow/old.bar">
+    </li>
+</ol>
+<!-- To -->
+<div id="SourceSortableTo">
+    <ol class="Sortable" data-sortable-input-name="cow/new" data-sortable-valid-item-types="cow">
+        <li data-sortable-item-type="cow">
+            <input type="hidden" name="cow/old.foo">
+            <input type="hidden" name="cow/old.bar">
+        </li>
+    </ol>
+</div>
+`
+document.body.appendChild(sourceRoot)
+it('Updates the form input names when an item is sorted into a new container.', () => {
+  const sourceContainer = sourceRoot.querySelector('#SourceSortableFrom')
+  const source = sourceRoot.querySelector('#SourceSortableTo li')
+  const originalSource = [sourceRoot.querySelector('#SourceSortableFrom li')]
+  updateInputs(sourceContainer, source, originalSource)
+  const expectedInputNames = ['cow/new.foo', 'cow/new.bar']
+  const changedInputNames = [
+    ...sourceRoot.querySelectorAll('#SourceSortableFrom input'),
+  ].map((input) => input.name)
+  expect(changedInputNames).toEqual(expectedInputNames)
+})

package/src/legacy/tool-ui/src/main/webapp/v4/__tests__/unit/rte/ProseMirror.test.js ADDED Viewed

@@ -0,0 +1,41 @@
+import { RTE } from '../../../rte/ProseMirror'
+import { largetextArea } from '../../../__mocks__/textArea.mock'
+it('Builds the ProseMirror element', () => {
+  const textAreaContainer = largetextArea.cloneNode(true)
+  const element = textAreaContainer.querySelector('textarea')
+  element.value = 'test<br/>test'
+  const customMenuType = element.getAttribute('data-rte-toolbar')
+  const customMenuBar = RICH_TEXT_TOOLBARS[customMenuType]
+  const numLines = element.getAttribute('data-rte-lines')
+  const compliantTagNameMap = new Map([
+    ['a', 'a'],
+    ['bsp-image', 'bsp-image'],
+    ['bsp-image', 'bsp-image'],
+    ['bsp-video', 'bsp-video'],
+    ['blue', 'blue'],
+    ['plum', 'plum'],
+  ])
+  const rte = new RTE(
+    element,
+    customMenuBar,
+    false,
+    'admin',
+    '000-000-000',
+    null,
+    'textarea',
+    false,
+    compliantTagNameMap,
+    parseInt(numLines, 10) || 1,
+  )
+  rte.init()
+  const proseMirrorElement = textAreaContainer.querySelector('.ProseMirror')
+  const proseMirrorToolbar = textAreaContainer.querySelector(
+    '.ProseMirrorToolbar',
+  )
+  const lines = textAreaContainer.querySelectorAll('bsp-line')
+  expect(proseMirrorElement).not.toBe(null)
+  expect(proseMirrorToolbar).not.toBe(null)
+  expect(lines.length).toBe(2)
+})

package/src/legacy/tool-ui/src/main/webapp/v4/__tests__/unit/rte/codemirror-shim.test.js ADDED Viewed

@@ -0,0 +1,72 @@
+import { getLegacyHTMLTextForProsemirror } from '../../../rte/codemirror-shim'
+import { buildSchemaFromConfig } from '../../../rte/settings'
+const customMenuBar =
+  RICH_TEXT_TOOLBARS['brightspot.core.tool.LargeRichTextToolbar']
+const schema = buildSchemaFromConfig(customMenuBar)
+const compliantTagNameMap = new Map([
+  ['a', 'a'],
+  ['bsp-image', 'bsp-image'],
+  ['bsp-image', 'bsp-image'],
+  ['bsp-video', 'bsp-video'],
+  ['blue', 'blue'],
+  ['plum', 'plum'],
+])
+it('Translates 1 break tag into bsp-line tag', () => {
+  const text = 'test<br/>test'
+  const translation = '<bsp-line>test</bsp-line><bsp-line>test</bsp-line>'
+  expect(
+    getLegacyHTMLTextForProsemirror(text, schema, compliantTagNameMap),
+  ).toBe(translation)
+})
+it('Translates text and 2 breaks and text correctly', () => {
+  let text = 'test<br/><br/>test'
+  let translation =
+    '<bsp-line>test</bsp-line><bsp-line></bsp-line><bsp-line>test</bsp-line>'
+  expect(
+    getLegacyHTMLTextForProsemirror(text, schema, compliantTagNameMap),
+  ).toBe(translation)
+})
+it('Translates text and 3 breaks and text correctly', () => {
+  let text = 'test<br/><br/><br/>test'
+  let translation =
+    '<bsp-line>test</bsp-line><bsp-line></bsp-line><bsp-line></bsp-line><bsp-line>test</bsp-line>'
+  expect(
+    getLegacyHTMLTextForProsemirror(text, schema, compliantTagNameMap),
+  ).toBe(translation)
+})
+it('Translates left aligned div to a div with correct class and with no trailing break', () => {
+  let text = '<div class="cms-textAlign-left">left aligned div</div>'
+  let translation = '<div class="cms-textAlign-left">left aligned div</div>'
+  expect(
+    getLegacyHTMLTextForProsemirror(text, schema, compliantTagNameMap),
+  ).toBe(translation)
+})
+it('Translates center aligned div to a div with correct class and with no trailing break', () => {
+  let text = '<div class="cms-textAlign-center">center aligned div</div>'
+  let translation = '<div class="cms-textAlign-center">center aligned div</div>'
+  expect(
+    getLegacyHTMLTextForProsemirror(text, schema, compliantTagNameMap),
+  ).toBe(translation)
+})
+it('Translates right aligned div to a div with correct class and with no trailing break', () => {
+  let text = '<div class="cms-textAlign-right">right aligned div</div>'
+  let translation = '<div class="cms-textAlign-right">right aligned div</div>'
+  expect(
+    getLegacyHTMLTextForProsemirror(text, schema, compliantTagNameMap),
+  ).toBe(translation)
+})
+it('Translates authorized marks correcty', () => {
+  let text = 'foo<b>bar</b>baz'
+  let translation = '<bsp-line>foo<b>bar</b>baz</bsp-line>'
+  expect(
+    getLegacyHTMLTextForProsemirror(text, schema, compliantTagNameMap),
+  ).toBe(translation)
+})

package/src/legacy/tool-ui/src/main/webapp/v4/__tests__/unit/rte/plugins/collab_manager/CollabManager.test.js ADDED Viewed

@@ -0,0 +1,46 @@
+import { getDecos } from '../../../../../rte/plugins/collab_manager/CollabManager'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+import { Node } from 'prosemirror-model'
+import { buildSchemaFromConfig } from '../../../../../rte/settings'
+it('Creates Anchor and Range decorations correctly', () => {
+  const anchorMap = {
+    '00000169-8294-dad5-a36b-fbf4dbad0000': 1,
+    '00000169-ef1d-decf-aff9-efbf2fd80000': 2,
+    '00000169-ef1d-decf-aff9-foo': 3,
+  }
+  const rangeList = [
+    { from: 1, to: 2, clientId: '00000169-ef1d-decf-aff9-bar' },
+  ]
+  const userId = '00000169-8294-dad5-a36b-fbf4dbad0000'
+  const decos = DecorationSet.empty
+  const docJSON = {
+    type: 'doc',
+    content: [{ type: 'line', content: [{ type: 'text', text: 'test' }] }],
+  }
+  const customMenuBar =
+    RICH_TEXT_TOOLBARS['brightspot.core.tool.LargeRichTextToolbar']
+  const schema = buildSchemaFromConfig(customMenuBar)
+  const doc = Node.fromJSON(schema, docJSON)
+  const newDecos = getDecos(anchorMap, rangeList, {}, userId, decos, doc)
+  const newDecosChildren = newDecos.children[2].local
+  expect(newDecosChildren.length).toBe(3)
+  expect(newDecosChildren[0].type.spec.id).toBe('00000169-ef1d-decf-aff9-bar')
+  expect(newDecosChildren[0].from).toBe(0)
+  expect(newDecosChildren[0].to).toBe(1)
+  expect(newDecosChildren[0].type.attrs.class).toBe('collab-selection')
+  expect(newDecosChildren[0].type.attrs.style).toBe(
+    'background-color: rgba(255, 71, 71, .5);',
+  )
+  expect(newDecosChildren[0].type.attrs.title).toBe('')
+  expect(newDecosChildren[1].type.spec.id).toBe(
+    '00000169-ef1d-decf-aff9-efbf2fd80000',
+  )
+  expect(newDecosChildren[1].from).toBe(1)
+  expect(newDecosChildren[1].to).toBe(1)
+  expect(newDecosChildren[2].type.spec.id).toBe('00000169-ef1d-decf-aff9-foo')
+  expect(newDecosChildren[2].from).toBe(2)
+  expect(newDecosChildren[2].to).toBe(2)
+})

package/src/legacy/tool-ui/src/main/webapp/v4/__tests__/unit/rte/plugins/enhancement_manager/EnhancementManager.test.js ADDED Viewed

@@ -0,0 +1,84 @@
+import { RTE } from '../../../../../rte/ProseMirror'
+import {
+  largetextArea,
+  smallTextArea,
+} from '../../../../../__mocks__/textArea.mock'
+it('Inline Enhancements work', () => {
+  const textAreaContainer = largetextArea.cloneNode(true)
+  const element = textAreaContainer.querySelector('textarea')
+  element.value =
+    '“This infographic depicts how tracing data lineage across all <a  href="https://twitter.com/hashtag/investmentdata?src=hash" data-query-source="hashtag_click" class="twitter-hashtag pretty-link js-nav" dir="ltr" style="background: rgb(255, 255, 255); color: rgb(88, 181, 53); text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-size: 27px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.27px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">#investmentdata</a>'
+  const customMenuType = element.getAttribute('data-rte-toolbar')
+  const customMenuBar = RICH_TEXT_TOOLBARS[customMenuType]
+  const compliantTagNameMap = new Map([
+    ['a', 'a'],
+    ['bsp-image', 'bsp-image'],
+    ['bsp-image', 'bsp-image'],
+    ['bsp-video', 'bsp-video'],
+    ['blue', 'blue'],
+    ['plum', 'plum'],
+  ])
+  const rte = new RTE(
+    element,
+    customMenuBar,
+    false,
+    'admin',
+    '000-000-000',
+    null,
+    'textarea',
+    false,
+    compliantTagNameMap,
+    10,
+  )
+  rte.init()
+  const proseMirrorElement = textAreaContainer.querySelector('.ProseMirror')
+  const proseMirrorToolbar = textAreaContainer.querySelector(
+    '.ProseMirrorToolbar',
+  )
+  const lines = proseMirrorElement.querySelectorAll('bsp-line')
+  expect(proseMirrorElement).not.toBe(null)
+  expect(proseMirrorToolbar).not.toBe(null)
+  expect(lines.length).toBe(1)
+})
+it('Inline Enhancements work with complex attributes that have quotes in them', () => {
+  const textAreaContainer = largetextArea.cloneNode(true)
+  const element = textAreaContainer.querySelector('textarea')
+  element.value = `<span class="cms-text-color-color-red">New release of wired-elements (v0.5.2) Hand-drawn sketchy UI web components Great for wireframes, mockups, or just the fun hand-drawn look. Now rendered with </span><a  href="https://twitter.com/polymer" dir="ltr" role="link" data-focusable="true" class="css-4rbku5 css-18t94o4 css-901oao css-16my406 r-1n1174f r-1loqt21 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0" style="background-color: rgba(0, 0, 0, 0); color: rgb(27, 149, 224); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: 1.3125; font-family: system-ui, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Ubuntu, &quot;Helvetica Neue&quot;, sans-serif; list-style: none; margin: 0px; text-align: inherit; text-decoration: none; cursor: pointer; border: 0px solid black; box-sizing: border-box; display: inline; padding: 0px; white-space: inherit; overflow-wrap: break-word; min-width: 0px;"><span class="cms-text-color-color-red">@polymer</span></a><span class="cms-text-color-color-red"> lit-element. New sketchy website: </span><a  title="https://wiredjs.com/" href="https://t.co/al44UJ7uzQ?amp=1" target="_blank" dir="ltr" role="link" data-focusable="true" class="css-4rbku5 css-18t94o4 css-901oao css-16my406 r-1n1174f r-1loqt21 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0" rel=" noopener noreferrer" style="background-color: rgb(255, 255, 255); color: rgb(27, 149, 224); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-weight: 400; font-stretch: inherit; font-size: 23px; line-height: 1.3125; font-family: system-ui, -apple-system, system-ui, &quot;Segoe UI&quot;, Roboto, Ubuntu, &quot;Helvetica Neue&quot;, sans-serif; list-style: none; margin: 0px; text-align: start; text-decoration: none; cursor: pointer; border: 0px solid black; box-sizing: border-box; display: inline; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span class="cms-text-color-color-red">https://</span>wiredjs.com</a>"`
+  const customMenuType = element.getAttribute('data-rte-toolbar')
+  const customMenuBar = RICH_TEXT_TOOLBARS[customMenuType]
+  const compliantTagNameMap = new Map([
+    ['a', 'a'],
+    ['bsp-image', 'bsp-image'],
+    ['bsp-image', 'bsp-image'],
+    ['bsp-video', 'bsp-video'],
+    ['blue', 'blue'],
+    ['plum', 'plum'],
+  ])
+  const rte = new RTE(
+    element,
+    customMenuBar,
+    false,
+    'admin',
+    '000-000-000',
+    null,
+    'textarea',
+    false,
+    compliantTagNameMap,
+    10,
+  )
+  rte.init()
+  const proseMirrorElement = textAreaContainer.querySelector('.ProseMirror')
+  const proseMirrorToolbar = textAreaContainer.querySelector(
+    '.ProseMirrorToolbar',
+  )
+  const lines = proseMirrorElement.querySelectorAll('bsp-line')
+  expect(proseMirrorElement).not.toBe(null)
+  expect(proseMirrorToolbar).not.toBe(null)
+  expect(lines.length).toBe(1)
+})

package/src/legacy/tool-ui/src/main/webapp/v4/__tests__/unit/rte/plugins/list_manager/ListManager.test.js ADDED Viewed

@@ -0,0 +1,54 @@
+import { RTE } from '../../../../../rte/ProseMirror'
+import {
+  largetextArea,
+  smallTextArea,
+} from '../../../../../__mocks__/textArea.mock'
+it('ListManager works', () => {
+  const textAreaContainer = largetextArea.cloneNode(true)
+  const element = textAreaContainer.querySelector('textarea')
+  element.value = 'test<br/>test'
+  const customMenuType = element.getAttribute('data-rte-toolbar')
+  const customMenuBar = RICH_TEXT_TOOLBARS[customMenuType]
+  const numLines = element.getAttribute('data-rte-lines')
+  const compliantTagNameMap = new Map([
+    ['a', 'a'],
+    ['bsp-image', 'bsp-image'],
+    ['bsp-image', 'bsp-image'],
+    ['bsp-video', 'bsp-video'],
+    ['blue', 'blue'],
+    ['plum', 'plum'],
+  ])
+  const rte = new RTE(
+    element,
+    customMenuBar,
+    false,
+    'admin',
+    '000-000-000',
+    null,
+    'textarea',
+    false,
+    compliantTagNameMap,
+    parseInt(numLines, 10) || 1,
+  )
+  rte.init()
+  const proseMirrorToolbar = textAreaContainer.querySelector(
+    '.ProseMirrorToolbar',
+  )
+  const ulMenuButtonElement =
+    proseMirrorToolbar.querySelector('.rte2-toolbar-ul')
+  const olMenuButtonElement =
+    proseMirrorToolbar.querySelector('.rte2-toolbar-ol')
+  let indentMenuButtonElement = proseMirrorToolbar.querySelector(
+    '.rte2-toolbar-indent',
+  )
+  let outdentMenuButtonElement = proseMirrorToolbar.querySelector(
+    '.rte2-toolbar-outdent',
+  )
+  expect(proseMirrorToolbar).not.toBe(null)
+  expect(ulMenuButtonElement).not.toBe(null)
+  expect(olMenuButtonElement).not.toBe(null)
+  expect(indentMenuButtonElement).not.toBe(null)
+  expect(outdentMenuButtonElement).not.toBe(null)
+})

package/src/legacy/tool-ui/src/main/webapp/v4/__tests__/unit/rte/plugins/menubar/menubar.test.js ADDED Viewed

@@ -0,0 +1,183 @@
+import { RTE } from '../../../../../rte/ProseMirror'
+import {
+  largetextArea,
+  smallTextArea,
+} from '../../../../../__mocks__/textArea.mock'
+it('Builds the large ProseMirror toolbar', () => {
+  const textAreaContainer = largetextArea.cloneNode(true)
+  const element = textAreaContainer.querySelector('textarea')
+  element.value = 'test<br/>test'
+  const customMenuType = element.getAttribute('data-rte-toolbar')
+  const customMenuBar = RICH_TEXT_TOOLBARS[customMenuType]
+  const numLines = element.getAttribute('data-rte-lines')
+  const compliantTagNameMap = new Map([
+    ['a', 'a'],
+    ['bsp-image', 'bsp-image'],
+    ['bsp-image', 'bsp-image'],
+    ['bsp-video', 'bsp-video'],
+    ['blue', 'blue'],
+    ['plum', 'plum'],
+  ])
+  const rte = new RTE(
+    element,
+    customMenuBar,
+    false,
+    'admin',
+    '000-000-000',
+    null,
+    'textarea',
+    false,
+    compliantTagNameMap,
+    parseInt(numLines, 10) || 1,
+  )
+  rte.init()
+  const proseMirrorToolbar = textAreaContainer.querySelector(
+    '.ProseMirrorToolbar',
+  )
+  const actionListItems = textAreaContainer.querySelectorAll(
+    '.ProseMirrorToolbar-action',
+  )
+  expect(proseMirrorToolbar).not.toBe(null)
+  expect(actionListItems.length).toBe(13)
+})
+it('Builds the small ProseMirror toolbar', () => {
+  const textAreaContainer = smallTextArea.cloneNode(true)
+  const element = textAreaContainer.querySelector('textarea')
+  element.value = 'test<br/>test'
+  const customMenuType = element.getAttribute('data-rte-toolbar')
+  const customMenuBar = RICH_TEXT_TOOLBARS[customMenuType]
+  const numLines = element.getAttribute('data-rte-lines')
+  const compliantTagNameMap = new Map([
+    ['a', 'a'],
+    ['bsp-image', 'bsp-image'],
+    ['bsp-image', 'bsp-image'],
+    ['bsp-video', 'bsp-video'],
+    ['blue', 'blue'],
+    ['plum', 'plum'],
+  ])
+  const rte = new RTE(
+    element,
+    customMenuBar,
+    false,
+    'admin',
+    '000-000-000',
+    null,
+    'textarea',
+    false,
+    compliantTagNameMap,
+    parseInt(numLines, 10) || 1,
+  )
+  rte.init()
+  const proseMirrorToolbar = textAreaContainer.querySelector(
+    '.ProseMirrorToolbar',
+  )
+  const actionListItems = textAreaContainer.querySelectorAll(
+    '.ProseMirrorToolbar-action',
+  )
+  expect(proseMirrorToolbar).not.toBe(null)
+  expect(actionListItems.length).toBe(1)
+})
+it('Builds the inline, large ProseMirror toolbar correctly', () => {
+  const textAreaContainer = largetextArea.cloneNode(true)
+  const element = textAreaContainer.querySelector('textarea')
+  element.value = 'test<br/>test'
+  const customMenuType = element.getAttribute('data-rte-toolbar')
+  const customMenuBar = RICH_TEXT_TOOLBARS[customMenuType]
+  const numLines = element.getAttribute('data-rte-lines')
+  const compliantTagNameMap = new Map([
+    ['a', 'a'],
+    ['bsp-image', 'bsp-image'],
+    ['bsp-image', 'bsp-image'],
+    ['bsp-video', 'bsp-video'],
+    ['blue', 'blue'],
+    ['plum', 'plum'],
+  ])
+  const rte = new RTE(
+    element,
+    customMenuBar,
+    true,
+    'admin',
+    '000-000-000',
+    null,
+    'textarea',
+    false,
+    compliantTagNameMap,
+    parseInt(numLines, 10) || 1,
+  )
+  rte.init()
+  const proseMirrorToolbar = textAreaContainer.querySelector(
+    '.ProseMirrorToolbar',
+  )
+  const actionListItems = textAreaContainer.querySelectorAll(
+    '.ProseMirrorToolbar-action',
+  )
+  expect(proseMirrorToolbar).not.toBe(null)
+  expect(actionListItems.length).toBe(11)
+})
+it('Clicking menu items creates correct actions', () => {
+  const textAreaContainer = largetextArea.cloneNode(true)
+  const element = textAreaContainer.querySelector('textarea')
+  element.value = ''
+  const customMenuType = element.getAttribute('data-rte-toolbar')
+  const customMenuBar = RICH_TEXT_TOOLBARS[customMenuType]
+  const numLines = element.getAttribute('data-rte-lines')
+  const compliantTagNameMap = new Map([
+    ['a', 'a'],
+    ['bsp-image', 'bsp-image'],
+    ['bsp-image', 'bsp-image'],
+    ['bsp-video', 'bsp-video'],
+    ['blue', 'blue'],
+    ['plum', 'plum'],
+  ])
+  const rte = new RTE(
+    element,
+    customMenuBar,
+    false,
+    'admin',
+    '000-000-000',
+    null,
+    'textarea',
+    false,
+    compliantTagNameMap,
+    parseInt(numLines, 10) || 1,
+  )
+  rte.init()
+  const proseMirrorToolbar = textAreaContainer.querySelector(
+    '.ProseMirrorToolbar',
+  )
+  const boldActionItem = textAreaContainer.querySelector('.rte2-toolbar-bold')
+  boldActionItem.click()
+  // The toolbar redraws itself so we have to find the new bold action item
+  const boldActionItemRebuilt =
+    textAreaContainer.querySelector('.rte2-toolbar-bold')
+  expect(boldActionItemRebuilt.className).toEqual(
+    expect.stringContaining('active'),
+  )
+  const proseMirrorElement = textAreaContainer.querySelector('.ProseMirror')
+  const event = new window.KeyboardEvent('keyup', {
+    key: 'F',
+    bubbles: true,
+  })
+  proseMirrorElement.dispatchEvent(event)
+  const storedMark = rte.view.state.tr.storedMarks[0]
+  expect(storedMark.type.name).toEqual(expect.stringContaining('bold'))
+  const boldActionItemRebuiltAgain =
+    textAreaContainer.querySelector('.rte2-toolbar-bold')
+  boldActionItemRebuiltAgain.click()
+  const boldActionItemRebuiltAgain2 =
+    textAreaContainer.querySelector('.rte2-toolbar-bold')
+  expect(boldActionItemRebuiltAgain2.className).not.toEqual(
+    expect.stringContaining('active'),
+  )
+})

package/src/legacy/tool-ui/src/main/webapp/v4/__tests__/unit/rte/plugins/spellcheck/SpellCheck.test.js ADDED Viewed

@@ -0,0 +1,45 @@
+import { RTE } from '../../../../../rte/ProseMirror'
+import { largetextArea } from '../../../../../__mocks__/textArea.mock'
+import { runSpellCheck } from '../../../../../rte/plugins/spellcheck/spellcheck-plugin'
+describe('Spellcheck plugin works correctly:', () => {
+  beforeEach(() => {
+    fetch.resetMocks()
+  })
+  it('Runs spellcheck correctly', () => {
+    fetch.mockResponseOnce(JSON.stringify({ data: '12345' }))
+    const textAreaContainer = largetextArea.cloneNode(true)
+    const element = textAreaContainer.querySelector('textarea')
+    element.value =
+      'Fyre Festival was the most talked about festival experience of 2017, but not because anyone had any fun there. Advertised by famous faces including Kendall Jenner, Bella Hadid and Hailey Baldwin, it was billed as a glamorous party on a deserted island. Tickets cost up to $100,000 (£75,000) and guests who booked were promised luxury accommodation and "the best in food, art, music and adventure" in the Bahamas. Instead they turned up to mattresses on rain-soaked floors, meals of cheese slices on bread and their luggage thrown into a unlit car park.'
+    const customMenuType = element.getAttribute('data-rte-toolbar')
+    const customMenuBar = RICH_TEXT_TOOLBARS[customMenuType]
+    const numLines = element.getAttribute('data-rte-lines')
+    const compliantTagNameMap = new Map([
+      ['a', 'a'],
+      ['bsp-image', 'bsp-image'],
+      ['bsp-image', 'bsp-image'],
+      ['bsp-video', 'bsp-video'],
+      ['blue', 'blue'],
+      ['plum', 'plum'],
+    ])
+    const rte = new RTE(
+      element,
+      customMenuBar,
+      false,
+      'admin',
+      '000-000-000',
+      null,
+      'textarea',
+      false,
+      compliantTagNameMap,
+      parseInt(numLines, 10) || 1,
+    )
+    rte.init()
+    expect(fetch.mock.calls.length).toEqual(1)
+    expect(fetch.mock.calls[0][0]).toEqual('/cms/spellCheck')
+  })
+})