@atlaskit/renderer 135.0.11 → 135.1.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/renderer
 
+## 135.1.0
+
+### Minor Changes
+
+- [`13e86ff9f1588`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/13e86ff9f1588) -
+  [ux] Display avatars for mention nodes.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 135.0.11
 
 ### Patch Changes

package/compass.yml

@@ -1,7 +1,7 @@
 configVersion: 1
 id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/c73df476-7db7-4d73-a890-6b5f5da75d92
 name: '@atlaskit/renderer'
-ownerId: ari:cloud:identity::team/og-da2205cb-ea5e-4059-9215-30c9b26c971f # Fabric - Editor
+ownerId: ari:cloud:identity::team/cf6a670b-5252-4c68-a769-9207de366beb # Editor Developers
 labels:
   - platform-code
   - platform-afm
@@ -23,7 +23,7 @@ links:
 customFields:
   - name: Department
     type: text
-    value: Eng - Editor Frontend Platform
+    value: Editor Developers
   - name: Trusted Reviewer Teams
     type: text
     value: ari:cloud:identity::team/cf6a670b-5252-4c68-a769-9207de366beb

package/dist/cjs/react/index.js

@@ -212,6 +212,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     this.allowAnnotations = Boolean(init.allowAnnotations);
     this.surroundTextNodesWithTextWrapper = Boolean(init.surroundTextNodesWithTextWrapper);
     this.media = init.media;
+    this.mentionNodeDataProvider = init.mentionNodeDataProvider;
     this.emojiResourceConfig = init.emojiResourceConfig;
     this.smartLinks = init.smartLinks;
     this.extensionViewportSizes = init.extensionViewportSizes;
@@ -252,6 +253,8 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
           return this.getMediaProps(node, path);
         case 'emoji':
           return this.getEmojiProps(node, path);
+        case 'mention':
+          return this.getMentionProps(node, path);
         case 'extension':
         case 'bodiedExtension':
           return this.getExtensionProps(node, path);
@@ -563,6 +566,14 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         resourceConfig: this.emojiResourceConfig
       });
     }
+  }, {
+    key: "getMentionProps",
+    value: function getMentionProps(node) {
+      var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
+        mentionNodeDataProvider: this.mentionNodeDataProvider
+      });
+    }
   }, {
     key: "getEmbedCardProps",
     value: function getEmbedCardProps(node) {

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

@@ -13,6 +13,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var _default_1 = /*#__PURE__*/(0, _react.memo)(function MentionItem(props) {
   var eventHandlers = props.eventHandlers,
     id = props.id,
+    mentionNodeDataProvider = props.mentionNodeDataProvider,
     providers = props.providers,
     text = props.text,
     accessLevel = props.accessLevel,
@@ -30,6 +31,7 @@ var _default_1 = /*#__PURE__*/(0, _react.memo)(function MentionItem(props) {
         accessLevel: accessLevel,
         providers: providers,
         localId: localId,
+        mentionNodeDataProvider: mentionNodeDataProvider,
         userType: userType,
         eventHandlers: eventHandlers && eventHandlers.mention
       }))
@@ -41,6 +43,7 @@ var _default_1 = /*#__PURE__*/(0, _react.memo)(function MentionItem(props) {
     accessLevel: accessLevel,
     providers: providers,
     localId: localId,
+    mentionNodeDataProvider: mentionNodeDataProvider,
     userType: userType,
     eventHandlers: eventHandlers && eventHandlers.mention
   });

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

@@ -73,7 +73,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "135.0.10";
+var packageVersion = "135.0.11";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -261,6 +261,7 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
       allowMediaLinking: props.media && props.media.allowLinking,
       surroundTextNodesWithTextWrapper: allowAnnotationsDraftMode,
       media: props.media,
+      mentionNodeDataProvider: props.mentionNodeDataProvider,
       emojiResourceConfig: props.emojiResourceConfig,
       smartLinks: props.smartLinks,
       extensionViewportSizes: props.extensionViewportSizes,

package/dist/es2019/react/index.js

@@ -199,6 +199,7 @@ export default class ReactSerializer {
     this.allowAnnotations = Boolean(init.allowAnnotations);
     this.surroundTextNodesWithTextWrapper = Boolean(init.surroundTextNodesWithTextWrapper);
     this.media = init.media;
+    this.mentionNodeDataProvider = init.mentionNodeDataProvider;
     this.emojiResourceConfig = init.emojiResourceConfig;
     this.smartLinks = init.smartLinks;
     this.extensionViewportSizes = init.extensionViewportSizes;
@@ -235,6 +236,8 @@ export default class ReactSerializer {
         return this.getMediaProps(node, path);
       case 'emoji':
         return this.getEmojiProps(node, path);
+      case 'mention':
+        return this.getMentionProps(node, path);
       case 'extension':
       case 'bodiedExtension':
         return this.getExtensionProps(node, path);
@@ -509,6 +512,12 @@ export default class ReactSerializer {
       resourceConfig: this.emojiResourceConfig
     };
   }
+  getMentionProps(node, path = []) {
+    return {
+      ...this.getProps(node, path),
+      mentionNodeDataProvider: this.mentionNodeDataProvider
+    };
+  }
   getEmbedCardProps(node, path = []) {
     const isInsideOfBlockNode = insideBlockNode(path, node.type.schema);
     return {

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

@@ -6,6 +6,7 @@ const _default_1 = /*#__PURE__*/memo(function MentionItem(props) {
   const {
     eventHandlers,
     id,
+    mentionNodeDataProvider,
     providers,
     text,
     accessLevel,
@@ -24,6 +25,7 @@ const _default_1 = /*#__PURE__*/memo(function MentionItem(props) {
         accessLevel: accessLevel,
         providers: providers,
         localId: localId,
+        mentionNodeDataProvider: mentionNodeDataProvider,
         userType: userType,
         eventHandlers: eventHandlers && eventHandlers.mention
       }))
@@ -35,6 +37,7 @@ const _default_1 = /*#__PURE__*/memo(function MentionItem(props) {
     accessLevel: accessLevel,
     providers: providers,
     localId: localId,
+    mentionNodeDataProvider: mentionNodeDataProvider,
     userType: userType,
     eventHandlers: eventHandlers && eventHandlers.mention
   });

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

@@ -59,7 +59,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.1;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "135.0.10";
+const packageVersion = "135.0.11";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -253,6 +253,7 @@ export const RendererFunctionalComponent = props => {
       allowMediaLinking: props.media && props.media.allowLinking,
       surroundTextNodesWithTextWrapper: allowAnnotationsDraftMode,
       media: props.media,
+      mentionNodeDataProvider: props.mentionNodeDataProvider,
       emojiResourceConfig: props.emojiResourceConfig,
       smartLinks: props.smartLinks,
       extensionViewportSizes: props.extensionViewportSizes,

package/dist/esm/react/index.js

@@ -205,6 +205,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     this.allowAnnotations = Boolean(init.allowAnnotations);
     this.surroundTextNodesWithTextWrapper = Boolean(init.surroundTextNodesWithTextWrapper);
     this.media = init.media;
+    this.mentionNodeDataProvider = init.mentionNodeDataProvider;
     this.emojiResourceConfig = init.emojiResourceConfig;
     this.smartLinks = init.smartLinks;
     this.extensionViewportSizes = init.extensionViewportSizes;
@@ -245,6 +246,8 @@ var ReactSerializer = /*#__PURE__*/function () {
           return this.getMediaProps(node, path);
         case 'emoji':
           return this.getEmojiProps(node, path);
+        case 'mention':
+          return this.getMentionProps(node, path);
         case 'extension':
         case 'bodiedExtension':
           return this.getExtensionProps(node, path);
@@ -556,6 +559,14 @@ var ReactSerializer = /*#__PURE__*/function () {
         resourceConfig: this.emojiResourceConfig
       });
     }
+  }, {
+    key: "getMentionProps",
+    value: function getMentionProps(node) {
+      var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
+        mentionNodeDataProvider: this.mentionNodeDataProvider
+      });
+    }
   }, {
     key: "getEmbedCardProps",
     value: function getEmbedCardProps(node) {

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

@@ -5,6 +5,7 @@ import { useInlineAnnotationProps } from '../../ui/annotations/element/useInline
 var _default_1 = /*#__PURE__*/memo(function MentionItem(props) {
   var eventHandlers = props.eventHandlers,
     id = props.id,
+    mentionNodeDataProvider = props.mentionNodeDataProvider,
     providers = props.providers,
     text = props.text,
     accessLevel = props.accessLevel,
@@ -22,6 +23,7 @@ var _default_1 = /*#__PURE__*/memo(function MentionItem(props) {
         accessLevel: accessLevel,
         providers: providers,
         localId: localId,
+        mentionNodeDataProvider: mentionNodeDataProvider,
         userType: userType,
         eventHandlers: eventHandlers && eventHandlers.mention
       }))
@@ -33,6 +35,7 @@ var _default_1 = /*#__PURE__*/memo(function MentionItem(props) {
     accessLevel: accessLevel,
     providers: providers,
     localId: localId,
+    mentionNodeDataProvider: mentionNodeDataProvider,
     userType: userType,
     eventHandlers: eventHandlers && eventHandlers.mention
   });

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

@@ -64,7 +64,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "135.0.10";
+var packageVersion = "135.0.11";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -252,6 +252,7 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
       allowMediaLinking: props.media && props.media.allowLinking,
       surroundTextNodesWithTextWrapper: allowAnnotationsDraftMode,
       media: props.media,
+      mentionNodeDataProvider: props.mentionNodeDataProvider,
       emojiResourceConfig: props.emojiResourceConfig,
       smartLinks: props.smartLinks,
       extensionViewportSizes: props.extensionViewportSizes,

package/dist/types/react/index.d.ts

@@ -4,6 +4,7 @@ import type { AnalyticsEventPayload } from '../analytics/events';
 import type { Serializer } from '../serializer';
 import type { HeadingAnchorLinksProps, NodeComponentsProps, RendererAppearance, RendererContentMode, StickyHeaderConfig } from '../ui/Renderer/types';
 import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
+import type { MentionNodeDataProvider } from '@atlaskit/editor-common/mention';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
@@ -42,6 +43,7 @@ export interface ReactSerializerInit {
     isInsideOfInlineExtension?: boolean;
     isPresentational?: boolean;
     media?: MediaOptions;
+    mentionNodeDataProvider?: MentionNodeDataProvider;
     nodeComponents?: NodeComponentsProps;
     objectContext?: RendererContext;
     onSetLinkTarget?: (url: string) => '_blank' | undefined;
@@ -102,6 +104,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private startPos;
     private surroundTextNodesWithTextWrapper;
     private media?;
+    private mentionNodeDataProvider?;
     private emojiResourceConfig?;
     private smartLinks?;
     private extensionViewportSizes?;
@@ -139,6 +142,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private getMediaProps;
     private getExtensionProps;
     private getEmojiProps;
+    private getMentionProps;
     private getEmbedCardProps;
     private getBlockCardProps;
     private getInlineCardProps;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { MentionUserType } from '@atlaskit/adf-schema';
+import { type MentionNodeDataProvider } from '@atlaskit/editor-common/mention';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { MarkDataAttributes } from '../../ui/annotations/element/useInlineAnnotationProps';
@@ -8,6 +9,7 @@ export interface Props extends MarkDataAttributes {
     eventHandlers?: EventHandlers;
     id: string;
     localId?: string;
+    mentionNodeDataProvider?: MentionNodeDataProvider;
     providers?: ProviderFactory;
     text: string;
     userType?: MentionUserType;

package/dist/types/ui/renderer-props.d.ts

@@ -1,6 +1,8 @@
 import type { DocNode } from '@atlaskit/adf-schema';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
+import type { GetPMNodeHeight } from '@atlaskit/editor-common/extensibility';
+import type { MentionNodeDataProvider } from '@atlaskit/editor-common/mention';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { AnnotationProviders } from '@atlaskit/editor-common/types';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
@@ -8,7 +10,6 @@ import type { UnsupportedContentLevelsTracking } from '@atlaskit/editor-common/u
 import type { ADFStage } from '@atlaskit/editor-common/validator';
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
-import type { GetPMNodeHeight } from '@atlaskit/editor-common/extensibility';
 import type { ReactSerializerInit, RendererContext, Serializer } from '../';
 import type { TextHighlighter, ExtensionViewportSize } from '../react/types';
 import type { RenderOutputStat } from '../render-document';
@@ -155,6 +156,7 @@ export interface RendererProps {
     isTopLevelRenderer?: boolean;
     maxHeight?: number;
     media?: MediaOptions;
+    mentionNodeDataProvider?: MentionNodeDataProvider;
     nodeComponents?: NodeComponentsProps;
     noOpSSRInlineScript?: boolean;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "135.0.11",
+	"version": "135.1.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -69,7 +69,7 @@
 		"@atlaskit/status": "^5.8.0",
 		"@atlaskit/task-decision": "^21.8.0",
 		"@atlaskit/theme": "^28.0.0",
-		"@atlaskit/tmp-editor-statsig": "^147.0.0",
+		"@atlaskit/tmp-editor-statsig": "^147.1.0",
 		"@atlaskit/tokens": "^16.7.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
@@ -84,7 +84,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^118.10.0",
+		"@atlaskit/editor-common": "^118.12.0",
 		"@atlaskit/link-provider": "^5.3.0",
 		"@atlaskit/media-core": "^38.0.0",
 		"react": "^18.2.0",
@@ -102,7 +102,7 @@
 		"@atlaskit/media-core": "^38.0.0",
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
 		"@atlaskit/media-test-helpers": "^42.2.0",
-		"@atlaskit/mention": "^27.15.0",
+		"@atlaskit/mention": "^27.16.0",
 		"@atlaskit/modal-dialog": "^16.3.0",
 		"@atlaskit/navigation-system": "^10.14.0",
 		"@atlaskit/profilecard": "^26.17.0",