@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/dist/es2019/plugins/table/transforms/replace-table.js

@@ -0,0 +1,33 @@
+import { TextSelection } from 'prosemirror-state';
+import { Slice, Fragment } from 'prosemirror-model';
+import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { TABLE_ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { getSelectedTableInfo } from '../utils';
+export const replaceSelectedTable = (state, content, inputMethod, editorAnalyticsAPI) => {
+  if (isTableSelected(state.selection)) {
+    const table = findTable(state.selection);
+
+    if (table) {
+      const slice = typeof content === 'string' ? new Slice(Fragment.from(state.schema.text(content)), 0, 0) : content;
+      let tr = state.tr.replace(table.pos, table.pos + table.node.nodeSize, slice);
+      tr.setSelection(TextSelection.create(tr.doc, table.pos + slice.size + 1));
+      const {
+        totalRowCount,
+        totalColumnCount
+      } = getSelectedTableInfo(state.selection);
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+        action: TABLE_ACTION.REPLACED,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        attributes: {
+          totalColumnCount,
+          totalRowCount,
+          inputMethod
+        },
+        eventType: EVENT_TYPE.TRACK
+      })(tr);
+      return tr;
+    }
+  }
+
+  return state.tr;
+};

package/dist/es2019/plugins/table/transforms/split.js

@@ -0,0 +1,72 @@
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+
+/**
+ * Helper to split all the cells in a range of columns
+ * @param tr
+ * @param tablePos
+ * @param columnStart - Start of the rect included (rect.left)
+ * @param columnEnd - End of the rect not included (rect.right)
+ */
+export function splitCellsInColumns(tr, tablePos, columnStart, columnEnd) {
+  let mapStart = tr.mapping.maps.length;
+  const table = tr.doc.nodeAt(tablePos);
+
+  if (!table) {
+    return tr;
+  }
+
+  const tableStart = tr.doc.resolve(tablePos).start(1);
+  const map = TableMap.get(table);
+
+  for (let column = columnStart; column < columnEnd; column++) {
+    for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+      const cellIndex = rowIndex * map.width + column;
+      const cellPos = map.map[cellIndex]; // Check if the cell is contained by another by another row/column
+
+      const hasMergedCellsBefore = column > 0 && map.map[cellIndex - 1] === cellPos || rowIndex > 0 && map.map[(rowIndex - 1) * map.width + column] === cellPos; // Check if the cell contains another row/column
+
+      const hasMergedCellsAfter = column < map.width - 1 && map.map[cellIndex + 1] === cellPos || rowIndex < map.height - 1 && map.map[(rowIndex + 1) * map.width + column] === cellPos;
+
+      if (!hasMergedCellsBefore && hasMergedCellsAfter) {
+        // Is a merged cell that start in this row/column
+        const cellNode = table.nodeAt(cellPos);
+
+        if (!cellNode) {
+          continue;
+        }
+
+        const {
+          colwidth,
+          colspan = 1,
+          rowspan = 1
+        } = cellNode.attrs;
+        let mapping = tr.mapping.slice(mapStart); // Update current node with the simple colspan
+
+        const baseAttrs = { ...cellNode.attrs,
+          colspan: 1,
+          rowspan: 1
+        }; // Add the new cells
+
+        for (let cellRowIndex = rowIndex; cellRowIndex < rowIndex + rowspan; cellRowIndex++) {
+          for (let i = 0; i < colspan; i++) {
+            let mapping = tr.mapping.slice(mapStart);
+            const cellPos = map.positionAt(cellRowIndex, column + i, table);
+            tr.insert(mapping.map(cellPos + tableStart), cellNode.type.createAndFill({ ...baseAttrs,
+              colwidth: colwidth ? [colwidth[i]] : undefined
+            }));
+          }
+        } // Delete the original cell
+
+
+        mapping = tr.mapping.slice(mapStart);
+        tr.delete(mapping.map(cellPos + tableStart), mapping.map(cellPos + tableStart + cellNode.nodeSize)); // Skip rows based on rowspan
+
+        if (rowspan && rowspan > 1) {
+          rowIndex += rowspan - 1;
+        }
+      }
+    }
+  }
+
+  return tr;
+}

package/dist/es2019/plugins/table/types.js

@@ -0,0 +1,84 @@
+import { tableCellSelector, tableHeaderSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
+import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
+export const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
+export let TableDecorations;
+
+(function (TableDecorations) {
+  TableDecorations["ALL_CONTROLS_HOVER"] = "CONTROLS_HOVER";
+  TableDecorations["ROW_CONTROLS_HOVER"] = "ROW_CONTROLS_HOVER";
+  TableDecorations["COLUMN_CONTROLS_HOVER"] = "COLUMN_CONTROLS_HOVER";
+  TableDecorations["TABLE_CONTROLS_HOVER"] = "TABLE_CONTROLS_HOVER";
+  TableDecorations["CELL_CONTROLS_HOVER"] = "CELL_CONTROLS_HOVER";
+  TableDecorations["COLUMN_CONTROLS_DECORATIONS"] = "COLUMN_CONTROLS_DECORATIONS";
+  TableDecorations["COLUMN_SELECTED"] = "COLUMN_SELECTED";
+  TableDecorations["COLUMN_RESIZING_HANDLE"] = "COLUMN_RESIZING_HANDLE";
+  TableDecorations["COLUMN_RESIZING_HANDLE_LINE"] = "COLUMN_RESIZING_HANDLE_LINE";
+  TableDecorations["LAST_CELL_ELEMENT"] = "LAST_CELL_ELEMENT";
+})(TableDecorations || (TableDecorations = {}));
+
+export const TableCssClassName = { ...TableSharedCssClassName,
+  COLUMN_CONTROLS: `${tablePrefixSelector}-column-controls`,
+  COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
+  COLUMN_SELECTED: `${tablePrefixSelector}-column__selected`,
+  ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-row-controls-wrapper`,
+  ROW_CONTROLS: `${tablePrefixSelector}-row-controls`,
+  ROW_CONTROLS_INNER: `${tablePrefixSelector}-row-controls__inner`,
+  ROW_CONTROLS_BUTTON_WRAP: `${tablePrefixSelector}-row-controls__button-wrap`,
+  ROW_CONTROLS_BUTTON: `${tablePrefixSelector}-row-controls__button`,
+  CONTROLS_BUTTON: `${tablePrefixSelector}-controls__button`,
+  CONTROLS_BUTTON_ICON: `${tablePrefixSelector}-controls__button-icon`,
+  CONTROLS_INSERT_BUTTON: `${tablePrefixSelector}-controls__insert-button`,
+  CONTROLS_INSERT_BUTTON_INNER: `${tablePrefixSelector}-controls__insert-button-inner`,
+  CONTROLS_INSERT_BUTTON_WRAP: `${tablePrefixSelector}-controls__insert-button-wrap`,
+  CONTROLS_INSERT_LINE: `${tablePrefixSelector}-controls__insert-line`,
+  CONTROLS_BUTTON_OVERLAY: `${tablePrefixSelector}-controls__button-overlay`,
+  LAYOUT_BUTTON: `${tablePrefixSelector}-layout-button`,
+  CONTROLS_INSERT_MARKER: `${tablePrefixSelector}-controls__insert-marker`,
+  CONTROLS_INSERT_COLUMN: `${tablePrefixSelector}-controls__insert-column`,
+  CONTROLS_INSERT_ROW: `${tablePrefixSelector}-controls__insert-row`,
+  CONTROLS_DELETE_BUTTON_WRAP: `${tablePrefixSelector}-controls__delete-button-wrap`,
+  CONTROLS_DELETE_BUTTON: `${tablePrefixSelector}-controls__delete-button`,
+  CONTROLS_FLOATING_BUTTON_COLUMN: `${tablePrefixSelector}-controls-floating__button-column`,
+  CONTROLS_FLOATING_BUTTON_ROW: `${tablePrefixSelector}-controls-floating__button-row`,
+  CORNER_CONTROLS: `${tablePrefixSelector}-corner-controls`,
+  CORNER_CONTROLS_INSERT_ROW_MARKER: `${tablePrefixSelector}-corner-controls__insert-row-marker`,
+  CORNER_CONTROLS_INSERT_COLUMN_MARKER: `${tablePrefixSelector}-corner-controls__insert-column-marker`,
+  CONTROLS_CORNER_BUTTON: `${tablePrefixSelector}-corner-button`,
+  NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,
+  NUMBERED_COLUMN_BUTTON: `${tablePrefixSelector}-numbered-column__button`,
+  HOVERED_COLUMN: `${tablePrefixSelector}-hovered-column`,
+  HOVERED_ROW: `${tablePrefixSelector}-hovered-row`,
+  HOVERED_TABLE: `${tablePrefixSelector}-hovered-table`,
+  HOVERED_CELL: `${tablePrefixSelector}-hovered-cell`,
+  HOVERED_CELL_IN_DANGER: 'danger',
+  HOVERED_CELL_ACTIVE: 'active',
+  HOVERED_CELL_WARNING: `${tablePrefixSelector}-hovered-cell__warning`,
+  HOVERED_DELETE_BUTTON: `${tablePrefixSelector}-hovered-delete-button`,
+  WITH_CONTROLS: `${tablePrefixSelector}-with-controls`,
+  RESIZING_PLUGIN: `${tablePrefixSelector}-resizing-plugin`,
+  RESIZE_CURSOR: `${tablePrefixSelector}-resize-cursor`,
+  IS_RESIZING: `${tablePrefixSelector}-is-resizing`,
+  RESIZE_HANDLE: `${tablePrefixSelector}-resize-handle`,
+  RESIZE_HANDLE_DECORATION: `${tablePrefixSelector}-resize-decoration`,
+  CONTEXTUAL_SUBMENU: `${tablePrefixSelector}-contextual-submenu`,
+  CONTEXTUAL_MENU_BUTTON_WRAP: `${tablePrefixSelector}-contextual-menu-button-wrap`,
+  CONTEXTUAL_MENU_BUTTON: `${tablePrefixSelector}-contextual-menu-button`,
+  CONTEXTUAL_MENU_ICON: `${tablePrefixSelector}-contextual-submenu-icon`,
+  // come from prosemirror-table
+  SELECTED_CELL: 'selectedCell',
+  // defined in ReactNodeView based on PM node name
+  NODEVIEW_WRAPPER: 'tableView-content-wrap',
+  TABLE_SELECTED: `${tablePrefixSelector}-table__selected`,
+  TABLE_CELL: tableCellSelector,
+  TABLE_HEADER_CELL: tableHeaderSelector,
+  TABLE_STICKY: `${tablePrefixSelector}-sticky`,
+  TOP_LEFT_CELL: 'table > tbody > tr:nth-child(2) > td:nth-child(1)',
+  LAST_ITEM_IN_CELL: `${tablePrefixSelector}-last-item-in-cell`,
+  WITH_RESIZE_LINE: `${tablePrefixSelector}-column-resize-line`
+};
+export let ShadowEvent;
+
+(function (ShadowEvent) {
+  ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";
+  ShadowEvent["SHOW_AFTER_SHADOW"] = "showAfterShadow";
+})(ShadowEvent || (ShadowEvent = {}));

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

@@ -0,0 +1,142 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { findDomRefAtPos } from 'prosemirror-utils';
+import { injectIntl } from 'react-intl-next';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { akEditorFloatingOverlapPanelZIndex, akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { closestElement } from '@atlaskit/editor-common/utils';
+import { toggleContextualMenu } from '../../commands';
+import { TableCssClassName as ClassName } from '../../types';
+import messages from '../../ui/messages';
+import { CONTENT_COMPONENT } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { tableFloatingCellButtonStyles } from './styles';
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+export class FloatingContextualButtonInner extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "handleClick", () => {
+      const {
+        state,
+        dispatch
+      } = this.props.editorView; // Clicking outside the dropdown handles toggling the menu closed
+      // (otherwise these two toggles combat each other).
+      // In the event a user clicks the chevron button again
+      // That will count as clicking outside the dropdown and
+      // will be toggled appropriately
+
+      if (!this.props.isContextualMenuOpen) {
+        toggleContextualMenu()(state, dispatch);
+      }
+    });
+  }
+
+  render() {
+    const {
+      mountPoint,
+      scrollableElement,
+      editorView,
+      targetCellPosition,
+      isContextualMenuOpen,
+      intl: {
+        formatMessage
+      },
+      dispatchAnalyticsEvent
+    } = this.props; //  : Props & WrappedComponentProps
+
+    const domAtPos = editorView.domAtPos.bind(editorView);
+    let targetCellRef;
+
+    try {
+      targetCellRef = findDomRefAtPos(targetCellPosition, 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_CONTEXTUAL_BUTTON,
+            selection: editorView.state.selection.toJSON(),
+            position: targetCellPosition,
+            docSize: editorView.state.doc.nodeSize,
+            error: error.toString(),
+            errorStack: error.stack || undefined
+          }
+        };
+        dispatchAnalyticsEvent(payload);
+      }
+    }
+
+    if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
+      return null;
+    }
+
+    const tableWrapper = closestElement(targetCellRef, `.${ClassName.TABLE_NODE_WRAPPER}`);
+    const labelCellOptions = formatMessage(messages.cellOptions);
+    const button = jsx("div", {
+      css: tableFloatingCellButtonStyles
+    }, jsx(ToolbarButton, {
+      className: ClassName.CONTEXTUAL_MENU_BUTTON,
+      selected: isContextualMenuOpen,
+      title: labelCellOptions,
+      onClick: this.handleClick,
+      iconBefore: jsx(ExpandIcon, {
+        label: ""
+      }),
+      "aria-label": labelCellOptions
+    }));
+    const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
+
+    if (this.props.stickyHeader && parentSticky) {
+      const pos = targetCellRef.getBoundingClientRect();
+      return jsx("div", {
+        style: {
+          position: 'fixed',
+          top: this.props.stickyHeader.top + this.props.stickyHeader.padding + 3 + 3,
+          zIndex: akEditorFloatingOverlapPanelZIndex,
+          left: pos.left + targetCellRef.clientWidth - 20 - 3
+        }
+      }, button);
+    }
+
+    return jsx(Popup, {
+      alignX: "right",
+      alignY: "start",
+      target: targetCellRef,
+      mountTo: tableWrapper || mountPoint,
+      boundariesElement: targetCellRef,
+      scrollableElement: scrollableElement,
+      offset: [3, -3],
+      forcePlacement: true,
+      allowOutOfBounds: true,
+      zIndex: akEditorSmallZIndex
+    }, button);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.tableNode !== nextProps.tableNode || this.props.targetCellPosition !== nextProps.targetCellPosition || this.props.layout !== nextProps.layout || this.props.isContextualMenuOpen !== nextProps.isContextualMenuOpen || this.props.isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || this.props.stickyHeader !== nextProps.stickyHeader;
+  } // TODO: restore
+
+
+}
+
+_defineProperty(FloatingContextualButtonInner, "displayName", 'FloatingContextualButton');
+
+const FloatingContextualButton = injectIntl(FloatingContextualButtonInner);
+export default function (props) {
+  return jsx(ErrorBoundary, {
+    component: ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    fallbackComponent: null
+  }, jsx(FloatingContextualButton, props));
+}

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

@@ -0,0 +1,28 @@
+import { css } from '@emotion/react';
+import { N0, N20 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { contextualMenuTriggerSize } from '../consts';
+import { token } from '@atlaskit/tokens'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4462
+
+export const tableFloatingCellButtonStyles = css`
+  > div {
+    background: ${token('color.background.neutral', N20)};
+    border-radius: ${borderRadius()}px;
+    border: 2px solid ${token('color.border.inverse', N0)};
+    display: flex;
+    height: ${contextualMenuTriggerSize - 2}px;
+    flex-direction: column;
+  }
+  && button {
+    flex-direction: column;
+    padding: 0;
+    height: 100%;
+    display: flex;
+  }
+  && button > span {
+    margin: 0px -4px;
+  }
+  && span {
+    pointer-events: none;
+  }
+`;