@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

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

@@ -0,0 +1,199 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { findDomRefAtPos } from 'prosemirror-utils';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { injectIntl } from 'react-intl-next';
+import { Popup } from '@atlaskit/editor-common/ui'; // import { closestElement } from '../../../../utils/dom';
+
+import { closestElement } from '@atlaskit/editor-common/utils';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../commands-with-analytics';
+import { TableCssClassName as ClassName } from '../../types';
+import { checkIfNumberColumnEnabled } from '../../utils';
+import getPopupOptions from './getPopupOptions';
+import InsertButton from './InsertButton';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, CONTENT_COMPONENT } from '@atlaskit/editor-common/analytics';
+export class FloatingInsertButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.insertColumn = this.insertColumn.bind(this);
+    this.insertRow = this.insertRow.bind(this);
+  }
+
+  render() {
+    const {
+      tableNode,
+      editorView,
+      insertColumnButtonIndex,
+      insertRowButtonIndex,
+      tableRef,
+      mountPoint,
+      boundariesElement,
+      isHeaderColumnEnabled,
+      isHeaderRowEnabled,
+      dispatchAnalyticsEvent
+    } = this.props;
+    const type = typeof insertColumnButtonIndex !== 'undefined' ? 'column' : typeof insertRowButtonIndex !== 'undefined' ? 'row' : null;
+
+    if (!tableNode || !tableRef || !type) {
+      return null;
+    } // We can’t display the insert button for row|colum index 0
+    // when the header row|colum is enabled, this feature will be change on the future
+
+
+    if (type === 'column' && isHeaderColumnEnabled && insertColumnButtonIndex === 0 || type === 'row' && isHeaderRowEnabled && insertRowButtonIndex === 0) {
+      return null;
+    }
+
+    const {
+      state: {
+        tr
+      }
+    } = editorView;
+
+    if (tr.selection instanceof CellSelection && (tr.selection.isColSelection() || tr.selection.isRowSelection())) {
+      return null;
+    }
+
+    const cellPosition = this.getCellPosition(type);
+
+    if (!cellPosition) {
+      return null;
+    }
+
+    const tablePos = findTable(editorView.state.selection);
+
+    if (!tablePos) {
+      return null;
+    }
+
+    const domAtPos = editorView.domAtPos.bind(editorView);
+    const pos = cellPosition + tablePos.start + 1;
+    let target;
+
+    try {
+      target = findDomRefAtPos(pos, domAtPos);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.warn(error);
+
+      if (dispatchAnalyticsEvent) {
+        const payload = {
+          action: ACTION.ERRORED,
+          actionSubject: ACTION_SUBJECT.CONTENT_COMPONENT,
+          eventType: EVENT_TYPE.OPERATIONAL,
+          attributes: {
+            component: CONTENT_COMPONENT.FLOATING_INSERT_BUTTON,
+            selection: editorView.state.selection.toJSON(),
+            position: pos,
+            docSize: editorView.state.doc.nodeSize,
+            error: error === null || error === void 0 ? void 0 : error.toString(),
+            errorStack: error.stack || undefined
+          }
+        };
+        dispatchAnalyticsEvent(payload);
+      }
+    }
+
+    if (!target || !(target instanceof HTMLElement)) {
+      return null;
+    }
+
+    const targetCellRef = type === 'row' ? closestElement(target, 'tr') : closestElement(target, 'td, th');
+
+    if (!targetCellRef) {
+      return null;
+    }
+
+    const tableContainerWrapper = closestElement(targetCellRef, `.${ClassName.TABLE_CONTAINER}`);
+    const tableWrapper = closestElement(targetCellRef, `.${ClassName.TABLE_NODE_WRAPPER}`);
+    const index = type === 'column' ? insertColumnButtonIndex : insertRowButtonIndex;
+    const hasNumberedColumns = checkIfNumberColumnEnabled(editorView.state.selection);
+    return /*#__PURE__*/React.createElement(Popup, _extends({
+      target: targetCellRef,
+      mountTo: tableContainerWrapper || mountPoint,
+      boundariesElement: tableContainerWrapper || boundariesElement,
+      scrollableElement: tableWrapper,
+      forcePlacement: true,
+      allowOutOfBounds: true
+    }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper)), /*#__PURE__*/React.createElement(InsertButton, {
+      type: type,
+      tableRef: tableRef,
+      onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
+      hasStickyHeaders: this.props.hasStickyHeaders || false
+    }));
+  }
+
+  getCellPosition(type) {
+    const {
+      tableNode,
+      insertColumnButtonIndex,
+      insertRowButtonIndex
+    } = this.props;
+    const tableMap = TableMap.get(tableNode);
+
+    if (type === 'column') {
+      const columnIndex = insertColumnButtonIndex === 0 ? 0 : insertColumnButtonIndex - 1;
+
+      if (columnIndex > tableMap.width - 1) {
+        return null;
+      }
+
+      return tableMap.positionAt(0, columnIndex, tableNode);
+    } else {
+      const rowIndex = insertRowButtonIndex === 0 ? 0 : insertRowButtonIndex - 1;
+
+      if (rowIndex > tableMap.height - 1) {
+        return null;
+      }
+
+      return tableMap.positionAt(rowIndex, 0, tableNode);
+    }
+  }
+
+  insertRow(event) {
+    const {
+      editorView,
+      insertRowButtonIndex,
+      editorAnalyticsAPI
+    } = this.props;
+
+    if (typeof insertRowButtonIndex !== 'undefined') {
+      event.preventDefault();
+      const {
+        state,
+        dispatch
+      } = editorView;
+      insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.BUTTON, {
+        index: insertRowButtonIndex,
+        moveCursorToInsertedRow: true
+      })(state, dispatch);
+    }
+  }
+
+  insertColumn(event) {
+    const {
+      editorView,
+      insertColumnButtonIndex,
+      editorAnalyticsAPI,
+      getEditorContainerWidth
+    } = this.props;
+
+    if (typeof insertColumnButtonIndex !== 'undefined') {
+      event.preventDefault();
+      const {
+        state,
+        dispatch
+      } = editorView;
+      insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
+    }
+  }
+
+}
+
+_defineProperty(FloatingInsertButton, "displayName", 'FloatingInsertButton');
+
+export default injectIntl(FloatingInsertButton);

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

@@ -0,0 +1,195 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { createRef } from 'react';
+import classnames from 'classnames';
+import { injectIntl } from 'react-intl-next';
+import { Popup } from '@atlaskit/editor-common/ui';
+import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
+import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
+import commonMessages from '@atlaskit/editor-common/messages';
+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,
+  // 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,
+        dispatch
+      } = this.props.editorView;
+      toggleTableLayoutWithAnalytics(this.props.editorAnalyticsAPI)(state, dispatch);
+    });
+  }
+
+  getTitle() {
+    const {
+      intl: {
+        formatMessage
+      },
+      layout = 'default'
+    } = this.props;
+    return formatMessage(getMessage(layout));
+  }
+
+  toolbarButton() {
+    const {
+      isResizing,
+      layout = 'default'
+    } = this.props;
+    const title = this.getTitle();
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(ClassName.LAYOUT_BUTTON, {
+        [ClassName.IS_RESIZING]: isResizing
+      })
+    }, /*#__PURE__*/React.createElement(ToolbarButton, {
+      title: title,
+      onClick: this.handleClick,
+      iconBefore: layout === 'full-width' ? /*#__PURE__*/React.createElement(CollapseIcon, {
+        label: title
+      }) : /*#__PURE__*/React.createElement(ExpandIcon, {
+        label: title
+      })
+    }));
+  }
+
+  getStickyTargetRef(pos) {
+    const {
+      editorView
+    } = this.props;
+    const domAtPos = editorView.domAtPos.bind(editorView);
+    const node = findDomRefAtPos(pos, domAtPos);
+    return node.dataset['headerRow'] && node.classList.contains('sticky') ? node : null;
+  }
+
+  renderSticky(button, targetRef, tableRef) {
+    // const title = this.getTitle();
+    const title = 'TODO MISSING TITLE';
+
+    if (!(targetRef instanceof HTMLElement) || !(tableRef instanceof HTMLElement)) {
+      return null;
+    }
+
+    const pos = targetRef.getBoundingClientRect();
+    const tablePos = tableRef.getBoundingClientRect();
+    return /*#__PURE__*/React.createElement("div", {
+      ref: this.stickyButtonRef,
+      "aria-label": title,
+      style: {
+        position: 'fixed',
+        top: pos.top + 22,
+        left: tablePos.right
+      }
+    }, button);
+  }
+
+  renderPopup(button) {
+    const {
+      mountPoint,
+      boundariesElement,
+      scrollableElement,
+      targetRef
+    } = this.props;
+
+    if (!targetRef) {
+      return null;
+    } // const title = this.getTitle();
+
+
+    const title = 'TODO MISSING TITLE';
+    return /*#__PURE__*/React.createElement(Popup, {
+      ariaLabel: title,
+      target: targetRef,
+      alignY: "start",
+      alignX: "end",
+      onPositionCalculated: addPopupOffset,
+      stick: true,
+      mountTo: mountPoint,
+      boundariesElement: boundariesElement,
+      scrollableElement: scrollableElement,
+      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,
+      layout,
+      isResizing,
+      stickyHeader
+    } = 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

@@ -0,0 +1,95 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
+import { clearHoverSelection, hoverTable } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+export default class CornerControls extends Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "isActive", () => {
+      const {
+        editorView,
+        hoveredRows,
+        isResizing
+      } = this.props;
+      const {
+        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,
+        dispatch
+      } = this.props.editorView;
+      clearHoverSelection()(state, dispatch);
+    });
+
+    _defineProperty(this, "selectTable", () => {
+      const {
+        state,
+        dispatch
+      } = this.props.editorView;
+      dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+    });
+
+    _defineProperty(this, "hoverTable", () => {
+      const {
+        state,
+        dispatch
+      } = this.props.editorView;
+      hoverTable()(state, dispatch);
+    });
+  }
+
+  render() {
+    const {
+      isInDanger,
+      tableRef,
+      isHeaderColumnEnabled,
+      isHeaderRowEnabled
+    } = this.props;
+
+    if (!tableRef) {
+      return null;
+    }
+
+    const isActive = this.isActive();
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(ClassName.CORNER_CONTROLS, {
+        active: isActive,
+        sticky: this.props.stickyTop !== undefined
+      }),
+      style: {
+        top: this.props.stickyTop !== undefined ? `${this.props.stickyTop}px` : undefined
+      }
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: classnames(ClassName.CONTROLS_CORNER_BUTTON, {
+        danger: isActive && isInDanger
+      }),
+      onClick: this.selectTable,
+      onMouseOver: this.hoverTable,
+      onMouseOut: this.clearHoverSelection
+    }), !isHeaderRowEnabled && /*#__PURE__*/React.createElement("div", {
+      className: ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ClassName.CONTROLS_INSERT_MARKER
+    })), !isHeaderColumnEnabled && /*#__PURE__*/React.createElement("div", {
+      className: ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ClassName.CONTROLS_INSERT_MARKER
+    })));
+  }
+
+}

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

@@ -0,0 +1,91 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import { Selection } from 'prosemirror-state';
+import { isRowSelected } from '@atlaskit/editor-tables/utils';
+import { clearHoverSelection } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+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
+
+      if (!tableActive && event.target && event.target instanceof Node) {
+        const {
+          doc,
+          selection,
+          tr
+        } = editorView.state;
+        const pos = editorView.posAtDOM(event.target, 1);
+        const $pos = doc.resolve(pos);
+        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($pos);
+        editorView.dispatch(tr.setSelection(newPos));
+      }
+
+      selectRow(index, event.shiftKey);
+    });
+
+    _defineProperty(this, "clearHoverSelection", () => {
+      const {
+        tableActive,
+        editorView
+      } = this.props;
+
+      if (tableActive) {
+        const {
+          state,
+          dispatch
+        } = editorView;
+        clearHoverSelection()(state, dispatch);
+      }
+    });
+
+    _defineProperty(this, "getClassNames", index => {
+      const {
+        hoveredRows,
+        editorView,
+        isInDanger,
+        isResizing
+      } = this.props;
+      const isActive = isRowSelected(index)(editorView.state.selection) || (hoveredRows || []).indexOf(index) !== -1 && !isResizing;
+      return [ClassName.NUMBERED_COLUMN_BUTTON, isActive ? ClassName.HOVERED_CELL_ACTIVE : '', isActive && isInDanger ? ClassName.HOVERED_CELL_IN_DANGER : ''].join(' ');
+    });
+  }
+
+  render() {
+    const {
+      tableRef,
+      hasHeaderRow
+    } = this.props;
+    const rowHeights = getRowHeights(tableRef);
+    return /*#__PURE__*/React.createElement("div", {
+      className: ClassName.NUMBERED_COLUMN,
+      style: {
+        marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined
+      }
+    }, rowHeights.map((rowHeight, index) => /*#__PURE__*/React.createElement("div", {
+      key: `wrapper-${index}`,
+      className: this.getClassNames(index),
+      "data-index": index,
+      style: {
+        height: rowHeight,
+        top: this.props.stickyTop !== undefined && hasHeaderRow && index === 0 ? `${this.props.stickyTop}px` : undefined
+      },
+      onClick: event => this.selectRow(index, event),
+      onMouseOver: () => this.hoverRows(index),
+      onMouseOut: this.clearHoverSelection
+    }, hasHeaderRow ? index > 0 ? index : null : index + 1)));
+  }
+
+}

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

@@ -0,0 +1,82 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import { clearHoverSelection } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+import { getRowClassNames, getRowHeights, getRowsParams } from '../../../utils';
+import { tableControlsSpacing, tableToolbarSize } from '../../consts';
+export default class RowControls extends Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "clearHoverSelection", () => {
+      const {
+        state,
+        dispatch
+      } = this.props.editorView;
+      clearHoverSelection()(state, dispatch);
+    });
+  }
+
+  render() {
+    const {
+      editorView,
+      tableRef,
+      hoveredRows,
+      isInDanger,
+      isResizing
+    } = this.props;
+
+    if (!tableRef) {
+      return null;
+    }
+
+    const {
+      selection
+    } = editorView.state;
+    const rowHeights = getRowHeights(tableRef);
+    const rowsParams = getRowsParams(rowHeights);
+    const firstRow = tableRef.querySelector('tr');
+    const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
+    return /*#__PURE__*/React.createElement("div", {
+      className: ClassName.ROW_CONTROLS
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ClassName.ROW_CONTROLS_INNER
+    }, rowsParams.map(({
+      startIndex,
+      endIndex,
+      height
+    }, 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' : ''}`,
+        key: startIndex,
+        style: {
+          height: height,
+          marginTop: `${marginTop}px`,
+          top: thisRowSticky ? `${this.props.stickyTop + 3}px` : undefined,
+          paddingTop: thisRowSticky ? `${tableControlsSpacing}px` : undefined
+        }
+      }, /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        className: `${ClassName.ROW_CONTROLS_BUTTON}
+                  ${ClassName.CONTROLS_BUTTON}
+                `,
+        onClick: event => this.props.selectRow(startIndex, event.shiftKey),
+        onMouseOver: () => this.props.hoverRows([startIndex]),
+        onMouseOut: this.clearHoverSelection,
+        "data-start-index": startIndex,
+        "data-end-index": endIndex
+      }), /*#__PURE__*/React.createElement("div", {
+        className: ClassName.CONTROLS_INSERT_MARKER
+      }));
+    })));
+  }
+
+}