@atlaskit/editor-plugin-table 1.1.0 → 1.1.2

package/dist/es2019/plugins/table/ui/LayoutButton/index.js

@@ -10,44 +10,36 @@ import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { toggleTableLayoutWithAnalytics } from '../../commands-with-analytics';
 import { TableCssClassName as ClassName } from '../../types';
 import { findDomRefAtPos } from 'prosemirror-utils';
-
-const addPopupOffset = pos => ({ ...pos,
+const addPopupOffset = pos => ({
+  ...pos,
   // add 12 pixels to align y position with
   //the columns controls
   top: pos.top ? pos.top + 12 : undefined
 });
-
 const getMessage = layout => {
   switch (layout) {
     case 'default':
       return commonMessages.layoutWide;
-
     case 'wide':
       return commonMessages.layoutFullWidth;
-
     default:
       return commonMessages.layoutFixedWidth;
   }
 };
-
 class LayoutButton extends React.Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "stickyButtonRef", /*#__PURE__*/createRef());
-
     _defineProperty(this, "resizeObserver", new ResizeObserver(entries => {
       entries.forEach(entry => {
         const resizeButton = this.stickyButtonRef.current;
         const tableWrapper = this.props.targetRef;
-
         if (resizeButton && tableWrapper) {
           const clientRect = tableWrapper.getBoundingClientRect();
           resizeButton.style.left = `${clientRect.right}px`;
         }
       });
     }));
-
     _defineProperty(this, "handleClick", () => {
       const {
         state,
@@ -56,7 +48,6 @@ class LayoutButton extends React.Component {
       toggleTableLayoutWithAnalytics(this.props.editorAnalyticsAPI)(state, dispatch);
     });
   }
-
   getTitle() {
     const {
       intl: {
@@ -66,7 +57,6 @@ class LayoutButton extends React.Component {
     } = this.props;
     return formatMessage(getMessage(layout));
   }
-
   toolbarButton() {
     const {
       isResizing,
@@ -87,7 +77,6 @@ class LayoutButton extends React.Component {
       })
     }));
   }
-
   getStickyTargetRef(pos) {
     const {
       editorView
@@ -96,14 +85,11 @@ class LayoutButton extends React.Component {
     const node = findDomRefAtPos(pos, domAtPos);
     return node.dataset['headerRow'] && node.classList.contains('sticky') ? node : null;
   }
-
   renderSticky(button, targetRef, tableRef) {
     const title = this.getTitle();
-
     if (!(targetRef instanceof HTMLElement) || !(tableRef instanceof HTMLElement)) {
       return null;
     }
-
     const pos = targetRef.getBoundingClientRect();
     const tablePos = tableRef.getBoundingClientRect();
     return /*#__PURE__*/React.createElement("div", {
@@ -116,7 +102,6 @@ class LayoutButton extends React.Component {
       }
     }, button);
   }
-
   renderPopup(button) {
     const {
       mountPoint,
@@ -124,11 +109,9 @@ class LayoutButton extends React.Component {
       scrollableElement,
       targetRef
     } = this.props;
-
     if (!targetRef) {
       return null;
     }
-
     const title = this.getTitle();
     return /*#__PURE__*/React.createElement(Popup, {
       ariaLabel: title,
@@ -143,39 +126,32 @@ class LayoutButton extends React.Component {
       forcePlacement: true
     }, button);
   }
-
   render() {
     const {
       stickyHeader
     } = this.props;
     const button = this.toolbarButton();
     const stickyTargetRef = stickyHeader && stickyHeader.sticky && stickyHeader.pos ? this.getStickyTargetRef(stickyHeader.pos) : null;
-
     if (stickyTargetRef && this.props.targetRef) {
       return this.renderSticky(button, stickyTargetRef, this.props.targetRef);
     } else {
       return this.renderPopup(button);
     }
   }
-
   componentDidMount() {
     const dom = this.props.editorView.dom;
     const scrollPanel = dom.closest('.fabric-editor-popup-scroll-parent');
-
     if (scrollPanel instanceof HTMLElement) {
       this.resizeObserver.observe(scrollPanel);
     }
   }
-
   componentWillUnmount() {
     const dom = this.props.editorView.dom;
     const scrollPanel = dom.closest('.fabric-editor-popup-scroll-parent');
-
     if (scrollPanel instanceof HTMLElement) {
       this.resizeObserver.unobserve(scrollPanel);
     }
   }
-
   shouldComponentUpdate(nextProps) {
     const {
       targetRef,
@@ -185,9 +161,6 @@ class LayoutButton extends React.Component {
     } = this.props;
     return stickyHeader !== nextProps.stickyHeader || targetRef !== nextProps.targetRef || layout !== nextProps.layout || isResizing !== nextProps.isResizing;
   }
-
 }
-
 _defineProperty(LayoutButton, "displayName", 'LayoutButton');
-
 export default injectIntl(LayoutButton);

package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/index.js

@@ -13,11 +13,9 @@ const messages = defineMessages({
     description: 'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.'
   }
 });
-
 class CornerControlComponent extends Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "isActive", () => {
       const {
         editorView,
@@ -28,14 +26,11 @@ class CornerControlComponent extends Component {
         selection
       } = editorView.state;
       const table = findTable(selection);
-
       if (!table) {
         return false;
       }
-
       return isTableSelected(selection) || hoveredRows && hoveredRows.length === TableMap.get(table.node).height && !isResizing;
     });
-
     _defineProperty(this, "clearHoverSelection", () => {
       const {
         state,
@@ -43,7 +38,6 @@ class CornerControlComponent extends Component {
       } = this.props.editorView;
       clearHoverSelection()(state, dispatch);
     });
-
     _defineProperty(this, "selectTable", () => {
       const {
         state,
@@ -51,7 +45,6 @@ class CornerControlComponent extends Component {
       } = this.props.editorView;
       dispatch(selectTable(state.tr).setMeta('addToHistory', false));
     });
-
     _defineProperty(this, "hoverTable", () => {
       const {
         state,
@@ -60,7 +53,6 @@ class CornerControlComponent extends Component {
       hoverTable()(state, dispatch);
     });
   }
-
   render() {
     const {
       isInDanger,
@@ -71,11 +63,9 @@ class CornerControlComponent extends Component {
         formatMessage
       }
     } = this.props;
-
     if (!tableRef) {
       return null;
     }
-
     const isActive = this.isActive();
     return /*#__PURE__*/React.createElement("div", {
       className: classnames(ClassName.CORNER_CONTROLS, {
@@ -105,7 +95,5 @@ class CornerControlComponent extends Component {
       className: ClassName.CONTROLS_INSERT_MARKER
     })));
   }
-
 }
-
 export const CornerControls = injectIntl(CornerControlComponent);

package/dist/es2019/plugins/table/ui/TableFloatingControls/NumberColumn/index.js

@@ -8,16 +8,14 @@ import { getRowHeights } from '../../../utils';
 export default class NumberColumn extends Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "hoverRows", index => this.props.tableActive ? this.props.hoverRows([index]) : null);
-
     _defineProperty(this, "selectRow", (index, event) => {
       const {
         tableActive,
         editorView,
         selectRow
-      } = this.props; // If selection is outside the table then first reset the selection inside table
-
+      } = this.props;
+      // If selection is outside the table then first reset the selection inside table
       if (!tableActive && event.target && event.target instanceof Node) {
         const {
           doc,
@@ -26,22 +24,21 @@ export default class NumberColumn extends Component {
         } = editorView.state;
         const pos = editorView.posAtDOM(event.target, 1);
         const $pos = doc.resolve(pos);
-        const newPos = selection.head > pos ? // Selection is after table
+        const newPos = selection.head > pos ?
+        // Selection is after table
         // nodeSize - 3 will move the position inside last table cell
-        Selection.near(doc.resolve(pos + ($pos.parent.nodeSize - 3)), -1) : // Selection is before table
+        Selection.near(doc.resolve(pos + ($pos.parent.nodeSize - 3)), -1) :
+        // Selection is before table
         Selection.near($pos);
         editorView.dispatch(tr.setSelection(newPos));
       }
-
       selectRow(index, event.shiftKey);
     });
-
     _defineProperty(this, "clearHoverSelection", () => {
       const {
         tableActive,
         editorView
       } = this.props;
-
       if (tableActive) {
         const {
           state,
@@ -50,7 +47,6 @@ export default class NumberColumn extends Component {
         clearHoverSelection()(state, dispatch);
       }
     });
-
     _defineProperty(this, "getClassNames", index => {
       const {
         hoveredRows,
@@ -62,7 +58,6 @@ export default class NumberColumn extends Component {
       return [ClassName.NUMBERED_COLUMN_BUTTON, isActive ? ClassName.HOVERED_CELL_ACTIVE : '', isActive && isInDanger ? ClassName.HOVERED_CELL_IN_DANGER : ''].join(' ');
     });
   }
-
   render() {
     const {
       tableRef,
@@ -88,5 +83,4 @@ export default class NumberColumn extends Component {
       onMouseOut: this.clearHoverSelection
     }, hasHeaderRow ? index > 0 ? index : null : index + 1)));
   }
-
 }

package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/index.js

@@ -12,11 +12,9 @@ const messages = defineMessages({
     description: 'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.'
   }
 });
-
 class RowControlsComponent extends Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "clearHoverSelection", () => {
       const {
         state,
@@ -25,7 +23,6 @@ class RowControlsComponent extends Component {
       clearHoverSelection()(state, dispatch);
     });
   }
-
   render() {
     const {
       editorView,
@@ -37,11 +34,9 @@ class RowControlsComponent extends Component {
         formatMessage
       }
     } = this.props;
-
     if (!tableRef) {
       return null;
     }
-
     const {
       selection
     } = editorView.state;
@@ -60,11 +55,9 @@ class RowControlsComponent extends Component {
     }, index) => {
       // if previous row was header row, add its height to our margin
       let marginTop = -1;
-
       if (index === 1 && hasHeaderRow && this.props.stickyTop !== undefined) {
         marginTop += rowHeights[index - 1] + tableToolbarSize;
       }
-
       const thisRowSticky = this.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
       return /*#__PURE__*/React.createElement("div", {
         className: `${ClassName.ROW_CONTROLS_BUTTON_WRAP} ${getRowClassNames(startIndex, selection, hoveredRows, isInDanger, isResizing)} ${thisRowSticky ? 'sticky' : ''}`,
@@ -91,7 +84,5 @@ class RowControlsComponent extends Component {
       }));
     })));
   }
-
 }
-
 export const RowControls = injectIntl(RowControlsComponent);

package/dist/es2019/plugins/table/ui/TableFloatingControls/index.js

@@ -9,7 +9,6 @@ import { RowControls } from './RowControls';
 export default class TableFloatingControls extends Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "selectRow", (row, expand) => {
       const {
         editorView
@@ -17,15 +16,13 @@ export default class TableFloatingControls extends Component {
       const {
         state,
         dispatch
-      } = editorView; // fix for issue ED-4665
-
+      } = editorView;
+      // fix for issue ED-4665
       if (browser.ie_version === 11) {
         editorView.dom.blur();
       }
-
       selectRow(row, expand)(state, dispatch);
     });
-
     _defineProperty(this, "hoverRows", (rows, danger) => {
       const {
         state,
@@ -34,27 +31,23 @@ export default class TableFloatingControls extends Component {
       hoverRows(rows, danger)(state, dispatch);
     });
   }
-
   componentDidMount() {
     this.tryInitResizeObserver();
   }
-
   componentDidUpdate() {
     // tableRef prop is not guaranteed to be defined after componentDidMount, so retry to init resize observer on update
     this.tryInitResizeObserver();
-  } // tracking the table height changes to update floating controls
-
+  }
 
+  // tracking the table height changes to update floating controls
   tryInitResizeObserver() {
     var _window;
-
     let {
       tableRef
     } = this.props;
     const {
       tableRenderOptimization
     } = this.props.getEditorFeatureFlags();
-
     if (tableRenderOptimization && tableRef && !this.resizeObserver && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
       this.resizeObserver = new ResizeObserver(entries => {
         for (let entry of entries) {
@@ -67,10 +60,8 @@ export default class TableFloatingControls extends Component {
       this.resizeObserver.observe(tableRef);
     }
   }
-
   shouldComponentUpdate(nextProps, nextState) {
     var _this$state;
-
     const {
       tableRef,
       isInDanger,
@@ -92,13 +83,11 @@ export default class TableFloatingControls extends Component {
     const nextTableHeight = tableRenderOptimization ? nextState === null || nextState === void 0 ? void 0 : nextState.tableHeight : nextProps.tableHeight;
     return ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableHeight !== nextTableHeight || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader;
   }
-
   componentWillUnmount() {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
     }
   }
-
   render() {
     const {
       editorView,
@@ -113,11 +102,9 @@ export default class TableFloatingControls extends Component {
       hoveredRows,
       stickyHeader
     } = this.props;
-
     if (!tableRef) {
       return null;
     }
-
     const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
     return /*#__PURE__*/React.createElement("div", {
       onMouseDown: e => e.preventDefault()
@@ -152,7 +139,5 @@ export default class TableFloatingControls extends Component {
       stickyTop: tableActive ? stickyTop : undefined
     })));
   }
-
 }
-
 _defineProperty(TableFloatingControls, "displayName", 'TableFloatingControls');

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -8,12 +8,12 @@ import { TableCssClassName as ClassName } from '../types';
 import { tableCellBackgroundColor, tableToolbarColor, tableBorderColor, tableCellSelectedColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, tableBorderRadiusSize, tablePadding, tableScrollbarOffset, resizeHandlerAreaWidth, resizeLineWidth, tableToolbarSize, tableInsertColumnButtonSize, tableControlsSpacing, tableTextColor, stickyRowZIndex, columnControlsDecorationHeight, stickyRowOffsetTop, stickyHeaderBorderBottomWidth } from './consts';
 import { HeaderButton, HeaderButtonHover, HeaderButtonDanger, insertColumnButtonWrapper, insertRowButtonWrapper, columnControlsLineMarker, DeleteButton, OverflowShadow, columnControlsDecoration, hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, InsertMarker } from './ui-styles';
 const cornerControlHeight = tableToolbarSize + 1;
+
 /*
   compensating for half of the insert column button
   that is aligned to the right edge initially on hover of the top right column control when table overflown,
   its center should be aligned with the edge
 */
-
 const insertColumnButtonOffset = tableInsertColumnButtonSize / 2;
 const rangeSelectionStyles = `
 .${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} table tbody tr {
@@ -46,18 +46,19 @@ const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
       margin-bottom: ${columnControlsDecorationHeight}px;
     }
   }
-}`; // previous styles to add spacing to numbered lists with
-// large item markers (e.g. 101, 102, ...) when nested inside tables
+}`;
 
+// previous styles to add spacing to numbered lists with
+// large item markers (e.g. 101, 102, ...) when nested inside tables
 const listLargeNumericMarkersOldStyles = `
   .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {
     padding-left: revert;
   }
-`; // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
+`;
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4139
 export const tableStyles = props => {
   var _props$featureFlags, _props$featureFlags2;
-
   return css`
   .${ClassName.LAYOUT_BUTTON} button {
     background: ${`var(--ds-background-neutral, ${N20A})`};

package/dist/es2019/plugins/table/ui/consts.js

@@ -3,12 +3,13 @@ import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/st
 import { akEditorTableBorder, akEditorTableBorderDark, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
 import { themed } from '@atlaskit/theme/components';
+
 /**
  * Basic colors added to prevent content overflow in table cells.
  */
+
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4135
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-
 export const tableCellBackgroundColor = themed({
   light: `var(--ds-surface, ${N0})`,
   dark: `var(--ds-surface, ${DN30})`
@@ -25,8 +26,8 @@ export const tableBorderColor = themed({
   light: `var(--ds-border, ${akEditorTableBorder})`,
   dark: `var(--ds-border, ${akEditorTableBorderDark})`
 });
-export const tableFloatingControlsColor = `var(--ds-background-neutral, ${N20})`; // TODO: https://product-fabric.atlassian.net/browse/DSP-4461
-
+export const tableFloatingControlsColor = `var(--ds-background-neutral, ${N20})`;
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4461
 export const tableCellSelectedColor = "var(--ds-blanket-selected, rgba(179, 212, 255, 0.3))";
 export const tableToolbarSelectedColor = `var(--ds-background-selected-bold, ${B200})`;
 export const tableBorderSelectedColor = `var(--ds-border-selected, ${B300})`;

package/dist/es2019/plugins/table/ui/ui-styles.js

@@ -5,7 +5,6 @@ import { N40A, B300, N300, R300, N20A, N60A, N0, Y50, Y200 } from '@atlaskit/the
 import { tableToolbarColor, tableBorderColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, lineMarkerSize, columnControlsDecorationHeight, columnControlsZIndex, columnControlsSelectedZIndex, resizeHandlerAreaWidth, resizeLineWidth, resizeHandlerZIndex, tableToolbarSize, tableInsertColumnButtonSize, tableDeleteButtonSize } from './consts';
 import { TableCssClassName as ClassName } from '../types';
 import { borderRadius } from '@atlaskit/theme/constants';
-
 const InsertLine = cssString => css`
   .${ClassName.CONTROLS_INSERT_LINE} {
     background: ${tableBorderSelectedColor};
@@ -15,7 +14,6 @@ const InsertLine = cssString => css`
     ${cssString}
   }
 `;
-
 const Marker = props => css`
   background-color: ${tableBorderColor(props)};
   position: absolute;
@@ -24,14 +22,12 @@ const Marker = props => css`
   border-radius: 50%;
   pointer-events: none;
 `;
-
 export const InsertMarker = (props, cssString) => css`
   .${ClassName.CONTROLS_INSERT_MARKER} {
     ${Marker(props)};
     ${cssString}
   }
 `;
-
 const Button = cssString => css`
   border-radius: ${borderRadius()}px;
   border-width: 0px;
@@ -53,7 +49,6 @@ const Button = cssString => css`
   }
   ${cssString}
 `;
-
 export const HeaderButton = (props, cssString) => css`
   .${ClassName.CONTROLS_BUTTON} {
     background: ${tableToolbarColor(props)};
@@ -101,7 +96,6 @@ export const HeaderButtonDanger = () => css`
     z-index: ${akEditorUnitZIndex};
   }
 `;
-
 const InsertButton = () => css`
   .${ClassName.CONTROLS_INSERT_BUTTON_INNER} {
     position: absolute;
@@ -127,7 +121,6 @@ const InsertButton = () => css`
     display: flex;
   }
 `;
-
 const InsertButtonHover = () => css`
   .${ClassName.CONTROLS_INSERT_BUTTON}:hover {
     background: ${`var(--ds-background-brand-bold, ${B300})`};
@@ -135,7 +128,6 @@ const InsertButtonHover = () => css`
     cursor: pointer;
   }
 `;
-
 export const insertColumnButtonWrapper = css`
   ${InsertButton()}
   ${InsertButtonHover()}
@@ -235,7 +227,6 @@ export const OverflowShadow = props => css`
     }
   }
 `;
-
 const columnHeaderButton = (props, cssString) => css`
   background: ${tableToolbarColor(props)};
   border: 1px solid ${tableBorderColor(props)};
@@ -249,7 +240,6 @@ const columnHeaderButton = (props, cssString) => css`
 
   ${cssString}
 `;
-
 const columnHeaderButtonSelected = css`
   color: ${`var(--ds-text-inverse, ${N0})`};
   background-color: ${`var(--ds-background-selected, ${tableToolbarSelectedColor})`};

package/dist/es2019/plugins/table/utils/analytics.js

@@ -5,13 +5,11 @@ export function getSelectedTableInfo(selection) {
   let totalRowCount = 0;
   let totalColumnCount = 0;
   const table = findTable(selection);
-
   if (table) {
     map = TableMap.get(table.node);
     totalRowCount = map.height;
     totalColumnCount = map.width;
   }
-
   return {
     table,
     map,
@@ -29,17 +27,14 @@ export function getSelectedCellInfo(selection) {
     totalRowCount,
     totalColumnCount
   } = getSelectedTableInfo(selection);
-
   if (table && map) {
     const rect = getSelectionRect(selection);
-
     if (rect) {
       totalCells = map.cellsInRect(rect).length;
       horizontalCells = rect.right - rect.left;
       verticalCells = rect.bottom - rect.top;
     }
   }
-
   return {
     totalRowCount,
     totalColumnCount,
@@ -51,15 +46,12 @@ export function getSelectedCellInfo(selection) {
 export const withEditorAnalyticsAPI = payload => editorAnalyticsAPI => {
   return command => (state, dispatch, view) => command(state, tr => {
     const dynamicPayload = payload instanceof Function ? payload(state) : payload;
-
     if (dynamicPayload) {
       editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(dynamicPayload)(tr);
     }
-
     if (dispatch) {
       dispatch(tr);
     }
-
     return true;
   }, view);
 };