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

@@ -0,0 +1,604 @@
+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 }