@atlaskit/editor-core 161.0.0 → 162.0.0

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

@@ -1,10 +1,159 @@
-import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["options"];
+
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
+import { MenuGroup, Section, CustomItem } from '@atlaskit/menu';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { B50, N20, B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+import Tooltip from '@atlaskit/tooltip';
+import Dropdown from '../../floating-toolbar/ui/Dropdown';
+export var ICON_HEIGHT = 40;
+export var ICON_WIDTH = 40;
+var iconBoxStyles = css({
+  width: ICON_HEIGHT,
+  height: ICON_WIDTH,
+  overflow: 'hidden',
+  border: '1px solid rgba(223, 225, 229, 0.5)'
+  /* N60 at 50% */
+  ,
+  borderRadius: borderRadius(),
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: token('color.background.default', 'white')
+});
+var primitiveStyles = css({
+  padding: '0.75rem',
+  alignItems: 'flex-start'
+});
+var interactiveStyles = css({
+  '&:active': {
+    backgroundColor: token('color.background.brand.pressed', B50),
+    color: token('color.text.accent.blue', B400)
+  }
+});
+var unselectedStyles = css({
+  '&:hover': {
+    backgroundColor: token('color.background.neutral.subtle.hovered', N20),
+    color: token('color.text.brand', 'currentColor')
+  }
+});
+var selectedOptionStyles = css({
+  backgroundColor: token('color.background.brand.pressed', B50),
+  color: token('color.text.brand', 'currentColor'),
+  '&:hover': {
+    backgroundColor: token('color.background.brand.pressed', B50),
+    color: token('color.text.brand', 'currentColor')
+  }
+});
+var titleOffsetStyles = css({
+  marginTop: '0.125rem'
+});
+
+var getCustomStyles = function getCustomStyles(selected, disabled) {
+  if (disabled) {
+    return [primitiveStyles];
+  }
 
-var LinkToolbarIconDropdown = function LinkToolbarIconDropdown(_ref) {
-  _objectDestructuringEmpty(_ref);
+  if (selected) {
+    return [primitiveStyles, selectedOptionStyles, interactiveStyles];
+  }
+
+  return [primitiveStyles, unselectedStyles, interactiveStyles];
+};
 
-  return /*#__PURE__*/React.createElement("span", null);
+var OptionRoot = function OptionRoot(props) {
+  return jsx("div", _extends({}, props, {
+    tabIndex: 0
+  }));
 };
 
-export default LinkToolbarIconDropdown;
+var Option = function Option(_ref) {
+  var title = _ref.title,
+      description = _ref.description,
+      selected = _ref.selected,
+      disabled = _ref.disabled,
+      _onClick = _ref.onClick,
+      Icon = _ref.icon,
+      testId = _ref.testId,
+      tooltipContent = _ref.tooltipContent,
+      hide = _ref.hide;
+  var option = jsx(CustomItem, {
+    "aria-label": title,
+    component: OptionRoot,
+    iconBefore: jsx("div", {
+      css: iconBoxStyles
+    }, jsx(Icon, {
+      width: 38,
+      height: 38,
+      label: title
+    })),
+    css: getCustomStyles(selected, disabled),
+    description: description,
+    testId: testId,
+    onClick: function onClick(event) {
+      event.preventDefault();
+
+      if (!disabled) {
+        _onClick();
+
+        hide();
+      }
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === 'Space') {
+        event.preventDefault();
+
+        if (!disabled) {
+          _onClick();
+
+          hide();
+        }
+      }
+    },
+    role: "option",
+    "aria-selected": selected,
+    isSelected: selected,
+    isDisabled: disabled,
+    shouldDescriptionWrap: true
+  }, jsx("div", {
+    css: titleOffsetStyles
+  }, title));
+
+  if (tooltipContent) {
+    return jsx(Tooltip, {
+      content: tooltipContent
+    }, option);
+  }
+
+  return option;
+};
+
+export var LinkToolbarIconDropdown = function LinkToolbarIconDropdown(_ref2) {
+  var options = _ref2.options,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  return jsx(Dropdown, _extends({}, rest, {
+    options: {
+      render: function render(_ref3) {
+        var hide = _ref3.hide;
+        return jsx(MenuGroup, null, jsx("div", {
+          role: "listbox"
+        }, jsx(Section, null, options.map(function (props) {
+          return jsx(Option, _extends({
+            key: props.testId
+          }, props, {
+            hide: hide
+          }));
+        }))));
+      },
+      width: 320,
+      height: 200
+    }
+  }));
+};

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

@@ -15,16 +15,18 @@ 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; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from 'prosemirror-utils';
 import { calcColumnsFromPx, calcPctFromPx, calcPxFromColumns, wrappedLayouts } from '@atlaskit/editor-common/ui';
 import { akEditorMediaResizeHandlerPaddingWide, akEditorBreakoutPadding, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
-import { embedHeaderHeight } from '@atlaskit/media-ui/embeds';
+import { embedHeaderHeight } from '@atlaskit/smart-card';
 import { Wrapper } from '../../../ui/Resizer/styled';
 import Resizer from '../../../ui/Resizer';
 import { handleSides, imageAlignmentMap, snapTo } from '../../../ui/Resizer/utils';
 import { calcMediaPxWidth } from '../../../plugins/media/utils/media-single';
-import { EmbedSpacing } from './styled';
+import { embedSpacingStyles } from './styled';
 
 var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
   _inherits(ResizableEmbedCard, _React$Component);
@@ -344,7 +346,7 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
         };
       }
 
-      return /*#__PURE__*/React.createElement("span", {
+      return jsx("span", {
         "data-testid": 'resizable-embed-card-height-definer',
         style: _objectSpread({
           display: 'block',
@@ -376,9 +378,10 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
           enable[side] = false;
         }
       });
-      return /*#__PURE__*/React.createElement(EmbedSpacing, {
+      return jsx("div", {
+        css: embedSpacingStyles,
         "data-testid": "resizable-embed-card-spacing"
-      }, /*#__PURE__*/React.createElement(Wrapper, {
+      }, jsx(Wrapper, {
         layout: layout,
         isResized: !!pctWidth,
         containerWidth: containerWidth || DEFAULT_EMBED_CARD_WIDTH,
@@ -386,7 +389,7 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
           return _this2.wrapper = elem;
         },
         fullWidthMode: fullWidthMode
-      }, /*#__PURE__*/React.createElement(Resizer, _extends({}, this.props, {
+      }, jsx(Resizer, _extends({}, this.props, {
         width: initialWidth // Starting or initial width of embed <iframe> itself.
         ,
         enable: enable,

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

@@ -13,7 +13,7 @@ var IconCardGlyph = function IconCardGlyph(props) {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M8 9c-1.10457 0-2 .89543-2 2v10c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2V11c0-1.10457-.8954-2-2-2H8Zm0 3c0-.5523.44772-1 1-1h2c.5523 0 1 .4477 1 1v2c0 .5523-.4477 1-1 1H9c-.55228 0-1-.4477-1-1v-2Zm5 1c0-.2761.2239-.5.5-.5h10c.2761 0 .5.2239.5.5s-.2239.5-.5.5h-10c-.2761 0-.5-.2239-.5-.5Zm-4 3c-.55228 0-1 .4477-1 1s.44772 1 1 1h14c.5523 0 1-.4477 1-1s-.4477-1-1-1H9Zm-1 4c0-.5523.44772-1 1-1h6c.5523 0 1 .4477 1 1s-.4477 1-1 1H9c-.55228 0-1-.4477-1-1Z",
-    fill: "#42526E"
+    fill: "currentColor"
   }));
 };
 

package/dist/esm/plugins/card/ui/assets/embed.js

@@ -13,7 +13,7 @@ var IconEmbedGlyph = function IconEmbedGlyph(props) {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M8 6c-1.10457 0-2 .89543-2 2v16c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2V8c0-1.10457-.8954-2-2-2H8Zm1 2c-.55228 0-1 .44772-1 1v2c0 .5523.44772 1 1 1h2c.5523 0 1-.4477 1-1V9c0-.55228-.4477-1-1-1H9Zm4.5 1.5c-.2761 0-.5.22386-.5.5 0 .2761.2239.5.5.5h10c.2761 0 .5-.2239.5-.5 0-.27614-.2239-.5-.5-.5h-10ZM9 14c-.55228 0-1 .4477-1 1v8c0 .5523.44772 1 1 1h14c.5523 0 1-.4477 1-1v-8c0-.5523-.4477-1-1-1H9Zm6 2.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Zm0 5.5-1-1-2 2h8v-1.8L18 19l-3 3Z",
-    fill: "#42526E"
+    fill: "currentColor"
   }));
 };
 

package/dist/esm/plugins/card/ui/assets/inline.js

@@ -13,7 +13,7 @@ var IconInlineGlyph = function IconInlineGlyph(props) {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M8 12c-1.10457 0-2 .8954-2 2v4c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2v-4c0-1.1046-.8954-2-2-2H8Zm0 3c0-.5523.44772-1 1-1h2c.5523 0 1 .4477 1 1v2c0 .5523-.4477 1-1 1H9c-.55228 0-1-.4477-1-1v-2Zm5 1c0-.2761.2239-.5.5-.5h10c.2761 0 .5.2239.5.5s-.2239.5-.5.5h-10c-.2761 0-.5-.2239-.5-.5Z",
-    fill: "#42526E"
+    fill: "currentColor"
   }));
 };
 

package/dist/esm/plugins/card/ui/assets/url.js

@@ -15,7 +15,7 @@ var IconUrlGlyph = function IconUrlGlyph(props) {
     width: "20",
     height: "2",
     rx: "1",
-    fill: "#42526E"
+    fill: "currentColor"
   }));
 };
 

package/dist/esm/plugins/card/ui/link-toolbar-button-group-options.js

@@ -0,0 +1,45 @@
+import { messages } from '../messages';
+import { IconCard } from './assets/card';
+import { IconEmbed } from './assets/embed';
+import { IconInline } from './assets/inline';
+import { IconUrl } from './assets/url';
+var appearancePropsMap = {
+  url: {
+    title: messages.urlTitle,
+    icon: IconUrl
+  },
+  inline: {
+    title: messages.inlineTitle,
+    icon: IconInline
+  },
+  block: {
+    title: messages.blockTitle,
+    icon: IconCard
+  },
+  embed: {
+    title: messages.embedTitle,
+    icon: IconEmbed
+  }
+};
+export var getButtonGroupOption = function getButtonGroupOption(intl, dispatchCommand, _ref) {
+  var disabled = _ref.disabled,
+      _onClick = _ref.onClick,
+      selected = _ref.selected,
+      appearance = _ref.appearance,
+      testId = _ref.testId,
+      tooltip = _ref.tooltip;
+  var _appearancePropsMap = appearancePropsMap[appearance !== null && appearance !== void 0 ? appearance : 'url'],
+      title = _appearancePropsMap.title,
+      icon = _appearancePropsMap.icon;
+  return {
+    title: intl.formatMessage(title),
+    icon: icon,
+    onClick: function onClick() {
+      return dispatchCommand(_onClick);
+    },
+    disabled: Boolean(disabled),
+    tooltipContent: tooltip || null,
+    testId: testId,
+    selected: selected
+  };
+};

package/dist/esm/plugins/card/ui/link-toolbar-icon-dropdown-options.js

@@ -0,0 +1,51 @@
+import { messages } from '../messages';
+import { IconCard } from './assets/card';
+import { IconEmbed } from './assets/embed';
+import { IconInline } from './assets/inline';
+import { IconUrl } from './assets/url';
+var appearancePropsMap = {
+  url: {
+    title: messages.urlTitle,
+    description: messages.urlDescription,
+    icon: IconUrl
+  },
+  inline: {
+    title: messages.inlineTitle,
+    description: messages.inlineDescription,
+    icon: IconInline
+  },
+  block: {
+    title: messages.blockTitle,
+    description: messages.blockDescription,
+    icon: IconCard
+  },
+  embed: {
+    title: messages.embedTitle,
+    description: messages.embedDescription,
+    icon: IconEmbed
+  }
+};
+export var getIconDropdownOption = function getIconDropdownOption(intl, dispatchCommand, _ref) {
+  var disabled = _ref.disabled,
+      _onClick = _ref.onClick,
+      selected = _ref.selected,
+      appearance = _ref.appearance,
+      testId = _ref.testId,
+      tooltip = _ref.tooltip;
+  var _appearancePropsMap = appearancePropsMap[appearance !== null && appearance !== void 0 ? appearance : 'url'],
+      title = _appearancePropsMap.title,
+      description = _appearancePropsMap.description,
+      icon = _appearancePropsMap.icon;
+  return {
+    title: intl.formatMessage(title),
+    description: intl.formatMessage(description),
+    icon: icon,
+    onClick: function onClick() {
+      return dispatchCommand(_onClick);
+    },
+    selected: Boolean(selected),
+    disabled: Boolean(disabled),
+    tooltipContent: tooltip,
+    testId: testId
+  };
+};

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

@@ -2,6 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2;
 
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 export var embedCardStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .embedCardView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n    }\n\n    .embedCardView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .embedCardView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .embedCardView-content-wrap[layout='wrap-right']\n      + .embedCardView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n  }\n"])));
-export var EmbedSpacing = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0 10px;\n"])));
+export var embedSpacingStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0 10px;\n"])));

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,13 +1,37 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { TextSelection } from 'prosemirror-state';
 import { clipboardPluginKey } from '../plugin-key';
 import { getNodeSelectionAnalyticsPayload, getAllSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload } from '../../selection/utils';
 import { EVENT_TYPE, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../../analytics/types/enums';
+import { DOMSerializer } from 'prosemirror-model';
+import { findParentNodeOfType } from 'prosemirror-utils';
+import { Fragment } from 'prosemirror-model';
 export var createPlugin = function createPlugin(_ref) {
-  var dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+  var dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+      schema = _ref.schema;
+  var editorView;
+
+  var getEditorView = function getEditorView() {
+    return editorView;
+  };
+
   return new SafePlugin({
     key: clipboardPluginKey,
+    view: function view(_view) {
+      editorView = _view;
+      return {
+        update: function update(view) {
+          editorView = view;
+        }
+      };
+    },
     props: {
       handleDOMEvents: {
         cut: function cut(view) {
@@ -16,10 +40,75 @@ export var createPlugin = function createPlugin(_ref) {
         copy: function copy(view) {
           return sendClipboardAnalytics(view, dispatchAnalyticsEvent, ACTION.COPIED);
         }
-      }
+      },
+      clipboardSerializer: createClipboardSerializer(schema, getEditorView)
     }
   });
 };
+/**
+ * Overrides Prosemirror's default clipboardSerializer, in order to fix table row copy/paste bug raised in ED-13003.
+ * This allows us to store the original table’s attributes on the new table that the row is wrapped with when it is being copied.
+ * e.g. keeping the layout on a row that is copied.
+ * We store the default serializer in order to call it after we handle the table row case.
+ */
+
+export var createClipboardSerializer = function createClipboardSerializer(schema, getEditorView) {
+  var oldSerializer = DOMSerializer.fromSchema(schema);
+  var newSerializer = new DOMSerializer(oldSerializer.nodes, oldSerializer.marks);
+  var originalSerializeFragment = newSerializer.serializeFragment.bind(newSerializer);
+
+  newSerializer.serializeFragment = function (content) {
+    var _content$firstChild;
+
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var target = arguments.length > 2 ? arguments[2] : undefined;
+    var editorView = getEditorView();
+    var selection = editorView.state.selection; // We do not need to handle when a user copies a tableRow + other content.
+    // In that scenario it already wraps the Row with correct Table and attributes.
+
+    if (!options.tableWrapperExists) {
+      var i = 0;
+
+      while (i < content.childCount) {
+        var _content$maybeChild;
+
+        if (((_content$maybeChild = content.maybeChild(i)) === null || _content$maybeChild === void 0 ? void 0 : _content$maybeChild.type.name) === 'table') {
+          options.tableWrapperExists = true;
+          break;
+        }
+
+        i++;
+      }
+    } // When the content being copied includes a tableRow that is not already wrapped with a table,
+    // We will wrap it with one ourselves, while preserving the parent table's attributes.
+
+
+    if (((_content$firstChild = content.firstChild) === null || _content$firstChild === void 0 ? void 0 : _content$firstChild.type.name) === 'tableRow' && !options.tableWrapperExists) {
+      // We only want 1 table wrapping the rows.
+      // tableWrapperExist is a custom prop added solely for the purposes of this recursive algorithm.
+      // The function is recursively called for each node in the tree captured in the fragment.
+      // For recursive logic see the bind call above and the prosemirror-model (https://github.com/ProseMirror/prosemirror-model/blob/master/src/to_dom.js#L44
+      // and https://github.com/ProseMirror/prosemirror-model/blob/master/src/to_dom.js#L87)
+      options.tableWrapperExists = true;
+      var parentTable = findParentNodeOfType(schema.nodes.table)(selection);
+      var attributes = parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs;
+      var newTable = schema.nodes.table;
+      var newTableNode = newTable.createChecked(_objectSpread({}, attributes), content);
+      var newContent = Fragment.from(newTableNode); // Pass updated content into original ProseMirror serializeFragment function.
+      // Currently incorrectly typed in @Types. See this GitHub thread: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/57668
+      //@ts-ignore
+
+      return originalSerializeFragment(newContent, options, target);
+    } // If we're not copying any rows, just run default serializeFragment function.
+    // Currently incorrectly typed in @Types. See this GitHub thread: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/57668
+    //@ts-ignore
+
+
+    return originalSerializeFragment(content, options, target);
+  };
+
+  return newSerializer;
+};
 export var sendClipboardAnalytics = function sendClipboardAnalytics(view, dispatchAnalyticsEvent, action) {
   var clipboardAnalyticsPayload = getAnalyticsPayload(view.state, action);
 

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

@@ -2,50 +2,54 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { blockNodesVerticalMargin, akEditorTableCellMinWidth, akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, SelectionStyle, getSelectionStyles, akEditorCodeFontFamily, akEditorSelectedNodeClassName, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { codeBlockClassNames } from './ui/class-names';
-export var highlightingCodeBlockStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .code-block {\n    position: relative;\n    background-image: ", ";\n    background-repeat: no-repeat;\n    background-color: ", ";\n    --ds--code--bg-color: transparent;\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      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: rgba(255, 143, 115, 0.5);\n      color: ", ";\n    }\n\n    .", " {\n      background-color: rgba(255, 189, 173, 0.5);\n    }\n  }\n"])), overflowShadow({
-  background: themed({
+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    --ds--code--bg-color: transparent;\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      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: rgba(255, 143, 115, 0.5);\n      color: ", ";\n    }\n\n    .", " {\n      background-color: rgba(255, 189, 173, 0.5);\n    }\n  }\n"])), overflowShadow({
+    background: themed({
+      light: colors.N20,
+      dark: colors.DN50
+    })(props),
+    width: '8px'
+  }), themed({
     light: colors.N20,
     dark: colors.DN50
-  }),
-  width: '8px'
-}), themed({
-  light: colors.N20,
-  dark: colors.DN50
-}), akEditorCodeFontFamily, borderRadius(), blockNodesVerticalMargin, akEditorTableCellMinWidth, codeBlockClassNames.gutter, themed({
-  light: colors.N30,
-  dark: colors.DN20
-}), gridSize(), themed({
-  light: colors.N90,
-  dark: colors.DN90
-}), relativeFontSizeToBase16(fontSize()), themed({
-  light: colors.N400,
-  dark: colors.DN400
-}), codeBlockClassNames.highlighting, relativeFontSizeToBase16(fontSize()), codeBlockClassNames.content, relativeFontSizeToBase16(fontSize()), borderRadius(), gridSize(), codeBlockClassNames.highlighting, themed({
-  light: colors.N800,
-  dark: colors.DN500
-}), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, akEditorDeleteBorder, codeBlockClassNames.gutter, colors.R75, akEditorDeleteIconColor, codeBlockClassNames.content, akEditorDeleteBackground, codeBlockClassNames.gutter, akEditorDeleteIconColor, codeBlockClassNames.content);
-export var codeBlockStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ProseMirror .code-block {\n    position: relative;\n    background-image: ", ";\n    --ds--code--bg-color: transparent;\n    background-repeat: no-repeat;\n    background-color: ", ";\n    background-attachment: local, scroll, scroll;\n    background-size: 8px 100%, 8px 100%, 8px 100%;\n    background-position: 100% 0, 100% 0, 0 0;\n    font-family: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    counter-reset: line;\n    display: flex;\n    min-width: ", "px;\n    cursor: pointer;\n    overflow-x: auto;\n\n    .", " {\n      /* https://bitbucket.org/atlassian/atlassian-frontend/src/develop/packages/design-system/code/src/themes/themeBuilder.ts#packages/design-system/code/src/themes/themeBuilder.ts-19:28 */\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        &::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          font-size: ", ";\n          line-height: 1.5rem;\n          color: ", ";\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        /* https://bitbucket.org/atlassian/atlassian-frontend/src/218202daeaf527262c21841e6f88fa058d349ad4/packages/design-system/code/src/themes/themeBuilder.ts#lines-12:17 */\n        font-size: ", ";\n        line-height: 1.5rem;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n      }\n    }\n  }\n\n  .ProseMirror li > .code-block {\n    margin: 0;\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: rgba(255, 143, 115, 0.5);\n      color: ", ";\n    }\n\n    .", " {\n      background-color: rgba(255, 189, 173, 0.5);\n    }\n  }\n"])), overflowShadow({
-  background: themed({
+  })(props), akEditorCodeFontFamily, borderRadius(), blockNodesVerticalMargin, akEditorTableCellMinWidth, codeBlockClassNames.gutter, themed({
+    light: colors.N30,
+    dark: colors.DN20
+  })(props), gridSize(), themed({
+    light: colors.N90,
+    dark: colors.DN90
+  })(props), relativeFontSizeToBase16(fontSize()), themed({
+    light: colors.N400,
+    dark: colors.DN400
+  })(props), codeBlockClassNames.highlighting, relativeFontSizeToBase16(fontSize()), codeBlockClassNames.content, relativeFontSizeToBase16(fontSize()), borderRadius(), gridSize(), codeBlockClassNames.highlighting, themed({
+    light: colors.N800,
+    dark: colors.DN500
+  })(props), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, akEditorDeleteBorder, codeBlockClassNames.gutter, colors.R75, akEditorDeleteIconColor, codeBlockClassNames.content, akEditorDeleteBackground, codeBlockClassNames.gutter, akEditorDeleteIconColor, codeBlockClassNames.content);
+};
+export var codeBlockStyles = function codeBlockStyles(props) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ProseMirror .code-block {\n    position: relative;\n    background-image: ", ";\n    --ds--code--bg-color: transparent;\n    background-repeat: no-repeat;\n    background-color: ", ";\n    background-attachment: local, scroll, scroll;\n    background-size: 8px 100%, 8px 100%, 8px 100%;\n    background-position: 100% 0, 100% 0, 0 0;\n    font-family: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    counter-reset: line;\n    display: flex;\n    min-width: ", "px;\n    cursor: pointer;\n    overflow-x: auto;\n\n    .", " {\n      /* https://bitbucket.org/atlassian/atlassian-frontend/src/develop/packages/design-system/code/src/themes/themeBuilder.ts#packages/design-system/code/src/themes/themeBuilder.ts-19:28 */\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        &::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          font-size: ", ";\n          line-height: 1.5rem;\n          color: ", ";\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        /* https://bitbucket.org/atlassian/atlassian-frontend/src/218202daeaf527262c21841e6f88fa058d349ad4/packages/design-system/code/src/themes/themeBuilder.ts#lines-12:17 */\n        font-size: ", ";\n        line-height: 1.5rem;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n      }\n    }\n  }\n\n  .ProseMirror li > .code-block {\n    margin: 0;\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: rgba(255, 143, 115, 0.5);\n      color: ", ";\n    }\n\n    .", " {\n      background-color: rgba(255, 189, 173, 0.5);\n    }\n  }\n"])), overflowShadow({
+    background: themed({
+      light: colors.N20,
+      dark: colors.DN50
+    })(props),
+    width: '8px'
+  }), themed({
     light: colors.N20,
     dark: colors.DN50
-  }),
-  width: '8px'
-}), themed({
-  light: colors.N20,
-  dark: colors.DN50
-}), akEditorCodeFontFamily, borderRadius(), blockNodesVerticalMargin, akEditorTableCellMinWidth, codeBlockClassNames.gutter, themed({
-  light: colors.N30,
-  dark: colors.DN20
-}), gridSize(), relativeFontSizeToBase16(fontSize()), themed({
-  light: colors.N400,
-  dark: colors.DN400
-}), codeBlockClassNames.content, relativeFontSizeToBase16(fontSize()), themed({
-  light: colors.N800,
-  dark: colors.DN800
-}), borderRadius(), gridSize(), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, akEditorDeleteBorder, codeBlockClassNames.gutter, colors.R75, akEditorDeleteIconColor, codeBlockClassNames.content, akEditorDeleteBackground, codeBlockClassNames.gutter, akEditorDeleteIconColor, codeBlockClassNames.content);
+  })(props), akEditorCodeFontFamily, borderRadius(), blockNodesVerticalMargin, akEditorTableCellMinWidth, codeBlockClassNames.gutter, themed({
+    light: colors.N30,
+    dark: colors.DN20
+  })(props), gridSize(), relativeFontSizeToBase16(fontSize()), themed({
+    light: colors.N400,
+    dark: colors.DN400
+  })(props), codeBlockClassNames.content, relativeFontSizeToBase16(fontSize()), themed({
+    light: colors.N800,
+    dark: colors.DN800
+  })(props), borderRadius(), gridSize(), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, akEditorDeleteBorder, codeBlockClassNames.gutter, colors.R75, akEditorDeleteIconColor, codeBlockClassNames.content, akEditorDeleteBackground, codeBlockClassNames.gutter, akEditorDeleteIconColor, codeBlockClassNames.content);
+};

package/dist/esm/plugins/extension/plugin-factory.js

@@ -7,6 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { pluginFactory } from '../../utils/plugin-state-factory';
 import reducer from './reducer';
 import { pluginKey } from './plugin-key';
+import { onSelectionChanged } from './utils';
 var factory = pluginFactory(pluginKey, reducer, {
   mapping: function mapping(tr, state) {
     var _ref = state,
@@ -25,7 +26,8 @@ var factory = pluginFactory(pluginKey, reducer, {
     return _objectSpread(_objectSpread({}, state), {}, {
       positions: positions
     });
-  }
+  },
+  onSelectionChanged: onSelectionChanged
 });
 export var createPluginState = factory.createPluginState;
 export var createCommand = factory.createCommand;