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

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/fullscreen_manager/views/FullscreenView.less

@@ -0,0 +1,383 @@
+@import (reference) url('../../../../Icon.less');
+@import (reference) url('../../../../IconButton.less');
+@import (reference) url('../../../../Text.less');
+@import (reference) url('../../../../Reset.less');
+
+.ProseMirror-fullscreen-container {
+  background-color: var(--color-white);
+  bottom: 0;
+  box-sizing: border-box;
+  height: 100vh;
+  left: 0;
+  opacity: 1;
+  overflow-y: scroll;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: opacity 0.5s linear;
+  visibility: visible;
+  width: 100%;
+  z-index: 999;
+
+  a[data-icon='open_with'] {
+    display: none !important;
+  }
+
+  &.hide {
+    height: 0;
+    opacity: 0;
+    transition: all 0.5s linear;
+    visibility: hidden;
+    width: 0;
+  }
+
+  &.is-htmlMode {
+    .ProsemirrorWordCount {
+      display: none;
+    }
+  }
+
+  &-header {
+    background-color: var(--color-dominant1);
+    border-bottom: var(--borderWidth-thick) solid var(--color-dominant5);
+    box-sizing: border-box;
+    color: var(--color-dominant5);
+    display: flex;
+    font-size: var(--fontSize-l);
+    font-style: italic;
+    height: var(--lineHeight-xxl);
+    line-height: var(--lineHeight-xxl);
+    padding: 0 var(--gap-l);
+    position: fixed;
+    text-overflow: ellipsis;
+    top: 0;
+    white-space: nowrap;
+    width: 100%;
+    z-index: 10;
+
+    .InputWrapper {
+      width: 100%;
+
+      input[type='text'] {
+        border-bottom-width: 0;
+        line-height: normal;
+        width: 100%;
+
+        &:read-only {
+          pointer-events: none;
+        }
+
+        &:hover {
+          border-bottom-width: 1px;
+        }
+
+        &:focus {
+          color: var(--color-black);
+          font-style: normal;
+        }
+      }
+    }
+
+    &-aside {
+      float: right;
+      padding: 0 var(--gap-m);
+
+      .ProseMirrorAvatarWrapper {
+        float: left;
+        font-style: normal;
+        margin: var(--gap-s) var(--gap-s) 0 0;
+        position: static;
+      }
+
+      .WorkInProgressSaveStatus {
+        .Link.is-gray;
+
+        font-size: var(--fontSize-m);
+        font-style: normal;
+
+        &[data-deleted='true'] {
+          pointer-events: none;
+        }
+      }
+    }
+  }
+
+  &-footer {
+    background-color: var(--color-white);
+    border: 1px solid var(--color-gray3);
+    bottom: 0;
+    height: var(--lineHeight-xxl);
+    position: fixed;
+    width: 100%;
+    z-index: 10;
+
+    .ProsemirrorWordCount {
+      bottom: var(--gap-l);
+      right: var(--gap-l);
+    }
+  }
+
+  .ProseMirrorContainer {
+    background-color: var(--color-gray1);
+    border: none;
+    display: grid;
+    grid-template:
+      'toolbar'
+      'main';
+    grid-template-columns: 100%;
+    grid-template-rows: min-content auto;
+    height: calc(100vh - var(--lineHeight-xxl) * 2);
+    top: var(--lineHeight-xxl);
+
+    &:focus-within {
+      .ProseMirrorToolbar {
+        border-bottom-color: var(--Input-borderColor);
+      }
+    }
+
+    > .AutoExpand {
+      display: none;
+    }
+  }
+
+  .ProseMirrorToolbar {
+    box-shadow: var(--shadow-2);
+    grid-area: toolbar;
+    position: sticky;
+    top: var(--lineHeight-xxl);
+    width: 100%;
+    z-index: 9;
+
+    [data-rte-style='rte2-toolbar-fullscreen'] {
+      [dir='rtl'] & {
+        left: 25px;
+        right: auto;
+      }
+    }
+
+    &.is-visible {
+      border-bottom-color: var(--Input-borderColor);
+    }
+  }
+
+  .ProseMirror {
+    --ProseMirror-maxWidth: 816px;
+
+    background-color: var(--color-white);
+    border-left: var(--borderWidth-thin) solid var(--color-gray3);
+    border-right: var(--borderWidth-thin) solid var(--color-gray3);
+    box-shadow: none;
+    box-sizing: border-box;
+    grid-area: main;
+    margin: 0 auto;
+    overflow: scroll;
+    padding: calc(var(--gap-xl) * 2);
+    width: 100%;
+    z-index: 1;
+    .Text.is-xl;
+
+    /* Make larger than surrounding text */
+    .rte2-style-brightspot-core-rte-heading-HeadingTwo,
+    .rte2-style-brightspot-core-rte-heading-HeadingThree {
+      .Text.is-xxl;
+    }
+
+    &:not(.ProseMirror-previewMode) {
+      .rte2-style-ins-delete:not(.is-active),
+      .rte2-style-ins-delete:not(.is-active) .Enhancement {
+        background-color: var(--color-red1);
+      }
+
+      .rte2-style-ins-insert:not(.is-active),
+      .rte2-style-ins-insert:not(.is-active) .Enhancement {
+        background-color: var(--color-green1);
+      }
+
+      .rte2-style-comment:not(.is-active) {
+        background-color: var(--color-gray1);
+      }
+    }
+
+    .rte2-style-brightspot-core-quote-QuoteRichTextElement {
+      font-style: italic;
+      padding: 0 var(--iconSize-m);
+
+      &::before {
+        .Icon;
+        .Icon.is-m;
+
+        color: var(--color-text);
+        content: 'format_quote';
+        left: 0;
+        position: absolute;
+        top: 0;
+      }
+    }
+  }
+
+  @media (@mq-m) {
+    .ProseMirrorContainer {
+      grid-template:
+        'toolbar'
+        'main';
+      grid-template-columns: 100%;
+      grid-template-rows: min-content auto;
+      height: calc(100vh - (var(--lineHeight-xxl) * 2));
+
+      .ProseMirror-comments {
+        display: none;
+      }
+    }
+
+    &.is-comments .ProseMirrorContainer {
+      grid-template:
+        'toolbar toolbar'
+        'main aside';
+      grid-template-columns: 70% 30%;
+      grid-template-rows: min-content auto;
+      height: calc(100vh - (var(--lineHeight-xxl) * 2));
+
+      .ProseMirror-comments {
+        display: block;
+      }
+    }
+  }
+
+  @media (@mq-l) {
+    &.is-comments .ProseMirrorContainer,
+    .ProseMirrorContainer {
+      grid-template:
+        'toolbar toolbar toolbar'
+        '. main aside';
+      grid-template-columns: 25% 50% 25%;
+      grid-template-rows: min-content auto;
+      height: calc(100vh - var(--lineHeight-xxl));
+
+      > .AutoExpand {
+        display: block;
+      }
+    }
+
+    .ProseMirror-comments {
+      display: block;
+      margin-bottom: var(--lineHeight-xxl);
+    }
+  }
+}
+
+.ProseMirror-fullscreen-container .Mention {
+  .Text.is-xl;
+}
+
+.ProseMirror-comments {
+  border-color: var(--color-gray3);
+  border-style: solid;
+  border-width: 1px 0 0 1px;
+  bottom: var(--lineHeight-xxl);
+  display: none;
+  grid-area: aside;
+  overflow: scroll;
+}
+
+.ProseMirror-comment,
+.ProseMirror-reply {
+  background: var(--color-white);
+  border-bottom: 1px solid var(--color-gray3);
+  cursor: pointer;
+  padding: var(--gap-m) var(--gap-l);
+  position: relative;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+
+.ProseMirror-comment {
+  border-left: solid calc(var(--borderWidth-thick) * 3) transparent;
+  padding-left: calc(var(--gap-l) - calc(var(--borderWidth-thick) * 3));
+
+  &:not(.is-active) {
+    .ProseMirror-commentActions > * {
+      color: var(--color-gray3);
+      pointer-events: none;
+    }
+  }
+
+  &.is-del.is-active {
+    border-bottom-color: var(--color-black);
+    border-left-color: var(--color-red5);
+  }
+
+  &.is-ins.is-active {
+    border-bottom-color: var(--color-black);
+    border-left-color: var(--color-green5);
+  }
+
+  &.is-comment.is-active {
+    border-bottom-color: var(--color-black);
+    border-left-color: var(--color-gray5);
+  }
+}
+
+.ProseMirror-commentActions {
+  .Icon.is-s;
+
+  display: flex;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.ProseMirror-commentAccept {
+  .IconButton;
+
+  --IconButton-name: 'check_circle';
+}
+
+.ProseMirror-commentReject {
+  .IconButton;
+
+  --IconButton-name: 'cancel';
+}
+
+.ProseMirror-commentReply {
+  .IconButton;
+
+  --IconButton-name: 'reply';
+}
+
+.ProseMirror-commentRemove {
+  .IconButton;
+
+  --IconButton-name: 'cancel';
+}
+
+.ProseMirror-commentUser {
+  font-weight: bold;
+}
+
+.ProseMirror-commentTime {
+  .Text.is-s;
+
+  color: var(--color-gray6);
+  margin-bottom: var(--gap-xs);
+
+  &::before {
+    background: var(--color-gray5);
+    border-radius: 100%;
+    content: '';
+    display: inline-block;
+    height: var(--fontSize-s);
+    margin: 0 var(--gap-xs) calc((var(--Text-height) - var(--fontSize-s)) / 2) 0;
+    vertical-align: bottom;
+    width: var(--fontSize-s);
+  }
+}
+
+.ProseMirror-comment.is-del .ProseMirror-commentTime::before {
+  background: var(--color-red5);
+}
+
+.ProseMirror-comment.is-ins .ProseMirror-commentTime::before {
+  background: var(--color-green5);
+}

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/html_editor_manager/htmlEditorManager.js

@@ -0,0 +1,66 @@
+/* eslint-disable no-debugger */
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { HtmlEditorView } from './views/HtmlEditorView'
+import { keydownHandler } from 'prosemirror-keymap'
+import { findKeyMapping, keyMappingHandler } from '../../settings/keymapBuilder'
+
+const key = new PluginKey('htmlEditor')
+const keyHandler = {}
+
+keyHandler[findKeyMapping('html')] = keyMappingHandler('rte2-toolbar-html')
+
+const modeToggle = () => {
+  return function (state, dispatch) {
+    dispatch(
+      state.tr.setMeta(key, {
+        toggleHTMLEditor: true,
+      }),
+    )
+
+    return true
+  }
+}
+
+const htmlEditorPlugin = (compliantTagNameMap) => {
+  return new Plugin({
+    key,
+
+    view(editorView) {
+      this.view = new HtmlEditorView(key.key, compliantTagNameMap)
+      editorView.dom.parentElement.appendChild(this.view.dom)
+      return this.view
+    },
+
+    state: {
+      init(_, state) {
+        const pluginState = new Map()
+        const activeStates = new Map()
+        pluginState.set('activeStates', activeStates)
+        pluginState.set('isEditorVisible', false)
+        return pluginState
+      },
+
+      apply(transaction, value) {
+        const oldPuginState = value
+        const pluginState = new Map(oldPuginState)
+        const activeStates = new Map()
+        const meta = transaction.getMeta(key)
+
+        if (meta && meta.hasOwnProperty('toggleHTMLEditor')) {
+          pluginState.set(
+            'isEditorVisible',
+            !oldPuginState.get('isEditorVisible'),
+          )
+        }
+
+        pluginState.set('activeStates', activeStates)
+        return pluginState
+      },
+    },
+    props: {
+      handleKeyDown: keydownHandler(keyHandler),
+    },
+  })
+}
+
+export { htmlEditorPlugin, modeToggle }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/html_editor_manager/views/HtmlEditorView.js

@@ -0,0 +1,97 @@
+/* eslint-disable no-debugger */
+import { AllSelection } from 'prosemirror-state'
+import { DOMParser } from 'prosemirror-model'
+import { getLegacyHTMLTextForProsemirror } from '../../../codemirror-shim'
+import CodeMirror from 'codemirror'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/mode/htmlmixed/htmlmixed.js'
+
+if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
+  await import('../../../../../../../form/CodeInput/CodeMirror.less')
+}
+
+/**
+ * Adds functionality to hide PM and open a CodeMirror HTML editor.
+ */
+class HtmlEditorView {
+  /**
+   * @param {ProseMirror.PluginKey} myKey
+   */
+  constructor(myKey, compliantTagNameMap) {
+    this.myKey = myKey
+    this.compliantTagNameMap = compliantTagNameMap
+    this.dom = document.createElement('textarea')
+    this.dom.dataset.hideWordCount = true
+    this.dom.className = 'Prosemirror-html-editor'
+    this.dom.style.display = 'none'
+  }
+
+  /**
+   * @param {ProseMirror.EditorView} view
+   */
+  update(view) {
+    const { state } = view
+    const pluginState = state[this.myKey]
+
+    if (!pluginState.get('isEditorVisible') && !this.editor) {
+      return
+    }
+
+    if (pluginState.get('isEditorVisible')) {
+      const ctx = view.props.props.ctx
+      this.dom.value = ctx.value
+      this.editor = CodeMirror.fromTextArea(this.dom, {
+        lineNumbers: true,
+        mode: 'htmlmixed',
+        lineWrapping: true,
+      })
+      // CodeMirror swaps out textarea and we need to be sure it isn't picked up by v3#updateWordCount
+      // and get Word/Char counts added to the new textarea used by CodeMirror.
+      this.editor
+        .getWrapperElement()
+        .querySelector('textarea').dataset.hideWordCount = true
+      view.dom.style.display = 'none'
+      view.dom.parentElement.classList.add('is-htmlMode')
+      const fullscreenContainer = view.dom.closest(
+        '.ProseMirror-fullscreen-container',
+      )
+      if (fullscreenContainer) {
+        fullscreenContainer.classList.add('is-htmlMode')
+      }
+    } else {
+      this._toProseMirror(view)
+    }
+  }
+
+  _toProseMirror(view) {
+    const { state, dispatch } = view
+
+    if (!this.editor) {
+      return
+    }
+
+    this.editor.toTextArea()
+    this.editor = null
+    this.dom.style.display = 'none'
+    view.dom.style.display = 'block'
+    view.dom.parentElement.classList.remove('is-htmlMode')
+    const fullscreenContainer = view.dom.closest(
+      '.ProseMirror-fullscreen-container',
+    )
+    if (fullscreenContainer) {
+      fullscreenContainer.classList.remove('is-htmlMode')
+    }
+    const tmpElement = document.createElement('div')
+    const shimmed = getLegacyHTMLTextForProsemirror(
+      this.dom.value,
+      state.config.schema,
+      this.compliantTagNameMap,
+    )
+    tmpElement.innerHTML = shimmed
+    const parsed = DOMParser.fromSchema(state.config.schema).parse(tmpElement)
+    const allSelection = new AllSelection(state.doc)
+    dispatch(state.tr.setSelection(allSelection).replaceSelectionWith(parsed))
+  }
+}
+
+export { HtmlEditorView }