@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

package/src/plugins/table/ui/LayoutButton/index.tsx

@@ -0,0 +1,220 @@
+import React, { createRef } from 'react';
+
+import classnames from 'classnames';
+import { EditorView } from 'prosemirror-view';
+import { WrappedComponentProps, injectIntl } from 'react-intl-next';
+
+import { TableLayout } from '@atlaskit/adf-schema';
+import { Popup } from '@atlaskit/editor-common/ui';
+import type { PopupPosition } 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 { RowStickyState } from '../../pm-plugins/sticky-headers';
+import { findDomRefAtPos } from 'prosemirror-utils';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+
+export interface Props {
+  editorView: EditorView;
+  targetRef?: HTMLElement;
+  mountPoint?: HTMLElement;
+  boundariesElement?: HTMLElement;
+  scrollableElement?: HTMLElement;
+  isResizing?: boolean;
+  layout?: TableLayout;
+  stickyHeader?: RowStickyState;
+  editorAnalyticsAPI?: EditorAnalyticsAPI;
+}
+
+const addPopupOffset = (pos: PopupPosition) => ({
+  ...pos,
+
+  // add 12 pixels to align y position with
+  //the columns controls
+  top: pos.top ? pos.top + 12 : undefined,
+});
+
+const getMessage = (layout: TableLayout) => {
+  switch (layout) {
+    case 'default':
+      return commonMessages.layoutWide;
+    case 'wide':
+      return commonMessages.layoutFullWidth;
+    default:
+      return commonMessages.layoutFixedWidth;
+  }
+};
+
+class LayoutButton extends React.Component<Props & WrappedComponentProps, any> {
+  static displayName = 'LayoutButton';
+  private stickyButtonRef = createRef<HTMLDivElement>();
+
+  private resizeObserver: 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`;
+      }
+    });
+  });
+
+  getTitle() {
+    const {
+      intl: { formatMessage },
+      layout = 'default',
+    } = this.props;
+    return formatMessage(getMessage(layout));
+  }
+
+  toolbarButton() {
+    const { isResizing, layout = 'default' } = this.props;
+    const title = this.getTitle();
+
+    return (
+      <div
+        className={classnames(ClassName.LAYOUT_BUTTON, {
+          [ClassName.IS_RESIZING]: isResizing,
+        })}
+      >
+        <ToolbarButton
+          title={title}
+          onClick={this.handleClick}
+          iconBefore={
+            layout === 'full-width' ? (
+              <CollapseIcon label={title} />
+            ) : (
+              <ExpandIcon label={title} />
+            )
+          }
+        />
+      </div>
+    );
+  }
+
+  getStickyTargetRef(pos: number): Node | null {
+    const { editorView } = this.props;
+    const domAtPos = editorView.domAtPos.bind(editorView);
+    const node = findDomRefAtPos(pos, domAtPos) as HTMLElement;
+    return node.dataset['headerRow'] && node.classList.contains('sticky')
+      ? node
+      : null;
+  }
+
+  renderSticky(button: JSX.Element, targetRef: Node, tableRef: Node) {
+    // 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 (
+      <div
+        ref={this.stickyButtonRef}
+        aria-label={title}
+        style={{
+          position: 'fixed',
+          top: pos.top + 22,
+          left: tablePos.right,
+        }}
+      >
+        {button}
+      </div>
+    );
+  }
+
+  renderPopup(button: JSX.Element) {
+    const {
+      mountPoint,
+      boundariesElement,
+      scrollableElement,
+      targetRef,
+    } = this.props;
+
+    if (!targetRef) {
+      return null;
+    }
+
+    // const title = this.getTitle();
+    const title = 'TODO MISSING TITLE';
+
+    return (
+      <Popup
+        ariaLabel={title}
+        target={targetRef}
+        alignY="start"
+        alignX="end"
+        onPositionCalculated={addPopupOffset}
+        stick={true}
+        mountTo={mountPoint}
+        boundariesElement={boundariesElement}
+        scrollableElement={scrollableElement}
+        forcePlacement={true}
+      >
+        {button}
+      </Popup>
+    );
+  }
+
+  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: Props) {
+    const { targetRef, layout, isResizing, stickyHeader } = this.props;
+    return (
+      stickyHeader !== nextProps.stickyHeader ||
+      targetRef !== nextProps.targetRef ||
+      layout !== nextProps.layout ||
+      isResizing !== nextProps.isResizing
+    );
+  }
+
+  private handleClick = () => {
+    const { state, dispatch } = this.props.editorView;
+    toggleTableLayoutWithAnalytics(this.props.editorAnalyticsAPI)(
+      state,
+      dispatch,
+    );
+  };
+}
+
+export default injectIntl(LayoutButton);

package/src/plugins/table/ui/TableFloatingControls/CornerControls/index.tsx

@@ -0,0 +1,105 @@
+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 { EditorView } from 'prosemirror-view';
+
+import { clearHoverSelection, hoverTable } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+
+export interface Props {
+  editorView: EditorView;
+  tableRef?: HTMLTableElement;
+  isInDanger?: boolean;
+  isResizing?: boolean;
+  hoveredRows?: number[];
+  isHeaderColumnEnabled?: boolean;
+  isHeaderRowEnabled?: boolean;
+  stickyTop?: number;
+}
+
+export default class CornerControls extends Component<Props, any> {
+  render() {
+    const {
+      isInDanger,
+      tableRef,
+      isHeaderColumnEnabled,
+      isHeaderRowEnabled,
+    } = this.props;
+    if (!tableRef) {
+      return null;
+    }
+    const isActive = this.isActive();
+
+    return (
+      <div
+        className={classnames(ClassName.CORNER_CONTROLS, {
+          active: isActive,
+          sticky: this.props.stickyTop !== undefined,
+        })}
+        style={{
+          top:
+            this.props.stickyTop !== undefined
+              ? `${this.props.stickyTop}px`
+              : undefined,
+        }}
+      >
+        <button
+          type="button"
+          className={classnames(ClassName.CONTROLS_CORNER_BUTTON, {
+            danger: isActive && isInDanger,
+          })}
+          onClick={this.selectTable}
+          onMouseOver={this.hoverTable}
+          onMouseOut={this.clearHoverSelection}
+        />
+
+        {!isHeaderRowEnabled && (
+          <div className={ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER}>
+            <div className={ClassName.CONTROLS_INSERT_MARKER} />
+          </div>
+        )}
+        {!isHeaderColumnEnabled && (
+          <div className={ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER}>
+            <div className={ClassName.CONTROLS_INSERT_MARKER} />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  private 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)
+    );
+  };
+
+  private clearHoverSelection = () => {
+    const { state, dispatch } = this.props.editorView;
+    clearHoverSelection()(state, dispatch);
+  };
+
+  private selectTable = () => {
+    const { state, dispatch } = this.props.editorView;
+    dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+  };
+
+  private hoverTable = () => {
+    const { state, dispatch } = this.props.editorView;
+    hoverTable()(state, dispatch);
+  };
+}

package/src/plugins/table/ui/TableFloatingControls/NumberColumn/index.tsx

@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+
+import { Selection } from 'prosemirror-state';
+import { isRowSelected } from '@atlaskit/editor-tables/utils';
+import { EditorView } from 'prosemirror-view';
+
+import { clearHoverSelection } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+import { getRowHeights } from '../../../utils';
+
+export interface Props {
+  editorView: EditorView;
+  tableRef: HTMLTableElement;
+  tableActive?: boolean;
+  hoverRows: (rows: number[], danger?: boolean) => void;
+  hoveredRows?: number[];
+  selectRow: (row: number, expand: boolean) => void;
+  hasHeaderRow?: boolean;
+  isInDanger?: boolean;
+  isResizing?: boolean;
+  stickyTop?: number;
+}
+
+export default class NumberColumn extends Component<Props, any> {
+  render() {
+    const { tableRef, hasHeaderRow } = this.props;
+    const rowHeights = getRowHeights(tableRef);
+
+    return (
+      <div
+        className={ClassName.NUMBERED_COLUMN}
+        style={{
+          marginTop:
+            hasHeaderRow && this.props.stickyTop !== undefined
+              ? rowHeights[0]
+              : undefined,
+        }}
+      >
+        {rowHeights.map((rowHeight, index) => (
+          <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}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  private hoverRows = (index: number) =>
+    this.props.tableActive ? this.props.hoverRows([index]) : null;
+
+  private selectRow = (
+    index: number,
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+  ) => {
+    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);
+  };
+
+  private clearHoverSelection = () => {
+    const { tableActive, editorView } = this.props;
+    if (tableActive) {
+      const { state, dispatch } = editorView;
+      clearHoverSelection()(state, dispatch);
+    }
+  };
+
+  private getClassNames = (index: number) => {
+    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(' ');
+  };
+}

package/src/plugins/table/ui/TableFloatingControls/RowControls/index.tsx

@@ -0,0 +1,119 @@
+import React, { Component } from 'react';
+
+import { EditorView } from 'prosemirror-view';
+
+import { clearHoverSelection } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+import {
+  getRowClassNames,
+  getRowHeights,
+  getRowsParams,
+  RowParams,
+} from '../../../utils';
+import { tableControlsSpacing, tableToolbarSize } from '../../consts';
+
+export interface Props {
+  editorView: EditorView;
+  tableRef: HTMLTableElement;
+  selectRow: (row: number, expand: boolean) => void;
+  hoverRows: (rows: number[], danger?: boolean) => void;
+  hoveredRows?: number[];
+  isInDanger?: boolean;
+  isResizing?: boolean;
+  insertRowButtonIndex?: number;
+  stickyTop?: number;
+}
+
+export default class RowControls extends Component<Props> {
+  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 (
+      <div className={ClassName.ROW_CONTROLS}>
+        <div className={ClassName.ROW_CONTROLS_INNER}>
+          {rowsParams.map(
+            ({ startIndex, endIndex, height }: RowParams, 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 (
+                <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,
+                  }}
+                >
+                  <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}
+                  />
+
+                  <div className={ClassName.CONTROLS_INSERT_MARKER} />
+                </div>
+              );
+            },
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  private clearHoverSelection = () => {
+    const { state, dispatch } = this.props.editorView;
+    clearHoverSelection()(state, dispatch);
+  };
+}