@atlaskit/renderer 115.0.5 → 115.1.0

package/dist/es2019/ui/annotations/wrapper.js

@@ -2,8 +2,9 @@ import React, { useCallback, useContext } from 'react';
 import { AnnotationsDraftContextWrapper, ProvidersContext } from './context';
 import { RangeValidator as HoverRangeValidator } from './hover/range-validator';
 import { SelectionRangeValidator } from './selection/range-validator';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnnotationRangeDispatch, useAnnotationRangeState } from './contexts/AnnotationRangeContext';
-export const AnnotationsContextWrapper = props => {
+export const AnnotationsContextWrapperOld = props => {
   const providers = useContext(ProvidersContext);
   const {
     range,
@@ -62,4 +63,51 @@ export const AnnotationsContextWrapper = props => {
     clearDraftRange: clearRangeForDraft,
     isNestedRender: isNestedRender
   }, render);
+};
+export const AnnotationsContextWrapperNew = props => {
+  const providers = useContext(ProvidersContext);
+  const {
+    rendererRef,
+    createAnalyticsEvent,
+    children
+  } = props;
+  const inlineCommentProvider = providers && providers.inlineComment;
+  const selectionComponent = inlineCommentProvider && inlineCommentProvider.selectionComponent;
+  const hoverComponent = inlineCommentProvider && inlineCommentProvider.hoverComponent;
+  if (!selectionComponent && !hoverComponent) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children, !!hoverComponent && /*#__PURE__*/React.createElement(HoverRangeValidator, {
+    createAnalyticsEvent: createAnalyticsEvent,
+    rendererRef: rendererRef
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    ,
+    component: hoverComponent
+  }), !!selectionComponent && /*#__PURE__*/React.createElement(SelectionRangeValidator, {
+    createAnalyticsEvent: createAnalyticsEvent,
+    rendererRef: rendererRef
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    ,
+    selectionComponent: selectionComponent
+  }));
+};
+export const AnnotationsContextWrapper = props => {
+  if (fg('platform_renderer_annotation_draft_position_fix')) {
+    // IMPORTANT: Please make sure the AnnotationsDraftContextWrapper is not used anc cleaned up correctly.
+    // This code path completely removes all reliance on that wrapper. Also the applyAnnotationDraftAt & clearAnnotationDraft
+    // properties have been made optional and not used. This means when we cleanup we can also remove those properties.
+    return /*#__PURE__*/React.createElement(AnnotationsContextWrapperNew, {
+      rendererRef: props.rendererRef,
+      createAnalyticsEvent: props.createAnalyticsEvent,
+      isNestedRender: props.isNestedRender
+    }, props.children);
+  } else {
+    return /*#__PURE__*/React.createElement(AnnotationsContextWrapperOld, {
+      rendererRef: props.rendererRef,
+      createAnalyticsEvent: props.createAnalyticsEvent,
+      isNestedRender: props.isNestedRender
+    }, props.children);
+  }
 };

package/dist/esm/actions/index.js

@@ -15,10 +15,6 @@ import { createAnnotationStep, getPosFromRange } from '../steps';
 import { getRendererRangeInlineNodeNames } from './get-renderer-range-inline-node-names';
 import { getIndexMatch } from './matches-utils';
 var RendererActions = /*#__PURE__*/function () {
-  // Any kind of refence is allowed
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
   function RendererActions() {
     var initFromContext = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     _classCallCheck(this, RendererActions);
@@ -26,6 +22,7 @@ var RendererActions = /*#__PURE__*/function () {
     // This module can only be used when wrapped with
     // the <RendererContext> component for now.
     _defineProperty(this, "initFromContext", false);
+    _defineProperty(this, "debugAnalyticLoggingEnabled", false);
     // TODO: EDITOR-595 - This method is temporary and should be removed once the following issue
     // has been identified and fixed: https://atlassian.slack.com/archives/C08JK0WSCH5/p1745902609966999
     // This is a copy of the original canApplyAnnotationOnRange. If that returns false this is run to figure out exactly why
@@ -108,7 +105,7 @@ var RendererActions = /*#__PURE__*/function () {
     key: "_privateValidatePositionsForAnnotation",
     value: function _privateValidatePositionsForAnnotation(from, to) {
       if (!this.doc || !this.schema) {
-        if (this.onAnalyticsEvent && fg('platform_renderer_annotations_create_debug_logging')) {
+        if (this.debugAnalyticLoggingEnabled && this.onAnalyticsEvent && fg('platform_renderer_annotations_create_debug_logging')) {
           this.onAnalyticsEvent({
             // @ts-ignore
             action: 'failed',
@@ -130,7 +127,7 @@ var RendererActions = /*#__PURE__*/function () {
       }
       var currentSelection = TextSelection.create(this.doc, from, to);
       if (isEmptyTextSelection(currentSelection, this.schema)) {
-        if (this.onAnalyticsEvent && fg('platform_renderer_annotations_create_debug_logging')) {
+        if (this.debugAnalyticLoggingEnabled && this.onAnalyticsEvent && fg('platform_renderer_annotations_create_debug_logging')) {
           this.onAnalyticsEvent({
             // @ts-ignore
             action: 'failed',
@@ -154,7 +151,7 @@ var RendererActions = /*#__PURE__*/function () {
         from: from,
         to: to
       }, this.doc, this.schema);
-      if (!result && this.onAnalyticsEvent && fg('platform_renderer_annotations_create_debug_logging')) {
+      if (this.debugAnalyticLoggingEnabled && !result && this.onAnalyticsEvent && fg('platform_renderer_annotations_create_debug_logging')) {
         this.onAnalyticsEvent({
           // @ts-ignore
           action: 'failed',
@@ -334,7 +331,7 @@ var RendererActions = /*#__PURE__*/function () {
     key: "isValidAnnotationPosition",
     value: function isValidAnnotationPosition(pos) {
       if (!pos || !this.doc) {
-        if (this.onAnalyticsEvent && fg('platform_renderer_annotations_create_debug_logging')) {
+        if (this.debugAnalyticLoggingEnabled && this.onAnalyticsEvent && fg('platform_renderer_annotations_create_debug_logging')) {
           this.onAnalyticsEvent({
             // @ts-ignore
             action: 'failed',
@@ -541,6 +538,15 @@ var RendererActions = /*#__PURE__*/function () {
         schema: this.schema
       }, annotationId);
     }
+
+    /**
+     * This is a temporary method used for controlling when extra analytics shoulw be logged.
+     */
+  }, {
+    key: "_setDebugLogging",
+    value: function _setDebugLogging(enabled) {
+      this.debugAnalyticLoggingEnabled = enabled;
+    }
   }]);
 }();
 export { RendererActions as default };

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

@@ -16,6 +16,7 @@ import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N40 } from '@atlaskit/theme/colors';
 import { calcBreakoutWidth, canRenderDatasource } from '@atlaskit/editor-common/utils';
+import { usePortal } from '../../ui/Renderer/PortalContext';
 var datasourceContainerStyle = css({
   borderRadius: "var(--ds-border-radius-200, 8px)",
   border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")")),
@@ -29,9 +30,9 @@ export default function BlockCard(props) {
   var url = props.url,
     data = props.data,
     eventHandlers = props.eventHandlers,
-    portal = props.portal,
     smartLinks = props.smartLinks,
     isNodeNested = props.isNodeNested;
+  var portal = usePortal(props);
   var _ref = smartLinks || {},
     actionOptions = _ref.actionOptions;
   var onClick = getCardClickHandler(eventHandlers, url);

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

@@ -17,6 +17,7 @@ import { CardErrorBoundary } from './fallback';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { usePortal } from '../../ui/Renderer/PortalContext';
 var embedCardWrapperStyles = css({
   width: '100%',
   height: '100%',
@@ -30,6 +31,8 @@ var embedCardWrapperStyles = css({
   },
   margin: '0 auto'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var uIMediaSingleLayoutStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '50%',
@@ -40,13 +43,13 @@ export default function EmbedCard(props) {
   var url = props.url,
     data = props.data,
     eventHandlers = props.eventHandlers,
-    portal = props.portal,
     layout = props.layout,
     width = props.width,
     isInsideOfBlockNode = props.isInsideOfBlockNode,
     rendererAppearance = props.rendererAppearance,
     smartLinks = props.smartLinks,
     isInsideOfInlineExtension = props.isInsideOfInlineExtension;
+  var portal = usePortal(props);
   var embedIframeRef = useRef(null);
   var onClick = getCardClickHandler(eventHandlers, url);
   var _ref = smartLinks || {},

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

@@ -14,12 +14,13 @@ import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
+import { usePortal } from '../../ui/Renderer/PortalContext';
 var InlineCard = function InlineCard(props) {
   var url = props.url,
     data = props.data,
     eventHandlers = props.eventHandlers,
-    portal = props.portal,
     smartLinks = props.smartLinks;
+  var portal = usePortal(props);
   var onClick = getCardClickHandler(eventHandlers, url);
   var cardProps = {
     url: url,

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

@@ -40,6 +40,7 @@ import { injectIntl } from 'react-intl-next';
 import { useInlineCommentsFilter } from '../../../ui/annotations/hooks/use-inline-comments-filter';
 import { useInlineCommentSubscriberContext } from '../../../ui/annotations/hooks/use-inline-comment-subscriber';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
+import { useAnnotationRangeState } from '../../../ui/annotations/contexts/AnnotationRangeContext';
 var linkStyle = css({
   position: 'absolute',
   background: 'transparent',
@@ -421,7 +422,10 @@ var Media = /*#__PURE__*/function (_PureComponent) {
   }]);
 }(PureComponent);
 var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
-  var draftPosition = React.useContext(AnnotationsDraftContext);
+  var draftPositionOld = React.useContext(AnnotationsDraftContext);
+  var _useAnnotationRangeSt = useAnnotationRangeState(),
+    hoverDraftDocumentPosition = _useAnnotationRangeSt.hoverDraftDocumentPosition;
+  var draftPosition = fg('platform_renderer_annotation_draft_position_fix') ? hoverDraftDocumentPosition : draftPositionOld;
   var dataAttributes = props.dataAttributes;
   var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
   var _useState9 = useState(),

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

@@ -130,7 +130,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
   var padding = isFullPage ? FullPagePadding * 2 : 0;
   var calcDimensions = useCallback(function (mediaContainerWidth) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
-    var maxWidth = isSSR() && widthAttr && fg('platform_editor_fix_image_size_diff_during_ssr') ? Math.max(widthAttr, containerWidth) : containerWidth;
+    var maxWidth = isSSR() && widthAttr && typeof widthAttr === 'number' && widthType === 'pixel' && fg('platform_editor_fix_image_size_diff_during_ssr') ? Math.max(widthAttr, containerWidth) : containerWidth;
     var maxHeight = height / width * maxWidth;
     var cardDimensions = {
       width: "".concat(maxWidth, "px"),
@@ -151,7 +151,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
       cardDimensions: cardDimensions,
       lineLength: lineLength
     };
-  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width, widthAttr]);
+  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width, widthAttr, widthType]);
   var originalDimensions = useMemo(function () {
     return {
       width: width,

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

@@ -380,11 +380,17 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         this.updatedLayout = layout;
       }
 
+      // defined in colgroup.tsx:
+      // appearance == comment && allowTableResizing && means it is a comment
+      // appearance == comment && !allowTableResizing && means it is a inline comment
+      // for inline comments, the table should inherit the width of the parent component rather than maintain its own size
+      var isInsideInlineComment = rendererAppearance === 'comment' && !allowTableResizing;
+
       // These styling removes extra padding for `comment` rendererAppearance.
       // This is especially relevant for Jira which only uses `comment` appearance and does not need padding.
       var resizerContainerPadding = rendererAppearance === 'comment' ? 0 : gutterPadding;
-      var resizerItemMaxWidth = rendererAppearance === 'comment' ? "min(100cqw, var(--ak-editor-table-max-width))" : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))";
-      var resizerItemWidth = rendererAppearance === 'comment' ? "min(100cqw, ".concat(tableWidthAttribute, ")") : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(tableWidthAttribute, ")");
+      var resizerItemMaxWidth = rendererAppearance === 'comment' ? isInsideInlineComment ? 'inherit' : "min(100cqw, var(--ak-editor-table-max-width))" : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))";
+      var resizerItemWidth = rendererAppearance === 'comment' ? isInsideInlineComment ? 'inherit' : "min(100cqw, ".concat(tableWidthAttribute, ")") : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(tableWidthAttribute, ")");
 
       // full width tables can have either left-aligned or centered layout despite looking centered in the renderer.
       // in these cases, keep the alignment unset
@@ -406,7 +412,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         ,
         style: {
-          width: "min(calc(100cqw - ".concat(resizerContainerPadding, "px), ").concat(tableWidthAttribute, ")")
+          width: isInsideInlineComment ? '100%' : "min(calc(100cqw - ".concat(resizerContainerPadding, "px), ").concat(tableWidthAttribute, ")")
         }
       }, /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766

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

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+export var PortalContext = /*#__PURE__*/React.createContext(undefined);
+export var usePortal = function usePortal() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    portalFromProps = _ref.portal;
+  var portalFromContext = useContext(PortalContext);
+  if (portalFromProps) {
+    return portalFromProps;
+  }
+  if (fg('cc_complexit_reduce_portal_rerenders')) {
+    return portalFromContext;
+  }
+  return undefined;
+};

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

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["portal"];
 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; }
 /**
@@ -47,14 +49,14 @@ import { RendererStyleContainer } from './RendererStyleContainer';
 import { getBaseFontSize } from './get-base-font-size';
 import { removeEmptySpaceAroundContent } from './rendererHelper';
 import { useMemoFromPropsDerivative } from './useMemoFromPropsDerivative';
+import { PortalContext } from './PortalContext';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "115.0.5";
+var packageVersion = "115.1.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
-  containerType: 'inline-size',
-  contain: 'layout style inline-size'
+  containerType: 'inline-size'
 });
 var handleMouseTripleClickInTables = function handleMouseTripleClickInTables(event) {
   var _parentElement, _parentElement2;
@@ -162,10 +164,6 @@ var handleWrapperOnClick = function handleWrapperOnClick(event, props, mouseDown
     props.eventHandlers.onUnhandledClick(event);
   }
 };
-
-/**
- * Exported due to enzyme test reliance on this component.
- */
 export var RendererFunctionalComponent = function RendererFunctionalComponent(props) {
   var createAnalyticsEvent = props.createAnalyticsEvent;
   var mouseDownSelection = useRef(undefined);
@@ -448,6 +446,29 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
   }
 };
 var RendererFunctionalComponentMemoized = /*#__PURE__*/React.memo(RendererFunctionalComponent);
+var RendererFunctionalComponentWithPortalContext = function RendererFunctionalComponentWithPortalContext(props) {
+  var portal = props.portal,
+    propsWithoutPortal = _objectWithoutProperties(props, _excluded);
+  return jsx(PortalContext.Provider, {
+    value: portal
+  }, jsx(RendererFunctionalComponent, propsWithoutPortal));
+};
+var RendererFunctionalComponentWithPortalContextMemoized = /*#__PURE__*/React.memo(RendererFunctionalComponentWithPortalContext);
+var getRendererComponent = function getRendererComponent(nodeComponents) {
+  // If nodeComponents are provided, for now we don't want to remove portal from props
+  // and use context instead because at this time we cannot guarantee that existing
+  // consumers of Atlaskit Renderer will update to use the new portal context.
+  if (!Boolean(nodeComponents) && fg('cc_complexit_reduce_portal_rerenders')) {
+    if (fg('cc_perf_reduce_rerenders')) {
+      return RendererFunctionalComponentWithPortalContextMemoized;
+    }
+    return RendererFunctionalComponentWithPortalContext;
+  }
+  if (fg('cc_perf_reduce_rerenders')) {
+    return RendererFunctionalComponentMemoized;
+  }
+  return RendererFunctionalComponent;
+};
 export function Renderer(props) {
   var _React$useContext = React.useContext(AnnotationsPositionContext),
     startPos = _React$useContext.startPos;
@@ -455,7 +476,7 @@ export function Renderer(props) {
     isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
   var _ref = useContext(ValidationContext) || {},
     skipValidation = _ref.skipValidation;
-  var RendererComponent = fg('cc_perf_reduce_rerenders') ? RendererFunctionalComponentMemoized : RendererFunctionalComponent;
+  var RendererComponent = getRendererComponent(props.nodeComponents);
   return jsx(RendererComponent
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
@@ -593,10 +614,10 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
   // Only apply container-type = inline-size when having a known width in full-page/full-width/comment mode.
   // Otherwise when appearance is unspecified the renderer size is decided by the content.
   // In this case we can't set the container-type = inline-size as it will collapse width to 0.
-  return (appearance === 'full-page' || appearance === 'full-width' || appearance === 'comment') &&
+  return appearance === 'comment' &&
   // In case of having excerpt-include on page there are multiple renderers nested.
   // Make sure only the root renderer is set to be query container.
-  isTopLevelRenderer && fg('platform-fix-table-ssr-resizing') ? jsx("div", {
+  isTopLevelRenderer && fg('platform-ssr-table-resize') ? jsx("div", {
     css: setAsQueryContainerStyles
   }, renderer) : renderer;
 });

package/dist/esm/ui/annotations/context.js

@@ -8,10 +8,23 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { createContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-export var AnnotationsDraftContext = /*#__PURE__*/createContext(null);
 export var ProvidersContext = /*#__PURE__*/createContext(null);
 export var InlineCommentsStateContext = /*#__PURE__*/createContext({});
 
+/**
+ * @private
+ * @deprecated The FG platform_renderer_annotation_draft_position_fix will make this context redundant as the draft position
+ * has been moved to the AnnotationRangeProvider in order to be more consistent with the hover and selection ranges.
+ * Once the FG is rolled out this context will be removed. Please ensure any changes are duplicated to the AnnotationRangeProvider.
+ */
+export var AnnotationsDraftContext = /*#__PURE__*/createContext(null);
+
+/**
+ * @private
+ * @deprecated The FG platform_renderer_annotation_draft_position_fix will make this context redundant as the draft position
+ * has been moved to the AnnotationRangeProvider in order to be more consistent with the hover and selection ranges.
+ * Once the FG is rolled out this context will be removed. Please ensure any changes are duplicated to the AnnotationRangeProvider.
+ */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export var AnnotationsDraftContextWrapper = /*#__PURE__*/function (_React$Component) {