@atlaskit/renderer 109.0.4 → 109.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/renderer
 
+## 109.1.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
+
+### Patch Changes
+
+- Updated dependencies
+
+## 109.0.5
+
+### Patch Changes
+
+- [#61676](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61676) [`0d892d819bab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0d892d819bab) - [ux] Updated tests and mediaInline node to mock inline files correctly
+- [#62545](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/62545) [`85392e5f9be9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/85392e5f9be9) - Remove legacy theming logic from the @atlaskit/editor-common package. Theming is still available via @atlaskit/tokens.
+- Updated dependencies
+
 ## 109.0.4
 
 ### Patch Changes

package/dist/cjs/react/marks/border.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Border;
+var _react = require("@emotion/react");
+var _editorPalette = require("@atlaskit/editor-palette");
+/** @jsx jsx */
+
+function Border(props) {
+  var _props$color, _props$size;
+  var borderColor = (_props$color = props.color) !== null && _props$color !== void 0 ? _props$color : '';
+  var borderSize = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 0;
+  var paletteColorValue = (0, _editorPalette.hexToEditorBorderPaletteColor)(borderColor) || borderColor;
+  return (0, _react.jsx)("span", {
+    "data-color": paletteColorValue,
+    "data-size": borderSize,
+    "data-mark-type": "border"
+  }, props.children);
+}

package/dist/cjs/react/marks/index.js

@@ -11,6 +11,12 @@ Object.defineProperty(exports, "Annotation", {
     return _annotation.default;
   }
 });
+Object.defineProperty(exports, "Border", {
+  enumerable: true,
+  get: function get() {
+    return _border.default;
+  }
+});
 Object.defineProperty(exports, "Breakout", {
   enumerable: true,
   get: function get() {
@@ -112,6 +118,7 @@ var _unsupportedNodeAttribute = _interopRequireDefault(require("./unsupportedNod
 var _dataConsumer = _interopRequireDefault(require("./data-consumer"));
 var _fragment = _interopRequireDefault(require("./fragment"));
 var _annotation = _interopRequireWildcard(require("./annotation"));
+var _border = _interopRequireDefault(require("./border"));
 var _confluenceInlineComment = _interopRequireDefault(require("./confluence-inline-comment"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -127,6 +134,7 @@ var markToReact = exports.markToReact = {
   textColor: _textColor.default,
   underline: _underline.default,
   annotation: _annotation.default,
+  border: _border.default,
   // Stage0
   confluenceInlineComment: _confluenceInlineComment.default,
   breakout: _breakout.default,

package/dist/cjs/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -35,7 +35,6 @@ var LightWeightCodeBlock = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
     _ref$codeBidiWarningT = _ref.codeBidiWarningTooltipEnabled,
     codeBidiWarningTooltipEnabled = _ref$codeBidiWarningT === void 0 ? true : _ref$codeBidiWarningT,
     className = _ref.className;
-  var theme = (0, _react2.useTheme)();
   var textRows = (0, _react.useMemo)(function () {
     return (text !== null && text !== void 0 ? text : '').split('\n');
   }, [text]);
@@ -47,7 +46,7 @@ var LightWeightCodeBlock = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
   return (0, _react2.jsx)("div", {
     className: classNames,
     ref: ref,
-    css: [(0, _styles.codeBlockSharedStyles)(theme), lightWeightCodeBlockStyles]
+    css: [(0, _styles.codeBlockSharedStyles)(), lightWeightCodeBlockStyles]
   }, (0, _react2.jsx)("div", {
     className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
   }, (0, _react2.jsx)("div", {

package/dist/cjs/react/nodes/mediaInline.js

@@ -34,7 +34,9 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
     alt = _ref.alt,
     width = _ref.width,
     height = _ref.height,
-    type = _ref.type;
+    type = _ref.type,
+    borderSize = _ref.borderSize,
+    borderColor = _ref.borderColor;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     contextIdentifierProvider = _useState2[0],
@@ -139,7 +141,11 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
       identifier: identifier,
       alt: alt,
       width: width,
-      height: height
+      height: height,
+      border: {
+        borderSize: borderSize,
+        borderColor: borderColor
+      }
     });
   }
   var handleMediaInlineClick = function handleMediaInlineClick(result) {
@@ -161,7 +167,7 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
     fileState: fileState
   }), {
     "data-node-type": "mediaInline"
-  }), mediaProvider ? /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
+  }), mediaProvider || mediaClient ? /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
     identifier: identifier,
     onClick: handleMediaInlineClick,
     shouldOpenMediaViewer: shouldOpenMediaViewer,
@@ -175,6 +181,7 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
   }));
 };
 var MediaInline = function MediaInline(props) {
+  var _borderMark$attrs$col, _borderMark$attrs$siz;
   var collection = props.collection,
     id = props.id,
     providerFactory = props.providers,
@@ -184,7 +191,8 @@ var MediaInline = function MediaInline(props) {
     fileType = props.type,
     alt = props.alt,
     width = props.width,
-    height = props.height;
+    height = props.height,
+    marks = props.marks;
   var clipboardAttrs = {
     id: id,
     collection: collection
@@ -194,6 +202,11 @@ var MediaInline = function MediaInline(props) {
     mediaItemType: 'file',
     collectionName: collection
   };
+  var borderMark = marks === null || marks === void 0 ? void 0 : marks.find(function (mark) {
+    return (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border';
+  });
+  var borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
+  var borderSize = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
   return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
     providers: ['mediaProvider', 'contextIdentifierProvider'],
     providerFactory: providerFactory,
@@ -210,7 +223,9 @@ var MediaInline = function MediaInline(props) {
         type: fileType,
         alt: alt,
         width: width,
-        height: height
+        height: height,
+        borderSize: borderSize,
+        borderColor: borderColor
       });
     }
   });

package/dist/cjs/react/nodes/panel.js

@@ -28,9 +28,7 @@ var PanelStyled = function PanelStyled(_ref) {
     hasIcon = _ref.hasIcon,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var styles = function styles(theme) {
-    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    &.", " {\n      ", "\n\n      &[data-panel-type=", "] {\n        ", "\n      }\n    }\n  "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)({
-      theme: theme
-    }), _adfSchema.PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;');
+    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    &.", " {\n      ", "\n\n      &[data-panel-type=", "] {\n        ", "\n      }\n    }\n  "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)(), _adfSchema.PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;');
   };
   if (props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && backgroundColor) {
     styles = function styles(theme) {
@@ -41,9 +39,7 @@ var PanelStyled = function PanelStyled(_ref) {
       })({
         theme: theme
       });
-      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        &.", " {\n          ", "\n        }\n\n        &[data-panel-type=", "] {\n          ", ";\n          ", "\n        }\n      "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)({
-        theme: theme
-      }), _adfSchema.PanelType.CUSTOM, customStyle, hasIcon ? '' : 'padding-left: 12px;');
+      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        &.", " {\n          ", "\n        }\n\n        &[data-panel-type=", "] {\n          ", ";\n          ", "\n        }\n      "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)(), _adfSchema.PanelType.CUSTOM, customStyle, hasIcon ? '' : 'padding-left: 12px;');
     };
   }
   return (0, _react2.jsx)("div", (0, _extends2.default)({

package/dist/cjs/ui/Expand.js

@@ -31,10 +31,8 @@ var titleStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _ta
 var Container = function Container(props) {
   var paddingBottom = props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
   var sharedContainerStyles = _ui.sharedExpandStyles.containerStyles(props);
-  var styles = function styles(themeProps) {
-    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles({
-      theme: themeProps
-    }), paddingBottom);
+  var styles = function styles() {
+    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles(), paddingBottom);
   };
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: styles
@@ -42,10 +40,8 @@ var Container = function Container(props) {
 };
 var TitleContainer = function TitleContainer(props) {
   var paddingBottom = !props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
-  var styles = function styles(themeProps) {
-    return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: ", ";\n    padding-bottom: ", ";\n  "])), _ui.sharedExpandStyles.titleContainerStyles({
-      theme: themeProps
-    }), "var(--ds-space-100, 8px)", paddingBottom);
+  var styles = function styles() {
+    return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: ", ";\n    padding-bottom: ", ";\n  "])), _ui.sharedExpandStyles.titleContainerStyles(), "var(--ds-space-100, 8px)", paddingBottom);
   };
   return (0, _react2.jsx)("button", (0, _extends2.default)({
     css: styles
@@ -55,10 +51,8 @@ TitleContainer.displayName = 'TitleContainerButton';
 var ContentContainer = function ContentContainer(props) {
   var sharedContentStyles = _ui.sharedExpandStyles.contentStyles(props);
   var visibility = props.expanded ? 'visible' : 'hidden';
-  var styles = function styles(themeProps) {
-    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8, or directly replace with 36px\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles({
-      theme: themeProps
-    }), "var(--ds-space-200, 16px)", (0, _constants.gridSize)() * 5 - (0, _constants.gridSize)() / 2, visibility);
+  var styles = function styles() {
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8, or directly replace with 36px\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles(), "var(--ds-space-200, 16px)", (0, _constants.gridSize)() * 5 - (0, _constants.gridSize)() / 2, visibility);
   };
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: styles

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

@@ -54,7 +54,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.0.4";
+var packageVersion = "109.1.0";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/cjs/ui/Renderer/style.js

@@ -129,7 +129,7 @@ var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperPro
     })(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), (0, _components.themed)({
       light: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
       dark: "var(--ds-text-subtlest, ".concat(colors.DN200, ")")
-    })(themeProps), telepointerStyles(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
+    })(themeProps), telepointerStyles(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(), (0, _styles.ruleSharedStyles)(), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
       light: "var(--ds-background-neutral, ".concat(colors.N30A, ")"),
       dark: "var(--ds-background-neutral, ".concat(colors.DN70, ")")
     })(themeProps), "var(--ds-border-radius-100, 3px)", (0, _components.themed)({

package/dist/cjs/ui/annotations/draft/component.js

@@ -20,8 +20,8 @@ var _templateObject;
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var markStyles = function markStyles(props) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  ", ";\n"])), (0, _styles.AnnotationSharedCSSByState)(props).focus);
+var markStyles = function markStyles() {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  ", ";\n"])), (0, _styles.AnnotationSharedCSSByState)().focus);
 };
 var AnnotationDraft = exports.AnnotationDraft = function AnnotationDraft(_ref) {
   var draftPosition = _ref.draftPosition,

package/dist/cjs/ui/annotations/element/mark.js

@@ -20,12 +20,8 @@ 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; }
 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; }
-var markStyles = function markStyles(props) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)({
-    theme: props
-  }).blur, (0, _styles.AnnotationSharedCSSByState)({
-    theme: props
-  }).focus);
+var markStyles = function markStyles() {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)().blur, (0, _styles.AnnotationSharedCSSByState)().focus);
 };
 var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,

package/dist/es2019/react/marks/border.js

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
+export default function Border(props) {
+  var _props$color, _props$size;
+  const borderColor = (_props$color = props.color) !== null && _props$color !== void 0 ? _props$color : '';
+  const borderSize = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 0;
+  const paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
+  return jsx("span", {
+    "data-color": paletteColorValue,
+    "data-size": borderSize,
+    "data-mark-type": "border"
+  }, props.children);
+}

package/dist/es2019/react/marks/index.js

@@ -14,6 +14,7 @@ import UnsupportedNodeAttribute from './unsupportedNodeAttribute';
 import DataConsumer from './data-consumer';
 import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation';
+import Border from './border';
 
 // Stage0
 import ConfluenceInlineComment from './confluence-inline-comment';
@@ -27,6 +28,7 @@ export const markToReact = {
   textColor: TextColor,
   underline: Underline,
   annotation: Annotation,
+  border: Border,
   // Stage0
   confluenceInlineComment: ConfluenceInlineComment,
   breakout: Breakout,
@@ -40,4 +42,4 @@ export const markToReact = {
 export const toReact = mark => {
   return markToReact[mark.type.name];
 };
-export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark };
+export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, Border, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark };

package/dist/es2019/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React, { forwardRef, useMemo } from 'react';
-import { css, jsx, useTheme } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { codeBlockSharedStyles, CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { useBidiWarnings } from '../../../hooks/use-bidi-warnings';
@@ -33,7 +33,6 @@ const LightWeightCodeBlock = /*#__PURE__*/forwardRef(({
   codeBidiWarningTooltipEnabled = true,
   className
 }, ref) => {
-  const theme = useTheme();
   const textRows = useMemo(() => (text !== null && text !== void 0 ? text : '').split('\n'), [text]);
   const {
     renderBidiWarnings
@@ -44,7 +43,7 @@ const LightWeightCodeBlock = /*#__PURE__*/forwardRef(({
   return jsx("div", {
     className: classNames,
     ref: ref,
-    css: [codeBlockSharedStyles(theme), lightWeightCodeBlockStyles]
+    css: [codeBlockSharedStyles(), lightWeightCodeBlockStyles]
   }, jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
   }, jsx("div", {

package/dist/es2019/react/nodes/mediaInline.js

@@ -18,7 +18,9 @@ export const RenderMediaInline = ({
   alt,
   width,
   height,
-  type
+  type,
+  borderSize,
+  borderColor
 }) => {
   const [contextIdentifierProvider, setContextIdentifierProvider] = useState();
   const [fileState, setFileState] = useState();
@@ -84,7 +86,11 @@ export const RenderMediaInline = ({
       identifier: identifier,
       alt: alt,
       width: width,
-      height: height
+      height: height,
+      border: {
+        borderSize,
+        borderColor
+      }
     });
   }
   const handleMediaInlineClick = result => {
@@ -110,7 +116,7 @@ export const RenderMediaInline = ({
     fileState
   }), {
     "data-node-type": "mediaInline"
-  }), mediaProvider ? /*#__PURE__*/React.createElement(MediaInlineCard, {
+  }), mediaProvider || mediaClient ? /*#__PURE__*/React.createElement(MediaInlineCard, {
     identifier: identifier,
     onClick: handleMediaInlineClick,
     shouldOpenMediaViewer: shouldOpenMediaViewer,
@@ -124,6 +130,7 @@ export const RenderMediaInline = ({
   }));
 };
 const MediaInline = props => {
+  var _borderMark$attrs$col, _borderMark$attrs$siz;
   const {
     collection,
     id,
@@ -134,7 +141,8 @@ const MediaInline = props => {
     type: fileType,
     alt,
     width,
-    height
+    height,
+    marks
   } = props;
   const clipboardAttrs = {
     id,
@@ -145,6 +153,9 @@ const MediaInline = props => {
     mediaItemType: 'file',
     collectionName: collection
   };
+  const borderMark = marks === null || marks === void 0 ? void 0 : marks.find(mark => (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border');
+  const borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
+  const borderSize = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
   return /*#__PURE__*/React.createElement(WithProviders, {
     providers: ['mediaProvider', 'contextIdentifierProvider'],
     providerFactory: providerFactory,
@@ -161,7 +172,9 @@ const MediaInline = props => {
         type: fileType,
         alt: alt,
         width: width,
-        height: height
+        height: height,
+        borderSize: borderSize,
+        borderColor: borderColor
       });
     }
   });

package/dist/es2019/react/nodes/panel.js

@@ -19,9 +19,7 @@ const PanelStyled = ({
 }) => {
   let styles = theme => css`
     &.${PanelSharedCssClassName.prefix} {
-      ${panelSharedStylesWithoutPrefix({
-    theme
-  })}
+      ${panelSharedStylesWithoutPrefix()}
 
       &[data-panel-type=${PanelType.CUSTOM}] {
         ${hasIcon ? '' : 'padding-left: 12px;'}
@@ -39,9 +37,7 @@ const PanelStyled = ({
       });
       return css`
         &.${PanelSharedCssClassName.prefix} {
-          ${panelSharedStylesWithoutPrefix({
-        theme
-      })}
+          ${panelSharedStylesWithoutPrefix()}
         }
 
         &[data-panel-type=${PanelType.CUSTOM}] {

package/dist/es2019/ui/Expand.js

@@ -29,10 +29,8 @@ const titleStyles = css`
 const Container = props => {
   const paddingBottom = props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
   const sharedContainerStyles = sharedExpandStyles.containerStyles(props);
-  const styles = themeProps => css`
-    ${sharedContainerStyles({
-    theme: themeProps
-  })}
+  const styles = () => css`
+    ${sharedContainerStyles()}
     padding: 0;
     padding-bottom: ${paddingBottom};
   `;
@@ -42,10 +40,8 @@ const Container = props => {
 };
 const TitleContainer = props => {
   const paddingBottom = !props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
-  const styles = themeProps => css`
-    ${sharedExpandStyles.titleContainerStyles({
-    theme: themeProps
-  })}
+  const styles = () => css`
+    ${sharedExpandStyles.titleContainerStyles()}
     padding: ${"var(--ds-space-100, 8px)"};
     padding-bottom: ${paddingBottom};
   `;
@@ -57,10 +53,8 @@ TitleContainer.displayName = 'TitleContainerButton';
 const ContentContainer = props => {
   const sharedContentStyles = sharedExpandStyles.contentStyles(props);
   const visibility = props.expanded ? 'visible' : 'hidden';
-  const styles = themeProps => css`
-    ${sharedContentStyles({
-    theme: themeProps
-  })};
+  const styles = () => css`
+    ${sharedContentStyles()};
     padding-right: ${"var(--ds-space-200, 16px)"};
     // TODO: Migrate away from gridSize
     // Recommendation: Replace gridSize with 8, or directly replace with 36px

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

@@ -35,7 +35,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.0.4";
+const packageVersion = "109.1.0";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/es2019/ui/Renderer/style.js

@@ -490,12 +490,12 @@ export const rendererStyles = wrapperProps => theme => {
       ${whitespaceSharedStyles};
       ${blockquoteSharedStyles};
       ${headingsSharedStyles()};
-      ${ruleSharedStyles(themeProps)};
+      ${ruleSharedStyles()};
       ${paragraphSharedStyles};
       ${listsSharedStyles};
       ${indentationSharedStyles};
       ${blockMarksSharedStyles};
-      ${codeMarkSharedStyles(themeProps)};
+      ${codeMarkSharedStyles()};
       ${shadowSharedStyle};
       ${dateSharedStyle};
       ${textColorStyles};

package/dist/es2019/ui/annotations/draft/component.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { InsertDraftPosition } from '../types';
@@ -8,12 +9,12 @@ import { splitText, calcTextSplitOffset, findTextString } from './text';
 import { calcInsertDraftPositionOnText } from './position';
 import { dataAttributes } from './dom';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
-const markStyles = props => css`
+const markStyles = () => css`
   color: inherit;
   background-color: unset;
   -webkit-tap-highlight-color: transparent;
 
-  ${AnnotationSharedCSSByState(props).focus};
+  ${AnnotationSharedCSSByState().focus};
 `;
 export const AnnotationDraft = ({
   draftPosition,

package/dist/es2019/ui/annotations/element/mark.js

@@ -1,24 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+
 import React, { useMemo, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
-const markStyles = props => css`
+const markStyles = () => css`
   color: inherit;
   background-color: unset;
   -webkit-tap-highlight-color: transparent;
 
   &[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}'] {
-    ${AnnotationSharedCSSByState({
-  theme: props
-}).blur};
+    ${AnnotationSharedCSSByState().blur};
 
     &:focus,
     &[data-has-focus='true'] {
-      ${AnnotationSharedCSSByState({
-  theme: props
-}).focus};
+      ${AnnotationSharedCSSByState().focus};
     }
   }
 `;

package/dist/esm/react/marks/border.js

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
+export default function Border(props) {
+  var _props$color, _props$size;
+  var borderColor = (_props$color = props.color) !== null && _props$color !== void 0 ? _props$color : '';
+  var borderSize = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 0;
+  var paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
+  return jsx("span", {
+    "data-color": paletteColorValue,
+    "data-size": borderSize,
+    "data-mark-type": "border"
+  }, props.children);
+}

package/dist/esm/react/marks/index.js

@@ -14,6 +14,7 @@ import UnsupportedNodeAttribute from './unsupportedNodeAttribute';
 import DataConsumer from './data-consumer';
 import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation';
+import Border from './border';
 
 // Stage0
 import ConfluenceInlineComment from './confluence-inline-comment';
@@ -27,6 +28,7 @@ export var markToReact = {
   textColor: TextColor,
   underline: Underline,
   annotation: Annotation,
+  border: Border,
   // Stage0
   confluenceInlineComment: ConfluenceInlineComment,
   breakout: Breakout,
@@ -40,4 +42,4 @@ export var markToReact = {
 export var toReact = function toReact(mark) {
   return markToReact[mark.type.name];
 };
-export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark };
+export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, Border, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark };

package/dist/esm/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 import React, { forwardRef, useMemo } from 'react';
-import { css, jsx, useTheme } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { codeBlockSharedStyles, CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { useBidiWarnings } from '../../../hooks/use-bidi-warnings';
@@ -25,7 +25,6 @@ var LightWeightCodeBlock = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$codeBidiWarningT = _ref.codeBidiWarningTooltipEnabled,
     codeBidiWarningTooltipEnabled = _ref$codeBidiWarningT === void 0 ? true : _ref$codeBidiWarningT,
     className = _ref.className;
-  var theme = useTheme();
   var textRows = useMemo(function () {
     return (text !== null && text !== void 0 ? text : '').split('\n');
   }, [text]);
@@ -37,7 +36,7 @@ var LightWeightCodeBlock = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return jsx("div", {
     className: classNames,
     ref: ref,
-    css: [codeBlockSharedStyles(theme), lightWeightCodeBlockStyles]
+    css: [codeBlockSharedStyles(), lightWeightCodeBlockStyles]
   }, jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
   }, jsx("div", {

package/dist/esm/react/nodes/mediaInline.js

@@ -24,7 +24,9 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
     alt = _ref.alt,
     width = _ref.width,
     height = _ref.height,
-    type = _ref.type;
+    type = _ref.type,
+    borderSize = _ref.borderSize,
+    borderColor = _ref.borderColor;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     contextIdentifierProvider = _useState2[0],
@@ -129,7 +131,11 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
       identifier: identifier,
       alt: alt,
       width: width,
-      height: height
+      height: height,
+      border: {
+        borderSize: borderSize,
+        borderColor: borderColor
+      }
     });
   }
   var handleMediaInlineClick = function handleMediaInlineClick(result) {
@@ -151,7 +157,7 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
     fileState: fileState
   }), {
     "data-node-type": "mediaInline"
-  }), mediaProvider ? /*#__PURE__*/React.createElement(MediaInlineCard, {
+  }), mediaProvider || mediaClient ? /*#__PURE__*/React.createElement(MediaInlineCard, {
     identifier: identifier,
     onClick: handleMediaInlineClick,
     shouldOpenMediaViewer: shouldOpenMediaViewer,
@@ -165,6 +171,7 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
   }));
 };
 var MediaInline = function MediaInline(props) {
+  var _borderMark$attrs$col, _borderMark$attrs$siz;
   var collection = props.collection,
     id = props.id,
     providerFactory = props.providers,
@@ -174,7 +181,8 @@ var MediaInline = function MediaInline(props) {
     fileType = props.type,
     alt = props.alt,
     width = props.width,
-    height = props.height;
+    height = props.height,
+    marks = props.marks;
   var clipboardAttrs = {
     id: id,
     collection: collection
@@ -184,6 +192,11 @@ var MediaInline = function MediaInline(props) {
     mediaItemType: 'file',
     collectionName: collection
   };
+  var borderMark = marks === null || marks === void 0 ? void 0 : marks.find(function (mark) {
+    return (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border';
+  });
+  var borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
+  var borderSize = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
   return /*#__PURE__*/React.createElement(WithProviders, {
     providers: ['mediaProvider', 'contextIdentifierProvider'],
     providerFactory: providerFactory,
@@ -200,7 +213,9 @@ var MediaInline = function MediaInline(props) {
         type: fileType,
         alt: alt,
         width: width,
-        height: height
+        height: height,
+        borderSize: borderSize,
+        borderColor: borderColor
       });
     }
   });

package/dist/esm/react/nodes/panel.js

@@ -21,9 +21,7 @@ var PanelStyled = function PanelStyled(_ref) {
     hasIcon = _ref.hasIcon,
     props = _objectWithoutProperties(_ref, _excluded);
   var styles = function styles(theme) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &.", " {\n      ", "\n\n      &[data-panel-type=", "] {\n        ", "\n      }\n    }\n  "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix({
-      theme: theme
-    }), PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;');
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &.", " {\n      ", "\n\n      &[data-panel-type=", "] {\n        ", "\n      }\n    }\n  "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(), PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;');
   };
   if (props['data-panel-type'] === PanelType.CUSTOM && backgroundColor) {
     styles = function styles(theme) {
@@ -34,9 +32,7 @@ var PanelStyled = function PanelStyled(_ref) {
       })({
         theme: theme
       });
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        &.", " {\n          ", "\n        }\n\n        &[data-panel-type=", "] {\n          ", ";\n          ", "\n        }\n      "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix({
-        theme: theme
-      }), PanelType.CUSTOM, customStyle, hasIcon ? '' : 'padding-left: 12px;');
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        &.", " {\n          ", "\n        }\n\n        &[data-panel-type=", "] {\n          ", ";\n          ", "\n        }\n      "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(), PanelType.CUSTOM, customStyle, hasIcon ? '' : 'padding-left: 12px;');
     };
   }
   return jsx("div", _extends({

package/dist/esm/ui/Expand.js

@@ -21,10 +21,8 @@ var titleStyles = css(_templateObject || (_templateObject = _taggedTemplateLiter
 var Container = function Container(props) {
   var paddingBottom = props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
   var sharedContainerStyles = sharedExpandStyles.containerStyles(props);
-  var styles = function styles(themeProps) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles({
-      theme: themeProps
-    }), paddingBottom);
+  var styles = function styles() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles(), paddingBottom);
   };
   return jsx("div", _extends({
     css: styles
@@ -32,10 +30,8 @@ var Container = function Container(props) {
 };
 var TitleContainer = function TitleContainer(props) {
   var paddingBottom = !props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
-  var styles = function styles(themeProps) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", "\n    padding: ", ";\n    padding-bottom: ", ";\n  "])), sharedExpandStyles.titleContainerStyles({
-      theme: themeProps
-    }), "var(--ds-space-100, 8px)", paddingBottom);
+  var styles = function styles() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", "\n    padding: ", ";\n    padding-bottom: ", ";\n  "])), sharedExpandStyles.titleContainerStyles(), "var(--ds-space-100, 8px)", paddingBottom);
   };
   return jsx("button", _extends({
     css: styles
@@ -45,10 +41,8 @@ TitleContainer.displayName = 'TitleContainerButton';
 var ContentContainer = function ContentContainer(props) {
   var sharedContentStyles = sharedExpandStyles.contentStyles(props);
   var visibility = props.expanded ? 'visible' : 'hidden';
-  var styles = function styles(themeProps) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8, or directly replace with 36px\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles({
-      theme: themeProps
-    }), "var(--ds-space-200, 16px)", gridSize() * 5 - gridSize() / 2, visibility);
+  var styles = function styles() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8, or directly replace with 36px\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles(), "var(--ds-space-200, 16px)", gridSize() * 5 - gridSize() / 2, visibility);
   };
   return jsx("div", _extends({
     css: styles

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

@@ -45,7 +45,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.0.4";
+var packageVersion = "109.1.0";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/esm/ui/Renderer/style.js

@@ -120,7 +120,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), RendererCssClassName.DOCUMENT, mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), themed({
       light: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
       dark: "var(--ds-text-subtlest, ".concat(colors.DN200, ")")
-    })(themeProps), telepointerStyles(themeProps), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(), ruleSharedStyles(themeProps), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(themeProps), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({
+    })(themeProps), telepointerStyles(themeProps), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(), ruleSharedStyles(), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({
       light: "var(--ds-background-neutral, ".concat(colors.N30A, ")"),
       dark: "var(--ds-background-neutral, ".concat(colors.DN70, ")")
     })(themeProps), "var(--ds-border-radius-100, 3px)", themed({

package/dist/esm/ui/annotations/draft/component.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 /** @jsx jsx */
+
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { InsertDraftPosition } from '../types';
@@ -10,8 +11,8 @@ import { splitText, calcTextSplitOffset, findTextString } from './text';
 import { calcInsertDraftPositionOnText } from './position';
 import { dataAttributes } from './dom';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
-var markStyles = function markStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  ", ";\n"])), AnnotationSharedCSSByState(props).focus);
+var markStyles = function markStyles() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  ", ";\n"])), AnnotationSharedCSSByState().focus);
 };
 export var AnnotationDraft = function AnnotationDraft(_ref) {
   var draftPosition = _ref.draftPosition,

package/dist/esm/ui/annotations/element/mark.js

@@ -6,16 +6,13 @@ var _templateObject;
 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 React, { useMemo, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
-var markStyles = function markStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState({
-    theme: props
-  }).blur, AnnotationSharedCSSByState({
-    theme: props
-  }).focus);
+var markStyles = function markStyles() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState().blur, AnnotationSharedCSSByState().focus);
 };
 export var MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,

package/dist/types/react/marks/border.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { BorderMarkAttributes } from '@atlaskit/adf-schema';
+import type { MarkProps } from '../types';
+export default function Border(props: MarkProps<BorderMarkAttributes>): jsx.JSX.Element;

package/dist/types/react/marks/index.d.ts

@@ -1,5 +1,5 @@
-import { ComponentType } from 'react';
-import { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { ComponentType } from 'react';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import Code from './code';
 import Em from './em';
 import Link from './link';
@@ -14,8 +14,9 @@ import UnsupportedNodeAttribute from './unsupportedNodeAttribute';
 import DataConsumer from './data-consumer';
 import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation';
+import Border from './border';
 export declare const markToReact: {
     [key: string]: ComponentType<any>;
 };
 export declare const toReact: (mark: Mark) => ComponentType<any>;
-export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark, };
+export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, Border, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark, };

package/dist/types/react/nodes/mediaInline.d.ts

@@ -9,6 +9,7 @@ import type { IntlShape, WrappedComponentProps } from 'react-intl-next';
 import type { ClipboardAttrs, MediaProvider } from '../../ui/MediaCard';
 import type { RendererAppearance } from '../../ui/Renderer/types';
 import type { RendererContext } from '../types';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 type MediaInlineProviders = {
     mediaProvider?: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
@@ -32,6 +33,7 @@ export type MediaInlineProps = {
     eventHandlers?: EventHandlers;
     rendererAppearance?: RendererAppearance;
     featureFlags?: MediaFeatureFlags;
+    marks?: Array<Mark>;
 };
 export declare const RenderMediaInline: FC<RenderMediaInlineProps & MediaInlineAttrs>;
 declare const _default: FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>> & {

package/dist/types/react/nodes/panel.d.ts

@@ -2,7 +2,7 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 export interface Props {
     children?: React.ReactNode;
     providers?: ProviderFactory;

package/dist/types/ui/Expand.d.ts

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
-import { AnalyticsEventPayload } from '../analytics/events';
-import { WrappedComponentProps } from 'react-intl-next';
-import { RendererAppearance } from './Renderer/types';
+import type { AnalyticsEventPayload } from '../analytics/events';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { RendererAppearance } from './Renderer/types';
 export type StyleProps = {
     expanded?: boolean;
     focused?: boolean;

package/dist/types/ui/annotations/draft/component.d.ts

@@ -1,6 +1,8 @@
 /** @jsx jsx */
-import React, { ReactNode } from 'react';
-import { InsertDraftPosition, Position } from '../types';
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { Position } from '../types';
+import { InsertDraftPosition } from '../types';
 export declare const AnnotationDraft: React.FC<{
     draftPosition: Position;
 }>;

package/dist/types/ui/annotations/element/mark.d.ts

@@ -1,7 +1,7 @@
-/** @jsx jsx */
 import React from 'react';
 import type { OnAnnotationClickPayload } from '@atlaskit/editor-common/types';
-import { AnnotationMarkStates, AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
+import type { AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
+import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 type MarkComponentProps = {
     id: AnnotationId;
     annotationParentIds: AnnotationId[];

package/dist/types-ts4.5/react/marks/border.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { BorderMarkAttributes } from '@atlaskit/adf-schema';
+import type { MarkProps } from '../types';
+export default function Border(props: MarkProps<BorderMarkAttributes>): jsx.JSX.Element;

package/dist/types-ts4.5/react/marks/index.d.ts

@@ -1,5 +1,5 @@
-import { ComponentType } from 'react';
-import { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { ComponentType } from 'react';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import Code from './code';
 import Em from './em';
 import Link from './link';
@@ -14,8 +14,9 @@ import UnsupportedNodeAttribute from './unsupportedNodeAttribute';
 import DataConsumer from './data-consumer';
 import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation';
+import Border from './border';
 export declare const markToReact: {
     [key: string]: ComponentType<any>;
 };
 export declare const toReact: (mark: Mark) => ComponentType<any>;
-export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark, };
+export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, Border, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark, };

package/dist/types-ts4.5/react/nodes/mediaInline.d.ts

@@ -9,6 +9,7 @@ import type { IntlShape, WrappedComponentProps } from 'react-intl-next';
 import type { ClipboardAttrs, MediaProvider } from '../../ui/MediaCard';
 import type { RendererAppearance } from '../../ui/Renderer/types';
 import type { RendererContext } from '../types';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 type MediaInlineProviders = {
     mediaProvider?: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
@@ -32,6 +33,7 @@ export type MediaInlineProps = {
     eventHandlers?: EventHandlers;
     rendererAppearance?: RendererAppearance;
     featureFlags?: MediaFeatureFlags;
+    marks?: Array<Mark>;
 };
 export declare const RenderMediaInline: FC<RenderMediaInlineProps & MediaInlineAttrs>;
 declare const _default: FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>> & {

package/dist/types-ts4.5/react/nodes/panel.d.ts

@@ -2,7 +2,7 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 export interface Props {
     children?: React.ReactNode;
     providers?: ProviderFactory;

package/dist/types-ts4.5/ui/Expand.d.ts

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
-import { AnalyticsEventPayload } from '../analytics/events';
-import { WrappedComponentProps } from 'react-intl-next';
-import { RendererAppearance } from './Renderer/types';
+import type { AnalyticsEventPayload } from '../analytics/events';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { RendererAppearance } from './Renderer/types';
 export type StyleProps = {
     expanded?: boolean;
     focused?: boolean;

package/dist/types-ts4.5/ui/annotations/draft/component.d.ts

@@ -1,6 +1,8 @@
 /** @jsx jsx */
-import React, { ReactNode } from 'react';
-import { InsertDraftPosition, Position } from '../types';
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { Position } from '../types';
+import { InsertDraftPosition } from '../types';
 export declare const AnnotationDraft: React.FC<{
     draftPosition: Position;
 }>;

package/dist/types-ts4.5/ui/annotations/element/mark.d.ts

@@ -1,7 +1,7 @@
-/** @jsx jsx */
 import React from 'react';
 import type { OnAnnotationClickPayload } from '@atlaskit/editor-common/types';
-import { AnnotationMarkStates, AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
+import type { AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
+import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 type MarkComponentProps = {
     id: AnnotationId;
     annotationParentIds: AnnotationId[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.0.4",
+  "version": "109.1.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^17.1.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/editor-common": "^76.27.0",
+    "@atlaskit/editor-common": "^76.28.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-prosemirror": "1.1.0",
@@ -52,7 +52,7 @@
     "@atlaskit/status": "^1.4.0",
     "@atlaskit/task-decision": "^17.9.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.30.0",
+    "@atlaskit/tokens": "^1.31.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",