@atlaskit/editor-core 183.0.12 → 183.1.0

package/dist/es2019/plugins/media/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -7,7 +7,7 @@ import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import { messages } from '../messages';
 import { injectIntl } from 'react-intl-next';
-import Button from '../../../../floating-toolbar/ui/Button';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import PanelTextInput from '../../../../../ui/PanelTextInput';
 import * as keymaps from '../../../../../keymaps';
 import { ToolTipContent } from '../../../../../keymaps';

package/dist/es2019/plugins/media/toolbar/filePreviewItem.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import { messages } from '@atlaskit/media-ui';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
-import ToolbarButton from '../../floating-toolbar/ui/Button';
+import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
 import { getSelectedMediaContainerNodeAttrs } from './utils';
 export const FilePreviewItem = ({
   mediaPluginState,

package/dist/es2019/plugins/media/toolbar/linking-toolbar-appearance.js

@@ -5,7 +5,7 @@ import LinkIcon from '@atlaskit/icon/glyph/editor/link';
 import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { checkMediaType } from '../utils/check-media-type';
-import ToolbarButton from '../../floating-toolbar/ui/Button';
+import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
 import Separator from '../../floating-toolbar/ui/Separator';
 import { linkToolbarMessages, linkMessages } from '../../../messages';
 import { ToolTipContent, addLink } from '../../../keymaps';

package/dist/es2019/plugins/media/ui/ImageBorder/styles.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import * as colors from '@atlaskit/theme/colors';
 import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { N20A, N50, N60A, N90, N800, N0 } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 
 // menuItemDimensions and itemSpacing are copied from
@@ -11,6 +12,9 @@ export const menuItemDimensions = {
   width: 175,
   height: 32
 };
+
+// TODO: Migrate away from gridSize
+// Recommendation: Replace directly with 4 due to itemSpacing being used in calculations
 export const itemSpacing = gridSize() / 2;
 export const contextualMenuArrow = css`
   display: flex;

package/dist/es2019/plugins/media/ui/MediaLinkingToolbar.js

@@ -8,12 +8,12 @@ import EditorUnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
 // Common Translations will live here
 
 import PanelTextInput from '../../../ui/PanelTextInput';
-import Button from '../../floating-toolbar/ui/Button';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import Separator from '../../floating-toolbar/ui/Separator';
 import { container, containerWithProvider, inputWrapper } from '../../../ui/LinkSearch/ToolbarComponents';
 import RecentSearch from '../../../ui/LinkSearch';
 import { linkToolbarMessages } from '../../../messages';
-import { normalizeUrl } from '../../hyperlink/utils';
+import { normalizeUrl } from '@atlaskit/editor-common/utils';
 import { R400 } from '@atlaskit/theme/colors';
 import { INPUT_METHOD } from '../../analytics/types/enums';
 import { mediaLinkToolbarMessages } from './media-linking-toolbar-messages';

package/dist/es2019/plugins/media/ui/ResizableMediaSingle/index.js

@@ -10,7 +10,7 @@ import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { wrapperStyle } from './styled';
 import Resizer from '../../../../ui/Resizer';
 import { snapTo, handleSides, imageAlignmentMap } from '../../../../ui/Resizer/utils';
-import { calcMediaPxWidth } from '../../utils/media-single';
+import { calcMediaPxWidth } from '@atlaskit/editor-common/ui';
 import { calculateSnapPoints } from '../../../../utils/rich-media-utils';
 export default class ResizableMediaSingle extends React.Component {
   constructor(...args) {
@@ -76,6 +76,9 @@ export default class ResizableMediaSingle extends React.Component {
           state
         }
       } = this.props;
+      const {
+        resizedPctWidth
+      } = this.state;
       const pos = typeof getPos === 'function' ? getPos() : undefined;
       return calcMediaPxWidth({
         origWidth,
@@ -88,7 +91,8 @@ export default class ResizableMediaSingle extends React.Component {
         },
         isFullWidthModeEnabled: fullWidthMode,
         layout: useLayout || layout,
-        pos
+        pos,
+        resizedPctWidth
       });
     });
     _defineProperty(this, "highlights", (newWidth, snapPoints) => {
@@ -126,13 +130,21 @@ export default class ResizableMediaSingle extends React.Component {
     });
     _defineProperty(this, "saveWrapper", wrapper => this.wrapper = wrapper);
   }
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     const offsetLeft = calcOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
     if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
       this.setState({
         offsetLeft
       });
     }
+
+    // Handle undo, when the actual pctWidth changed,
+    // we sync up with the internal state.
+    if (prevProps.pctWidth !== this.props.pctWidth) {
+      this.setState({
+        resizedPctWidth: this.props.pctWidth
+      });
+    }
     return true;
   }
   get wrappedLayout() {

package/dist/es2019/plugins/media/utils/media-single.js

@@ -1,12 +1,12 @@
 import { Fragment, Slice } from 'prosemirror-model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from 'prosemirror-utils';
-import { calcPxFromPct, wrappedLayouts } from '@atlaskit/editor-common/ui';
-import { akEditorBreakoutPadding, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
-import { checkNodeDown, isEmptyParagraph } from '../../../utils';
+import { checkNodeDown } from '../../../utils';
+import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
-import { addAnalytics, ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '../../analytics';
-import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '../../../utils/insert';
+import { addAnalytics } from '../../analytics';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { isImage } from './is-image';
 import { atTheBeginningOfBlock } from '../../../utils/prosemirror/position';
 import { getRandomHex } from '@atlaskit/media-common';
@@ -195,54 +195,6 @@ export function transformSliceForMedia(slice, schema) {
     return newSlice;
   };
 }
-export const calcMediaPxWidth = opts => {
-  const {
-    origWidth,
-    origHeight,
-    layout,
-    pctWidth,
-    containerWidth,
-    resizedPctWidth
-  } = opts;
-  const {
-    width,
-    lineLength
-  } = containerWidth;
-  const calculatedPctWidth = calcPctWidth(containerWidth, pctWidth, origWidth, origHeight);
-  const calculatedResizedPctWidth = calcPctWidth(containerWidth, resizedPctWidth, origWidth, origHeight);
-  if (layout === 'wide') {
-    if (lineLength) {
-      const wideWidth = Math.ceil(lineLength * breakoutWideScaleRatio);
-      return wideWidth > width ? lineLength : wideWidth;
-    }
-  } else if (layout === 'full-width') {
-    return width - akEditorBreakoutPadding;
-  } else if (calculatedPctWidth) {
-    if (wrappedLayouts.indexOf(layout) > -1) {
-      if (calculatedResizedPctWidth) {
-        if (resizedPctWidth < 50) {
-          return calculatedResizedPctWidth;
-        }
-        return calculatedPctWidth;
-      }
-      return Math.min(calculatedPctWidth, origWidth);
-    }
-    if (calculatedResizedPctWidth) {
-      return calculatedResizedPctWidth;
-    }
-    return calculatedPctWidth;
-  } else if (layout === 'center') {
-    if (calculatedResizedPctWidth) {
-      return calculatedResizedPctWidth;
-    }
-    return Math.min(origWidth, lineLength || width);
-  } else if (layout && wrappedLayouts.indexOf(layout) !== -1) {
-    const halfLineLength = Math.ceil((lineLength || width) / 2);
-    return origWidth <= halfLineLength ? origWidth : halfLineLength;
-  }
-  return origWidth;
-};
-const calcPctWidth = (containerWidth, pctWidth, origWidth, origHeight) => pctWidth && origWidth && origHeight && Math.ceil(calcPxFromPct(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
 export function isCaptionNode(editorView) {
   const {
     $from

package/dist/es2019/plugins/paste/edge-cases/index.js

@@ -1,6 +1,6 @@
 import { findParentNodeOfType } from 'prosemirror-utils';
 import { insertSliceIntoRangeSelectionInsideList, insertSliceInsideOfPanelNodeSelected, insertSliceAtNodeEdge, insertSliceIntoEmptyNode } from './lists';
-import { isListNode } from '../../list/utils/node';
+import { isListNode } from '@atlaskit/editor-common/utils';
 import { isSelectionInsidePanel, isEmptyNode, isCursorSelectionAtTextStartOrEnd } from '../util';
 export function insertSliceForLists({
   tr,

package/dist/es2019/plugins/paste/edge-cases/lists.js

@@ -1,7 +1,7 @@
 import { Fragment } from 'prosemirror-model';
 import { TextSelection, NodeSelection } from 'prosemirror-state';
 import { Transform } from 'prosemirror-transform';
-import { isEmptyParagraph } from '../../../utils';
+import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 export function insertSliceIntoEmptyNode({
   tr,
   slice

package/dist/es2019/plugins/paste/handlers.js

@@ -9,12 +9,12 @@ import { mapSlice } from '../../utils/slice';
 import { INPUT_METHOD } from '../analytics';
 import { queueCardsFromChangedTr } from '../card/pm-plugins/doc';
 import { GapCursorSelection, Side } from '../selection/gap-cursor-selection';
-import { linkifyContent } from '../hyperlink/utils';
+import { linkifyContent } from '@atlaskit/editor-common/utils';
 import { runMacroAutoConvert } from '../macro';
 import { insertMediaAsMediaSingle } from '../media/utils/media-single';
 import { pluginKey as textFormattingPluginKey } from '../text-formatting/pm-plugins/main';
 import { addReplaceSelectedTableAnalytics, applyTextMarksToSlice, hasOnlyNodesOfType } from './util';
-import { isListNode, isListItemNode } from '../list/utils/node';
+import { isListItemNode, isListNode } from '@atlaskit/editor-common/utils';
 import { canLinkBeCreatedInRange } from '../hyperlink/pm-plugins/main';
 import { insertSliceForLists } from './edge-cases';
 import { startTrackingPastedMacroPositions, stopTrackingPastedMacroPositions } from './commands';
@@ -59,6 +59,7 @@ export function handlePasteIntoTaskOrDecisionOrPanel(slice) {
         panel,
         bulletList,
         orderedList,
+        taskList,
         listItem,
         expand,
         heading
@@ -75,6 +76,9 @@ export function handlePasteIntoTaskOrDecisionOrPanel(slice) {
       if (node.type === bulletList || node.type === orderedList || node.type === expand || node.type === heading || node.type === listItem) {
         sliceIsInvalid = true;
       }
+      if (selectionIsPanel && node.type === taskList) {
+        sliceIsInvalid = true;
+      }
     });
 
     // If the selection is a panel,
@@ -746,7 +750,7 @@ export function flattenNestedListInSlice(slice) {
 }
 export function handleRichText(slice) {
   return (state, dispatch) => {
-    var _slice$content, _slice$content2, _panelParentOverCurre;
+    var _slice$content, _slice$content2, _firstChildOfSlice$ty, _lastChildOfSlice$typ, _panelParentOverCurre;
     const {
       codeBlock,
       heading,
@@ -773,6 +777,9 @@ export function handleRichText(slice) {
     const isFirstChildListNode = isListNode(firstChildOfSlice);
     const isLastChildListNode = isListNode(lastChildOfSlice);
     const isSliceContentListNodes = isFirstChildListNode || isLastChildListNode;
+    const isFirstChildTaskListNode = (firstChildOfSlice === null || firstChildOfSlice === void 0 ? void 0 : (_firstChildOfSlice$ty = firstChildOfSlice.type) === null || _firstChildOfSlice$ty === void 0 ? void 0 : _firstChildOfSlice$ty.name) === 'taskList';
+    const isLastChildTaskListNode = (lastChildOfSlice === null || lastChildOfSlice === void 0 ? void 0 : (_lastChildOfSlice$typ = lastChildOfSlice.type) === null || _lastChildOfSlice$typ === void 0 ? void 0 : _lastChildOfSlice$typ.name) === 'taskList';
+    const isSliceContentTaskListNodes = isFirstChildTaskListNode || isLastChildTaskListNode;
 
     // We want to use safeInsert to insert invalid content, as it inserts at the closest non schema violating position
     // rather than spliting the selection parent node in half (which is what replaceSelection does)
@@ -782,7 +789,7 @@ export function handleRichText(slice) {
     const noNeedForSafeInsert = selection.$to.node().type.validContent(slice.content) || textNodes.includes(selection.$to.node().type) && selectionParent.type.validContent(slice.content);
     let panelParentOverCurrentSelection = findParentNodeOfType(panel)(tr.selection);
     const isTargetPanelEmpty = panelParentOverCurrentSelection && ((_panelParentOverCurre = panelParentOverCurrentSelection.node) === null || _panelParentOverCurre === void 0 ? void 0 : _panelParentOverCurre.content.size) === 2;
-    if (isSliceContentListNodes || isTargetPanelEmpty) {
+    if (!isSliceContentTaskListNodes && (isSliceContentListNodes || isTargetPanelEmpty)) {
       insertSliceForLists({
         tr,
         slice,

package/dist/es2019/plugins/paste/pm-plugins/analytics.js

@@ -3,7 +3,7 @@ import { getPasteSource } from '../util';
 import { handlePasteAsPlainText, handlePasteIntoTaskOrDecisionOrPanel, handleCodeBlock, handleMediaSingle, handlePastePreservingMarks, handleMarkdown, handleRichText, handleExpandPasteInTable, handleSelectedTable, handlePasteLinkOnSelectedText, handlePasteIntoCaption, handlePastePanelOrDecisionContentIntoList, handlePasteNonNestableBlockNodesIntoList } from '../handlers';
 import { findParentNode } from 'prosemirror-utils';
 import { mapSlice } from '../../../utils/slice';
-import { getLinkDomain } from '../../hyperlink/utils';
+import { getLinkDomain } from '@atlaskit/editor-common/utils';
 const contentToPasteContent = {
   url: PasteContents.url,
   paragraph: PasteContents.text,

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

@@ -8,7 +8,7 @@ import { getExtensionAutoConvertersFromProvider } from '@atlaskit/editor-common/
 import * as clipboard from '../../../utils/clipboard';
 import { transformSliceForMedia } from '../../media/utils/media-single';
 import { escapeLinks, htmlContainsSingleFile, isPastedFromWord, isPastedFromExcel, htmlHasInvalidLinkTags, removeDuplicateInvalidLinks } from '../util';
-import { linkifyContent } from '../../hyperlink/utils';
+import { linkifyContent } from '@atlaskit/editor-common/utils';
 import { transformSliceNestedExpandToExpand } from '../../expand/utils';
 import { handleMacroAutoConvert, handleMention, handleParagraphBlockMarks } from '../handlers';
 import { transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToCodeMark } from '../../code-block/utils';
@@ -18,7 +18,7 @@ import { isInsideBlockQuote, insideTable, measurements } from '../../../utils';
 import { measureRender } from '@atlaskit/editor-common/utils';
 import { transformSliceToCorrectMediaWrapper, unwrapNestedMediaElements } from '../../media/utils/media-common';
 import { upgradeTextToLists, splitParagraphs } from '../../list/transforms';
-import { md } from '../md';
+import { md } from '@atlaskit/editor-common/paste';
 import { transformUnsupportedBlockCardToInline } from '../../card/utils';
 import { transformSliceToDecisionList } from '../../tasks-and-decisions/utils';
 import { containsAnyAnnotations, stripNonExistingAnnotations } from '../../annotation/utils';
@@ -29,7 +29,6 @@ import { handlePaste as handlePasteTable } from '@atlaskit/editor-tables/utils';
 import { extractSliceFromStep } from '../../../utils/step';
 import { pluginKey as stateKey, createPluginState } from './plugin-factory';
 export { pluginKey as stateKey } from './plugin-factory';
-export { md } from '../md';
 export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, featureFlags, cardOptions, sanitizePrivateContent, providerFactory) {
   const atlassianMarkDownParser = new MarkdownTransformer(schema, md);
   function getMarkdownSlice(text, openStart, openEnd) {

package/dist/es2019/plugins/quick-insert/commands.js

@@ -1,6 +1,6 @@
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { insertSelectedItem } from '../../utils/insert';
+import { insertSelectedItem } from '@atlaskit/editor-common/insert';
 import { pluginKey } from './plugin-key';
 export const openElementBrowserModal = () => (state, dispatch) => {
   if (dispatch) {

package/dist/es2019/plugins/rule/pm-plugins/input-rule.js

@@ -1,7 +1,7 @@
 import { Fragment, Slice } from 'prosemirror-model';
 import { createRule, createPlugin } from '../../../utils/input-rules';
 import { leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
-import { safeInsert } from '../../../utils/insert';
+import { safeInsert } from '@atlaskit/editor-common/insert';
 import { hasParentNodeOfType } from 'prosemirror-utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD } from '../../analytics';
 export const createHorizontalRule = (state, featureFlags, start, end, inputMethod) => {

package/dist/es2019/plugins/selection/commands.js

@@ -1,7 +1,8 @@
 import { NodeSelection, TextSelection, Selection } from 'prosemirror-state';
 import { GapCursorSelection, Side } from './gap-cursor-selection';
 import { isIgnored as isIgnoredByGapCursor } from '../selection/gap-cursor/utils/is-ignored';
-import { isNodeEmpty, isEmptyParagraph } from '../../utils/document';
+import { isNodeEmpty } from '../../utils/document';
+import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { SelectionActionTypes } from './actions';
 import { createCommand, getPluginState } from './plugin-factory';
 import { isSelectableContainerNode, isSelectionAtEndOfParentNode, findSelectableContainerParent, isSelectionAtStartOfParentNode, findSelectableContainerBefore, findSelectableContainerAfter, findFirstChildNodeToSelect, findLastChildNodeToSelect } from './utils';

package/dist/es2019/plugins/selection/utils.js

@@ -6,7 +6,7 @@ import { flatten, findParentNode } from 'prosemirror-utils';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { isSelectionAtStartOfNode, isSelectionAtEndOfNode } from '@atlaskit/editor-common/selection';
 import { selectNode } from '../../utils/commands';
-import { isEmptyParagraph } from '../../utils/document';
+import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../analytics';
 import { isIgnored as isIgnoredByGapCursor } from '../selection/gap-cursor/utils/is-ignored';
 import { selectionPluginKey } from './types';

package/dist/es2019/plugins/status/plugin.js

@@ -1,5 +1,6 @@
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { NodeSelection, TextSelection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
 import { getInlineNodeViewProducer } from '../../nodeviews/getInlineNodeViewProducer';
 import { StatusNodeView } from './nodeviews/status';
 import { pluginKey } from './plugin-key';
@@ -77,8 +78,13 @@ const createPlugin = (pmPluginFactoryParams, options) => new SafePlugin({
     let changed = false;
     let tr = newEditorState.tr;
 
-    // user leaves the StatusPicker with empty text and selects a new node
-    if (transactions.find(tr => tr.selectionSet)) {
+    /**
+     * When user start creating status, and, when users navigates away
+     *  while empty, then we want to remove empty ("set a status") status.
+     * But when transaction to add empty status happens from undo/redo
+     *  we don't want to remove it.
+     */
+    if (transactions.find(tr => tr.selectionSet && !tr.getMeta(pmHistoryPluginKey))) {
       let oldStatus = mayGetStatusAtSelection(oldEditorState.selection);
       let newStatus = mayGetStatusAtSelection(newEditorState.selection);
       if (oldStatus && (newStatus && oldStatus.localId !== newStatus.localId || !newStatus)) {

package/dist/es2019/plugins/status/ui/statusPicker.js

@@ -6,7 +6,7 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { StatusPicker as AkStatusPicker } from '@atlaskit/status/picker';
-import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/theme/constants';
 import { N0 } from '@atlaskit/theme/colors';
 import withOuterListeners from '../../../ui/with-outer-listeners';
 import { DEFAULT_STATUS } from '../actions';
@@ -20,7 +20,7 @@ export let InputMethod = /*#__PURE__*/function (InputMethod) {
 }({});
 const pickerContainer = css`
   background: ${`var(--ds-surface-overlay, ${N0})`};
-  padding: ${gridSize()}px 0;
+  padding: ${"var(--ds-space-100, 8px)"} 0;
   border-radius: ${borderRadius()}px;
   box-shadow: ${"var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))"};
   input {

package/dist/es2019/plugins/type-ahead/insert-utils.js

@@ -1,7 +1,6 @@
 import { TextSelection, NodeSelection } from 'prosemirror-state';
 import { Node as PMNode, Slice, Fragment } from 'prosemirror-model';
-import { normaliseNestedLayout } from '../../utils/selection';
-import { safeInsert } from '../../utils/insert';
+import { safeInsert, normaliseNestedLayout } from '@atlaskit/editor-common/insert';
 function findInsertPoint(doc, pos, nodeToInsert) {
   const $pos = doc.resolve(pos);
   const createInsertPosition = (from, to) => ({

package/dist/es2019/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
-import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N60A, N50A } from '@atlaskit/theme/colors';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
@@ -15,7 +15,7 @@ const typeAheadContent = css`
   background: ${`var(--ds-surface-overlay, ${N0})`};
   border-radius: ${borderRadius()}px;
   box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 1px ${N60A}, 0 4px 8px -2px ${N50A}`})`};
-  padding: ${gridSize() / 2}px 0;
+  padding: ${"var(--ds-space-050, 4px)"} 0;
   width: 320px;
   max-height: 380px; /* ~5.5 visibile items */
   overflow-y: auto;

package/dist/es2019/plugins/width/index.js

@@ -1,5 +1,11 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from 'prosemirror-state';
+/**
+ * @private
+ * @deprecated
+ *
+ * Do not use this plugin key directly. Please use the `sharedState` of this plugin instead.
+ */
 export const pluginKey = new PluginKey('widthPlugin');
 export function createPlugin(dispatch) {
   return new SafePlugin({
@@ -35,6 +41,12 @@ const widthPlugin = () => ({
       dispatch
     }) => createPlugin(dispatch)
   }],
+  getSharedState: editorState => {
+    if (!editorState) {
+      return undefined;
+    }
+    return pluginKey.getState(editorState);
+  },
   // do this early here, otherwise we have to wait for WidthEmitter to debounce
   // which causes anything dependent on lineLength to jump around
   contentComponent({

package/dist/es2019/ui/Alignment/styles.js

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
-import { gridSize } from '@atlaskit/theme/constants';
 export const alignmentWrapper = css`
-  padding: 0 ${gridSize()}px;
+  padding: 0 ${"var(--ds-space-100, 8px)"};
   display: flex;
   flex-wrap: wrap;
   max-width: ${3 * 32}px;

package/dist/es2019/ui/Appearance/Comment/Toolbar.js

@@ -1,14 +1,13 @@
 /** @jsx jsx */
 import React, { useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
-import { gridSize } from '@atlaskit/theme/constants';
 import { N30 } from '@atlaskit/theme/colors';
 import { akEditorToolbarKeylineHeight, akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 export const TableControlsPadding = 20;
 const mainToolbarWrapperStyle = css`
   position: relative;
   align-items: center;
-  padding: ${gridSize()}px ${gridSize()}px 0;
+  padding: ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 0;
   display: flex;
   height: auto;
   background-color: ${"var(--ds-surface, white)"};
@@ -31,7 +30,7 @@ const stickyToolbarWrapperStyle = css`
   position: relative;
   position: sticky;
   /* stylelint-enable declaration-block-no-duplicate-properties */
-  padding-bottom: ${gridSize()}px;
+  padding-bottom: ${"var(--ds-space-100, 8px)"};
   z-index: ${akEditorMenuZIndex};
   transition: box-shadow ease-in-out 0.2s;
   &.show-keyline {

package/dist/es2019/ui/Appearance/FullPage/MainToolbar.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
 import { akEditorMenuZIndex, akEditorSwoopCubicBezier, akEditorToolbarKeylineHeight, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
 export const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
 const toolbarLineHeight = 56;
@@ -39,9 +38,9 @@ const mainToolbar = css`
 `;
 export const mainToolbarStyle = (showKeyline, twoLineEditorToolbar) => [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];
 export const mainToolbarIconBeforeStyle = css`
-  margin: ${gridSize() * 2}px;
-  height: ${gridSize() * 4}px;
-  width: ${gridSize() * 4}px;
+  margin: ${"var(--ds-space-200, 16px)"};
+  height: ${"var(--ds-space-400, 32px)"};
+  width: ${"var(--ds-space-400, 32px)"};
   @media (max-width: ${akEditorMobileMaxWidth}px) {
     grid-column: 1;
     grid-row: 1;

package/dist/es2019/ui/ColorPickerButton/index.js

@@ -67,12 +67,19 @@ const ColorPickerButton = props => {
     return position;
   }, []);
   const ColorPaletteWithListeners = withOuterListeners(ColorPalette);
-  const onColorSelected = (color, label) => {
+  const {
+    onChange,
+    createAnalyticsEvent,
+    colorPalette,
+    placement,
+    skipFocusButtonAfterPick
+  } = props;
+  const onColorSelected = React.useCallback((color, label) => {
     setIsOpenedByKeyboard(false);
     setIsPopupOpen(false);
     setIsPopupPositioned(false);
-    if (props.onChange) {
-      if (props.createAnalyticsEvent) {
+    if (onChange) {
+      if (createAnalyticsEvent) {
         // fire analytics
         const payload = {
           action: ACTION.UPDATED,
@@ -81,17 +88,19 @@ const ColorPickerButton = props => {
           attributes: {
             color,
             label,
-            placement: props.placement
+            placement: placement
           },
           eventType: EVENT_TYPE.TRACK
         };
-        props.createAnalyticsEvent(payload).fire(editorAnalyticsChannel);
+        createAnalyticsEvent(payload).fire(editorAnalyticsChannel);
       }
-      const newPalette = props.colorPalette.find(colorPalette => colorPalette.value === color);
-      newPalette && props.onChange(newPalette);
+      const newPalette = colorPalette.find(colorPalette => colorPalette.value === color);
+      newPalette && onChange(newPalette);
     }
-    focusButton();
-  };
+    if (!skipFocusButtonAfterPick) {
+      focusButton();
+    }
+  }, [colorPalette, onChange, createAnalyticsEvent, placement, skipFocusButtonAfterPick]);
   const renderPopup = () => {
     if (!isPopupOpen || !buttonRef.current) {
       return;

package/dist/es2019/ui/ConfigPanel/ErrorMessage/ErrorImage.js

@@ -3,9 +3,8 @@
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { gridSize } from '@atlaskit/theme/constants';
 const imageContainer = css`
-  margin: 0 auto ${gridSize() * 3}px;
+  margin: 0 auto ${"var(--ds-space-300, 24px)"};
   height: 80px;
 `;
 const ErrorImage = () => jsx("div", {

package/dist/es2019/ui/ConfigPanel/Fields/ColorPicker.js

@@ -5,6 +5,7 @@ import { Field } from '@atlaskit/form';
 import { hexToEditorTableChartsPaletteColor } from '@atlaskit/editor-palette';
 import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
 import { validate } from '../utils';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 import { requiredIndicator } from './common/RequiredIndicator';
 import { headingSizes } from '@atlaskit/theme/typography';
@@ -320,8 +321,8 @@ const colorPickerWrapper = css`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: ${4 * gridSize()}px;
-  padding-right: ${gridSize()}px;
+  height: ${"var(--ds-space-400, 32px)"};
+  padding-right: ${"var(--ds-space-100, 8px)"};
 `;
 const colorPickerLabel = css`
   font-size: ${headingSizes.h400.size}px;
@@ -372,7 +373,10 @@ const ColorPicker = props => {
     showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames,
     cols: EXPANDED_COLOR_PICKER_COLUMNS,
     alignX: "right",
-    placement: "ConfigPanel",
+    placement: "ConfigPanel"
+    // TODO: Migrate away from gridSize
+    // Recommendation: Update types of size object to accept string width/height and then replace gridSize with tokens
+    ,
     size: {
       width: 3 * gridSize(),
       height: 3 * gridSize()

package/dist/es2019/ui/ConfigPanel/Fields/Expand.js

@@ -6,24 +6,23 @@ import { N40 } from '@atlaskit/theme/colors';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Button from '@atlaskit/button';
-import { gridSize } from '@atlaskit/theme/constants';
 import { messages } from '../messages';
 export const expandContainer = css`
   border-bottom: 1px solid ${`var(--ds-border, ${N40})`};
 `;
 export const expandControl = css`
   display: flex;
-  height: ${gridSize() * 6}px;
+  height: ${"var(--ds-space-600, 48px)"};
   justify-content: center;
-  padding-right: ${gridSize()}px;
+  padding-right: ${"var(--ds-space-100, 8px)"};
 `;
 const chevronContainer = css`
   display: flex;
   align-items: center;
 
   & > button {
-    width: ${gridSize() * 3}px;
-    height: ${gridSize() * 3}px;
+    width: ${"var(--ds-space-300, 24px)"};
+    height: ${"var(--ds-space-300, 24px)"};
   }
 `;
 const labelContainer = css`
@@ -34,7 +33,7 @@ const labelContainer = css`
 `;
 const expandContentContainer = isHidden => css`
   display: ${isHidden ? 'none' : 'block'};
-  margin-top: -${gridSize()}px;
+  margin-top: calc(-1 * ${"var(--ds-space-100, 8px)"});
 `;
 function Expand({
   field,