@atlaskit/editor-core 167.0.3 → 169.1.0

package/dist/cjs/ui/ElementBrowser/components/ElementList/ElementList.js

@@ -7,12 +7,11 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.ElementItem = ElementItem;
 exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -21,13 +20,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
 
-var _memoizeOne = _interopRequireDefault(require("memoize-one"));
-
 var _AutoSizer = require("react-virtualized/dist/commonjs/AutoSizer");
 
 var _Collection = require("react-virtualized/dist/commonjs/Collection");
 
-var _item = _interopRequireDefault(require("@atlaskit/item"));
+var _menu = require("@atlaskit/menu");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -69,10 +66,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function ElementList(_ref) {
   var items = _ref.items,
       mode = _ref.mode,
@@ -165,40 +158,6 @@ function ElementList(_ref) {
   }))));
 }
 
-var getStyles = (0, _memoizeOne.default)(function (mode) {
-  return _objectSpread(_objectSpread({}, mode === _types.Modes.full && {
-    '-ms-flex': 'auto',
-    position: 'relative',
-    boxSizing: 'border-box'
-  }), {}, {
-    height: {
-      default: _constants.ELEMENT_ITEM_HEIGHT
-    },
-    padding: {
-      default: {
-        top: _constants.GRID_SIZE * 1.5,
-        right: _constants.GRID_SIZE * 1.5,
-        bottom: _constants.GRID_SIZE * 1.5,
-        left: _constants.GRID_SIZE * 1.5
-      }
-    },
-    borderRadius: _constants.GRID_SIZE / 2,
-    // TODO: apply a different background for when a selected item is hovered.
-    // Not possible due to current implementation of @atlaskit/item component.
-    selected: {
-      background: (0, _tokens.token)('color.background.selected', _colors.N20)
-    },
-    hover: {
-      background: (0, _tokens.token)('color.background.neutral.subtle.hovered', 'rgb(244, 245, 247)')
-    },
-    active: {
-      background: (0, _tokens.token)('color.background.neutral.subtle.pressed', 'rgb(244, 245, 247)')
-    },
-    beforeItemSpacing: {
-      default: _constants.GRID_SIZE * 1.5
-    }
-  });
-});
 var MemoizedElementItem = /*#__PURE__*/(0, _react.memo)(ElementItem);
 MemoizedElementItem.displayName = 'MemoizedElementItem';
 
@@ -211,11 +170,6 @@ function ElementItem(_ref4) {
       focus = _ref4.focus,
       setFocusedItemIndex = _ref4.setFocusedItemIndex;
   var ref = (0, _useFocus.default)(focus);
-  var theme = (0, _react.useMemo)(function () {
-    return {
-      '@atlaskit-shared-theme/item': getStyles(inlineMode ? 'inline' : 'full')
-    };
-  }, [inlineMode]);
   /**
    * Note: props.onSelectItem(item) is not called here as the StatelessElementBrowser's
    * useEffect would trigger it on selectedItemIndex change. (Line 106-110)
@@ -227,33 +181,29 @@ function ElementItem(_ref4) {
     e.stopPropagation();
     setFocusedItemIndex(index);
 
-    if (inlineMode) {
-      onInsertItem(item);
-    }
-  }, [index, inlineMode, item, onInsertItem, setFocusedItemIndex]);
-  var onDoubleClick = (0, _react.useCallback)(function (e) {
-    if (inlineMode) {
-      return;
-    }
+    switch (e.nativeEvent.detail) {
+      case 0:
+        onInsertItem(item);
+        break;
 
-    e.preventDefault();
-    e.stopPropagation();
-    setFocusedItemIndex(index);
-    onInsertItem(item);
-  }, [inlineMode, setFocusedItemIndex, index, onInsertItem, item]); // After tabbing we wanna select the item on enter/space key press from item level,
-  // preventing the default top level component behavior.
-
-  var onKeyPress = (0, _react.useCallback)(function (e) {
-    var SPACE_KEY = 32;
-    var ENTER_KEY = 13;
-
-    if (e.which === ENTER_KEY || e.which === SPACE_KEY) {
-      e.preventDefault();
-      e.stopPropagation();
-      setFocusedItemIndex(index);
-      onInsertItem(item);
+      case 1:
+        if (inlineMode) {
+          onInsertItem(item);
+        }
+
+        break;
+
+      case 2:
+        if (!inlineMode) {
+          onInsertItem(item);
+        }
+
+        break;
+
+      default:
+        return;
     }
-  }, [index, item, onInsertItem, setFocusedItemIndex]);
+  }, [index, inlineMode, item, onInsertItem, setFocusedItemIndex]);
   var icon = item.icon,
       title = item.title,
       description = item.description,
@@ -261,31 +211,25 @@ function ElementItem(_ref4) {
   return (0, _react2.jsx)(_tooltip.default, {
     content: description,
     testId: "element-item-tooltip-".concat(index)
-  }, (0, _react2.jsx)(_item.default, {
+  }, (0, _react2.jsx)(_menu.ButtonItem, {
     onClick: onClick,
-    onDoubleClick: onDoubleClick,
-    elemBefore: (0, _react2.jsx)(ElementBefore, {
+    iconBefore: (0, _react2.jsx)(ElementBefore, {
       icon: icon,
       title: title
     }),
     isSelected: selected,
     "aria-describedby": title,
-    innerRef: ref,
-    onKeyPress: onKeyPress,
-    "data-testid": "element-item-".concat(index),
-    tabIndex: 0,
-    style: inlineMode ? null : itemStyleOverrides,
-    theme: theme
+    ref: ref,
+    testId: "element-item-".concat(index)
   }, (0, _react2.jsx)(ItemContent, {
+    style: inlineMode ? null : itemStyleOverrides,
+    tabIndex: 0,
     title: title,
     description: description,
     keyshortcut: keyshortcut
   })));
 }
 /**
- * Some properties (specified in 'BaseItem' packages/design-system/item/src/styled/Item.js) cannot be changed with
- * ThemeProvider as they are of higher specificity.
- *
  * Inline mode should use the existing Align-items:center value.
  */
 
@@ -322,8 +266,8 @@ var ItemContent = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
   }, description)));
 });
 var scrollbarStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ::-webkit-scrollbar {\n    width: ", "px;\n  }\n  ::-webkit-scrollbar-track-piece {\n    background: ", ";\n  }\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  /** Firefox **/\n  scrollbar-color: ", " ", ";\n\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n"])), _constants.SCROLLBAR_WIDTH, _constants.SCROLLBAR_TRACK_COLOR, _constants.SCROLLBAR_THUMB_COLOR, _constants.SCROLLBAR_THUMB_COLOR, _constants.SCROLLBAR_TRACK_COLOR);
-var elementItemsWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  flex-flow: row wrap;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow: hidden;\n  padding: ", "px; // For Focus outline\n\n  .ReactVirtualized__Collection {\n    ", ";\n    border-radius: 3px; // Standard border-radius across other components like Search or Item.\n    outline: none;\n\n    :focus {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n    }\n  }\n  .ReactVirtualized__Collection__innerScrollContainer {\n    div[class='element-item-wrapper']:last-child {\n      padding-bottom: 4px;\n    }\n  }\n\n  // temporary solution before we migrated off dst/item\n  & span[class^='ItemParts__Before'] {\n    margin-right: 12px;\n  }\n"])), _constants.ELEMENT_LIST_PADDING, scrollbarStyle, _constants.ELEMENT_LIST_PADDING, (0, _tokens.token)('color.border.focused', _colors.B100));
-var elementItemWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  /**\n     * Since we are using \"Item\" component's content itself for description,\n     * the height of description overflows the parent container padding/margin.\n     * manually setting it to take 100% of parent.\n     */\n  span {\n    span:nth-of-type(2) {\n      max-height: 100%;\n    }\n  }\n"])));
+var elementItemsWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  flex-flow: row wrap;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow: hidden;\n  padding: ", "px; // For Focus outline\n\n  .ReactVirtualized__Collection {\n    ", ";\n    border-radius: 3px; // Standard border-radius across other components like Search or Item.\n    outline: none;\n\n    :focus {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n    }\n  }\n  .ReactVirtualized__Collection__innerScrollContainer {\n    div[class='element-item-wrapper']:last-child {\n      padding-bottom: 4px;\n    }\n  }\n"])), _constants.ELEMENT_LIST_PADDING, scrollbarStyle, _constants.ELEMENT_LIST_PADDING, (0, _tokens.token)('color.border.focused', _colors.B100));
+var elementItemWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  div {\n    button {\n      height: 75px;\n      align-items: flex-start;\n      padding: 12px 12px 11px;\n    }\n  }\n"])));
 var itemBody = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  width: 100%;\n\n  margin-top: -2px; // Fixes the Item Icon and text's alignment issue\n"])));
 /*
  * -webkit-line-clamp is also supported by firefox 🎉

package/dist/cjs/utils/clipboard.js

@@ -2,17 +2,25 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.checkClipboardTypes = checkClipboardTypes;
-exports.copyToClipboard = void 0;
+exports.copyToClipboard = exports.copyHTMLToClipboard = void 0;
 exports.isPastedFile = isPastedFile;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
+var clipboard = _interopRequireWildcard(require("clipboard-polyfill"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function checkClipboardTypes(type, item) {
   var isDOMStringList = function isDOMStringList(t) {
     return !t.indexOf && !!t.contains;
@@ -107,4 +115,61 @@ var copyToClipboard = /*#__PURE__*/function () {
   };
 }();
 
-exports.copyToClipboard = copyToClipboard;
+exports.copyToClipboard = copyToClipboard;
+
+var copyHTMLToClipboard = /*#__PURE__*/function () {
+  var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(htmlToCopy) {
+    var blobInput, data, Clipboard, dt;
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!(isClipboardApiSupported() && typeof ClipboardItem !== 'undefined')) {
+              _context2.next = 12;
+              break;
+            }
+
+            _context2.prev = 1;
+            blobInput = new Blob([htmlToCopy], {
+              type: 'text/html'
+            }); // @ts-ignore
+
+            data = [new ClipboardItem({
+              'text/html': blobInput
+            })]; // @ts-ignore
+
+            navigator.clipboard.write(data);
+            _context2.next = 10;
+            break;
+
+          case 7:
+            _context2.prev = 7;
+            _context2.t0 = _context2["catch"](1);
+            throw new Error('Clipboard api is not supported');
+
+          case 10:
+            _context2.next = 16;
+            break;
+
+          case 12:
+            // At the time of development, Firefox doesn't support ClipboardItem API
+            // Hence of use of this polyfill
+            Clipboard = clipboard;
+            dt = new Clipboard.DT();
+            dt.setData('text/html', htmlToCopy);
+            Clipboard.write(dt);
+
+          case 16:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2, null, [[1, 7]]);
+  }));
+
+  return function copyHTMLToClipboard(_x2) {
+    return _ref3.apply(this, arguments);
+  };
+}();
+
+exports.copyHTMLToClipboard = copyHTMLToClipboard;

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "167.0.3";
+var version = "169.1.0";
 exports.version = version;
 
 var nextMajorVersion = function nextMajorVersion() {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "167.0.3",
+	"version": "169.1.0",
 	"sideEffects": false
 }

package/dist/es2019/create-editor/create-plugins-list.js

@@ -1,4 +1,4 @@
-import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, fragmentMarkPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tablesPlugin, tasksAndDecisionsPlugin, textColorPlugin, cardPlugin, gridPlugin, statusPlugin, alignmentPlugin, indentationPlugin, analyticsPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, contextPanelPlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin } from '../plugins';
+import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, fragmentMarkPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, toolbarListsIndentationPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tablesPlugin, tasksAndDecisionsPlugin, textColorPlugin, cardPlugin, gridPlugin, statusPlugin, alignmentPlugin, indentationPlugin, analyticsPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, contextPanelPlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin, copyButtonPlugin } from '../plugins';
 import { isFullPage as fullPageCheck } from '../utils/is-full-page';
 import { GUTTER_SIZE_MOBILE_IN_PX } from '../plugins/base/pm-plugins/scroll-gutter';
 import { createFeatureFlagsFromProps } from '../plugins/feature-flags-context/feature-flags-from-props';
@@ -359,6 +359,9 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
   } // UI only plugins
 
 
+  preset.add([toolbarListsIndentationPlugin, {
+    showIndentationButtons: !!featureFlags.indentationButtonsInTheToolbar
+  }]);
   preset.add([insertBlockPlugin, {
     allowTables: !!props.allowTables,
     allowExpand: isExpandInsertionEnabled(props),
@@ -411,6 +414,10 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
     }]);
   }
 
+  if (featureFlags.floatingToolbarCopyButton) {
+    preset.add(copyButtonPlugin);
+  }
+
   const excludes = new Set();
 
   if (!isCodeBlockAllowed({

package/dist/es2019/plugins/analytics/types/toolbar-button.js

@@ -14,4 +14,6 @@ export let TOOLBAR_ACTION_SUBJECT_ID;
   TOOLBAR_ACTION_SUBJECT_ID["TEXT_FORMATTING_ITALIC"] = "italic";
   TOOLBAR_ACTION_SUBJECT_ID["UNDO"] = "undo";
   TOOLBAR_ACTION_SUBJECT_ID["REDO"] = "redo";
+  TOOLBAR_ACTION_SUBJECT_ID["INDENT"] = "indent";
+  TOOLBAR_ACTION_SUBJECT_ID["OUTDENT"] = "outdent";
 })(TOOLBAR_ACTION_SUBJECT_ID || (TOOLBAR_ACTION_SUBJECT_ID = {}));

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

@@ -14,6 +14,13 @@ import { findSupportedNodeForBreakout } from './utils/find-breakout-node';
 class BreakoutView {
   constructor(node, view, eventDispatcher) {
     _defineProperty(this, "updateWidth", widthState => {
+      // we skip updating the width of breakout nodes if the editorView dom
+      // element was hidden (to avoid breakout width and button thrashing
+      // when an editor is hidden, re-rendered and unhidden).
+      if (widthState.width === 0) {
+        return;
+      }
+
       const width = calcBreakoutWidth(this.node.attrs.mode, widthState.width);
       let newStyle = `width: ${width}; `;
       const lineLength = widthState.lineLength;

package/dist/es2019/plugins/breakout/ui/LayoutButton.js

@@ -131,7 +131,9 @@ class LayoutButton extends React.Component {
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement,
       stick: true,
-      forcePlacement: true
+      forcePlacement: true,
+      scheduleExtraLayoutUpdates: true,
+      waitForExtraLayoutUpdates: true
     }, jsx("div", {
       css: toolbarButtonWrapper
     }, jsx(ToolbarButton, {

package/dist/es2019/plugins/card/pm-plugins/util/resolve.js

@@ -6,7 +6,12 @@ import { replaceQueuedUrlWithCard, handleFallbackWithAnalytics } from '../doc';
 // Used for all interactions with the EditorCardProvider.
 // ============================================================================ //
 export const resolveWithProvider = (view, outstandingRequests, provider, request, options) => {
-  const handleResolve = provider.resolve(request.url, request.appearance).then(resolvedCard => {
+  // When user manually changes appearance from blue link to smart link, we should respect that,
+  let shouldForceAppearance = // This flag is set to true only in one place atm:
+  // packages/editor/editor-core/src/plugins/card/pm-plugins/doc.ts @ convertHyperlinkToSmartCard
+  // Which is used when user switching from URL to smart link appearance.
+  !!request.shouldReplaceLink;
+  const handleResolve = provider.resolve(request.url, request.appearance, shouldForceAppearance).then(resolvedCard => {
     delete outstandingRequests[request.url];
     return resolvedCard;
   }).then(handleResolved(view, request, options), handleRejected(view, request));

package/dist/es2019/plugins/card/styles.js

@@ -4,6 +4,7 @@ import { N20 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { token } from '@atlaskit/tokens';
+export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
 export const smartCardStyles = css`
   .${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER} {
     max-width: calc(100% - 20px);
@@ -98,4 +99,8 @@ export const smartCardStyles = css`
       }
     }
   }
+
+  .${FLOATING_TOOLBAR_LINKPICKER_CLASSNAME} {
+    padding: 0;
+  }
 `;

package/dist/es2019/plugins/card/toolbar.js

@@ -18,6 +18,7 @@ import { LinkToolbarAppearance } from './ui/LinkToolbarAppearance';
 import { messages } from './messages';
 import buildLayoutButtons from '../../ui/MediaAndEmbedsToolbar';
 import { buildVisitedLinkPayload } from '../../utils/linking-utils';
+import { FLOATING_TOOLBAR_LINKPICKER_CLASSNAME } from './styles';
 export const removeCard = (state, dispatch) => {
   if (!(state.selection instanceof NodeSelection)) {
     return false;
@@ -227,9 +228,12 @@ export const floatingToolbar = (cardOptions, platform) => {
 
     const toolbarOffset = isEmbedCard ? {
       offset: [0, 24]
-    } : {};
+    } : {}; // Applies padding override for when link picker is currently displayed
+
+    const className = pluginState.showLinkingToolbar ? FLOATING_TOOLBAR_LINKPICKER_CLASSNAME : undefined;
     return {
       title: intl.formatMessage(messages.card),
+      className,
       nodeType,
       ...toolbarOffset,
       getDomRef: view => {

package/dist/es2019/plugins/code-block/styles.js

@@ -1,10 +1,11 @@
 import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
-import * as colors from '@atlaskit/theme/colors';
+import { R75, N20, DN50, N30, DN20, N90, DN90, N400, DN400, N800, DN500 } from '@atlaskit/theme/colors';
 import { blockNodesVerticalMargin, akEditorTableCellMinWidth, akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, SelectionStyle, getSelectionStyles, akEditorCodeFontFamily, akEditorSelectedNodeClassName, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { token } from '@atlaskit/tokens';
 import { codeBlockClassNames } from './ui/class-names';
+import { codeBlockSharedStyles } from '@atlaskit/editor-common/styles';
 export const highlightingCodeBlockStyles = props => css`
   .ProseMirror .code-block {
     position: relative;
@@ -12,15 +13,15 @@ export const highlightingCodeBlockStyles = props => css`
   // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   background: themed({
-    light: colors.N20,
-    dark: colors.DN50
+    light: N20,
+    dark: DN50
   })(props),
   width: '8px'
 })};
     background-repeat: no-repeat;
     background-color: ${themed({
-  light: token('color.background.neutral', colors.N20),
-  dark: token('color.background.neutral', colors.DN50)
+  light: token('color.background.neutral', N20),
+  dark: token('color.background.neutral', DN50)
 })(props)};
 
     --ds--code--bg-color: transparent;
@@ -42,13 +43,13 @@ export const highlightingCodeBlockStyles = props => css`
       flex-shrink: 0;
       text-align: right;
       background-color: ${themed({
-  light: token('color.background.neutral', colors.N30),
-  dark: token('color.background.neutral', colors.DN20)
+  light: token('color.background.neutral', N30),
+  dark: token('color.background.neutral', DN20)
 })(props)};
       padding: ${gridSize()}px;
       color: ${themed({
-  light: token('color.text.subtlest', colors.N90),
-  dark: token('color.text.subtlest', colors.DN90)
+  light: token('color.text.subtlest', N90),
+  dark: token('color.text.subtlest', DN90)
 })(props)};
 
       span {
@@ -63,8 +64,8 @@ export const highlightingCodeBlockStyles = props => css`
           font-size: ${relativeFontSizeToBase16(fontSize())};
           line-height: 1.5rem;
           color: ${themed({
-  light: token('color.text.subtle', colors.N400),
-  dark: token('color.text.subtle', colors.DN400)
+  light: token('color.text.subtle', N400),
+  dark: token('color.text.subtle', DN400)
 })(props)};
         }
       }
@@ -117,8 +118,8 @@ export const highlightingCodeBlockStyles = props => css`
         > code:not([data-language='plaintext']):not([data-language='none']):not([data-language='']) {
           color: transparent;
           caret-color: ${themed({
-  light: token('color.text', colors.N800),
-  dark: token('color.text', colors.DN500)
+  light: token('color.text', N800),
+  dark: token('color.text', DN500)
 })(props)};
         }
       }
@@ -139,7 +140,7 @@ export const highlightingCodeBlockStyles = props => css`
       ${token('color.border.danger', akEditorDeleteBorder)};
 
     .${codeBlockClassNames.gutter} {
-      background-color: ${token('color.blanket.danger', colors.R75)};
+      background-color: ${token('color.blanket.danger', R75)};
       color: ${token('color.text.danger', akEditorDeleteIconColor)};
     }
 
@@ -161,86 +162,8 @@ export const highlightingCodeBlockStyles = props => css`
   }
 `;
 export const codeBlockStyles = props => css`
-  .ProseMirror .code-block {
-    position: relative;
-    background-image: ${overflowShadow({
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  background: themed({
-    light: colors.N20,
-    dark: colors.DN50
-  })(props),
-  width: '8px'
-})};
-
-    --ds--code--bg-color: transparent;
-
-    background-repeat: no-repeat;
-    background-color: ${themed({
-  light: token('color.background.neutral', colors.N20),
-  dark: token('color.background.neutral', colors.DN50)
-})(props)};
-    background-attachment: local, scroll, scroll;
-    background-size: 8px 100%, 8px 100%, 8px 100%;
-    background-position: 100% 0, 100% 0, 0 0;
-    font-family: ${akEditorCodeFontFamily};
-    border-radius: ${borderRadius()}px;
-    margin: ${blockNodesVerticalMargin} 0 0 0;
-    counter-reset: line;
-    display: flex;
-    min-width: ${akEditorTableCellMinWidth}px;
-    cursor: pointer;
-    overflow-x: auto;
-
-    .${codeBlockClassNames.gutter} {
-      /* https://bitbucket.org/atlassian/atlassian-frontend/src/develop/packages/design-system/code/src/themes/themeBuilder.ts#packages/design-system/code/src/themes/themeBuilder.ts-19:28 */
-      flex-shrink: 0;
-      text-align: right;
-      background-color: ${themed({
-  light: token('color.background.neutral', colors.N30),
-  dark: token('color.background.neutral', colors.DN20)
-})(props)};
-      padding: ${gridSize()}px;
-
-      span {
-        display: block;
-        line-height: 0;
-        font-size: 0;
-
-        &::before {
-          display: inline-block;
-          content: counter(line);
-          counter-increment: line;
-          font-size: ${relativeFontSizeToBase16(fontSize())};
-          line-height: 1.5rem;
-          color: ${themed({
-  light: token('color.text', colors.N400),
-  dark: token('color.text', colors.DN400)
-})(props)};
-        }
-      }
-    }
-
-    .${codeBlockClassNames.content} {
-      display: flex;
-      flex: 1;
-
-      code {
-        flex-grow: 1;
-        tab-size: 4;
-        cursor: text;
-        /* https://bitbucket.org/atlassian/atlassian-frontend/src/218202daeaf527262c21841e6f88fa058d349ad4/packages/design-system/code/src/themes/themeBuilder.ts#lines-12:17 */
-        font-size: ${relativeFontSizeToBase16(fontSize())};
-        line-height: 1.5rem;
-        color: ${themed({
-  light: token('color.text', colors.N800),
-  dark: token('color.text', colors.DN800)
-})(props)};
-        border-radius: ${borderRadius()}px;
-        margin: ${gridSize()}px;
-        white-space: pre;
-      }
-    }
+  .ProseMirror {
+    ${codeBlockSharedStyles(props)}
   }
 
   .ProseMirror li > .code-block {
@@ -256,7 +179,7 @@ export const codeBlockStyles = props => css`
     box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
 
     .${codeBlockClassNames.gutter} {
-      background-color: ${token('color.blanket.danger', colors.R75)};
+      background-color: ${token('color.blanket.danger', R75)};
       color: ${token('color.text.danger', akEditorDeleteIconColor)};
     }
 

package/dist/es2019/plugins/code-block/ui/class-names.js

@@ -1,5 +1,6 @@
+import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 export const codeBlockClassNames = {
-  gutter: 'line-number-gutter',
-  content: 'code-content',
+  gutter: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER,
+  content: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT,
   highlighting: 'code-highlighting'
 };