@atlaskit/editor-core 166.0.2 → 167.0.0

package/dist/es2019/plugins/table/pm-plugins/main.js

@@ -22,14 +22,12 @@ import { transformSliceToRemoveOpenBodiedExtension } from '../../extension/actio
 import { insideTable } from '../../../utils';
 import { isHeaderRowRequired } from '../utils/paste';
 let isBreakoutEnabled;
-let isDynamicTextSizingEnabled;
 let isFullWidthModeEnabled;
 let wasFullWidthModeEnabled;
-export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, dynamicTextSizing, breakoutEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled) => {
+export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, breakoutEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled) => {
   var _window;
 
   isBreakoutEnabled = breakoutEnabled;
-  isDynamicTextSizingEnabled = dynamicTextSizing;
   isFullWidthModeEnabled = fullWidthModeEnabled;
   wasFullWidthModeEnabled = previousFullWidthModeEnabled;
   const state = createPluginState(dispatch, {
@@ -256,7 +254,6 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         ...tableCellNodeview,
         table: (node, view, getPos) => createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, {
           isBreakoutEnabled,
-          dynamicTextSizing: isDynamicTextSizingEnabled,
           isFullWidthModeEnabled,
           wasFullWidthModeEnabled
         })

package/dist/es2019/plugins/table/pm-plugins/safari-delete-composition-text-issue-workaround.js

@@ -0,0 +1,106 @@
+/**
+ * Fix an issue that composition text replacement in Safari removes empty nodes during text composition text deletion.
+ * https://github.com/ProseMirror/prosemirror/issues/934
+ * We will remove this plugin when Webkit fix the problem itself.
+ */
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+export const tableSafariDeleteCompositionTextIssueWorkaroundKey = new PluginKey('tableSafariDeleteCompositionTextIssueWorkaround');
+export const createPlugin = () => {
+  return new SafePlugin({
+    key: tableSafariDeleteCompositionTextIssueWorkaroundKey,
+    state: {
+      init: () => ({
+        renderSpan: false,
+        decorations: DecorationSet.empty
+      }),
+      apply: (tr, value) => {
+        const renderSpan = tr.getMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey);
+
+        if (typeof renderSpan === 'undefined') {
+          return value;
+        }
+
+        let decorations;
+
+        if (renderSpan) {
+          // Find position of the first text node in case it has multiple text nodes created by Japanese IME
+          const {
+            $from
+          } = tr.selection;
+          const pos = $from.before($from.depth);
+          const spanDecoration = Decoration.widget(pos, () => {
+            const spanElement = document.createElement('span');
+            return spanElement;
+          });
+          decorations = DecorationSet.create(tr.doc, [spanDecoration]);
+        } else {
+          decorations = DecorationSet.empty;
+        }
+
+        return {
+          renderSpan,
+          decorations
+        };
+      }
+    },
+    props: {
+      decorations: state => tableSafariDeleteCompositionTextIssueWorkaroundKey.getState(state).decorations,
+      handleDOMEvents: {
+        beforeinput: (view, event) => {
+          if ((event === null || event === void 0 ? void 0 : event.inputType) !== 'deleteCompositionText') {
+            return false;
+          }
+
+          const selection = window.getSelection();
+
+          if (!selection || selection.rangeCount <= 0 || selection.type !== 'Range') {
+            return false;
+          }
+
+          const range = selection.getRangeAt(0);
+          const {
+            startContainer,
+            endContainer,
+            endOffset,
+            startOffset
+          } = range;
+          /**
+           * On Safari when composition text is deleted, it deletes any empty elements it finds up the dom tree. Prosemirror can sometimes be confused by this
+           * and will think that we meant to delete those elements. This fix forces the resulting node to not be empty.
+           * The condition here checks to see if the entire text node is about to be swapped inside of an element
+           */
+
+          if (startContainer.nodeType === Node.TEXT_NODE && startContainer === endContainer && startOffset === 0 && endOffset === startContainer.length) {
+            const {
+              tr
+            } = view.state;
+            tr.setMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey, true);
+            view.dispatch(tr);
+          }
+
+          return false;
+        },
+        input: (view, event) => {
+          if ((event === null || event === void 0 ? void 0 : event.inputType) !== 'deleteCompositionText') {
+            return false;
+          }
+
+          const selection = window.getSelection();
+
+          if (!selection) {
+            return false;
+          }
+
+          const {
+            tr
+          } = view.state;
+          tr.setMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey, false);
+          view.dispatch(tr);
+          return false;
+        }
+      }
+    }
+  });
+};

package/dist/es2019/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -11,7 +11,7 @@ import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import { currentColWidth, getLayoutSize, getResizeState, pointsAtCell, resizeColumn, updateControls } from './utils';
 import { ACTION_SUBJECT, addAnalytics, EVENT_TYPE, TABLE_ACTION } from '../../../analytics';
-export const handleMouseDown = (view, event, localResizeHandlePos, dynamicTextSizing) => {
+export const handleMouseDown = (view, event, localResizeHandlePos) => {
   const {
     state,
     dispatch
@@ -39,9 +39,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, dynamicTextSi
 
   const containerWidth = widthPluginKey.getState(state);
   const parentWidth = getParentNodeWidth(start, state, containerWidth);
-  let maxSize = parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {
-    dynamicTextSizing
-  });
+  let maxSize = parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
 
   if (originalTable.attrs.isNumberColumnEnabled) {
     maxSize -= akEditorTableNumberColumnWidth;

package/dist/es2019/plugins/table/pm-plugins/table-resizing/plugin.js

@@ -7,14 +7,12 @@ import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import { getResizeCellPos } from './utils';
 export function createPlugin(dispatch, {
-  lastColumnResizable = true,
-  dynamicTextSizing = false
+  lastColumnResizable = true
 }) {
   return new SafePlugin({
     key: pluginKey,
     state: createPluginState(dispatch, {
       lastColumnResizable,
-      dynamicTextSizing,
       resizeHandlePos: null,
       dragging: null,
       lastClick: null
@@ -42,7 +40,7 @@ export function createPlugin(dispatch, {
           } = getPluginState(state);
 
           if (resizeHandlePos !== null && !dragging) {
-            if (handleMouseDown(view, event, resizeHandlePos, dynamicTextSizing)) {
+            if (handleMouseDown(view, event, resizeHandlePos)) {
               const {
                 state,
                 dispatch

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/misc.js

@@ -12,7 +12,6 @@ export const tableLayoutToSize = {
 
 export function getLayoutSize(tableLayout, containerWidth = 0, options) {
   const {
-    dynamicTextSizing,
     isFullWidthModeEnabled
   } = options;
 
@@ -26,7 +25,7 @@ export function getLayoutSize(tableLayout, containerWidth = 0, options) {
     return parseInt(calculatedTableWidth, 10);
   }
 
-  if (dynamicTextSizing && tableLayout === 'default') {
+  if (tableLayout === 'default') {
     return getDefaultLayoutMaxWidth(containerWidth);
   }
 
@@ -77,14 +76,11 @@ export const getTableMaxWidth = ({
   table,
   tableStart,
   state,
-  layout,
-  dynamicTextSizing
+  layout
 }) => {
   const containerWidth = widthPluginKey.getState(state);
   const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
-  let maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {
-    dynamicTextSizing
-  });
+  let maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
 
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= akEditorTableNumberColumnWidth;

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/resize-state.js

@@ -222,7 +222,7 @@ export const normaliseTableLayout = input => {
       return 'default';
   }
 };
-export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, dynamicTextSizing) => {
+export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos) => {
   const {
     totalRowCount,
     totalColumnCount,
@@ -245,8 +245,7 @@ export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, dyna
     table: table.node,
     tableStart: table.start,
     state,
-    layout,
-    dynamicTextSizing
+    layout
   });
   const resizeState = getResizeState({
     minWidth: tableCellMinWidth,

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/scale-table.js

@@ -15,19 +15,16 @@ export const scale = (tableRef, options, domAtPos) => {
     node,
     containerWidth,
     previousContainerWidth,
-    dynamicTextSizing,
     prevNode,
     start,
     isBreakoutEnabled,
     layoutChanged
   } = options;
   const maxSize = getLayoutSize(node.attrs.layout, containerWidth, {
-    dynamicTextSizing,
     isBreakoutEnabled
   });
   const prevTableWidth = getTableWidth(prevNode);
   const previousMaxSize = getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
-    dynamicTextSizing,
     isBreakoutEnabled
   });
   let newWidth = maxSize; // adjust table width if layout is updated

package/dist/es2019/plugins/table/transforms/column-width.js

@@ -140,8 +140,7 @@ export const rescaleColumns = (table, view) => tr => {
     table: table.node,
     tableStart: table.start,
     state,
-    layout,
-    dynamicTextSizing: true
+    layout
   });
   let resizeState = getResizeState({
     minWidth: tableCellMinWidth,

package/dist/es2019/plugins/table/transforms/fix-tables.js

@@ -117,9 +117,7 @@ export const fixAutoSizedTable = (view, tableNode, tableRef, tablePos, opts) =>
   const colWidths = parseDOMColumnWidths(domAtPos, tableNode, tableStart, tableRef);
   const totalContentWidth = colWidths.reduce((acc, current) => acc + current, 0);
   const tableLayout = getLayoutBasedOnWidth(totalContentWidth);
-  const maxLayoutSize = getLayoutSize(tableLayout, opts.containerWidth, {
-    dynamicTextSizing: opts.dynamicTextSizing
-  }); // Content width will generally not meet the constraints of the layout
+  const maxLayoutSize = getLayoutSize(tableLayout, opts.containerWidth, {}); // Content width will generally not meet the constraints of the layout
   // whether it be below or above, so we scale our columns widths
   // to meet these requirements
 

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

@@ -2,11 +2,13 @@ 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: ${N20};
+    background: ${token('color.background.neutral', N20)};
     border-radius: ${borderRadius()}px;
-    border: 2px solid ${N0};
+    border: 2px solid ${token('color.border.inverse', N0)};
     display: flex;
     height: ${contextualMenuTriggerSize - 2}px;
     flex-direction: column;

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

@@ -4,11 +4,12 @@ import { N60A, N90 } from '@atlaskit/theme/colors';
 import { contextualMenuDropdownWidth } from '../consts';
 import { TableCssClassName as ClassName } from '../../types';
 import { borderRadius } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 export const tablePopupStyles = css`
   .${ClassName.CONTEXTUAL_SUBMENU} {
     border-radius: ${borderRadius()}px;
-    background: white;
-    box-shadow: 0 4px 8px -2px ${N60A}, 0 0 1px ${N60A};
+    background: ${token('elevation.surface.overlay', 'white')};
+    box-shadow: ${token('elevation.shadow.overlay', `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`)};
     display: block;
     position: absolute;
     top: 0;
@@ -36,7 +37,7 @@ export const tablePopupStyles = css`
       content: '›';
       margin-left: 4px;
       line-height: 20px;
-      color: ${N90};
+      color: ${token('color.icon', N90)};
     }
   }
 `;

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

@@ -7,6 +7,7 @@ import { scrollbarStyles } from '../../../ui/styles';
 import { TableCssClassName as ClassName } from '../types';
 import { tableCellBackgroundColor, tableToolbarColor, tableBorderColor, tableCellSelectedColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, tableBorderRadiusSize, tablePadding, tableScrollbarOffset, resizeHandlerAreaWidth, resizeLineWidth, tableToolbarSize, tableInsertColumnButtonSize, tableControlsSpacing, tableTextColor, stickyRowZIndex, columnControlsDecorationHeight, stickyRowOffsetTop, stickyHeaderBorderBottomWidth } from './consts';
 import { HeaderButton, HeaderButtonHover, HeaderButtonDanger, insertColumnButtonWrapper, insertRowButtonWrapper, columnControlsLineMarker, DeleteButton, OverflowShadow, columnControlsDecoration, hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, InsertMarker } from './ui-styles';
+import { token } from '@atlaskit/tokens';
 const cornerControlHeight = tableToolbarSize + 1;
 const rangeSelectionStyles = `
 .${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} table tbody tr {
@@ -39,20 +40,21 @@ const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
       margin-bottom: ${columnControlsDecorationHeight}px;
     }
   }
-}`;
+}`; // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
+
 export const tableStyles = props => {
   var _props$featureFlags;
 
   return css`
   .${ClassName.LAYOUT_BUTTON} button {
-    background: ${N20A};
-    color: ${N300};
+    background: ${token('color.background.neutral', N20A)};
+    color: ${token('color.icon', N300)};
     cursor: none;
   }
 
   .${ClassName.LAYOUT_BUTTON}:not(.${ClassName.IS_RESIZING}) button:hover {
-    background: ${B300};
-    color: white !important;
+    background: ${token('color.background.neutral.hovered', B300)};
+    color: ${token('color.icon', 'white')} !important;
     cursor: pointer;
   }
 
@@ -93,14 +95,13 @@ export const tableStyles = props => {
     /* Ends Delete button */
 
     /* sticky styles */
-    .${ClassName.TABLE_STICKY} .${ClassName.NUMBERED_COLUMN} .${ClassName.NUMBERED_COLUMN_BUTTON}:first-child {
+    .${ClassName.TABLE_STICKY} .${ClassName.NUMBERED_COLUMN} .${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
       margin-top: ${stickyRowOffsetTop + 2}px;
       width: ${akEditorTableNumberColumnWidth}px;
 
       position: fixed !important;
       z-index: ${akEditorStickyHeaderZIndex} !important;
-
-      box-shadow: 0px -${stickyRowOffsetTop}px white;
+      box-shadow: 0px -${stickyRowOffsetTop}px ${token('elevation.surface', 'white')};
       border-right: 0 none;
       /* top set by NumberColumn component */
     }
@@ -109,7 +110,7 @@ export const tableStyles = props => {
       position: fixed !important;
       /* needs to be above row controls */
       z-index: ${akEditorSmallZIndex} !important;
-      background: white;
+      background: ${token('elevation.surface', 'white')};
 
       width: ${tableToolbarSize}px;
       height: ${tableToolbarSize}px;
@@ -133,13 +134,14 @@ export const tableStyles = props => {
       position: fixed !important;
       z-index: ${akEditorStickyHeaderZIndex} !important;
       display: flex;
-      border-left: ${tableToolbarSize}px solid white;
+      border-left: ${tableToolbarSize}px solid
+        ${token('elevation.surface', 'white')};
       margin-left: -${tableToolbarSize}px;
     }
 
     .${ClassName.TABLE_STICKY} col:first-of-type {
       /* moving rows out of a table layout does weird things in Chrome */
-      border-right: 1px solid green;
+      border-right: 1px solid ${token('elevation.surface', 'green')};
     }
 
     tr.sticky {
@@ -156,12 +158,12 @@ export const tableStyles = props => {
       grid-auto-flow: column;
 
       /* background for where controls apply */
-      background: white;
+      background: ${token('elevation.surface', 'white')};
       box-sizing: content-box;
 
       margin-top: 2px;
 
-      box-shadow: 0 6px 4px -4px ${N40A};
+      box-shadow: ${token('elevation.shadow.overflow', `0 6px 4px -4px ${N40A}`)};
       margin-left: -1px;
 
       &.no-pointer-events {
@@ -191,7 +193,7 @@ export const tableStyles = props => {
     }
 
     /* add left edge for first cell */
-    .${ClassName.TABLE_STICKY} tr.sticky > th:first-child {
+    .${ClassName.TABLE_STICKY} tr.sticky > th:first-of-type {
       margin-left: 0px;
     }
 
@@ -241,12 +243,13 @@ export const tableStyles = props => {
 
     .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY}
       .${ClassName.NUMBERED_COLUMN}
-      .${ClassName.NUMBERED_COLUMN_BUTTON}:first-child {
+      .${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
       margin-top: ${tableControlsSpacing + 2}px;
     }
 
     .${ClassName.CORNER_CONTROLS}.sticky {
-      border-top: ${tableControlsSpacing - tableToolbarSize + 2}px solid white;
+      border-top: ${tableControlsSpacing - tableToolbarSize + 2}px solid
+        ${token('elevation.surface', 'white')};
     }
 
     ${(_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : ''}
@@ -410,7 +413,7 @@ export const tableStyles = props => {
           right: 0;
           bottom: 0;
         }
-        .${ClassName.CONTROLS_BUTTON_OVERLAY}:first-child {
+        .${ClassName.CONTROLS_BUTTON_OVERLAY}:first-of-type {
           top: 0;
         }
       `)}
@@ -467,7 +470,7 @@ export const tableStyles = props => {
           background-color: ${tableToolbarSelectedColor};
           position: relative;
           z-index: ${akEditorUnitZIndex};
-          color: ${N0};
+          color: ${token('color.text.inverse', N0)};
         }
       }
     }
@@ -481,13 +484,13 @@ export const tableStyles = props => {
         background-color: ${tableToolbarSelectedColor};
         position: relative;
         z-index: ${akEditorUnitZIndex};
-        color: ${N0};
+        color: ${token('color.text.inverse', N0)};
       }
       .${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
         background-color: ${tableToolbarDeleteColor};
         border: 1px solid ${tableBorderDeleteColor};
         border-left: 0;
-        color: ${R500};
+        color: ${token('color.text.inverse', R500)};
         position: relative;
         z-index: ${akEditorUnitZIndex};
       }
@@ -509,12 +512,12 @@ export const tableStyles = props => {
        * cell when center/right aligned.
        */
       th.${ClassName.TABLE_HEADER_CELL} > .fabric-editor-block-mark {
-        > h1:first-child,
-        > h2:first-child,
-        > h3:first-child,
-        > h4:first-child,
-        > h5:first-child,
-        > h6:first-child {
+        > h1:first-of-type,
+        > h2:first-of-type,
+        > h3:first-of-type,
+        > h4:first-of-type,
+        > h5:first-of-type,
+        > h6:first-of-type {
           margin-top: 0;
         }
       }
@@ -532,7 +535,6 @@ export const tableStyles = props => {
         right: 0;
         top: 0;
         bottom: 0;
-        opacity: 0.3;
         pointer-events: none;
       }
       .${ClassName.SELECTED_CELL} {

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

@@ -1,4 +1,4 @@
-import { B200, B300, B75, N0, N20, R50, R400, R75, DN400, N200, DN30 } from '@atlaskit/theme/colors';
+import { B200, B300, N0, N20, R400, R75, DN400, N200, DN30 } from '@atlaskit/theme/colors';
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { akEditorTableBorder, akEditorTableBorderDark, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { token } from '@atlaskit/tokens';
@@ -7,30 +7,33 @@ import { themed } from '@atlaskit/theme/components';
 /**
  * Basic colors added to prevent content overflow in table cells.
  */
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4135
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 
 export const tableCellBackgroundColor = themed({
   light: N0,
   dark: DN30
 });
 export const tableToolbarColor = themed({
-  light: token('color.background.neutral', akEditorTableToolbar),
-  dark: token('color.background.neutral', akEditorTableToolbarDark)
+  light: akEditorTableToolbar,
+  dark: akEditorTableToolbarDark
 });
 export const tableTextColor = themed({
-  light: N200,
-  dark: DN400
+  light: token('color.text.subtlest', N200),
+  dark: token('color.text.subtlest', DN400)
 });
 export const tableBorderColor = themed({
   light: token('color.border', akEditorTableBorder),
   dark: token('color.border', akEditorTableBorderDark)
 });
-export const tableFloatingControlsColor = N20;
-export const tableCellSelectedColor = B75;
-export const tableToolbarSelectedColor = B200;
-export const tableBorderSelectedColor = B300;
-export const tableCellDeleteColor = R50;
-export const tableBorderDeleteColor = R400;
-export const tableToolbarDeleteColor = R75;
+export const tableFloatingControlsColor = token('color.background.neutral', N20); // TODO: https://product-fabric.atlassian.net/browse/DSP-4461
+
+export const tableCellSelectedColor = token('color.blanket.selected', 'rgba(179, 212, 255, 0.3)');
+export const tableToolbarSelectedColor = token('color.background.selected.bold', B200);
+export const tableBorderSelectedColor = token('color.border.selected', B300);
+export const tableCellDeleteColor = token('color.blanket.danger', 'rgba(255, 235, 230, 0.3)');
+export const tableBorderDeleteColor = token('color.border.danger', R400);
+export const tableToolbarDeleteColor = token('color.background.danger.bold', R75);
 export const tableBorderRadiusSize = 3;
 export const tablePadding = 8;
 export const tableScrollbarOffset = 15;