@atlaskit/editor-core 174.0.0 → 175.0.0

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

@@ -1,38 +0,0 @@
-import { defineMessages } from 'react-intl-next';
-export default defineMessages({
-  insertColumn: {
-    id: 'fabric.editor.insertColumn',
-    defaultMessage: 'Insert column right',
-    description: 'Inserts a new column to the right of selected column.'
-  },
-  removeColumns: {
-    id: 'fabric.editor.removeColumns',
-    defaultMessage: 'Delete {0, plural, one {column} other {columns}}',
-    description: 'Deletes a table column.'
-  },
-  insertRow: {
-    id: 'fabric.editor.insertRow',
-    defaultMessage: 'Insert row below',
-    description: 'Inserts a new row below the selected row.'
-  },
-  removeRows: {
-    id: 'fabric.editor.removeRows',
-    defaultMessage: 'Delete {0, plural, one {row} other {rows}}',
-    description: 'Deletes a table row.'
-  },
-  cellOptions: {
-    id: 'fabric.editor.cellOptions',
-    defaultMessage: 'Cell options',
-    description: 'Opens a menu with options for the current table cell.'
-  },
-  confirmDeleteLinkedModalOKButton: {
-    id: 'fabric.editor.tables.confirmDeleteLinkedModalOKButton',
-    defaultMessage: 'Remove table and data',
-    description: 'Action button label for confirm modal when deleting a table linked to an extension.'
-  },
-  confirmDeleteLinkedModalMessage: {
-    id: 'fabric.editor.tables.confirmDeleteLinkedModalMessage',
-    defaultMessage: 'Removing this table will break all the charts connected to it.',
-    description: 'Message for confirm modal when deleting a table linked to an extension.'
-  }
-});

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

@@ -1,398 +0,0 @@
-import { css } from '@emotion/react';
-import { tableCellBorderWidth, tableMarginBottom, tableMarginTop } from '@atlaskit/editor-common/styles';
-import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
-import { N40A, B300, N300, R300, N20A, N60A, N0, Y50, Y200 } from '@atlaskit/theme/colors';
-import { tableToolbarColor, tableBorderColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, lineMarkerOffsetFromColumnControls, lineMarkerSize, columnControlsDecorationHeight, columnControlsZIndex, columnControlsSelectedZIndex, resizeHandlerAreaWidth, resizeLineWidth, resizeHandlerZIndex, tableToolbarSize, tableInsertColumnButtonSize, tableDeleteButtonSize, tableControlsSpacing } from './consts';
-import { TableCssClassName as ClassName } from '../types';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
-
-const InsertLine = cssString => css`
-  .${ClassName.CONTROLS_INSERT_LINE} {
-    background: ${tableBorderSelectedColor};
-    display: none;
-    position: absolute;
-    z-index: ${akEditorUnitZIndex};
-    ${cssString}
-  }
-`;
-
-const Marker = props => css`
-  background-color: ${tableBorderColor(props)};
-  position: absolute;
-  height: ${lineMarkerSize}px;
-  width: ${lineMarkerSize}px;
-  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;
-  display: inline-flex;
-  max-width: 100%;
-  text-align: center;
-  margin: 0px;
-  padding: 0px;
-  text-decoration: none;
-  transition: background 0.1s ease-out 0s,
-    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
-  outline: none !important;
-  cursor: none;
-
-  > .${ClassName.CONTROLS_BUTTON_ICON} {
-    display: inline-flex;
-    max-height: 100%;
-    max-width: 100%;
-  }
-  ${cssString}
-`;
-
-export const HeaderButton = (props, cssString) => css`
-  .${ClassName.CONTROLS_BUTTON} {
-    background: ${tableToolbarColor(props)};
-    border: 1px solid ${tableBorderColor(props)};
-    display: block;
-    box-sizing: border-box;
-    padding: 0;
-
-    :focus {
-      outline: none;
-    }
-    ${cssString}
-  }
-
-  .${ClassName.ROW_CONTROLS_BUTTON}::after {
-    content: ' ';
-    background-color: transparent;
-    left: -15px;
-    top: 0;
-    position: absolute;
-    width: 15px;
-    height: 100%;
-    z-index: 1;
-  }
-
-  .active .${ClassName.CONTROLS_BUTTON} {
-    color: ${token('color.icon.inverse', N0)};
-    background-color: ${tableToolbarSelectedColor};
-    border-color: ${tableBorderSelectedColor};
-  }
-`;
-export const HeaderButtonHover = () => css`
-  .${ClassName.CONTROLS_BUTTON}:hover {
-    color: ${token('color.icon.inverse', N0)};
-    background-color: ${tableToolbarSelectedColor};
-    border-color: ${tableBorderSelectedColor};
-    cursor: pointer;
-  }
-`;
-export const HeaderButtonDanger = () => css`
-  .${ClassName.HOVERED_CELL_IN_DANGER} .${ClassName.CONTROLS_BUTTON} {
-    background-color: ${tableToolbarDeleteColor};
-    border-color: ${tableBorderDeleteColor};
-    position: relative;
-    z-index: ${akEditorUnitZIndex};
-  }
-`;
-
-const InsertButton = () => css`
-  .${ClassName.CONTROLS_INSERT_BUTTON_INNER} {
-    position: absolute;
-    z-index: ${akEditorUnitZIndex + 10};
-    bottom: 0;
-  }
-  .${ClassName.CONTROLS_INSERT_BUTTON_INNER},
-    .${ClassName.CONTROLS_INSERT_BUTTON} {
-    height: ${tableInsertColumnButtonSize}px;
-    width: ${tableInsertColumnButtonSize}px;
-  }
-  .${ClassName.CONTROLS_INSERT_BUTTON} {
-    ${Button(`
-      background: ${token('elevation.surface.overlay', 'white')};
-      box-shadow: ${token('elevation.shadow.overlay', `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`)};
-      color: ${token('color.icon', N300)};
-    `)}
-  }
-  .${ClassName.CONTROLS_INSERT_LINE} {
-    display: none;
-  }
-  &:hover .${ClassName.CONTROLS_INSERT_LINE} {
-    display: flex;
-  }
-`;
-
-const InsertButtonHover = () => css`
-  .${ClassName.CONTROLS_INSERT_BUTTON}:hover {
-    background: ${token('color.background.brand.bold', B300)};
-    color: ${token('color.icon.inverse', 'white')};
-    cursor: pointer;
-  }
-`;
-
-export const insertColumnButtonWrapper = css`
-  ${InsertButton()}
-  ${InsertButtonHover()}
-  ${InsertLine(`
-    width: 2px;
-    left: 9px;
-  `)}
-`;
-export const insertRowButtonWrapper = css`
-  ${InsertButton()}
-  ${InsertButtonHover()}
-  ${InsertLine(`
-    height: 2px;
-    top: -11px;
-    left: ${tableInsertColumnButtonSize - 1}px;
-  `)}
-`;
-export const columnControlsLineMarker = props => css`
-  .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}
-    table
-    tr:first-of-type
-    td,
-  .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}
-    table
-    tr:first-of-type
-    th {
-    position: relative;
-
-    &::before {
-      content: ' ';
-      ${Marker(props)};
-      top: -${tableToolbarSize + lineMarkerOffsetFromColumnControls}px;
-      right: -${lineMarkerSize / 2}px;
-    }
-  }
-`;
-export const DeleteButton = css`
-  .${ClassName.CONTROLS_DELETE_BUTTON_WRAP},
-    .${ClassName.CONTROLS_DELETE_BUTTON} {
-    height: ${tableDeleteButtonSize}px;
-    width: ${tableDeleteButtonSize}px;
-  }
-  .${ClassName.CONTROLS_DELETE_BUTTON_WRAP} {
-    .${ClassName.CONTROLS_DELETE_BUTTON} {
-      ${Button(`
-        background: ${token('color.background.neutral', N20A)};
-        color: ${token('color.icon', N300)};
-      `)}
-    }
-  }
-
-  .${ClassName.CONTROLS_DELETE_BUTTON}:hover {
-    background: ${token('color.background.danger.bold', R300)};
-    color: ${token('color.icon.inverse', 'white')};
-    cursor: pointer;
-  }
-`; // TODO: https://product-fabric.atlassian.net/browse/DSP-4451
-
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
-export const OverflowShadow = props => css`
-  .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
-    display: block;
-    height: calc(
-      100% - ${tableMarginTop + tableMarginBottom + tableToolbarSize - 2}px
-    );
-    position: absolute;
-    pointer-events: none;
-    top: ${tableMarginTop + tableToolbarSize - 1}px;
-    z-index: ${akEditorShadowZIndex};
-    width: 8px;
-  }
-  .${ClassName.TABLE_LEFT_SHADOW} {
-    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ${N40A} 100%);
-    left: 0px;
-  }
-  .${ClassName.TABLE_CONTAINER}[data-number-column='true'] > :not(.${ClassName.TABLE_STICKY_SHADOW}).${ClassName.TABLE_LEFT_SHADOW} {
-    left: ${akEditorTableNumberColumnWidth - 1}px;
-  }
-  .${ClassName.TABLE_RIGHT_SHADOW} {
-    background: linear-gradient(
-      to right,
-      rgba(99, 114, 130, 0) 0,
-      ${N40A} 100%
-    );
-    left: calc(100% + 2px);
-  }
-  .${ClassName.WITH_CONTROLS} {
-    .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
-      height: calc(100% - ${tableMarginTop + tableMarginBottom - 2}px);
-      top: ${tableMarginTop - 1}px;
-    }
-    .${ClassName.TABLE_LEFT_SHADOW} {
-      border-left: 1px solid ${tableBorderColor(props)};
-    }
-  }
-  .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY} {
-    .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
-      top: ${tableControlsSpacing}px;
-    }
-  }
-`;
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
-const columnHeaderButton = (props, cssString) => css`
-  background: ${tableToolbarColor(props)};
-  border: 1px solid ${tableBorderColor(props)};
-  display: block;
-  box-sizing: border-box;
-  padding: 0;
-
-  :focus {
-    outline: none;
-  }
-
-  ${cssString}
-`;
-
-const columnHeaderButtonSelected = css`
-  color: ${token('color.text.inverse', N0)};
-  background-color: ${tableToolbarSelectedColor};
-  border-color: ${tableBorderSelectedColor};
-  z-index: ${columnControlsSelectedZIndex};
-`;
-export const columnControlsDecoration = props => css`
-  .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-    display: none;
-    cursor: pointer;
-    position: absolute;
-    width: calc(100% + ${tableCellBorderWidth * 2}px);
-    left: -1px;
-    top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
-    height: ${columnControlsDecorationHeight}px;
-
-    &::after {
-      content: ' ';
-
-      ${columnHeaderButton(props, `
-        border-right: ${tableCellBorderWidth}px solid ${tableBorderColor(props)};
-        border-bottom: none;
-        height: ${tableToolbarSize}px;
-        width: 100%;
-        position: absolute;
-        top: ${columnControlsDecorationHeight - tableToolbarSize}px;
-        left: 0px;
-        z-index: ${columnControlsZIndex};
-      `)}
-    }
-  }
-
-  .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-    display: block;
-  }
-
-  table
-    tr:first-of-type
-    td.${ClassName.TABLE_CELL},
-    table
-    tr:first-of-type
-    th.${ClassName.TABLE_HEADER_CELL} {
-    &.${ClassName.COLUMN_SELECTED},
-      &.${ClassName.HOVERED_COLUMN},
-      &.${ClassName.HOVERED_TABLE} {
-      .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-        ${columnHeaderButtonSelected};
-      }
-
-      &.${ClassName.HOVERED_CELL_IN_DANGER}
-        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-        background-color: ${tableToolbarDeleteColor};
-        border: 1px solid ${tableBorderDeleteColor};
-        border-bottom: none;
-        z-index: ${akEditorUnitZIndex * 100};
-      }
-    }
-  }
-
-  .${ClassName.TABLE_SELECTED}
-    table
-    tr:first-of-type
-    td.${ClassName.TABLE_CELL},
-    .${ClassName.TABLE_SELECTED}
-    table
-    tr:first-of-type
-    th.${ClassName.TABLE_HEADER_CELL} {
-    .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-      ${columnHeaderButtonSelected};
-    }
-  }
-`;
-export const hoveredDeleteButton = css`
-  .${ClassName.TABLE_CONTAINER}.${ClassName.HOVERED_DELETE_BUTTON} {
-    .${ClassName.SELECTED_CELL},
-      .${ClassName.COLUMN_SELECTED},
-      .${ClassName.HOVERED_CELL} {
-      border: 1px solid ${tableBorderDeleteColor};
-    }
-    .${ClassName.SELECTED_CELL}::after {
-      background: ${tableCellDeleteColor};
-    }
-  }
-`;
-export const hoveredCell = css`
-  :not(.${ClassName.IS_RESIZING})
-    .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
-    .${ClassName.HOVERED_CELL} {
-      position: relative;
-      border: 1px solid ${tableBorderSelectedColor};
-    }
-  }
-`;
-export const hoveredWarningCell = css`
-  :not(.${ClassName.IS_RESIZING})
-    .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
-    td.${ClassName.HOVERED_CELL_WARNING} {
-      background-color: ${token('color.background.warning', Y50)} !important; // We need to override the background-color added to the cell
-      border: 1px solid ${token('color.border.warning', Y200)};
-    }
-  }
-`;
-export const resizeHandle = css`
-  .${ClassName.TABLE_CONTAINER} {
-    .${ClassName.RESIZE_HANDLE_DECORATION} {
-      background-color: transparent;
-      position: absolute;
-      width: ${resizeHandlerAreaWidth}px;
-      height: 100%;
-      top: 0;
-      right: -${resizeHandlerAreaWidth / 2}px;
-      cursor: col-resize;
-      z-index: ${resizeHandlerZIndex};
-    }
-
-    td.${ClassName.WITH_RESIZE_LINE}, th.${ClassName.WITH_RESIZE_LINE} {
-      .${ClassName.RESIZE_HANDLE_DECORATION}::after {
-        content: ' ';
-        right: ${(resizeHandlerAreaWidth - resizeLineWidth) / 2}px;
-        position: absolute;
-        width: ${resizeLineWidth}px;
-        height: calc(100% + 1px);
-        background-color: ${tableBorderSelectedColor};
-        z-index: ${columnControlsZIndex * 2};
-        top: 0;
-      }
-    }
-
-    table
-      tr:first-of-type
-      th.${ClassName.WITH_RESIZE_LINE}
-      .${ClassName.RESIZE_HANDLE_DECORATION}::after,
-      table
-      tr:first-of-type
-      td.${ClassName.WITH_RESIZE_LINE}
-      .${ClassName.RESIZE_HANDLE_DECORATION}::after {
-      top: -${tableToolbarSize + tableCellBorderWidth}px;
-      height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
-    }
-  }
-`;

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

@@ -1,65 +0,0 @@
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findTable, getSelectionRect } from '@atlaskit/editor-tables/utils';
-export function getSelectedTableInfo(selection) {
-  let map;
-  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,
-    totalRowCount,
-    totalColumnCount
-  };
-}
-export function getSelectedCellInfo(selection) {
-  let horizontalCells = 1;
-  let verticalCells = 1;
-  let totalCells = 1;
-  const {
-    table,
-    map,
-    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,
-    horizontalCells,
-    verticalCells,
-    totalCells
-  };
-}
-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);
-};

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

@@ -1,84 +0,0 @@
-import { NodeRange } from 'prosemirror-model';
-import { findWrapping } from 'prosemirror-transform';
-import { findTable } from '@atlaskit/editor-tables/utils';
-
-const bail = () => ({
-  tableIsCollapsible: false
-});
-/**
- * Checks whether we can wrap the selected table into an expand via
- * prosemirror-transform's `findWrapping` helper
- */
-
-
-export const isTableCollapsible = tr => {
-  const selection = tr.selection;
-  const schema = tr.doc.type.schema;
-  const nodePos = findTable(selection);
-
-  if (!nodePos) {
-    return bail();
-  }
-
-  const expand = schema.nodes.expand;
-  const {
-    node,
-    pos
-  } = nodePos;
-  const $pos = tr.doc.resolve(pos);
-  const range = new NodeRange($pos, tr.doc.resolve(pos + node.nodeSize), $pos.depth);
-
-  if (!range) {
-    return bail();
-  }
-
-  const canWrap = findWrapping(range, expand);
-
-  if (canWrap === null) {
-    return bail();
-  }
-
-  return {
-    tableIsCollapsible: true,
-    range,
-
-    /**
-     * Do we ever want to deal with the result of `findWrapping`? Probably not,
-     * but we have it anyway.
-     */
-    findWrappingRes: canWrap
-  };
-};
-/**
- * Collapses the selected table into an expand given a transaction via
- * `Transform.wrap`.
- *
- * Will return undefined if it cannot determine the relevant table from a
- * selection, or if the table itself isn't collapsible.
- *
- * @param tr
- * @returns Transaction | undefined
- */
-
-export const collapseSelectedTable = tr => {
-  const canCollapse = isTableCollapsible(tr);
-  const expand = tr.doc.type.schema.nodes.expand;
-
-  if (!canCollapse.range || !canCollapse.tableIsCollapsible) {
-    return undefined;
-  }
-  /**
-   * TODO: add attrs: { __expanded: false } when
-   * - it is working with new collab (CEMS-1204)
-   * - synchrony is no longer used
-   *
-   *   (via confluence-frontend, "this feature" referencing allowInteractiveExpand)
-   *   `we can NEVER allow this feature to be enabled for the synchrony-powered editor
-   */
-
-
-  tr.wrap(canCollapse.range, [{
-    type: expand
-  }]).setMeta('scrollIntoView', true);
-  return tr;
-};