@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/ProseMirror-table.less

@@ -0,0 +1,137 @@
+@import (reference) url('../../../../Dropdown.less');
+@import (reference) url('../../../../Icon.less');
+@import (reference) url('../../../../IconButton.less');
+@import (reference) url('../../../../Text.less');
+
+.ProseMirror-tableContainer {
+  background: var(--color-gray1);
+  margin: var(--Text-height) calc(0px - var(--gap-m));
+  padding: var(--gap-m);
+  position: relative;
+
+  .ProsemirrorEnhancementMenu {
+    left: 0;
+    margin-bottom: 0;
+    position: static;
+    top: 0;
+    visibility: visible;
+    z-index: 1;
+
+    ul {
+      padding-left: 0;
+    }
+  }
+}
+
+.ProseMirror-tableHeading {
+  .Icon.is-s;
+  .Text.is-s;
+
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.ProseMirror-tableTitle::before {
+  .Icon;
+
+  content: 'border_all';
+  margin-right: var(--gap-xs);
+}
+
+.ProseMirror .ProseMirror-tableSubmenuList {
+  margin: 0;
+  padding: 0;
+
+  li {
+    display: inline-block;
+
+    a {
+      display: block;
+      text-decoration: none !important;
+
+      &[data-icon] {
+        .IconButton;
+
+        &::before {
+          content: attr(data-icon);
+        }
+      }
+    }
+
+    a.remove {
+      .IconButton.is-red;
+    }
+  }
+}
+
+.ProseMirror-tableMenu {
+  .Dropdown;
+
+  &.is-open {
+    .Dropdown.is-open;
+  }
+
+  .ProseMirror-tableMenuList {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    > li {
+      .Dropdown-item;
+
+      cursor: pointer;
+
+      &[disabled] {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      > a {
+        display: block;
+        width: 100%;
+      }
+    }
+  }
+}
+
+.ProseMirror-table {
+  border-collapse: separate;
+  border-spacing: 1px;
+  margin-top: calc(var(--gap-m) - 1px);
+  overflow-x: auto;
+  position: relative;
+  table-layout: fixed;
+  width: 100%;
+
+  tbody {
+    width: 100%;
+  }
+
+  td {
+    background: var(--color-white);
+    border: 1px solid var(--Input-borderColor);
+    padding: var(--gap-xs) var(--gap-s);
+    position: relative;
+
+    .Enhancement-preview,
+    .Enhancement {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    &.is-selected-cell,
+    &.selectedCell {
+      border: 1px solid var(--color-blue5);
+    }
+
+    .ProsemirrorEnhancementMenu-container-button:is(
+        .edit,
+        .arrow_upward,
+        .arrow_downward,
+        .open_with
+      ) {
+      display: none;
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/table_manager/views/TableSizerPopup.less

@@ -0,0 +1,19 @@
+.TableSizer {
+  table {
+    border-collapse: separate;
+    border-spacing: 5px;
+    width: 95%;
+
+    td {
+      border: 1px solid var(--color-gray4);
+
+      :hover {
+        cursor: pointer;
+      }
+
+      &.active {
+        background-color: var(--Input-focusColor);
+      }
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/table_manager/views/TableSizerView.js

@@ -0,0 +1,88 @@
+export default class TableSizer {
+  constructor(evtKey) {
+    this.evtKey = evtKey
+    const dom = document.createElement('div')
+    this.table = this.getTable()
+    this.addEventListeners()
+
+    if (window.BRIGHTSPOT?.ui.cms.enableV5UI) {
+      const v5Title = document.createElement('h2')
+      v5Title.className = 'v5-only'
+      v5Title.innerText = window.BRIGHTSPOT.ui.tooltips.tableAdd
+      dom.appendChild(v5Title)
+    }
+
+    dom.appendChild(this.table)
+    return dom
+  }
+
+  getTable = () => {
+    const table = document.createElement('table')
+    for (let row = 0; row < this.rows; row++) {
+      const tr = document.createElement('tr')
+      table.appendChild(tr)
+      for (let col = 0; col < this.cols; col++) {
+        const td = document.createElement('td')
+        td.innerHTML = '&nbsp;'
+        td.setAttribute('data-row', row)
+        td.setAttribute('data-col', col)
+        tr.appendChild(td)
+      }
+    }
+    return table
+  }
+
+  getCells = () => {
+    if (!this.cells) {
+      this.cells = this.table.querySelectorAll('td')
+    }
+
+    return this.cells
+  }
+
+  addEventListeners = () => {
+    const cells = this.getCells()
+    for (let cell of cells) {
+      cell.addEventListener('mouseover', this.handleMouseOver)
+      cell.addEventListener('click', this.handleClick)
+    }
+  }
+
+  handleClick = (evt) => {
+    const targetCell = evt.target
+    const targetCellRowPos = parseInt(targetCell.getAttribute('data-row'), 10)
+    const targetCellColPos = parseInt(targetCell.getAttribute('data-col'), 10)
+    PubSub.publish(`${this.evtKey}-cellSelected`, {
+      rows: targetCellRowPos + 1,
+      cols: targetCellColPos + 1,
+    })
+  }
+
+  handleMouseOver = (evt) => {
+    const targetCell = evt.target
+    const targetCellRowPos = parseInt(targetCell.getAttribute('data-row'), 10)
+    const targetCellColPos = parseInt(targetCell.getAttribute('data-col'), 10)
+    const cells = this.getCells()
+    for (let cell of cells) {
+      const cellRowPos = parseInt(cell.getAttribute('data-row'), 10)
+      const cellColPos = parseInt(cell.getAttribute('data-col'), 10)
+      if (cellRowPos <= targetCellRowPos && cellColPos <= targetCellColPos) {
+        cell.classList.add('active')
+      } else {
+        cell.classList.remove('active')
+      }
+    }
+    PubSub.publish(`${this.evtKey}-cellHovered`, {
+      rows: targetCellRowPos + 1,
+      cols: targetCellColPos + 1,
+    })
+  }
+
+  get cols() {
+    return 20
+  }
+
+  get rows() {
+    return 10
+  }
+}