@atlaskit/renderer 109.10.5 → 109.10.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 109.10.7
+
+### Patch Changes
+
+- [#83297](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83297) [`6b1707c169e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6b1707c169e0) - The internal composition of this component has changed. There is no expected change in behaviour.
+
+## 109.10.6
+
+### Patch Changes
+
+- [#84179](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84179) [`8bd86714a915`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8bd86714a915) - Fixed annotation highlight support for media elements by allow mark to be changed to a block level element
+
 ## 109.10.5
 
 ### Patch Changes

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

@@ -22,7 +22,8 @@ var AnnotationComponent = function AnnotationComponent(_ref) {
     dataAttributes = _ref.dataAttributes,
     _ref$annotationParent = _ref.annotationParentIds,
     annotationParentIds = _ref$annotationParent === void 0 ? [] : _ref$annotationParent,
-    allowAnnotations = _ref.allowAnnotations;
+    allowAnnotations = _ref.allowAnnotations,
+    useBlockLevel = _ref.useBlockLevel;
   var data = _objectSpread(_objectSpread({}, dataAttributes), (0, _adfSchema.buildAnnotationMarkDataAttributes)({
     id: id,
     annotationType: annotationType
@@ -32,7 +33,8 @@ var AnnotationComponent = function AnnotationComponent(_ref) {
       id: id,
       dataAttributes: data,
       annotationParentIds: annotationParentIds,
-      annotationType: annotationType
+      annotationType: annotationType,
+      useBlockLevel: useBlockLevel
     }, children);
   }
   return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({

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

@@ -33,7 +33,7 @@ var embedCardWrapperStyles = (0, _react.css)({
   margin: '0 auto'
 });
 var uIMediaSingleLayoutStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });

package/dist/cjs/react/nodes/media/index.js

@@ -81,7 +81,8 @@ var MediaAnnotation = function MediaAnnotation(_ref3) {
     // This should be fine being empty [] since the serializer serializeFragmentChild getMarkProps call always passes
     ,
     annotationParentIds: [],
-    allowAnnotations: true
+    allowAnnotations: true,
+    useBlockLevel: true
   }, children);
 };
 var Media = exports.default = /*#__PURE__*/function (_PureComponent) {

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

@@ -55,7 +55,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 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.10.5";
+var packageVersion = "109.10.7";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -17,7 +17,8 @@ var MarkElement = exports.MarkElement = function MarkElement(_ref) {
   var annotationParentIds = _ref.annotationParentIds,
     children = _ref.children,
     dataAttributes = _ref.dataAttributes,
-    id = _ref.id;
+    id = _ref.id,
+    useBlockLevel = _ref.useBlockLevel;
   var updateSubscriber = (0, _hooks.useInlineCommentSubscriberContext)();
   var states = (0, _react.useContext)(_context.InlineCommentsStateContext);
   var hasFocus = (0, _hooks.useHasFocusEvent)({
@@ -50,6 +51,7 @@ var MarkElement = exports.MarkElement = function MarkElement(_ref) {
     annotationParentIds: activeParentIds,
     onClick: onClick,
     hasFocus: hasFocus,
-    state: states[id]
+    state: states[id],
+    useBlockLevel: useBlockLevel
   }, children);
 };

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

@@ -1,29 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MarkComponent = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _react2 = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _templateObject;
 /** @jsx jsx */
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState` is not object-safe
 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    & div.media-file-card-view {\n      ", ";\n      z-index: -1;\n    }\n  }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)().blur, (0, _styles.AnnotationSharedCSSByState)().focus, _styles.mediaAnnotationStyles);
+  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 blockStyles = function blockStyles() {
+  return (0, _react2.css)((0, _defineProperty2.default)({
+    color: 'inherit',
+    backgroundColor: 'unset',
+    WebkitTapHighlightColor: 'transparent'
+  }, "&[data-mark-annotation-state='".concat(_adfSchema.AnnotationMarkStates.ACTIVE, "']"), _styles.mediaAnnotationStyles));
 };
 var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,
@@ -32,7 +35,8 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
     id = _ref.id,
     state = _ref.state,
     hasFocus = _ref.hasFocus,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    useBlockLevel = _ref.useBlockLevel;
   var annotationIds = (0, _react.useMemo)(function () {
     return (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(annotationParentIds), [id])));
   }, [id, annotationParentIds]);
@@ -61,15 +65,9 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
   } : {
     'aria-details': annotationIds.join(', ')
   };
-  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes') ? (0, _react2.jsx)("mark", (0, _extends2.default)({
-    id: id,
-    onClickCapture: onMarkClick
-  }, accessibility, overriddenData, {
-    css: markStyles
-  }), children) : (0, _react2.jsx)("mark", (0, _extends2.default)({
-    id: id,
-    onClick: onMarkClick
-  }, accessibility, overriddenData, {
-    css: markStyles
+  return (0, _react2.jsx)(useBlockLevel ? 'div' : 'mark', _objectSpread(_objectSpread(_objectSpread((0, _defineProperty2.default)({
+    id: id
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), {}, {
+    css: useBlockLevel ? blockStyles : markStyles
   }), children);
 };

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

@@ -11,7 +11,8 @@ const AnnotationComponent = ({
   children,
   dataAttributes,
   annotationParentIds = [],
-  allowAnnotations
+  allowAnnotations,
+  useBlockLevel
 }) => {
   const data = {
     ...dataAttributes,
@@ -25,7 +26,8 @@ const AnnotationComponent = ({
       id: id,
       dataAttributes: data,
       annotationParentIds: annotationParentIds,
-      annotationType: annotationType
+      annotationType: annotationType,
+      useBlockLevel: useBlockLevel
     }, children);
   }
   return /*#__PURE__*/React.createElement("span", _extends({

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

@@ -24,7 +24,7 @@ const embedCardWrapperStyles = css({
   margin: '0 auto'
 });
 const uIMediaSingleLayoutStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });

package/dist/es2019/react/nodes/media/index.js

@@ -68,7 +68,8 @@ const MediaAnnotation = ({
     // This should be fine being empty [] since the serializer serializeFragmentChild getMarkProps call always passes
     ,
     annotationParentIds: [],
-    allowAnnotations: true
+    allowAnnotations: true,
+    useBlockLevel: true
   }, children);
 };
 export default class Media extends PureComponent {

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

@@ -36,7 +36,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.10.5";
+const packageVersion = "109.10.7";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

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

@@ -8,7 +8,8 @@ const MarkElement = ({
   annotationParentIds,
   children,
   dataAttributes,
-  id
+  id,
+  useBlockLevel
 }) => {
   const updateSubscriber = useInlineCommentSubscriberContext();
   const states = useContext(InlineCommentsStateContext);
@@ -42,7 +43,8 @@ const MarkElement = ({
     annotationParentIds: activeParentIds,
     onClick: onClick,
     hasFocus: hasFocus,
-    state: states[id]
+    state: states[id],
+    useBlockLevel: useBlockLevel
   }, children);
 };
 export { MarkElement };

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

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
-import React, { useMemo, useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { AnnotationSharedCSSByState, mediaAnnotationStyles } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
@@ -20,13 +19,14 @@ const markStyles = () => css`
     &[data-has-focus='true'] {
       ${AnnotationSharedCSSByState().focus};
     }
-
-    & div.media-file-card-view {
-      ${mediaAnnotationStyles};
-      z-index: -1;
-    }
   }
 `;
+const blockStyles = () => css({
+  color: 'inherit',
+  backgroundColor: 'unset',
+  WebkitTapHighlightColor: 'transparent',
+  [`&[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}']`]: mediaAnnotationStyles
+});
 export const MarkComponent = ({
   annotationParentIds,
   children,
@@ -34,7 +34,8 @@ export const MarkComponent = ({
   id,
   state,
   hasFocus,
-  onClick
+  onClick,
+  useBlockLevel
 }) => {
   const annotationIds = useMemo(() => [...new Set([...annotationParentIds, id])], [id, annotationParentIds]);
   const onMarkClick = useCallback(event => {
@@ -63,15 +64,11 @@ export const MarkComponent = ({
   } : {
     'aria-details': annotationIds.join(', ')
   };
-  return getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? jsx("mark", _extends({
-    id: id,
-    onClickCapture: onMarkClick
-  }, accessibility, overriddenData, {
-    css: markStyles
-  }), children) : jsx("mark", _extends({
-    id: id,
-    onClick: onMarkClick
-  }, accessibility, overriddenData, {
-    css: markStyles
-  }), children);
+  return jsx(useBlockLevel ? 'div' : 'mark', {
+    id,
+    [getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? 'onClickCapture' : 'onClick']: onMarkClick,
+    ...accessibility,
+    ...overriddenData,
+    css: useBlockLevel ? blockStyles : markStyles
+  }, children);
 };

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

@@ -15,7 +15,8 @@ var AnnotationComponent = function AnnotationComponent(_ref) {
     dataAttributes = _ref.dataAttributes,
     _ref$annotationParent = _ref.annotationParentIds,
     annotationParentIds = _ref$annotationParent === void 0 ? [] : _ref$annotationParent,
-    allowAnnotations = _ref.allowAnnotations;
+    allowAnnotations = _ref.allowAnnotations,
+    useBlockLevel = _ref.useBlockLevel;
   var data = _objectSpread(_objectSpread({}, dataAttributes), buildAnnotationMarkDataAttributes({
     id: id,
     annotationType: annotationType
@@ -25,7 +26,8 @@ var AnnotationComponent = function AnnotationComponent(_ref) {
       id: id,
       dataAttributes: data,
       annotationParentIds: annotationParentIds,
-      annotationType: annotationType
+      annotationType: annotationType,
+      useBlockLevel: useBlockLevel
     }, children);
   }
   return /*#__PURE__*/React.createElement("span", _extends({

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

@@ -25,7 +25,7 @@ var embedCardWrapperStyles = css({
   margin: '0 auto'
 });
 var uIMediaSingleLayoutStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });

package/dist/esm/react/nodes/media/index.js

@@ -73,7 +73,8 @@ var MediaAnnotation = function MediaAnnotation(_ref3) {
     // This should be fine being empty [] since the serializer serializeFragmentChild getMarkProps call always passes
     ,
     annotationParentIds: [],
-    allowAnnotations: true
+    allowAnnotations: true,
+    useBlockLevel: true
   }, children);
 };
 var Media = /*#__PURE__*/function (_PureComponent) {

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

@@ -46,7 +46,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.10.5";
+var packageVersion = "109.10.7";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -8,7 +8,8 @@ var MarkElement = function MarkElement(_ref) {
   var annotationParentIds = _ref.annotationParentIds,
     children = _ref.children,
     dataAttributes = _ref.dataAttributes,
-    id = _ref.id;
+    id = _ref.id,
+    useBlockLevel = _ref.useBlockLevel;
   var updateSubscriber = useInlineCommentSubscriberContext();
   var states = useContext(InlineCommentsStateContext);
   var hasFocus = useHasFocusEvent({
@@ -41,7 +42,8 @@ var MarkElement = function MarkElement(_ref) {
     annotationParentIds: activeParentIds,
     onClick: onClick,
     hasFocus: hasFocus,
-    state: states[id]
+    state: states[id],
+    useBlockLevel: useBlockLevel
   }, children);
 };
 export { MarkElement };

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

@@ -1,13 +1,12 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 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 { useMemo, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { AnnotationSharedCSSByState, mediaAnnotationStyles } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
@@ -15,7 +14,14 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState` is not object-safe
 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    & div.media-file-card-view {\n      ", ";\n      z-index: -1;\n    }\n  }\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState().blur, AnnotationSharedCSSByState().focus, mediaAnnotationStyles);
+  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);
+};
+var blockStyles = function blockStyles() {
+  return css(_defineProperty({
+    color: 'inherit',
+    backgroundColor: 'unset',
+    WebkitTapHighlightColor: 'transparent'
+  }, "&[data-mark-annotation-state='".concat(AnnotationMarkStates.ACTIVE, "']"), mediaAnnotationStyles));
 };
 export var MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,
@@ -24,7 +30,8 @@ export var MarkComponent = function MarkComponent(_ref) {
     id = _ref.id,
     state = _ref.state,
     hasFocus = _ref.hasFocus,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    useBlockLevel = _ref.useBlockLevel;
   var annotationIds = useMemo(function () {
     return _toConsumableArray(new Set([].concat(_toConsumableArray(annotationParentIds), [id])));
   }, [id, annotationParentIds]);
@@ -53,15 +60,9 @@ export var MarkComponent = function MarkComponent(_ref) {
   } : {
     'aria-details': annotationIds.join(', ')
   };
-  return getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? jsx("mark", _extends({
-    id: id,
-    onClickCapture: onMarkClick
-  }, accessibility, overriddenData, {
-    css: markStyles
-  }), children) : jsx("mark", _extends({
-    id: id,
-    onClick: onMarkClick
-  }, accessibility, overriddenData, {
-    css: markStyles
+  return jsx(useBlockLevel ? 'div' : 'mark', _objectSpread(_objectSpread(_objectSpread(_defineProperty({
+    id: id
+  }, getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), {}, {
+    css: useBlockLevel ? blockStyles : markStyles
   }), children);
 };

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { MarkProps, AnnotationMarkMeta } from '../types';
-import { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { MarkProps, AnnotationMarkMeta } from '../types';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 export declare const isAnnotationMark: (mark: Mark) => boolean;
-declare const AnnotationComponent: ({ id, annotationType, children, dataAttributes, annotationParentIds, allowAnnotations, }: MarkProps<AnnotationMarkMeta>) => JSX.Element;
+declare const AnnotationComponent: ({ id, annotationType, children, dataAttributes, annotationParentIds, allowAnnotations, useBlockLevel, }: MarkProps<AnnotationMarkMeta>) => JSX.Element;
 export default AnnotationComponent;

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

@@ -53,6 +53,7 @@ export interface AnnotationMarkMeta extends MarkMeta {
     annotationType: AnnotationTypes;
     annotationParentIds: string[];
     allowAnnotations: boolean;
+    useBlockLevel?: boolean;
 }
 export type NodeProps<NodeAttrs = {}> = NodeAttrs & PropsWithChildren<NodeMeta>;
 export type MarkProps<MarkAttrs = {}> = MarkAttrs & PropsWithChildren<MarkMeta>;

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

@@ -5,6 +5,7 @@ type MarkElementProps = React.PropsWithChildren<{
     annotationParentIds: AnnotationId[];
     dataAttributes: AnnotationDataAttributes;
     annotationType: AnnotationTypes;
+    useBlockLevel?: boolean;
 }>;
-declare const MarkElement: ({ annotationParentIds, children, dataAttributes, id, }: MarkElementProps) => JSX.Element;
+declare const MarkElement: ({ annotationParentIds, children, dataAttributes, id, useBlockLevel, }: MarkElementProps) => JSX.Element;
 export { MarkElement };

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

@@ -1,5 +1,4 @@
-import React from 'react';
-import { jsx } from '@emotion/react';
+import type React from 'react';
 import type { OnAnnotationClickPayload } from '@atlaskit/editor-common/types';
 import type { AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
@@ -10,6 +9,45 @@ type MarkComponentProps = {
     state: AnnotationMarkStates | null;
     hasFocus: boolean;
     onClick: (props: OnAnnotationClickPayload) => void;
+    useBlockLevel?: boolean;
 };
-export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, }: React.PropsWithChildren<MarkComponentProps>) => jsx.JSX.Element;
+export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, useBlockLevel, }: React.PropsWithChildren<MarkComponentProps>) => React.DetailedReactHTMLElement<{
+    css: () => import("@emotion/react").SerializedStyles;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
+    'aria-disabled': boolean;
+    'aria-details'?: undefined;
+    id: string;
+} | {
+    css: () => import("@emotion/react").SerializedStyles;
+    'data-mark-annotation-state': AnnotationMarkStates;
+    'data-has-focus': boolean;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'aria-disabled': boolean;
+    'aria-details'?: undefined;
+    id: string;
+} | {
+    css: () => import("@emotion/react").SerializedStyles;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
+    'aria-details': string;
+    'aria-disabled'?: undefined;
+    id: string;
+} | {
+    css: () => import("@emotion/react").SerializedStyles;
+    'data-mark-annotation-state': AnnotationMarkStates;
+    'data-has-focus': boolean;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'aria-details': string;
+    'aria-disabled'?: undefined;
+    id: string;
+}, HTMLElement>;
 export {};

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { MarkProps, AnnotationMarkMeta } from '../types';
-import { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { MarkProps, AnnotationMarkMeta } from '../types';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 export declare const isAnnotationMark: (mark: Mark) => boolean;
-declare const AnnotationComponent: ({ id, annotationType, children, dataAttributes, annotationParentIds, allowAnnotations, }: MarkProps<AnnotationMarkMeta>) => JSX.Element;
+declare const AnnotationComponent: ({ id, annotationType, children, dataAttributes, annotationParentIds, allowAnnotations, useBlockLevel, }: MarkProps<AnnotationMarkMeta>) => JSX.Element;
 export default AnnotationComponent;

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

@@ -53,6 +53,7 @@ export interface AnnotationMarkMeta extends MarkMeta {
     annotationType: AnnotationTypes;
     annotationParentIds: string[];
     allowAnnotations: boolean;
+    useBlockLevel?: boolean;
 }
 export type NodeProps<NodeAttrs = {}> = NodeAttrs & PropsWithChildren<NodeMeta>;
 export type MarkProps<MarkAttrs = {}> = MarkAttrs & PropsWithChildren<MarkMeta>;

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

@@ -5,6 +5,7 @@ type MarkElementProps = React.PropsWithChildren<{
     annotationParentIds: AnnotationId[];
     dataAttributes: AnnotationDataAttributes;
     annotationType: AnnotationTypes;
+    useBlockLevel?: boolean;
 }>;
-declare const MarkElement: ({ annotationParentIds, children, dataAttributes, id, }: MarkElementProps) => JSX.Element;
+declare const MarkElement: ({ annotationParentIds, children, dataAttributes, id, useBlockLevel, }: MarkElementProps) => JSX.Element;
 export { MarkElement };

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

@@ -1,5 +1,4 @@
-import React from 'react';
-import { jsx } from '@emotion/react';
+import type React from 'react';
 import type { OnAnnotationClickPayload } from '@atlaskit/editor-common/types';
 import type { AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
@@ -10,6 +9,45 @@ type MarkComponentProps = {
     state: AnnotationMarkStates | null;
     hasFocus: boolean;
     onClick: (props: OnAnnotationClickPayload) => void;
+    useBlockLevel?: boolean;
 };
-export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, }: React.PropsWithChildren<MarkComponentProps>) => jsx.JSX.Element;
+export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, useBlockLevel, }: React.PropsWithChildren<MarkComponentProps>) => React.DetailedReactHTMLElement<{
+    css: () => import("@emotion/react").SerializedStyles;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
+    'aria-disabled': boolean;
+    'aria-details'?: undefined;
+    id: string;
+} | {
+    css: () => import("@emotion/react").SerializedStyles;
+    'data-mark-annotation-state': AnnotationMarkStates;
+    'data-has-focus': boolean;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'aria-disabled': boolean;
+    'aria-details'?: undefined;
+    id: string;
+} | {
+    css: () => import("@emotion/react").SerializedStyles;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
+    'aria-details': string;
+    'aria-disabled'?: undefined;
+    id: string;
+} | {
+    css: () => import("@emotion/react").SerializedStyles;
+    'data-mark-annotation-state': AnnotationMarkStates;
+    'data-has-focus': boolean;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'aria-details': string;
+    'aria-disabled'?: undefined;
+    id: string;
+}, HTMLElement>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.10.5",
+  "version": "109.10.7",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/button": "^17.7.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/editor-common": "^78.19.0",
+    "@atlaskit/editor-common": "^78.20.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-prosemirror": "3.0.0",

package/.eslintrc.js

@@ -1,8 +0,0 @@
-module.exports = {
-  rules: {
-    '@atlaskit/design-system/ensure-design-token-usage/preview': [
-      'error',
-      { domains: ['spacing'], shouldEnforceFallbacks: false },
-    ],
-  },
-};