@atlaskit/editor-core 169.0.0 → 170.0.0

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

@@ -3,12 +3,10 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import React, { Fragment, memo, useCallback, useEffect, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
-import memoizeOne from 'memoize-one';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import { Collection } from 'react-virtualized/dist/commonjs/Collection';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import Item from '@atlaskit/item';
-import { B100, N20, N200 } from '@atlaskit/theme/colors';
+import { ButtonItem } from '@atlaskit/menu';
+import { B100, N200 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { token } from '@atlaskit/tokens';
@@ -17,7 +15,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../..
 import IconFallback from '../../../../plugins/quick-insert/assets/fallback';
 import { itemIcon } from '../../../../plugins/type-ahead/ui/TypeAheadListItem';
 import { shortcutStyle } from '../../../styles';
-import { ELEMENT_ITEM_HEIGHT, ELEMENT_LIST_PADDING, GRID_SIZE, SCROLLBAR_THUMB_COLOR, SCROLLBAR_TRACK_COLOR, SCROLLBAR_WIDTH } from '../../constants';
+import { ELEMENT_LIST_PADDING, SCROLLBAR_THUMB_COLOR, SCROLLBAR_TRACK_COLOR, SCROLLBAR_WIDTH } from '../../constants';
 import useContainerWidth from '../../hooks/use-container-width';
 import useFocus from '../../hooks/use-focus';
 import { Modes } from '../../types';
@@ -114,44 +112,9 @@ function ElementList({
   })))));
 }
 
-const getStyles = memoizeOne(mode => {
-  return { ...(mode === Modes.full && {
-      '-ms-flex': 'auto',
-      position: 'relative',
-      boxSizing: 'border-box'
-    }),
-    height: {
-      default: ELEMENT_ITEM_HEIGHT
-    },
-    padding: {
-      default: {
-        top: GRID_SIZE * 1.5,
-        right: GRID_SIZE * 1.5,
-        bottom: GRID_SIZE * 1.5,
-        left: GRID_SIZE * 1.5
-      }
-    },
-    borderRadius: 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: token('color.background.selected', N20)
-    },
-    hover: {
-      background: token('color.background.neutral.subtle.hovered', 'rgb(244, 245, 247)')
-    },
-    active: {
-      background: token('color.background.neutral.subtle.pressed', 'rgb(244, 245, 247)')
-    },
-    beforeItemSpacing: {
-      default: GRID_SIZE * 1.5
-    }
-  };
-});
 const MemoizedElementItem = /*#__PURE__*/memo(ElementItem);
 MemoizedElementItem.displayName = 'MemoizedElementItem';
-
-function ElementItem({
+export function ElementItem({
   inlineMode,
   selected,
   item,
@@ -161,9 +124,6 @@ function ElementItem({
   setFocusedItemIndex
 }) {
   const ref = useFocus(focus);
-  const theme = useMemo(() => ({
-    '@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)
@@ -175,33 +135,29 @@ function ElementItem({
     e.stopPropagation();
     setFocusedItemIndex(index);
 
-    if (inlineMode) {
-      onInsertItem(item);
-    }
-  }, [index, inlineMode, item, onInsertItem, setFocusedItemIndex]);
-  const onDoubleClick = useCallback(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.
+      case 1:
+        if (inlineMode) {
+          onInsertItem(item);
+        }
+
+        break;
 
-  const onKeyPress = useCallback(e => {
-    const SPACE_KEY = 32;
-    const ENTER_KEY = 13;
+      case 2:
+        if (!inlineMode) {
+          onInsertItem(item);
+        }
 
-    if (e.which === ENTER_KEY || e.which === SPACE_KEY) {
-      e.preventDefault();
-      e.stopPropagation();
-      setFocusedItemIndex(index);
-      onInsertItem(item);
+        break;
+
+      default:
+        return;
     }
-  }, [index, item, onInsertItem, setFocusedItemIndex]);
+  }, [index, inlineMode, item, onInsertItem, setFocusedItemIndex]);
   const {
     icon,
     title,
@@ -211,35 +167,28 @@ function ElementItem({
   return jsx(Tooltip, {
     content: description,
     testId: `element-item-tooltip-${index}`
-  }, jsx(Item, {
+  }, jsx(ButtonItem, {
     onClick: onClick,
-    onDoubleClick: onDoubleClick,
-    elemBefore: jsx(ElementBefore, {
+    iconBefore: jsx(ElementBefore, {
       icon: icon,
       title: title
     }),
     isSelected: selected,
     "aria-describedby": title,
-    innerRef: ref,
-    onKeyPress: onKeyPress,
-    "data-testid": `element-item-${index}`,
-    tabIndex: 0,
-    style: inlineMode ? null : itemStyleOverrides,
-    theme: theme
+    ref: ref,
+    testId: `element-item-${index}`
   }, 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.
  */
 
-
 const itemStyleOverrides = {
   alignItems: 'flex-start'
 };
@@ -308,21 +257,13 @@ const elementItemsWrapper = css`
       padding-bottom: 4px;
     }
   }
-
-  // temporary solution before we migrated off dst/item
-  & span[class^='ItemParts__Before'] {
-    margin-right: 12px;
-  }
 `;
 const elementItemWrapper = css`
-  /**
-     * Since we are using "Item" component's content itself for description,
-     * the height of description overflows the parent container padding/margin.
-     * manually setting it to take 100% of parent.
-     */
-  span {
-    span:nth-of-type(2) {
-      max-height: 100%;
+  div {
+    button {
+      height: 75px;
+      align-items: flex-start;
+      padding: 12px 12px 11px;
     }
   }
 `;

package/dist/es2019/utils/clipboard.js

@@ -1,3 +1,4 @@
+import * as clipboard from 'clipboard-polyfill';
 export function checkClipboardTypes(type, item) {
   const isDOMStringList = t => !t.indexOf && !!t.contains;
 
@@ -35,4 +36,29 @@ export const copyToClipboard = async textToCopy => {
   } else {
     throw new Error('Clipboard api is not supported');
   }
+};
+export const copyHTMLToClipboard = async htmlToCopy => {
+  // @ts-ignore
+  if (isClipboardApiSupported() && typeof ClipboardItem !== 'undefined') {
+    try {
+      const blobInput = new Blob([htmlToCopy], {
+        type: 'text/html'
+      }); // @ts-ignore
+
+      const data = [new ClipboardItem({
+        'text/html': blobInput
+      })]; // @ts-ignore
+
+      navigator.clipboard.write(data);
+    } catch (error) {
+      throw new Error('Clipboard api is not supported');
+    }
+  } else {
+    // At the time of development, Firefox doesn't support ClipboardItem API
+    // Hence of use of this polyfill
+    const Clipboard = clipboard;
+    const dt = new Clipboard.DT();
+    dt.setData('text/html', htmlToCopy);
+    Clipboard.write(dt);
+  }
 };

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "169.0.0";
+export const version = "170.0.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

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

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

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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) { _defineProperty(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; }
 
-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';
@@ -363,6 +363,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),
@@ -415,6 +418,10 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
     }]);
   }
 
+  if (featureFlags.floatingToolbarCopyButton) {
+    preset.add(copyButtonPlugin);
+  }
+
   var excludes = new Set();
 
   if (!isCodeBlockAllowed({

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

@@ -14,4 +14,6 @@ export var 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/esm/plugins/breakout/index.js

@@ -25,6 +25,13 @@ var BreakoutView = /*#__PURE__*/function () {
     _classCallCheck(this, BreakoutView);
 
     _defineProperty(this, "updateWidth", function (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;
+      }
+
       var width = calcBreakoutWidth(_this.node.attrs.mode, widthState.width);
       var newStyle = "width: ".concat(width, "; ");
       var lineLength = widthState.lineLength;

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

@@ -147,7 +147,9 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,
         stick: true,
-        forcePlacement: true
+        forcePlacement: true,
+        scheduleExtraLayoutUpdates: true,
+        waitForExtraLayoutUpdates: true
       }, jsx("div", {
         css: toolbarButtonWrapper
       }, jsx(ToolbarButton, {

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

@@ -6,7 +6,12 @@ import { replaceQueuedUrlWithCard, handleFallbackWithAnalytics } from '../doc';
 // Used for all interactions with the EditorCardProvider.
 // ============================================================================ //
 export var resolveWithProvider = function resolveWithProvider(view, outstandingRequests, provider, request, options) {
-  var handleResolve = provider.resolve(request.url, request.appearance).then(function (resolvedCard) {
+  // When user manually changes appearance from blue link to smart link, we should respect that,
+  var 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;
+  var handleResolve = provider.resolve(request.url, request.appearance, shouldForceAppearance).then(function (resolvedCard) {
     delete outstandingRequests[request.url];
     return resolvedCard;
   }).then(handleResolved(view, request, options), handleRejected(view, request));

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

@@ -8,4 +8,5 @@ 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 var smartCardStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: 2px;\n      padding-right: 2px;\n      padding-top: 0.5em;\n      padding-bottom: 0.5em;\n      margin-bottom: -0.5em;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n"])), SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.border.danger', akEditorDeleteBorder), SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.background.neutral.subtle.hovered', N20), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.border.danger', akEditorDeleteBorder), SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), token('color.border.danger', akEditorDeleteBorder), token('color.background.danger', akEditorDeleteBackground), token('color.border.danger', akEditorDeleteBorder));
+export var FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
+export var smartCardStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: 2px;\n      padding-right: 2px;\n      padding-top: 0.5em;\n      padding-bottom: 0.5em;\n      margin-bottom: -0.5em;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    padding: 0;\n  }\n"])), SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.border.danger', akEditorDeleteBorder), SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.background.neutral.subtle.hovered', N20), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.border.danger', akEditorDeleteBorder), SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), token('color.border.danger', akEditorDeleteBorder), token('color.background.danger', akEditorDeleteBackground), token('color.border.danger', akEditorDeleteBorder), FLOATING_TOOLBAR_LINKPICKER_CLASSNAME);

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

@@ -25,6 +25,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 var removeCard = function removeCard(state, dispatch) {
   if (!(state.selection instanceof NodeSelection)) {
     return false;
@@ -234,9 +235,12 @@ export var floatingToolbar = function floatingToolbar(cardOptions, platform) {
 
     var toolbarOffset = isEmbedCard ? {
       offset: [0, 24]
-    } : {};
+    } : {}; // Applies padding override for when link picker is currently displayed
+
+    var className = pluginState.showLinkingToolbar ? FLOATING_TOOLBAR_LINKPICKER_CLASSNAME : undefined;
     return _objectSpread(_objectSpread({
       title: intl.formatMessage(messages.card),
+      className: className,
       nodeType: nodeType
     }, toolbarOffset), {}, {
       getDomRef: function getDomRef(view) {

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

@@ -5,56 +5,37 @@ var _templateObject, _templateObject2;
 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 var highlightingCodeBlockStyles = function highlightingCodeBlockStyles(props) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .code-block {\n    position: relative;\n    background-image: ", ";\n    background-repeat: no-repeat;\n    background-color: ", ";\n\n    --ds--code--bg-color: transparent;\n\n    background-attachment: local, scroll, scroll;\n    background-size: 8px 100%, 8px 100%, 8px 100%;\n    background-position: 100% 0, 100% 0, 0 0;\n    font-family: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    counter-reset: line;\n    display: flex;\n    min-width: ", "px;\n    cursor: pointer;\n    overflow-x: auto;\n\n    .", " {\n      /* 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 */\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n      color: ", ";\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        &::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          font-size: ", ";\n          line-height: 1.5rem;\n          color: ", ";\n        }\n      }\n    }\n\n    .", " {\n      position: absolute;\n      z-index: 2;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      pointer-events: none;\n      overflow: hidden;\n      tab-size: 4;\n\n      & [data-ds--code--code-block] {\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n\n    .", " {\n      position: relative;\n      z-index: 1;\n      display: flex;\n      flex: 1;\n\n      > code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        /* https://bitbucket.org/atlassian/atlassian-frontend/src/218202daeaf527262c21841e6f88fa058d349ad4/packages/design-system/code/src/themes/themeBuilder.ts#lines-12:17 */\n        font-size: ", ";\n        line-height: 1.5rem;\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n      }\n\n      &[data-debounce='true'] {\n        .", " {\n          display: none;\n        }\n      }\n\n      &:not([data-debounce='true']) {\n        > code:not([data-language='plaintext']):not([data-language='none']):not([data-language='']) {\n          color: transparent;\n          caret-color: ", ";\n        }\n      }\n    }\n  }\n\n  .ProseMirror li > .code-block {\n    margin: 0;\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px\n      ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n"])), 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
+      light: N20,
+      dark: DN50
     })(props),
     width: '8px'
   }), 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), akEditorCodeFontFamily, borderRadius(), blockNodesVerticalMargin, akEditorTableCellMinWidth, codeBlockClassNames.gutter, 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), gridSize(), 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), relativeFontSizeToBase16(fontSize()), 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), codeBlockClassNames.highlighting, relativeFontSizeToBase16(fontSize()), codeBlockClassNames.content, relativeFontSizeToBase16(fontSize()), borderRadius(), gridSize(), codeBlockClassNames.highlighting, themed({
-    light: token('color.text', colors.N800),
-    dark: token('color.text', colors.DN500)
-  })(props), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, token('color.border.danger', akEditorDeleteBorder), codeBlockClassNames.gutter, token('color.blanket.danger', colors.R75), token('color.text.danger', akEditorDeleteIconColor), codeBlockClassNames.content, token('color.background.danger', akEditorDeleteBackground), codeBlockClassNames.gutter, token('color.blanket.danger', 'rgba(255, 143, 115, 0.5)'), token('color.text.danger', akEditorDeleteIconColor), codeBlockClassNames.content, token('color.background.danger', 'rgba(255, 189, 173, 0.5)'));
+    light: token('color.text', N800),
+    dark: token('color.text', DN500)
+  })(props), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, token('color.border.danger', akEditorDeleteBorder), codeBlockClassNames.gutter, token('color.blanket.danger', R75), token('color.text.danger', akEditorDeleteIconColor), codeBlockClassNames.content, token('color.background.danger', akEditorDeleteBackground), codeBlockClassNames.gutter, token('color.blanket.danger', 'rgba(255, 143, 115, 0.5)'), token('color.text.danger', akEditorDeleteIconColor), codeBlockClassNames.content, token('color.background.danger', 'rgba(255, 189, 173, 0.5)'));
 };
 export var codeBlockStyles = function codeBlockStyles(props) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ProseMirror .code-block {\n    position: relative;\n    background-image: ", ";\n\n    --ds--code--bg-color: transparent;\n\n    background-repeat: no-repeat;\n    background-color: ", ";\n    background-attachment: local, scroll, scroll;\n    background-size: 8px 100%, 8px 100%, 8px 100%;\n    background-position: 100% 0, 100% 0, 0 0;\n    font-family: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    counter-reset: line;\n    display: flex;\n    min-width: ", "px;\n    cursor: pointer;\n    overflow-x: auto;\n\n    .", " {\n      /* 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 */\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        &::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          font-size: ", ";\n          line-height: 1.5rem;\n          color: ", ";\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        /* https://bitbucket.org/atlassian/atlassian-frontend/src/218202daeaf527262c21841e6f88fa058d349ad4/packages/design-system/code/src/themes/themeBuilder.ts#lines-12:17 */\n        font-size: ", ";\n        line-height: 1.5rem;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n      }\n    }\n  }\n\n  .ProseMirror li > .code-block {\n    margin: 0;\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n"])), 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'
-  }), themed({
-    light: token('color.background.neutral', colors.N20),
-    dark: token('color.background.neutral', colors.DN50)
-  })(props), akEditorCodeFontFamily, borderRadius(), blockNodesVerticalMargin, akEditorTableCellMinWidth, codeBlockClassNames.gutter, themed({
-    light: token('color.background.neutral', colors.N30),
-    dark: token('color.background.neutral', colors.DN20)
-  })(props), gridSize(), relativeFontSizeToBase16(fontSize()), themed({
-    light: token('color.text', colors.N400),
-    dark: token('color.text', colors.DN400)
-  })(props), codeBlockClassNames.content, relativeFontSizeToBase16(fontSize()), themed({
-    light: token('color.text', colors.N800),
-    dark: token('color.text', colors.DN800)
-  })(props), borderRadius(), gridSize(), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, akEditorDeleteBorder, codeBlockClassNames.gutter, token('color.blanket.danger', colors.R75), token('color.text.danger', akEditorDeleteIconColor), codeBlockClassNames.content, token('color.background.danger', akEditorDeleteBackground), codeBlockClassNames.gutter, token('color.blanket.danger', 'rgba(255, 143, 115, 0.5)'), token('color.text.danger', akEditorDeleteIconColor), codeBlockClassNames.content, token('color.background.danger', 'rgba(255, 189, 173, 0.5)'));
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", "\n  }\n\n  .ProseMirror li > .code-block {\n    margin: 0;\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n"])), codeBlockSharedStyles(props), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, akEditorDeleteBorder, codeBlockClassNames.gutter, token('color.blanket.danger', R75), token('color.text.danger', akEditorDeleteIconColor), codeBlockClassNames.content, token('color.background.danger', akEditorDeleteBackground), codeBlockClassNames.gutter, token('color.blanket.danger', 'rgba(255, 143, 115, 0.5)'), token('color.text.danger', akEditorDeleteIconColor), codeBlockClassNames.content, token('color.background.danger', 'rgba(255, 189, 173, 0.5)'));
 };

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

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

package/dist/esm/plugins/copy-button/commands.js

@@ -0,0 +1,66 @@
+import { findSelectedNodeOfType, findParentNodeOfType } from 'prosemirror-utils';
+import { pluginKey } from './pm-plugins/plugin-key';
+import { hoverDecoration } from '../base/pm-plugins/decoration';
+import { DOMSerializer } from 'prosemirror-model';
+import { copyHTMLToClipboard } from '../../utils/clipboard';
+export var copy = function copy(nodeType) {
+  return function (state, dispatch) {
+    var tr = state.tr,
+        schema = state.schema; // This command should only be triggered by the Copy button in the floating toolbar
+    // which is only visible when selection is inside the target node
+
+    var node = findSelectedNodeOfType(nodeType)(tr.selection);
+
+    if (!node) {
+      node = findParentNodeOfType(nodeType)(tr.selection);
+    }
+
+    if (!node) {
+      return false;
+    }
+
+    var domNode = DOMSerializer.fromSchema(schema).serializeNode(node.node);
+    var div = document.createElement('div');
+    div.appendChild(domNode); // The "0 0" refers to the start and end depth of the slice
+    // since we're coping the block node only, it will always be 0 0
+    // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
+
+    div.firstChild.setAttribute('data-pm-slice', '0 0 []');
+    copyHTMLToClipboard(div.innerHTML);
+    var copyToClipboardTr = tr;
+    copyToClipboardTr.setMeta(pluginKey, {
+      copied: true
+    });
+
+    if (dispatch) {
+      dispatch(copyToClipboardTr);
+    }
+
+    return true;
+  };
+};
+export var resetCopiedState = function resetCopiedState(nodeType, onMouseLeave) {
+  return function (state, dispatch) {
+    var customTr = state.tr; // Avoid multipe dispatch
+    // https://product-fabric.atlassian.net/wiki/spaces/E/pages/2241659456/All+about+dispatch+and+why+there+shouldn+t+be+multiple#How-do-I-avoid-them%3F
+
+    var customDispatch = function customDispatch(tr) {
+      customTr = tr;
+    };
+
+    onMouseLeave ? onMouseLeave(state, customDispatch) : hoverDecoration(nodeType, false)(state, customDispatch);
+    var copyButtonState = pluginKey.getState(state);
+
+    if (copyButtonState !== null && copyButtonState !== void 0 && copyButtonState.copied) {
+      customTr.setMeta(pluginKey, {
+        copied: false
+      });
+    }
+
+    if (dispatch) {
+      dispatch(customTr);
+    }
+
+    return true;
+  };
+};

package/dist/esm/plugins/copy-button/index.js

@@ -0,0 +1,17 @@
+import createPlugin from './pm-plugins/main';
+
+var copyButtonPlugin = function copyButtonPlugin() {
+  return {
+    name: 'copyButton',
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'copyButton',
+        plugin: function plugin() {
+          return createPlugin();
+        }
+      }];
+    }
+  };
+};
+
+export default copyButtonPlugin;

package/dist/esm/plugins/copy-button/pm-plugins/main.js

@@ -0,0 +1,26 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { pluginKey } from './plugin-key';
+export function copyButtonPlugin() {
+  return new SafePlugin({
+    state: {
+      init: function init() {
+        return {
+          copied: false
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(pluginKey);
+
+        if ((meta === null || meta === void 0 ? void 0 : meta.copied) !== undefined) {
+          return {
+            copied: meta.copied
+          };
+        }
+
+        return pluginState;
+      }
+    },
+    key: pluginKey
+  });
+}
+export default copyButtonPlugin;

package/dist/esm/plugins/copy-button/pm-plugins/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from 'prosemirror-state';
+export var pluginKey = new PluginKey('copyButtonPlugin');

package/dist/esm/plugins/copy-button/utils.js

@@ -0,0 +1,31 @@
+import CopyIcon from '@atlaskit/icon/glyph/copy';
+import commonMessages from '../../messages';
+import { hoverDecoration } from '../base/pm-plugins/decoration';
+import { copy, resetCopiedState } from './commands';
+import { pluginKey } from './pm-plugins/plugin-key';
+export var getCopyButtonConfig = function getCopyButtonConfig(state, formatMessage, nodeType, onMouseEnter, onMouseLeave) {
+  var copyButtonState = pluginKey.getState(state);
+  return {
+    id: 'editor.floatingToolbar.copy',
+    type: 'button',
+    appearance: 'subtle',
+    icon: CopyIcon,
+    onClick: copy(nodeType),
+    title: formatMessage(copyButtonState !== null && copyButtonState !== void 0 && copyButtonState.copied ? commonMessages.copiedToClipboard : commonMessages.copyToClipboard),
+    onMouseEnter: onMouseEnter || hoverDecoration(nodeType, true, 'ak-editor-selected-node'),
+    onMouseLeave: resetCopiedState(nodeType, onMouseLeave),
+    onFocus: hoverDecoration(nodeType, true, 'ak-editor-selected-node'),
+    onBlur: hoverDecoration(nodeType, false),
+    hideTooltipOnClick: false,
+    tabIndex: null // TODO select and delete styling needs to be removed when keyboard cursor moves away
+    // problem already exist with delete as well
+
+  };
+};
+export var showCopyButton = function showCopyButton(state) {
+  return state && // Check if the Copy button plugin is enabled
+  // @ts-ignore pluginKey.key
+  state.plugins.find(function (p) {
+    return p.key === pluginKey.key;
+  });
+};