@atlaskit/renderer 109.8.1 → 109.8.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 109.8.3
+
+### Patch Changes
+
+- [#81759](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81759) [`912bb3a58129`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/912bb3a58129) - fix regression issue of WidthProvider in renderer used when hover template marco inline extension
+
+## 109.8.2
+
+### Patch Changes
+
+- [#81133](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81133) [`ad1f563ea96b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ad1f563ea96b) - [ux] ED-22503 Styling for annotations on the inline card for edit and render view
+
 ## 109.8.1
 
 ### Patch Changes

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

@@ -6,14 +6,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
 var _smartCard = require("@atlaskit/smart-card");
 var _ssr = require("@atlaskit/smart-card/ssr");
 var _ui = require("@atlaskit/editor-common/ui");
+var _colors = require("@atlaskit/theme/colors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _fallback = require("./fallback");
 var _SmartCardStorage = require("../../ui/SmartCardStorage");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
 var _analyticsNext = require("@atlaskit/analytics-next");
+/** @jsx jsx */
+
+var annotatedCard = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes') ? (0, _react.css)({
+  "[data-mark-type='annotation'][data-mark-annotation-state='active'] &": {
+    background: "var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y75, ")"),
+    borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")")),
+    boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")"),
+    cursor: 'pointer',
+    padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)")
+  }
+}) : '';
 var InlineCard = function InlineCard(props) {
   var url = props.url,
     data = props.data,
@@ -41,9 +54,9 @@ var InlineCard = function InlineCard(props) {
     location: 'renderer'
   };
   if (ssr && url) {
-    return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+    return (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
       data: analyticsData
-    }, /*#__PURE__*/_react.default.createElement(_ssr.CardSSR, {
+    }, (0, _react.jsx)(_ssr.CardSSR, {
       appearance: "inline",
       url: url,
       showAuthTooltip: showAuthTooltip,
@@ -59,15 +72,16 @@ var InlineCard = function InlineCard(props) {
       throw err;
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+  return (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
     data: analyticsData
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, (0, _react.jsx)("span", {
     "data-inline-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
-    "data-card-url": url
-  }, /*#__PURE__*/_react.default.createElement(_fallback.CardErrorBoundary, (0, _extends2.default)({
+    "data-card-url": url,
+    css: annotatedCard
+  }, (0, _react.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
     unsupportedComponent: _ui.UnsupportedInline
-  }, cardProps), /*#__PURE__*/_react.default.createElement(_smartCard.Card, (0, _extends2.default)({
+  }, cardProps), (0, _react.jsx)(_smartCard.Card, (0, _extends2.default)({
     appearance: "inline",
     showHoverPreview: !hideHoverPreview,
     showAuthTooltip: showAuthTooltip,

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.8.1";
+var packageVersion = "109.8.3";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -387,7 +387,8 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,
           onMouseDown: this.onMouseDownEditView,
-          ssr: media === null || media === void 0 ? void 0 : media.ssr
+          ssr: media === null || media === void 0 ? void 0 : media.ssr,
+          isInsideOfInlineExtension: this.props.isInsideOfInlineExtension
         }, enableSsrInlineScripts ? (0, _react2.jsx)(_breakoutSsr.BreakoutSSRInlineScript, null) : null, (0, _react2.jsx)(RendererActionsInternalUpdater, {
           doc: pmDoc,
           schema: schema,
@@ -474,7 +475,8 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     onMouseDown = props.onMouseDown,
     useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock,
     addTelepointer = props.addTelepointer,
-    ssr = props.ssr;
+    ssr = props.ssr,
+    isInsideOfInlineExtension = props.isInsideOfInlineExtension;
   var createTelepointer = function createTelepointer() {
     var telepointer = document.createElement('span');
     telepointer.textContent = "\u200B";
@@ -529,7 +531,7 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
   return (0, _react2.jsx)(_ui.WidthProvider, {
     className: "ak-renderer-wrapper is-".concat(appearance),
     "data-appearance": appearance,
-    shouldCheckExistingValue: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.inline_extension.extended_lcqdn') || false
+    shouldCheckExistingValue: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.inline_extension.extended_lcqdn') && isInsideOfInlineExtension
   }, (0, _react2.jsx)(_ui.BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
   }, (0, _react2.jsx)(_EditorMediaClientProvider.EditorMediaClientProvider, {

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

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,12 +10,15 @@ 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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("react");
+var _react = _interopRequireWildcard(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
@@ -40,6 +44,9 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
 
     // prevents from opening link URL inside webView in Safari
     event.preventDefault();
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes')) {
+      event.stopPropagation();
+    }
     onClick({
       eventTarget: event.target,
       annotationIds: annotationIds
@@ -54,7 +61,12 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
   } : {
     'aria-details': annotationIds.join(', ')
   };
-  return (0, _react2.jsx)("mark", (0, _extends2.default)({
+  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, {

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

@@ -1,12 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { Card } from '@atlaskit/smart-card';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { UnsupportedInline } from '@atlaskit/editor-common/ui';
+import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { CardErrorBoundary } from './fallback';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+const annotatedCard = getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? css({
+  "[data-mark-type='annotation'][data-mark-annotation-state='active'] &": {
+    background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
+    borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
+    boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`,
+    cursor: 'pointer',
+    padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-025, 2px)"}`
+  }
+}) : '';
 const InlineCard = props => {
   const {
     url,
@@ -37,9 +49,9 @@ const InlineCard = props => {
     location: 'renderer'
   };
   if (ssr && url) {
-    return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    return jsx(AnalyticsContext, {
       data: analyticsData
-    }, /*#__PURE__*/React.createElement(CardSSR, {
+    }, jsx(CardSSR, {
       appearance: "inline",
       url: url,
       showAuthTooltip: showAuthTooltip,
@@ -56,15 +68,16 @@ const InlineCard = props => {
       throw err;
     }
   };
-  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+  return jsx(AnalyticsContext, {
     data: analyticsData
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     "data-inline-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
-    "data-card-url": url
-  }, /*#__PURE__*/React.createElement(CardErrorBoundary, _extends({
+    "data-card-url": url,
+    css: annotatedCard
+  }, jsx(CardErrorBoundary, _extends({
     unsupportedComponent: UnsupportedInline
-  }, cardProps), /*#__PURE__*/React.createElement(Card, _extends({
+  }, cardProps), jsx(Card, _extends({
     appearance: "inline",
     showHoverPreview: !hideHoverPreview,
     showAuthTooltip: showAuthTooltip,

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.8.1";
+const packageVersion = "109.8.3";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);
@@ -363,7 +363,8 @@ export class Renderer extends PureComponent {
         innerRef: this.editorRef,
         onClick: handleWrapperOnClick,
         onMouseDown: this.onMouseDownEditView,
-        ssr: media === null || media === void 0 ? void 0 : media.ssr
+        ssr: media === null || media === void 0 ? void 0 : media.ssr,
+        isInsideOfInlineExtension: this.props.isInsideOfInlineExtension
       }, enableSsrInlineScripts ? jsx(BreakoutSSRInlineScript, null) : null, jsx(RendererActionsInternalUpdater, {
         doc: pmDoc,
         schema: schema,
@@ -447,7 +448,8 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     onMouseDown,
     useBlockRenderForCodeBlock,
     addTelepointer,
-    ssr
+    ssr,
+    isInsideOfInlineExtension
   } = props;
   const createTelepointer = () => {
     const telepointer = document.createElement('span');
@@ -501,7 +503,7 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
   return jsx(WidthProvider, {
     className: `ak-renderer-wrapper is-${appearance}`,
     "data-appearance": appearance,
-    shouldCheckExistingValue: getBooleanFF('platform.editor.inline_extension.extended_lcqdn') || false
+    shouldCheckExistingValue: getBooleanFF('platform.editor.inline_extension.extended_lcqdn') && isInsideOfInlineExtension
   }, jsx(BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
   }, jsx(EditorMediaClientProvider, {

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

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { useMemo, useCallback } from 'react';
+
+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';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState` is not object-safe
 const markStyles = () => css`
@@ -38,6 +40,9 @@ export const MarkComponent = ({
 
     // prevents from opening link URL inside webView in Safari
     event.preventDefault();
+    if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
+      event.stopPropagation();
+    }
     onClick({
       eventTarget: event.target,
       annotationIds
@@ -53,7 +58,12 @@ export const MarkComponent = ({
   } : {
     'aria-details': annotationIds.join(', ')
   };
-  return jsx("mark", _extends({
+  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, {

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

@@ -1,12 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { Card } from '@atlaskit/smart-card';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { UnsupportedInline } from '@atlaskit/editor-common/ui';
+import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { CardErrorBoundary } from './fallback';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+var annotatedCard = getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? css({
+  "[data-mark-type='annotation'][data-mark-annotation-state='active'] &": {
+    background: "var(--ds-background-accent-yellow-subtler, ".concat(Y75, ")"),
+    borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, ".concat(Y300, ")")),
+    boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A), ")"),
+    cursor: 'pointer',
+    padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)")
+  }
+}) : '';
 var InlineCard = function InlineCard(props) {
   var url = props.url,
     data = props.data,
@@ -34,9 +46,9 @@ var InlineCard = function InlineCard(props) {
     location: 'renderer'
   };
   if (ssr && url) {
-    return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    return jsx(AnalyticsContext, {
       data: analyticsData
-    }, /*#__PURE__*/React.createElement(CardSSR, {
+    }, jsx(CardSSR, {
       appearance: "inline",
       url: url,
       showAuthTooltip: showAuthTooltip,
@@ -52,15 +64,16 @@ var InlineCard = function InlineCard(props) {
       throw err;
     }
   };
-  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+  return jsx(AnalyticsContext, {
     data: analyticsData
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     "data-inline-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
-    "data-card-url": url
-  }, /*#__PURE__*/React.createElement(CardErrorBoundary, _extends({
+    "data-card-url": url,
+    css: annotatedCard
+  }, jsx(CardErrorBoundary, _extends({
     unsupportedComponent: UnsupportedInline
-  }, cardProps), /*#__PURE__*/React.createElement(Card, _extends({
+  }, cardProps), jsx(Card, _extends({
     appearance: "inline",
     showHoverPreview: !hideHoverPreview,
     showAuthTooltip: showAuthTooltip,

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.8.1";
+var packageVersion = "109.8.3";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -378,7 +378,8 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,
           onMouseDown: this.onMouseDownEditView,
-          ssr: media === null || media === void 0 ? void 0 : media.ssr
+          ssr: media === null || media === void 0 ? void 0 : media.ssr,
+          isInsideOfInlineExtension: this.props.isInsideOfInlineExtension
         }, enableSsrInlineScripts ? jsx(BreakoutSSRInlineScript, null) : null, jsx(RendererActionsInternalUpdater, {
           doc: pmDoc,
           schema: schema,
@@ -465,7 +466,8 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
     onMouseDown = props.onMouseDown,
     useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock,
     addTelepointer = props.addTelepointer,
-    ssr = props.ssr;
+    ssr = props.ssr,
+    isInsideOfInlineExtension = props.isInsideOfInlineExtension;
   var createTelepointer = function createTelepointer() {
     var telepointer = document.createElement('span');
     telepointer.textContent = "\u200B";
@@ -520,7 +522,7 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
   return jsx(WidthProvider, {
     className: "ak-renderer-wrapper is-".concat(appearance),
     "data-appearance": appearance,
-    shouldCheckExistingValue: getBooleanFF('platform.editor.inline_extension.extended_lcqdn') || false
+    shouldCheckExistingValue: getBooleanFF('platform.editor.inline_extension.extended_lcqdn') && isInsideOfInlineExtension
   }, jsx(BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
   }, jsx(EditorMediaClientProvider, {

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

@@ -6,10 +6,12 @@ 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 { useMemo, useCallback } from 'react';
+
+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';
+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() {
@@ -34,6 +36,9 @@ export var MarkComponent = function MarkComponent(_ref) {
 
     // prevents from opening link URL inside webView in Safari
     event.preventDefault();
+    if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
+      event.stopPropagation();
+    }
     onClick({
       eventTarget: event.target,
       annotationIds: annotationIds
@@ -48,7 +53,12 @@ export var MarkComponent = function MarkComponent(_ref) {
   } : {
     'aria-details': annotationIds.join(', ')
   };
-  return jsx("mark", _extends({
+  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, {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
 import type { SmartLinksOptions } from '../../types/smartLinksOptions';
@@ -8,6 +8,7 @@ export interface InlineCardProps {
     eventHandlers?: EventHandlers;
     portal?: HTMLElement;
     smartLinks?: SmartLinksOptions;
+    marks?: string[];
 }
 declare const _default: {
     new (props: import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps> | Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>): {
@@ -16,16 +17,16 @@ declare const _default: {
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>> & Readonly<{
-            children?: React.ReactNode;
+            children?: import("react").ReactNode;
         }>;
         state: Readonly<{}>;
         refs: {
-            [key: string]: React.ReactInstance;
+            [key: string]: import("react").ReactInstance;
         };
         componentDidMount?(): void;
         shouldComponentUpdate?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>, prevState: Readonly<{}>): any;
         componentDidUpdate?(prevProps: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
@@ -41,16 +42,16 @@ declare const _default: {
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>> & Readonly<{
-            children?: React.ReactNode;
+            children?: import("react").ReactNode;
         }>;
         state: Readonly<{}>;
         refs: {
-            [key: string]: React.ReactInstance;
+            [key: string]: import("react").ReactInstance;
         };
         componentDidMount?(): void;
         shouldComponentUpdate?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>, prevState: Readonly<{}>): any;
         componentDidUpdate?(prevProps: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
@@ -60,6 +61,6 @@ declare const _default: {
         componentWillUpdate?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    contextType?: React.Context<any> | undefined;
+    contextType?: import("react").Context<any> | undefined;
 };
 export default _default;

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

@@ -1,15 +1,15 @@
-/// <reference types="react" />
+import React from 'react';
 import { jsx } from '@emotion/react';
 import type { OnAnnotationClickPayload } from '@atlaskit/editor-common/types';
 import type { AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
-type MarkComponentProps = React.PropsWithChildren<{
+type MarkComponentProps = {
     id: AnnotationId;
     annotationParentIds: AnnotationId[];
     dataAttributes: AnnotationDataAttributes;
     state: AnnotationMarkStates | null;
     hasFocus: boolean;
     onClick: (props: OnAnnotationClickPayload) => void;
-}>;
-export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, }: MarkComponentProps) => jsx.JSX.Element;
+};
+export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, }: React.PropsWithChildren<MarkComponentProps>) => jsx.JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
 import type { SmartLinksOptions } from '../../types/smartLinksOptions';
@@ -8,6 +8,7 @@ export interface InlineCardProps {
     eventHandlers?: EventHandlers;
     portal?: HTMLElement;
     smartLinks?: SmartLinksOptions;
+    marks?: string[];
 }
 declare const _default: {
     new (props: import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps> | Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>): {
@@ -16,16 +17,16 @@ declare const _default: {
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>> & Readonly<{
-            children?: React.ReactNode;
+            children?: import("react").ReactNode;
         }>;
         state: Readonly<{}>;
         refs: {
-            [key: string]: React.ReactInstance;
+            [key: string]: import("react").ReactInstance;
         };
         componentDidMount?(): void;
         shouldComponentUpdate?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>, prevState: Readonly<{}>): any;
         componentDidUpdate?(prevProps: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
@@ -41,16 +42,16 @@ declare const _default: {
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>> & Readonly<{
-            children?: React.ReactNode;
+            children?: import("react").ReactNode;
         }>;
         state: Readonly<{}>;
         refs: {
-            [key: string]: React.ReactInstance;
+            [key: string]: import("react").ReactInstance;
         };
         componentDidMount?(): void;
         shouldComponentUpdate?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>, prevState: Readonly<{}>): any;
         componentDidUpdate?(prevProps: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
@@ -60,6 +61,6 @@ declare const _default: {
         componentWillUpdate?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    contextType?: React.Context<any> | undefined;
+    contextType?: import("react").Context<any> | undefined;
 };
 export default _default;

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

@@ -1,15 +1,15 @@
-/// <reference types="react" />
+import React from 'react';
 import { jsx } from '@emotion/react';
 import type { OnAnnotationClickPayload } from '@atlaskit/editor-common/types';
 import type { AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
-type MarkComponentProps = React.PropsWithChildren<{
+type MarkComponentProps = {
     id: AnnotationId;
     annotationParentIds: AnnotationId[];
     dataAttributes: AnnotationDataAttributes;
     state: AnnotationMarkStates | null;
     hasFocus: boolean;
     onClick: (props: OnAnnotationClickPayload) => void;
-}>;
-export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, }: MarkComponentProps) => jsx.JSX.Element;
+};
+export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, }: React.PropsWithChildren<MarkComponentProps>) => jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.8.1",
+  "version": "109.8.3",
   "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.12.0",
+    "@atlaskit/editor-common": "^78.14.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-prosemirror": "3.0.0",
@@ -42,12 +42,12 @@
     "@atlaskit/media-card": "^77.10.0",
     "@atlaskit/media-client": "^26.2.0",
     "@atlaskit/media-client-react": "^2.0.0",
-    "@atlaskit/media-common": "^11.0.0",
+    "@atlaskit/media-common": "^11.1.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
     "@atlaskit/media-ui": "^25.4.0",
     "@atlaskit/media-viewer": "^48.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/smart-card": "^26.49.0",
+    "@atlaskit/smart-card": "^26.50.0",
     "@atlaskit/status": "^1.4.0",
     "@atlaskit/task-decision": "^17.9.0",
     "@atlaskit/theme": "^12.6.0",
@@ -132,6 +132,9 @@
     },
     "platform.editor.inline_extension.extended_lcqdn": {
       "type": "boolean"
+    },
+    "platform.editor.allow-inline-comments-for-inline-nodes": {
+      "type": "boolean"
     }
   },
   "af:exports": {