@atlaskit/editor-core 174.0.0 → 175.0.0

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

@@ -1,198 +0,0 @@
-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 { 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.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

@@ -1,193 +0,0 @@
-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 '../../../../ui/ToolbarButton';
-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();
-
-    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();
-    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

@@ -1,96 +0,0 @@
-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
-      },
-      contentEditable: false
-    }, /*#__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

@@ -1,91 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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
-      }));
-    })));
-  }
-
-}