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

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

@@ -0,0 +1,13 @@
+# 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.