@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/find_replace_manager/views/FindView.js

@@ -1,604 +0,0 @@
-import { getPluginState } from '../../../utilities'
-import { escapeRegEx } from '../FindReplaceManager'
-import { html, render } from 'lit-html'
-
-if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
-  await import('./ProseMirrorFindReplace.less')
-}
-
-const BASE_CLASS = 'ProseMirrorFindReplace-findContainer'
-const FIND_PLACEHOLDER = RTE_FIND_IN_ARTICLE || 'Find in Article...'
-const REPLACE_PLACEHOLDER = RTE_REPLACE_WITH || 'Replace with'
-const MATCH_CASE_LABEL = RTE_MATCH_CASE || 'Replace'
-const MATCH_WHOLE_WORD_LABEL = RTE_MATCH_WHOLE_WORD || 'Match Whole Word'
-const REPLACE_BUTTON_TEXT = RTE_REPLACE || 'Replace'
-const REPLACE_ALL_BUTTON_TEXT = RTE_REPLACE_ALL || 'Replace All'
-const PAGINATION_TEXT = RTE_PAGINATION_TEXT || 'of'
-const COLLAPSED_CLASS = 'collapsed'
-
-/**
- * Adds "find and replace" functionality and sets up the markup
- * for the find and replace widget.
- */
-class FindView {
-  /**
-   * The Find and Replace container Replace markup.
-   *
-   * @param {Object.<text|number>} data UI State data
-   * @return {TemplateResult}
-   */
-  replaceTemplate = (data) => {
-    let isDisabledActive = false
-    if (
-      data.findInputVal &&
-      data.replaceInputVal &&
-      data.findInputVal !== data.replaceInputVal &&
-      data.total &&
-      data.current
-    ) {
-      isDisabledActive = true
-    }
-
-    return html`
-      <div class="${BASE_CLASS}-replaceContainer ${COLLAPSED_CLASS}" hidden>
-        <input
-          class="${BASE_CLASS}-replace-input"
-          type="text"
-          data-hide-word-count="true"
-          placeholder="${REPLACE_PLACEHOLDER}"
-        />
-
-        <div class="${BASE_CLASS}-options">
-          <label
-            ><input
-              class="${BASE_CLASS}-options-matchCase"
-              type="checkbox"
-            />${MATCH_CASE_LABEL}</label
-          >
-          <label
-            ><input
-              class="${BASE_CLASS}-options-matchWholeWord"
-              type="checkbox"
-            />${MATCH_WHOLE_WORD_LABEL}</label
-          >
-        </div>
-        <div class="${BASE_CLASS}-actions">
-          <button
-            @click=${this.handleReplace}
-            class="${BASE_CLASS}-actions-replace"
-            ?disabled=${!isDisabledActive}
-          >
-            ${REPLACE_BUTTON_TEXT}
-          </button>
-          <button
-            @click=${this.handleReplaceAll}
-            class="${BASE_CLASS}-actions-replaceAll"
-            ?disabled=${!isDisabledActive}
-          >
-            ${REPLACE_ALL_BUTTON_TEXT}
-          </button>
-        </div>
-      </div>
-    `
-  }
-
-  /**
-   * The Find and Replace container Pagination markup.
-   *
-   * @param {Object.<text|number>} data UI State data
-   * @return {TemplateResult}
-   */
-  paginationTemplate = (data) => {
-    let isNextActive = false
-    let isPrevActive = false
-    let isLTR = document.querySelector('html').getAttribute('dir') === 'ltr'
-
-    if (data.current < data.total) {
-      isNextActive = true
-    }
-
-    if (data.current > 1) {
-      isPrevActive = true
-    }
-
-    const prevClass = isPrevActive
-      ? `${BASE_CLASS}-pagination-prev`
-      : `${BASE_CLASS}-pagination-prev disabled`
-
-    const nextClass = isNextActive
-      ? `${BASE_CLASS}-pagination-next`
-      : `${BASE_CLASS}-pagination-next disabled`
-
-    const prevText = window.BRIGHTSPOT?.ui.tooltips.navigation.prevItem
-    const nextText = window.BRIGHTSPOT?.ui.tooltips.navigation.nextItem
-
-    if (isLTR) {
-      return html`
-        <div class="${BASE_CLASS}-pagination">
-          <button
-            class="${prevClass}"
-            type="button"
-            ?disabled=${!isPrevActive}
-            aria-label="${prevText}"
-            title="${prevText}"
-            @click=${this.handlePagination}
-          ></button>
-          <span class="${BASE_CLASS}-pagination-current">
-            ${data.current}
-          </span>
-          ${PAGINATION_TEXT}
-          <span class="${BASE_CLASS}-pagination-total"> ${data.total} </span>
-          <button
-            class="${nextClass}"
-            type="button"
-            ?disabled=${!isNextActive}
-            aria-label="${nextText}"
-            title="${nextText}"
-            @click=${(e) => this.handlePagination(e, true)}
-          ></button>
-        </div>
-      `
-    } else {
-      return html`
-        <div class="${BASE_CLASS}-pagination">
-          <button
-            class="${nextClass}"
-            type="button"
-            ?disabled=${!isNextActive}
-            aria-label="${nextText}"
-            title="${nextText}"
-            @click=${(e) => this.handlePagination(e, true)}
-          ></button>
-          <span class="${BASE_CLASS}-pagination-total"> ${data.total} </span>
-
-          ${PAGINATION_TEXT}
-
-          <span class="${BASE_CLASS}-pagination-current">
-            ${data.current}
-          </span>
-          <button
-            class="${prevClass}"
-            type="button"
-            ?disabled=${!isPrevActive}
-            aria-label="${prevText}"
-            title="${prevText}"
-            @click=${this.handlePagination}
-          ></button>
-        </div>
-      `
-    }
-  }
-
-  /**
-   * @param {ProseMirror.EditorView} editorView
-   * @param {ProseMirror.PluginKey} myKey
-   */
-  constructor(editorView, myKey) {
-    this.focused = false
-    this.editorView = editorView
-    this.myKey = myKey
-    /**
-     * Represents the current 'found'.
-     */
-    this.current = 1
-    /**
-     * The total 'found'.
-     */
-    this.total = 0
-    /**
-     * The items currently found so that we can later
-     * replace them.
-     */
-    this.found = []
-    this.dom = document.createElement('div')
-    this.dom.className = `${BASE_CLASS} ${COLLAPSED_CLASS}`
-    /**
-     * The plugin will use this to handle the decorations correctly based
-     * on whether the previous events were triggered by a replace action.
-     */
-    this.isReplaceAction = false
-    /**
-     * Our Find and Replace widget markup.
-     */
-    this.template = (data) => html`
-      <div class="${BASE_CLASS}-inputContainer">
-        <input
-          class="${BASE_CLASS}-input"
-          type="text"
-          data-hide-word-count="true"
-          placeholder="${FIND_PLACEHOLDER}"
-        />
-        ${this.paginationTemplate(data)}
-        <button
-          aria-label=${window.BRIGHTSPOT.ui.tooltips.expand}
-          aria-expanded="false"
-          type="button"
-          class="${BASE_CLASS}-more"
-          @click=${this.handleShowMore}
-        ></button>
-      </div>
-      ${this.replaceTemplate(data)}
-    `
-    /**
-     * Initital UI data from which to build the template.
-     */
-    const data = {
-      current: 0,
-      total: 0,
-      findInputVal: '',
-      replaceInputVal: '',
-    }
-    render(this.template(data), this.dom)
-
-    this.matchCase = this.dom.querySelector(
-      '.ProseMirrorFindReplace-findContainer-options-matchCase',
-    )
-    this.matchWholeWord = this.dom.querySelector(
-      '.ProseMirrorFindReplace-findContainer-options-matchWholeWord',
-    )
-    this.findInputEle = this.dom.querySelector(
-      '.ProseMirrorFindReplace-findContainer-input',
-    )
-    this.replaceInputEle = this.dom.querySelector(
-      '.ProseMirrorFindReplace-findContainer-replace-input',
-    )
-    this.moreButtonEle = this.dom.querySelector(
-      '.ProseMirrorFindReplace-findContainer-more',
-    )
-    this.replaceContainerEle = this.dom.querySelector(
-      '.ProseMirrorFindReplace-findContainer-replaceContainer',
-    )
-
-    this.findInputEle.addEventListener('keyup', (evt) => {
-      this.handleFind(evt.target.value)
-      this.scroll()
-    })
-
-    this.findInputEle.addEventListener('focus', (evt) => {
-      evt.preventDefault()
-      this.handleFind(evt.target.value)
-    })
-
-    this.replaceInputEle.addEventListener('input', (evt) => {
-      evt.preventDefault()
-      render(
-        this.template({
-          current: this.current,
-          total: this.total,
-          findInputVal: this.findInputEle.value,
-          replaceInputVal: this.replaceInputEle.value,
-        }),
-        this.dom,
-      )
-    })
-
-    this.matchCase.addEventListener('change', (evt) => {
-      evt.preventDefault()
-      this.handleFind(this.findInputEle.value)
-    })
-
-    this.matchWholeWord.addEventListener('change', (evt) => {
-      evt.preventDefault()
-      this.handleFind(this.findInputEle.value)
-    })
-
-    // We want to keep the top of the Find and Replace widget
-    // anchored to the bottom of the toolbar, but the toolbar
-    // contracts and expands when our editorView contracts and
-    // expands (e.g. user toggles preview pane), so this will
-    // ensure the top of the widget remains anchored by letting us
-    // know when the editorView has implicitly resized itself.
-    const ro = new ResizeObserver(() => {
-      this.render()
-    })
-
-    ro.observe(this.editorView.dom)
-
-    // The following subscriptions are set up so that our plugin can
-    // let our view know that UI state data has changed and allow the
-    // view to update itself accordingly, rather than the plugin accessing
-    // view methods to update the view. UI state data changes can be triggered
-    // either by our widget view or by editorView itself, but this isolates
-    // UI state data changes to be made only here in the view.
-    PubSub.subscribe('findAdded', (incomingData) => {
-      this.updateCurrentValue('added', incomingData)
-      this.updateTotalValue(incomingData)
-    })
-
-    PubSub.subscribe('findRemoved', (incomingData) => {
-      this.updateCurrentValue('removed', incomingData)
-      this.updateTotalValue(incomingData)
-    })
-
-    PubSub.subscribe('findReset', (incomingData) => {
-      this.updateCurrentValue('reset', incomingData)
-      this.updateTotalValue(incomingData)
-    })
-
-    this.render()
-  }
-
-  /**
-   * Triggered when user clicks the next or previous pagination element.
-   *
-   * @param {Event} evt
-   * @param {Boolean} isNext
-   */
-  handlePagination = (evt, isNext) => {
-    evt.preventDefault()
-    this.updateCurrentValue(isNext ? 'next' : 'previous')
-    this.handleFind(this.findInputEle.value)
-
-    const active = this.editorView.dom.querySelector(
-      '.ProseMirrorFindReplace-found.active',
-    )
-
-    if (active) {
-      this.scroll(true)
-    }
-  }
-
-  /**
-   * Scrolls to first match or the match currently active in the case of pagination.
-   *
-   * @param {*} isActive find element with 'active' class (used by pagination)
-   */
-  scroll = (isActive) => {
-    const element = this.editorView.dom.querySelector(
-      `.ProseMirrorFindReplace-found${isActive ? '.active' : ''}`,
-    )
-
-    if (element) {
-      element.scrollIntoView({ behavior: 'smooth', block: 'center' })
-    }
-  }
-
-  /**
-   * Triggered when user clicks the more button to expand or
-   * collapse the Replace section of the Find and Replace widget.
-   *
-   * @param {Event} evt
-   */
-  handleShowMore = (evt) => {
-    const showingMore = this.replaceContainerEle.toggleAttribute('hidden')
-    this.moreButtonEle.setAttribute(
-      'aria-label',
-      !showingMore
-        ? window.BRIGHTSPOT.ui.tooltips.collapse
-        : window.BRIGHTSPOT.ui.tooltips.expand,
-    )
-    this.moreButtonEle.setAttribute(
-      'aria-expanded',
-      !showingMore ? 'true' : 'false',
-    )
-    this.replaceContainerEle.classList.toggle(COLLAPSED_CLASS)
-    this.moreButtonEle.classList.toggle('open')
-  }
-
-  /**
-   * Unified spot to set the total number of found. We then re-render
-   * our template accordingly to update the UI.
-   *
-   * @param {Object.<number>} incomingData
-   */
-  updateTotalValue = (incomingData) => {
-    this.total = incomingData.total
-    render(
-      this.template({
-        current: this.current,
-        total: this.total,
-        findInputVal: this.findInputEle.value,
-        replaceInputVal: this.replaceInputEle.value,
-      }),
-      this.dom,
-    )
-  }
-  /**
-   * Actions that can modify the current value as well as the
-   * data accompanying data mutations centralized into 1 spot.
-   * This way, if the currentValue is not updating in the UI as
-   * expected, we should be able to more easily debug.
-   *
-   * We then re-render our template accordingly to update the UI.
-   *
-   * @param {string} action The action taken that can potentially
-   *    mutate our currentValue data
-   */
-  updateCurrentValue = (action, incomingData) => {
-    switch (action) {
-      case 'previous':
-        this.current = this.current - 1
-        break
-      case 'next':
-        this.current = this.current + 1
-        break
-      case 'removed':
-        if (incomingData.total === 0) {
-          this.current = 0
-        } else if (incomingData.total < this.current) {
-          this.current = 0
-        }
-        break
-      case 'added':
-        if (incomingData.total === 1) {
-          this.current = 0
-        }
-        break
-      case 'reset':
-        this.current = 0
-        break
-    }
-
-    render(
-      this.template({
-        current: this.current,
-        total: this.total,
-        findInputVal: this.findInputEle.value,
-        replaceInputVal: this.replaceInputEle.value,
-      }),
-      this.dom,
-    )
-  }
-
-  /**
-   * Replaces the current 'found'. We placed an `idx` property on each
-   * decoration's spec when they were created. This denotes what index the
-   * 'found' item is so that we can find it and replace it.
-   *
-   * @param {Event} evt
-   */
-  handleReplace = (evt) => {
-    evt.preventDefault()
-    // Avoiding infinite loop
-    if (
-      this.findInputEle.value === this.replaceInputEle.value ||
-      !this.current
-    ) {
-      return
-    }
-    const state = this.editorView.state
-    const dispatch = this.editorView.dispatch
-    let tr = state.tr
-    const pluginState = getPluginState(this.editorView, this.myKey)
-    let decos = pluginState.get('decos')
-    const decoArr = decos.find(null, null, (spec) => spec.idx === this.current)
-    if (decoArr && decoArr.length) {
-      const deco = decoArr[0]
-      const { from, to } = deco
-      tr = tr.delete(from, to)
-      tr = tr.insertText(this.replaceInputEle.value, from)
-      this.isReplaceAction = true
-      dispatch(tr)
-    }
-
-    this.isReplaceAction = false
-    this.handleFind(this.findInputEle.value)
-  }
-
-  /**
-   * Replaces all of the 'found'. Once the transation is dispatched, the plugin will
-   * take over and run its `handleFind` method because the editorView state will have changed
-   * from replacing the 'found'. This will trigger the publish of the new UI state and the
-   * UI will update accordingly without having to call our `handleFind.`
-   *
-   * @param {Event} evt
-   */
-  handleReplaceAll = (evt) => {
-    evt.preventDefault()
-    // Avoiding infinite loop
-    if (this.findInputEle.value === this.replaceInputEle.value) {
-      return
-    }
-
-    const state = this.editorView.state
-    const dispatch = this.editorView.dispatch
-    let tr = state.tr
-    this.found.forEach((item, index) => {
-      const removed = this.findInputEle.value.length * index
-      const added = this.replaceInputEle.value.length * index
-      tr = tr.delete(item.from - removed + added, item.to - removed + added)
-      tr = tr.insertText(
-        this.replaceInputEle.value,
-        item.from - removed + added,
-      )
-    })
-    dispatch(tr)
-  }
-
-  /**
-   * Finds all matching text, matching case and whole word
-   * as specified by the UI selections. Since we can't create
-   * decorations from the view (and as such from an event not triggered by
-   * the editorView state changing), we instead set meta data denoting
-   * information about the matched text (position, etc) and use the view's
-   * dispatch method to trigger the transaction update. The plugin will take over
-   * when it receives the disptach and will create the decorations based off the
-   * meta data stored in the transaction. We then update our view state and UI.
-   *
-   * @param {string} text The characters to find.
-   */
-  handleFind = (text) => {
-    const escapedText = escapeRegEx(text)
-    const state = this.editorView.state
-    const doc = state.doc
-    let tr = state.tr
-    const dispatch = this.editorView.dispatch
-    let toFind = []
-    let options = 'gi'
-    this.found = []
-    if (this.matchCase.checked) {
-      options = 'g'
-    }
-    if (this.current === 0) {
-      this.current = 1
-    }
-    if (text) {
-      let wordRegEx = new RegExp(escapedText, options)
-      if (this.matchWholeWord.checked) {
-        wordRegEx = new RegExp(`\\b${escapedText}\\b`, options)
-      }
-      let idx = 1
-      doc.descendants((node, pos) => {
-        if (node.isText) {
-          let match
-          while ((match = wordRegEx.exec(node.text))) {
-            const from = pos + match.index
-            const to = pos + match.index + match[0].length
-            this.found.push({ from, to })
-            let isActive = false
-            if (idx === this.current) {
-              isActive = true
-            }
-            toFind.push({ from, to, isActive, text, idx })
-            idx++
-          }
-        }
-      })
-    }
-
-    tr = tr.setMeta(this.myKey, {
-      toFind,
-    })
-    dispatch(tr)
-    this.updateTotalValue({ total: toFind.length })
-    if (!toFind.length) {
-      this.updateCurrentValue('reset')
-    } else {
-      render(
-        this.template({
-          current: this.current,
-          total: this.total,
-          findInputVal: this.findInputEle.value,
-          replaceInputVal: this.replaceInputEle.value,
-        }),
-        this.dom,
-      )
-    }
-  }
-
-  /**
-   * Renders the Find and Replace widget by displaying it if our plugin state
-   * has an active state of `find`. Also anchors the top of the widget to the bottom
-   * of the toolbar, whose height expands and contracts with the UI.
-   */
-  render() {
-    const pluginState = getPluginState(this.editorView, this.myKey)
-    const isOpen = pluginState.get('activeStates').get('find')
-    if (isOpen) {
-      this.dom.classList.remove(COLLAPSED_CLASS)
-      if (!this.focused) {
-        this.findInputEle.focus()
-        this.focused = true
-      }
-    } else {
-      this.dom.classList.add(COLLAPSED_CLASS)
-      this.focused = false
-    }
-  }
-
-  update() {
-    this.render()
-  }
-}
-
-export { FindView }

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

@@ -1,57 +0,0 @@
-/* eslint-disable no-debugger */
-import { Plugin, PluginKey } from 'prosemirror-state'
-import { FullScreenView } from './views/FullscreenView'
-import { keydownHandler } from 'prosemirror-keymap'
-import { findKeyMapping, keyMappingHandler } from '../../settings/keymapBuilder'
-
-const fullScreenKey = new PluginKey('fullScreenManager')
-const keyHandler = {}
-
-keyHandler[findKeyMapping('fullscreen')] = keyMappingHandler(
-  'rte2-toolbar-fullscreen',
-)
-
-const fullScreenManagerPlugin = (schema) => {
-  return new Plugin({
-    key: fullScreenKey,
-
-    view(editorView) {
-      this.view = new FullScreenView(editorView, this.key.key)
-      return this.view
-    },
-
-    state: {
-      init(_, state) {
-        const pluginState = new Map()
-        const activeStates = new Map()
-        activeStates.set('fullscreen', false)
-        pluginState.set('activeStates', activeStates)
-        pluginState.set('hasToggle', false)
-        return pluginState
-      },
-
-      apply(transaction, value, oldState, newState) {
-        const pluginState = value
-        const meta = transaction.getMeta(fullScreenKey)
-
-        if (meta && meta.hasOwnProperty('toggleFullScreen')) {
-          const currentState = pluginState
-          const newCurrentState = !currentState
-            .get('activeStates')
-            .get('fullscreen')
-          pluginState.get('activeStates').set('fullscreen', newCurrentState)
-          pluginState.set('hasToggle', true)
-          this.spec.view.update()
-        } else {
-          pluginState.set('hasToggle', false)
-        }
-        return pluginState
-      },
-    },
-    props: {
-      handleKeyDown: keydownHandler(keyHandler),
-    },
-  })
-}
-
-export { fullScreenManagerPlugin, fullScreenKey }

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/fullscreen_manager/README.md

@@ -1,26 +0,0 @@
-# Brightspot Rich Text Editor Full Screen Manager Plugin
-
-Extends Prosemirror to allow users to put the editor in a full-screen mode.
-
-## Table of Contents
-
-1.  [Must Knows](#must-knows)
-2.  [Component and Directory Structure](#component-and-directory-structure)
-    1.  [Commands](#commands)
-    2.  [List Manager Plugin](#list-manager-plugin)
-
-## Must Knows
-
-1.  The menu icon for this is baked into the settings/menu-items list.
-
-## Component and Directory Structure
-
-### Commands
-
-This is where all state mutations should occur. Commands are exposed to the RTE api and can be triggered from anywhere in the RTE, such as menu icons and keyboard commands.
-
-### Full Screen Manager Plugin
-
-The state management aspect of the plugin, which is also what is registered with the plugin setup.
-
-_Note_: Updating state always means creating a new state derived from the old state + changes. State should always remain immutable.

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

@@ -1,16 +0,0 @@
-/* eslint-disable no-debugger */
-import { fullScreenKey } from './FullscreenManager'
-
-const goFullScreen = () => {
-  return function (state, dispatch, editorView) {
-    dispatch(
-      state.tr.setMeta(fullScreenKey, {
-        toggleFullScreen: true,
-      }),
-    )
-
-    return true
-  }
-}
-
-export { goFullScreen }

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

@@ -1,4 +0,0 @@
-import { fullScreenManagerPlugin } from './FullscreenManager'
-import { goFullScreen } from './commands'
-
-export { fullScreenManagerPlugin, goFullScreen }