@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__/unit/rte/settings/BSSerializer.test.js

@@ -0,0 +1,346 @@
+import { Fragment } from 'prosemirror-model'
+import { buildSchemaFromConfig } from '../../../../rte/settings'
+import { defaultBrightspotDOMSerializer } from '../../../../rte/settings/BSSerializer'
+
+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('Serializes lines and line breaks correctly', () => {
+  let contentJSON = [
+    { type: 'line', content: [{ type: 'text', text: 'test' }] },
+    { type: 'line', content: [{ type: 'text', text: 'test' }] },
+  ]
+
+  let fragment = Fragment.fromJSON(schema, contentJSON)
+  let serializedContent = defaultBrightspotDOMSerializer.serialize(
+    fragment,
+    compliantTagNameMap,
+  )
+  expect(serializedContent).toBe('test<br/>test')
+
+  contentJSON = [
+    { type: 'line', content: [{ type: 'text', text: 'test' }] },
+    { type: 'line' },
+    { type: 'line' },
+    { type: 'line', content: [{ type: 'text', text: 'test' }] },
+    { type: 'line' },
+    { type: 'line', content: [{ type: 'text', text: 'test' }] },
+  ]
+
+  fragment = Fragment.fromJSON(schema, contentJSON)
+  serializedContent = defaultBrightspotDOMSerializer.serialize(
+    fragment,
+    compliantTagNameMap,
+  )
+  expect(serializedContent).toBe('test<br/><br/><br/>test<br/><br/>test')
+})
+
+it('Serializes basic styling marks (e.g. bold) correctly', () => {
+  let contentJSON = [
+    {
+      type: 'line',
+      content: [
+        {
+          type: 'text',
+          marks: [{ type: 'bold', attrs: { class: 'rte2-style-bold' } }],
+          text: 'test',
+        },
+      ],
+    },
+  ]
+
+  let fragment = Fragment.fromJSON(schema, contentJSON)
+  let serializedContent = defaultBrightspotDOMSerializer.serialize(
+    fragment,
+    compliantTagNameMap,
+  )
+  expect(serializedContent).toBe('<b>test</b>')
+})
+
+it('Serializes inline enhancements correctly', () => {
+  let contentJSON = [
+    {
+      type: 'line',
+      content: [
+        {
+          type: 'text',
+          text: 'test',
+          marks: [
+            {
+              type: 'a',
+              attrs: {
+                attributes: {
+                  'data-state': JSON.stringify({
+                    foo: 'bar',
+                  }),
+                  href: 'http://www.brightspot.com',
+                },
+                label: 'test',
+                meta: { tag: 'a' },
+              },
+            },
+            { type: 'bold', attrs: { class: 'rte2-style-bold' } },
+          ],
+        },
+      ],
+    },
+  ]
+
+  let fragment = Fragment.fromJSON(schema, contentJSON)
+  let serializedContent = defaultBrightspotDOMSerializer.serialize(
+    fragment,
+    compliantTagNameMap,
+  )
+  expect(serializedContent).toBe(
+    `<b><a  data-state="{&quot;foo&quot;:&quot;bar&quot;}" href="http://www.brightspot.com">test</a></b>`,
+  )
+})
+
+it('Serializes block enhancements correctly', () => {
+  let contentJSON = [
+    {
+      type: 'bsp-image',
+      attrs: {
+        attributes: {
+          'data-state': JSON.stringify({
+            foo: 'bar',
+          }),
+        },
+        label: 'Success!',
+        meta: { tag: 'bsp-image' },
+      },
+    },
+  ]
+
+  let fragment = Fragment.fromJSON(schema, contentJSON)
+  let serializedContent = defaultBrightspotDOMSerializer.serialize(
+    fragment,
+    compliantTagNameMap,
+  )
+  expect(serializedContent).toBe(
+    '<bsp-image data-state="{&quot;foo&quot;:&quot;bar&quot;}">Success!</bsp-image>',
+  )
+})
+
+it('Serializes lists correctly', () => {
+  let contentJSON = [
+    {
+      type: 'ul',
+      attrs: { class: 'rte2-style-ul' },
+      content: [
+        {
+          type: 'listItem',
+          attrs: { class: 'li-cms-list-item-div' },
+          content: [
+            {
+              type: 'listItemDiv',
+              attrs: { class: 'cms-list-item-div' },
+              content: [{ type: 'text', text: 'test' }],
+            },
+            {
+              type: 'ul',
+              attrs: { class: 'rte2-style-ul' },
+              content: [
+                {
+                  type: 'listItem',
+                  attrs: { class: 'li-cms-list-item-div' },
+                  content: [
+                    {
+                      type: 'listItemDiv',
+                      attrs: { class: 'cms-list-item-div' },
+                      content: [{ type: 'text', text: 'test' }],
+                    },
+                    {
+                      type: 'ol',
+                      attrs: { class: 'rte2-style-ol', order: 1 },
+                      content: [
+                        {
+                          type: 'listItem',
+                          attrs: { class: 'li-cms-list-item-div' },
+                          content: [
+                            {
+                              type: 'listItemDiv',
+                              attrs: { class: 'cms-list-item-div' },
+                              content: [{ type: 'text', text: 'test' }],
+                            },
+                          ],
+                        },
+                        {
+                          type: 'listItem',
+                          attrs: { class: 'li-cms-list-item-div' },
+                          content: [
+                            {
+                              type: 'listItemDiv',
+                              attrs: { class: 'cms-list-item-div' },
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ]
+
+  let fragment = Fragment.fromJSON(schema, contentJSON)
+  let serializedContent = defaultBrightspotDOMSerializer.serialize(
+    fragment,
+    compliantTagNameMap,
+  )
+  expect(serializedContent).toBe(
+    '<ul><li>test<ul><li>test<ol><li>test</li><li></li></ol></li></ul></li></ul>',
+  )
+})
+
+it('Serializes aligned divs correctly', () => {
+  let contentJSON = [
+    {
+      type: 'alignLeft',
+      attrs: { class: 'cms-textAlign-left' },
+      content: [{ type: 'text', text: 'test' }],
+    },
+    { type: 'line', content: [{ type: 'text', text: 'tests' }] },
+  ]
+
+  let fragment = Fragment.fromJSON(schema, contentJSON)
+  let serializedContent = defaultBrightspotDOMSerializer.serialize(
+    fragment,
+    compliantTagNameMap,
+  )
+  expect(serializedContent).toBe(
+    '<div class="cms-textAlign-left">test</div>tests',
+  )
+})
+
+it('Serializes track changes correctly', () => {
+  let contentJSON = [
+    {
+      type: 'line',
+      content: [
+        {
+          type: 'text',
+          marks: [
+            {
+              type: 'ins',
+              attrs: {
+                class: 'rte2-style-ins-insert',
+                'data-user-label': 'Trey',
+                'data-time': '01/16/2020 5:13:42 PM',
+              },
+            },
+          ],
+          text: 'This is inserted changes',
+        },
+      ],
+    },
+    {
+      type: 'line',
+      content: [
+        {
+          type: 'text',
+          marks: [
+            {
+              type: 'ins',
+              attrs: {
+                class: 'rte2-style-ins-insert',
+                'data-user-label': 'Trey',
+                'data-time': '01/16/2020 5:13:42 PM',
+              },
+            },
+          ],
+          text: 'This is more inserted changes',
+        },
+      ],
+    },
+    {
+      type: 'line',
+      content: [
+        {
+          type: 'text',
+          marks: [
+            {
+              type: 'del',
+              attrs: {
+                class: 'rte2-style-ins-delete ',
+                'data-user-label': 'Trey',
+                'data-time': '01/16/2020 5:13:42 PM',
+              },
+            },
+          ],
+          text: 'This is deleted changes',
+        },
+      ],
+    },
+  ]
+
+  let fragment = Fragment.fromJSON(schema, contentJSON)
+  let serializedContent = defaultBrightspotDOMSerializer.serialize(
+    fragment,
+    compliantTagNameMap,
+  )
+  expect(serializedContent).toBe(
+    '<ins data-id="1548187447331" data-user-label="Trey" data-time="01/16/2020 5:13:42 PM">This is inserted changes</ins><br/><ins data-id="1548187447331" data-user-label="Trey" data-time="01/16/2020 5:13:42 PM">This is more inserted changes</ins><br/><del data-id="1548187447331" data-user-label="Trey" data-time="01/16/2020 5:13:42 PM">This is deleted changes</del>',
+  )
+})
+
+it('Serializes lists with lines and nested lists correctly', () => {
+  let contentJSON = [
+    {
+      type: 'ul',
+      attrs: { class: 'rte2-style-ul' },
+      content: [
+        {
+          type: 'listItem',
+          attrs: { class: 'li-cms-list-item-div' },
+          content: [
+            {
+              type: 'listItemDiv',
+              attrs: { class: 'cms-list-item-div' },
+              content: [
+                { type: 'line', content: [{ type: 'text', text: 'test' }] },
+              ],
+            },
+            {
+              type: 'ul',
+              attrs: { class: 'rte2-style-ul' },
+              content: [
+                {
+                  type: 'listItem',
+                  attrs: { class: 'li-cms-list-item-div' },
+                  content: [
+                    {
+                      type: 'listItemDiv',
+                      attrs: { class: 'cms-list-item-div' },
+                      content: [{ type: 'text', text: 'test' }],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ]
+
+  let fragment = Fragment.fromJSON(schema, contentJSON)
+  let serializedContent = defaultBrightspotDOMSerializer.serialize(
+    fragment,
+    compliantTagNameMap,
+  )
+  expect(serializedContent).toBe('<ul><li>test<ul><li>test</li></ul></li></ul>')
+})

package/src/legacy/tool-ui/src/main/webapp/v4/__tests__/unit/rte/settings/menuItemsBuilder.test.js

@@ -0,0 +1,226 @@
+import { buildMenuItemsFromConfig } from '../../../../rte/settings/menuItemsBuilder'
+import { buildSchemaFromConfig } from '../../../../rte/settings/schemaBuilder'
+
+const getMenuItems = (toolbar) => {
+  const customMenuBar = RICH_TEXT_TOOLBARS[toolbar]
+  const schema = buildSchemaFromConfig(customMenuBar)
+  return buildMenuItemsFromConfig(customMenuBar, schema, false)
+}
+
+it('Builds the correct small menu when default organization is enabled', () => {
+  const menuItems = getMenuItems('brightspot.core.tool.SmallRichTextToolbar')
+  const expectedItems = [
+    {
+      items: [
+        {
+          dom: {
+            className: 'rte2-toolbar-bold',
+            name: 'bold',
+            tooltip: 'Bold',
+            icon: 'format_bold',
+          },
+        },
+      ],
+    },
+  ]
+
+  expect(menuItems).toMatchObject(expectedItems)
+})
+
+it('Builds the correct large menu when default organization is enabled', () => {
+  const menuItems = getMenuItems('brightspot.core.tool.LargeRichTextToolbar')
+  const expectedItems = [
+    {
+      rollAt: 0,
+      topLevelIcon: null,
+      topLevelText: 'Style',
+      items: [
+        {
+          dom: {
+            className: 'rte2-toolbar-bold',
+            name: 'bold',
+            tooltip: 'Bold',
+            icon: 'format_bold',
+          },
+          activeIfUnset: [],
+          inactiveIfSet: [],
+        },
+      ],
+    },
+    {
+      items: [
+        {
+          dom: {
+            className: 'rte2-toolbar-ul',
+            name: 'ul',
+            tooltip: 'Bulleted List',
+            icon: '',
+          },
+          activeIfUnset: [],
+          inactiveIfSet: [],
+        },
+      ],
+    },
+    {
+      items: [
+        {
+          dom: {
+            className: 'rte2-toolbar-indent',
+            name: 'indent',
+            tooltip: 'Indent (Ctrl-])',
+            icon: 'format_indent_increase',
+          },
+          activeIfUnset: [],
+          inactiveIfSet: [],
+        },
+      ],
+    },
+    {
+      items: [
+        {
+          dom: {
+            className: 'rte2-toolbar-outdent',
+            name: 'outdent',
+            tooltip: 'Outdent (Ctrl-[)',
+            icon: 'format_indent_decrease',
+          },
+          activeIfUnset: [],
+          inactiveIfSet: [],
+        },
+      ],
+    },
+    {
+      items: [
+        {
+          dom: {
+            className: 'rte2-toolbar-align-left',
+            name: 'alignLeft',
+            tooltip: 'Left Align Text',
+            icon: '',
+          },
+          activeIfUnset: ['ul', 'alignCenter', 'ol', 'alignRight'],
+          inactiveIfSet: [],
+        },
+      ],
+    },
+    {
+      items: [
+        {
+          dom: {
+            className: 'rte2-toolbar-align-center',
+            name: 'alignCenter',
+            tooltip: 'Center Align Text',
+            icon: '',
+          },
+          activeIfUnset: [],
+          inactiveIfSet: [],
+        },
+      ],
+    },
+    {
+      items: [
+        {
+          dom: {
+            className: 'rte2-toolbar-align-right',
+            name: 'alignRight',
+            tooltip: 'Right Align Text',
+            icon: '',
+          },
+          activeIfUnset: [],
+          inactiveIfSet: [],
+        },
+      ],
+    },
+    {
+      items: [
+        {
+          dom: {
+            className: 'rte2-toolbar-ol',
+            name: 'ol',
+            tooltip: 'Numbered List',
+            icon: '',
+          },
+          activeIfUnset: [],
+          inactiveIfSet: [],
+        },
+      ],
+    },
+    {
+      items: [
+        {
+          dom: {
+            className: 'brightspot-core-link-LinkRichTextElement',
+            name: 'a',
+            tooltip: 'Link',
+            displayName: 'Link',
+            icon: 'link',
+          },
+          context: [],
+          activeIfUnset: [],
+          inactiveIfSet: [],
+        },
+      ],
+    },
+    {
+      items: [
+        {
+          dom: {
+            className: 'brightspot-core-image-ImageRichTextElement',
+            name: 'bsp-image',
+            tooltip: 'Add Image (Shift-Ctrl-I)',
+            displayName: 'Image',
+            icon: 'photo',
+          },
+          context: [null],
+          activeIfUnset: [],
+          inactiveIfSet: [],
+        },
+      ],
+    },
+    {
+      items: [
+        {
+          dom: {
+            className: 'brightspot-core-video-VideoRichTextElement',
+            name: 'bsp-video',
+            tooltip: 'Add Video (Shift-Ctrl-V)',
+            displayName: 'Video',
+            icon: 'ondemand_video',
+          },
+          context: [null],
+          activeIfUnset: [],
+          inactiveIfSet: [],
+        },
+      ],
+    },
+    {
+      rollAt: 0,
+      topLevelIcon: null,
+      topLevelText: 'Highlight',
+      items: [
+        {
+          dom: {
+            className: 'core-rte-highlight-BlueHighlightRichTextElement',
+            name: 'blue',
+            tooltip: '',
+            displayName: 'Blue',
+            icon: null,
+          },
+          context: [],
+        },
+        {
+          dom: {
+            className: 'core-rte-highlight-PlumHighlightRichTextElement',
+            name: 'plum',
+            tooltip: '',
+            displayName: 'Plum',
+            icon: null,
+          },
+          context: [],
+        },
+      ],
+    },
+  ]
+
+  expect(menuItems).toMatchObject(expectedItems)
+})

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

@@ -0,0 +1,118 @@
+import {
+  getActiveMarks,
+  getMarkState,
+  getObjectValue,
+  getActiveNodes,
+} from '../../../rte/utilities'
+import { EditorState } from 'prosemirror-state'
+import { DOMParser } from 'prosemirror-model'
+import { buildSchemaFromConfig } from '../../../rte/settings'
+
+const customMenuBar =
+  RICH_TEXT_TOOLBARS['brightspot.core.tool.LargeRichTextToolbar']
+const schema = buildSchemaFromConfig(customMenuBar)
+
+it('getObjectValue works correctly', () => {
+  const object = {
+    foo: {
+      bar: {
+        baz: 'fizzpop',
+      },
+    },
+  }
+
+  const fizzPop = getObjectValue(object, 'foo.bar.baz', 'defaultText')
+  expect(fizzPop).toBe('fizzpop')
+
+  const bar = getObjectValue(object, 'foo.bar')
+  expect(bar).toEqual({ baz: 'fizzpop' })
+
+  const notInObjectDefault = getObjectValue(object, 'foo.bar.no', 'defaultText')
+  expect(notInObjectDefault).toBe('defaultText')
+
+  const notInObject = getObjectValue(object, 'foo.bar.no')
+  expect(notInObject).toBe(undefined)
+})
+
+it('getMarkState works correctly', () => {
+  let tmp = document.createElement('div')
+  tmp.innerHTML = `test<br>test`
+
+  let state = EditorState.create({
+    doc: DOMParser.fromSchema(schema).parse(tmp),
+  })
+
+  let markState = getMarkState(state, schema.marks.bold)
+  expect(markState).toBe('inactive')
+
+  tmp = document.createElement('div')
+  tmp.innerHTML = `<b>test</b><br>test`
+
+  state = EditorState.create({
+    doc: DOMParser.fromSchema(schema).parse(tmp),
+  })
+
+  markState = getMarkState(state, schema.marks.bold)
+  expect(markState).toBe('active')
+})
+
+it('getActiveMarks works correctly', () => {
+  let tmp = document.createElement('div')
+  tmp.innerHTML = `<b>test</b><br>test`
+
+  let state = EditorState.create({
+    doc: DOMParser.fromSchema(schema).parse(tmp),
+  })
+
+  let activeMarks = getActiveMarks(state)
+  expect(activeMarks).toEqual(
+    new Map([
+      ['bold', true],
+      ['ins', false],
+      ['del', false],
+      ['html', false],
+      ['comment', false],
+      ['a', false],
+      ['blue', false],
+      ['plum', false],
+    ]),
+  )
+
+  tmp = document.createElement('div')
+  tmp.innerHTML = `test<br>test`
+
+  state = EditorState.create({
+    doc: DOMParser.fromSchema(schema).parse(tmp),
+  })
+
+  activeMarks = getActiveMarks(state)
+  expect(activeMarks).toEqual(
+    new Map([
+      ['comment', false],
+      ['a', false],
+      ['bold', false],
+      ['ins', false],
+      ['del', false],
+      ['html', false],
+      ['blue', false],
+      ['plum', false],
+    ]),
+  )
+})
+
+it('getActiveNodes works correctly', () => {
+  let tmp = document.createElement('div')
+  tmp.innerHTML = `<b>test</b><br>test`
+
+  let state = EditorState.create({
+    doc: DOMParser.fromSchema(schema).parse(tmp),
+  })
+
+  let activeNodes = getActiveNodes(state)
+  expect(activeNodes).toEqual(
+    new Map([
+      ['doc', true],
+      ['line', true],
+    ]),
+  )
+})

package/src/legacy/tool-ui/src/main/webapp/v4/appetizeio/Appetizeio.js

@@ -0,0 +1,5 @@
+import onFindOnce from '../dom/onFindOnce'
+
+onFindOnce('.AppetizeioPreviewPage', async () => {
+  await import(/* webpackChunkName: 'Appetizeio' */ './AppetizeioEmbedded')
+})