@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/table_manager/views/TableView.js

@@ -1,613 +0,0 @@
-import { getEnhancementEditFormURL } from '../../enhancement_manager/EnhancementManager'
-import { v1 as uuidv1 } from 'uuid'
-import {
-  mergeCells,
-  splitCell,
-  addRowAfter,
-  addRowBefore,
-  addColumnBefore,
-  addColumnAfter,
-  deleteRow,
-  deleteColumn,
-  CellSelection,
-} from 'prosemirror-tables'
-import {
-  removeEnhancement,
-  moveEnhancementUp,
-  moveEnhancementDown,
-  moveEnhancement,
-} from '../../enhancement_manager/commands'
-import {
-  findParentNodeOfTypeClosestToPos,
-  findParentNode,
-} from 'prosemirror-utils'
-import Tether from '../../../../dom/Tether'
-import create from '../../../../dom/create'
-
-if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
-  await import('./ProseMirror-table.less')
-}
-
-const RTE_DELETE_ROW_TEXT =
-  typeof RTE_DELETE_ROW !== 'undefined' ? RTE_DELETE_ROW : 'rte.deleteRow'
-const RTE_DELETE_COLUMN_TEXT =
-  typeof RTE_DELETE_COLUMN !== 'undefined'
-    ? RTE_DELETE_COLUMN
-    : 'rte.deleteColumn'
-const RTE_ADD_COLUMN_RIGHT_TEXT =
-  typeof RTE_ADD_COLUMN_RIGHT !== 'undefined'
-    ? RTE_ADD_COLUMN_RIGHT
-    : 'rte.addColumnRight'
-const RTE_ADD_COLUMN_LEFT_TEXT =
-  typeof RTE_ADD_COLUMN_LEFT !== 'undefined'
-    ? RTE_ADD_COLUMN_LEFT
-    : 'rte.addColumnLeft'
-const RTE_ADD_ROW_ABOVE_TEXT =
-  typeof RTE_ADD_ROW_ABOVE !== 'undefined'
-    ? RTE_ADD_ROW_ABOVE
-    : 'rte.addRowAbove'
-const RTE_ADD_ROW_BELOW_TEXT =
-  typeof RTE_ADD_ROW_BELOW !== 'undefined'
-    ? RTE_ADD_ROW_BELOW
-    : 'rte.addRowBelow'
-const RTE_EDIT_TABLE_ATTRS_TEXT =
-  typeof RTE_EDIT_TABLE_ATTRS !== 'undefined'
-    ? RTE_EDIT_TABLE_ATTRS
-    : 'rte.editTableAttrs'
-const RTE_EDIT_TABLE_ROW_ATTRS_TEXT =
-  typeof RTE_EDIT_TABLE_ROW_ATTRS !== 'undefined'
-    ? RTE_EDIT_TABLE_ROW_ATTRS
-    : 'rte.editTableRowAttrs'
-const RTE_EDIT_TABLE_CELL_ATTRS_TEXT =
-  typeof RTE_EDIT_TABLE_CELL_ATTRS !== 'undefined'
-    ? RTE_EDIT_TABLE_CELL_ATTRS
-    : 'rte.editTableCellAttrs'
-const RTE_MOVE_UP_TEXT =
-  typeof RTE_MOVE_UP !== 'undefined' ? RTE_MOVE_UP : 'rte.moveUp'
-const RTE_MOVE_DOWN_TEXT =
-  typeof RTE_MOVE_DOWN !== 'undefined' ? RTE_MOVE_DOWN : 'rte.moveDown'
-const RTE_REMOVE_TEXT =
-  typeof RTE_REMOVE !== 'undefined' ? RTE_REMOVE : 'rte.remove'
-const RTE_MERGE_CELLS_TEXT =
-  typeof RTE_MERGE_CELLS !== 'undefined' ? RTE_MERGE_CELLS : 'rte.mergeCells'
-const RTE_SPLIT_CELL_TEXT =
-  typeof RTE_SPLIT_CELL !== 'undefined' ? RTE_SPLIT_CELL : 'rte.splitCells'
-
-/**
- * Table node view. Used so that we can have the submenu widget
- * attached to the node.
- */
-class TableView {
-  /**
-   *
-   * @param {ProseMirror.Model.node} node
-   * @param {ProseMirror.View} view
-   * @param {Function} getPos
-   */
-  constructor(node, view, getPos) {
-    this.node = node
-    this.view = view
-    this.getPos = getPos
-
-    const tbody = (this.contentDOM = create('tbody'))
-    this.table = create(
-      'table',
-      { className: 'ProseMirror-table', id: node.attrs.id },
-      tbody,
-    )
-
-    this.submenuView = create(
-      'div',
-      {
-        className: 'ProseMirror-tableSubmenu',
-      },
-      this.getSubmenuContents(),
-    )
-
-    this.menu = create('div', {
-      className: 'ProseMirror-tableMenu',
-    })
-
-    this.dom = create(
-      'div',
-      {
-        className: 'ProseMirror-tableContainer',
-      },
-      create(
-        'div',
-        {
-          className: 'ProseMirror-tableHeading',
-        },
-        create('div', {
-          className: 'ProseMirror-tableTitle',
-          innerText: 'Table',
-        }),
-        this.submenuView,
-      ),
-      this.table,
-      this.menu,
-    )
-
-    for (let obj of RICH_TEXT_ELEMENTS_PM) {
-      if (obj.tag === 'table' && obj.popup) {
-        this.hasTableEnhancement = true
-        this.tableEnhancementTypeId = obj.typeId
-        for (let key in this.node.attrs.attributes) {
-          this.table.setAttribute(key, this.node.attrs.attributes[key])
-        }
-      }
-      if (obj.tag === 'tr' && obj.popup) {
-        this.hasTableRowEnhancement = true
-        this.tableRowEnhancementTypeId = obj.typeId
-      }
-      if (obj.tag === 'td' && obj.popup) {
-        this.hasTableCellEnhancement = true
-        this.tableCellEnhancementTypeId = obj.typeId
-      }
-    }
-
-    document.addEventListener('click', this.maybeCloseCellMenu)
-  }
-
-  closeCellMenu = () => {
-    const moreLink = this.dom.querySelector(
-      '.ProseMirror-tableSubmenuLink.more_horiz',
-    )
-    moreLink.dataset.icon = 'more_horiz'
-    moreLink.classList.remove('is-active')
-
-    Tether.toggle(moreLink, this.menu, () => {
-      this.menu.classList.remove('is-open')
-      return true
-    })
-  }
-
-  destroy() {
-    document.removeEventListener('click', this.maybeCloseCellMenu)
-  }
-
-  editTable = (evt) => {
-    evt.preventDefault()
-    let formUrl = getEnhancementEditFormURL(
-      this.tableEnhancementTypeId,
-      evt.target,
-    )
-    formUrl = `${formUrl}&attributes=${encodeURIComponent(
-      JSON.stringify(this.node.attrs.attributes),
-    )}`
-
-    this.setUpPopup(evt, formUrl, this.node, this.table, this.view)
-  }
-
-  editTableCell = (evt) => {
-    evt.preventDefault()
-    const cell = this.dom.querySelector('.is-selected-cell')
-    if (!cell) {
-      return
-    }
-    const node = this.getNode(cell)
-    if (!node || node.type.name !== 'tableCell') {
-      return
-    }
-    let formUrl = getEnhancementEditFormURL(
-      this.tableCellEnhancementTypeId,
-      evt.target,
-    )
-    formUrl = `${formUrl}&attributes=${encodeURIComponent(
-      JSON.stringify(node.attrs.attributes),
-    )}`
-    this.setUpPopup(evt, formUrl, node, cell, this.view)
-  }
-
-  editTableRow = (evt) => {
-    evt.preventDefault()
-    const cell = this.dom.querySelector('.is-selected-cell')
-    if (!cell) {
-      return
-    }
-    const tableRow = cell.closest('tr')
-    if (!tableRow) {
-      return
-    }
-    const node = this.getNode(tableRow)
-    if (!node || node.type.name !== 'tableRow') {
-      return
-    }
-    let formUrl = getEnhancementEditFormURL(
-      this.tableRowEnhancementTypeId,
-      evt.target,
-    )
-    formUrl = `${formUrl}&attributes=${encodeURIComponent(
-      JSON.stringify(node.attrs.attributes),
-    )}`
-    this.setUpPopup(evt, formUrl, node, tableRow, this.view)
-  }
-
-  getCellMenuConfig = () => {
-    const sel = this.view.state.selection
-    const predicate = (node) => node.type === this.view.state.schema.nodes.table
-    const parentTable = findParentNode(predicate)(sel)
-    let isDisabled = true
-
-    if (parentTable && parentTable.node === this.node) {
-      isDisabled = false
-    }
-
-    const config = [
-      {
-        disabled: isDisabled,
-        text: RTE_DELETE_ROW_TEXT,
-        action: () => {
-          this.mutateTable('row')
-        },
-      },
-      {
-        disabled: isDisabled,
-        text: RTE_DELETE_COLUMN_TEXT,
-        action: () => {
-          this.mutateTable('column')
-        },
-      },
-      {
-        disabled: isDisabled,
-        text: RTE_ADD_COLUMN_RIGHT_TEXT,
-        action: () => {
-          this.mutateTable('right')
-        },
-      },
-      {
-        disabled: isDisabled,
-        text: RTE_ADD_COLUMN_LEFT_TEXT,
-        action: () => {
-          this.mutateTable('left')
-        },
-      },
-      {
-        disabled: isDisabled,
-        text: RTE_ADD_ROW_ABOVE_TEXT,
-        action: () => {
-          this.mutateTable('above')
-        },
-      },
-      {
-        disabled: isDisabled,
-        text: RTE_ADD_ROW_BELOW_TEXT,
-        action: () => {
-          this.mutateTable('below')
-        },
-      },
-      {
-        disabled: !(sel instanceof CellSelection) || isDisabled,
-        text: RTE_MERGE_CELLS_TEXT,
-        action: () => {
-          mergeCells(this.view.state, this.view.dispatch)
-        },
-      },
-    ]
-
-    let isNotInMergedCell = true
-    if (!isDisabled) {
-      let cellNode
-      if (!(sel instanceof CellSelection)) {
-        // Partialy taken from https://github.com/ProseMirror/prosemirror-tables/blob/master/src/util.js
-        const $pos = sel.$from
-        for (let d = $pos.depth; d > 0; d--) {
-          // Sometimes the cell can be in the same depth.
-          const role = $pos.node(d).type.spec.tableRole
-          if (role === 'cell' || role === 'header_cell') {
-            cellNode = $pos.node(d)
-            break
-          }
-        }
-      } else {
-        if (sel.$anchorCell.pos === sel.$headCell.pos) {
-          cellNode = sel.$anchorCell.nodeAfter
-        }
-      }
-      if (
-        cellNode &&
-        (cellNode.attrs.colspan > 1 || cellNode.attrs.rowspan > 1)
-      ) {
-        isNotInMergedCell = false
-      }
-    }
-
-    config.push({
-      disabled: isNotInMergedCell,
-      text: RTE_SPLIT_CELL_TEXT,
-      action: () => {
-        splitCell(this.view.state, this.view.dispatch)
-      },
-    })
-
-    if (this.hasTableEnhancement) {
-      config.push({
-        disabled: isDisabled,
-        text: RTE_EDIT_TABLE_ATTRS_TEXT,
-        action: this.editTable,
-      })
-    }
-    if (this.hasTableRowEnhancement) {
-      config.push({
-        disabled: isDisabled,
-        text: RTE_EDIT_TABLE_ROW_ATTRS_TEXT,
-        action: this.editTableRow,
-      })
-    }
-    if (this.hasTableCellEnhancement) {
-      config.push({
-        disabled: isDisabled,
-        text: RTE_EDIT_TABLE_CELL_ATTRS_TEXT,
-        action: this.editTableCell,
-      })
-    }
-    return config
-  }
-
-  getCellSubmenuContents = (cell) => {
-    const cellMenuConfig = this.getCellMenuConfig(cell)
-    const children = []
-    for (let config of cellMenuConfig) {
-      const a = create('a', {
-        className: 'ProseMirror-tableMenuLink',
-        innerText: config.text,
-        href: '#',
-      })
-      a.addEventListener('click', (evt) => {
-        evt.preventDefault()
-        config.action(evt, cell)
-      })
-      const li = create('li', {}, a)
-      if (config.disabled) {
-        li.setAttribute('disabled', '')
-        a.setAttribute('disabled', '')
-      }
-      children.push(li)
-    }
-    return create(
-      'ul',
-      {
-        className: 'ProseMirror-tableMenuList',
-      },
-      ...children,
-    )
-  }
-
-  getNode = (ele) => {
-    const nodePos = this.view.posAtDOM(ele)
-    return this.view.state.doc.nodeAt(nodePos - 1)
-  }
-
-  getNodeResolvedPos = (ele) => {
-    const nodePos = this.view.posAtDOM(ele)
-    return this.view.state.doc.resolve(nodePos - 1)
-  }
-
-  getSubmenuConfig = () => {
-    let isRemoveable = true
-    const collabManagerPlugin = this.view.state.collabManager$
-    if (collabManagerPlugin) {
-      const connectedIds = collabManagerPlugin.get('connectedIds')
-      const currentUserId = collabManagerPlugin.get('userId')
-      const decos = collabManagerPlugin.get('decos')
-      for (let id of connectedIds.values()) {
-        if (id === currentUserId) {
-          continue
-        }
-        let userDecos = decos.find(null, null, (spec) => spec.id === id)
-        let deco = userDecos.length ? userDecos[0] : null
-        if (deco) {
-          const pos = deco.from
-          const tableNode = findParentNodeOfTypeClosestToPos(
-            this.view.state.doc.resolve(pos),
-            this.view.state.schema.nodes.table,
-          )
-
-          if (tableNode && tableNode.node === this.node) {
-            isRemoveable = false
-          }
-        }
-      }
-    }
-
-    const config = []
-    config.push({
-      text: 'More',
-      icon: 'more_horiz',
-      action: (evt) => {
-        this.toggleCellMenu(evt)
-        evt.stopPropagation()
-      },
-    })
-    if (isRemoveable) {
-      config.push({
-        text: RTE_MOVE_UP_TEXT,
-        icon: 'arrow_upward',
-        action: (evt) => {
-          moveEnhancementUp(this.view, this.getPos)
-          evt.stopPropagation()
-        },
-      })
-
-      config.push({
-        text: RTE_MOVE_DOWN_TEXT,
-        icon: 'arrow_downward',
-        action: (evt) => {
-          moveEnhancementDown(this.view, this.getPos)
-          evt.stopPropagation()
-        },
-      })
-
-      config.push({
-        text: 'Anchor',
-        icon: 'open_with',
-        action: (evt) => {
-          moveEnhancement(this.view, this.getPos)
-          evt.stopPropagation()
-        },
-      })
-
-      config.push({
-        text: RTE_REMOVE_TEXT,
-        icon: 'remove',
-        action: (evt) => {
-          removeEnhancement(this.view, this.getPos)
-          evt.stopPropagation()
-        },
-      })
-    }
-
-    return config
-  }
-
-  getSubmenuContents = () => {
-    const submenuConfig = this.getSubmenuConfig()
-    const children = []
-    for (let config of submenuConfig) {
-      const a = create('a', {
-        className: `ProseMirror-tableSubmenuLink ${config.icon}`,
-        innerText: config.text,
-        contenteditable: false,
-        dataset: {
-          icon: config.icon,
-        },
-      })
-      a.addEventListener('click', (evt) => {
-        evt.preventDefault()
-        config.action(evt)
-      })
-
-      const li = create(
-        'li',
-        {
-          className: 'ProseMirror-tableSubmenuItem',
-        },
-        a,
-      )
-
-      children.push(li)
-    }
-    return create(
-      'ul',
-      {
-        className: 'ProseMirror-tableSubmenuList',
-      },
-      ...children,
-    )
-  }
-
-  ignoreMutation(mutationRecord) {
-    if (
-      mutationRecord.target.classList &&
-      (mutationRecord.target.classList.contains(
-        'ProseMirror-tableSubmenuLink',
-      ) ||
-        mutationRecord.target.classList.contains('ProseMirror-tableMenu') ||
-        mutationRecord.target.classList.contains('ProseMirror-tableMenuLink'))
-    ) {
-      return true
-    }
-    return (
-      mutationRecord.type === 'attributes' &&
-      mutationRecord.target === this.table
-    )
-  }
-
-  maybeCloseCellMenu = (evt) => {
-    const closest = evt.target.closest('.ProseMirror-tableSubmenuLink')
-    if (
-      closest ===
-      this.dom.querySelector('.ProseMirror-tableSubmenuLink.more_horiz')
-    ) {
-      return
-    }
-    this.closeCellMenu()
-  }
-
-  mutateTable = (type) => {
-    const { state, dispatch } = this.view
-    switch (type) {
-      case 'right':
-        addColumnAfter(state, dispatch)
-        break
-      case 'left':
-        addColumnBefore(state, dispatch)
-        break
-      case 'above':
-        addRowBefore(state, dispatch)
-        break
-      case 'below':
-        addRowAfter(state, dispatch)
-        break
-      case 'row':
-        deleteRow(state, dispatch)
-        break
-      case 'column':
-        deleteColumn(state, dispatch)
-        break
-    }
-  }
-
-  openCellMenu = () => {
-    this.menu.innerHTML = ''
-
-    const contents = this.getCellSubmenuContents()
-    this.menu.appendChild(contents)
-
-    const moreLink = this.dom.querySelector(
-      '.ProseMirror-tableSubmenuLink.more_horiz',
-    )
-
-    moreLink.dataset.icon = 'close'
-    moreLink.classList.add('is-active')
-
-    Tether.toggle(moreLink, this.menu, () => {
-      this.menu.classList.add('is-open')
-      return true
-    })
-  }
-
-  setUpPopup = (evt, formUrl, node, ele, view) => {
-    const tempId = `Prosemirror.table.event-${uuidv1()}`
-    evt.target.setAttribute('href', formUrl)
-    evt.target.setAttribute('data-event-id', tempId)
-    evt.target.setAttribute('data-frame-post', 'true')
-    evt.target.setAttribute('target', tempId)
-
-    PubSub.subscribe(tempId, (incomingData) => {
-      const { pos } = this.getNodeResolvedPos(ele)
-      const tr = view.state.tr
-
-      // Dispatch transaction so ProseMirror knows of attribute changes.
-      tr.setNodeMarkup(pos, null, { attributes: incomingData.data })
-      view.dispatch(tr)
-
-      // This is only updating node directly for CSS hooks.
-      for (let key in incomingData.data) {
-        ele.setAttribute(key, incomingData.data[key])
-      }
-    })
-
-    const $eventParent = $(evt.target.parent)
-    const $framedParent = $eventParent.frame()
-    $framedParent.trigger('create')
-    $framedParent.trigger('click.frame')
-  }
-
-  toggleCellMenu = (evt) => {
-    const target = evt.target
-    if (target.classList.contains('is-active')) {
-      this.closeCellMenu(evt)
-    } else {
-      this.openCellMenu()
-    }
-  }
-
-  update(node) {
-    if (node.type !== this.node.type) return false
-    this.node = node
-    this.closeCellMenu()
-    return true
-  }
-}
-export { TableView }

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

@@ -1,13 +0,0 @@
-# Brightspot Rich Text Editor Track Changes Manager Plugin
-
-Extends Prosemirror to allow for tracking inserts and deletions. Note we currently only track text and enhancement deletion and insertions (and not mark additions, for example).
-
-## Table of Contents
-
-1.  [Must Knows](#must-knows)
-
-## Must Knows
-
-1. This uses the [Prosemirror Changeset](#https://github.com/ProseMirror/prosemirror-changeset) helper module to diff document changes.
-2. Deletions are represented as `del` marks surrounding the content to be deleted and `ins` marks surrounding the content to be inserted.
-3. This uses the `appendTransaction` property of the plugin to handle adding the insertion and deletion marks. The user's intent is recorded (the initial transaction) and is then modified to re-insert deleted content and then add the `del` marks or to just add the `ins` mark as appropriate.