@atlaskit/renderer 125.3.2 → 125.4.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/renderer
 
+## 125.4.0
+
+### Minor Changes
+
+- [`5852113f7c414`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5852113f7c414) -
+  Updates expand content rendering with inline comments to support lazy loading
+
+### Patch Changes
+
+- [`fff45a651440a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fff45a651440a) -
+  EDITOR-1665 add experience tracking analytics for sync block save, fetch and delete
+- Updated dependencies
+
 ## 125.3.2
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -268,6 +268,11 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
           return this.getInlineCardProps(node, path);
         case 'expand':
           return this.getExpandProps(node, path);
+        case 'nestedExpand':
+          if ((0, _platformFeatureFlags.fg)('hot-121622_lazy_load_expand_content')) {
+            return this.getExpandProps(node, path);
+          }
+          return this.getProps(node, path);
         case 'unsupportedBlock':
         case 'unsupportedInline':
           return this.getUnsupportedContentProps(node);
@@ -684,15 +689,29 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     value: function getExpandProps(node) {
       var _this7 = this;
       var _path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      var loadBodyContent = false;
+      if ((0, _platformFeatureFlags.fg)('hot-121622_lazy_load_expand_content')) {
+        var annotations = (0, _utils2.findChildrenByMark)(node, node.type.schema.marks.annotation, true);
+        // Force rendering children if there are inline comments to support comments navigation
+        // which relies on the HTML node to be present.
+        loadBodyContent = annotations.some(function (annotation) {
+          return annotation.node.marks.some(function (mark) {
+            return mark.attrs.annotationType === 'inlineComment';
+          });
+        });
+      }
       if (!(0, _links.isNestedHeaderLinksEnabled)(this.allowHeadingAnchorLinks)) {
-        return this.getProps(node);
+        return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
+          loadBodyContent: loadBodyContent
+        });
       }
       var nestedHeaderIds = (0, _utils2.findChildrenByType)(node, node.type.schema.nodes.heading).map(function (_ref4) {
         var node = _ref4.node;
         return _this7.getHeadingId(node, _this7.expandHeadingIds);
       });
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
-        nestedHeaderIds: nestedHeaderIds
+        nestedHeaderIds: nestedHeaderIds,
+        loadBodyContent: loadBodyContent
       });
     }
 

package/dist/cjs/ui/Expand.js

@@ -201,7 +201,8 @@ function Expand(_ref2) {
     fireAnalyticsEvent = _ref2.fireAnalyticsEvent,
     localId = _ref2.localId,
     nestedHeaderIds = _ref2.nestedHeaderIds,
-    rendererContentMode = _ref2.rendererContentMode;
+    rendererContentMode = _ref2.rendererContentMode,
+    loadBodyContent = _ref2.loadBodyContent;
   var _React$useState = _react2.default.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     expanded = _React$useState2[0],
@@ -291,7 +292,7 @@ function Expand(_ref2) {
     className: "".concat(nodeType, "-content-wrapper")
   }, (0, _react.jsx)(_ui.WidthProvider, null, (0, _react.jsx)("div", {
     css: clearNextSiblingMarginTopStyle
-  }), (0, _platformFeatureFlags.fg)('hot-121622_lazy_load_expand_content') ? hasLoadedChildren ? (0, _react.jsx)(_react2.Suspense, {
+  }), (0, _platformFeatureFlags.fg)('hot-121622_lazy_load_expand_content') ? hasLoadedChildren || loadBodyContent ? (0, _react.jsx)(_react2.Suspense, {
     fallback: (0, _react.jsx)("div", null, (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? intl.formatMessage(_ui.expandMessages.loading) : 'Loading...')
   }, (0, _react.jsx)(LazyChildren, null, children)) : null : children))));
 }

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

@@ -70,7 +70,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "125.3.1";
+var packageVersion = "125.3.2";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/react/index.js

@@ -9,7 +9,7 @@ import TextWrapperComponent from './nodes/text-wrapper';
 import { isNestedHeaderLinksEnabled } from './utils/links';
 import { getColumnWidths } from '@atlaskit/editor-common/utils';
 import { getMarksByOrder, isSameMark } from '@atlaskit/editor-common/validator';
-import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
+import { findChildrenByMark, findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getText } from '../utils';
 import { isAnnotationMark, toReact as markToReact } from './marks';
@@ -251,6 +251,11 @@ export default class ReactSerializer {
         return this.getInlineCardProps(node, path);
       case 'expand':
         return this.getExpandProps(node, path);
+      case 'nestedExpand':
+        if (fg('hot-121622_lazy_load_expand_content')) {
+          return this.getExpandProps(node, path);
+        }
+        return this.getProps(node, path);
       case 'unsupportedBlock':
       case 'unsupportedInline':
         return this.getUnsupportedContentProps(node);
@@ -607,15 +612,28 @@ export default class ReactSerializer {
     };
   }
   getExpandProps(node, _path = []) {
+    let loadBodyContent = false;
+    if (fg('hot-121622_lazy_load_expand_content')) {
+      const annotations = findChildrenByMark(node, node.type.schema.marks.annotation, true);
+      // Force rendering children if there are inline comments to support comments navigation
+      // which relies on the HTML node to be present.
+      loadBodyContent = annotations.some(annotation => {
+        return annotation.node.marks.some(mark => mark.attrs.annotationType === 'inlineComment');
+      });
+    }
     if (!isNestedHeaderLinksEnabled(this.allowHeadingAnchorLinks)) {
-      return this.getProps(node);
+      return {
+        ...this.getProps(node),
+        loadBodyContent
+      };
     }
     const nestedHeaderIds = findChildrenByType(node, node.type.schema.nodes.heading).map(({
       node
     }) => this.getHeadingId(node, this.expandHeadingIds));
     return {
       ...this.getProps(node),
-      nestedHeaderIds
+      nestedHeaderIds,
+      loadBodyContent
     };
   }
 

package/dist/es2019/ui/Expand.js

@@ -192,7 +192,8 @@ function Expand({
   fireAnalyticsEvent,
   localId,
   nestedHeaderIds,
-  rendererContentMode
+  rendererContentMode,
+  loadBodyContent
 }) {
   const [expanded, setExpanded] = React.useState(false);
   const [focused, setFocused] = React.useState(false);
@@ -271,7 +272,7 @@ function Expand({
     className: `${nodeType}-content-wrapper`
   }, jsx(WidthProvider, null, jsx("div", {
     css: clearNextSiblingMarginTopStyle
-  }), fg('hot-121622_lazy_load_expand_content') ? hasLoadedChildren ? jsx(Suspense, {
+  }), fg('hot-121622_lazy_load_expand_content') ? hasLoadedChildren || loadBodyContent ? jsx(Suspense, {
     fallback: jsx("div", null, fg('platform_editor_dec_a11y_fixes') ? intl.formatMessage(expandMessages.loading) : 'Loading...')
   }, jsx(LazyChildren, null, children)) : null : children))));
 }

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

@@ -56,7 +56,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.2;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "125.3.1";
+const packageVersion = "125.3.2";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/react/index.js

@@ -16,7 +16,7 @@ import TextWrapperComponent from './nodes/text-wrapper';
 import { isNestedHeaderLinksEnabled } from './utils/links';
 import { getColumnWidths } from '@atlaskit/editor-common/utils';
 import { getMarksByOrder, isSameMark } from '@atlaskit/editor-common/validator';
-import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
+import { findChildrenByMark, findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getText } from '../utils';
 import { isAnnotationMark, toReact as markToReact } from './marks';
@@ -261,6 +261,11 @@ var ReactSerializer = /*#__PURE__*/function () {
           return this.getInlineCardProps(node, path);
         case 'expand':
           return this.getExpandProps(node, path);
+        case 'nestedExpand':
+          if (fg('hot-121622_lazy_load_expand_content')) {
+            return this.getExpandProps(node, path);
+          }
+          return this.getProps(node, path);
         case 'unsupportedBlock':
         case 'unsupportedInline':
           return this.getUnsupportedContentProps(node);
@@ -677,15 +682,29 @@ var ReactSerializer = /*#__PURE__*/function () {
     value: function getExpandProps(node) {
       var _this7 = this;
       var _path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      var loadBodyContent = false;
+      if (fg('hot-121622_lazy_load_expand_content')) {
+        var annotations = findChildrenByMark(node, node.type.schema.marks.annotation, true);
+        // Force rendering children if there are inline comments to support comments navigation
+        // which relies on the HTML node to be present.
+        loadBodyContent = annotations.some(function (annotation) {
+          return annotation.node.marks.some(function (mark) {
+            return mark.attrs.annotationType === 'inlineComment';
+          });
+        });
+      }
       if (!isNestedHeaderLinksEnabled(this.allowHeadingAnchorLinks)) {
-        return this.getProps(node);
+        return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
+          loadBodyContent: loadBodyContent
+        });
       }
       var nestedHeaderIds = findChildrenByType(node, node.type.schema.nodes.heading).map(function (_ref4) {
         var node = _ref4.node;
         return _this7.getHeadingId(node, _this7.expandHeadingIds);
       });
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
-        nestedHeaderIds: nestedHeaderIds
+        nestedHeaderIds: nestedHeaderIds,
+        loadBodyContent: loadBodyContent
       });
     }
 

package/dist/esm/ui/Expand.js

@@ -192,7 +192,8 @@ function Expand(_ref2) {
     fireAnalyticsEvent = _ref2.fireAnalyticsEvent,
     localId = _ref2.localId,
     nestedHeaderIds = _ref2.nestedHeaderIds,
-    rendererContentMode = _ref2.rendererContentMode;
+    rendererContentMode = _ref2.rendererContentMode,
+    loadBodyContent = _ref2.loadBodyContent;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     expanded = _React$useState2[0],
@@ -282,7 +283,7 @@ function Expand(_ref2) {
     className: "".concat(nodeType, "-content-wrapper")
   }, jsx(WidthProvider, null, jsx("div", {
     css: clearNextSiblingMarginTopStyle
-  }), fg('hot-121622_lazy_load_expand_content') ? hasLoadedChildren ? jsx(Suspense, {
+  }), fg('hot-121622_lazy_load_expand_content') ? hasLoadedChildren || loadBodyContent ? jsx(Suspense, {
     fallback: jsx("div", null, fg('platform_editor_dec_a11y_fixes') ? intl.formatMessage(expandMessages.loading) : 'Loading...')
   }, jsx(LazyChildren, null, children)) : null : children))));
 }

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

@@ -61,7 +61,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "125.3.1";
+var packageVersion = "125.3.2";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/types/analytics/events.d.ts

@@ -1,4 +1,4 @@
-import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, OperationalAEP, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, OperationalAEP, ExperienceEventPayload, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import type { AEP } from './enums';
 import type { SortOrder } from '@atlaskit/editor-common/types';
 import type { SEVERITY, UNSUPPORTED_CONTENT_LEVEL_SEVERITY, UnsupportedContentPayload, UnsupportedContentTooltipPayload } from '@atlaskit/editor-common/utils';
@@ -159,6 +159,6 @@ type SyncedBlockGetSourceInfoErrorAEP = OperationalAEP<ACTION.ERROR, ACTION_SUBJ
 type ReferenceSyncedBlockUpdateErrorAEP = OperationalAEP<ACTION.ERROR, ACTION_SUBJECT.SYNCED_BLOCK, ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_UPDATE, {
     error: string;
 }>;
-export type AnalyticsEventPayload<_T = void> = RendererStartAEP | RendererRenderedAEP | RendererRenderedSampledAEP | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | CodeBlockCopyAEP | CodeBlockWrapAEP | HeadingAnchorLinkButtonAEP | HoverLabelAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | TableWidthInfoAEP | TableRendererHeightInfoAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP | NestedTableTransformedAEP | MediaRenderErrorEvent | SyncedBlockFetchErrorAEP | SyncedBlockGetSourceInfoErrorAEP | ReferenceSyncedBlockUpdateErrorAEP;
+export type AnalyticsEventPayload<_T = void> = RendererStartAEP | RendererRenderedAEP | RendererRenderedSampledAEP | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | CodeBlockCopyAEP | CodeBlockWrapAEP | HeadingAnchorLinkButtonAEP | HoverLabelAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | TableWidthInfoAEP | TableRendererHeightInfoAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP | NestedTableTransformedAEP | MediaRenderErrorEvent | SyncedBlockFetchErrorAEP | SyncedBlockGetSourceInfoErrorAEP | ReferenceSyncedBlockUpdateErrorAEP | ExperienceEventPayload;
 export type FireAnalyticsCallback = <T = void>(payload: AnalyticsEventPayload<T>) => void | undefined;
 export {};

package/dist/types/ui/Expand.d.ts

@@ -5,6 +5,7 @@ import type { RendererAppearance, RendererContentMode } from './Renderer/types';
 export interface ExpandProps {
     children: React.ReactNode;
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
+    loadBodyContent?: boolean;
     localId?: string;
     nestedHeaderIds?: Array<string>;
     nodeType: 'expand' | 'nestedExpand';

package/dist/types-ts4.5/analytics/events.d.ts

@@ -1,4 +1,4 @@
-import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, OperationalAEP, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, OperationalAEP, ExperienceEventPayload, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import type { AEP } from './enums';
 import type { SortOrder } from '@atlaskit/editor-common/types';
 import type { SEVERITY, UNSUPPORTED_CONTENT_LEVEL_SEVERITY, UnsupportedContentPayload, UnsupportedContentTooltipPayload } from '@atlaskit/editor-common/utils';
@@ -159,6 +159,6 @@ type SyncedBlockGetSourceInfoErrorAEP = OperationalAEP<ACTION.ERROR, ACTION_SUBJ
 type ReferenceSyncedBlockUpdateErrorAEP = OperationalAEP<ACTION.ERROR, ACTION_SUBJECT.SYNCED_BLOCK, ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_UPDATE, {
     error: string;
 }>;
-export type AnalyticsEventPayload<_T = void> = RendererStartAEP | RendererRenderedAEP | RendererRenderedSampledAEP | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | CodeBlockCopyAEP | CodeBlockWrapAEP | HeadingAnchorLinkButtonAEP | HoverLabelAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | TableWidthInfoAEP | TableRendererHeightInfoAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP | NestedTableTransformedAEP | MediaRenderErrorEvent | SyncedBlockFetchErrorAEP | SyncedBlockGetSourceInfoErrorAEP | ReferenceSyncedBlockUpdateErrorAEP;
+export type AnalyticsEventPayload<_T = void> = RendererStartAEP | RendererRenderedAEP | RendererRenderedSampledAEP | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | CodeBlockCopyAEP | CodeBlockWrapAEP | HeadingAnchorLinkButtonAEP | HoverLabelAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | TableWidthInfoAEP | TableRendererHeightInfoAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP | NestedTableTransformedAEP | MediaRenderErrorEvent | SyncedBlockFetchErrorAEP | SyncedBlockGetSourceInfoErrorAEP | ReferenceSyncedBlockUpdateErrorAEP | ExperienceEventPayload;
 export type FireAnalyticsCallback = <T = void>(payload: AnalyticsEventPayload<T>) => void | undefined;
 export {};

package/dist/types-ts4.5/ui/Expand.d.ts

@@ -5,6 +5,7 @@ import type { RendererAppearance, RendererContentMode } from './Renderer/types';
 export interface ExpandProps {
     children: React.ReactNode;
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
+    loadBodyContent?: boolean;
     localId?: string;
     nestedHeaderIds?: Array<string>;
     nodeType: 'expand' | 'nestedExpand';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "125.3.2",
+	"version": "125.4.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -57,7 +57,7 @@
 		"@atlaskit/status": "^3.1.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.18.0",
+		"@atlaskit/tmp-editor-statsig": "^16.19.0",
 		"@atlaskit/tokens": "^9.1.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -71,7 +71,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.7.0",
+		"@atlaskit/editor-common": "^111.8.0",
 		"@atlaskit/link-provider": "^4.1.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -88,9 +88,9 @@
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
 		"@atlaskit/media-test-helpers": "^39.0.0",
 		"@atlaskit/mention": "^24.4.0",
-		"@atlaskit/modal-dialog": "^14.9.0",
+		"@atlaskit/modal-dialog": "^14.10.0",
 		"@atlaskit/navigation-next": "patch:@atlaskit/navigation-next@npm%3A9.0.17#~/.yarn/patches/@atlaskit-navigation-next-npm-9.0.17-958ca0ab9d.patch",
-		"@atlaskit/profilecard": "^24.29.0",
+		"@atlaskit/profilecard": "^24.30.0",
 		"@atlaskit/util-data-test": "^18.4.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@testing-library/react": "^16.3.0",