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

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

@@ -1,474 +0,0 @@
-/* eslint-disable no-debugger */
-import { html, render } from 'lit-html'
-import moment from 'moment'
-import { NodeSelection, TextSelection } from 'prosemirror-state'
-import { constants } from '../../../settings'
-import { acceptChanges, rejectChanges } from '../../track_manager/TrackManager'
-import { getPluginState } from '../../../utilities'
-
-if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
-  await import('./FullscreenView.less')
-}
-
-/**
- * Adds functionality to open the editor into a "full-screen" mode.
- */
-class FullScreenView {
-  /**
-   * @param {ProseMirror.EditorView} editorView
-   * @param {ProseMirror.PluginKey} myKey
-   */
-  constructor(editorView, myKey) {
-    this.editorView = editorView
-    this.myKey = myKey
-
-    this.editorDOM = this.editorView.dom
-    this.editorDOMParent = this.editorDOM.parentNode
-    this.editorDOMGrandParent = this.editorDOMParent.parentNode
-    this.fullScreenContainer = document.createElement('div')
-    this.fullScreenContainer.className = 'ProseMirror-fullscreen-container'
-    this.header = document.createElement('div')
-    this.header.className = 'ProseMirror-fullscreen-container-header'
-    this.fullScreenContainer.appendChild(this.header)
-    this.footer = document.createElement('div')
-    this.footer.className = 'ProseMirror-fullscreen-container-footer'
-    this.fullScreenContainer.appendChild(this.footer)
-    const dialog = this.editorDOM.closest('dialog')
-    if (dialog) {
-      dialog.appendChild(this.fullScreenContainer)
-    } else {
-      document.body.appendChild(this.fullScreenContainer)
-    }
-    this.fullScreenContainer.classList.add('hide')
-    this.headerAside = document.createElement('div')
-    this.headerAside.className = 'ProseMirror-fullscreen-container-header-aside'
-    this.header.appendChild(this.headerAside)
-    this.form = this.editorDOM.closest('.ContentEdit')
-    this.comments = document.createElement('div')
-    this.comments.className = 'ProseMirror-comments'
-    this.editorDOMParent.appendChild(this.comments)
-
-    if (this.form && this.form.hasAttribute('data-rte-title-field')) {
-      this.titleField = this.form.querySelector(
-        `[name="${this.form.getAttribute('data-rte-title-field')}"]`,
-      )
-      if (this.titleField) {
-        this.titleInput = document.createElement('input')
-        this.titleInput.type = 'text'
-        this.titleInput.addEventListener('input', (event) => {
-          this.titleField.value = this.titleInput.value
-          const evt = document.createEvent('HTMLEvents')
-          evt.initEvent('change', true, false)
-          this.titleField.dispatchEvent(evt)
-        })
-
-        const inputWrapper = document.createElement('div')
-        inputWrapper.className = 'InputWrapper'
-        inputWrapper.appendChild(this.titleInput)
-        this.header.prepend(inputWrapper)
-      }
-    }
-  }
-
-  /**
-   * Renders the RTE in full-screen mode by appending the editor and the menu
-   * to a div added to the DOM by this class in its constructor, if the state
-   * is in `isFullScreen`. Otherwise appends the editor back to its original parent.
-   */
-  render() {
-    const pluginState = getPluginState(this.editorView, this.myKey)
-    if (
-      !pluginState.get('activeStates') ||
-      !pluginState.get('activeStates').get('fullscreen')
-    ) {
-      this.editorDOMGrandParent.appendChild(this.editorDOMParent)
-      this.fullScreenContainer.classList.add('hide')
-      const wipStatus = this.headerAside.querySelector(
-        '.WorkInProgressSaveStatus',
-      )
-      if (wipStatus) {
-        this.form
-          ?.querySelector('.widget-publishing .icon-action-publish')
-          ?.appendChild(wipStatus)
-      }
-      const evt = document.createEvent('HTMLEvents')
-      evt.initEvent('input', true, false)
-      this.editorView.props.props.ctx.dispatchEvent(evt)
-      const wordCount = this.footer.querySelector('.ProsemirrorWordCount')
-      if (wordCount) {
-        this.editorDOMParent.appendChild(wordCount)
-      }
-      const avatarContainer = this.fullScreenContainer.querySelector(
-        `.${constants.CLASSES.PM_AVATAR_WRAPPER}`,
-      )
-      if (avatarContainer) {
-        this.editorDOMParent.appendChild(avatarContainer)
-      }
-    } else {
-      // We might be in a popup (e.g. opening a story from the assignment desk
-      // assignment content tab), in which case we need z-index to be higher up than
-      // that popup to be on top of it, but we don't want to be be any higher
-      // than +1 because we would then be on top of any popups from the RTE
-      // itself (e.g. when user clicks menu to open popup to place an image).
-      const closestPopup = this.editorDOM.closest('.Popup.is-visible')
-      if (closestPopup) {
-        const zIndex = closestPopup.style.zIndex
-        this.fullScreenContainer.style.zIndex = `${parseInt(zIndex) + 1}`
-      }
-      this.fullScreenContainer.appendChild(this.editorDOMParent)
-      this.fullScreenContainer.classList.remove('hide')
-
-      if (window.BRIGHTSPOT?.ui.cms.enableV5UI) {
-        this.fullScreenContainer.setAttribute('popover', 'manual')
-        this.fullScreenContainer.showPopover()
-      }
-
-      const wordCount = this.editorDOMParent.querySelector(
-        '.ProsemirrorWordCount',
-      )
-      if (wordCount) {
-        this.footer.appendChild(wordCount)
-      }
-
-      const wipStatus = this.form?.querySelector(
-        '.widget-publishing .icon-action-publish .WorkInProgressSaveStatus',
-      )
-      if (wipStatus) {
-        this.headerAside.appendChild(wipStatus)
-      }
-
-      if (this.titleInput) {
-        this.titleInput.placeholder = 'Untitled'
-        this.titleInput.title = 'Click to Edit'
-
-        const CIGRow = this.titleField.closest('.CIG-row')
-        const uneditable = ['is-pending', 'is-updated', 'is-readOnly']
-
-        if (
-          this.titleField.readOnly ||
-          (CIGRow && uneditable.some((c) => CIGRow.classList.contains(c)))
-        ) {
-          this.titleInput.readOnly = true
-        } else {
-          this.titleInput.removeAttribute('readonly')
-        }
-
-        if (this.titleField.value) {
-          this.titleInput.value = this.titleField.value
-        } else {
-          this.titleInput.value = ''
-        }
-      } else {
-        const headlineTitle = document.querySelector(
-          '.ContentEdit-title .ContentLabel[data-previous-text]',
-        )
-        this.header.innerText = headlineTitle
-          ? headlineTitle.innerText
-          : 'Untitled'
-      }
-
-      const avatarContainer = this.editorDOMParent.querySelector(
-        `.${constants.CLASSES.PM_AVATAR_WRAPPER}`,
-      )
-      const asideContainer = this.fullScreenContainer.querySelector(
-        '.ProseMirror-fullscreen-container-header-aside',
-      )
-      const wipStatusConatiner = this.fullScreenContainer.querySelector(
-        '.WorkInProgressSaveStatus',
-      )
-
-      if (avatarContainer && asideContainer && wipStatusConatiner) {
-        asideContainer.insertBefore(avatarContainer, wipStatusConatiner)
-      }
-    }
-
-    this.editorDOMParent.querySelector('.ProseMirror').focus()
-  }
-
-  /**
-   * Prosemirror calls this for us on every transaction that is
-   * dispatched. We don't want to reappend the editor to the
-   * first child repeatedly and unecessarily, so we look to make sure
-   * the plugin's state is in a `hasToggle` state. It is only in an
-   * `hasToggle` state when the user engages the full-screen command.
-   */
-  update() {
-    const editorView = this.editorView
-    const pluginState = getPluginState(editorView, this.myKey)
-
-    if (pluginState.get('hasToggle')) {
-      this.render()
-    }
-
-    const isFullscreen = pluginState.get('activeStates')?.get('fullscreen')
-    if (!isFullscreen) {
-      this.fullScreenContainer.classList.remove('is-comments')
-      render('', this.comments)
-      return
-    }
-
-    const doc = editorView.state.doc
-    const comments = []
-
-    doc.descendants((node, pos) => {
-      node.marks.forEach(({ type: { name }, attrs }) => {
-        if (name === 'comment' || name === 'del' || name === 'ins') {
-          const replies = attrs['data-replies']
-
-          comments.push({
-            pos,
-            type: name,
-            userId: attrs['data-user-id'],
-            user: attrs['data-user-label'],
-            time: attrs['data-time'],
-            text: node.attrs.meta
-              ? `${node.attrs.meta?.displayName}: ${node.attrs.label}`
-              : node.textContent,
-            replies: replies ? JSON.parse(replies) : null,
-          })
-        }
-      })
-    })
-
-    if (comments.length === 0) {
-      this.fullScreenContainer.classList.remove('is-comments')
-      render('', this.comments)
-      return
-    } else {
-      this.fullScreenContainer.classList.add('is-comments')
-    }
-
-    const makeActive = (target) => {
-      if (target && target.closest('.ProseMirror-comment')) {
-        const comment = target.closest('.ProseMirror-comment')
-        const type = comment.dataset.type
-        const node = this.editorView.state.doc.nodeAt(comment.pos)
-        const mark = node.marks.find((mark) => type === mark.type.name)
-        const attrs = Object.assign({}, mark.attrs)
-
-        if (comment.classList.contains('is-active')) {
-          attrs.class = attrs.class.replace(' is-active', '')
-        } else {
-          attrs.class = `${attrs.class} is-active`
-
-          // Remove any previous active comment.
-          makeActive(this.comments.querySelector('.is-active'))
-        }
-
-        const newMark = mark.type.create(attrs)
-        let tr = editorView.state.tr
-        let selection
-
-        if (node.isText) {
-          tr = tr.removeMark(comment.pos, comment.pos + node.nodeSize, mark)
-          tr = tr.addMark(comment.pos, comment.pos + node.nodeSize, newMark)
-          selection = new TextSelection(
-            tr.doc.resolve(comment.pos),
-            tr.doc.resolve(comment.pos + node.nodeSize),
-          )
-        } else {
-          tr = tr.setNodeMarkup(
-            comment.pos,
-            node.type,
-            node.attrs,
-            node.marks.map((m) =>
-              m.type.name === newMark.type.name ? newMark : m,
-            ),
-          )
-          selection = new NodeSelection(tr.doc.resolve(comment.pos))
-        }
-
-        tr.setSelection(selection)
-        editorView.dispatch(tr)
-
-        comment.classList.toggle('is-active')
-
-        editorView
-          .nodeDOM(comment.pos)
-          .parentElement.scrollIntoView({ behavior: 'smooth' })
-      }
-    }
-
-    const updateComment = (target, callback) => {
-      const pos = target.closest('.ProseMirror-comment').pos
-      const { from, to, node } = NodeSelection.create(doc, pos)
-
-      const comment = node.marks.filter((m) => m.type.name === 'comment')[0]
-
-      if (comment) {
-        const attrs = Object.assign({}, comment.attrs)
-        let replies = attrs['data-replies']
-        replies = replies ? JSON.parse(replies) : []
-        callback(replies)
-        attrs['data-replies'] = JSON.stringify(replies)
-
-        editorView.dispatch(
-          editorView.state.tr.addMark(from, to, comment.type.create(attrs)),
-        )
-      }
-    }
-
-    render(
-      html`
-        ${comments.map((comment) => {
-          const type = comment.type
-
-          return html`
-            <div
-              class="ProseMirror-comment is-${type}"
-              data-type="${type}"
-              .pos=${comment.pos}
-              @click=${({ target }) => makeActive(target)}
-            >
-              ${type === 'del' || type === 'ins'
-                ? html`
-                    <div class="ProseMirror-commentActions">
-                      <div
-                        class="ProseMirror-commentAccept"
-                        @click=${(e) => {
-                          e.stopPropagation()
-                          e.target
-                            .closest('.ProseMirror-comment')
-                            .classList.remove('is-active')
-                          acceptChanges()(
-                            editorView.state,
-                            editorView.dispatch,
-                            editorView,
-                          )
-                        }}
-                      ></div>
-                      <div
-                        class="ProseMirror-commentReject"
-                        @click=${(e) => {
-                          e.stopPropagation()
-                          e.target
-                            .closest('.ProseMirror-comment')
-                            .classList.remove('is-active')
-                          rejectChanges()(
-                            editorView.state,
-                            editorView.dispatch,
-                            editorView,
-                          )
-                        }}
-                      ></div>
-                    </div>
-                  `
-                : html`
-                    <div class="ProseMirror-commentActions">
-                      <div
-                        class="ProseMirror-commentReply"
-                        @click=${({ target }) => {
-                          updateComment(target, (replies) => {
-                            replies.push({
-                              time: moment().format('MM/D/YYYY h:mm:ss A'),
-                              userId: document.documentElement.dataset.userId,
-                              user: document.documentElement.dataset.userLabel,
-                              text: '',
-                            })
-                          })
-                        }}
-                      ></div>
-                    </div>
-                  `}
-              <div class="ProseMirror-commentUser">${comment.user}</div>
-              <div class="ProseMirror-commentTime">${comment.time}</div>
-              <div class="ProseMirror-commentText">
-                ${type == 'del'
-                  ? html`Removed "${comment.text}"`
-                  : type == 'ins'
-                    ? html`Added "${comment.text}"`
-                    : html`
-                        ${comment.userId ===
-                        document.documentElement.dataset.userId
-                          ? html`<textarea
-                              placeholder="${comment.text}"
-                              .value="${comment.text}"
-                              @input=${({ target }) => {
-                                const pos = target.closest(
-                                  '.ProseMirror-comment',
-                                ).pos
-                                const state = editorView.state
-                                const node = state.doc.nodeAt(pos)
-                                if (!node) return
-                                const newText = target.value
-                                const tr = state.tr
-                                if (newText) {
-                                  tr.replaceWith(
-                                    pos,
-                                    pos + node.nodeSize,
-                                    state.schema.text(newText, node.marks),
-                                  )
-                                } else {
-                                  tr.delete(pos, pos + node.nodeSize)
-                                }
-                                editorView.dispatch(tr)
-                              }}
-                            />`
-                          : html`${comment.text}`}
-                        ${comment.replies
-                          ? html`
-                              <div class="ProseMirror-commentReplies">
-                                ${comment.replies.map((reply, i) => {
-                                  return html`
-                                    <div class="ProseMirror-reply">
-                                      ${reply.userId ===
-                                      document.documentElement.dataset.userId
-                                        ? html`<div
-                                            class="ProseMirror-commentActions"
-                                          >
-                                            <div
-                                              class="ProseMirror-commentRemove"
-                                              @click=${({ target }) => {
-                                                updateComment(
-                                                  target,
-                                                  (replies) => {
-                                                    replies.splice(i, 1)
-                                                  },
-                                                )
-                                              }}
-                                            ></div>
-                                          </div>`
-                                        : ''}
-                                      <div class="ProseMirror-commentUser">
-                                        ${reply.user}
-                                      </div>
-                                      <div class="ProseMirror-commentTime">
-                                        ${reply.time}
-                                      </div>
-                                      <div class="ProseMirror-commentText">
-                                        ${reply.userId ===
-                                        document.documentElement.dataset.userId
-                                          ? html`
-                                              <textarea
-                                                .value="${reply.text}"
-                                                @input=${({ target }) => {
-                                                  updateComment(
-                                                    target,
-                                                    (replies) => {
-                                                      replies[i].text =
-                                                        target.value
-                                                    },
-                                                  )
-                                                }}
-                                              />
-                                            `
-                                          : reply.text}
-                                      </div>
-                                    </div>
-                                  `
-                                })}
-                              </div>
-                            `
-                          : ''}
-                      `}
-              </div>
-            </div>
-          `
-        })}
-      `,
-      this.comments,
-    )
-  }
-}
-
-export { FullScreenView }

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

@@ -1,66 +0,0 @@
-/* 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

@@ -1,97 +0,0 @@
-/* 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 }