@atlaskit/editor-common 76.27.10 → 76.29.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 76.29.0
+
+### Minor Changes
+
+- [#62560](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/62560) [`5ad72b247e6a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5ad72b247e6a) - [ux] ED-20895 Added linking support for inline images
+
+## 76.28.0
+
+### Minor Changes
+
+- [#61685](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61685) [`ac1ec9ea4cd3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ac1ec9ea4cd3) - [ux] Add border mark support to mediaInline in Editor/Renderer
+
 ## 76.27.10
 
 ### Patch Changes

package/dist/cjs/commands/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.addParagraphAtEnd = addParagraphAtEnd;
 exports.clearEditorContent = exports.changeImageAlignment = void 0;
 exports.createParagraphAtEnd = createParagraphAtEnd;
-exports.createToggleBlockMarkOnRange = void 0;
+exports.createToggleInlineMarkOnRange = exports.createToggleBlockMarkOnRange = void 0;
 exports.findCutBefore = findCutBefore;
 Object.defineProperty(exports, "insertBlock", {
   enumerable: true,
@@ -89,6 +89,29 @@ var createToggleBlockMarkOnRange = exports.createToggleBlockMarkOnRange = functi
     return markApplied;
   };
 };
+var createToggleInlineMarkOnRange = exports.createToggleInlineMarkOnRange = function createToggleInlineMarkOnRange(markType, getAttrs) {
+  return function (from, to, tr, state) {
+    var markApplied = false;
+    state.doc.nodesBetween(from, to, function (node, pos, parent) {
+      if (parent !== null && parent !== void 0 && parent.type.allowsMarkType(markType)) {
+        var oldMarks = node.marks.filter(function (mark) {
+          return mark.type === markType;
+        });
+        var _prevAttrs2 = oldMarks.length ? oldMarks[0].attrs : undefined;
+        var newAttrs = getAttrs(_prevAttrs2, node);
+        if (newAttrs !== undefined) {
+          tr.setNodeMarkup(pos, node.type, node.attrs, node.marks.filter(function (mark) {
+            return !markType.excludes(mark.type);
+          }).concat(newAttrs === false ? [] : markType.create(newAttrs)));
+          tr.setSelection(_state.NodeSelection.create(tr.doc, state.selection.from));
+          markApplied = true;
+        }
+      }
+      return;
+    });
+    return markApplied;
+  };
+};
 
 /**
  * Toggles block mark based on the return type of `getAttrs`.

package/dist/cjs/media-inline/constants.js

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.referenceHeights = exports.DEFAULT_INLINE_IMAGE_ASPECT_RATIO = exports.DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_HEIGHT = void 0;
+exports.referenceHeights = exports.DEFAULT_INLINE_IMAGE_BORDER_SIZE = exports.DEFAULT_INLINE_IMAGE_ASPECT_RATIO = exports.DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_HEIGHT = void 0;
 var _typography = require("@atlaskit/theme/typography");
 var DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_WIDTH = 250;
 var DEFAULT_IMAGE_HEIGHT = exports.DEFAULT_IMAGE_HEIGHT = 200;
 var DEFAULT_INLINE_IMAGE_ASPECT_RATIO = exports.DEFAULT_INLINE_IMAGE_ASPECT_RATIO = DEFAULT_IMAGE_WIDTH / DEFAULT_IMAGE_HEIGHT;
+var DEFAULT_INLINE_IMAGE_BORDER_SIZE = exports.DEFAULT_INLINE_IMAGE_BORDER_SIZE = 0;
+
 /**
  * Reference Heights
  *

package/dist/cjs/media-inline/inline-image-wrapper.js

@@ -7,37 +7,25 @@ Object.defineProperty(exports, "__esModule", {
 exports.InlineImageWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-var _constants = require("./constants");
+var _editorPalette = require("@atlaskit/editor-palette");
 var _styles = require("./styles");
-/** @jsx jsx */
-
-var wrapperStyle = (0, _react.css)({
-  display: 'inline-flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  verticalAlign: 'middle',
-  overflow: 'hidden',
-  borderRadius: "var(--ds-border-radius, 3px)",
-  aspectRatio: "var(".concat(_styles.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, ", ").concat(_constants.DEFAULT_INLINE_IMAGE_ASPECT_RATIO, ")")
-});
-var selectedStyle = (0, _react.css)({
-  cursor: 'pointer',
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")")),
-  outline: 'none',
-  borderColor: 'transparent'
-});
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var InlineImageWrapper = exports.InlineImageWrapper = function InlineImageWrapper(_ref) {
+  var _ref2;
   var children = _ref.children,
     isSelected = _ref.isSelected,
-    aspectRatio = _ref.aspectRatio;
-  var style = aspectRatio ? (0, _defineProperty2.default)({}, _styles.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, aspectRatio) : {};
+    aspectRatio = _ref.aspectRatio,
+    borderSize = _ref.borderSize,
+    borderColor = _ref.borderColor;
+  var borderStyleVars = borderSize && borderColor ? (_ref2 = {}, (0, _defineProperty2.default)(_ref2, _styles.INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, borderSize), (0, _defineProperty2.default)(_ref2, _styles.INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, (0, _editorPalette.hexToEditorBorderPaletteColor)(borderColor) || borderColor), _ref2) : {};
+  var aspectStyleVars = aspectRatio ? (0, _defineProperty2.default)({}, _styles.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, aspectRatio) : {};
   return (
     // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
     (0, _react.jsx)("span", {
-      style: style,
+      style: _objectSpread(_objectSpread({}, borderStyleVars), aspectStyleVars),
       className: _styles.INLINE_IMAGE_WRAPPER_CLASS_NAME,
-      css: [wrapperStyle, isSelected && selectedStyle],
+      css: [_styles.wrapperStyle, borderSize && borderColor && _styles.borderStyle, isSelected && _styles.selectedStyle],
       "data-testid": "inline-image-wrapper"
     }, children)
   );

package/dist/cjs/media-inline/media-inline-image-card.js

@@ -25,7 +25,8 @@ var MediaInlineImageCardInternal = exports.MediaInlineImageCardInternal = functi
     alt = _ref.alt,
     isLazy = _ref.isLazy,
     width = _ref.width,
-    height = _ref.height;
+    height = _ref.height,
+    border = _ref.border;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     fileState = _useState2[0],
@@ -115,7 +116,9 @@ var MediaInlineImageCardInternal = exports.MediaInlineImageCardInternal = functi
   }, [width, height, aspectRatio]);
   return (0, _react2.jsx)(_inlineImageWrapper.InlineImageWrapper, {
     isSelected: isSelected,
-    aspectRatio: aspectRatio
+    aspectRatio: aspectRatio,
+    borderColor: border === null || border === void 0 ? void 0 : border.borderColor,
+    borderSize: border === null || border === void 0 ? void 0 : border.borderSize
   }, content(scaledDimension));
 };
 var MediaInlineImageCard = exports.MediaInlineImageCard = (0, _reactIntlNext.injectIntl)(MediaInlineImageCardInternal, {

package/dist/cjs/media-inline/styles.js

@@ -4,16 +4,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mediaInlineImageStyles = exports.INLINE_IMAGE_WRAPPER_CLASS_NAME = exports.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = void 0;
+exports.wrapperStyle = exports.selectedStyle = exports.mediaInlineImageStyles = exports.borderStyle = exports.INLINE_IMAGE_WRAPPER_CLASS_NAME = exports.INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = exports.INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = exports.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
 var _constants = require("./constants");
 var _templateObject, _templateObject2;
 var INLINE_IMAGE_WRAPPER_CLASS_NAME = exports.INLINE_IMAGE_WRAPPER_CLASS_NAME = 'media-inline-image-wrapper';
 var INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = exports.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = '--editor-media-inline-image-aspect-ratio';
+var INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = exports.INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = '--editor-media-inline-image-border-size';
+var INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = exports.INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = '--editor-media-inline-image-border-color';
 var inlineImageHeight = function inlineImageHeight(height) {
   var margin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  > .", ",\n    > .mediaInlineView-content-wrap\n    > .", " {\n    height: ", "px;\n    transform: translateY(", "px);\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, height, margin);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  > span[data-mark-type='border']\n    > .mediaInlineView-content-wrap\n    > .", ",\n    > span[data-mark-type='border']\n    > .", ",\n    > .", ",\n    > .mediaInlineView-content-wrap\n    > .", " {\n    height: ", "px;\n    transform: translateY(", "px);\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, height, margin);
 };
 
 /**
@@ -22,4 +25,25 @@ var inlineImageHeight = function inlineImageHeight(height) {
  * shift in top and bottom and size adjustments to make up for lack of 1to1 size
  * mapping
  */
-var mediaInlineImageStyles = exports.mediaInlineImageStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  // p, h3, and action items\n  .", " {\n    height: ", "px;\n    transform: translateY(-2px);\n  }\n\n  h1 {\n    ", "\n  }\n\n  h2 {\n    ", "\n  }\n\n  h3 {\n    ", "\n  }\n\n  h4 {\n    ", "\n  }\n\n  h5 {\n    ", "\n  }\n\n  h6 {\n    ", "\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, _constants.referenceHeights['p'], inlineImageHeight(_constants.referenceHeights['h1'], -3), inlineImageHeight(_constants.referenceHeights['h2'], -3), inlineImageHeight(_constants.referenceHeights['h3'], -2), inlineImageHeight(_constants.referenceHeights['h4'], -2), inlineImageHeight(_constants.referenceHeights['h5'], -2), inlineImageHeight(_constants.referenceHeights['h6'], -2));
+var mediaInlineImageStyles = exports.mediaInlineImageStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  // p, h3, and action items\n  .", " {\n    height: ", "px;\n    transform: translateY(-2px);\n  }\n\n  h1 {\n    ", "\n  }\n\n  h2 {\n    ", "\n  }\n\n  h3 {\n    ", "\n  }\n\n  h4 {\n    ", "\n  }\n\n  h5 {\n    ", "\n  }\n\n  h6 {\n    ", "\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, _constants.referenceHeights['p'], inlineImageHeight(_constants.referenceHeights['h1'], -3), inlineImageHeight(_constants.referenceHeights['h2'], -3), inlineImageHeight(_constants.referenceHeights['h3'], -2), inlineImageHeight(_constants.referenceHeights['h4'], -2), inlineImageHeight(_constants.referenceHeights['h5'], -2), inlineImageHeight(_constants.referenceHeights['h6'], -2));
+var wrapperStyle = exports.wrapperStyle = (0, _react.css)({
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  verticalAlign: 'middle',
+  overflow: 'hidden',
+  borderRadius: "var(--ds-border-radius, 3px)",
+  aspectRatio: "var(".concat(INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, ", ").concat(_constants.DEFAULT_INLINE_IMAGE_ASPECT_RATIO, ")")
+});
+var selectedStyle = exports.selectedStyle = (0, _react.css)({
+  cursor: 'pointer',
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")")),
+  outline: 'none'
+});
+var borderStyle = exports.borderStyle = (0, _react.css)({
+  borderColor: "var(".concat(INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, ")"),
+  borderStyle: 'solid',
+  borderRadius: "calc(var(".concat(INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, ", ").concat(_constants.DEFAULT_INLINE_IMAGE_BORDER_SIZE, ") * 2px)"),
+  borderWidth: "calc(var(".concat(INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, ", ").concat(_constants.DEFAULT_INLINE_IMAGE_BORDER_SIZE, ") * 1px)"),
+  boxSizing: "border-box"
+});

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 = "76.27.10";
+var packageVersion = "76.29.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/ui/DropList/index.js

@@ -22,7 +22,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 = "76.27.10";
+var packageVersion = "76.29.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/es2019/commands/index.js

@@ -1,4 +1,4 @@
-import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 export function addParagraphAtEnd(tr) {
   const {
@@ -72,6 +72,23 @@ export const createToggleBlockMarkOnRange = (markType, getAttrs, allowedBlocks)
   });
   return markApplied;
 };
+export const createToggleInlineMarkOnRange = (markType, getAttrs) => (from, to, tr, state) => {
+  let markApplied = false;
+  state.doc.nodesBetween(from, to, (node, pos, parent) => {
+    if (parent !== null && parent !== void 0 && parent.type.allowsMarkType(markType)) {
+      const oldMarks = node.marks.filter(mark => mark.type === markType);
+      const prevAttrs = oldMarks.length ? oldMarks[0].attrs : undefined;
+      const newAttrs = getAttrs(prevAttrs, node);
+      if (newAttrs !== undefined) {
+        tr.setNodeMarkup(pos, node.type, node.attrs, node.marks.filter(mark => !markType.excludes(mark.type)).concat(newAttrs === false ? [] : markType.create(newAttrs)));
+        tr.setSelection(NodeSelection.create(tr.doc, state.selection.from));
+        markApplied = true;
+      }
+    }
+    return;
+  });
+  return markApplied;
+};
 
 /**
  * Toggles block mark based on the return type of `getAttrs`.

package/dist/es2019/media-inline/constants.js

@@ -2,6 +2,8 @@ import { headingSizes } from '@atlaskit/theme/typography';
 export const DEFAULT_IMAGE_WIDTH = 250;
 export const DEFAULT_IMAGE_HEIGHT = 200;
 export const DEFAULT_INLINE_IMAGE_ASPECT_RATIO = DEFAULT_IMAGE_WIDTH / DEFAULT_IMAGE_HEIGHT;
+export const DEFAULT_INLINE_IMAGE_BORDER_SIZE = 0;
+
 /**
  * Reference Heights
  *

package/dist/es2019/media-inline/inline-image-wrapper.js

@@ -1,38 +1,31 @@
 /** @jsx jsx */
 
-import { css, jsx } from '@emotion/react';
-import { B300 } from '@atlaskit/theme/colors';
-const wrapperStyle = css({
-  display: 'inline-flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  verticalAlign: 'middle',
-  overflow: 'hidden',
-  borderRadius: `${"var(--ds-border-radius, 3px)"}`,
-  aspectRatio: `var(${INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY}, ${DEFAULT_INLINE_IMAGE_ASPECT_RATIO})`
-});
-import { DEFAULT_INLINE_IMAGE_ASPECT_RATIO } from './constants';
-import { INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, INLINE_IMAGE_WRAPPER_CLASS_NAME } from './styles';
-const selectedStyle = css({
-  cursor: 'pointer',
-  boxShadow: `0 0 0 1px ${`var(--ds-border-selected, ${B300})`}`,
-  outline: 'none',
-  borderColor: 'transparent'
-});
+import { jsx } from '@emotion/react';
+import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
+import { borderStyle, INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, INLINE_IMAGE_WRAPPER_CLASS_NAME, selectedStyle, wrapperStyle } from './styles';
 export const InlineImageWrapper = ({
   children,
   isSelected,
-  aspectRatio
+  aspectRatio,
+  borderSize,
+  borderColor
 }) => {
-  const style = aspectRatio ? {
+  const borderStyleVars = borderSize && borderColor ? {
+    [INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY]: borderSize,
+    [INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY]: hexToEditorBorderPaletteColor(borderColor) || borderColor
+  } : {};
+  const aspectStyleVars = aspectRatio ? {
     [INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY]: aspectRatio
   } : {};
   return (
     // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
     jsx("span", {
-      style: style,
+      style: {
+        ...borderStyleVars,
+        ...aspectStyleVars
+      },
       className: INLINE_IMAGE_WRAPPER_CLASS_NAME,
-      css: [wrapperStyle, isSelected && selectedStyle],
+      css: [wrapperStyle, borderSize && borderColor && borderStyle, isSelected && selectedStyle],
       "data-testid": "inline-image-wrapper"
     }, children)
   );

package/dist/es2019/media-inline/media-inline-image-card.js

@@ -17,7 +17,8 @@ export const MediaInlineImageCardInternal = ({
   alt,
   isLazy,
   width,
-  height
+  height,
+  border
 }) => {
   const [fileState, setFileState] = useState();
   const [subscribeError, setSubscribeError] = useState();
@@ -101,7 +102,9 @@ export const MediaInlineImageCardInternal = ({
   }, [width, height, aspectRatio]);
   return jsx(InlineImageWrapper, {
     isSelected: isSelected,
-    aspectRatio: aspectRatio
+    aspectRatio: aspectRatio,
+    borderColor: border === null || border === void 0 ? void 0 : border.borderColor,
+    borderSize: border === null || border === void 0 ? void 0 : border.borderSize
   }, content(scaledDimension));
 };
 export const MediaInlineImageCard = injectIntl(MediaInlineImageCardInternal, {

package/dist/es2019/media-inline/styles.js

@@ -1,9 +1,17 @@
 import { css } from '@emotion/react';
-import { referenceHeights } from './constants';
+import { B300 } from '@atlaskit/theme/colors';
+import { DEFAULT_INLINE_IMAGE_ASPECT_RATIO, DEFAULT_INLINE_IMAGE_BORDER_SIZE, referenceHeights } from './constants';
 export const INLINE_IMAGE_WRAPPER_CLASS_NAME = 'media-inline-image-wrapper';
 export const INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = '--editor-media-inline-image-aspect-ratio';
+export const INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = '--editor-media-inline-image-border-size';
+export const INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = '--editor-media-inline-image-border-color';
 const inlineImageHeight = (height, margin = 0) => css`
-  > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
+  > span[data-mark-type='border']
+    > .mediaInlineView-content-wrap
+    > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
+    > span[data-mark-type='border']
+    > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
+    > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
     > .mediaInlineView-content-wrap
     > .${INLINE_IMAGE_WRAPPER_CLASS_NAME} {
     height: ${height}px;
@@ -47,4 +55,25 @@ export const mediaInlineImageStyles = css`
   h6 {
     ${inlineImageHeight(referenceHeights['h6'], -2)}
   }
-`;
+`;
+export const wrapperStyle = css({
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  verticalAlign: 'middle',
+  overflow: 'hidden',
+  borderRadius: `${"var(--ds-border-radius, 3px)"}`,
+  aspectRatio: `var(${INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY}, ${DEFAULT_INLINE_IMAGE_ASPECT_RATIO})`
+});
+export const selectedStyle = css({
+  cursor: 'pointer',
+  boxShadow: `0 0 0 1px ${`var(--ds-border-selected, ${B300})`}`,
+  outline: 'none'
+});
+export const borderStyle = css({
+  borderColor: `var(${INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY})`,
+  borderStyle: 'solid',
+  borderRadius: `calc(var(${INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY}, ${DEFAULT_INLINE_IMAGE_BORDER_SIZE}) * 2px)`,
+  borderWidth: `calc(var(${INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY}, ${DEFAULT_INLINE_IMAGE_BORDER_SIZE}) * 1px)`,
+  boxSizing: `border-box`
+});

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "76.27.10";
+const packageVersion = "76.29.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "76.27.10";
+const packageVersion = "76.29.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/esm/commands/index.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 export function addParagraphAtEnd(tr) {
   var paragraph = tr.doc.type.schema.nodes.paragraph,
@@ -69,6 +69,29 @@ export var createToggleBlockMarkOnRange = function createToggleBlockMarkOnRange(
     return markApplied;
   };
 };
+export var createToggleInlineMarkOnRange = function createToggleInlineMarkOnRange(markType, getAttrs) {
+  return function (from, to, tr, state) {
+    var markApplied = false;
+    state.doc.nodesBetween(from, to, function (node, pos, parent) {
+      if (parent !== null && parent !== void 0 && parent.type.allowsMarkType(markType)) {
+        var oldMarks = node.marks.filter(function (mark) {
+          return mark.type === markType;
+        });
+        var _prevAttrs2 = oldMarks.length ? oldMarks[0].attrs : undefined;
+        var newAttrs = getAttrs(_prevAttrs2, node);
+        if (newAttrs !== undefined) {
+          tr.setNodeMarkup(pos, node.type, node.attrs, node.marks.filter(function (mark) {
+            return !markType.excludes(mark.type);
+          }).concat(newAttrs === false ? [] : markType.create(newAttrs)));
+          tr.setSelection(NodeSelection.create(tr.doc, state.selection.from));
+          markApplied = true;
+        }
+      }
+      return;
+    });
+    return markApplied;
+  };
+};
 
 /**
  * Toggles block mark based on the return type of `getAttrs`.

package/dist/esm/media-inline/constants.js

@@ -2,6 +2,8 @@ import { headingSizes } from '@atlaskit/theme/typography';
 export var DEFAULT_IMAGE_WIDTH = 250;
 export var DEFAULT_IMAGE_HEIGHT = 200;
 export var DEFAULT_INLINE_IMAGE_ASPECT_RATIO = DEFAULT_IMAGE_WIDTH / DEFAULT_IMAGE_HEIGHT;
+export var DEFAULT_INLINE_IMAGE_BORDER_SIZE = 0;
+
 /**
  * Reference Heights
  *

package/dist/esm/media-inline/inline-image-wrapper.js

@@ -1,36 +1,26 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
 
-import { css, jsx } from '@emotion/react';
-import { B300 } from '@atlaskit/theme/colors';
-var wrapperStyle = css({
-  display: 'inline-flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  verticalAlign: 'middle',
-  overflow: 'hidden',
-  borderRadius: "var(--ds-border-radius, 3px)",
-  aspectRatio: "var(".concat(INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, ", ").concat(DEFAULT_INLINE_IMAGE_ASPECT_RATIO, ")")
-});
-import { DEFAULT_INLINE_IMAGE_ASPECT_RATIO } from './constants';
-import { INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, INLINE_IMAGE_WRAPPER_CLASS_NAME } from './styles';
-var selectedStyle = css({
-  cursor: 'pointer',
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, ".concat(B300, ")")),
-  outline: 'none',
-  borderColor: 'transparent'
-});
+import { jsx } from '@emotion/react';
+import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
+import { borderStyle, INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, INLINE_IMAGE_WRAPPER_CLASS_NAME, selectedStyle, wrapperStyle } from './styles';
 export var InlineImageWrapper = function InlineImageWrapper(_ref) {
+  var _ref2;
   var children = _ref.children,
     isSelected = _ref.isSelected,
-    aspectRatio = _ref.aspectRatio;
-  var style = aspectRatio ? _defineProperty({}, INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, aspectRatio) : {};
+    aspectRatio = _ref.aspectRatio,
+    borderSize = _ref.borderSize,
+    borderColor = _ref.borderColor;
+  var borderStyleVars = borderSize && borderColor ? (_ref2 = {}, _defineProperty(_ref2, INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, borderSize), _defineProperty(_ref2, INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, hexToEditorBorderPaletteColor(borderColor) || borderColor), _ref2) : {};
+  var aspectStyleVars = aspectRatio ? _defineProperty({}, INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, aspectRatio) : {};
   return (
     // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
     jsx("span", {
-      style: style,
+      style: _objectSpread(_objectSpread({}, borderStyleVars), aspectStyleVars),
       className: INLINE_IMAGE_WRAPPER_CLASS_NAME,
-      css: [wrapperStyle, isSelected && selectedStyle],
+      css: [wrapperStyle, borderSize && borderColor && borderStyle, isSelected && selectedStyle],
       "data-testid": "inline-image-wrapper"
     }, children)
   );

package/dist/esm/media-inline/media-inline-image-card.js

@@ -18,7 +18,8 @@ export var MediaInlineImageCardInternal = function MediaInlineImageCardInternal(
     alt = _ref.alt,
     isLazy = _ref.isLazy,
     width = _ref.width,
-    height = _ref.height;
+    height = _ref.height,
+    border = _ref.border;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     fileState = _useState2[0],
@@ -108,7 +109,9 @@ export var MediaInlineImageCardInternal = function MediaInlineImageCardInternal(
   }, [width, height, aspectRatio]);
   return jsx(InlineImageWrapper, {
     isSelected: isSelected,
-    aspectRatio: aspectRatio
+    aspectRatio: aspectRatio,
+    borderColor: border === null || border === void 0 ? void 0 : border.borderColor,
+    borderSize: border === null || border === void 0 ? void 0 : border.borderSize
   }, content(scaledDimension));
 };
 export var MediaInlineImageCard = injectIntl(MediaInlineImageCardInternal, {

package/dist/esm/media-inline/styles.js

@@ -1,12 +1,15 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
-import { referenceHeights } from './constants';
+import { B300 } from '@atlaskit/theme/colors';
+import { DEFAULT_INLINE_IMAGE_ASPECT_RATIO, DEFAULT_INLINE_IMAGE_BORDER_SIZE, referenceHeights } from './constants';
 export var INLINE_IMAGE_WRAPPER_CLASS_NAME = 'media-inline-image-wrapper';
 export var INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = '--editor-media-inline-image-aspect-ratio';
+export var INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = '--editor-media-inline-image-border-size';
+export var INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = '--editor-media-inline-image-border-color';
 var inlineImageHeight = function inlineImageHeight(height) {
   var margin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > .", ",\n    > .mediaInlineView-content-wrap\n    > .", " {\n    height: ", "px;\n    transform: translateY(", "px);\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, height, margin);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > span[data-mark-type='border']\n    > .mediaInlineView-content-wrap\n    > .", ",\n    > span[data-mark-type='border']\n    > .", ",\n    > .", ",\n    > .mediaInlineView-content-wrap\n    > .", " {\n    height: ", "px;\n    transform: translateY(", "px);\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, height, margin);
 };
 
 /**
@@ -15,4 +18,25 @@ var inlineImageHeight = function inlineImageHeight(height) {
  * shift in top and bottom and size adjustments to make up for lack of 1to1 size
  * mapping
  */
-export var mediaInlineImageStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  // p, h3, and action items\n  .", " {\n    height: ", "px;\n    transform: translateY(-2px);\n  }\n\n  h1 {\n    ", "\n  }\n\n  h2 {\n    ", "\n  }\n\n  h3 {\n    ", "\n  }\n\n  h4 {\n    ", "\n  }\n\n  h5 {\n    ", "\n  }\n\n  h6 {\n    ", "\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, referenceHeights['p'], inlineImageHeight(referenceHeights['h1'], -3), inlineImageHeight(referenceHeights['h2'], -3), inlineImageHeight(referenceHeights['h3'], -2), inlineImageHeight(referenceHeights['h4'], -2), inlineImageHeight(referenceHeights['h5'], -2), inlineImageHeight(referenceHeights['h6'], -2));
+export var mediaInlineImageStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  // p, h3, and action items\n  .", " {\n    height: ", "px;\n    transform: translateY(-2px);\n  }\n\n  h1 {\n    ", "\n  }\n\n  h2 {\n    ", "\n  }\n\n  h3 {\n    ", "\n  }\n\n  h4 {\n    ", "\n  }\n\n  h5 {\n    ", "\n  }\n\n  h6 {\n    ", "\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, referenceHeights['p'], inlineImageHeight(referenceHeights['h1'], -3), inlineImageHeight(referenceHeights['h2'], -3), inlineImageHeight(referenceHeights['h3'], -2), inlineImageHeight(referenceHeights['h4'], -2), inlineImageHeight(referenceHeights['h5'], -2), inlineImageHeight(referenceHeights['h6'], -2));
+export var wrapperStyle = css({
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  verticalAlign: 'middle',
+  overflow: 'hidden',
+  borderRadius: "var(--ds-border-radius, 3px)",
+  aspectRatio: "var(".concat(INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, ", ").concat(DEFAULT_INLINE_IMAGE_ASPECT_RATIO, ")")
+});
+export var selectedStyle = css({
+  cursor: 'pointer',
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, ".concat(B300, ")")),
+  outline: 'none'
+});
+export var borderStyle = css({
+  borderColor: "var(".concat(INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, ")"),
+  borderStyle: 'solid',
+  borderRadius: "calc(var(".concat(INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, ", ").concat(DEFAULT_INLINE_IMAGE_BORDER_SIZE, ") * 2px)"),
+  borderWidth: "calc(var(".concat(INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, ", ").concat(DEFAULT_INLINE_IMAGE_BORDER_SIZE, ") * 1px)"),
+  boxSizing: "border-box"
+});

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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 = "76.27.10";
+var packageVersion = "76.29.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "76.27.10";
+var packageVersion = "76.29.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/types/commands/index.d.ts

@@ -7,6 +7,7 @@ export declare function addParagraphAtEnd(tr: Transaction): void;
 export declare function createParagraphAtEnd(): Command;
 export declare const changeImageAlignment: (align?: AlignmentState) => Command;
 export declare const createToggleBlockMarkOnRange: <T extends {} = object>(markType: MarkType, getAttrs: (prevAttrs?: T | undefined, node?: PMNode) => false | T | undefined, allowedBlocks?: NodeType[] | ((schema: Schema, node: PMNode, parent: PMNode | null) => boolean) | undefined) => (from: number, to: number, tr: Transaction, state: EditorState) => boolean;
+export declare const createToggleInlineMarkOnRange: <T extends {} = object>(markType: MarkType, getAttrs: (prevAttrs?: T | undefined, node?: PMNode) => false | T | undefined) => (from: number, to: number, tr: Transaction, state: EditorState) => boolean;
 /**
  * Toggles block mark based on the return type of `getAttrs`.
  * This is similar to ProseMirror's `getAttrs` from `AttributeSpec`

package/dist/types/media-inline/constants.d.ts

@@ -1,6 +1,7 @@
 export declare const DEFAULT_IMAGE_WIDTH = 250;
 export declare const DEFAULT_IMAGE_HEIGHT = 200;
 export declare const DEFAULT_INLINE_IMAGE_ASPECT_RATIO: number;
+export declare const DEFAULT_INLINE_IMAGE_BORDER_SIZE = 0;
 /**
  * Reference Heights
  *

package/dist/types/media-inline/inline-image-wrapper.d.ts

@@ -4,6 +4,8 @@ type Props = {
     children: ReactElement;
     isSelected?: boolean;
     aspectRatio?: number | string;
+    borderSize?: number;
+    borderColor?: string;
 };
 export declare const InlineImageWrapper: FC<Props>;
 export {};

package/dist/types/media-inline/media-inline-image-card.d.ts

@@ -8,6 +8,10 @@ export interface MediaInlineImageCardProps {
     mediaClient: MediaClient;
     isSelected?: boolean;
     isLazy?: boolean;
+    border?: {
+        borderSize?: number;
+        borderColor?: string;
+    };
 }
 export declare const MediaInlineImageCardInternal: FC<MediaInlineImageCardProps & WrappedComponentProps & MediaInlineAttrs>;
 export declare const MediaInlineImageCard: FC<MediaInlineImageCardProps & MediaInlineAttrs>;

package/dist/types/media-inline/styles.d.ts

@@ -1,5 +1,7 @@
 export declare const INLINE_IMAGE_WRAPPER_CLASS_NAME = "media-inline-image-wrapper";
 export declare const INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = "--editor-media-inline-image-aspect-ratio";
+export declare const INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = "--editor-media-inline-image-border-size";
+export declare const INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = "--editor-media-inline-image-border-color";
 /**
  * Shifting the mediaInline image component (renders image) to align nicely with
  * mediaInline (renders text) is a bit of a testing ground. This numbers represent
@@ -7,3 +9,6 @@ export declare const INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = "--editor-media-inl
  * mapping
  */
 export declare const mediaInlineImageStyles: import("@emotion/react").SerializedStyles;
+export declare const wrapperStyle: import("@emotion/react").SerializedStyles;
+export declare const selectedStyle: import("@emotion/react").SerializedStyles;
+export declare const borderStyle: import("@emotion/react").SerializedStyles;

package/dist/types/media-inline/types.d.ts

@@ -3,4 +3,6 @@ export type MediaInlineAttrs = {
     alt?: string;
     width?: number;
     height?: number;
+    borderSize?: number;
+    borderColor?: string;
 };

package/dist/types-ts4.5/commands/index.d.ts

@@ -7,6 +7,7 @@ export declare function addParagraphAtEnd(tr: Transaction): void;
 export declare function createParagraphAtEnd(): Command;
 export declare const changeImageAlignment: (align?: AlignmentState) => Command;
 export declare const createToggleBlockMarkOnRange: <T extends {} = object>(markType: MarkType, getAttrs: (prevAttrs?: T | undefined, node?: PMNode) => false | T | undefined, allowedBlocks?: NodeType[] | ((schema: Schema, node: PMNode, parent: PMNode | null) => boolean) | undefined) => (from: number, to: number, tr: Transaction, state: EditorState) => boolean;
+export declare const createToggleInlineMarkOnRange: <T extends {} = object>(markType: MarkType, getAttrs: (prevAttrs?: T | undefined, node?: PMNode) => false | T | undefined) => (from: number, to: number, tr: Transaction, state: EditorState) => boolean;
 /**
  * Toggles block mark based on the return type of `getAttrs`.
  * This is similar to ProseMirror's `getAttrs` from `AttributeSpec`

package/dist/types-ts4.5/media-inline/constants.d.ts

@@ -1,6 +1,7 @@
 export declare const DEFAULT_IMAGE_WIDTH = 250;
 export declare const DEFAULT_IMAGE_HEIGHT = 200;
 export declare const DEFAULT_INLINE_IMAGE_ASPECT_RATIO: number;
+export declare const DEFAULT_INLINE_IMAGE_BORDER_SIZE = 0;
 /**
  * Reference Heights
  *

package/dist/types-ts4.5/media-inline/inline-image-wrapper.d.ts

@@ -4,6 +4,8 @@ type Props = {
     children: ReactElement;
     isSelected?: boolean;
     aspectRatio?: number | string;
+    borderSize?: number;
+    borderColor?: string;
 };
 export declare const InlineImageWrapper: FC<Props>;
 export {};

package/dist/types-ts4.5/media-inline/media-inline-image-card.d.ts

@@ -8,6 +8,10 @@ export interface MediaInlineImageCardProps {
     mediaClient: MediaClient;
     isSelected?: boolean;
     isLazy?: boolean;
+    border?: {
+        borderSize?: number;
+        borderColor?: string;
+    };
 }
 export declare const MediaInlineImageCardInternal: FC<MediaInlineImageCardProps & WrappedComponentProps & MediaInlineAttrs>;
 export declare const MediaInlineImageCard: FC<MediaInlineImageCardProps & MediaInlineAttrs>;

package/dist/types-ts4.5/media-inline/styles.d.ts

@@ -1,5 +1,7 @@
 export declare const INLINE_IMAGE_WRAPPER_CLASS_NAME = "media-inline-image-wrapper";
 export declare const INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = "--editor-media-inline-image-aspect-ratio";
+export declare const INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = "--editor-media-inline-image-border-size";
+export declare const INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = "--editor-media-inline-image-border-color";
 /**
  * Shifting the mediaInline image component (renders image) to align nicely with
  * mediaInline (renders text) is a bit of a testing ground. This numbers represent
@@ -7,3 +9,6 @@ export declare const INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = "--editor-media-inl
  * mapping
  */
 export declare const mediaInlineImageStyles: import("@emotion/react").SerializedStyles;
+export declare const wrapperStyle: import("@emotion/react").SerializedStyles;
+export declare const selectedStyle: import("@emotion/react").SerializedStyles;
+export declare const borderStyle: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/media-inline/types.d.ts

@@ -3,4 +3,6 @@ export type MediaInlineAttrs = {
     alt?: string;
     width?: number;
     height?: number;
+    borderSize?: number;
+    borderColor?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "76.27.10",
+  "version": "76.29.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,7 +26,8 @@
     "team": "Editor",
     "inPublicMirror": true,
     "singleton": true,
-    "releaseModel": "continuous"
+    "releaseModel": "continuous",
+    "runReact18": false
   },
   "af:exports": {
     "./event-dispatcher": "./src/event-dispatcher/index.ts",