@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.js

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