@atlaskit/editor-core 171.0.1 → 172.0.0

package/dist/esm/plugins/base/pm-plugins/disable-spell-checking.js

@@ -0,0 +1,72 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { getFeatureFlags } from '../../feature-flags-context';
+import { browser as browserEnv } from '@atlaskit/editor-common/utils';
+
+function getCurrentBrowserAndVersion() {
+  switch (true) {
+    case browserEnv.chrome === true:
+      return {
+        browser: 'chrome',
+        version: browserEnv.chrome_version
+      };
+
+    case browserEnv.ie === true:
+      return {
+        browser: 'ie',
+        version: browserEnv.ie_version
+      };
+
+    case browserEnv.gecko === true:
+      return {
+        browser: 'gecko',
+        version: browserEnv.gecko_version
+      };
+
+    case browserEnv.safari === true:
+      return {
+        browser: 'safari',
+        version: browserEnv.safari_version
+      };
+  }
+
+  return undefined;
+}
+
+export default (function () {
+  return new SafePlugin({
+    key: new PluginKey('disableSpellchecking'),
+    props: {
+      attributes: function attributes(editorState) {
+        var featureFlags = getFeatureFlags(editorState) || undefined;
+
+        if (!featureFlags) {
+          return;
+        }
+
+        var browserConfigFeatureFlag = featureFlags.disableSpellcheckByBrowser;
+        var userCurrentBrowserAndVersion = getCurrentBrowserAndVersion();
+
+        if (!userCurrentBrowserAndVersion || !browserConfigFeatureFlag) {
+          return;
+        }
+
+        var browserVersionDisableRange = browserConfigFeatureFlag[userCurrentBrowserAndVersion.browser];
+
+        if (!browserVersionDisableRange || !browserEnv[userCurrentBrowserAndVersion.browser]) {
+          return;
+        }
+
+        var shouldDisableSpellcheck = !!browserVersionDisableRange.maximum ? userCurrentBrowserAndVersion.version >= browserVersionDisableRange.minimum && userCurrentBrowserAndVersion.version <= browserVersionDisableRange.maximum : browserEnv[userCurrentBrowserAndVersion.browser] && userCurrentBrowserAndVersion.version >= browserVersionDisableRange.minimum;
+
+        if (shouldDisableSpellcheck) {
+          return {
+            spellcheck: 'false'
+          };
+        }
+
+        return;
+      }
+    }
+  });
+});

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

@@ -62,7 +62,7 @@ var cardPlugin = function cardPlugin(options) {
       });
     },
     pluginsOptions: {
-      floatingToolbar: floatingToolbar(options, options.platform)
+      floatingToolbar: floatingToolbar(options, options.platform, options.linkPicker)
     }
   };
 };

package/dist/esm/plugins/card/nodeviews/embedCard.js

@@ -17,7 +17,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import { Card as SmartCard } from '@atlaskit/smart-card';
+import { Card as SmartCard, EmbedResizeMessageListener } from '@atlaskit/smart-card';
 import PropTypes from 'prop-types';
 import rafSchedule from 'raf-schd';
 import { Card } from './genericCard';
@@ -31,7 +31,6 @@ import { createDisplayGrid } from '../../../plugins/grid';
 import WithPluginState from '../../../ui/WithPluginState';
 import { pluginKey as widthPluginKey } from '../../width';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '../../../utils/rich-media-utils';
-import { EmbedResizeMessageListener } from '@atlaskit/smart-card';
 import { pluginKey as tableResizePluginKey } from '../../table/pm-plugins/table-resizing';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {

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

@@ -26,6 +26,7 @@ import { messages } from './messages';
 import buildLayoutButtons from '../../ui/MediaAndEmbedsToolbar';
 import { buildVisitedLinkPayload } from '../../utils/linking-utils';
 import { FLOATING_TOOLBAR_LINKPICKER_CLASSNAME } from './styles';
+import { getCopyButtonConfig, showCopyButton } from '../copy-button/toolbar';
 export var removeCard = function removeCard(state, dispatch) {
   if (!(state.selection instanceof NodeSelection)) {
     return false;
@@ -102,6 +103,10 @@ var generateDeleteButton = function generateDeleteButton(node, state, intl) {
     onClick: removeCard
   };
 
+  var copyButton = _toConsumableArray(state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, node.type), {
+    type: 'separator'
+  }] : []);
+
   if (node.type === inlineCard) {
     var unlinkButtonWithSeparator = [{
       id: 'editor.link.unlink',
@@ -112,13 +117,13 @@ var generateDeleteButton = function generateDeleteButton(node, state, intl) {
     }, {
       type: 'separator'
     }];
-    return [].concat(unlinkButtonWithSeparator, [removeButton]);
+    return [].concat(unlinkButtonWithSeparator, _toConsumableArray(copyButton), [removeButton]);
   }
 
-  return [removeButton];
+  return [].concat(_toConsumableArray(copyButton), [removeButton]);
 };
 
-var generateToolbarItems = function generateToolbarItems(state, intl, providerFactory, cardOptions, platform) {
+var generateToolbarItems = function generateToolbarItems(state, intl, providerFactory, cardOptions, platform, linkPicker) {
   return function (node) {
     var _titleUrlPairFromNode2 = titleUrlPairFromNode(node),
         url = _titleUrlPairFromNode2.url;
@@ -144,6 +149,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
     if (pluginState.showLinkingToolbar && platform !== 'mobile') {
       return [buildEditLinkToolbar({
         providerFactory: providerFactory,
+        linkPicker: linkPicker,
         node: node
       })];
     } else {
@@ -211,7 +217,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
   };
 };
 
-export var floatingToolbar = function floatingToolbar(cardOptions, platform) {
+export var floatingToolbar = function floatingToolbar(cardOptions, platform, linkPickerOptions) {
   return function (state, intl, providerFactory) {
     var _state$schema$nodes = state.schema.nodes,
         inlineCard = _state$schema$nodes.inlineCard,
@@ -256,7 +262,7 @@ export var floatingToolbar = function floatingToolbar(cardOptions, platform) {
 
         return element;
       },
-      items: generateToolbarItems(state, intl, providerFactory, cardOptions, platform)
+      items: generateToolbarItems(state, intl, providerFactory, cardOptions, platform, linkPickerOptions)
     }, pluginState.showLinkingToolbar ? editLinkToolbarConfig : {});
   };
 };

package/dist/esm/plugins/card/ui/EditLinkToolbar.js

@@ -52,6 +52,7 @@ export var EditLinkToolbar = /*#__PURE__*/function (_React$Component) {
       var _this = this;
 
       var _this$props = this.props,
+          linkPickerOptions = _this$props.linkPickerOptions,
           providerFactory = _this$props.providerFactory,
           url = _this$props.url,
           text = _this$props.text,
@@ -59,6 +60,7 @@ export var EditLinkToolbar = /*#__PURE__*/function (_React$Component) {
           _onSubmit = _this$props.onSubmit;
       return /*#__PURE__*/React.createElement(HyperlinkToolbar, {
         view: view,
+        linkPickerOptions: linkPickerOptions,
         providerFactory: providerFactory,
         displayUrl: url,
         displayText: text,
@@ -91,7 +93,8 @@ export var editLink = function editLink(state, dispatch) {
 };
 export var buildEditLinkToolbar = function buildEditLinkToolbar(_ref) {
   var providerFactory = _ref.providerFactory,
-      node = _ref.node;
+      node = _ref.node,
+      linkPicker = _ref.linkPicker;
   return {
     type: 'custom',
     fallback: [],
@@ -104,6 +107,7 @@ export var buildEditLinkToolbar = function buildEditLinkToolbar(_ref) {
       return /*#__PURE__*/React.createElement(EditLinkToolbar, {
         key: idx,
         view: view,
+        linkPickerOptions: linkPicker,
         providerFactory: providerFactory,
         url: displayInfo.url,
         text: displayInfo.title || '',

package/dist/esm/plugins/card/ui/LinkToolbarAppearance.js

@@ -59,8 +59,8 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
         }
       }
 
-      var isSmartLinkSupportedInParent = isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance);
-      var tooltip = isSmartLinkSupportedInParent ? undefined : parentNodeName(editorState, intl);
+      var isBlockCardLinkSupportedInParent = isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance);
+      var isEmbedCardLinkSupportedInParent = allowEmbeds ? isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.embedCard.createChecked({})), currentAppearance) : false;
       var embedOption = allowEmbeds && preview && {
         appearance: 'embed',
         title: intl.formatMessage(messages.embed),
@@ -68,8 +68,8 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
         selected: currentAppearance === 'embed',
         hidden: false,
         testId: 'embed-appearance',
-        disabled: !isSmartLinkSupportedInParent,
-        tooltip: tooltip
+        disabled: !isEmbedCardLinkSupportedInParent,
+        tooltip: isEmbedCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
       };
       var options = [{
         title: intl.formatMessage(messages.url),
@@ -90,8 +90,8 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
         onClick: setSelectedCardAppearance('block'),
         selected: currentAppearance === 'block',
         testId: 'block-appearance',
-        disabled: !isSmartLinkSupportedInParent,
-        tooltip: tooltip
+        disabled: !isBlockCardLinkSupportedInParent,
+        tooltip: isBlockCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
       }];
 
       var dispatchCommand = function dispatchCommand(fn) {
@@ -159,7 +159,7 @@ _defineProperty(LinkToolbarAppearance, "contextTypes", {
   contextAdapter: PropTypes.object
 });
 
-var parentNodeName = function parentNodeName(state, intl) {
+var getUnavailableMessage = function getUnavailableMessage(state, intl) {
   try {
     var parentNode = state.selection.$from.node(1);
     var parentName = intl.formatMessage(nodeNames[parentNode.type.name]);

package/dist/esm/plugins/clipboard/pm-plugins/main.js

@@ -120,8 +120,7 @@ export var sendClipboardAnalytics = function sendClipboardAnalytics(view, dispat
 
   return false;
 };
-
-var getAnalyticsPayload = function getAnalyticsPayload(state, action) {
+export var getAnalyticsPayload = function getAnalyticsPayload(state, action) {
   var selection = state.selection,
       doc = state.doc;
   var selectionAnalyticsPayload = getNodeSelectionAnalyticsPayload(selection) || getRangeSelectionAnalyticsPayload(selection, doc) || getAllSelectionAnalyticsPayload(selection) || getCellSelectionAnalyticsPayload(state);

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

@@ -1,6 +1,7 @@
 import { findParentNodeOfType, findSelectedNodeOfType, removeSelectedNode, removeParentNodeOfType, isNodeSelection } from 'prosemirror-utils';
 import { NodeSelection } from 'prosemirror-state';
 import { pluginKey } from './plugin-key';
+import { copySelectionPluginKey } from './pm-plugins/codeBlockCopySelectionPlugin';
 import { ACTIONS } from './pm-plugins/actions';
 import { copyToClipboard } from '../../utils/clipboard';
 import { addAnalytics } from '../analytics/utils';
@@ -67,6 +68,7 @@ export var copyContentToClipboard = function copyContentToClipboard(state, dispa
       type: ACTIONS.SET_COPIED_TO_CLIPBOARD,
       data: true
     });
+    copyToClipboardTr.setMeta(copySelectionPluginKey, 'remove-selection');
 
     if (dispatch) {
       dispatch(copyToClipboardTr);
@@ -85,10 +87,20 @@ export var resetCopiedState = function resetCopiedState(state, dispatch) {
       type: ACTIONS.SET_COPIED_TO_CLIPBOARD,
       data: false
     });
+    resetCopiedStateTr.setMeta(copySelectionPluginKey, 'remove-selection');
 
     if (dispatch) {
       dispatch(resetCopiedStateTr);
     }
+  } else {
+    var clearSelectionStateTransaction = state.tr;
+    clearSelectionStateTransaction.setMeta(copySelectionPluginKey, 'remove-selection'); // note: dispatch should always be defined when called from the
+    // floating toolbar. Howver the Command type which floating toolbar uses
+    // (and resetCopiedState) uses suggests it's optional.
+
+    if (dispatch) {
+      dispatch(clearSelectionStateTransaction);
+    }
   }
 
   return true;

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

@@ -10,6 +10,7 @@ import { createPlugin } from './pm-plugins/main';
 import { getToolbarConfig } from './toolbar';
 import keymap from './pm-plugins/keymaps';
 import ideUX from './pm-plugins/ide-ux';
+import { codeBlockCopySelectionPlugin } from './pm-plugins/codeBlockCopySelectionPlugin';
 import { addAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, INPUT_METHOD, EVENT_TYPE } from '../analytics';
 import { IconCode } from '../quick-insert/assets';
 import { messages } from '../block-type/messages';
@@ -45,6 +46,11 @@ var codeBlockPlugin = function codeBlockPlugin(options) {
           var schema = _ref2.schema;
           return keymap(schema);
         }
+      }, {
+        name: 'codeBlockCopySelection',
+        plugin: function plugin() {
+          return codeBlockCopySelectionPlugin();
+        }
       }];
     },
     // Workaround for a firefox issue where dom selection is off sync

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

@@ -154,8 +154,6 @@ export var CodeBlockView = /*#__PURE__*/function () {
 
   return CodeBlockView;
 }();
-export var codeBlockNodeView = function codeBlockNodeView() {
-  return function (node, view, getPos) {
-    return new CodeBlockView(node, view, getPos);
-  };
+export var codeBlockNodeView = function codeBlockNodeView(node, view, getPos) {
+  return new CodeBlockView(node, view, getPos);
 };

package/dist/esm/plugins/code-block/pm-plugins/codeBlockCopySelectionPlugin.js

@@ -0,0 +1,112 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { getSelectedNodeOrNodeParentByNodeType } from '../../copy-button/utils';
+export var copySelectionPluginKey = new PluginKey('codeBlockCopySelectionPlugin');
+
+function getSelectionDecorationStartAndEnd(_ref) {
+  var state = _ref.state,
+      transaction = _ref.transaction;
+  var codeBlockNode = getSelectedNodeOrNodeParentByNodeType({
+    nodeType: state.schema.nodes.codeBlock,
+    selection: transaction.selection
+  });
+
+  if (!codeBlockNode) {
+    return {
+      decorationStartAndEnd: undefined
+    };
+  }
+
+  var decorationStartAndEnd = [codeBlockNode.start, codeBlockNode.start + codeBlockNode.node.nodeSize];
+  return {
+    decorationStartAndEnd: decorationStartAndEnd
+  };
+}
+
+export function codeBlockCopySelectionPlugin() {
+  return new SafePlugin({
+    key: copySelectionPluginKey,
+    state: {
+      init: function init() {
+        return {
+          decorationStartAndEnd: undefined
+        };
+      },
+      apply: function apply(transaction, currentCodeBlockCopySelectionPluginState, _oldState, newState) {
+        switch (transaction.getMeta(copySelectionPluginKey)) {
+          case 'show-selection':
+            {
+              return getSelectionDecorationStartAndEnd({
+                state: newState,
+                transaction: transaction
+              });
+            }
+
+          case 'remove-selection':
+            return {
+              decorationStartAndEnd: undefined
+            };
+
+          default:
+            // The contents of the code block can change while the selection is being shown
+            // (either from collab edits -- or from the user continuing to type while hovering
+            // the mouse over the copy button).
+            // This ensures the selection is updated in these cases.
+            if (currentCodeBlockCopySelectionPluginState.decorationStartAndEnd !== undefined) {
+              return getSelectionDecorationStartAndEnd({
+                state: newState,
+                transaction: transaction
+              });
+            }
+
+            return currentCodeBlockCopySelectionPluginState;
+        }
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        if (copySelectionPluginKey.getState(state).decorationStartAndEnd) {
+          var _copySelectionPluginK = _slicedToArray(copySelectionPluginKey.getState(state).decorationStartAndEnd, 2),
+              _start = _copySelectionPluginK[0],
+              _end = _copySelectionPluginK[1];
+
+          return DecorationSet.create(state.doc, [Decoration.inline(_start, _end, {
+            class: 'ProseMirror-fake-text-selection'
+          })]);
+        }
+
+        return DecorationSet.empty;
+      }
+    }
+  });
+}
+export function provideVisualFeedbackForCopyButton(state, dispatch) {
+  var tr = state.tr;
+  tr.setMeta(copySelectionPluginKey, 'show-selection'); // note: dispatch should always be defined when called from the
+  // floating toolbar. Howver the Command type which the floating toolbar
+  // uses suggests it's optional.
+  // Using the type here to protect against future refactors of the
+  // floating toolbar
+
+  if (dispatch) {
+    dispatch(tr);
+  }
+
+  return false;
+}
+export function removeVisualFeedbackForCopyButton(state, dispatch) {
+  var tr = state.tr;
+  tr.setMeta(copySelectionPluginKey, 'remove-selection'); // note: dispatch should always be defined when called from the
+  // floating toolbar. Howver the Command type which the floating toolbar
+  // uses suggests it's optional.
+  // Using the type here to protect against future refactors of the
+  // floating toolbar
+
+  if (dispatch) {
+    dispatch(tr);
+  }
+
+  return false;
+}

package/dist/esm/plugins/code-block/pm-plugins/main.js

@@ -7,16 +7,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { browser } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from 'prosemirror-state';
-import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { codeBlockNodeView } from '../nodeviews/code-block';
-import { highlightingCodeBlockNodeView } from '../nodeviews/highlighting-code-block';
 import { createSelectionClickHandler } from '../../selection/utils';
 import { pluginKey } from '../plugin-key';
 import { ACTIONS } from './actions';
 import { ignoreFollowingMutations, resetShouldIgnoreFollowingMutations } from '../actions';
 import { findCodeBlock } from '../utils';
 import { codeBlockClassNames } from '../ui/class-names';
-import { getFeatureFlags } from '../../feature-flags-context';
 export var createPlugin = function createPlugin(_ref) {
   var _ref$useLongPressSele = _ref.useLongPressSelection,
       useLongPressSelection = _ref$useLongPressSele === void 0 ? false : _ref$useLongPressSele,
@@ -24,8 +21,6 @@ export var createPlugin = function createPlugin(_ref) {
       appearance = _ref.appearance,
       _ref$allowComposition = _ref.allowCompositionInputOverride,
       allowCompositionInputOverride = _ref$allowComposition === void 0 ? false : _ref$allowComposition;
-  var intl = getIntl();
-  var codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
   var handleDOMEvents = {}; // ME-1599: Composition on mobile was causing the DOM observer to mutate the code block
   // incorrecly and lose content when pressing enter in the middle of a code block line.
 
@@ -111,21 +106,7 @@ export var createPlugin = function createPlugin(_ref) {
     key: pluginKey,
     props: {
       nodeViews: {
-        codeBlock: function codeBlock(node, view, getPos) {
-          var featureFlags = getFeatureFlags(view.state); // The appearance being mobile indicates we are in an editor being
-          // rendered by mobile bridge in a web view.
-          // The tooltip is likely to have unexpected behaviour there, with being cut
-          // off, so we disable it. This is also to keep the behaviour consistent with
-          // the rendering in the mobile Native Renderer.
-
-          var codeBidiWarningTooltipEnabled = appearance !== 'mobile';
-          var createCodeBlockNodeView = featureFlags !== null && featureFlags !== void 0 && featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockNodeView({
-            codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
-            codeBidiWarningLabel: codeBidiWarningLabel,
-            codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
-          }) : codeBlockNodeView();
-          return createCodeBlockNodeView(node, view, getPos);
-        }
+        codeBlock: codeBlockNodeView
       },
       handleClickOn: createSelectionClickHandler(['codeBlock'], function (target) {
         return !!(target.closest(".".concat(codeBlockClassNames.gutter)) || target.classList.contains(codeBlockClassNames.content));

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

@@ -1,41 +1,13 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 import { css } from '@emotion/react';
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
-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 { R75 } from '@atlaskit/theme/colors';
+import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } 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: N20,
-      dark: DN50
-    })(props),
-    width: '8px'
-  }), themed({
-    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', N30),
-    dark: token('color.background.neutral', DN20)
-  })(props), gridSize(), themed({
-    light: token('color.text.subtlest', N90),
-    dark: token('color.text.subtlest', DN90)
-  })(props), relativeFontSizeToBase16(fontSize()), themed({
-    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', 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 {\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)'));
+  return css(_templateObject || (_templateObject = _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/toolbar.js

@@ -4,6 +4,7 @@ import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { removeCodeBlock, changeLanguage, copyContentToClipboard, resetCopiedState } from './actions';
 import commonMessages from '../../messages';
+import { provideVisualFeedbackForCopyButton, removeVisualFeedbackForCopyButton } from './pm-plugins/codeBlockCopySelectionPlugin';
 import { hoverDecoration } from '../base/pm-plugins/decoration';
 import { pluginKey } from './plugin-key';
 import { createLanguageList, getLanguageIdentifier, DEFAULT_LANGUAGES } from './language-list';
@@ -69,9 +70,16 @@ export var getToolbarConfig = function getToolbarConfig() {
       type: 'button',
       appearance: 'subtle',
       icon: CopyIcon,
+      // note: copyContentToClipboard contains logic that also removes the
+      // visual feedback for the copy button
       onClick: copyContentToClipboard,
       title: formatMessage(codeBlockState.contentCopied ? commonMessages.copiedToClipboard : commonMessages.copyToClipboard),
+      onMouseEnter: provideVisualFeedbackForCopyButton,
+      // note: resetCopiedState contains logic that also removes the
+      // visual feedback for the copy button
       onMouseLeave: resetCopiedState,
+      onFocus: provideVisualFeedbackForCopyButton,
+      onBlur: removeVisualFeedbackForCopyButton,
       hideTooltipOnClick: false,
       disabled: codeBlockState.isNodeSelected,
       tabIndex: null

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

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

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

@@ -1,36 +1,56 @@
-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) {
+import { getSelectedNodeOrNodeParentByNodeType, toDOM } from './utils';
+import { addAnalytics, ACTION, INPUT_METHOD } from '../analytics';
+import { getAnalyticsPayload } from '../clipboard/pm-plugins/main';
+export var createToolbarCopyCommand = function createToolbarCopyCommand(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);
-    }
+    var node = getSelectedNodeOrNodeParentByNodeType({
+      nodeType: nodeType,
+      selection: 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
+    var domNode = toDOM(node.node, schema);
+
+    if (domNode) {
+      var div = document.createElement('div');
+      div.appendChild(domNode); // if copying inline content
+
+      if (node.node.type.inlineContent) {
+        // The "1 1" refers to the start and end depth of the slice
+        // since we're copying the text inside a paragraph, it will always be 1 1
+        // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
+        div.firstChild.setAttribute('data-pm-slice', '1 1 []');
+      } else {
+        // The "0 0" refers to the start and end depth of the slice
+        // since we're copying 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);
+    }
 
-    div.firstChild.setAttribute('data-pm-slice', '0 0 []');
-    copyHTMLToClipboard(div.innerHTML);
     var copyToClipboardTr = tr;
     copyToClipboardTr.setMeta(pluginKey, {
       copied: true
     });
+    var analyticsPayload = getAnalyticsPayload(state, ACTION.COPIED);
+
+    if (analyticsPayload) {
+      analyticsPayload.attributes.inputMethod = INPUT_METHOD.FLOATING_TB;
+      analyticsPayload.attributes.nodeType = node.node.type.name;
+      addAnalytics(state, copyToClipboardTr, analyticsPayload);
+    }
 
     if (dispatch) {
       dispatch(copyToClipboardTr);