@atlaskit/renderer 148.1.0 → 149.0.0

package/dist/esm/ui/annotations/element/index.js

@@ -12,7 +12,8 @@ var MarkElement = function MarkElement(_ref) {
     children = _ref.children,
     dataAttributes = _ref.dataAttributes,
     id = _ref.id,
-    useBlockLevel = _ref.useBlockLevel;
+    useBlockLevel = _ref.useBlockLevel,
+    isExtension = _ref.isExtension;
   var updateSubscriber = useInlineCommentSubscriberContext();
   var states = useContext(InlineCommentsStateContext);
   var _useHasFocusEvent = useHasFocusEvent({
@@ -90,7 +91,8 @@ var MarkElement = function MarkElement(_ref) {
     hasFocus: hasFocus,
     isHovered: isHovered,
     state: states[id],
-    useBlockLevel: useBlockLevel
+    useBlockLevel: useBlockLevel,
+    isExtension: isExtension
   }, children);
 };
 export { MarkElement };

package/dist/esm/ui/annotations/element/mark.js

@@ -16,6 +16,7 @@ import { AnnotationMarkStates } from '@atlaskit/adf-schema/annotation';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { inlineCommentMessages } from '../../../messages';
 import { useAnnotationManagerDispatch, useAnnotationManagerState } from '../contexts/AnnotationManagerContext';
+import { ExtensionAnnotation } from './extension';
 var markStyles = css(_defineProperty({
   color: 'inherit',
   backgroundColor: 'unset',
@@ -120,7 +121,8 @@ export var MarkComponent = function MarkComponent(_ref) {
     hasFocus = _ref.hasFocus,
     isHovered = _ref.isHovered,
     onClick = _ref.onClick,
-    useBlockLevel = _ref.useBlockLevel;
+    useBlockLevel = _ref.useBlockLevel,
+    isExtension = _ref.isExtension;
   var intl = useIntl();
   var annotationIds = useMemo(function () {
     return _toConsumableArray(new Set([].concat(_toConsumableArray(annotationParentIds), [id])));
@@ -210,6 +212,14 @@ export var MarkComponent = function MarkComponent(_ref) {
   } : _objectSpread({
     'aria-details': annotationIds.join(', ')
   }, desktopAccessibilityAttributes);
+  if (isExtension && fg('cc_maui_annotations_on_extensions')) {
+    // The chart's badge owns interaction. Anchors only supply geometry and annotation state.
+    return jsx(ExtensionAnnotation, {
+      id: id,
+      dataAttributes: overriddenData,
+      markRef: id === currentSelectedAnnotationId ? markRef : undefined
+    });
+  }
   return jsx(useBlockLevel ? 'div' : 'mark', _objectSpread(_objectSpread(_objectSpread(_defineProperty({
     ref: id === currentSelectedAnnotationId ? markRef : undefined,
     id: id

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

@@ -29,7 +29,7 @@ export var AnnotationsPositionContext = /*#__PURE__*/React.createContext({
   startPos: 1
 });
 export var AnnotationsWrapperInner = function AnnotationsWrapperInner(props) {
-  var _providers$inlineComm, _providers$inlineComm2;
+  var _providers$inlineComm, _providers$inlineComm2, _providers$inlineComm3;
   var children = props.children,
     rendererRef = props.rendererRef,
     adfDocument = props.adfDocument,
@@ -47,6 +47,7 @@ export var AnnotationsWrapperInner = function AnnotationsWrapperInner(props) {
     value: inlineCommentAnnotationsState
   }, /*#__PURE__*/React.createElement(AnnotationRangeProvider, {
     allowCommentsOnMedia: (_providers$inlineComm = providers === null || providers === void 0 || (_providers$inlineComm2 = providers.inlineComment) === null || _providers$inlineComm2 === void 0 ? void 0 : _providers$inlineComm2.allowCommentsOnMedia) !== null && _providers$inlineComm !== void 0 ? _providers$inlineComm : false,
+    hasBlockNodeSupport: Boolean(providers === null || providers === void 0 || (_providers$inlineComm3 = providers.inlineComment) === null || _providers$inlineComm3 === void 0 ? void 0 : _providers$inlineComm3.isBlockNodeSupported),
     isNestedRender: isNestedRender
   }, /*#__PURE__*/React.createElement(AnnotationHoverContext, null, /*#__PURE__*/React.createElement(AnnotationsContextWrapper, {
     createAnalyticsEvent: createAnalyticsEvent,

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

@@ -71,6 +71,19 @@ export default class RendererActions implements RendererActionsOptions, Annotati
     annotate(range: Range, annotationId: string, _annotationType: 'inlineComment'): AnnotationActionResult;
     isValidAnnotationRange(range: Range | null): boolean;
     isRangeAnnotatable(range: Range | null): boolean;
+    /**
+     * A range only threatens a nested renderer's own document (e.g. a bodiedExtension's macro
+     * body, which renders its own nested `<Renderer>`) when it sits inside that nested renderer's
+     * `.ak-renderer-document`. Landing directly on the extension's own outer wrapper -- with no
+     * nested document in between -- must stay annotatable so the whole chart/extension can be
+     * targeted (MAUI-1256), rather than being rejected outright the way any range touching
+     * `.ak-renderer-extension` previously was.
+     *
+     * Behind `cc_maui_annotations_on_extensions` -- the same gate MAUI-1255 added for extension
+     * node-mark support -- to preserve the previous behaviour (reject anything touching
+     * `.ak-renderer-extension`) while the feature is off.
+     */
+    private isInsideNestedExtensionRenderer;
     /**
      * This is replaced by `isRangeAnnotatable`.
      *

package/dist/types/react/marks/annotation.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import type { MarkProps, AnnotationMarkMeta } from '../types';
 export declare const isAnnotationMark: (mark: Mark) => boolean;
-declare const AnnotationComponent: ({ id, annotationType, children, dataAttributes, annotationParentIds, allowAnnotations, useBlockLevel, isMediaInline, }: MarkProps<AnnotationMarkMeta>) => React.JSX.Element;
+declare const AnnotationComponent: ({ id, annotationType, children, dataAttributes, annotationParentIds, allowAnnotations, useBlockLevel, isExtension, isMediaInline, }: MarkProps<AnnotationMarkMeta>) => React.JSX.Element;
 export default AnnotationComponent;

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

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag React.Fragment
+ */
+import React from 'react';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
+type Props = React.PropsWithChildren<{
+    allowAnnotations?: boolean;
+    allowAnnotationsDraftMode?: boolean;
+    enabled?: boolean;
+    marks?: readonly Mark[];
+    startPos?: number;
+}>;
+/** Only node-aware provider-approved extensions receive comment visuals. */
+export declare const ExtensionComments: (props: Props) => React.JSX.Element;
+export {};

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

@@ -12,8 +12,14 @@ import type { AnalyticsEventPayload } from '../../analytics/events';
 import type { RendererAppearance } from '../../ui/Renderer/types';
 import type { RendererContext, ExtensionViewportSize } from '../types';
 interface Props {
+    allowAnnotations?: boolean;
+    allowAnnotationsDraftMode?: boolean;
+    dataAttributes?: {
+        'data-renderer-start-pos': number;
+    };
     extensionHandlers?: ExtensionHandlers;
     extensionKey: string;
+    extensionNode?: PMNode;
     extensionType: string;
     extensionViewportSizes?: ExtensionViewportSize[];
     /**
@@ -40,8 +46,14 @@ type AllOrNone<T> = T | {
     [K in keyof T]?: never;
 };
 type RenderExtensionOptions = {
+    dataAttributes?: Props['dataAttributes'];
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
+    isCommentTarget?: boolean;
     isTopLevel?: boolean;
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
     rendererAppearance?: RendererAppearance;
 } & AllOrNone<OverflowShadowProps>;
 export declare const renderExtension: (content: any, layout: ExtensionLayout, options?: RenderExtensionOptions, removeOverflow?: boolean, extensionId?: string, extensionViewportSizes?: ExtensionViewportSize[], nodeHeight?: string, localId?: string, shouldDisplayExtensionAsInline?: (extensionParams?: ExtensionParams<Parameters>) => boolean, node?: ExtensionParams<Parameters>, isInsideOfInlineExtension?: boolean) => React.JSX.Element;

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

@@ -79,6 +79,7 @@ export interface AnnotationMarkMeta extends MarkMeta {
     annotationParentIds: string[];
     annotationType: AnnotationTypes;
     id: AnnotationId;
+    isExtension?: boolean;
     isMediaInline?: boolean;
     useBlockLevel?: boolean;
 }

package/dist/types/ui/annotations/contexts/AnnotationRangeContext.d.ts

@@ -36,13 +36,15 @@ interface AnnotationRangeDispatchContext {
 }
 export declare const AnnotationRangeStateContext: React.Context<AnnotationRangeStateContext>;
 export declare const AnnotationRangeDispatchContext: React.Context<AnnotationRangeDispatchContext>;
-export declare const AnnotationRangeProviderInner: ({ children, allowCommentsOnMedia, }: {
+export declare const AnnotationRangeProviderInner: ({ children, allowCommentsOnMedia, hasBlockNodeSupport, }: {
     allowCommentsOnMedia?: boolean;
     children?: ReactNode;
+    hasBlockNodeSupport?: boolean;
 }) => React.JSX.Element;
-export declare const AnnotationRangeProvider: ({ children, allowCommentsOnMedia, isNestedRender, }: {
+export declare const AnnotationRangeProvider: ({ children, allowCommentsOnMedia, hasBlockNodeSupport, isNestedRender, }: {
     allowCommentsOnMedia?: boolean;
     children?: ReactNode;
+    hasBlockNodeSupport?: boolean;
     isNestedRender?: boolean;
 }) => React.JSX.Element;
 export declare const useAnnotationRangeState: () => AnnotationRangeStateContext;

package/dist/types/ui/annotations/element/extension.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { AnnotationDataAttributes } from '@atlaskit/adf-schema/annotation';
+/** Full-chart anchors for comment navigation, without wrapping or intercepting the iframe. */
+export declare const ExtensionAnnotation: ({ id, dataAttributes, markRef, }: {
+    dataAttributes: AnnotationDataAttributes & {
+        'data-block-mark'?: boolean;
+        'data-has-focus'?: boolean;
+        'data-is-hovered'?: boolean;
+        'data-renderer-mark'?: boolean;
+    };
+    id: string;
+    markRef?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/types/ui/annotations/element/index.d.ts

@@ -5,7 +5,8 @@ type MarkElementProps = React.PropsWithChildren<{
     annotationType: AnnotationTypes;
     dataAttributes: AnnotationDataAttributes;
     id: AnnotationId;
+    isExtension?: boolean;
     useBlockLevel?: boolean;
 }>;
-declare const MarkElement: ({ annotationParentIds, children, dataAttributes, id, useBlockLevel, }: MarkElementProps) => React.JSX.Element;
+declare const MarkElement: ({ annotationParentIds, children, dataAttributes, id, useBlockLevel, isExtension, }: MarkElementProps) => React.JSX.Element;
 export { MarkElement };

package/dist/types/ui/annotations/element/mark.d.ts

@@ -3,8 +3,7 @@
  * @jsx jsx
  */
 import type React from 'react';
-import { type SerializedStyles } from '@emotion/react';
-import type { AnnotationId, AnnotationDataAttributes, AnnotationTypes } from '@atlaskit/adf-schema/annotation';
+import type { AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema/annotation';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema/annotation';
 import type { OnAnnotationClickPayload } from '@atlaskit/editor-common/types';
 type MarkComponentProps = {
@@ -12,114 +11,11 @@ type MarkComponentProps = {
     dataAttributes: AnnotationDataAttributes;
     hasFocus: boolean;
     id: AnnotationId;
+    isExtension?: boolean;
     isHovered: boolean;
     onClick: (props: OnAnnotationClickPayload) => void;
     state: AnnotationMarkStates | null;
     useBlockLevel?: boolean;
 };
-export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, isHovered, onClick, useBlockLevel, }: React.PropsWithChildren<MarkComponentProps>) => React.ReactElement<{
-    'aria-disabled': boolean;
-    css?: (false | SerializedStyles)[] | undefined;
-    'data-id': AnnotationId;
-    'data-mark-annotation-state'?: AnnotationMarkStates;
-    'data-mark-annotation-type': AnnotationTypes;
-    'data-mark-type': string;
-    id: string;
-    ref: ((node: HTMLElement | null) => void) | undefined;
-    style?: {
-        '--ak-renderer-annotation-endmarker': string;
-        '--ak-renderer-annotation-startmarker': string;
-    } | undefined;
-} | {
-    'aria-disabled': boolean;
-    css?: (false | SerializedStyles)[] | undefined;
-    'data-has-focus': boolean;
-    'data-id': AnnotationId;
-    'data-is-hovered': boolean;
-    'data-mark-annotation-state': AnnotationMarkStates;
-    'data-mark-annotation-type': AnnotationTypes;
-    'data-mark-type': string;
-    id: string;
-    ref: ((node: HTMLElement | null) => void) | undefined;
-    style?: {
-        '--ak-renderer-annotation-endmarker': string;
-        '--ak-renderer-annotation-startmarker': string;
-    } | undefined;
-} | {
-    'aria-details': string;
-    'aria-disabled'?: undefined;
-    'aria-expanded'?: undefined;
-    css?: (false | SerializedStyles)[] | undefined;
-    'data-id': AnnotationId;
-    'data-mark-annotation-state'?: AnnotationMarkStates;
-    'data-mark-annotation-type': AnnotationTypes;
-    'data-mark-type': string;
-    id: string;
-    onKeyDown?: undefined;
-    ref: ((node: HTMLElement | null) => void) | undefined;
-    role?: undefined;
-    style?: {
-        '--ak-renderer-annotation-endmarker': string;
-        '--ak-renderer-annotation-startmarker': string;
-    } | undefined;
-    tabIndex?: undefined;
-} | {
-    'aria-details': string;
-    'aria-disabled'?: undefined;
-    'aria-expanded'?: undefined;
-    css?: (false | SerializedStyles)[] | undefined;
-    'data-has-focus': boolean;
-    'data-id': AnnotationId;
-    'data-is-hovered': boolean;
-    'data-mark-annotation-state': AnnotationMarkStates;
-    'data-mark-annotation-type': AnnotationTypes;
-    'data-mark-type': string;
-    id: string;
-    onKeyDown?: undefined;
-    ref: ((node: HTMLElement | null) => void) | undefined;
-    role?: undefined;
-    style?: {
-        '--ak-renderer-annotation-endmarker': string;
-        '--ak-renderer-annotation-startmarker': string;
-    } | undefined;
-    tabIndex?: undefined;
-} | {
-    'aria-details': string;
-    'aria-disabled'?: undefined;
-    'aria-expanded': boolean;
-    css?: (false | SerializedStyles)[] | undefined;
-    'data-id': AnnotationId;
-    'data-mark-annotation-state'?: AnnotationMarkStates;
-    'data-mark-annotation-type': AnnotationTypes;
-    'data-mark-type': string;
-    id: string;
-    onKeyDown: (evt: KeyboardEvent) => void;
-    ref: ((node: HTMLElement | null) => void) | undefined;
-    role: string;
-    style?: {
-        '--ak-renderer-annotation-endmarker': string;
-        '--ak-renderer-annotation-startmarker': string;
-    } | undefined;
-    tabIndex: number;
-} | {
-    'aria-details': string;
-    'aria-disabled'?: undefined;
-    'aria-expanded': boolean;
-    css?: (false | SerializedStyles)[] | undefined;
-    'data-has-focus': boolean;
-    'data-id': AnnotationId;
-    'data-is-hovered': boolean;
-    'data-mark-annotation-state': AnnotationMarkStates;
-    'data-mark-annotation-type': AnnotationTypes;
-    'data-mark-type': string;
-    id: string;
-    onKeyDown: (evt: KeyboardEvent) => void;
-    ref: ((node: HTMLElement | null) => void) | undefined;
-    role: string;
-    style?: {
-        '--ak-renderer-annotation-endmarker': string;
-        '--ak-renderer-annotation-startmarker': string;
-    } | undefined;
-    tabIndex: number;
-}>;
+export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, isHovered, onClick, useBlockLevel, isExtension, }: React.PropsWithChildren<MarkComponentProps>) => React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "148.1.0",
+	"version": "149.0.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -74,7 +74,7 @@
 		"@atlaskit/task-decision": "^21.12.0",
 		"@atlaskit/theme": "^28.2.0",
 		"@atlaskit/tmp-editor-statsig": "^227.0.0",
-		"@atlaskit/tokens": "^20.3.0",
+		"@atlaskit/tokens": "^20.4.0",
 		"@atlaskit/tooltip": "^24.4.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -88,7 +88,7 @@
 		"uuid": "^11.1.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^129.1.0",
+		"@atlaskit/editor-common": "^130.0.0",
 		"@atlaskit/link-provider": "^6.0.0",
 		"@atlaskit/media-core": "^39.0.0",
 		"react": "^18.2.0 || ^19.2.0",
@@ -100,7 +100,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/analytics-gas-types": "^6.2.0",
 		"@atlaskit/checkbox": "^19.3.0",
-		"@atlaskit/editor-plugin-media": "^27.0.0",
+		"@atlaskit/editor-plugin-media": "^28.0.0",
 		"@atlaskit/editor-test-helpers": "workspace:^",
 		"@atlaskit/inline-edit": "^16.4.0",
 		"@atlaskit/json-ld-types": "^2.0.0",