@atlaskit/renderer 109.19.3 → 109.19.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/renderer
 
+## 109.19.5
+
+### Patch Changes
+
+- [#92426](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92426) [`32c76c7c225c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/32c76c7c225c) - Bump adf-schema to 35.9.2 to support table alignment options
+- Updated dependencies
+
+## 109.19.4
+
+### Patch Changes
+
+- [#91941](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91941) [`fded4cd65773`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fded4cd65773) - [ED-22917] fixes position calculation logic for comments on commented inline cards
+- [#92745](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92745) [`0058e08c0a70`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0058e08c0a70) - Revert fix for "Allow realtime comments to correctly infer position of comment on media" (HOT-108750)
+
 ## 109.19.3
 
 ### Patch Changes

package/dist/cjs/actions/index.js

@@ -230,7 +230,7 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
 
       // If from points to a node position,
       // we need to 1 position before it for nodeAt to return the node itself
-      var beforeNodePos = Math.max(from, 0);
+      var beforeNodePos = Math.max(from - 1, 0);
       var possibleNode = this.doc.nodeAt(beforeNodePos);
       if ((possibleNode === null || possibleNode === void 0 ? void 0 : possibleNode.type.name) === 'media') {
         step = new _transform.AddNodeMarkStep(beforeNodePos, this.schema.marks.annotation.create({

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

@@ -13,10 +13,14 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _templateObject;
 /** @jsx jsx */
 var MarkWrapper = function MarkWrapper(props) {
-  var styles = props['data-align'] ? (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        text-align: ", ";\n      "])), _adfSchema.alignmentPositionMap[props['data-align']]) : '';
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
-    css: styles
-  }, props), props.children);
+  var styles = props['data-align'] ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        text-align: ", ";\n      "])), _adfSchema.alignmentPositionMap[props['data-align']]) : '';
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react2.jsx)("div", (0, _extends2.default)({
+      css: styles
+    }, props), props.children)
+  );
 };
 function Alignment(props) {
   return (0, _react2.jsx)(MarkWrapper, {

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

@@ -1,19 +1,22 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Breakout;
 exports.wrapperStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _templateObject;
 /** @jsx jsx */
-var wrapperStyles = exports.wrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", " 0;\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])), _editorSharedStyles.blockNodesVerticalMargin);
+
+var wrapperStyles = exports.wrapperStyles = (0, _react.css)({
+  margin: "".concat(_editorSharedStyles.blockNodesVerticalMargin, " 0"),
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
+});
 function Breakout(props) {
   return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref) {
     var width = _ref.width;

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Link;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
@@ -16,11 +15,20 @@ var _events = require("../../analytics/events");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
 var _analyticsNext = require("@atlaskit/analytics-next");
-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; }
-var anchorStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), "var(--ds-link, ".concat(_colors.B400, ")"), "var(--ds-link, ".concat(_colors.B300, ")"), "var(--ds-link-pressed, ".concat(_colors.B500, ")"));
+/** @jsx jsx */
+
+var anchorStyles = (0, _react2.css)({
+  color: "var(--ds-link, ".concat(_colors.B400, ")"),
+  '&:hover': {
+    color: "var(--ds-link, ".concat(_colors.B300, ")"),
+    textDecoration: 'underline'
+  },
+  '&:active': {
+    color: "var(--ds-link-pressed, ".concat(_colors.B500, ")")
+  }
+});
 function Link(props) {
   var href = props.href,
     target = props.target,

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

@@ -14,6 +14,7 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _codeBlockButtonContainer = _interopRequireDefault(require("./codeBlockButtonContainer"));
 var _templateObject;
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
 var codeBlockStyleOverrides = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  tab-size: 4;\n  background-color: ", ";\n\n  &:hover {\n    button {\n      opacity: 1;\n    }\n  }\n\n  button {\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n  }\n\n  ", " {\n    font-size: ", ";\n    line-height: 1.5rem;\n    background-image: ", ";\n    background-attachment: local, local, local, local, scroll, scroll, scroll,\n      scroll;\n    background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n  }\n"])), "var(--ds-surface-raised, ".concat(_colors.N20, ")"), _styles.CodeBlockSharedCssClassName.DS_CODEBLOCK, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
   leftCoverWidth: "var(--ds-space-300, 24px)"
 }));

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

@@ -17,6 +17,7 @@ var _templateObject, _templateObject2;
 /** @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; }
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var lightWeightCodeBlockStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    cursor: text;\n  }\n"])), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER);
 var LightWeightCodeBlockCssClassName = exports.LightWeightCodeBlockCssClassName = {
   CONTAINER: 'light-weight-code-block'
@@ -28,6 +29,7 @@ var getLightWeightCodeBlockStylesForRootRendererStyleSheet = exports.getLightWei
   // lightweight codeblock containers will not be targeted.
   // NOTE: This must be added after other .code-block styles in the root
   // Renderer stylesheet.
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    .", "\n      > .", "\n      .", " {\n      margin-top: ", ";\n    }\n  "])), _consts.RendererCssClassName.DOCUMENT, LightWeightCodeBlockCssClassName.CONTAINER, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _editorSharedStyles.blockNodesVerticalMargin);
 };
 var LightWeightCodeBlock = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {

package/dist/cjs/react/nodes/heading-anchor.js

@@ -14,7 +14,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
@@ -24,7 +23,6 @@ var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../messages");
-var _templateObject;
 var _excluded = ["children"];
 /** @jsx jsx */
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -38,7 +36,15 @@ var CopyAnchorWrapperWithRef = /*#__PURE__*/_react.default.forwardRef(function (
     ref: ref
   }), children);
 });
-var copyAnchorButtonStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), "var(--ds-icon, ".concat(_colors.N500, ")"));
+var copyAnchorButtonStyles = (0, _react2.css)({
+  display: 'inline',
+  outline: 'none',
+  backgroundColor: 'transparent',
+  border: 'none',
+  color: "var(--ds-icon, ".concat(_colors.N500, ")"),
+  cursor: 'pointer',
+  right: 0
+});
 var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(HeadingAnchor, _React$PureComponent);
   var _super = _createSuper(HeadingAnchor);

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

@@ -5,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = LayoutSection;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
-var _templateObject;
 /** @jsx jsx */
-var layoutColumnClearMarginTopStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), _ui.clearNextSiblingMarginTopStyle, _ui.clearNextSiblingBlockMarkMarginTopStyle);
+
+var layoutColumnClearMarginTopStyles = (0, _react2.css)(_ui.clearNextSiblingMarginTopStyle, _ui.clearNextSiblingBlockMarkMarginTopStyle);
 function LayoutSection(props) {
   return (0, _react2.jsx)("div", {
     "data-layout-column": true,

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

@@ -307,9 +307,9 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
     if (pos === undefined) {
       return;
     }
-    if (draftPosition !== null && draftPosition.from + 1 === pos) {
+    if (draftPosition !== null && draftPosition.from === pos) {
       setShouldApplyDraftAnnotation(true);
-      setPosition((draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from) + 1);
+      setPosition(draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from);
     } else if (draftPosition === null && shouldApplyDraftAnnotation) {
       setShouldApplyDraftAnnotation(false);
       setPosition(undefined);

package/dist/cjs/react/nodes/mediaSingle/styles.js

@@ -1,13 +1,17 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.uiMediaSingleLayoutStyles = exports.uiMediaSingleBaseStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject, _templateObject2;
 /** @jsx jsx */
-var uiMediaSingleBaseStyles = exports.uiMediaSingleBaseStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  transition: all 0.1s linear;\n"])));
-var uiMediaSingleLayoutStyles = exports.uiMediaSingleLayoutStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])));
+
+var uiMediaSingleBaseStyles = exports.uiMediaSingleBaseStyles = (0, _react.css)({
+  transition: 'all 0.1s linear'
+});
+var uiMediaSingleLayoutStyles = exports.uiMediaSingleLayoutStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
+});

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

@@ -50,6 +50,8 @@ var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_re
   }, [updateActiveChild, children]);
   return actions;
 };
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var navigationCssExtended = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  .mbe-add-tab-button,\n  .mbe-remove-tab {\n    display: none;\n  }\n"])), _ui.sharedMultiBodiedExtensionStyles.mbeNavigation);
 var MultiBodiedExtension = function MultiBodiedExtension(props) {
   var children = props.children,
@@ -78,6 +80,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     updateActiveChild: updateActiveChild,
     children: children
   });
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   var containerCssExtended = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    .ak-renderer-extension {\n      margin-top: 0 !important;\n    }\n\n    [data-layout='full-width'],\n    [data-layout='wide'] {\n      .multiBodiedExtension-navigation {\n        border-right: 3px solid ", " !important;\n      }\n    }\n\n    .multiBodiedExtension--frames\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      ", "\n      margin-left: 0;\n      margin-right: 0;\n    }\n  "])), _ui.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(_colors.N40, ")"), activeChildIndex + 1, _ui.sharedMultiBodiedExtensionStyles.extensionFrameContent);
   var isTopLevel = path.length < 1;
   var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
@@ -119,7 +122,9 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     }, children));
   }
   return (0, _react.jsx)("section", {
-    className: "multiBodiedExtension--container",
+    className: "multiBodiedExtension--container"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
     css: containerCssExtended,
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex,

package/dist/cjs/steps/index.js

@@ -6,10 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.createAnnotationStep = createAnnotationStep;
 exports.getPosFromRange = getPosFromRange;
 exports.resolvePos = resolvePos;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 function getStartPos(element) {
   return parseInt(element.dataset.rendererStartPos || '-1', 10);
 }
+var getNodeType = function getNodeType(element) {
+  return element.dataset.nodeType;
+};
 function isPositionPointer(element) {
   return getStartPos(element) > -1;
 }
@@ -23,16 +27,6 @@ function findParent(element) {
   }
   return findParent(parentElement);
 }
-function findMediaParent(element) {
-  var parentElement = element.parentElement;
-  if (!parentElement || isRoot(parentElement)) {
-    return null;
-  }
-  if (parentElement.dataset.nodeType === 'mediaSingle') {
-    return parentElement;
-  }
-  return findParent(parentElement);
-}
 function findParentBeforePointer(element) {
   var parentElement = element.parentElement;
   if (isRoot(parentElement) || !parentElement) {
@@ -59,22 +53,39 @@ function isNodeInlineMark(node) {
 function isElementInlineMark(element) {
   return !!element && Boolean(element.dataset.rendererMark);
 }
+function isNodeInlineTextMark(node) {
+  if (node === null) {
+    return false;
+  }
+  var isInlineMark = isElementNode(node) && Boolean(node.dataset.rendererMark);
+  if (!isInlineMark) {
+    return false;
+  }
+
+  /**
+   * This checks if the element has any descendents with the data-inline-card
+   * attribute set to 'true'. If it does, we should not consider it as an
+   * inline text mark.
+   **/
+
+  if (hasInlineCardDescendant(node)) {
+    return false;
+  }
+  return true;
+}
 
 /**
- * This returns the text content of a node excluding content
- * inside inline cards (spans with data-inline-card="true").
+ * 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 getPMTextContent(node) {
-  if (isTextNode(node)) {
-    return node.textContent;
-  }
+function hasInlineCardDescendant(node) {
   if (isElementNode(node)) {
     if (node.dataset.inlineCard === 'true') {
-      return '';
+      return true;
     }
-    return Array.from(node.childNodes).map(getPMTextContent).join('');
+    return Array.from(node.childNodes).some(hasInlineCardDescendant);
   }
-  return '';
+  return false;
 }
 function resolveNodePos(node) {
   var resolvedPos = 0;
@@ -83,10 +94,18 @@ function resolveNodePos(node) {
     if (prev && (isTextNode(prev) || isHighlightTextNode(prev))) {
       resolvedPos += (prev.textContent || '').length;
     } else if (prev) {
-      if (isNodeInlineMark(prev) && prev.textContent) {
-        resolvedPos += getPMTextContent(prev).length;
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes')) {
+        if (isNodeInlineTextMark(prev) && prev.textContent) {
+          resolvedPos += prev.textContent.length;
+        } else {
+          resolvedPos += 1;
+        }
       } else {
-        resolvedPos += 1;
+        if (isNodeInlineMark(prev) && prev.textContent) {
+          resolvedPos += prev.textContent.length;
+        } else {
+          resolvedPos += 1;
+        }
       }
     }
     prev = prev.previousSibling;
@@ -120,9 +139,16 @@ function resolvePos(node, offset) {
     // If our range is inside an inline node
     // We need to move our pointers to parent element
     // since we don't want to count text inside inline nodes at all
-    if (!(isElementInlineMark(preParentPointer) || isHighlightTextNode(preParentPointer))) {
-      current = current.parentElement;
-      offset = 0;
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes')) {
+      if (!(isNodeInlineTextMark(preParentPointer) || isHighlightTextNode(preParentPointer))) {
+        current = current.parentElement;
+        offset = 0;
+      }
+    } else {
+      if (!(isElementInlineMark(preParentPointer) || isHighlightTextNode(preParentPointer))) {
+        current = current.parentElement;
+        offset = 0;
+      }
     }
     resolvedPos += resolveNodePos(current);
     while (current && current.parentElement !== parent) {
@@ -142,8 +168,8 @@ function getPosFromRange(range) {
     startOffset = range.startOffset,
     endContainer = range.endContainer,
     endOffset = range.endOffset;
-  var parent = findMediaParent(startContainer);
-  if (parent) {
+  var parent = findParent(startContainer);
+  if (parent && getNodeType(parent) === 'media') {
     var pos = getStartPos(parent);
     return {
       from: pos,

package/dist/cjs/ui/Expand.js

@@ -24,44 +24,70 @@ var _events = require("../analytics/events");
 var _utils = require("../utils");
 var _activeHeaderIdProvider = require("./active-header-id-provider");
 var _excluded = ["expanded"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 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; }
-var titleStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  display: flex;\n  flex: 1;\n  margin: 0;\n  padding: 0 0 0 ", ";\n  text-align: left;\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, "var(--ds-space-050, 4px)");
+var titleStyles = (0, _react.css)({
+  outline: 'none',
+  border: 'none',
+  fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()),
+  lineHeight: _editorSharedStyles.akEditorLineHeight,
+  fontWeight: 'normal',
+  display: 'flex',
+  flex: 1,
+  margin: 0,
+  padding: "0 0 0 ".concat("var(--ds-space-050, 4px)"),
+  textAlign: 'left'
+});
 var Container = function Container(props) {
   var paddingBottom = props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
   var sharedContainerStyles = _ui.sharedExpandStyles.containerStyles(props);
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   var styles = function styles() {
-    return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles(), paddingBottom);
+    return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles(), paddingBottom);
   };
-  return (0, _react.jsx)("div", (0, _extends2.default)({
-    css: styles
-  }, props), props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react.jsx)("div", (0, _extends2.default)({
+      css: styles
+    }, props), props.children)
+  );
 };
 var TitleContainer = function TitleContainer(props) {
   var paddingBottom = !props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   var styles = function styles() {
-    return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: ", ";\n    padding-bottom: ", ";\n  "])), _ui.sharedExpandStyles.titleContainerStyles(), "var(--ds-space-100, 8px)", paddingBottom);
+    return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: ", ";\n    padding-bottom: ", ";\n  "])), _ui.sharedExpandStyles.titleContainerStyles(), "var(--ds-space-100, 8px)", paddingBottom);
   };
   var expanded = props.expanded,
     buttonProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return (0, _react.jsx)("button", (0, _extends2.default)({
-    type: "button",
-    css: styles
-  }, buttonProps), props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react.jsx)("button", (0, _extends2.default)({
+      type: "button",
+      css: styles
+    }, buttonProps), props.children)
+  );
 };
 TitleContainer.displayName = 'TitleContainerButton';
 var ContentContainer = function ContentContainer(props) {
   var sharedContentStyles = _ui.sharedExpandStyles.contentStyles(props);
   var visibility = props.expanded ? 'visible' : 'hidden';
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression  -- needs manual remediation
   var styles = function styles() {
-    return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    visibility: ", ";\n  "])), sharedContentStyles(), "var(--ds-space-200, 16px)", "var(--ds-space-400, 32px)", visibility);
+    return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    visibility: ", ";\n  "])), sharedContentStyles(), "var(--ds-space-200, 16px)", "var(--ds-space-400, 32px)", visibility);
   };
-  return (0, _react.jsx)("div", (0, _extends2.default)({
-    css: styles
-  }, props), props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react.jsx)("div", (0, _extends2.default)({
+      css: styles
+    }, props), props.children)
+  );
 };
 function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
   if (!fireAnalyticsEvent) {

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.19.3";
+var packageVersion = "109.19.5";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -23,6 +23,7 @@ var _headingAnchor = require("../../react/nodes/heading-anchor");
 var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
 var _table = require("../../react/nodes/table");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 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; }
@@ -33,7 +34,7 @@ var telepointerStyles = function telepointerStyles() {
   var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
     colorMode = _getGlobalTheme.colorMode;
 
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    #", " {\n      display: inline-block;\n      position: relative;\n      width: 1.5px;\n      height: 25px;\n      background: linear-gradient(\n        45deg,\n        ", " -12.02%,\n        ", " 19.18%,\n        ", " 71.87%\n      );\n      margin-left: ", ";\n\n      &::after {\n        content: 'AI';\n        position: absolute;\n        display: block;\n        top: 0;\n        left: 0;\n        font-size: 10px;\n        font-weight: 700;\n        width: 12.5px;\n        height: 13px;\n        padding-top: 1px;\n        padding-left: 1.5px;\n        line-height: initial;\n        border-radius: 0px 2px 2px 0px;\n        color: ", ";\n        background: linear-gradient(\n          45deg,\n          ", " -57%,\n          ", " 71.87%\n        );\n      }\n    }\n  "])), TELEPOINTER_ID, colorMode === 'dark' ? '#f5cd47' : '#f8e6a0', colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4', "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4');
 };
 var getLineHeight = function getLineHeight(fontCode) {

package/dist/cjs/ui/Renderer/truncated-wrapper.js

@@ -10,15 +10,25 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _react2 = require("react");
-var _templateObject;
-/** @jsx jsx */
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
 var fadeOutStyles = function fadeOutStyles(maxHeight, top, backgroundColor) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: linear-gradient(\n      ", ",\n      ", "\n    );\n  }\n"])), maxHeight, top, "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0))", backgroundColor);
+  return (0, _react.css)({
+    position: 'relative',
+    overflowY: 'hidden',
+    maxHeight: "".concat(maxHeight, "px"),
+    '&::after': {
+      content: "''",
+      position: 'absolute',
+      top: "".concat(top, "px"),
+      bottom: 0,
+      left: 0,
+      right: 0,
+      backgroundImage: "linear-gradient( ".concat("var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0))", ", ", backgroundColor, " )")
+    }
+  });
 };
 var FadeOut = function FadeOut(props) {
   var children = props.children,
@@ -27,6 +37,7 @@ var FadeOut = function FadeOut(props) {
     height = props.height;
   var top = height - fadeHeight;
   var styles = fadeOutStyles(height, top, backgroundColor);
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
   return (0, _react.jsx)("div", {
     css: styles
   }, children);

package/dist/cjs/ui/SortingIcon.js

@@ -13,7 +13,7 @@ var _types = require("@atlaskit/editor-common/types");
 var _messages = require("../messages");
 var _reactIntlNext = require("react-intl-next");
 var _consts = require("../consts");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 /** @jsx jsx */
 var StatusClassNames = exports.StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
   StatusClassNames["ASC"] = "sorting-icon-svg__asc";
@@ -21,14 +21,35 @@ var StatusClassNames = exports.StatusClassNames = /*#__PURE__*/function (StatusC
   StatusClassNames["NO_ORDER"] = "sorting-icon-svg__no_order";
   StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
   return StatusClassNames;
-}({});
+}({}); // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var buttonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: ", ";\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), "var(--ds-space-075, 6px)", "var(--ds-border, #fff)", "var(--ds-border-radius-100, 4px)", "var(--ds-surface-overlay, ".concat(_colors.N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(_colors.N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var iconWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  display: flex;\n  justify-content: center;\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), StatusClassNames.DESC, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
 
 // The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
 // The TL;DR is that svg's in tables mess up how HTML is copied in Firefox. Using a styled div instead solves the problem.
 // For this reason, svg's should be avoided in tables until this issue is fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
-var iconStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 2px;\n  border-radius: 50px;\n  background: ", ";\n\n  &::before,\n  &::after {\n    background: ", ";\n    content: '';\n    height: 2px;\n    width: 6px;\n    position: absolute;\n    border-radius: 50px;\n  }\n\n  &::before {\n    transform: rotate(45deg) translate(3.4px, 8.5px);\n  }\n\n  &::after {\n    transform: rotate(-45deg) translate(-6.3px, 5.7px);\n  }\n"])), "var(--ds-icon, #42526E)", "var(--ds-icon, #42526E)");
+var iconStyles = (0, _react.css)({
+  height: '100%',
+  width: '2px',
+  borderRadius: '50px',
+  background: "var(--ds-icon, #42526E)",
+  '&::before, &::after': {
+    background: "var(--ds-icon, #42526E)",
+    content: "''",
+    height: '2px',
+    width: '6px',
+    position: 'absolute',
+    borderRadius: '50px'
+  },
+  '&::before': {
+    transform: 'rotate(45deg) translate(3.4px, 8.5px)'
+  },
+  '&::after': {
+    transform: 'rotate(-45deg) translate(-6.3px, 5.7px)'
+  }
+});
 var getIconClassName = function getIconClassName(isSortingAllowed, sortOrdered) {
   var activated = sortOrdered !== _types.SortOrder.NO_ORDER;
   var activeStatusClass = "".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, "-").concat(activated ? 'active' : 'inactive');

package/dist/es2019/actions/index.js

@@ -208,7 +208,7 @@ export default class RendererActions {
 
     // If from points to a node position,
     // we need to 1 position before it for nodeAt to return the node itself
-    const beforeNodePos = Math.max(from, 0);
+    const beforeNodePos = Math.max(from - 1, 0);
     const possibleNode = this.doc.nodeAt(beforeNodePos);
     if ((possibleNode === null || possibleNode === void 0 ? void 0 : possibleNode.type.name) === 'media') {
       step = new AddNodeMarkStep(beforeNodePos, this.schema.marks.annotation.create({