@atlaskit/renderer 109.31.3 → 109.32.0

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.rendererStyles = exports.headingSizes = exports.TELEPOINTER_ID = exports.FullPagePadding = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("@atlaskit/theme/constants");
 var _colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var colors = _colors;
@@ -104,6 +105,22 @@ var breakoutWidthStyle = function breakoutWidthStyle() {
 var getShadowOverrides = function getShadowOverrides() {
   return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t\t/** Shadow overrides */\n\t\t&.", "::after, &.", "::before {\n\t\t\twidth: ", "px;\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t}\n\n\t\t&.", "::after {\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t\tright: 0px;\n\t\t}\n\t"])), _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, tableShadowWidth, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _ui.shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)");
 };
+function getAnnotationStyles(_ref6) {
+  var allowAnnotations = _ref6.allowAnnotations;
+  if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes')) {
+    return '';
+  }
+  return (0, _react.css)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark], & [data-annotation-draft-mark][data-annotation-inline-node]": {
+      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 rendererStyles = exports.rendererStyles = function rendererStyles(wrapperProps) {
   return function (theme) {
     var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
@@ -115,7 +132,7 @@ var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperPro
     var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
 
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression
-    return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n      .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: 400;\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t&\n          .", ",\n          &\n          .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n\t\t\ttable {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\ttable tr:first-of-type {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n      ", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), (0, _editorSharedStyles.editorFontSize)(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), _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, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(colorMode), _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, (0, _styles.backgroundColorStyles)(colorMode), _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, getShadowOverrides(), _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
+    return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n      .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: 400;\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t&\n          .", ",\n          &\n          .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n\t\t\ttable {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\ttable tr:first-of-type {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n      ", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), (0, _editorSharedStyles.editorFontSize)(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), _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, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(colorMode), _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.backgroundColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, getAnnotationStyles(wrapperProps), (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, getShadowOverrides(), _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
   };
 };
 var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {

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

@@ -47,7 +47,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();
+      if (event.target instanceof HTMLElement && event.target.closest('[data-inline-card]')) {
+        event.stopPropagation();
+      }
     }
     onClick({
       eventTarget: event.target,
@@ -66,6 +68,6 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
   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), !useBlockLevel && {
-    css: markStyles
+    css: [markStyles]
   }), children);
 };

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInlineAnnotationProps = useInlineAnnotationProps;
+var _react = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _context = require("../context");
+function useInlineAnnotationProps(props, _ref) {
+  var isInlineCard = _ref.isInlineCard;
+  var draftPosition = (0, _react.useContext)(_context.AnnotationsDraftContext);
+  if (!isInlineCard && !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return {};
+  }
+  if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes')) {
+    return {};
+  }
+  if (!props.dataAttributes) {
+    // the inlineCard component is currently used by the block card, embed card and card error boundary components
+    // when used via these components, no dataAttributes are passed (and we don't want it setup for inline comments)
+    return {};
+  }
+  var inlineCardPosition = props.dataAttributes['data-renderer-start-pos'] - 1;
+  var hasDraft = draftPosition && (draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from) <= inlineCardPosition && (draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.to) >= inlineCardPosition + 1;
+  if (hasDraft) {
+    return {
+      'data-renderer-mark': true,
+      'data-annotation-draft-mark': true,
+      'data-annotation-inline-node': true,
+      'data-renderer-start-pos': inlineCardPosition
+    };
+  }
+  return {
+    'data-annotation-inline-node': true,
+    'data-annotation-mark': true,
+    'data-renderer-start-pos': inlineCardPosition
+  };
+}

package/dist/es2019/react/index.js

@@ -187,7 +187,7 @@ export default class ReactSerializer {
     const path = parentInfo ? parentInfo.path : undefined;
     switch (node.type.name) {
       case 'date':
-        return this.getDateProps(node, parentInfo);
+        return this.getDateProps(node, parentInfo, path);
       case 'hardBreak':
         return this.getHardBreakProps(node, path);
       case 'heading':
@@ -328,10 +328,15 @@ export default class ReactSerializer {
       isInsideMultiBodiedExtension
     };
   }
-  getDateProps(node, parentInfo) {
+  getDateProps(node, parentInfo, path = []) {
     return {
       timestamp: node.attrs && node.attrs.timestamp,
-      parentIsIncompleteTask: parentInfo && parentInfo.parentIsIncompleteTask
+      parentIsIncompleteTask: parentInfo && parentInfo.parentIsIncompleteTask,
+      dataAttributes: {
+        // We need to account for depth (path.length gives up depth) here
+        // but depth doesnt increment the pos, only accounted for.
+        'data-renderer-start-pos': this.startPos + path.length
+      }
     };
   }
   getMediaSingleProps(node, path = []) {

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

@@ -1,32 +1,33 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { PureComponent } from 'react';
+import React, { memo } from 'react';
 import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { isPastDate, timestampToString, timestampToTaskContext } from '@atlaskit/editor-common/utils';
 import { injectIntl } from 'react-intl-next';
 import { useTaskItemsFormatContext } from '../../ui/TaskItemsFormatContext';
-class Date extends PureComponent {
-  render() {
-    const {
-      timestamp,
-      parentIsIncompleteTask,
-      intl
-    } = this.props;
-    const className = !!parentIsIncompleteTask && isPastDate(timestamp) ? 'date-node date-node-highlighted' : 'date-node';
-    return (
-      /*#__PURE__*/
+import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
+const Date = /*#__PURE__*/memo(function Date(props) {
+  const inlineAnnotationProps = useInlineAnnotationProps(props, {
+    isInlineCard: false
+  });
+  const {
+    timestamp,
+    parentIsIncompleteTask,
+    intl
+  } = props;
+  const className = !!parentIsIncompleteTask && isPastDate(timestamp) ? 'date-node date-node-highlighted' : 'date-node';
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    React.createElement("span", _extends({
+      className: DateSharedCssClassName.DATE_WRAPPER
+    }, inlineAnnotationProps), /*#__PURE__*/React.createElement("span", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      React.createElement("span", {
-        className: DateSharedCssClassName.DATE_WRAPPER
-      }, /*#__PURE__*/React.createElement("span", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: className,
-        "data-node-type": "date",
-        "data-timestamp": timestamp
-      }, parentIsIncompleteTask ? timestampToTaskContext(timestamp, intl) : timestampToString(timestamp, intl)))
-    );
-  }
-}
+      className: className,
+      "data-node-type": "date",
+      "data-timestamp": timestamp
+    }, parentIsIncompleteTask ? timestampToTaskContext(timestamp, intl) : timestampToString(timestamp, intl)))
+  );
+});
 export const DateComponent = injectIntl(Date);
 function DateWithFormatContext(props) {
   const [isChecked] = useTaskItemsFormatContext();

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

@@ -1,17 +1,23 @@
-import React from 'react';
-import { PureComponent } from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { memo } from 'react';
 import { Emoji } from '@atlaskit/editor-common/emoji';
-export default class EmojiItem extends PureComponent {
-  render() {
-    const {
-      id,
-      providers,
-      shortName,
-      text,
-      fitToHeight,
-      resourceConfig
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Emoji, {
+import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
+function EmojiItem(props) {
+  const {
+    id,
+    providers,
+    shortName,
+    text,
+    fitToHeight,
+    resourceConfig
+  } = props;
+  const inlineAnnotationProps = useInlineAnnotationProps(props, {
+    isInlineCard: false
+  });
+  if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return jsx("span", inlineAnnotationProps, jsx(Emoji, {
       allowTextFallback: true,
       id: id,
       shortName: shortName,
@@ -19,6 +25,20 @@ export default class EmojiItem extends PureComponent {
       providers: providers,
       fitToHeight: fitToHeight,
       resourceConfig: resourceConfig
-    });
+    }));
   }
-}
+  return jsx(Emoji, {
+    allowTextFallback: true,
+    id: id,
+    shortName: shortName,
+    fallback: text,
+    providers: providers,
+    fitToHeight: fitToHeight,
+    resourceConfig: resourceConfig
+  });
+}
+
+// Working around an issue with pre existing tests using react-test-renderer
+// https://github.com/facebook/react/issues/17301#issuecomment-557765213
+EmojiItem.defaultProps = {};
+export default /*#__PURE__*/memo(EmojiItem);

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

@@ -1,26 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { css, jsx } from '@emotion/react';
+import { 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 = css({
-  // This is expected to be reworked as part of https://team.atlassian.com/project/ATLAS-61846/updates
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  "[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)"}`
-  }
-});
+import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
 const InlineCard = props => {
   const {
     url,
@@ -50,21 +39,18 @@ const InlineCard = props => {
     // Below is added for the future implementation of Linking Platform namespaced analytic context
     location: 'renderer'
   };
+  const inlineAnnotationProps = useInlineAnnotationProps(props, {
+    isInlineCard: true
+  });
   if (ssr && url) {
-    // platform.editor.allow-inline-comments-for-inline-nodes requires this change to work -- however this feature flag is only intended to go to HELLO (and is expected to last for Q4).
-    // platform.editor.renderer-inline-card-ssr-fix_kqcwl is the feature flag that allows this change to be safely released more widely.
-    // Once platform.editor.renderer-inline-card-ssr-fix_kqcwl reaches 100% we can remove both checks
     if (
     // eslint-disable-next-line @atlaskit/platform/no-invalid-feature-flag-usage
-    getBooleanFF('platform.editor.renderer-inline-card-ssr-fix_kqcwl') ||
-    // eslint-disable-next-line @atlaskit/platform/no-invalid-feature-flag-usage
     getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
-      return jsx("span", {
+      return jsx("span", _extends({
         "data-inline-card": true,
         "data-card-data": data ? JSON.stringify(data) : undefined,
-        "data-card-url": url,
-        css: annotatedCard
-      }, jsx(AnalyticsContext, {
+        "data-card-url": url
+      }, inlineAnnotationProps), jsx(AnalyticsContext, {
         data: analyticsData
       }, jsx(CardSSR, {
         appearance: "inline",
@@ -97,12 +83,11 @@ const InlineCard = props => {
   };
   return jsx(AnalyticsContext, {
     data: analyticsData
-  }, jsx("span", {
+  }, jsx("span", _extends({
     "data-inline-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
-    "data-card-url": url,
-    css: getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? annotatedCard : undefined
-  }, jsx(CardErrorBoundary, _extends({
+    "data-card-url": url
+  }, inlineAnnotationProps), jsx(CardErrorBoundary, _extends({
     unsupportedComponent: UnsupportedInline
   }, cardProps), jsx(Card, _extends({
     appearance: "inline",

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

@@ -1,23 +1,35 @@
-import React from 'react';
-import { PureComponent } from 'react';
+import React, { memo } from 'react';
 import { Mention } from '@atlaskit/editor-common/mention';
-export default class MentionItem extends PureComponent {
-  render() {
-    const {
-      eventHandlers,
-      id,
-      providers,
-      text,
-      accessLevel,
-      localId
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Mention, {
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
+export default /*#__PURE__*/memo(function MentionItem(props) {
+  const {
+    eventHandlers,
+    id,
+    providers,
+    text,
+    accessLevel,
+    localId
+  } = props;
+  const inlineAnnotationProps = useInlineAnnotationProps(props, {
+    isInlineCard: false
+  });
+  if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return /*#__PURE__*/React.createElement("span", inlineAnnotationProps, /*#__PURE__*/React.createElement(Mention, {
       id: id,
       text: text,
       accessLevel: accessLevel,
       providers: providers,
       localId: localId,
       eventHandlers: eventHandlers && eventHandlers.mention
-    });
+    }));
   }
-}
+  return /*#__PURE__*/React.createElement(Mention, {
+    id: id,
+    text: text,
+    accessLevel: accessLevel,
+    providers: providers,
+    localId: localId,
+    eventHandlers: eventHandlers && eventHandlers.mention
+  });
+});

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

@@ -1,15 +1,19 @@
-import React from 'react';
-import { PureComponent } from 'react';
+import React, { memo } from 'react';
 import { Status as AkStatus } from '@atlaskit/status/element';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
-export default class Status extends PureComponent {
-  render() {
-    const {
-      text,
-      color,
-      localId
-    } = this.props;
-    return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
+export default /*#__PURE__*/memo(function Status(props) {
+  const {
+    text,
+    color,
+    localId
+  } = props;
+  const inlineAnnotationProps = useInlineAnnotationProps(props, {
+    isInlineCard: false
+  });
+  if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return /*#__PURE__*/React.createElement("span", inlineAnnotationProps, /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
       data: {
         userContext: 'document'
       }
@@ -18,6 +22,16 @@ export default class Status extends PureComponent {
       color: color,
       localId: localId,
       role: "presentation"
-    }));
+    })));
   }
-}
+  return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
+    data: {
+      userContext: 'document'
+    }
+  }, /*#__PURE__*/React.createElement(AkStatus, {
+    text: text,
+    color: color,
+    localId: localId,
+    role: "presentation"
+  }));
+});

package/dist/es2019/steps/index.js

@@ -74,7 +74,7 @@ function isNodeInlineTextMark(node) {
    * inline text mark.
    **/
 
-  if (hasInlineCardDescendant(node)) {
+  if (hasInlineNodeDescendant(node)) {
     return false;
   }
   return true;
@@ -84,12 +84,18 @@ function isNodeInlineTextMark(node) {
  * This checks all the descendents of a node and returns true if it reaches
  * a descendant with the data-inline-card attribute set to 'true'.
  */
-function hasInlineCardDescendant(node) {
+function hasInlineNodeDescendant(node) {
   if (isElementNode(node)) {
-    if (node.dataset.inlineCard === 'true') {
-      return true;
+    if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+      if (node.dataset.annotationInlineNode === 'true') {
+        return true;
+      }
+    } else {
+      if (node.dataset.inlineCard === 'true') {
+        return true;
+      }
     }
-    return Array.from(node.childNodes).some(hasInlineCardDescendant);
+    return Array.from(node.childNodes).some(hasInlineNodeDescendant);
   }
   return false;
 }
@@ -121,11 +127,23 @@ function resolveNodePos(node) {
 function isRoot(element) {
   return !!element && element.classList.contains('ak-renderer-document');
 }
-export function resolvePos(node, offset) {
+export function resolvePos(node, offset, findEnd = false) {
   // If the passed node doesn't exist, we should abort
   if (!node) {
     return false;
   }
+  if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
+    var _node$parentElement;
+    const startPosAncestor = (_node$parentElement = node.parentElement) === null || _node$parentElement === void 0 ? void 0 : _node$parentElement.closest('[data-renderer-start-pos');
+    const potentialParent = getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz') ? 'data-annotation-mark' : 'data-inline-card';
+    if (startPosAncestor !== null && startPosAncestor !== void 0 && startPosAncestor.hasAttribute(potentialParent)) {
+      if (findEnd) {
+        return parseInt((startPosAncestor === null || startPosAncestor === void 0 ? void 0 : startPosAncestor.getAttribute('data-renderer-start-pos')) || '-1', 10) + 1;
+      } else {
+        return parseInt((startPosAncestor === null || startPosAncestor === void 0 ? void 0 : startPosAncestor.getAttribute('data-renderer-start-pos')) || '-1', 10);
+      }
+    }
+  }
   if (node instanceof HTMLElement && isPositionPointer(node)) {
     return getStartPos(node) + offset;
   }
@@ -213,7 +231,8 @@ export function getPosFromRange(range, isCommentsOnMediaBugFixEnabled, isComment
     }
   }
   const from = resolvePos(startContainer, startOffset);
-  const to = resolvePos(endContainer, endOffset);
+  const findEnd = true;
+  const to = resolvePos(endContainer, endOffset, findEnd);
   if (from === false || to === false) {
     return false;
   }

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

@@ -37,7 +37,7 @@ import { nodeToReact } from '../../react/nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.31.3";
+const packageVersion = "109.32.0";
 export const defaultNodeComponents = nodeToReact;
 export class Renderer extends PureComponent {
   constructor(props) {
@@ -273,6 +273,7 @@ export class Renderer extends PureComponent {
       onComplete,
       onError,
       appearance,
+      allowAnnotations,
       adfStage,
       truncated,
       maxHeight,
@@ -355,6 +356,7 @@ export class Renderer extends PureComponent {
       }, jsx(SmartCardStorageProvider, null, jsx(ProviderFactoryProvider, {
         value: this.providerFactory
       }, jsx(RendererWrapper, {
+        allowAnnotations: allowAnnotations,
         appearance: appearance,
         allowNestedHeaderLinks: allowNestedHeaderLinks,
         allowColumnSorting: allowColumnSorting,
@@ -393,6 +395,7 @@ export class Renderer extends PureComponent {
         onError(e);
       }
       return jsx(RendererWrapper, {
+        allowAnnotations: allowAnnotations,
         appearance: appearance,
         allowCopyToClipboard: allowCopyToClipboard,
         allowWrapCodeBlock: allowWrapCodeBlock,
@@ -517,12 +520,15 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
   }, jsx("div", {
     ref: innerRef,
     onClick: onClick,
-    onMouseDown: onMouseDown,
+    onMouseDown: onMouseDown
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
     css: rendererStyles({
       appearance,
       allowNestedHeaderLinks,
       allowColumnSorting: !!allowColumnSorting,
-      useBlockRenderForCodeBlock
+      useBlockRenderForCodeBlock,
+      allowAnnotations: props.allowAnnotations
     })
   }, children))));
 });

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

@@ -2,8 +2,10 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 import { css } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { fontFamily, fontSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
 import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
 import { getGlobalTheme } from '@atlaskit/tokens';
 import { mediaInlineImageStyles } from '@atlaskit/editor-common/media-inline';
@@ -388,6 +390,23 @@ const getShadowOverrides = () => {
 		}
 	`;
 };
+function getAnnotationStyles({
+  allowAnnotations
+}) {
+  if (!getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
+    return '';
+  }
+  return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark], & [data-annotation-draft-mark][data-annotation-inline-node]": {
+      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)"}`
+    }
+  });
+}
 export const rendererStyles = wrapperProps => theme => {
   const {
     colorMode
@@ -483,9 +502,10 @@ export const rendererStyles = wrapperProps => theme => {
 		${shadowSharedStyle};
 		${dateSharedStyle};
 		${textColorStyles};
-		${backgroundColorStyles(colorMode)};
+		${backgroundColorStyles};
 		${tasksAndDecisionsStyles};
 		${smartCardSharedStyles}
+		${getAnnotationStyles(wrapperProps)}
 
 		& .UnknownBlock {
 			font-family: ${fontFamily()};