@atlaskit/editor-common 74.13.0 → 74.14.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-common
 
+## 74.14.0
+
+### Minor Changes
+
+- [`9fc1422dec1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9fc1422dec1) - Make `hyperlink` plugin an explicit dependency of `card` plugin. Move card styles and types into editor-common.
+
 ## 74.13.0
 
 ### Minor Changes

package/dist/cjs/card/LinkToolbarButtonGroup.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkToolbarButtonGroup = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _button = require("@atlaskit/button");
+var _ui = require("../ui");
+var _excluded = ["disabled"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/** @jsx jsx */
+/**
+ * Applying `pointer-events: none;` when disabled allows the Tooltip to be displayed
+ */
+var buttonStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: auto;\n"])));
+var buttonStyleNoneEvent = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: none;\n"])));
+var DisallowedWrapper = function DisallowedWrapper(_ref) {
+  var disabled = _ref.disabled,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("div", props);
+};
+
+/**
+ * The button requires `pointer-events: none;` in order to fix the tooltip, hence
+ * leaving us without a disabled cursor, the following fixes this:
+ */
+var defaultWrapperStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n"])));
+var disallowedWrapperStyle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: not-allowed;\n"])));
+var LinkToolbarButtonGroup = function LinkToolbarButtonGroup(_ref2) {
+  var options = _ref2.options;
+  return (0, _react2.jsx)(_button.ButtonGroup, null, options.map(function (_ref3) {
+    var onClick = _ref3.onClick,
+      selected = _ref3.selected,
+      disabled = _ref3.disabled,
+      testId = _ref3.testId,
+      tooltipContent = _ref3.tooltipContent,
+      title = _ref3.title,
+      Icon = _ref3.icon;
+    return (0, _react2.jsx)(DisallowedWrapper, {
+      css: disabled ? disallowedWrapperStyle : defaultWrapperStyle,
+      key: testId,
+      disabled: disabled
+    }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+      css: disabled ? buttonStyleNoneEvent : buttonStyle,
+      title: title,
+      icon: (0, _react2.jsx)(Icon, {
+        size: "medium",
+        label: title
+      }),
+      selected: selected,
+      onClick: onClick,
+      testId: testId,
+      disabled: disabled,
+      tooltipContent: tooltipContent
+    }));
+  }));
+};
+exports.LinkToolbarButtonGroup = LinkToolbarButtonGroup;

package/dist/cjs/card/index.js

@@ -4,6 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.DATASOURCE_INNER_CONTAINER_CLASSNAME = void 0;
+Object.defineProperty(exports, "LinkToolbarButtonGroup", {
+  enumerable: true,
+  get: function get() {
+    return _LinkToolbarButtonGroup.LinkToolbarButtonGroup;
+  }
+});
 Object.defineProperty(exports, "addLinkMetadata", {
   enumerable: true,
   get: function get() {
@@ -22,6 +29,12 @@ Object.defineProperty(exports, "commandWithMetadata", {
     return _utils.commandWithMetadata;
   }
 });
+Object.defineProperty(exports, "getButtonGroupOption", {
+  enumerable: true,
+  get: function get() {
+    return _linkToolbarButtonGroupOptions.getButtonGroupOption;
+  }
+});
 Object.defineProperty(exports, "getLinkMetadataFromTransaction", {
   enumerable: true,
   get: function get() {
@@ -29,4 +42,8 @@ Object.defineProperty(exports, "getLinkMetadataFromTransaction", {
   }
 });
 var _utils = require("./utils");
-var _MediaAndEmbedsToolbar = _interopRequireDefault(require("./MediaAndEmbedsToolbar"));
+var _MediaAndEmbedsToolbar = _interopRequireDefault(require("./MediaAndEmbedsToolbar"));
+var _LinkToolbarButtonGroup = require("./LinkToolbarButtonGroup");
+var _linkToolbarButtonGroupOptions = require("./link-toolbar-button-group-options");
+var DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
+exports.DATASOURCE_INNER_CONTAINER_CLASSNAME = DATASOURCE_INNER_CONTAINER_CLASSNAME;

package/dist/cjs/card/link-toolbar-button-group-options.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getButtonGroupOption = void 0;
+var _messages = require("../messages");
+var _card = require("./ui/assets/card");
+var _embed = require("./ui/assets/embed");
+var _inline = require("./ui/assets/inline");
+var _url = require("./ui/assets/url");
+var appearancePropsMap = {
+  url: {
+    title: _messages.cardMessages.urlTitle,
+    icon: _url.IconUrl
+  },
+  inline: {
+    title: _messages.cardMessages.inlineTitle,
+    icon: _inline.IconInline
+  },
+  block: {
+    title: _messages.cardMessages.blockTitle,
+    icon: _card.IconCard
+  },
+  embed: {
+    title: _messages.cardMessages.embedTitle,
+    icon: _embed.IconEmbed
+  }
+};
+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
+  };
+};
+exports.getButtonGroupOption = getButtonGroupOption;

package/dist/cjs/card/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/card/ui/assets/card.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconCard = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+var IconCardGlyph = function IconCardGlyph(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/_react.default.createElement("path", {
+    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: "currentColor"
+  }));
+};
+var IconCard = function IconCard(props) {
+  return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
+    glyph: IconCardGlyph
+  }, props));
+};
+exports.IconCard = IconCard;

package/dist/cjs/card/ui/assets/embed.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconEmbed = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+var IconEmbedGlyph = function IconEmbedGlyph(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/_react.default.createElement("path", {
+    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: "currentColor"
+  }));
+};
+var IconEmbed = function IconEmbed(props) {
+  return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
+    glyph: IconEmbedGlyph
+  }, props));
+};
+exports.IconEmbed = IconEmbed;

package/dist/cjs/card/ui/assets/inline.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconInline = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+var IconInlineGlyph = function IconInlineGlyph(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/_react.default.createElement("path", {
+    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: "currentColor"
+  }));
+};
+var IconInline = function IconInline(props) {
+  return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
+    glyph: IconInlineGlyph
+  }, props));
+};
+exports.IconInline = IconInline;

package/dist/cjs/card/ui/assets/url.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconUrl = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+var IconUrlGlyph = function IconUrlGlyph(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "6",
+    y: "15",
+    width: "20",
+    height: "2",
+    rx: "1",
+    fill: "currentColor"
+  }));
+};
+var IconUrl = function IconUrl(props) {
+  return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
+    glyph: IconUrlGlyph
+  }, props));
+};
+exports.IconUrl = IconUrl;

package/dist/cjs/messages/card.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = (0, _reactIntlNext.defineMessages)({
+  url: {
+    id: 'fabric.editor.url',
+    defaultMessage: 'Display URL',
+    description: 'Convert the card to become a regular text-based hyperlink.'
+  },
+  block: {
+    id: 'fabric.editor.displayBlock',
+    defaultMessage: 'Display card',
+    description: 'Display link as a card with a rich preview similar to in a Facebook feed with page title, description, and potentially an image.'
+  },
+  inline: {
+    id: 'fabric.editor.displayInline',
+    defaultMessage: 'Display inline',
+    description: 'Display link with the title only.'
+  },
+  embed: {
+    id: 'fabric.editor.displayEmbed',
+    defaultMessage: 'Display embed',
+    description: 'Display link as an embedded object'
+  },
+  link: {
+    id: 'fabric.editor.displayLink',
+    defaultMessage: 'Display as text',
+    description: 'Convert the card to become a regular text-based hyperlink.'
+  },
+  card: {
+    id: 'fabric.editor.cardFloatingControls',
+    defaultMessage: 'Card options',
+    description: 'Options to change card type'
+  },
+  blockCardUnavailable: {
+    id: 'fabric.editor.blockCardUnavailable',
+    defaultMessage: 'The inline link is inside {node} and cannot have its view changed',
+    description: 'Warning message to show the user that this node cannot change its view'
+  },
+  displayOptionUnavailableInParentNode: {
+    id: 'fabric.editor.displayOptionUnavailableInParentNode',
+    defaultMessage: "This display option isn't available inside {node}",
+    description: 'Warning message to show the user that this node option is not available inside a parent node type'
+  },
+  urlTitle: {
+    id: 'fabric.editor.urlTitle',
+    defaultMessage: 'URL',
+    description: 'Title for option to convert the card to become a regular text-based hyperlink.'
+  },
+  blockTitle: {
+    id: 'fabric.editor.blockTitle',
+    defaultMessage: 'Card',
+    description: 'Title for option to display link in the card view.'
+  },
+  inlineTitle: {
+    id: 'fabric.editor.inlineTitle',
+    defaultMessage: 'Inline',
+    description: 'Title for option to display link in the inline view.'
+  },
+  embedTitle: {
+    id: 'fabric.editor.embedTitle',
+    defaultMessage: 'Embed',
+    description: 'Title for option to display link as an embedded object.'
+  },
+  urlDescription: {
+    id: 'fabric.editor.urlDescription',
+    defaultMessage: 'Display link as URL',
+    description: 'Description for option to convert the card to become a regular text-based hyperlink.'
+  },
+  blockDescription: {
+    id: 'fabric.editor.blockDescription',
+    defaultMessage: 'Display more information about a link, including a summary and actions',
+    description: 'Description for option to display link in the card view.'
+  },
+  inlineDescription: {
+    id: 'fabric.editor.inlineDescription',
+    defaultMessage: 'Display link as inline text',
+    description: 'Description for option to display link in the inline view.'
+  },
+  embedDescription: {
+    id: 'fabric.editor.ecombedDescription',
+    defaultMessage: 'Display an interactive preview of a link',
+    description: 'Description for option to display link as an embedded object.'
+  }
+});
+exports.messages = messages;

package/dist/cjs/messages/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "cardMessages", {
+  enumerable: true,
+  get: function get() {
+    return _card.messages;
+  }
+});
 Object.defineProperty(exports, "codeBidiWarningMessages", {
   enumerable: true,
   get: function get() {
@@ -54,6 +60,7 @@ var _unsupportedContent = require("./unsupportedContent");
 var _codeBlockButton = require("./codeBlockButton");
 var _insertBlock = require("./insert-block");
 var _mediaAndEmbedToolbar = require("./media-and-embed-toolbar");
+var _card = require("./card");
 var _default = (0, _reactIntlNext.defineMessages)({
   layoutFixedWidth: {
     id: 'fabric.editor.layoutFixedWidth',

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "74.13.0";
+var packageVersion = "74.14.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/styles/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "CodeBlockSharedCssClassName", {
     return _codeBlock.CodeBlockSharedCssClassName;
   }
 });
+Object.defineProperty(exports, "DATASOURCE_INNER_CONTAINER_CLASSNAME", {
+  enumerable: true,
+  get: function get() {
+    return _smartCard2.DATASOURCE_INNER_CONTAINER_CLASSNAME;
+  }
+});
 Object.defineProperty(exports, "DateSharedCssClassName", {
   enumerable: true,
   get: function get() {
@@ -45,6 +51,12 @@ Object.defineProperty(exports, "EXTENSION_PADDING", {
     return _extension.EXTENSION_PADDING;
   }
 });
+Object.defineProperty(exports, "FLOATING_TOOLBAR_LINKPICKER_CLASSNAME", {
+  enumerable: true,
+  get: function get() {
+    return _smartCard2.FLOATING_TOOLBAR_LINKPICKER_CLASSNAME;
+  }
+});
 Object.defineProperty(exports, "GRID_GUTTER", {
   enumerable: true,
   get: function get() {
@@ -141,6 +153,24 @@ Object.defineProperty(exports, "dateSharedStyle", {
     return _date.dateSharedStyle;
   }
 });
+Object.defineProperty(exports, "editIconStyles", {
+  enumerable: true,
+  get: function get() {
+    return _embedCard.editIconStyles;
+  }
+});
+Object.defineProperty(exports, "embedCardStyles", {
+  enumerable: true,
+  get: function get() {
+    return _embedCard.embedCardStyles;
+  }
+});
+Object.defineProperty(exports, "embedSpacingStyles", {
+  enumerable: true,
+  get: function get() {
+    return _embedCard.embedSpacingStyles;
+  }
+});
 Object.defineProperty(exports, "getOrderedListInlineStyles", {
   enumerable: true,
   get: function get() {
@@ -225,6 +255,12 @@ Object.defineProperty(exports, "smartCardSharedStyles", {
     return _smartCard.smartCardSharedStyles;
   }
 });
+Object.defineProperty(exports, "smartCardStyles", {
+  enumerable: true,
+  get: function get() {
+    return _smartCard2.smartCardStyles;
+  }
+});
 Object.defineProperty(exports, "tableCellBorderWidth", {
   enumerable: true,
   get: function get() {
@@ -328,4 +364,6 @@ var _codeBlock = require("./shared/code-block");
 var _layout = require("./shared/layout");
 var _extension = require("./shared/extension");
 var _resizer = require("./shared/resizer");
-var _grid = require("./shared/grid");
+var _grid = require("./shared/grid");
+var _smartCard2 = require("./shared/smartCard");
+var _embedCard = require("./shared/embedCard");

package/dist/cjs/styles/shared/embedCard.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.embedSpacingStyles = exports.embedCardStyles = exports.editIconStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _templateObject, _templateObject2, _templateObject3;
+var embedCardStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])));
+exports.embedCardStyles = embedCardStyles;
+var embedSpacingStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 10px;\n"])));
+exports.embedSpacingStyles = embedSpacingStyles;
+var editIconStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 20px;\n"])));
+exports.editIconStyles = editIconStyles;

package/dist/cjs/styles/shared/smartCard.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.smartCardStyles = exports.FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = exports.DATASOURCE_INNER_CONTAINER_CLASSNAME = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _colors = require("@atlaskit/theme/colors");
+var _smartCard = require("./smart-card");
+var _templateObject;
+var DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
+exports.DATASOURCE_INNER_CONTAINER_CLASSNAME = DATASOURCE_INNER_CONTAINER_CLASSNAME;
+var FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
+exports.FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = FLOATING_TOOLBAR_LINKPICKER_CLASSNAME;
+var smartCardStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: 2px;\n      padding-right: 2px;\n      padding-top: 0.5em;\n      padding-bottom: 0.5em;\n      margin-bottom: -0.5em;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", ".", " {\n    max-width: 100%;\n    display: flex;\n    justify-content: center;\n\n    .", " {\n      cursor: pointer;\n      background-color: ", ";\n      border-radius: ", ";\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      .", " {\n        ", "\n      }\n    }\n\n    &.danger {\n      .", " {\n        box-shadow: 0 0 0 1px\n          ", ";\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    padding: 0;\n  }\n"])), _smartCard.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.DATASOURCE_CONTAINER, _smartCard.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, DATASOURCE_INNER_CONTAINER_CLASSNAME, "var(--ds-background-neutral-subtle, ".concat(_colors.N0, ")"), "var(--ds-border-radius-100, ".concat(_editorSharedStyles.akEditorRuleBorderRadius, ")"), "var(--ds-border, ".concat(_colors.N40, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, DATASOURCE_INNER_CONTAINER_CLASSNAME, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), DATASOURCE_INNER_CONTAINER_CLASSNAME, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), FLOATING_TOOLBAR_LINKPICKER_CLASSNAME);
+exports.smartCardStyles = smartCardStyles;

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 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 */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.13.0";
+var packageVersion = "74.14.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.13.0",
+	"version": "74.14.0",
 	"sideEffects": false
 }

package/dist/es2019/card/LinkToolbarButtonGroup.js

@@ -0,0 +1,61 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import { ButtonGroup } from '@atlaskit/button';
+import { FloatingToolbarButton as Button } from '../ui';
+
+/**
+ * Applying `pointer-events: none;` when disabled allows the Tooltip to be displayed
+ */
+const buttonStyle = css`
+  pointer-events: auto;
+`;
+const buttonStyleNoneEvent = css`
+  pointer-events: none;
+`;
+const DisallowedWrapper = ({
+  disabled,
+  ...props
+}) => {
+  return jsx("div", props);
+};
+
+/**
+ * The button requires `pointer-events: none;` in order to fix the tooltip, hence
+ * leaving us without a disabled cursor, the following fixes this:
+ */
+const defaultWrapperStyle = css`
+  cursor: pointer;
+`;
+const disallowedWrapperStyle = css`
+  cursor: not-allowed;
+`;
+export const LinkToolbarButtonGroup = ({
+  options
+}) => {
+  return jsx(ButtonGroup, null, options.map(({
+    onClick,
+    selected,
+    disabled,
+    testId,
+    tooltipContent,
+    title,
+    icon: Icon
+  }) => jsx(DisallowedWrapper, {
+    css: disabled ? disallowedWrapperStyle : defaultWrapperStyle,
+    key: testId,
+    disabled: disabled
+  }, jsx(Button, {
+    css: disabled ? buttonStyleNoneEvent : buttonStyle,
+    title: title,
+    icon: jsx(Icon, {
+      size: "medium",
+      label: title
+    }),
+    selected: selected,
+    onClick: onClick,
+    testId: testId,
+    disabled: disabled,
+    tooltipContent: tooltipContent
+  }))));
+};

package/dist/es2019/card/index.js

@@ -1,2 +1,5 @@
 export { addLinkMetadata, getLinkMetadataFromTransaction, commandWithMetadata } from './utils';
-export { default as buildLayoutButtons } from './MediaAndEmbedsToolbar';
+export { default as buildLayoutButtons } from './MediaAndEmbedsToolbar';
+export { LinkToolbarButtonGroup } from './LinkToolbarButtonGroup';
+export { getButtonGroupOption } from './link-toolbar-button-group-options';
+export const DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';