@atlaskit/editor-core 173.0.1 → 175.0.0

package/dist/cjs/plugins/block-type/pm-plugins/keymap.js

@@ -7,10 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = keymapPlugin;
 
-var _prosemirrorCommands = require("prosemirror-commands");
-
-var _prosemirrorInputrules = require("prosemirror-inputrules");
-
 var _prosemirrorHistory = require("prosemirror-history");
 
 var keymaps = _interopRequireWildcard(require("../../../keymaps"));
@@ -21,24 +17,28 @@ var blockTypes = _interopRequireWildcard(require("../types"));
 
 var _keymap = require("../../../utils/keymap");
 
-var _commands2 = require("../../block-type/commands");
+var _commands2 = require("../commands");
+
+var _commands3 = require("../../../utils/commands");
 
 var _analytics = require("../../analytics");
 
+var _utils = require("../utils");
+
 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; }
 
-var tryUndoInputRuleElseUndoHistory = (0, _prosemirrorCommands.chainCommands)(_prosemirrorInputrules.undoInputRule, _prosemirrorHistory.undo);
-
 function keymapPlugin(schema, featureFlags) {
   var list = {};
   keymaps.bindKeymapWithCommand(keymaps.insertNewLine.common, commands.insertNewLineWithAnalytics, list);
   keymaps.bindKeymapWithCommand(keymaps.moveUp.common, commands.createNewParagraphAbove, list);
   keymaps.bindKeymapWithCommand(keymaps.moveDown.common, commands.createNewParagraphBelow, list);
   keymaps.bindKeymapWithCommand(keymaps.findKeyMapForBrowser(keymaps.redo), _prosemirrorHistory.redo, list);
-  keymaps.bindKeymapWithCommand(keymaps.undo.common, featureFlags.useUnpredictableInputRule ? tryUndoInputRuleElseUndoHistory : _prosemirrorHistory.undo, list);
+  keymaps.bindKeymapWithCommand(keymaps.undo.common, _prosemirrorHistory.undo, list);
   keymaps.bindKeymapWithCommand(keymaps.backspace.common, _commands2.cleanUpAtTheStartOfDocument, list);
+  keymaps.bindKeymapWithCommand(keymaps.deleteKey.common, (0, _commands3.deleteEmptyParagraphAndMoveBlockUp)(_utils.isNodeAWrappingBlockNode), list);
+  keymaps.bindKeymapWithCommand(keymaps.forwardDelete.mac, (0, _commands3.deleteEmptyParagraphAndMoveBlockUp)(_utils.isNodeAWrappingBlockNode), list);
 
   if (schema.nodes[blockTypes.BLOCK_QUOTE.nodeName]) {
     keymaps.bindKeymapWithCommand(keymaps.findShortcutByKeymap(keymaps.toggleBlockQuote), (0, _commands2.insertBlockTypesWithAnalytics)(blockTypes.BLOCK_QUOTE.name, _analytics.INPUT_METHOD.KEYBOARD), list);

package/dist/cjs/plugins/block-type/utils.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isNodeAWrappingBlockNode = void 0;
+
+var _types = require("./types");
+
+var isNodeAWrappingBlockNode = function isNodeAWrappingBlockNode(node) {
+  if (!node) {
+    return false;
+  }
+
+  return _types.WRAPPER_BLOCK_TYPES.some(function (blockNode) {
+    return blockNode.name === node.type.name;
+  });
+};
+
+exports.isNodeAWrappingBlockNode = isNodeAWrappingBlockNode;

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

@@ -31,16 +31,22 @@ var _constants = require("./constants");
 
 var _pluginKey = require("./plugin-key");
 
-var _dom = require("../../utils/dom");
-
 var _findBreakoutNode = require("./utils/find-breakout-node");
 
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+
 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; }
 
 var BreakoutView = /*#__PURE__*/function () {
-  function BreakoutView(node, view, eventDispatcher) {
+  function BreakoutView(
+  /**
+   * Note: this is actually a PMMark -- however our version
+   * of the prosemirror and prosemirror types mean using PMNode
+   * is not problematic.
+   */
+  mark, view, eventDispatcher) {
     var _this = this;
 
     (0, _classCallCheck2.default)(this, BreakoutView);
@@ -52,21 +58,27 @@ var BreakoutView = /*#__PURE__*/function () {
         return;
       }
 
-      var width = (0, _utils.calcBreakoutWidth)(_this.node.attrs.mode, widthState.width);
-      var newStyle = "width: ".concat(width, "; ");
-      var lineLength = widthState.lineLength;
-      var widthPx = (0, _dom.parsePx)(width);
+      var containerStyle = "";
+      var contentStyle = "";
+      var breakoutWidthPx = (0, _utils.calcBreakoutWidthPx)(_this.mark.attrs.mode, widthState.width);
+
+      if (widthState.lineLength) {
+        if (breakoutWidthPx < widthState.lineLength) {
+          breakoutWidthPx = widthState.lineLength;
+        }
+
+        containerStyle += "\n        transform: none;\n        display: flex;\n        justify-content: center;\n        "; // There is a delay in the animation because widthState is delayed.
+        // When the editor goes full width the animation for the editor
+        // begins and finishes before widthState can update the new dimensions.
 
-      if (lineLength && widthPx) {
-        var marginLeftPx = -(widthPx - lineLength) / 2;
-        newStyle += "transform: none; margin-left: ".concat(marginLeftPx, "px;");
+        contentStyle += "\n        min-width: ".concat(breakoutWidthPx, "px;\n        transition: min-width 0.5s ").concat(_editorSharedStyles.akEditorSwoopCubicBezier, ";\n      ");
       } else {
         // fallback method
         // (lineLength is not normally undefined, but might be in e.g. SSR or initial render)
         //
         // this approach doesn't work well with position: fixed, so
         // it breaks things like sticky headers
-        newStyle += "transform: translateX(-50%); margin-left: 50%;";
+        containerStyle += "width: ".concat(breakoutWidthPx, "px; transform: translateX(-50%); margin-left: 50%;");
       } // NOTE: This is a hack to ignore mutation since mark NodeView doesn't support
       // `ignoreMutation` life-cycle event. @see ED-9947
 
@@ -81,19 +93,22 @@ var BreakoutView = /*#__PURE__*/function () {
       }
 
       if (typeof _this.dom.style.cssText !== 'undefined') {
-        _this.dom.style.cssText = newStyle;
+        _this.dom.style.cssText = containerStyle;
+        _this.contentDOM.style.cssText = contentStyle;
       } else {
-        _this.dom.setAttribute('style', newStyle);
+        _this.dom.setAttribute('style', containerStyle);
+
+        _this.contentDOM.setAttribute('style', contentStyle);
       }
     });
     var contentDOM = document.createElement('div');
     contentDOM.className = _constants.BreakoutCssClassName.BREAKOUT_MARK_DOM;
     var dom = document.createElement('div');
     dom.className = _constants.BreakoutCssClassName.BREAKOUT_MARK;
-    dom.setAttribute('data-layout', node.attrs.mode);
+    dom.setAttribute('data-layout', mark.attrs.mode);
     dom.appendChild(contentDOM);
     this.dom = dom;
-    this.node = node;
+    this.mark = mark;
     this.view = view;
     this.contentDOM = contentDOM;
     this.eventDispatcher = eventDispatcher;
@@ -149,8 +164,12 @@ function createPlugin(_ref) {
     key: _pluginKey.pluginKey,
     props: {
       nodeViews: {
-        breakout: function breakout(node, view) {
-          return new BreakoutView(node, view, eventDispatcher);
+        // Note: When we upgrade to prosemirror 1.27.2 -- we should
+        // move this to markViews.
+        // See the following link for more details:
+        // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
+        breakout: function breakout(mark, view) {
+          return new BreakoutView(mark, view, eventDispatcher);
         }
       }
     }

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

@@ -55,8 +55,6 @@ var _width = require("../../width");
 
 var _richMediaUtils = require("../../../utils/rich-media-utils");
 
-var _tableResizing = require("../../table/pm-plugins/table-resizing");
-
 var _steps = require("@atlaskit/adf-schema/steps");
 
 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; }
@@ -183,17 +181,24 @@ var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
       return originalLineLength;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveOriginalDimensionsAttributes", function (height, width) {
-      var view = _this.props.view;
-
-      var tableResizeState = _tableResizing.pluginKey.getState(view.state); // We are not updating ADF when this function fired while table is resizing.
+      var view = _this.props.view; // TODO: ED-15663
+      // Please, do not copy or use this kind of code below
+      // @ts-ignore
+
+      var fakeTableResizePluginKey = {
+        key: 'tableFlexiColumnResizing$',
+        getState: function getState(state) {
+          return state['tableFlexiColumnResizing$'];
+        }
+      };
+      var fakeTableResizeState = fakeTableResizePluginKey.getState(view.state); // We are not updating ADF when this function fired while table is resizing.
       // Changing ADF in the middle of resize will break table resize plugin logic
       // (tables will be considered different at the end of the drag and cell size won't be stored)
       // But this is not a big problem, editor user will be seeing latest height anyway (via updated state)
       // And even if page to be saved with slightly outdated height, renderer is capable of reading latest height value
       // when embed loads, and so it won't be a problem.
 
-
-      if (tableResizeState !== null && tableResizeState !== void 0 && tableResizeState.dragging) {
+      if (fakeTableResizeState !== null && fakeTableResizeState !== void 0 && fakeTableResizeState.dragging) {
         return;
       }
 

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

@@ -55,8 +55,6 @@ var _linkingUtils = require("../../utils/linking-utils");
 
 var _styles2 = require("./styles");
 
-var _toolbar = require("../copy-button/toolbar");
-
 var _featureFlagsContext = require("../feature-flags-context");
 
 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); }
@@ -161,7 +159,7 @@ var floatingToolbar = function floatingToolbar(cardOptions, platform, linkPicker
     } : {}; // Applies padding override for when link picker is currently displayed
 
     var className = pluginState.showLinkingToolbar ? _styles2.FLOATING_TOOLBAR_LINKPICKER_CLASSNAME : undefined;
-    return _objectSpread(_objectSpread({
+    return _objectSpread(_objectSpread(_objectSpread({
       title: intl.formatMessage(_messages2.messages.card),
       className: className,
       nodeType: nodeType
@@ -180,7 +178,9 @@ var floatingToolbar = function floatingToolbar(cardOptions, platform, linkPicker
         return element;
       },
       items: generateToolbarItems(state, intl, providerFactory, cardOptions, platform, linkPickerOptions)
-    }, pluginState.showLinkingToolbar ? _EditLinkToolbar.editLinkToolbarConfig : {});
+    }, pluginState.showLinkingToolbar ? _EditLinkToolbar.editLinkToolbarConfig : {}), {}, {
+      scrollable: pluginState.showLinkingToolbar ? false : true
+    });
   };
 };
 
@@ -256,7 +256,16 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         onClick: visitCardLink
       }, {
         type: 'separator'
-      }].concat((0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard)), (0, _toConsumableArray2.default)(getCopyButtonGroup(state, intl, node)), (0, _toConsumableArray2.default)(getSettingsButtonGroup(state, intl)), [{
+      }].concat((0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard)), [{
+        type: 'copy-button',
+        items: [{
+          state: state,
+          formatMessage: intl.formatMessage,
+          nodeType: node.type
+        }, {
+          type: 'separator'
+        }]
+      }], (0, _toConsumableArray2.default)(getSettingsButtonGroup(state, intl)), [{
         id: 'editor.link.delete',
         type: 'button',
         appearance: 'danger',
@@ -335,10 +344,4 @@ var getSettingsButtonGroup = function getSettingsButtonGroup(state, intl) {
   }, {
     type: 'separator'
   }] : [];
-};
-
-var getCopyButtonGroup = function getCopyButtonGroup(state, intl, node) {
-  return state && (0, _toolbar.showCopyButton)(state) ? [(0, _toolbar.getCopyButtonConfig)(state, intl.formatMessage, node.type), {
-    type: 'separator'
-  }] : [];
 };

package/dist/cjs/plugins/card/ui/LinkToolbarIconDropdown.js

@@ -111,7 +111,8 @@ var Option = function Option(_ref) {
       width: 38,
       height: 38,
       label: title
-    })),
+    })) // @ts-ignore Overriding Menu styles is not supported
+    ,
     css: getCustomStyles(selected, disabled),
     description: description,
     testId: testId,

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

@@ -113,7 +113,7 @@ function provideVisualFeedbackForCopyButton(state, dispatch) {
     dispatch(tr);
   }
 
-  return false;
+  return true;
 }
 
 function removeVisualFeedbackForCopyButton(state, dispatch) {
@@ -128,5 +128,5 @@ function removeVisualFeedbackForCopyButton(state, dispatch) {
     dispatch(tr);
   }
 
-  return false;
+  return true;
 }

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

@@ -24,7 +24,7 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _templateObject;
 
 var codeBlockStyles = function codeBlockStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _styles.codeBlockSharedStyles)(props), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _classNames.codeBlockClassNames.gutter, (0, _tokens.token)('color.blanket.danger', _colors.R75), (0, _tokens.token)('color.text.danger', _editorSharedStyles.akEditorDeleteIconColor), _classNames.codeBlockClassNames.content, (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), _classNames.codeBlockClassNames.gutter, (0, _tokens.token)('color.blanket.danger', 'rgba(255, 143, 115, 0.5)'), (0, _tokens.token)('color.text.danger', _editorSharedStyles.akEditorDeleteIconColor), _classNames.codeBlockClassNames.content, (0, _tokens.token)('color.background.danger', 'rgba(255, 189, 173, 0.5)'));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", "\n  }\n\n  .ProseMirror li {\n    /* if same list item has multiple code blocks we need top margin for all but first */\n    > .code-block {\n      margin: ", " 0 0 0;\n    }\n    > .code-block:first-child,\n    > .ProseMirror-gapcursor:first-child + .code-block {\n      margin-top: 0;\n    }\n\n    > div:last-of-type.code-block {\n      margin-bottom: ", ";\n    }\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"])), (0, _styles.codeBlockSharedStyles)(props), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _classNames.codeBlockClassNames.gutter, (0, _tokens.token)('color.blanket.danger', _colors.R75), (0, _tokens.token)('color.text.danger', _editorSharedStyles.akEditorDeleteIconColor), _classNames.codeBlockClassNames.content, (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), _classNames.codeBlockClassNames.gutter, (0, _tokens.token)('color.blanket.danger', 'rgba(255, 143, 115, 0.5)'), (0, _tokens.token)('color.text.danger', _editorSharedStyles.akEditorDeleteIconColor), _classNames.codeBlockClassNames.content, (0, _tokens.token)('color.background.danger', 'rgba(255, 189, 173, 0.5)'));
 };
 
 exports.codeBlockStyles = codeBlockStyles;

package/dist/cjs/plugins/code-block/toolbar.js

@@ -128,7 +128,8 @@ var getToolbarConfig = function getToolbarConfig() {
         return (0, _prosemirrorUtils.findDomRefAtPos)(pos, view.domAtPos.bind(view));
       },
       nodeType: nodeType,
-      items: [languageSelect, separator].concat(copyToClipboardItems, [deleteButton])
+      items: [languageSelect, separator].concat(copyToClipboardItems, [deleteButton]),
+      scrollable: true
     };
   };
 };

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

@@ -3,7 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resetCopiedState = exports.createToolbarCopyCommand = void 0;
+exports.createToolbarCopyCommandForMark = createToolbarCopyCommandForMark;
+exports.createToolbarCopyCommandForNode = void 0;
+exports.getProvideMarkVisualFeedbackForCopyButtonCommand = getProvideMarkVisualFeedbackForCopyButtonCommand;
+exports.removeMarkVisualFeedbackForCopyButtonCommand = removeMarkVisualFeedbackForCopyButtonCommand;
+exports.resetCopiedState = void 0;
 
 var _pluginKey = require("./pm-plugins/plugin-key");
 
@@ -17,55 +21,145 @@ var _analytics = require("../analytics");
 
 var _main = require("../clipboard/pm-plugins/main");
 
-var createToolbarCopyCommand = function createToolbarCopyCommand(nodeType) {
+function createToolbarCopyCommandForMark(markType) {
+  function command(state, dispatch) {
+    var textNode = state.tr.selection.$head.parent.maybeChild(state.tr.selection.$head.index());
+
+    if (!textNode) {
+      return false;
+    }
+
+    if (dispatch) {
+      // As calling copyHTMLToClipboard causes side effects -- we only run this when
+      // dispatch is provided -- as otherwise the consumer is only testing to see if
+      // the action is availble.
+      var domNode = (0, _utils.toDOM)(textNode, state.schema);
+
+      if (domNode) {
+        var div = document.createElement('div');
+        var p = document.createElement('p');
+        div.appendChild(p);
+        p.appendChild(domNode); // 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 []');
+        (0, _clipboard.copyHTMLToClipboard)(div.innerHTML);
+      }
+
+      var copyToClipboardTr = state.tr;
+      copyToClipboardTr.setMeta(_pluginKey.copyButtonPluginKey, {
+        copied: true
+      });
+      var analyticsPayload = (0, _main.getAnalyticsPayload)(state, _analytics.ACTION.COPIED);
+
+      if (analyticsPayload) {
+        analyticsPayload.attributes.inputMethod = _analytics.INPUT_METHOD.FLOATING_TB;
+        analyticsPayload.attributes.markType = markType.name;
+        (0, _analytics.addAnalytics)(state, copyToClipboardTr, analyticsPayload);
+      }
+
+      dispatch(copyToClipboardTr);
+    }
+
+    return true;
+  }
+
+  return command;
+}
+
+function getProvideMarkVisualFeedbackForCopyButtonCommand(markType) {
+  function provideMarkVisualFeedbackForCopyButtonCommand(state, dispatch) {
+    var tr = state.tr;
+    tr.setMeta(_pluginKey.copyButtonPluginKey, {
+      showSelection: true,
+      markType: markType
+    });
+
+    if (dispatch) {
+      dispatch(tr);
+    }
+
+    return true;
+  }
+
+  return provideMarkVisualFeedbackForCopyButtonCommand;
+}
+
+function removeMarkVisualFeedbackForCopyButtonCommand(state, dispatch) {
+  var tr = state.tr;
+  tr.setMeta(_pluginKey.copyButtonPluginKey, {
+    removeSelection: true
+  });
+
+  var copyButtonState = _pluginKey.copyButtonPluginKey.getState(state);
+
+  if (copyButtonState !== null && copyButtonState !== void 0 && copyButtonState.copied) {
+    tr.setMeta(_pluginKey.copyButtonPluginKey, {
+      copied: false
+    });
+  }
+
+  if (dispatch) {
+    dispatch(tr);
+  }
+
+  return true;
+}
+
+var createToolbarCopyCommandForNode = function createToolbarCopyCommandForNode(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 = (0, _utils.getSelectedNodeOrNodeParentByNodeType)({
+    var contentNodeWithPos = (0, _utils.getSelectedNodeOrNodeParentByNodeType)({
       nodeType: nodeType,
       selection: tr.selection
     });
 
-    if (!node) {
+    if (!contentNodeWithPos) {
       return false;
     }
 
-    var domNode = (0, _utils.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 []');
-      }
-
-      (0, _clipboard.copyHTMLToClipboard)(div.innerHTML);
-    }
-
     var copyToClipboardTr = tr;
-    copyToClipboardTr.setMeta(_pluginKey.pluginKey, {
+    copyToClipboardTr.setMeta(_pluginKey.copyButtonPluginKey, {
       copied: true
     });
     var analyticsPayload = (0, _main.getAnalyticsPayload)(state, _analytics.ACTION.COPIED);
 
     if (analyticsPayload) {
       analyticsPayload.attributes.inputMethod = _analytics.INPUT_METHOD.FLOATING_TB;
-      analyticsPayload.attributes.nodeType = node.node.type.name;
+      analyticsPayload.attributes.nodeType = contentNodeWithPos.node.type.name;
       (0, _analytics.addAnalytics)(state, copyToClipboardTr, analyticsPayload);
     }
 
     if (dispatch) {
+      // As calling copyHTMLToClipboard causes side effects -- we only run this when
+      // dispatch is provided -- as otherwise the consumer is only testing to see if
+      // the action is availble.
+      var domNode = (0, _utils.toDOM)(contentNodeWithPos.node, schema);
+
+      if (domNode) {
+        var div = document.createElement('div');
+        div.appendChild(domNode); // if copying inline content
+
+        if (contentNodeWithPos.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 []');
+        }
+
+        (0, _clipboard.copyHTMLToClipboard)(div.innerHTML);
+      }
+
+      copyToClipboardTr.setMeta('scrollIntoView', false);
       dispatch(copyToClipboardTr);
     }
 
@@ -73,7 +167,7 @@ var createToolbarCopyCommand = function createToolbarCopyCommand(nodeType) {
   };
 };
 
-exports.createToolbarCopyCommand = createToolbarCopyCommand;
+exports.createToolbarCopyCommandForNode = createToolbarCopyCommandForNode;
 
 var resetCopiedState = function resetCopiedState(nodeType, onMouseLeave) {
   return function (state, dispatch) {
@@ -86,10 +180,10 @@ var resetCopiedState = function resetCopiedState(nodeType, onMouseLeave) {
 
     onMouseLeave ? onMouseLeave(state, customDispatch) : (0, _decoration.hoverDecoration)(nodeType, false)(state, customDispatch);
 
-    var copyButtonState = _pluginKey.pluginKey.getState(state);
+    var copyButtonState = _pluginKey.copyButtonPluginKey.getState(state);
 
     if (copyButtonState !== null && copyButtonState !== void 0 && copyButtonState.copied) {
-      customTr.setMeta(_pluginKey.pluginKey, {
+      customTr.setMeta(_pluginKey.copyButtonPluginKey, {
         copied: false
       });
     }

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

@@ -8,29 +8,103 @@ exports.default = void 0;
 
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
+var _prosemirrorView = require("prosemirror-view");
+
 var _pluginKey = require("./plugin-key");
 
+function getMarkSelectionDecorationStartAndEnd(_ref) {
+  var markType = _ref.markType,
+      transaction = _ref.transaction;
+  var headHesolvedPos = transaction.selection.$head;
+  var textNodeIndex = transaction.selection.$head.index();
+  var textNode = headHesolvedPos.parent.maybeChild(textNodeIndex);
+  var textNodeOffset = 0;
+  headHesolvedPos.parent.forEach(function (_node, nodeOffset, index) {
+    if (index === textNodeIndex) {
+      textNodeOffset = nodeOffset;
+    }
+  });
+  var start = headHesolvedPos.start(headHesolvedPos.depth) + textNodeOffset;
+  var end = start + textNode.text.length;
+  return {
+    start: start,
+    end: end,
+    markType: markType
+  };
+}
+
 function copyButtonPlugin() {
   return new _safePlugin.SafePlugin({
+    key: _pluginKey.copyButtonPluginKey,
     state: {
       init: function init() {
         return {
-          copied: false
+          copied: false,
+          markSelection: undefined
         };
       },
-      apply: function apply(tr, pluginState) {
-        var meta = tr.getMeta(_pluginKey.pluginKey);
+      apply: function apply(tr, currentPluginState) {
+        var meta = tr.getMeta(_pluginKey.copyButtonPluginKey);
 
         if ((meta === null || meta === void 0 ? void 0 : meta.copied) !== undefined) {
           return {
-            copied: meta.copied
+            copied: meta.copied,
+            markSelection: undefined
           };
         }
 
-        return pluginState;
+        if (meta !== null && meta !== void 0 && meta.showSelection) {
+          return {
+            copied: currentPluginState.copied,
+            markSelection: getMarkSelectionDecorationStartAndEnd({
+              markType: meta.markType,
+              transaction: tr
+            })
+          };
+        }
+
+        if (meta !== null && meta !== void 0 && meta.removeSelection) {
+          return {
+            copied: currentPluginState.copied,
+            markSelection: undefined
+          };
+        }
+
+        if (currentPluginState.markSelection) {
+          return {
+            copied: currentPluginState.copied,
+            markSelection: getMarkSelectionDecorationStartAndEnd({
+              markType: currentPluginState.markSelection.markType,
+              transaction: tr
+            })
+          };
+        }
+
+        return currentPluginState;
       }
     },
-    key: _pluginKey.pluginKey
+    props: {
+      decorations: function decorations(_state) {
+        // Showing visual hints for the hyperlink copy button has been disabled
+        // due to an issue where invalid hyperlink marks cause the floating toolbar
+        // to jump around when the copy button is hovered.
+        // See the following bug for details -- once that is resolved -- the visual
+        // hints can be re enabled.
+        // https://product-fabric.atlassian.net/browse/DTR-722
+        // const copyButtonPluginState = copyButtonPluginKey.getState(
+        //   state,
+        // ) as CopyButtonPluginState;
+        // if (copyButtonPluginState.markSelection) {
+        //   const { start, end } = copyButtonPluginState.markSelection;
+        //   return DecorationSet.create(state.doc, [
+        //     Decoration.inline(start, end, {
+        //       class: 'ProseMirror-fake-text-selection',
+        //     }),
+        //   ]);
+        // }
+        return _prosemirrorView.DecorationSet.empty;
+      }
+    }
   });
 }
 

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.pluginKey = void 0;
+exports.copyButtonPluginKey = void 0;
 
 var _prosemirrorState = require("prosemirror-state");
 
-var pluginKey = new _prosemirrorState.PluginKey('copyButtonPlugin');
-exports.pluginKey = pluginKey;
+var copyButtonPluginKey = new _prosemirrorState.PluginKey('copyButtonPlugin');
+exports.copyButtonPluginKey = copyButtonPluginKey;