@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/__tests__/integration/rte/plugins/list_manager/ListManager.js

@@ -0,0 +1,257 @@
+/**
+ * @jest-environment jest-environment-webdriver
+ */
+
+import { Key } from 'selenium-webdriver'
+const url = `${TEST_ROOT_PATH}/rte/plugins/list_manager`
+const smallUrl = `${TEST_ROOT_PATH}/rte/plugins/list_manager/small.html`
+jest.setTimeout(TEST_TIMEOUT)
+
+describe('ProseMirror ListManager works correctly:', () => {
+  test('It creates lists correctly', async () => {
+    await browser.get(url)
+    const pm = await browser.wait(
+      until.elementLocated(by.className('ProseMirror'), 50000),
+    )
+    // Delete all the text in the large text editor
+    await pm.sendKeys(Key.COMMAND, 'a', Key.DELETE)
+    // ---------------------- CREATE A LIST -------------------- //
+    await pm.sendKeys('list')
+    let ulIcon = await browser.findElement(
+      by.css('.ProseMirrorToolbar .rte2-toolbar-ul'),
+    )
+    await ulIcon.click()
+    let ul = await browser.findElements(by.className('rte2-style-ul'))
+    let listItems = await browser.findElements(
+      by.className('li-cms-list-item-div'),
+    )
+    let indentIcon = await browser.findElement(
+      by.className('rte2-toolbar-indent'),
+    )
+    let outdentIcon = await browser.findElement(
+      by.className('rte2-toolbar-outdent'),
+    )
+    let alignLeftIcon = await browser.findElement(
+      by.className('rte2-toolbar-align-left'),
+    )
+    let centerLeftIcon = await browser.findElement(
+      by.className('rte2-toolbar-align-center'),
+    )
+    let alignRightIcon = await browser.findElement(
+      by.className('rte2-toolbar-align-right'),
+    )
+    let indentIconClass = await indentIcon.getAttribute('className')
+    let outdentIconClass = await outdentIcon.getAttribute('className')
+    let alignLeftIconClass = await alignLeftIcon.getAttribute('className')
+    let alignCenterIconClass = await centerLeftIcon.getAttribute('className')
+    let alignRightIconClass = await alignRightIcon.getAttribute('className')
+    expect(ul.length).toBe(1)
+    expect(listItems.length).toBe(1)
+    expect(indentIconClass).toEqual(expect.stringContaining('disabled'))
+    expect(outdentIconClass).not.toEqual(expect.stringContaining('disabled'))
+    expect(alignLeftIconClass).toEqual(expect.stringContaining('disabled'))
+    expect(alignCenterIconClass).toEqual(expect.stringContaining('disabled'))
+    expect(alignRightIconClass).toEqual(expect.stringContaining('disabled'))
+
+    // ---------------------- HIGHLIST LIST TEXT AND MAKE BOLD -------------------- //
+
+    await pm.sendKeys(
+      Key.SHIFT,
+      Key.LEFT,
+      Key.ARROW_LEFT,
+      Key.ARROW_LEFT,
+      Key.ARROW_LEFT,
+    )
+
+    let boldIcon = await browser.findElement(
+      by.css('.ProseMirrorToolbar .rte2-toolbar-bold'),
+    )
+    // Click the bold icon to style the text in the list item
+    await boldIcon.click()
+    let boldedText = await browser.findElements(
+      by.css('.li-cms-list-item-div .rte2-style-bold'),
+    )
+
+    expect(boldedText.length).toBe(1)
+
+    // ---------------------- CREATE A SECOND LIST ITEM -------------------- //
+    await pm.sendKeys(Key.ARROW_RIGHT, Key.ENTER, 'test')
+
+    listItems = await browser.findElements(by.className('li-cms-list-item-div'))
+
+    indentIcon = await browser.findElement(by.className('rte2-toolbar-indent'))
+    outdentIcon = await browser.findElement(
+      by.className('rte2-toolbar-outdent'),
+    )
+    indentIconClass = await indentIcon.getAttribute('className')
+    outdentIconClass = await outdentIcon.getAttribute('className')
+
+    expect(listItems.length).toBe(2)
+    expect(indentIconClass).not.toEqual(expect.stringContaining('disabled'))
+    expect(outdentIconClass).not.toEqual(expect.stringContaining('disabled'))
+
+    // ---------------------- INDENT SECOND LIST ITEM TO MAKE A NESTED LIST -------------------- //
+    await indentIcon.click()
+    ul = await browser.findElements(by.className('rte2-style-ul'))
+    let nestedListInList = await browser.findElements(
+      by.css('.rte2-style-ul > .li-cms-list-item-div > .rte2-style-ul'),
+    )
+    listItems = await browser.findElements(by.className('li-cms-list-item-div'))
+
+    indentIcon = await browser.findElement(by.className('rte2-toolbar-indent'))
+    outdentIcon = await browser.findElement(
+      by.className('rte2-toolbar-outdent'),
+    )
+    indentIconClass = await indentIcon.getAttribute('className')
+    outdentIconClass = await outdentIcon.getAttribute('className')
+    expect(ul.length).toBe(2)
+    expect(nestedListInList.length).toBe(1)
+    expect(listItems.length).toBe(2)
+    expect(indentIconClass).toEqual(expect.stringContaining('disabled'))
+    expect(outdentIconClass).not.toEqual(expect.stringContaining('disabled'))
+
+    // -------- CREATE A SECOND LIST ITEM IN THE NESTED LIST AND THEN INDENT FOR A NETED LIST IN A NESTED LIST  -------- //
+    await pm.sendKeys(Key.ENTER, Key.TAB, 'test')
+
+    ul = await browser.findElements(by.className('rte2-style-ul'))
+    listItems = await browser.findElements(by.className('li-cms-list-item-div'))
+
+    indentIcon = await browser.findElement(by.className('rte2-toolbar-indent'))
+    outdentIcon = await browser.findElement(
+      by.className('rte2-toolbar-outdent'),
+    )
+    indentIconClass = await indentIcon.getAttribute('className')
+    outdentIconClass = await outdentIcon.getAttribute('className')
+    expect(ul.length).toBe(3)
+    expect(listItems.length).toBe(3)
+    expect(indentIconClass).toEqual(expect.stringContaining('disabled'))
+    expect(outdentIconClass).not.toEqual(expect.stringContaining('disabled'))
+
+    // ---------------------- SHIFT-TAB TO OUTDENT -------------------- //
+    await pm.sendKeys(Key.SHIFT, Key.TAB)
+    ul = await browser.findElements(by.className('rte2-style-ul'))
+    listItems = await browser.findElements(by.className('li-cms-list-item-div'))
+
+    indentIcon = await browser.findElement(by.className('rte2-toolbar-indent'))
+    outdentIcon = await browser.findElement(
+      by.className('rte2-toolbar-outdent'),
+    )
+    indentIconClass = await indentIcon.getAttribute('className')
+    outdentIconClass = await outdentIcon.getAttribute('className')
+    expect(ul.length).toBe(2)
+    expect(listItems.length).toBe(3)
+    expect(indentIconClass).not.toEqual(expect.stringContaining('disabled'))
+    expect(outdentIconClass).not.toEqual(expect.stringContaining('disabled'))
+
+    // ---------------------- CLICK OUTDENT TO PUT LIST ITEM BACK INTO OUTER LIST -------------------- //
+    await outdentIcon.click()
+    ul = await browser.findElements(by.className('rte2-style-ul'))
+    listItems = await browser.findElements(by.className('li-cms-list-item-div'))
+
+    indentIcon = await browser.findElement(by.className('rte2-toolbar-indent'))
+    outdentIcon = await browser.findElement(
+      by.className('rte2-toolbar-outdent'),
+    )
+    indentIconClass = await indentIcon.getAttribute('className')
+    outdentIconClass = await outdentIcon.getAttribute('className')
+    expect(ul.length).toBe(2)
+    expect(listItems.length).toBe(3)
+    expect(indentIconClass).not.toEqual(expect.stringContaining('disabled'))
+    expect(outdentIconClass).not.toEqual(expect.stringContaining('disabled'))
+
+    // ---------------------- CLICK OUTDENT AGAIN TO REMOVE FROM LIST -------------------- //
+    await outdentIcon.click()
+    ul = await browser.findElements(by.className('rte2-style-ul'))
+    listItems = await browser.findElements(by.className('li-cms-list-item-div'))
+
+    indentIcon = await browser.findElement(by.className('rte2-toolbar-indent'))
+    outdentIcon = await browser.findElement(
+      by.className('rte2-toolbar-outdent'),
+    )
+    alignLeftIcon = await browser.findElement(
+      by.className('rte2-toolbar-align-left'),
+    )
+    centerLeftIcon = await browser.findElement(
+      by.className('rte2-toolbar-align-center'),
+    )
+    alignRightIcon = await browser.findElement(
+      by.className('rte2-toolbar-align-right'),
+    )
+    indentIconClass = await indentIcon.getAttribute('className')
+    outdentIconClass = await outdentIcon.getAttribute('className')
+    alignLeftIconClass = await alignLeftIcon.getAttribute('className')
+    alignCenterIconClass = await centerLeftIcon.getAttribute('className')
+    alignRightIconClass = await alignRightIcon.getAttribute('className')
+    expect(ul.length).toBe(2)
+    expect(listItems.length).toBe(2)
+    expect(indentIconClass).toEqual(expect.stringContaining('disabled'))
+    expect(outdentIconClass).toEqual(expect.stringContaining('disabled'))
+    expect(alignLeftIconClass).not.toEqual(expect.stringContaining('disabled'))
+    expect(alignCenterIconClass).not.toEqual(
+      expect.stringContaining('disabled'),
+    )
+    expect(alignRightIconClass).not.toEqual(expect.stringContaining('disabled'))
+
+    // ---------------------- CLICK ORDERED LIST ICON TO CREATE AN ORDERED LIST -------------------- //
+    let olIcon = await browser.findElement(
+      by.css('.ProseMirrorToolbar .rte2-toolbar-ol'),
+    )
+    await olIcon.click()
+    let ol = await browser.findElements(by.className('rte2-style-ol'))
+    listItems = await browser.findElements(by.className('li-cms-list-item-div'))
+
+    indentIcon = await browser.findElement(by.className('rte2-toolbar-indent'))
+    outdentIcon = await browser.findElement(
+      by.className('rte2-toolbar-outdent'),
+    )
+    indentIconClass = await indentIcon.getAttribute('className')
+    outdentIconClass = await outdentIcon.getAttribute('className')
+    expect(ol.length).toBe(1)
+    expect(listItems.length).toBe(3)
+    expect(indentIconClass).toEqual(expect.stringContaining('disabled'))
+    expect(outdentIconClass).not.toEqual(expect.stringContaining('disabled'))
+
+    // ---------------------- CREATE A SECOND LIST ITEM IN THE ORDERED LIST -------------------- //
+    await pm.sendKeys(
+      Key.ARROW_RIGHT,
+      Key.ARROW_RIGHT,
+      Key.ARROW_RIGHT,
+      Key.ARROW_RIGHT,
+      Key.ENTER,
+      'test',
+    )
+
+    listItems = await browser.findElements(by.className('li-cms-list-item-div'))
+
+    indentIcon = await browser.findElement(by.className('rte2-toolbar-indent'))
+    outdentIcon = await browser.findElement(
+      by.className('rte2-toolbar-outdent'),
+    )
+    indentIconClass = await indentIcon.getAttribute('className')
+    outdentIconClass = await outdentIcon.getAttribute('className')
+
+    expect(ol.length).toBe(1)
+    expect(listItems.length).toBe(4)
+    expect(indentIconClass).not.toEqual(expect.stringContaining('disabled'))
+    expect(outdentIconClass).not.toEqual(expect.stringContaining('disabled'))
+
+    // ---------------------- INDENT SECOND LIST ITEM IN THE ORDERED LIST AND CONVERT TO AN UL -------------------- //
+    await pm.sendKeys(Key.TAB)
+    ulIcon = await browser.findElement(
+      by.css('.ProseMirrorToolbar .rte2-toolbar-ul'),
+    )
+    await ulIcon.click()
+    indentIcon = await browser.findElement(by.className('rte2-toolbar-indent'))
+    outdentIcon = await browser.findElement(
+      by.className('rte2-toolbar-outdent'),
+    )
+    indentIconClass = await indentIcon.getAttribute('className')
+    outdentIconClass = await outdentIcon.getAttribute('className')
+    let nestedListInOrderedList = await browser.findElements(
+      by.css('.rte2-style-ol > .li-cms-list-item-div > .rte2-style-ul'),
+    )
+    expect(nestedListInOrderedList.length).toBe(1)
+    expect(indentIconClass).toEqual(expect.stringContaining('disabled'))
+    expect(outdentIconClass).not.toEqual(expect.stringContaining('disabled'))
+  })
+})

package/src/legacy/tool-ui/src/main/webapp/v4/__tests__/integration/rte/plugins/list_manager/index.html

@@ -0,0 +1,38 @@
+<!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>
+      .ProseMirrorToolbar [data-rte-style='rte2-toolbar-fullscreen'] {
+        position: static !important;
+      }
+    </style>
+  </head>
+  <body>
+    <textarea
+      class="richtext"
+      id="2"
+      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"
+    >
+test</textarea
+    >
+  </body>
+</html>

package/src/legacy/tool-ui/src/main/webapp/v4/__tests__/integration/rte/plugins/menubar/hierarchal.html

@@ -0,0 +1,33 @@
+<!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>
+  </head>
+
+  <body>
+    <textarea
+      class="richtext"
+      id="2"
+      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-user="trey"
+      data-user-id="00000164-149f-dc94-a1e4-fedf67600000"
+      data-first-draft="true"
+      data-track-changes="true"
+    >
+<h1 class="rte2-style-core-rte-heading-HeadingOne">Testing</h1></textarea
+    >
+  </body>
+</html>

package/src/legacy/tool-ui/src/main/webapp/v4/__tests__/integration/rte/plugins/menubar/index.html

@@ -0,0 +1,33 @@
+<!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>
+  </head>
+  <body>
+    <textarea
+      class="richtext"
+      id="2"
+      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"
+    >
+test<br>test</textarea
+    >
+  </body>
+</html>

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

@@ -0,0 +1,195 @@
+/**
+ * @jest-environment jest-environment-webdriver
+ */
+
+import { Key } from 'selenium-webdriver'
+const url = `${TEST_ROOT_PATH}/rte/plugins/menubar/`
+const smallUrl = `${TEST_ROOT_PATH}/rte/plugins/menubar/small.html`
+const hierarchalUrl = `${TEST_ROOT_PATH}/rte/plugins/menubar/hierarchal.html`
+const tagsUrl = `${TEST_ROOT_PATH}/rte/plugins/menubar/tags.html`
+jest.setTimeout(TEST_TIMEOUT)
+browser.manage().window().setRect({ width: 2400, height: 1800 })
+
+describe('ProseMirror Menubar works correctly:', () => {
+  test('Small rich text editor menubar renders correctly', async () => {
+    await browser.get(smallUrl)
+    const pm = await browser.wait(
+      until.elementLocated(by.className('ProseMirror'), 50000),
+    )
+    const toolbarIcons = await browser.findElements(
+      by.css('.ProseMirrorToolbar .ProseMirrorToolbar-action'),
+    )
+
+    expect(toolbarIcons.length).toBe(8)
+    RICH_TEXT_TOOLBARS['brightspot.core.tool.SmallRichTextToolbar'].forEach(
+      async (item) => {
+        const className = item.className
+        const toolbarIcon = await browser.findElements(
+          by.css(`.ProseMirrorToolbar .${className}`),
+        )
+        expect(toolbarIcon.length).toBe(1)
+      },
+    )
+  })
+
+  test('Large rich text editor menubar renders correctly', async () => {
+    await browser.get(url)
+    const pm = await browser.wait(
+      until.elementLocated(by.className('ProseMirror'), 50000),
+    )
+    const toolbarIcons = await browser.findElements(
+      by.css('.ProseMirrorToolbar .ProseMirrorToolbar-action'),
+    )
+    expect(toolbarIcons.length).toBe(30)
+    RICH_TEXT_TOOLBARS['brightspot.core.tool.LargeRichTextToolbar'].forEach(
+      async (item) => {
+        const className = item.className
+
+        if (
+          !className ||
+          className === 'rte2-toolbar-link' ||
+          className === 'rte2-toolbar-noicon' ||
+          className === 'rte2-toolbar-html' ||
+          className === 'rte2-toolbar-comment' ||
+          className === 'rte2-toolbar-comment-collapse' ||
+          className === 'rte2-toolbar-comment-remove'
+        ) {
+          return
+        }
+
+        const toolbarIcon = await browser.findElements(
+          by.css(`.ProseMirrorToolbar .${className}`),
+        )
+        expect(toolbarIcon.length).toBe(1)
+      },
+    )
+  })
+
+  test('It adds and removes styles to elements correctly', async () => {
+    await browser.get(url)
+    const pm = await browser.wait(
+      until.elementLocated(by.className('ProseMirror'), 50000),
+    )
+    // Highlight the first 3 characters
+    await pm.sendKeys(
+      Key.SHIFT,
+      Key.ARROW_LEFT,
+      Key.ARROW_LEFT,
+      Key.ARROW_LEFT,
+      Key.ARROW_LEFT,
+    )
+    let boldButton = await browser.findElement(
+      by.className('rte2-toolbar-bold'),
+    )
+    // Click the bold menu icon button
+    await boldButton.click()
+    boldButton = await browser.findElement(by.className('rte2-toolbar-bold'))
+    let className = await boldButton.getAttribute('className')
+    expect(className).toEqual(expect.stringContaining('active'))
+    let boldedText = await browser.findElements(by.className('rte2-style-bold'))
+    expect(boldedText.length).toBe(1)
+    let text = await boldedText[0].getText()
+    expect(text).toBe('test')
+
+    boldButton = await browser.findElement(by.className('rte2-toolbar-bold'))
+    // Click the bold menu icon again to toggle the bold style
+    await boldButton.click()
+    boldedText = await browser.findElements(by.className('rte2-style-bold'))
+    expect(boldedText.length).toBe(0)
+
+    boldButton = await browser.findElement(by.className('rte2-toolbar-bold'))
+    // Click the bold menu icon again to toggle the bold style
+    await boldButton.click()
+    boldedText = await browser.findElements(by.className('rte2-style-bold'))
+    const clearButton = await browser.findElement(
+      by.className('rte2-toolbar-clear'),
+    )
+    await clearButton.click()
+    boldedText = await browser.findElements(by.className('rte2-style-bold'))
+    expect(boldedText.length).toBe(0)
+    boldButton = await browser.findElement(by.className('rte2-toolbar-bold'))
+    className = await boldButton.getAttribute('className')
+    expect(className).not.toEqual(expect.stringContaining('active'))
+    await pm.sendKeys(Key.COMMAND, 'b')
+    await pm.sendKeys('test')
+    boldedText = await browser.findElements(by.className('rte2-style-bold'))
+    expect(boldedText.length).toBe(1)
+    boldButton = await browser.findElement(by.className('rte2-toolbar-bold'))
+    className = await boldButton.getAttribute('className')
+    expect(className).toEqual(expect.stringContaining('active'))
+
+    await pm.sendKeys(Key.ARROW_RIGHT, Key.ENTER)
+    boldButton = await browser.findElement(by.className('rte2-toolbar-bold'))
+    await boldButton.click()
+    await pm.sendKeys('Adding some text that should be bolded')
+    boldedText = await browser.findElements(by.className('rte2-style-bold'))
+    expect(boldedText.length).toBe(2)
+    const boldedTextContent = await boldedText[1].getText()
+    expect(boldedTextContent).toBe('Adding some text that should be bolded')
+  })
+
+  test('It adds dropdowns for nested elements correctly', async () => {
+    await browser.get(url)
+    const pm = await browser.wait(
+      until.elementLocated(by.className('ProseMirror'), 50000),
+    )
+
+    const submenu = await browser.findElements(
+      by.className('rte2-toolbar-submenu-2'),
+    )
+
+    const nestedList = await browser.findElements(
+      by.css(`.rte2-toolbar-submenu-2 ul`),
+    )
+
+    const topLevelText = await submenu[0].getText()
+
+    expect(submenu.length).toBe(1)
+    expect(nestedList.length).toBe(1)
+    expect(topLevelText).toBe('Highlight')
+  })
+})
+
+describe('ProseMirror menubar handles hierarchal relationships correctly:', () => {
+  test('It adds correct classes when an item is out of context', async () => {
+    await browser.get(hierarchalUrl)
+    const pm = await browser.wait(
+      until.elementLocated(by.className('ProseMirror'), 50000),
+    )
+    const h1 = await browser.findElement(by.tagName('h1'))
+    await h1.click()
+    await browser.sleep(1000)
+    const imageIcon = await browser.findElement(
+      by.className('brightspot-core-image-ImageRichTextElement'),
+    )
+    await browser.sleep(1000)
+    const imageClassName = await imageIcon.getAttribute('className')
+
+    const tweetIcon = await browser.findElement(
+      by.className('brightspot-twitter-rte-TweetRichTextElement'),
+    )
+    const tweetClassName = await tweetIcon.getAttribute('className')
+
+    const moduleTopMenu = await browser.findElement(
+      by.css('[data-rte-toolbar-submenu="Module"]'),
+    )
+    const moduleTopMenuName = await moduleTopMenu.getAttribute('className')
+
+    expect(imageClassName).toEqual(expect.stringContaining('outOfContext'))
+    expect(moduleTopMenuName).toEqual(expect.stringContaining('disabled'))
+    expect(tweetClassName).not.toEqual(expect.stringContaining('outOfContext'))
+  })
+})
+
+describe('ProseMirror menubar handles the data-rte-tags attribute correctly:', () => {
+  test('It adds the rich text elements in the data-rte-tags correctly', async () => {
+    await browser.get(tagsUrl)
+    const pm = await browser.wait(
+      until.elementLocated(by.className('ProseMirror'), 50000),
+    )
+    const plumIcon = await browser.findElements(
+      by.className('core-rte-highlight-PlumHighlightRichTextElement'),
+    )
+    expect(plumIcon.length).toEqual(1)
+  })
+})

package/src/legacy/tool-ui/src/main/webapp/v4/__tests__/integration/rte/plugins/menubar/small.html

@@ -0,0 +1,34 @@
+<!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>
+  </head>
+
+  <body>
+    <textarea
+      class="richtext"
+      id="1"
+      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.SmallRichTextToolbar"
+      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"
+    >
+test<br>test</textarea
+    >
+  </body>
+</html>

package/src/legacy/tool-ui/src/main/webapp/v4/__tests__/integration/rte/plugins/menubar/tags.html

@@ -0,0 +1,34 @@
+<!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>
+  </head>
+
+  <body>
+    <textarea
+      class="richtext"
+      id="2"
+      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-user="trey"
+      data-user-id="00000164-149f-dc94-a1e4-fedf67600000"
+      data-first-draft="true"
+      data-track-changes="true"
+      data-rte-tags="['plum']"
+    >
+<h1 class="rte2-style-core-rte-heading-HeadingOne">Testing</h1></textarea
+    >
+  </body>
+</html>