@atlaskit/renderer 130.2.18 → 130.3.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/renderer
 
+## 130.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 130.3.0
+
+### Minor Changes
+
+- [`800992939bc88`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/800992939bc88) -
+  EDITOR-6751 - Inline bodied extension: fire analytics event when rendering
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 130.2.18
 
 ### Patch Changes

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

@@ -19,7 +19,7 @@ var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
  * Cleanup: delete this file once the experiment has shipped.
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration; `jsx` is used as the JSX pragma (see @jsx jsx above) so must be a value import
 
 var anchorStyles = (0, _react.css)({
   color: "var(--ds-link, #1868DB)",

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

@@ -28,7 +28,8 @@ var BodiedExtension = function BodiedExtension(props) {
     parameters = props.parameters,
     extensionViewportSizes = props.extensionViewportSizes,
     localId = props.localId,
-    shouldDisplayExtensionAsInline = props.shouldDisplayExtensionAsInline;
+    shouldDisplayExtensionAsInline = props.shouldDisplayExtensionAsInline,
+    fireAnalyticsEvent = props.fireAnalyticsEvent;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var removeOverflow = _react.default.Children.toArray(children)
@@ -66,7 +67,8 @@ var BodiedExtension = function BodiedExtension(props) {
         // Return the content directly if it's a valid JSX.Element
         return (0, _extension.renderExtension)(result, layout, {
           isTopLevel: path.length < 1,
-          rendererAppearance: props.rendererAppearance
+          rendererAppearance: props.rendererAppearance,
+          fireAnalyticsEvent: fireAnalyticsEvent
         }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
       }
     } catch (_unused) {
@@ -77,7 +79,8 @@ var BodiedExtension = function BodiedExtension(props) {
     // Always return default content if anything goes wrong
     return (0, _extension.renderExtension)(children, layout, {
       isTopLevel: path.length < 1,
-      rendererAppearance: props.rendererAppearance
+      rendererAppearance: props.rendererAppearance,
+      fireAnalyticsEvent: fireAnalyticsEvent
     }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
   }))));
 };

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

@@ -1,13 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderExtension = exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
-var _react2 = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _ExtensionRenderer = _interopRequireDefault(require("../../ui/ExtensionRenderer"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -15,6 +17,7 @@ var _consts = require("../../consts");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _breakout = require("../utils/breakout");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -46,6 +49,28 @@ var getViewportSize = function getViewportSize(extensionId, extensionViewportSiz
 var containerStyle = (0, _react.css)({
   containerType: 'inline-size'
 });
+/**
+ * Fires an analytics event once on mount when a bodied extension is rendered as an inline element.
+ * The node is stored in a ref to avoid re-firing if the node reference changes.
+ */
+var FireExtensionAsInlineAnalytics = function FireExtensionAsInlineAnalytics(_ref) {
+  var fireAnalyticsEvent = _ref.fireAnalyticsEvent,
+    node = _ref.node;
+  var nodeRef = (0, _react2.useRef)(node);
+  (0, _react2.useEffect)(function () {
+    fireAnalyticsEvent({
+      action: _analytics.ACTION.RENDERED,
+      actionSubject: _analytics.ACTION_SUBJECT.EXTENSION_AS_INLINE,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.EXTENSION_BODIED,
+      attributes: {
+        extensionKey: nodeRef.current.extensionKey,
+        extensionType: nodeRef.current.extensionType
+      },
+      eventType: _analytics.EVENT_TYPE.OPERATIONAL
+    });
+  }, [fireAnalyticsEvent]);
+  return null;
+};
 var renderExtension = exports.renderExtension = function renderExtension(content, layout) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var removeOverflow = arguments.length > 3 ? arguments[3] : undefined;
@@ -59,10 +84,11 @@ var renderExtension = exports.renderExtension = function renderExtension(content
   var overflowContainerClass = !removeOverflow ? _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
 
   // by default, we assume the extension is at top level, (direct child of doc node)
-  var _ref = options || {},
-    _ref$isTopLevel = _ref.isTopLevel,
-    isTopLevel = _ref$isTopLevel === void 0 ? true : _ref$isTopLevel,
-    rendererAppearance = _ref.rendererAppearance;
+  var _ref2 = options || {},
+    _ref2$isTopLevel = _ref2.isTopLevel,
+    isTopLevel = _ref2$isTopLevel === void 0 ? true : _ref2$isTopLevel,
+    rendererAppearance = _ref2.rendererAppearance,
+    fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
   // we should only use custom layout for full-page appearance
   var canUseCustomLayout = (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
   var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
@@ -77,6 +103,10 @@ var renderExtension = exports.renderExtension = function renderExtension(content
   var extensionHeight = nodeHeight || viewportSize;
   var isInline = (shouldDisplayExtensionAsInline === null || shouldDisplayExtensionAsInline === void 0 ? void 0 : shouldDisplayExtensionAsInline(node)) && (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true);
   var inlineClassName = isInline ? _consts.RendererCssClassName.EXTENSION_AS_INLINE : '';
+  var asInlineAnalytics = isInline && fireAnalyticsEvent && node && (0, _platformFeatureFlags.fg)('platform_editor_render_inline_extension_analytics') ? (0, _react.jsx)(FireExtensionAsInlineAnalytics, {
+    fireAnalyticsEvent: fireAnalyticsEvent,
+    node: node
+  }) : null;
   if ((0, _expValEquals.expValEquals)('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
     var extensionDiv = (0, _react.jsx)("div", {
       ref: options.handleRef
@@ -100,14 +130,14 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       ,
       className: "".concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
       css: [!isInsideOfInlineExtension && (0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
-    }, content));
+    }, asInlineAnalytics, content));
     return centerAlignClass && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true) ? (0, _react.jsx)("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: _consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER
     }, extensionDiv) : extensionDiv;
   }
-  return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref2) {
-    var width = _ref2.width;
+  return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref3) {
+    var width = _ref3.width;
     var extensionDiv = (0, _react.jsx)("div", {
       ref: options.handleRef
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -129,7 +159,7 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       ,
       className: "".concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
       css: [!isInsideOfInlineExtension && (0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
-    }, content));
+    }, asInlineAnalytics, content));
     return centerAlignClass && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true) ? (0, _react.jsx)("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: _consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER
@@ -154,8 +184,8 @@ var Extension = function Extension(props) {
   // eslint-disable-next-line react/jsx-props-no-spreading
   , (0, _extends2.default)({}, props, {
     type: "extension"
-  }), function (_ref3) {
-    var result = _ref3.result;
+  }), function (_ref4) {
+    var result = _ref4.result;
     try {
       // Return the result directly if it's a valid JSX.Element
       if (result && /*#__PURE__*/_react2.default.isValidElement(result)) {

package/dist/cjs/react/nodes/panel-emotion.js

@@ -24,7 +24,7 @@ var _excluded = ["backgroundColor", "hasIcon"];
  *
  * Cleanup: delete this file once the experiment has shipped.
  */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration; `jsx` is used as the JSX pragma (see @jsx jsx above) so must be a value import
 // New custom icons are a little smaller than predefined icons.
 // To fix alignment issues with custom icons, vertical alignment is updated.
 var panelEmojiSpriteVerticalAlignment = -(8 * 3 - _consts.akEditorCustomIconSize) / 2;

package/dist/es2019/react/marks/link-emotion.js

@@ -10,7 +10,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * Cleanup: delete this file once the experiment has shipped.
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration; `jsx` is used as the JSX pragma (see @jsx jsx above) so must be a value import
 import { css, jsx } from '@emotion/react';
 import LinkUrl from '@atlaskit/smart-card/link-url';
 const anchorStyles = css({

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

@@ -18,7 +18,8 @@ const BodiedExtension = props => {
     parameters,
     extensionViewportSizes,
     localId,
-    shouldDisplayExtensionAsInline
+    shouldDisplayExtensionAsInline,
+    fireAnalyticsEvent
   } = props;
   const {
     createAnalyticsEvent
@@ -55,7 +56,8 @@ const BodiedExtension = props => {
         // Return the content directly if it's a valid JSX.Element
         return renderExtension(result, layout, {
           isTopLevel: path.length < 1,
-          rendererAppearance: props.rendererAppearance
+          rendererAppearance: props.rendererAppearance,
+          fireAnalyticsEvent
         }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
       }
     } catch {
@@ -66,7 +68,8 @@ const BodiedExtension = props => {
     // Always return default content if anything goes wrong
     return renderExtension(children, layout, {
       isTopLevel: path.length < 1,
-      rendererAppearance: props.rendererAppearance
+      rendererAppearance: props.rendererAppearance,
+      fireAnalyticsEvent
     }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
   }))));
 };

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

@@ -6,7 +6,8 @@ import _extends from "@babel/runtime/helpers/extends";
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import ExtensionRenderer from '../../ui/ExtensionRenderer';
 import { overflowShadow, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
@@ -36,13 +37,37 @@ const getViewportSize = (extensionId, extensionViewportSizes) => {
 const containerStyle = css({
   containerType: 'inline-size'
 });
+/**
+ * Fires an analytics event once on mount when a bodied extension is rendered as an inline element.
+ * The node is stored in a ref to avoid re-firing if the node reference changes.
+ */
+const FireExtensionAsInlineAnalytics = ({
+  fireAnalyticsEvent,
+  node
+}) => {
+  const nodeRef = useRef(node);
+  useEffect(() => {
+    fireAnalyticsEvent({
+      action: ACTION.RENDERED,
+      actionSubject: ACTION_SUBJECT.EXTENSION_AS_INLINE,
+      actionSubjectId: ACTION_SUBJECT_ID.EXTENSION_BODIED,
+      attributes: {
+        extensionKey: nodeRef.current.extensionKey,
+        extensionType: nodeRef.current.extensionType
+      },
+      eventType: EVENT_TYPE.OPERATIONAL
+    });
+  }, [fireAnalyticsEvent]);
+  return null;
+};
 export const renderExtension = (content, layout, options = {}, removeOverflow, extensionId, extensionViewportSizes, nodeHeight, localId, shouldDisplayExtensionAsInline, node, isInsideOfInlineExtension) => {
   const overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
 
   // by default, we assume the extension is at top level, (direct child of doc node)
   const {
     isTopLevel = true,
-    rendererAppearance
+    rendererAppearance,
+    fireAnalyticsEvent
   } = options || {};
   // we should only use custom layout for full-page appearance
   const canUseCustomLayout = expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
@@ -58,6 +83,10 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
   const extensionHeight = nodeHeight || viewportSize;
   const isInline = (shouldDisplayExtensionAsInline === null || shouldDisplayExtensionAsInline === void 0 ? void 0 : shouldDisplayExtensionAsInline(node)) && expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true);
   const inlineClassName = isInline ? RendererCssClassName.EXTENSION_AS_INLINE : '';
+  const asInlineAnalytics = isInline && fireAnalyticsEvent && node && fg('platform_editor_render_inline_extension_analytics') ? jsx(FireExtensionAsInlineAnalytics, {
+    fireAnalyticsEvent: fireAnalyticsEvent,
+    node: node
+  }) : null;
   if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
     const extensionDiv = jsx("div", {
       ref: options.handleRef
@@ -81,7 +110,7 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
       ,
       className: `${RendererCssClassName.EXTENSION_INNER_WRAPPER} ${overflowContainerClass}`,
       css: [!isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
-    }, content));
+    }, asInlineAnalytics, content));
     return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
@@ -111,7 +140,7 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
       ,
       className: `${RendererCssClassName.EXTENSION_INNER_WRAPPER} ${overflowContainerClass}`,
       css: [!isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
-    }, content));
+    }, asInlineAnalytics, content));
     return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER

package/dist/es2019/react/nodes/panel-emotion.js

@@ -11,7 +11,7 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 import React from 'react';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration; `jsx` is used as the JSX pragma (see @jsx jsx above) so must be a value import
 import { css, jsx } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';

package/dist/esm/react/marks/link-emotion.js

@@ -10,7 +10,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * Cleanup: delete this file once the experiment has shipped.
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration; `jsx` is used as the JSX pragma (see @jsx jsx above) so must be a value import
 import { css, jsx } from '@emotion/react';
 import LinkUrl from '@atlaskit/smart-card/link-url';
 var anchorStyles = css({

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

@@ -19,7 +19,8 @@ var BodiedExtension = function BodiedExtension(props) {
     parameters = props.parameters,
     extensionViewportSizes = props.extensionViewportSizes,
     localId = props.localId,
-    shouldDisplayExtensionAsInline = props.shouldDisplayExtensionAsInline;
+    shouldDisplayExtensionAsInline = props.shouldDisplayExtensionAsInline,
+    fireAnalyticsEvent = props.fireAnalyticsEvent;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var removeOverflow = React.Children.toArray(children)
@@ -57,7 +58,8 @@ var BodiedExtension = function BodiedExtension(props) {
         // Return the content directly if it's a valid JSX.Element
         return renderExtension(result, layout, {
           isTopLevel: path.length < 1,
-          rendererAppearance: props.rendererAppearance
+          rendererAppearance: props.rendererAppearance,
+          fireAnalyticsEvent: fireAnalyticsEvent
         }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
       }
     } catch (_unused) {
@@ -68,7 +70,8 @@ var BodiedExtension = function BodiedExtension(props) {
     // Always return default content if anything goes wrong
     return renderExtension(children, layout, {
       isTopLevel: path.length < 1,
-      rendererAppearance: props.rendererAppearance
+      rendererAppearance: props.rendererAppearance,
+      fireAnalyticsEvent: fireAnalyticsEvent
     }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
   }))));
 };

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

@@ -6,7 +6,8 @@ import _extends from "@babel/runtime/helpers/extends";
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import ExtensionRenderer from '../../ui/ExtensionRenderer';
 import { overflowShadow, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
@@ -38,6 +39,28 @@ var getViewportSize = function getViewportSize(extensionId, extensionViewportSiz
 var containerStyle = css({
   containerType: 'inline-size'
 });
+/**
+ * Fires an analytics event once on mount when a bodied extension is rendered as an inline element.
+ * The node is stored in a ref to avoid re-firing if the node reference changes.
+ */
+var FireExtensionAsInlineAnalytics = function FireExtensionAsInlineAnalytics(_ref) {
+  var fireAnalyticsEvent = _ref.fireAnalyticsEvent,
+    node = _ref.node;
+  var nodeRef = useRef(node);
+  useEffect(function () {
+    fireAnalyticsEvent({
+      action: ACTION.RENDERED,
+      actionSubject: ACTION_SUBJECT.EXTENSION_AS_INLINE,
+      actionSubjectId: ACTION_SUBJECT_ID.EXTENSION_BODIED,
+      attributes: {
+        extensionKey: nodeRef.current.extensionKey,
+        extensionType: nodeRef.current.extensionType
+      },
+      eventType: EVENT_TYPE.OPERATIONAL
+    });
+  }, [fireAnalyticsEvent]);
+  return null;
+};
 export var renderExtension = function renderExtension(content, layout) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var removeOverflow = arguments.length > 3 ? arguments[3] : undefined;
@@ -51,10 +74,11 @@ export var renderExtension = function renderExtension(content, layout) {
   var overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
 
   // by default, we assume the extension is at top level, (direct child of doc node)
-  var _ref = options || {},
-    _ref$isTopLevel = _ref.isTopLevel,
-    isTopLevel = _ref$isTopLevel === void 0 ? true : _ref$isTopLevel,
-    rendererAppearance = _ref.rendererAppearance;
+  var _ref2 = options || {},
+    _ref2$isTopLevel = _ref2.isTopLevel,
+    isTopLevel = _ref2$isTopLevel === void 0 ? true : _ref2$isTopLevel,
+    rendererAppearance = _ref2.rendererAppearance,
+    fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
   // we should only use custom layout for full-page appearance
   var canUseCustomLayout = expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
   var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
@@ -69,6 +93,10 @@ export var renderExtension = function renderExtension(content, layout) {
   var extensionHeight = nodeHeight || viewportSize;
   var isInline = (shouldDisplayExtensionAsInline === null || shouldDisplayExtensionAsInline === void 0 ? void 0 : shouldDisplayExtensionAsInline(node)) && expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true);
   var inlineClassName = isInline ? RendererCssClassName.EXTENSION_AS_INLINE : '';
+  var asInlineAnalytics = isInline && fireAnalyticsEvent && node && fg('platform_editor_render_inline_extension_analytics') ? jsx(FireExtensionAsInlineAnalytics, {
+    fireAnalyticsEvent: fireAnalyticsEvent,
+    node: node
+  }) : null;
   if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
     var extensionDiv = jsx("div", {
       ref: options.handleRef
@@ -92,14 +120,14 @@ export var renderExtension = function renderExtension(content, layout) {
       ,
       className: "".concat(RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
       css: [!isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
-    }, content));
+    }, asInlineAnalytics, content));
     return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
     }, extensionDiv) : extensionDiv;
   }
-  return jsx(WidthConsumer, null, function (_ref2) {
-    var width = _ref2.width;
+  return jsx(WidthConsumer, null, function (_ref3) {
+    var width = _ref3.width;
     var extensionDiv = jsx("div", {
       ref: options.handleRef
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -121,7 +149,7 @@ export var renderExtension = function renderExtension(content, layout) {
       ,
       className: "".concat(RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
       css: [!isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
-    }, content));
+    }, asInlineAnalytics, content));
     return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
@@ -146,8 +174,8 @@ var Extension = function Extension(props) {
   // eslint-disable-next-line react/jsx-props-no-spreading
   , _extends({}, props, {
     type: "extension"
-  }), function (_ref3) {
-    var result = _ref3.result;
+  }), function (_ref4) {
+    var result = _ref4.result;
     try {
       // Return the result directly if it's a valid JSX.Element
       if (result && /*#__PURE__*/React.isValidElement(result)) {

package/dist/esm/react/nodes/panel-compiled.js

@@ -29,7 +29,7 @@ var panelHasNoIconStyles = null;
 var panelNestedIconStyles = null;
 var nestedPanelStyles = null;
 var panelCustomBackground = null;
-export var PanelStyledCompiled = function PanelStyledCompiled(_ref) {
+var PanelStyledCompiled = function PanelStyledCompiled(_ref) {
   var backgroundColor = _ref.backgroundColor,
     children = _ref.children,
     className = _ref.className,
@@ -50,4 +50,5 @@ export var PanelStyledCompiled = function PanelStyledCompiled(_ref) {
     })
   }), children);
 };
+export { PanelStyledCompiled };
 PanelStyledCompiled.displayName = 'PanelStyledCompiled';

package/dist/esm/react/nodes/panel-emotion.js

@@ -13,7 +13,7 @@ var _excluded = ["backgroundColor", "hasIcon"];
  */
 import React from 'react';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration; `jsx` is used as the JSX pragma (see @jsx jsx above) so must be a value import
 import { css, jsx } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
@@ -160,7 +160,7 @@ var panelCustomBackground = css({
     }
   }
 });
-export var PanelStyledEmotion = function PanelStyledEmotion(_ref) {
+var PanelStyledEmotion = function PanelStyledEmotion(_ref) {
   var backgroundColor = _ref.backgroundColor,
     hasIcon = _ref.hasIcon,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -176,4 +176,5 @@ export var PanelStyledEmotion = function PanelStyledEmotion(_ref) {
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props), props.children);
 };
+export { PanelStyledEmotion };
 PanelStyledEmotion.displayName = 'PanelStyledEmotion';

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

@@ -1,4 +1,4 @@
-import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, OperationalAEP, ExperienceEventPayload, TABLE_ACTION, SyncedBlockSSRErrorAEP } from '@atlaskit/editor-common/analytics';
+import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, OperationalAEP, ExperienceEventPayload, TABLE_ACTION, SyncedBlockSSRErrorAEP, ExtensionType } 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';
@@ -172,6 +172,10 @@ type ReferenceSyncedBlockUpdateErrorAEP = OperationalAEP<ACTION.ERROR, ACTION_SU
     error: string;
     resourceId?: 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 | NativeEmbedsTransformedAEP | MediaRenderErrorEvent | SyncedBlockFetchErrorAEP | SyncedBlockGetSourceInfoErrorAEP | SyncedBlockSSRErrorAEP | ReferenceSyncedBlockUpdateErrorAEP | SyncedBlockFetchSuccessAEP | ExperienceEventPayload;
+type ExtensionRenderedAsInlineAEP = OperationalAEP<ACTION.RENDERED, ACTION_SUBJECT.EXTENSION_AS_INLINE, ExtensionType, {
+    extensionKey: string;
+    extensionType: 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 | NativeEmbedsTransformedAEP | MediaRenderErrorEvent | SyncedBlockFetchErrorAEP | SyncedBlockGetSourceInfoErrorAEP | SyncedBlockSSRErrorAEP | ReferenceSyncedBlockUpdateErrorAEP | SyncedBlockFetchSuccessAEP | ExperienceEventPayload | ExtensionRenderedAsInlineAEP;
 export type FireAnalyticsCallback = <T = void>(payload: AnalyticsEventPayload<T>) => void | undefined;
 export {};

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

@@ -6,12 +6,14 @@ import type { ExtensionLayout } from '@atlaskit/adf-schema';
 import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { RendererAppearance } from '../../ui/Renderer/types';
+import type { AnalyticsEventPayload } from '../../analytics/events';
 interface Props {
     content?: any;
     extensionHandlers?: ExtensionHandlers;
     extensionKey: string;
     extensionType: string;
     extensionViewportSizes?: ExtensionViewportSize[];
+    fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
     layout?: ExtensionLayout;
     localId?: string;
     marks?: PMMark[];

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

@@ -10,6 +10,7 @@ import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/e
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { OverflowShadowProps, OverflowShadowState, ShadowObserver } from '@atlaskit/editor-common/ui';
 import type { RendererAppearance } from '../../ui/Renderer/types';
+import type { AnalyticsEventPayload } from '../../analytics/events';
 interface Props {
     extensionHandlers?: ExtensionHandlers;
     extensionKey: string;
@@ -32,6 +33,7 @@ type AllOrNone<T> = T | {
     [K in keyof T]?: never;
 };
 type RenderExtensionOptions = {
+    fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
     isTopLevel?: boolean;
     rendererAppearance?: RendererAppearance;
 } & AllOrNone<OverflowShadowProps>;

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

@@ -1,4 +1,4 @@
-import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, OperationalAEP, ExperienceEventPayload, TABLE_ACTION, SyncedBlockSSRErrorAEP } from '@atlaskit/editor-common/analytics';
+import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, OperationalAEP, ExperienceEventPayload, TABLE_ACTION, SyncedBlockSSRErrorAEP, ExtensionType } 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';
@@ -172,6 +172,10 @@ type ReferenceSyncedBlockUpdateErrorAEP = OperationalAEP<ACTION.ERROR, ACTION_SU
     error: string;
     resourceId?: 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 | NativeEmbedsTransformedAEP | MediaRenderErrorEvent | SyncedBlockFetchErrorAEP | SyncedBlockGetSourceInfoErrorAEP | SyncedBlockSSRErrorAEP | ReferenceSyncedBlockUpdateErrorAEP | SyncedBlockFetchSuccessAEP | ExperienceEventPayload;
+type ExtensionRenderedAsInlineAEP = OperationalAEP<ACTION.RENDERED, ACTION_SUBJECT.EXTENSION_AS_INLINE, ExtensionType, {
+    extensionKey: string;
+    extensionType: 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 | NativeEmbedsTransformedAEP | MediaRenderErrorEvent | SyncedBlockFetchErrorAEP | SyncedBlockGetSourceInfoErrorAEP | SyncedBlockSSRErrorAEP | ReferenceSyncedBlockUpdateErrorAEP | SyncedBlockFetchSuccessAEP | ExperienceEventPayload | ExtensionRenderedAsInlineAEP;
 export type FireAnalyticsCallback = <T = void>(payload: AnalyticsEventPayload<T>) => void | undefined;
 export {};

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

@@ -6,12 +6,14 @@ import type { ExtensionLayout } from '@atlaskit/adf-schema';
 import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { RendererAppearance } from '../../ui/Renderer/types';
+import type { AnalyticsEventPayload } from '../../analytics/events';
 interface Props {
     content?: any;
     extensionHandlers?: ExtensionHandlers;
     extensionKey: string;
     extensionType: string;
     extensionViewportSizes?: ExtensionViewportSize[];
+    fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
     layout?: ExtensionLayout;
     localId?: string;
     marks?: PMMark[];

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

@@ -10,6 +10,7 @@ import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/e
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { OverflowShadowProps, OverflowShadowState, ShadowObserver } from '@atlaskit/editor-common/ui';
 import type { RendererAppearance } from '../../ui/Renderer/types';
+import type { AnalyticsEventPayload } from '../../analytics/events';
 interface Props {
     extensionHandlers?: ExtensionHandlers;
     extensionKey: string;
@@ -32,6 +33,7 @@ type AllOrNone<T> = T | {
     [K in keyof T]?: never;
 };
 type RenderExtensionOptions = {
+    fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
     isTopLevel?: boolean;
     rendererAppearance?: RendererAppearance;
 } & AllOrNone<OverflowShadowProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "130.2.18",
+	"version": "130.3.1",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,21 +30,21 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.7.0",
-		"@atlaskit/adf-utils": "^19.28.0",
+		"@atlaskit/adf-schema": "^52.9.0",
+		"@atlaskit/adf-utils": "^19.29.0",
 		"@atlaskit/afm-i18n-platform-editor-renderer": "2.10.0",
 		"@atlaskit/analytics-listeners": "^10.0.0",
 		"@atlaskit/analytics-namespaced-context": "^7.2.0",
 		"@atlaskit/analytics-next": "^11.2.0",
 		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/button": "^23.11.0",
-		"@atlaskit/code": "^17.4.0",
+		"@atlaskit/code": "^17.5.0",
 		"@atlaskit/editor-json-transformer": "^8.31.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-smart-link-draggable": "^0.5.0",
-		"@atlaskit/emoji": "^70.2.0",
+		"@atlaskit/emoji": "^70.3.0",
 		"@atlaskit/feature-gate-js-client": "^5.5.0",
 		"@atlaskit/icon": "^34.3.0",
 		"@atlaskit/link": "^3.4.0",
@@ -62,14 +62,14 @@
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
 		"@atlaskit/react-ufo": "^5.18.0",
-		"@atlaskit/smart-card": "^44.3.0",
+		"@atlaskit/smart-card": "^44.5.0",
 		"@atlaskit/status": "^4.0.0",
 		"@atlaskit/task-decision": "^20.0.0",
 		"@atlaskit/theme": "^23.2.0",
-		"@atlaskit/tmp-editor-statsig": "^74.0.0",
+		"@atlaskit/tmp-editor-statsig": "^74.7.0",
 		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/tooltip": "^21.2.0",
-		"@atlaskit/visually-hidden": "^3.0.0",
+		"@atlaskit/tooltip": "^22.0.0",
+		"@atlaskit/visually-hidden": "^3.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"@emotion/react": "^11.7.1",
@@ -80,7 +80,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.15.0",
+		"@atlaskit/editor-common": "^114.18.0",
 		"@atlaskit/link-provider": "^4.3.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -99,8 +99,8 @@
 		"@atlaskit/media-test-helpers": "^41.0.0",
 		"@atlaskit/mention": "^25.0.0",
 		"@atlaskit/modal-dialog": "^14.18.0",
-		"@atlaskit/navigation-system": "^9.0.0",
-		"@atlaskit/profilecard": "^25.1.0",
+		"@atlaskit/navigation-system": "^9.1.0",
+		"@atlaskit/profilecard": "^25.2.0",
 		"@atlaskit/side-nav-items": "^1.13.0",
 		"@atlaskit/util-data-test": "^18.5.0",
 		"@atlassian/a11y-jest-testing": "^0.11.0",
@@ -140,6 +140,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_editor_render_inline_extension_analytics": {
+			"type": "boolean"
+		},
 		"confluence_frontend_fix_date_hydration_error": {
 			"type": "boolean"
 		},

package/renderer.docs.tsx

@@ -5,7 +5,6 @@
 
 import path from 'path';
 
-
 import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
 
 import packageJson from './package.json';
@@ -35,11 +34,31 @@ const documentation: ComponentStructuredContentSource[] = [
 		keywords: ['editor', 'renderer', 'atlaskit'],
 		categories: ['editor'],
 		examples: [
-			{ name: 'Basic', description: 'Basic ReactRenderer with ADF document.', source: path.resolve(packagePath, './examples/0-basic.tsx') },
-			{ name: 'Full page', description: 'Full-page renderer with full ADF.', source: path.resolve(packagePath, './examples/0-full-page.tsx') },
-			{ name: 'With providers', description: 'Renderer with media and other providers.', source: path.resolve(packagePath, './examples/1-with-providers.tsx') },
-			{ name: 'Full page with media caption', description: 'Renderer with media and captions.', source: path.resolve(packagePath, './examples/0-full-page-with-media-caption.tsx') },
-			{ name: 'Column layout', description: 'Renderer with column layout.', source: path.resolve(packagePath, './examples/10-column-layout.tsx') },
+			{
+				name: 'Basic',
+				description: 'Basic ReactRenderer with ADF document.',
+				source: path.resolve(packagePath, './examples/0-basic.tsx'),
+			},
+			{
+				name: 'Full page',
+				description: 'Full-page renderer with full ADF.',
+				source: path.resolve(packagePath, './examples/0-full-page.tsx'),
+			},
+			{
+				name: 'With providers',
+				description: 'Renderer with media and other providers.',
+				source: path.resolve(packagePath, './examples/1-with-providers.tsx'),
+			},
+			{
+				name: 'Full page with media caption',
+				description: 'Renderer with media and captions.',
+				source: path.resolve(packagePath, './examples/0-full-page-with-media-caption.tsx'),
+			},
+			{
+				name: 'Column layout',
+				description: 'Renderer with column layout.',
+				source: path.resolve(packagePath, './examples/10-column-layout.tsx'),
+			},
 		],
 	},
 ];