@atlaskit/editor-core 174.0.0 → 175.0.0

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

@@ -2,17 +2,23 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { breakout } from '@atlaskit/adf-schema';
-import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
+import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
 import WithPluginState from '../../ui/WithPluginState';
 import { pluginKey as widthPluginKey } from '../width';
 import LayoutButton from './ui/LayoutButton';
 import { BreakoutCssClassName } from './constants';
 import { pluginKey } from './plugin-key';
-import { parsePx } from '../../utils/dom';
 import { findSupportedNodeForBreakout } from './utils/find-breakout-node';
+import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 
 class BreakoutView {
-  constructor(node, view, eventDispatcher) {
+  constructor(
+  /**
+   * Note: this is actually a PMMark -- however our version
+   * of the prosemirror and prosemirror types mean using PMNode
+   * is not problematic.
+   */
+  mark, view, eventDispatcher) {
     _defineProperty(this, "updateWidth", widthState => {
       // we skip updating the width of breakout nodes if the editorView dom
       // element was hidden (to avoid breakout width and button thrashing
@@ -21,21 +27,34 @@ class BreakoutView {
         return;
       }
 
-      const width = calcBreakoutWidth(this.node.attrs.mode, widthState.width);
-      let newStyle = `width: ${width}; `;
-      const lineLength = widthState.lineLength;
-      const widthPx = parsePx(width);
+      let containerStyle = ``;
+      let contentStyle = ``;
+      let breakoutWidthPx = calcBreakoutWidthPx(this.mark.attrs.mode, widthState.width);
 
-      if (lineLength && widthPx) {
-        const marginLeftPx = -(widthPx - lineLength) / 2;
-        newStyle += `transform: none; margin-left: ${marginLeftPx}px;`;
+      if (widthState.lineLength) {
+        if (breakoutWidthPx < widthState.lineLength) {
+          breakoutWidthPx = widthState.lineLength;
+        }
+
+        containerStyle += `
+        transform: none;
+        display: flex;
+        justify-content: center;
+        `; // 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.
+
+        contentStyle += `
+        min-width: ${breakoutWidthPx}px;
+        transition: min-width 0.5s ${akEditorSwoopCubicBezier};
+      `;
       } 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: ${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
 
@@ -50,9 +69,11 @@ class BreakoutView {
       }
 
       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);
       }
     });
 
@@ -60,10 +81,10 @@ class BreakoutView {
     contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
     const dom = document.createElement('div');
     dom.className = 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;
@@ -118,8 +139,12 @@ function createPlugin({
     key: pluginKey,
     props: {
       nodeViews: {
-        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: (mark, view) => {
+          return new BreakoutView(mark, view, eventDispatcher);
         }
       }
     }

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

@@ -15,7 +15,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 { pluginKey as tableResizePluginKey } from '../../table/pm-plugins/table-resizing';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 export class EmbedCardComponent extends React.PureComponent {
   constructor(...args) {
@@ -137,15 +136,24 @@ export class EmbedCardComponent extends React.PureComponent {
     _defineProperty(this, "saveOriginalDimensionsAttributes", (height, width) => {
       const {
         view
-      } = this.props;
-      const tableResizeState = tableResizePluginKey.getState(view.state); // We are not updating ADF when this function fired while table is resizing.
+      } = this.props; // TODO: ED-15663
+      // Please, do not copy or use this kind of code below
+      // @ts-ignore
+
+      const fakeTableResizePluginKey = {
+        key: 'tableFlexiColumnResizing$',
+        getState: state => {
+          return state['tableFlexiColumnResizing$'];
+        }
+      };
+      const 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/es2019/plugins/card/toolbar.js

@@ -20,7 +20,6 @@ import { messages } from './messages';
 import buildLayoutButtons from '../../ui/MediaAndEmbedsToolbar';
 import { buildOpenedSettingsPayload, buildVisitedLinkPayload } from '../../utils/linking-utils';
 import { FLOATING_TOOLBAR_LINKPICKER_CLASSNAME } from './styles';
-import { getCopyButtonConfig, showCopyButton } from '../copy-button/toolbar';
 import { getFeatureFlags } from '../feature-flags-context';
 export const removeCard = (state, dispatch) => {
   if (!(state.selection instanceof NodeSelection)) {
@@ -129,7 +128,8 @@ export const floatingToolbar = (cardOptions, platform, linkPickerOptions) => {
         return element;
       },
       items: generateToolbarItems(state, intl, providerFactory, cardOptions, platform, linkPickerOptions),
-      ...(pluginState.showLinkingToolbar ? editLinkToolbarConfig : {})
+      ...(pluginState.showLinkingToolbar ? editLinkToolbarConfig : {}),
+      scrollable: pluginState.showLinkingToolbar ? false : true
     };
   };
 };
@@ -202,7 +202,16 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, platfor
       onClick: visitCardLink
     }, {
       type: 'separator'
-    }, ...getUnlinkButtonGroup(state, intl, node, inlineCard), ...getCopyButtonGroup(state, intl, node), ...getSettingsButtonGroup(state, intl), {
+    }, ...getUnlinkButtonGroup(state, intl, node, inlineCard), {
+      type: 'copy-button',
+      items: [{
+        state,
+        formatMessage: intl.formatMessage,
+        nodeType: node.type
+      }, {
+        type: 'separator'
+      }]
+    }, ...getSettingsButtonGroup(state, intl), {
       id: 'editor.link.delete',
       type: 'button',
       appearance: 'danger',
@@ -280,10 +289,4 @@ const getSettingsButtonGroup = (state, intl) => {
   }, {
     type: 'separator'
   }] : [];
-};
-
-const getCopyButtonGroup = (state, intl, node) => {
-  return state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, node.type), {
-    type: 'separator'
-  }] : [];
 };

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

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

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

@@ -94,7 +94,7 @@ export function provideVisualFeedbackForCopyButton(state, dispatch) {
     dispatch(tr);
   }
 
-  return false;
+  return true;
 }
 export function removeVisualFeedbackForCopyButton(state, dispatch) {
   const tr = state.tr;
@@ -108,5 +108,5 @@ export function removeVisualFeedbackForCopyButton(state, dispatch) {
     dispatch(tr);
   }
 
-  return false;
+  return true;
 }

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { R75 } from '@atlaskit/theme/colors';
-import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { token } from '@atlaskit/tokens';
 import { codeBlockClassNames } from './ui/class-names';
 import { codeBlockSharedStyles } from '@atlaskit/editor-common/styles';
@@ -9,8 +9,19 @@ export const codeBlockStyles = props => css`
     ${codeBlockSharedStyles(props)}
   }
 
-  .ProseMirror li > .code-block {
-    margin: 0;
+  .ProseMirror li {
+    /* if same list item has multiple code blocks we need top margin for all but first */
+    > .code-block {
+      margin: ${blockNodesVerticalMargin} 0 0 0;
+    }
+    > .code-block:first-child,
+    > .ProseMirror-gapcursor:first-child + .code-block {
+      margin-top: 0;
+    }
+
+    > div:last-of-type.code-block {
+      margin-bottom: ${blockNodesVerticalMargin};
+    }
   }
 
   .ProseMirror .code-block.${akEditorSelectedNodeClassName}:not(.danger) {

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

@@ -93,7 +93,8 @@ export const getToolbarConfig = (allowCopyToClipboard = false) => (state, {
     title: 'CodeBlock floating controls',
     getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
     nodeType,
-    items: [languageSelect, separator, ...copyToClipboardItems, deleteButton]
+    items: [languageSelect, separator, ...copyToClipboardItems, deleteButton],
+    scrollable: true
   };
 };
 /**

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

@@ -1,59 +1,145 @@
-import { pluginKey } from './pm-plugins/plugin-key';
+import { copyButtonPluginKey } from './pm-plugins/plugin-key';
 import { hoverDecoration } from '../base/pm-plugins/decoration';
 import { copyHTMLToClipboard } from '../../utils/clipboard';
 import { getSelectedNodeOrNodeParentByNodeType, toDOM } from './utils';
 import { addAnalytics, ACTION, INPUT_METHOD } from '../analytics';
 import { getAnalyticsPayload } from '../clipboard/pm-plugins/main';
-export const createToolbarCopyCommand = nodeType => (state, dispatch) => {
+export function createToolbarCopyCommandForMark(markType) {
+  function command(state, dispatch) {
+    const 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.
+      const domNode = toDOM(textNode, state.schema);
+
+      if (domNode) {
+        const div = document.createElement('div');
+        const 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 []');
+        copyHTMLToClipboard(div.innerHTML);
+      }
+
+      const copyToClipboardTr = state.tr;
+      copyToClipboardTr.setMeta(copyButtonPluginKey, {
+        copied: true
+      });
+      const analyticsPayload = getAnalyticsPayload(state, ACTION.COPIED);
+
+      if (analyticsPayload) {
+        analyticsPayload.attributes.inputMethod = INPUT_METHOD.FLOATING_TB;
+        analyticsPayload.attributes.markType = markType.name;
+        addAnalytics(state, copyToClipboardTr, analyticsPayload);
+      }
+
+      dispatch(copyToClipboardTr);
+    }
+
+    return true;
+  }
+
+  return command;
+}
+export function getProvideMarkVisualFeedbackForCopyButtonCommand(markType) {
+  function provideMarkVisualFeedbackForCopyButtonCommand(state, dispatch) {
+    const tr = state.tr;
+    tr.setMeta(copyButtonPluginKey, {
+      showSelection: true,
+      markType
+    });
+
+    if (dispatch) {
+      dispatch(tr);
+    }
+
+    return true;
+  }
+
+  return provideMarkVisualFeedbackForCopyButtonCommand;
+}
+export function removeMarkVisualFeedbackForCopyButtonCommand(state, dispatch) {
+  const tr = state.tr;
+  tr.setMeta(copyButtonPluginKey, {
+    removeSelection: true
+  });
+  const copyButtonState = copyButtonPluginKey.getState(state);
+
+  if (copyButtonState !== null && copyButtonState !== void 0 && copyButtonState.copied) {
+    tr.setMeta(copyButtonPluginKey, {
+      copied: false
+    });
+  }
+
+  if (dispatch) {
+    dispatch(tr);
+  }
+
+  return true;
+}
+export const createToolbarCopyCommandForNode = nodeType => (state, dispatch) => {
   const {
     tr,
     schema
   } = state; // 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
 
-  let node = getSelectedNodeOrNodeParentByNodeType({
+  let contentNodeWithPos = getSelectedNodeOrNodeParentByNodeType({
     nodeType,
     selection: tr.selection
   });
 
-  if (!node) {
+  if (!contentNodeWithPos) {
     return false;
   }
 
-  const domNode = toDOM(node.node, schema);
-
-  if (domNode) {
-    const 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);
-  }
-
   const copyToClipboardTr = tr;
-  copyToClipboardTr.setMeta(pluginKey, {
+  copyToClipboardTr.setMeta(copyButtonPluginKey, {
     copied: true
   });
   const analyticsPayload = getAnalyticsPayload(state, ACTION.COPIED);
 
   if (analyticsPayload) {
     analyticsPayload.attributes.inputMethod = INPUT_METHOD.FLOATING_TB;
-    analyticsPayload.attributes.nodeType = node.node.type.name;
+    analyticsPayload.attributes.nodeType = contentNodeWithPos.node.type.name;
     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.
+    const domNode = toDOM(contentNodeWithPos.node, schema);
+
+    if (domNode) {
+      const 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 []');
+      }
+
+      copyHTMLToClipboard(div.innerHTML);
+    }
+
+    copyToClipboardTr.setMeta('scrollIntoView', false);
     dispatch(copyToClipboardTr);
   }
 
@@ -68,10 +154,10 @@ export const resetCopiedState = (nodeType, onMouseLeave) => (state, dispatch) =>
   };
 
   onMouseLeave ? onMouseLeave(state, customDispatch) : hoverDecoration(nodeType, false)(state, customDispatch);
-  const copyButtonState = pluginKey.getState(state);
+  const copyButtonState = copyButtonPluginKey.getState(state);
 
   if (copyButtonState !== null && copyButtonState !== void 0 && copyButtonState.copied) {
-    customTr.setMeta(pluginKey, {
+    customTr.setMeta(copyButtonPluginKey, {
       copied: false
     });
   }

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

@@ -1,28 +1,104 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { pluginKey } from './plugin-key';
+import { DecorationSet } from 'prosemirror-view';
+import { copyButtonPluginKey } from './plugin-key';
+
+function getMarkSelectionDecorationStartAndEnd({
+  markType,
+  transaction
+}) {
+  const headHesolvedPos = transaction.selection.$head;
+  const textNodeIndex = transaction.selection.$head.index();
+  const textNode = headHesolvedPos.parent.maybeChild(textNodeIndex);
+  let textNodeOffset = 0;
+  headHesolvedPos.parent.forEach((_node, nodeOffset, index) => {
+    if (index === textNodeIndex) {
+      textNodeOffset = nodeOffset;
+    }
+  });
+  const start = headHesolvedPos.start(headHesolvedPos.depth) + textNodeOffset;
+  const end = start + textNode.text.length;
+  return {
+    start,
+    end,
+    markType
+  };
+}
+
 export function copyButtonPlugin() {
   return new SafePlugin({
+    key: copyButtonPluginKey,
     state: {
       init() {
         return {
-          copied: false
+          copied: false,
+          markSelection: undefined
         };
       },
 
-      apply(tr, pluginState) {
-        const meta = tr.getMeta(pluginKey);
+      apply(tr, currentPluginState) {
+        const meta = tr.getMeta(copyButtonPluginKey);
 
         if ((meta === null || meta === void 0 ? void 0 : meta.copied) !== undefined) {
           return {
-            copied: meta.copied
+            copied: meta.copied,
+            markSelection: undefined
+          };
+        }
+
+        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
           };
         }
 
-        return pluginState;
+        if (currentPluginState.markSelection) {
+          return {
+            copied: currentPluginState.copied,
+            markSelection: getMarkSelectionDecorationStartAndEnd({
+              markType: currentPluginState.markSelection.markType,
+              transaction: tr
+            })
+          };
+        }
+
+        return currentPluginState;
       }
 
     },
-    key: pluginKey
+    props: {
+      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 DecorationSet.empty;
+      }
+
+    }
   });
 }
 export default copyButtonPlugin;

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

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

package/dist/es2019/plugins/copy-button/toolbar.js

@@ -1,29 +1,86 @@
 import CopyIcon from '@atlaskit/icon/glyph/copy';
 import commonMessages from '../../messages';
 import { hoverDecoration } from '../base/pm-plugins/decoration';
-import { createToolbarCopyCommand, resetCopiedState } from './commands';
-import { pluginKey } from './pm-plugins/plugin-key';
-export const getCopyButtonConfig = (state, formatMessage, nodeType, onMouseEnter, onMouseLeave) => {
-  const copyButtonState = pluginKey.getState(state);
+import { createToolbarCopyCommandForNode, createToolbarCopyCommandForMark, resetCopiedState, getProvideMarkVisualFeedbackForCopyButtonCommand, removeMarkVisualFeedbackForCopyButtonCommand } from './commands';
+import { copyButtonPluginKey } from './pm-plugins/plugin-key';
+
+function isSeparator(item) {
+  return (item === null || item === void 0 ? void 0 : item.type) === 'separator';
+}
+
+function isNodeOptions(options) {
+  return 'nodeType' in options && options.nodeType !== undefined;
+}
+
+export function getCopyButtonConfig(options) {
+  const {
+    state,
+    formatMessage,
+    onMouseEnter,
+    onMouseLeave
+  } = options;
+  const copyButtonState = copyButtonPluginKey.getState(state);
+  let buttonActionHandlers;
+
+  if (isNodeOptions(options)) {
+    buttonActionHandlers = {
+      onClick: createToolbarCopyCommandForNode(options.nodeType),
+      // Note for future changes: these two handlers should perform
+      // the same action.
+      onMouseEnter: onMouseEnter || hoverDecoration(options.nodeType, true, 'ak-editor-selected-node'),
+      onFocus: hoverDecoration(options.nodeType, true, 'ak-editor-selected-node'),
+      // Note for future changes: these two handlers should perform
+      // the same action.
+      onMouseLeave: resetCopiedState(options.nodeType, onMouseLeave),
+      onBlur: resetCopiedState(options.nodeType)
+    };
+  } else {
+    buttonActionHandlers = {
+      onClick: createToolbarCopyCommandForMark(options.markType),
+      onMouseEnter: getProvideMarkVisualFeedbackForCopyButtonCommand(options.markType),
+      onFocus: getProvideMarkVisualFeedbackForCopyButtonCommand(options.markType),
+      onMouseLeave: removeMarkVisualFeedbackForCopyButtonCommand,
+      onBlur: removeMarkVisualFeedbackForCopyButtonCommand
+    };
+  }
+
   return {
     id: 'editor.floatingToolbar.copy',
     type: 'button',
     appearance: 'subtle',
     icon: CopyIcon,
-    onClick: createToolbarCopyCommand(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),
+    ...buttonActionHandlers,
     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 const showCopyButton = state => {
   return state && // Check if the Copy button plugin is enabled
-  // @ts-ignore pluginKey.key
-  state.plugins.find(p => p.key === pluginKey.key);
-};
+  // @ts-ignore copyButtonPluginKey.key
+  state.plugins.find(p => p.key === copyButtonPluginKey.key);
+};
+/**
+ * Process floatingToolbar items for copyButton
+ *
+ * If copy button plugin not enabled, remove copy button item from toolbar items
+ * else process copy button to standard floatingtoobarbutton
+ */
+
+export function processCopyButtonItems(state) {
+  return items => items.flatMap(item => {
+    switch (item.type) {
+      case 'copy-button':
+        if (item !== null && item !== void 0 && item.hidden || !showCopyButton(state)) {
+          return [];
+        }
+
+        return item === null || item === void 0 ? void 0 : item.items.map(copyButtonItem => isSeparator(copyButtonItem) ? copyButtonItem : getCopyButtonConfig(copyButtonItem));
+
+      default:
+        return [item];
+    }
+  });
+}