npm - @azure/communication-react - Versions diffs - 1.22.0-alpha-202412040017 → 1.22.0-beta.1 - Mend

@azure/communication-react 1.22.0-alpha-202412040017 → 1.22.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1178) hide show

package/dist/dist-esm/react-components/src/components/ReactionButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ReactionButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ReactionButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,OAAO,EACP,aAAa,EACb,SAAS,EAGT,WAAW,EACX,KAAK,EACL,WAAW,EACX,QAAQ,EACT,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EACL,WAAW,EACX,2BAA2B,EAC3B,oBAAoB,EACpB,wBAAwB,EACxB,wBAAwB,EACzB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAuDlF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;;IACxE,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC;IACzD,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IACvD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAC3C,MAAM,YAAY,GAAG,GAAgB,EAAE,CAAC,CACtC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,oBAAoB,GAAG,CACnF,CAAC;IAEF,MAAM,MAAM,GAA6B,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC;IAC7F,MAAM,kBAAkB,GAAoC,IAAI,GAAG,CAAC;QAClE,CAAC,MAAM,EAAE,OAAO,CAAC,0BAA0B,CAAC;QAC5C,CAAC,OAAO,EAAE,OAAO,CAAC,2BAA2B,CAAC;QAC9C,CAAC,UAAU,EAAE,OAAO,CAAC,8BAA8B,CAAC;QACpD,CAAC,OAAO,EAAE,OAAO,CAAC,2BAA2B,CAAC;QAC9C,CAAC,WAAW,EAAE,OAAO,CAAC,+BAA+B,CAAC;KACvD,CAAC,CAAC;IACH,MAAM,aAAa,GAAoC,IAAI,GAAG,CAAC;QAC7D,CAAC,MAAM,EAAE,MAAA,KAAK,CAAC,iBAAiB,CAAC,YAAY,0CAAE,GAAG,CAAC;QACnD,CAAC,OAAO,EAAE,MAAA,KAAK,CAAC,iBAAiB,CAAC,aAAa,0CAAE,GAAG,CAAC;QACrD,CAAC,UAAU,EAAE,MAAA,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,0CAAE,GAAG,CAAC;QAC3D,CAAC,OAAO,EAAE,MAAA,KAAK,CAAC,iBAAiB,CAAC,aAAa,0CAAE,GAAG,CAAC;QACrD,CAAC,WAAW,EAAE,MAAA,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,0CAAE,GAAG,CAAC;KAC9D,CAAC,CAAC;IAEH,MAAM,YAAY,GAAmC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;IAElH,MAAM,YAAY,GAAG;QACnB,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IAEF,MAAM,wBAAwB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9D,MAAM,iBAAiB,GAAG,MAAM,CAAU,IAAI,CAAC,CAAC;IAEhD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhE,OAAO,CACL,oBAAC,KAAK;QACH,gBAAgB,IAAI,CACnB,oBAAC,OAAO,kBACK,mBAAmB,EAC9B,aAAa,EAAE,KAAK,EACpB,MAAM,EAAE,2BAA2B,EACnC,MAAM,EAAE,wBAAwB,CAAC,OAAO,EACxC,SAAS,EAAE,GAAG,EAAE;;gBACd,MAAA,iBAAiB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBACnC,mBAAmB,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC;YAED,oBAAC,SAAS,IAAC,kBAAkB,QAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;gBACrD,oBAAC,KAAK,IAAC,UAAU,QAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,IAC3C,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;oBAC3B,MAAM,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;oBAC7C,MAAM,UAAU,GACd,KAAK,CAAC,iBAAiB,KAAK,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACjG,MAAM,SAAS,GAAG,WAAW,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC;oBACvF,OAAO,CACL,oBAAC,WAAW,IACV,GAAG,EAAE,KAAK,gBACE,KAAK,EACjB,MAAM,EAAE,KAAK,CAAC,cAAc,EAC5B,OAAO,EAAE,kBAAkB,CAAC,GAAG,CAAC,KAAK,CAAC,EACtC,MAAM,EAAE,wBAAwB,EAAE,EAClC,YAAY,oBAAO,YAAY;wBAE/B,oBAAC,aAAa,IACZ,IAAI,EAAC,UAAU,EACf,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,GAAG,EAAE;;gCACZ,KAAK,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;gCAC7B,MAAA,iBAAiB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gCACnC,mBAAmB,CAAC,KAAK,CAAC,CAAC;4BAC7B,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,wBAAwB,gBACpB,kBAAkB,CAAC,GAAG,CAAC,KAAK,CAAC,sBACvB,OAAO,CAAC,cAAc,GACzB,CACL,CACf,CAAC;gBACJ,CAAC,CAAC,CACI,CACE,CACJ,CACX;QACD,6BAAK,GAAG,EAAE,wBAAwB;YAChC,oBAAC,gBAAgB,oBACX,KAAK,IACT,YAAY,EAAE,iBAAiB,EAC/B,SAAS,EAAE,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAC5C,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,CAAC,gBAAgB,CAAC,EACrD,YAAY,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,YAAY,EAChD,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,qBAAqB,EACjD,gBAAgB,EAAE,GAAG,EAAE,CAAC,gCAAO,EAC/B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,OAAO,CAAC,SAAS,IAC5B,CACE,CACA,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n Callout,\n DefaultButton,\n FocusZone,\n IButton,\n ICalloutContentStyles,\n mergeStyles,\n Stack,\n TooltipHost,\n useTheme\n} from '@fluentui/react';\nimport React, { useRef, useState } from 'react';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { useLocale } from '../localization';\nimport {\n emojiStyles,\n reactionButtonCalloutStyles,\n reactionButtonStyles,\n reactionItemButtonStyles,\n reactionToolTipHostStyle\n} from './styles/ReactionButton.styles';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { ReactionResources } from '..';\nimport { getEmojiFrameCount } from './VideoGallery/utils/videoGalleryLayoutUtils';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/*\n Reactions types for the Reaction button\n * @public\n /\nexport type ReactionButtonReaction = 'like' \| 'heart' \| 'applause' \| 'laugh' \| 'surprised';\n\n/\n Props for {@link ReactionButton}.\n \n @public\n /\nexport interface ReactionButtonProps extends ControlBarButtonProps {\n /\n Optional strings to override in component\n /\n strings?: Partial<ReactionButtonStrings>;\n /\n Click event to send reaction to meeting\n /\n onReactionClick: (reaction: ReactionButtonReaction) => Promise<void>;\n /\n Reaction resource locator and parameters\n /\n reactionResources: ReactionResources;\n}\n\n/\n Strings of {@link ReactionButton} that can be overridden.\n \n @public\n /\nexport interface ReactionButtonStrings {\n /* Label of the button. /\n label: string;\n /* Aria label for reaction button accessibility announcement /\n ariaLabel: string;\n /* Tooltip content when the button is disabled. /\n tooltipDisabledContent?: string;\n /* Tooltip content when the button is enabled. /\n tooltipContent?: string;\n /* Tooltip content of like reaction button. /\n likeReactionTooltipContent?: string;\n /* Tooltip content of heart reaction button. /\n heartReactionTooltipContent?: string;\n /* Tooltip content of clap reaction button. /\n applauseReactionTooltipContent?: string;\n /* Tooltip content of laugh reaction button. /\n laughReactionTooltipContent?: string;\n /* Tooltip content of surprised reaction button. /\n surprisedReactionTooltipContent?: string;\n}\n\n/\n A button to send reactions.\n \n Can be used with {@link ControlBar}.\n \n @public\n */\nexport const ReactionButton = (props: ReactionButtonProps): JSX.Element => {\n const localeStrings = useLocale().strings.reactionButton;\n const strings = { ...localeStrings, ...props.strings };\n const theme = useTheme();\n const styles = reactionButtonStyles(theme);\n const onRenderIcon = (): JSX.Element => (\n <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ReactionButtonIcon\" />\n );\n\n const emojis: ReactionButtonReaction[] = ['like', 'heart', 'applause', 'laugh', 'surprised'];\n const emojiButtonTooltip: Map<string, string \| undefined> = new Map([\n ['like', strings.likeReactionTooltipContent],\n ['heart', strings.heartReactionTooltipContent],\n ['applause', strings.applauseReactionTooltipContent],\n ['laugh', strings.laughReactionTooltipContent],\n ['surprised', strings.surprisedReactionTooltipContent]\n ]);\n const emojiResource: Map<string, string \| undefined> = new Map([\n ['like', props.reactionResources.likeReaction?.url],\n ['heart', props.reactionResources.heartReaction?.url],\n ['applause', props.reactionResources.applauseReaction?.url],\n ['laugh', props.reactionResources.laughReaction?.url],\n ['surprised', props.reactionResources.surprisedReaction?.url]\n ]);\n\n const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n const calloutProps = {\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n\n const reactionButtonCalloutRef = useRef<HTMLDivElement>(null);\n const reactionButtonRef = useRef<IButton>(null);\n\n const [calloutIsVisible, setCalloutIsVisible] = useState(false);\n\n return (\n <Stack>\n {calloutIsVisible && (\n <Callout\n data-ui-id=\"reaction-sub-menu\"\n isBeakVisible={false}\n styles={reactionButtonCalloutStyles}\n target={reactionButtonCalloutRef.current}\n onDismiss={() => {\n reactionButtonRef.current?.focus();\n setCalloutIsVisible(false);\n }}\n >\n <FocusZone shouldFocusOnMount style={{ height: '100%' }}>\n <Stack horizontal style={{ height: 'inherit' }}>\n {emojis.map((emoji, index) => {\n const resourceUrl = emojiResource.get(emoji);\n const frameCount: number =\n props.reactionResources !== undefined ? getEmojiFrameCount(emoji, props.reactionResources) : 0;\n const classname = mergeStyles(emojiStyles(resourceUrl ? resourceUrl : '', frameCount));\n return (\n <TooltipHost\n key={index}\n data-ui-id={index}\n hidden={props.disableTooltip}\n content={emojiButtonTooltip.get(emoji)}\n styles={reactionToolTipHostStyle()}\n calloutProps={{ ...calloutProps }}\n >\n <DefaultButton\n role=\"menuitem\"\n key={index}\n onClick={() => {\n props.onReactionClick(emoji);\n reactionButtonRef.current?.focus();\n setCalloutIsVisible(false);\n }}\n className={classname}\n styles={reactionItemButtonStyles}\n aria-label={emojiButtonTooltip.get(emoji)}\n aria-description={strings.tooltipContent}\n ></DefaultButton>\n </TooltipHost>\n );\n })}\n </Stack>\n </FocusZone>\n </Callout>\n )}\n <div ref={reactionButtonCalloutRef}>\n <ControlBarButton\n {...props}\n componentRef={reactionButtonRef}\n className={mergeStyles(styles, props.styles)}\n onClick={() => setCalloutIsVisible(!calloutIsVisible)}\n onRenderIcon={props.onRenderIcon ?? onRenderIcon}\n strings={strings}\n split={true}\n labelKey={props.labelKey ?? 'reactionButtonLabel'}\n onRenderMenuIcon={() => <div />}\n disabled={props.disabled}\n ariaLabel={strings.ariaLabel}\n />\n </div>\n </Stack>\n );\n};\n"]}
1	+ {"version":3,"file":"ReactionButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ReactionButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Callout, DefaultButton, FocusZone, IButton, ICalloutContentStyles, mergeStyles, Stack, TooltipHost, useTheme } from '@fluentui/react';\nimport React, { useRef, useState } from 'react';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { useLocale } from '../localization';\nimport { emojiStyles, reactionButtonCalloutStyles, reactionButtonStyles, reactionItemButtonStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { ReactionResources } from '..';\nimport { getEmojiFrameCount } from './VideoGallery/utils/videoGalleryLayoutUtils';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/*\n Reactions types for the Reaction button\n * @public\n /\nexport type ReactionButtonReaction = 'like' \| 'heart' \| 'applause' \| 'laugh' \| 'surprised';\n\n/\n Props for {@link ReactionButton}.\n \n @public\n /\nexport interface ReactionButtonProps extends ControlBarButtonProps {\n /\n Optional strings to override in component\n /\n strings?: Partial<ReactionButtonStrings>;\n /\n Click event to send reaction to meeting\n /\n onReactionClick: (reaction: ReactionButtonReaction) => Promise<void>;\n /\n Reaction resource locator and parameters\n /\n reactionResources: ReactionResources;\n}\n\n/\n Strings of {@link ReactionButton} that can be overridden.\n \n @public\n /\nexport interface ReactionButtonStrings {\n /* Label of the button. /\n label: string;\n /* Aria label for reaction button accessibility announcement /\n ariaLabel: string;\n /* Tooltip content when the button is disabled. /\n tooltipDisabledContent?: string;\n /* Tooltip content when the button is enabled. /\n tooltipContent?: string;\n /* Tooltip content of like reaction button. /\n likeReactionTooltipContent?: string;\n /* Tooltip content of heart reaction button. /\n heartReactionTooltipContent?: string;\n /* Tooltip content of clap reaction button. /\n applauseReactionTooltipContent?: string;\n /* Tooltip content of laugh reaction button. /\n laughReactionTooltipContent?: string;\n /* Tooltip content of surprised reaction button. /\n surprisedReactionTooltipContent?: string;\n}\n\n/\n A button to send reactions.\n \n Can be used with {@link ControlBar}.\n \n @public\n */\nexport const ReactionButton = (props: ReactionButtonProps): JSX.Element => {\n const localeStrings = useLocale().strings.reactionButton;\n const strings = {\n ...localeStrings,\n ...props.strings\n };\n const theme = useTheme();\n const styles = reactionButtonStyles(theme);\n const onRenderIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ReactionButtonIcon\" />;\n const emojis: ReactionButtonReaction[] = ['like', 'heart', 'applause', 'laugh', 'surprised'];\n const emojiButtonTooltip: Map<string, string \| undefined> = new Map([['like', strings.likeReactionTooltipContent], ['heart', strings.heartReactionTooltipContent], ['applause', strings.applauseReactionTooltipContent], ['laugh', strings.laughReactionTooltipContent], ['surprised', strings.surprisedReactionTooltipContent]]);\n const emojiResource: Map<string, string \| undefined> = new Map([['like', props.reactionResources.likeReaction?.url], ['heart', props.reactionResources.heartReaction?.url], ['applause', props.reactionResources.applauseReaction?.url], ['laugh', props.reactionResources.laughReaction?.url], ['surprised', props.reactionResources.surprisedReaction?.url]]);\n const calloutStyle: Partial<ICalloutContentStyles> = {\n root: {\n padding: 0\n },\n calloutMain: {\n padding: '0.5rem'\n }\n };\n const calloutProps = {\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n const reactionButtonCalloutRef = useRef<HTMLDivElement>(null);\n const reactionButtonRef = useRef<IButton>(null);\n const [calloutIsVisible, setCalloutIsVisible] = useState(false);\n return <Stack>\n {calloutIsVisible && <Callout data-ui-id=\"reaction-sub-menu\" isBeakVisible={false} styles={reactionButtonCalloutStyles} target={reactionButtonCalloutRef.current} onDismiss={() => {\n reactionButtonRef.current?.focus();\n setCalloutIsVisible(false);\n }}>\n <FocusZone shouldFocusOnMount style={{\n height: '100%'\n }}>\n <Stack horizontal style={{\n height: 'inherit'\n }}>\n {emojis.map((emoji, index) => {\n const resourceUrl = emojiResource.get(emoji);\n const frameCount: number = props.reactionResources !== undefined ? getEmojiFrameCount(emoji, props.reactionResources) : 0;\n const classname = mergeStyles(emojiStyles(resourceUrl ? resourceUrl : '', frameCount));\n return <TooltipHost key={index} data-ui-id={index} hidden={props.disableTooltip} content={emojiButtonTooltip.get(emoji)} styles={reactionToolTipHostStyle()} calloutProps={{\n ...calloutProps\n }}>\n <DefaultButton role=\"menuitem\" key={index} onClick={() => {\n props.onReactionClick(emoji);\n reactionButtonRef.current?.focus();\n setCalloutIsVisible(false);\n }} className={classname} styles={reactionItemButtonStyles} aria-label={emojiButtonTooltip.get(emoji)} aria-description={strings.tooltipContent}></DefaultButton>\n </TooltipHost>;\n })}\n </Stack>\n </FocusZone>\n </Callout>}\n <div ref={reactionButtonCalloutRef}>\n <ControlBarButton {...props} componentRef={reactionButtonRef} className={mergeStyles(styles, props.styles)} onClick={() => setCalloutIsVisible(!calloutIsVisible)} onRenderIcon={props.onRenderIcon ?? onRenderIcon} strings={strings} split={true} labelKey={props.labelKey ?? 'reactionButtonLabel'} onRenderMenuIcon={() => <div />} disabled={props.disabled} ariaLabel={strings.ariaLabel} />\n </div>\n </Stack>;\n};"]}

package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js CHANGED Viewed

@@ -20,7 +20,8 @@ import { MeetingReactionOverlay } from './MeetingReactionOverlay';
  */
 export const _RemoteVideoTile = React.memo((props) => {
     var _a, _b;
-    const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
+    const { isAvailable, isReceiving = true,
+    // default to true to prevent any breaking change
     isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, spotlightedParticipantUserIds, isSpotlighted, onStartSpotlight, onStopSpotlight, maxParticipantsToSpotlight, onMuteParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings, reactionResources, streamId } = props;
     const remoteVideoStreamProps = useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
@@ -33,18 +34,7 @@ export const _RemoteVideoTile = React.memo((props) => {
         renderElementExists: !!renderElement,
         scalingMode: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode,
         streamId
-    }), [
-        isAvailable,
-        isReceiving,
-        isScreenSharingOn,
-        onCreateRemoteStreamView,
-        onDisposeRemoteStreamView,
-        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
-        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode,
-        renderElement,
-        userId,
-        streamId
-    ]);
+    }), [isAvailable, isReceiving, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored, remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode, renderElement, userId, streamId]);
     // Handle creating, destroying and updating the video stream as necessary
     const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);
     const contextualMenuProps = useVideoTileContextualMenuProps({
@@ -82,7 +72,7 @@ export const _RemoteVideoTile = React.memo((props) => {
             // Returning `undefined` results in the placeholder with avatar being shown
             return undefined;
         }
-        return (React.createElement(StreamMedia, { videoStreamElement: renderElement !== null && renderElement !== void 0 ? renderElement : null, loadingState: showLoadingIndicator ? 'loading' : isReconnecting ? 'reconnecting' : 'none' }));
+        return React.createElement(StreamMedia, { videoStreamElement: renderElement !== null && renderElement !== void 0 ? renderElement : null, loadingState: showLoadingIndicator ? 'loading' : isReconnecting ? 'reconnecting' : 'none' });
     }, [isReconnecting, renderElement, showLoadingIndicator]);
     const onKeyDown = useCallback((e) => {
         if (e.key === 'Enter') {
@@ -92,31 +82,33 @@ export const _RemoteVideoTile = React.memo((props) => {
     const attendeeRoleString = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.attendeeRole;
     const formatDisplayName = (displayName, role) => {
         if (displayName && role) {
-            return _formatString(displayName, { AttendeeRole: role });
+            return _formatString(displayName, {
+                AttendeeRole: role
+            });
         }
         return displayName;
     };
     const displayName = formatDisplayName(remoteParticipant.displayName ? remoteParticipant.displayName : strings.displayNamePlaceholder, attendeeRoleString);
     const formatInitialsName = () => {
         if (remoteParticipant.displayName && attendeeRoleString) {
-            return _formatString(remoteParticipant.displayName, { AttendeeRole: attendeeRoleString });
+            return _formatString(remoteParticipant.displayName, {
+                AttendeeRole: attendeeRoleString
+            });
         }
         return remoteParticipant.displayName;
     };
-    const reactionOverlay = reactionResources && (React.createElement(MeetingReactionOverlay, { overlayMode: "grid-tiles", reaction: remoteParticipant.reaction, reactionResources: reactionResources }));
-    return (React.createElement(Stack, { tabIndex: menuKind === 'drawer' ? 0 : undefined, onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
-        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_b = formatInitialsName()) !== null && _b !== void 0 ? _b : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, raisedHand: remoteParticipant.raisedHand, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, alwaysShowLabelBackground: props.alwaysShowLabelBackground, participantState: participantState }, videoTileContextualMenuProps, { isPinned: props.isPinned, onLongTouch: props.onLongTouch
-                ? props.onLongTouch
-                : () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), isSpotlighted: isSpotlighted, overlay: reactionOverlay })),
-        drawerMenuItemProps.length > 0 && (React.createElement(Layer, { hostId: props.drawerMenuHostId },
+    const reactionOverlay = reactionResources && React.createElement(MeetingReactionOverlay, { overlayMode: "grid-tiles", reaction: remoteParticipant.reaction, reactionResources: reactionResources });
+    return React.createElement(Stack, { tabIndex: menuKind === 'drawer' ? 0 : undefined, onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
+        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_b = formatInitialsName()) !== null && _b !== void 0 ? _b : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, raisedHand: remoteParticipant.raisedHand, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, alwaysShowLabelBackground: props.alwaysShowLabelBackground, participantState: participantState }, videoTileContextualMenuProps, { isPinned: props.isPinned, onLongTouch: props.onLongTouch ? props.onLongTouch : () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), isSpotlighted: isSpotlighted, overlay: reactionOverlay })),
+        drawerMenuItemProps.length > 0 && React.createElement(Layer, { hostId: props.drawerMenuHostId },
             React.createElement(Stack, { styles: drawerMenuWrapperStyles },
-                React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps, heading: displayName }))))));
+                React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps, heading: displayName }))));
 });
 const convertContextualMenuItemsToDrawerMenuItemProps = (contextualMenuProps, onLightDismiss) => {
     if (!contextualMenuProps) {
         return [];
     }
-    return contextualMenuProps.items.map((item) => {
+    return contextualMenuProps.items.map(item => {
         return {
             itemKey: item.key,
             text: item.text,

package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport {\n CreateVideoStreamViewResult,\n OnRenderAvatarCallback,\n ParticipantState,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions,\n ViewScalingMode\n} from '../types';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n RemoteVideoStreamLifecycleMaintainerProps,\n useRemoteVideoStreamLifecycleMaintainer\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\n\n/*\n A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n \n @internal\n */\nexport const _RemoteVideoTile = React.memo(\n (props: {\n userId: string;\n remoteParticipant: VideoGalleryRemoteParticipant;\n onCreateRemoteStreamView?: (\n userId: string,\n options?: VideoStreamOptions\n ) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n isAvailable?: boolean;\n isReceiving?: boolean;\n streamId?: number;\n isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n renderElement?: HTMLElement;\n remoteVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showMuteIndicator?: boolean;\n showLabel?: boolean;\n alwaysShowLabelBackground?: boolean;\n personaMinSize?: number;\n strings: VideoGalleryStrings;\n participantState?: ParticipantState;\n menuKind?: 'contextual' \| 'drawer';\n drawerMenuHostId?: string;\n onPinParticipant?: (userId: string) => void;\n onUnpinParticipant?: (userId: string) => void;\n onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n isPinned?: boolean;\n spotlightedParticipantUserIds?: string[];\n isSpotlighted?: boolean;\n onStartSpotlight?: (userIds: string[]) => void;\n onStopSpotlight?: (userIds: string[]) => void;\n maxParticipantsToSpotlight?: number;\n onMuteParticipant?: (userId: string) => void;\n disablePinMenuItem?: boolean;\n toggleAnnouncerString?: (announcerString: string) => void;\n reactionResources?: ReactionResources;\n onLongTouch?: (() => void) \| undefined;\n }) => {\n const {\n isAvailable,\n isReceiving = true, // default to true to prevent any breaking change\n isScreenSharingOn,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions,\n renderElement,\n userId,\n onRenderAvatar,\n showMuteIndicator,\n remoteParticipant,\n participantState,\n menuKind,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n onMuteParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n strings,\n reactionResources,\n streamId\n } = props;\n\n const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: remoteVideoViewOptions?.isMirrored,\n isScreenSharingOn,\n isStreamAvailable: isAvailable,\n isStreamReceiving: isReceiving,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteParticipantId: userId,\n renderElementExists: !!renderElement,\n scalingMode: remoteVideoViewOptions?.scalingMode,\n streamId\n }),\n [\n isAvailable,\n isReceiving,\n isScreenSharingOn,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions?.isMirrored,\n remoteVideoViewOptions?.scalingMode,\n renderElement,\n userId,\n streamId\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n const contextualMenuProps = useVideoTileContextualMenuProps({\n participant: remoteParticipant,\n view: createVideoStreamResult?.view,\n strings: { ...props.strings },\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n onMuteParticipant\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual' \|\| !contextualMenuProps) {\n return {};\n }\n return {\n contextualMenu: contextualMenuProps\n };\n }, [contextualMenuProps, menuKind]);\n\n const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n const isReconnecting = participantState === 'Reconnecting';\n\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if ((!renderElement \|\| !renderElement.childElementCount) && !isReconnecting) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <StreamMedia\n videoStreamElement={renderElement ?? null}\n loadingState={showLoadingIndicator ? 'loading' : isReconnecting ? 'reconnecting' : 'none'}\n />\n );\n }, [isReconnecting, renderElement, showLoadingIndicator]);\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n );\n }\n },\n [setDrawerMenuItemProps, contextualMenuProps]\n );\n\n const attendeeRoleString = props.strings?.attendeeRole;\n\n const formatDisplayName = (displayName: string, role: string): string => {\n if (displayName && role) {\n return _formatString(displayName, { AttendeeRole: role });\n }\n return displayName;\n };\n const displayName = formatDisplayName(\n remoteParticipant.displayName ? remoteParticipant.displayName : strings.displayNamePlaceholder,\n attendeeRoleString\n );\n const formatInitialsName = (): string \| undefined => {\n if (remoteParticipant.displayName && attendeeRoleString) {\n return _formatString(remoteParticipant.displayName, { AttendeeRole: attendeeRoleString });\n }\n return remoteParticipant.displayName;\n };\n\n const reactionOverlay = reactionResources && (\n <MeetingReactionOverlay\n overlayMode=\"grid-tiles\"\n reaction={remoteParticipant.reaction}\n reactionResources={reactionResources}\n />\n );\n\n return (\n <Stack\n tabIndex={menuKind === 'drawer' ? 0 : undefined}\n onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n style={remoteVideoTileWrapperStyle}\n >\n <VideoTile\n key={userId}\n userId={userId}\n initialsName={formatInitialsName() ?? ''}\n renderElement={renderVideoStreamElement}\n displayName={displayName}\n onRenderPlaceholder={onRenderAvatar}\n isMuted={remoteParticipant.isMuted}\n raisedHand={remoteParticipant.raisedHand}\n isSpeaking={remoteParticipant.isSpeaking}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n showLabel={props.showLabel}\n alwaysShowLabelBackground={props.alwaysShowLabelBackground}\n participantState={participantState}\n {...videoTileContextualMenuProps}\n isPinned={props.isPinned}\n onLongTouch={\n props.onLongTouch\n ? props.onLongTouch\n : () =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () =>\n setDrawerMenuItemProps([])\n )\n )\n }\n isSpotlighted={isSpotlighted}\n overlay={reactionOverlay}\n />\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu\n onLightDismiss={() => setDrawerMenuItemProps([])}\n items={drawerMenuItemProps}\n heading={displayName}\n />\n </Stack>\n </Layer>\n )}\n </Stack>\n );\n }\n);\n\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}
1	+ {"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport { CreateVideoStreamViewResult, OnRenderAvatarCallback, ParticipantState, VideoGalleryRemoteParticipant, VideoStreamOptions, ViewScalingMode } from '../types';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport { RemoteVideoStreamLifecycleMaintainerProps, useRemoteVideoStreamLifecycleMaintainer } from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\n\n/*\n A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n \n @internal\n */\nexport const _RemoteVideoTile = React.memo((props: {\n userId: string;\n remoteParticipant: VideoGalleryRemoteParticipant;\n onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n isAvailable?: boolean;\n isReceiving?: boolean;\n streamId?: number;\n isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n renderElement?: HTMLElement;\n remoteVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showMuteIndicator?: boolean;\n showLabel?: boolean;\n alwaysShowLabelBackground?: boolean;\n personaMinSize?: number;\n strings: VideoGalleryStrings;\n participantState?: ParticipantState;\n menuKind?: 'contextual' \| 'drawer';\n drawerMenuHostId?: string;\n onPinParticipant?: (userId: string) => void;\n onUnpinParticipant?: (userId: string) => void;\n onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n isPinned?: boolean;\n spotlightedParticipantUserIds?: string[];\n isSpotlighted?: boolean;\n onStartSpotlight?: (userIds: string[]) => void;\n onStopSpotlight?: (userIds: string[]) => void;\n maxParticipantsToSpotlight?: number;\n onMuteParticipant?: (userId: string) => void;\n disablePinMenuItem?: boolean;\n toggleAnnouncerString?: (announcerString: string) => void;\n reactionResources?: ReactionResources;\n onLongTouch?: (() => void) \| undefined;\n}) => {\n const {\n isAvailable,\n isReceiving = true,\n // default to true to prevent any breaking change\n isScreenSharingOn,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions,\n renderElement,\n userId,\n onRenderAvatar,\n showMuteIndicator,\n remoteParticipant,\n participantState,\n menuKind,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n onMuteParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n strings,\n reactionResources,\n streamId\n } = props;\n const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(() => ({\n isMirrored: remoteVideoViewOptions?.isMirrored,\n isScreenSharingOn,\n isStreamAvailable: isAvailable,\n isStreamReceiving: isReceiving,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteParticipantId: userId,\n renderElementExists: !!renderElement,\n scalingMode: remoteVideoViewOptions?.scalingMode,\n streamId\n }), [isAvailable, isReceiving, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions?.isMirrored, remoteVideoViewOptions?.scalingMode, renderElement, userId, streamId]);\n\n // Handle creating, destroying and updating the video stream as necessary\n const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n const contextualMenuProps = useVideoTileContextualMenuProps({\n participant: remoteParticipant,\n view: createVideoStreamResult?.view,\n strings: {\n ...props.strings\n },\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n onMuteParticipant\n });\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual' \|\| !contextualMenuProps) {\n return {};\n }\n return {\n contextualMenu: contextualMenuProps\n };\n }, [contextualMenuProps, menuKind]);\n const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n const isReconnecting = participantState === 'Reconnecting';\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if ((!renderElement \|\| !renderElement.childElementCount) && !isReconnecting) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n return <StreamMedia videoStreamElement={renderElement ?? null} loadingState={showLoadingIndicator ? 'loading' : isReconnecting ? 'reconnecting' : 'none'} />;\n }, [isReconnecting, renderElement, showLoadingIndicator]);\n const onKeyDown = useCallback((e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])));\n }\n }, [setDrawerMenuItemProps, contextualMenuProps]);\n const attendeeRoleString = props.strings?.attendeeRole;\n const formatDisplayName = (displayName: string, role: string): string => {\n if (displayName && role) {\n return _formatString(displayName, {\n AttendeeRole: role\n });\n }\n return displayName;\n };\n const displayName = formatDisplayName(remoteParticipant.displayName ? remoteParticipant.displayName : strings.displayNamePlaceholder, attendeeRoleString);\n const formatInitialsName = (): string \| undefined => {\n if (remoteParticipant.displayName && attendeeRoleString) {\n return _formatString(remoteParticipant.displayName, {\n AttendeeRole: attendeeRoleString\n });\n }\n return remoteParticipant.displayName;\n };\n const reactionOverlay = reactionResources && <MeetingReactionOverlay overlayMode=\"grid-tiles\" reaction={remoteParticipant.reaction} reactionResources={reactionResources} />;\n return <Stack tabIndex={menuKind === 'drawer' ? 0 : undefined} onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined} style={remoteVideoTileWrapperStyle}>\n <VideoTile key={userId} userId={userId} initialsName={formatInitialsName() ?? ''} renderElement={renderVideoStreamElement} displayName={displayName} onRenderPlaceholder={onRenderAvatar} isMuted={remoteParticipant.isMuted} raisedHand={remoteParticipant.raisedHand} isSpeaking={remoteParticipant.isSpeaking} showMuteIndicator={showMuteIndicator} personaMinSize={props.personaMinSize} showLabel={props.showLabel} alwaysShowLabelBackground={props.alwaysShowLabelBackground} participantState={participantState} {...videoTileContextualMenuProps} isPinned={props.isPinned} onLongTouch={props.onLongTouch ? props.onLongTouch : () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])))} isSpotlighted={isSpotlighted} overlay={reactionOverlay} />\n {drawerMenuItemProps.length > 0 && <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} heading={displayName} />\n </Stack>\n </Layer>}\n </Stack>;\n});\nconst convertContextualMenuItemsToDrawerMenuItemProps = (contextualMenuProps?: IContextualMenuProps, onLightDismiss?: () => void): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map(item => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};"]}

package/dist/dist-esm/react-components/src/components/ResponsiveHorizontalGallery.js CHANGED Viewed

@@ -26,7 +26,7 @@ export const ResponsiveHorizontalGallery = (props) => {
         buttonWidthRem
     });
     onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(childrenPerPage);
-    return (React.createElement("div", { "data-ui-id": "responsive-horizontal-gallery", ref: containerRef, className: mergeStyles(props.containerStyles) },
-        React.createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, props.children)));
+    return React.createElement("div", { "data-ui-id": "responsive-horizontal-gallery", ref: containerRef, className: mergeStyles(props.containerStyles) },
+        React.createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, props.children));
 };
 //# sourceMappingURL=ResponsiveHorizontalGallery.js.map

package/dist/dist-esm/react-components/src/components/ResponsiveHorizontalGallery.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResponsiveHorizontalGallery.js","sourceRoot":"","sources":["~~../../../../../../~~react-components/src/components/ResponsiveHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,kCAAkC,EAAE,MAAM,2CAA2C,CAAC;AAE/F;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAS3C,EAAe,EAAE;IAChB,MAAM,~~EAAE~~,WAAW,~~EAAE~~,cAAc,GAAG,CAAC,~~EAAE~~,oBAAoB,~~EAAE~~,uBAAuB,~~EAAE~~,GAAG,KAAK,CAAC;~~IACjG~~,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;~~IAExD~~,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9G,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChH,IAAI,4BAA4B,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,GAAG,WAAW,GAAG,YAAY,EAAE,CAAC,CAAC,CAAC;IACnG,IAAI,MAAM,CAAC,KAAK,CAAC,4BAA4B,CAAC,EAAE,CAAC;QAC/C,4BAA4B,GAAG,CAAC,CAAC;IACnC,CAAC;~~IAED~~,MAAM,eAAe,GAAG,kCAAkC,CAAC;QACzD,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QACtD,cAAc,EAAE,4BAA4B;QAC5C,WAAW;QACX,cAAc;KACf,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;~~IAE3C~~,OAAO,~~CACL,~~2CAAgB,+BAA+B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC;~~QAC9G~~,oBAAC,iBAAiB,~~IAChB~~,eAAe,EAAE,eAAe,~~EAChC~~,MAAM,EAAE,KAAK,CAAC,uBAAuB,~~EACrC~~,oBAAoB,EAAE,oBAAoB,~~IAEzC~~,KAAK,CAAC,QAAQ,CACG,CAChB,~~CACP,~~CAAC;~~AACJ~~,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef } from 'react';\nimport { HorizontalGallery, HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _useContainerWidth } from './utils/responsive';\nimport { calculateHorizontalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/*\n Wrapped HorizontalGallery that adjusts the number of items per page based on the\n * available width obtained from a ResizeObserver, width per child, gap width, and button width\n /\nexport const ResponsiveHorizontalGallery = (props: {\n children: React.ReactNode;\n containerStyles: IStyle;\n horizontalGalleryStyles: HorizontalGalleryStyles;\n gapWidthRem: number;\n buttonWidthRem?: number;\n onFetchTilesToRender?: (indexes: number[]) => void;\n /* event to listen for children per page changes */\n onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}): JSX.Element => {\n const { gapWidthRem, buttonWidthRem = 0, onFetchTilesToRender, onChildrenPerPageChange } = props;\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = _useContainerWidth(containerRef);\n\n const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;\n const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;\n let containerWidthWithoutPadding = Math.max((containerWidth ?? 0) - leftPadding - rightPadding, 0);\n if (Number.isNaN(containerWidthWithoutPadding)) {\n containerWidthWithoutPadding = 0;\n }\n\n const childrenPerPage = calculateHorizontalChildrenPerPage({\n numberOfChildren: React.Children.count(props.children),\n containerWidth: containerWidthWithoutPadding,\n gapWidthRem,\n buttonWidthRem\n });\n onChildrenPerPageChange?.(childrenPerPage);\n\n return ~~(\n~~ <div data-ui-id=\"responsive-horizontal-gallery\" ref={containerRef} className={mergeStyles(props.containerStyles)}>\n <HorizontalGallery\n childrenPerPage={childrenPerPage}\n styles={props.horizontalGalleryStyles}\n onFetchTilesToRender={onFetchTilesToRender}\n >\n {props.children}\n </HorizontalGallery>\n </div>\n ~~);\n~~}~~;\n~~"]}
1	+ {"version":3,"file":"ResponsiveHorizontalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ResponsiveHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,kCAAkC,EAAE,MAAM,2CAA2C,CAAC;AAE/F;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAS3C,EAAe,EAAE;IAChB,MAAM,EACJ,WAAW,EACX,cAAc,GAAG,CAAC,EAClB,oBAAoB,EACpB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACxD,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9G,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChH,IAAI,4BAA4B,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,GAAG,WAAW,GAAG,YAAY,EAAE,CAAC,CAAC,CAAC;IACnG,IAAI,MAAM,CAAC,KAAK,CAAC,4BAA4B,CAAC,EAAE,CAAC;QAC/C,4BAA4B,GAAG,CAAC,CAAC;IACnC,CAAC;IACD,MAAM,eAAe,GAAG,kCAAkC,CAAC;QACzD,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QACtD,cAAc,EAAE,4BAA4B;QAC5C,WAAW;QACX,cAAc;KACf,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;IAC3C,OAAO,2CAAgB,+BAA+B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC;QACnH,oBAAC,iBAAiB,IAAC,eAAe,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,CAAC,uBAAuB,EAAE,oBAAoB,EAAE,oBAAoB,IACnI,KAAK,CAAC,QAAQ,CACG,CAChB,CAAC;AACX,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef } from 'react';\nimport { HorizontalGallery, HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _useContainerWidth } from './utils/responsive';\nimport { calculateHorizontalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/*\n Wrapped HorizontalGallery that adjusts the number of items per page based on the\n * available width obtained from a ResizeObserver, width per child, gap width, and button width\n /\nexport const ResponsiveHorizontalGallery = (props: {\n children: React.ReactNode;\n containerStyles: IStyle;\n horizontalGalleryStyles: HorizontalGalleryStyles;\n gapWidthRem: number;\n buttonWidthRem?: number;\n onFetchTilesToRender?: (indexes: number[]) => void;\n /* event to listen for children per page changes */\n onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}): JSX.Element => {\n const {\n gapWidthRem,\n buttonWidthRem = 0,\n onFetchTilesToRender,\n onChildrenPerPageChange\n } = props;\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = _useContainerWidth(containerRef);\n const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;\n const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;\n let containerWidthWithoutPadding = Math.max((containerWidth ?? 0) - leftPadding - rightPadding, 0);\n if (Number.isNaN(containerWidthWithoutPadding)) {\n containerWidthWithoutPadding = 0;\n }\n const childrenPerPage = calculateHorizontalChildrenPerPage({\n numberOfChildren: React.Children.count(props.children),\n containerWidth: containerWidthWithoutPadding,\n gapWidthRem,\n buttonWidthRem\n });\n onChildrenPerPageChange?.(childrenPerPage);\n return <div data-ui-id=\"responsive-horizontal-gallery\" ref={containerRef} className={mergeStyles(props.containerStyles)}>\n <HorizontalGallery childrenPerPage={childrenPerPage} styles={props.horizontalGalleryStyles} onFetchTilesToRender={onFetchTilesToRender}>\n {props.children}\n </HorizontalGallery>\n </div>;\n};"]}

package/dist/dist-esm/react-components/src/components/ResponsiveVerticalGallery.js CHANGED Viewed

@@ -31,7 +31,7 @@ export const ResponsiveVerticalGallery = (props) => {
         isShort: isShort !== null && isShort !== void 0 ? isShort : false
     });
     onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(childrenPerPage);
-    return (React.createElement("div", { "data-ui-id": "responsive-vertical-gallery", ref: containerRef, className: mergeStyles(containerStyles) },
-        React.createElement(VerticalGallery, { childrenPerPage: childrenPerPage, styles: verticalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, children)));
+    return React.createElement("div", { "data-ui-id": "responsive-vertical-gallery", ref: containerRef, className: mergeStyles(containerStyles) },
+        React.createElement(VerticalGallery, { childrenPerPage: childrenPerPage, styles: verticalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, children));
 };
 //# sourceMappingURL=ResponsiveVerticalGallery.js.map

package/dist/dist-esm/react-components/src/components/ResponsiveVerticalGallery.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResponsiveVerticalGallery.js","sourceRoot":"","sources":["~~../../../../../../~~react-components/src/components/ResponsiveVerticalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAyB,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,gCAAgC,EAAE,MAAM,2CAA2C,CAAC;AA0B7F;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;;IAC9F,MAAM,EACJ,QAAQ,EACR,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,mBAAmB,EACnB,OAAO,EACP,oBAAoB,EACpB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;~~IAE1D~~,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5G,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAClH,IAAI,6BAA6B,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,CAAC,CAAC,GAAG,UAAU,GAAG,aAAa,EAAE,CAAC,CAAC,CAAC;IACrG,IAAI,MAAM,CAAC,KAAK,CAAC,6BAA6B,CAAC,EAAE,CAAC;QAChD,6BAA6B,GAAG,CAAC,CAAC;IACpC,CAAC;~~IAED~~,MAAM,eAAe,GAAG,gCAAgC,CAAC;QACvD,gBAAgB,EAAE,MAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,mCAAI,CAAC;QACrD,eAAe,EAAE,6BAA6B;QAC9C,YAAY;QACZ,gBAAgB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,CAAC;QAC1C,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,KAAK;KAC1B,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;IAC3C,OAAO,~~CACL,~~2CAAgB,6BAA6B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC;~~QACtG~~,oBAAC,eAAe,~~IACd~~,eAAe,EAAE,eAAe,~~EAChC~~,MAAM,EAAE,qBAAqB,~~EAC7B~~,oBAAoB,EAAE,oBAAoB,~~IAEzC~~,QAAQ,CACO,CACd,~~CACP,~~CAAC;~~AACJ~~,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useRef } from 'react';\nimport { _useContainerHeight } from './utils/responsive';\nimport { VerticalGallery, VerticalGalleryStyles } from './VerticalGallery';\nimport { calculateVerticalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/*\n Props for the Responsive wrapper of the VerticalGallery component\n \n @beta\n /\nexport interface ResponsiveVerticalGalleryProps {\n /* Styles for the Children space container /\n containerStyles: IStyle;\n /* Styles for the VerticalGallery component /\n verticalGalleryStyles: VerticalGalleryStyles;\n /* Height of the gap in between the video tiles /\n gapHeightRem: number;\n /* Video tiles to be rendered in the Vertical Gallery /\n children?: React.ReactNode;\n /* Height of the control bar for navigating pages /\n controlBarHeightRem?: number;\n /* container is shorter than 480 px. /\n isShort?: boolean;\n /* Function to set which tiles to give video to in the children. /\n onFetchTilesToRender?: (indexes: number[]) => void;\n /* event to listen for children per page changes /\n onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}\n\n/\n Responsive container for the VerticalGallery Component. Performs calculations for number of children\n * for the VerticalGallery\n * @param props\n \n @beta\n */\nexport const ResponsiveVerticalGallery = (props: ResponsiveVerticalGalleryProps): JSX.Element => {\n const {\n children,\n containerStyles,\n verticalGalleryStyles,\n gapHeightRem,\n controlBarHeightRem,\n isShort,\n onFetchTilesToRender,\n onChildrenPerPageChange\n } = props;\n const containerRef = useRef<HTMLDivElement>(null);\n const containerHeight = _useContainerHeight(containerRef);\n\n const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;\n const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;\n let containerHeightWithoutPadding = Math.max((containerHeight ?? 0) - topPadding - bottomPadding, 0);\n if (Number.isNaN(containerHeightWithoutPadding)) {\n containerHeightWithoutPadding = 0;\n }\n\n const childrenPerPage = calculateVerticalChildrenPerPage({\n numberOfChildren: React.Children.count(children) ?? 0,\n containerHeight: containerHeightWithoutPadding,\n gapHeightRem,\n controlBarHeight: controlBarHeightRem ?? 2,\n isShort: isShort ?? false\n });\n onChildrenPerPageChange?.(childrenPerPage);\n return ~~(\n~~ <div data-ui-id=\"responsive-vertical-gallery\" ref={containerRef} className={mergeStyles(containerStyles)}>\n <VerticalGallery\n childrenPerPage={childrenPerPage}\n styles={verticalGalleryStyles}\n onFetchTilesToRender={onFetchTilesToRender}\n >\n {children}\n </VerticalGallery>\n </div>\n ~~);\n~~}~~;\n~~"]}
1	+ {"version":3,"file":"ResponsiveVerticalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ResponsiveVerticalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAyB,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,gCAAgC,EAAE,MAAM,2CAA2C,CAAC;AA0B7F;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;;IAC9F,MAAM,EACJ,QAAQ,EACR,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,mBAAmB,EACnB,OAAO,EACP,oBAAoB,EACpB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAC1D,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5G,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAClH,IAAI,6BAA6B,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,CAAC,CAAC,GAAG,UAAU,GAAG,aAAa,EAAE,CAAC,CAAC,CAAC;IACrG,IAAI,MAAM,CAAC,KAAK,CAAC,6BAA6B,CAAC,EAAE,CAAC;QAChD,6BAA6B,GAAG,CAAC,CAAC;IACpC,CAAC;IACD,MAAM,eAAe,GAAG,gCAAgC,CAAC;QACvD,gBAAgB,EAAE,MAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,mCAAI,CAAC;QACrD,eAAe,EAAE,6BAA6B;QAC9C,YAAY;QACZ,gBAAgB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,CAAC;QAC1C,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,KAAK;KAC1B,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;IAC3C,OAAO,2CAAgB,6BAA6B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC;QAC3G,oBAAC,eAAe,IAAC,eAAe,EAAE,eAAe,EAAE,MAAM,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,oBAAoB,IACzH,QAAQ,CACO,CACd,CAAC;AACX,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useRef } from 'react';\nimport { _useContainerHeight } from './utils/responsive';\nimport { VerticalGallery, VerticalGalleryStyles } from './VerticalGallery';\nimport { calculateVerticalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/*\n Props for the Responsive wrapper of the VerticalGallery component\n \n @beta\n /\nexport interface ResponsiveVerticalGalleryProps {\n /* Styles for the Children space container /\n containerStyles: IStyle;\n /* Styles for the VerticalGallery component /\n verticalGalleryStyles: VerticalGalleryStyles;\n /* Height of the gap in between the video tiles /\n gapHeightRem: number;\n /* Video tiles to be rendered in the Vertical Gallery /\n children?: React.ReactNode;\n /* Height of the control bar for navigating pages /\n controlBarHeightRem?: number;\n /* container is shorter than 480 px. /\n isShort?: boolean;\n /* Function to set which tiles to give video to in the children. /\n onFetchTilesToRender?: (indexes: number[]) => void;\n /* event to listen for children per page changes /\n onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}\n\n/\n Responsive container for the VerticalGallery Component. Performs calculations for number of children\n * for the VerticalGallery\n * @param props\n \n @beta\n */\nexport const ResponsiveVerticalGallery = (props: ResponsiveVerticalGalleryProps): JSX.Element => {\n const {\n children,\n containerStyles,\n verticalGalleryStyles,\n gapHeightRem,\n controlBarHeightRem,\n isShort,\n onFetchTilesToRender,\n onChildrenPerPageChange\n } = props;\n const containerRef = useRef<HTMLDivElement>(null);\n const containerHeight = _useContainerHeight(containerRef);\n const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;\n const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;\n let containerHeightWithoutPadding = Math.max((containerHeight ?? 0) - topPadding - bottomPadding, 0);\n if (Number.isNaN(containerHeightWithoutPadding)) {\n containerHeightWithoutPadding = 0;\n }\n const childrenPerPage = calculateVerticalChildrenPerPage({\n numberOfChildren: React.Children.count(children) ?? 0,\n containerHeight: containerHeightWithoutPadding,\n gapHeightRem,\n controlBarHeight: controlBarHeightRem ?? 2,\n isShort: isShort ?? false\n });\n onChildrenPerPageChange?.(childrenPerPage);\n return <div data-ui-id=\"responsive-vertical-gallery\" ref={containerRef} className={mergeStyles(containerStyles)}>\n <VerticalGallery childrenPerPage={childrenPerPage} styles={verticalGalleryStyles} onFetchTilesToRender={onFetchTilesToRender}>\n {children}\n </VerticalGallery>\n </div>;\n};"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/ContextMenuPlugin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenuPlugin.js","sourceRoot":"","sources":["~~../../../../../../../../~~react-components/src/components/RichTextEditor/Plugins/ContextMenuPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAGxE;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,qBAA0C;IAC/E,~~YACE~~,QAA+F,~~EAC/F~~,SAAqB;~~QAErB~~,KAAK,CAAC;YACJ;;;;;eAKG;YACH,MAAM,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE;gBAC9C,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAA+B,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;gBACzF,QAAQ,CAAC,SAAS,EAAE,aAAa,EAAE,iBAAiB,CAAC,CAAC;YACxD,CAAC;YACD;;eAEG;YACH,OAAO,EAAE,GAAG,EAAE;gBACZ,SAAS,EAAE,CAAC;YACd,CAAC;SACF,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextMenuPluginBase } from 'roosterjs-content-model-plugins';\nimport type { IContextualMenuItem } from '@fluentui/react/';\n\n/*\n Represents a plugin that adds a context menu to the rich text editor.\n /\nexport class ContextMenuPlugin extends ContextMenuPluginBase<IContextualMenuItem> {\n constructor(\n onRender: (container: HTMLElement, items: IContextualMenuItem[], onDismiss: () => void) => void~~,\n~~ onDismiss: () => void\n ) {\n super({\n /\n Renders the context menu in the specified container with the provided items.\n * @param container - The container element where the context menu should be rendered.\n * @param items - The items to be displayed in the context menu.\n * @param onDismiss - Callback function to be called when the context menu is dismissed. It will call `dismiss` method.\n /\n render: (container, items, onDismissCallback) => {\n const filteredItems = items.filter((item): item is IContextualMenuItem => item !== null);\n onRender(container, filteredItems, onDismissCallback);\n },\n /\n Dismisses the context menu.\n */\n dismiss: () => {\n onDismiss();\n }\n });\n }\n}\n"]}
1	+ {"version":3,"file":"ContextMenuPlugin.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/ContextMenuPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAGxE;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,qBAA0C;IAC/E,YAAY,QAA+F,EAAE,SAAqB;QAChI,KAAK,CAAC;YACJ;;;;;eAKG;YACH,MAAM,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE;gBAC9C,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAA+B,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;gBACzF,QAAQ,CAAC,SAAS,EAAE,aAAa,EAAE,iBAAiB,CAAC,CAAC;YACxD,CAAC;YACD;;eAEG;YACH,OAAO,EAAE,GAAG,EAAE;gBACZ,SAAS,EAAE,CAAC;YACd,CAAC;SACF,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextMenuPluginBase } from 'roosterjs-content-model-plugins';\nimport type { IContextualMenuItem } from '@fluentui/react/';\n\n/*\n Represents a plugin that adds a context menu to the rich text editor.\n /\nexport class ContextMenuPlugin extends ContextMenuPluginBase<IContextualMenuItem> {\n constructor(onRender: (container: HTMLElement, items: IContextualMenuItem[], onDismiss: () => void) => void, onDismiss: () => void) {\n super({\n /\n Renders the context menu in the specified container with the provided items.\n * @param container - The container element where the context menu should be rendered.\n * @param items - The items to be displayed in the context menu.\n * @param onDismiss - Callback function to be called when the context menu is dismissed. It will call `dismiss` method.\n /\n render: (container, items, onDismissCallback) => {\n const filteredItems = items.filter((item): item is IContextualMenuItem => item !== null);\n onRender(container, filteredItems, onDismissCallback);\n },\n /\n Dismisses the context menu.\n */\n dismiss: () => {\n onDismiss();\n }\n });\n }\n}"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.js CHANGED Viewed

@@ -7,14 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-/* @conditional-compile-remove(rich-text-editor) */
 import { scrollToBottomRichTextEditor } from '../../utils/RichTextEditorUtils';
 import { ContentChangedEventSource, PluginEventType } from '../../utils/RichTextEditorUtils';
-/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { getInlineImageAttributes } from '../../utils/RichTextEditorUtils';
-/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { _base64ToBlob, removeImageTags, _IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY } from "../../../../../acs-ui-common/src";
-/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { v1 as generateGUID } from 'uuid';
 /**
  * CopyPastePlugin is a plugin for handling copy and paste events in the editor.
@@ -22,20 +18,15 @@ import { v1 as generateGUID } from 'uuid';
 export default class CopyPastePlugin {
     constructor() {
         this.editor = null;
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         this.imageBase64DataMap = {};
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         this.handleInlineImage = (event) => {
             if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && this.onInsertInlineImage) {
-                event.fragment.querySelectorAll('img').forEach((image) => {
+                event.fragment.querySelectorAll('img').forEach(image => {
                     // Assign a unique id to the image element so Contosos can identify the image element.
                     // We also use it internally such as in getRemovedInlineImages to compare images in the content with previous images
                     image.id = generateGUID();
                     const clipboardImage = event.clipboardData.image;
-                    const fileName = (clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.name) ||
-                        (clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.type.replace('/', '.')) ||
-                        image.getAttribute(_IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY) ||
-                        '';
+                    const fileName = (clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.name) || (clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.type.replace('/', '.')) || image.getAttribute(_IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY) || '';
                     // If the image src is an external url, call the onInsertInlineImage callback with the url.
                     let imageUrl = image.src;
                     if (image.src.startsWith('data:image/')) {
@@ -60,7 +51,6 @@ export default class CopyPastePlugin {
     }
     dispose() { }
     onPluginEvent(event) {
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         if (event.eventType === PluginEventType.BeforeCutCopy) {
             event.clonedRoot.querySelectorAll('img').forEach((image) => __awaiter(this, void 0, void 0, function* () {
                 if (image.src.startsWith('blob:')) {
@@ -68,15 +58,13 @@ export default class CopyPastePlugin {
                     image.src = base64Data || image.src;
                 }
             }));
-        }
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        // If onInsertInlineImage is not provided, we should remove the image tags before calling the onPaste callback
+        } // If onInsertInlineImage is not provided, we should remove the image tags before calling the onPaste callback
         if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && !this.onInsertInlineImage) {
-            removeImageTags({ content: event.fragment });
+            removeImageTags({
+                content: event.fragment
+            });
         }
-        handleBeforePasteEvent(event, /* @conditional-compile-remove(rich-text-editor-image-upload) */ this.onPaste);
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        // We should handle the onInsertInlineImage after the onPaste callback in case Contosos want to modify the image tags, especially the src attribute.
+        handleBeforePasteEvent(event, this.onPaste); // We should handle the onInsertInlineImage after the onPaste callback in case Contosos want to modify the image tags, especially the src attribute.
         if (this.onInsertInlineImage) {
             this.handleInlineImage(event);
         }
@@ -90,12 +78,11 @@ export default class CopyPastePlugin {
  * @internal
  * Exported only for unit testing
  */
-export const handleBeforePasteEvent = (event,
-/* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste) => {
+export const handleBeforePasteEvent = (event, onPaste) => {
     if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal') {
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        onPaste === null || onPaste === void 0 ? void 0 : onPaste({ content: event.fragment });
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        onPaste === null || onPaste === void 0 ? void 0 : onPaste({
+            content: event.fragment
+        });
         return;
     }
 };
@@ -105,7 +92,6 @@ export const handleBeforePasteEvent = (event,
  */
 export const scrollToBottomAfterContentPaste = (event) => {
     if (event.eventType === PluginEventType.ContentChanged && event.source === ContentChangedEventSource.Paste) {
-        /* @conditional-compile-remove(rich-text-editor) */
         scrollToBottomRichTextEditor();
     }
 };

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CopyPastePlugin.js","sourceRoot":"","sources":["~~../../../../../../../../~~react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.tsx"],"names":[],"mappings":";;;;;;;;;AAGA,~~mDAAmD;AACnD,~~OAAO,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAC;AAC/E,OAAO,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAC7F,~~gEAAgE;AAChE,~~OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,~~gEAAgE;AAChE,~~OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,2CAA2C,EAAE,yCAAgC;AACtH,~~gEAAgE;AAChE,~~OAAO,EAAE,EAAE,IAAI,YAAY,EAAE,MAAM,MAAM,CAAC;AAE1C;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,eAAe;IAApC;QACU,WAAM,GAAmB,IAAI,CAAC;~~QAMtC~~,~~gEAAgE;QACxD,~~uBAAkB,GAA2B,EAAE,CAAC;~~QAYxD~~,~~gEAAgE;QACxD,~~sBAAiB,GAAG,CAAC,KAAkB,EAAQ,EAAE;YACvD,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,WAAW,IAAI,KAAK,CAAC,SAAS,KAAK,QAAQ,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBAChH,KAAK,CAAC,QAAQ,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,~~CAAC,~~KAAK,~~EAAE~~,EAAE;~~oBACvD~~,sFAAsF;oBACtF,oHAAoH;oBACpH,KAAK,CAAC,EAAE,GAAG,YAAY,EAAE,CAAC;~~oBAE1B~~,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;oBACjD,MAAM,QAAQ,~~GACZ~~,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI~~;yBACpB~~,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA~~;wBACtC~~,KAAK,CAAC,YAAY,CAAC,2CAA2C,CAAC~~;wBAC/D~~,EAAE,CAAC;~~oBACL~~,2FAA2F;oBAC3F,IAAI,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC;oBACzB,IAAI,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,CAAC;wBACxC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC;~~wBAE9C~~,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;wBAC3C,QAAQ,GAAG,GAAG,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;oBAC5C,CAAC;~~oBAED~~,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC;oBACrB,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,OAAO,CAAC;~~oBAEjC~~,KAAK,CAAC,OAAO,CAAC,aAAa,GAAG,QAAQ,CAAC;~~oBAEvC~~,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;~~oBAExD~~,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,mBAAmB,CAAC,eAAe,CAAC,CAAC;gBACxE,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;~~IAgCJ~~,CAAC;~~IA3EC~~,OAAO;QACL,OAAO,iBAAiB,CAAC;IAC3B,CAAC;~~IAED~~,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;~~IAED~~,OAAO,KAAU,CAAC;~~IAqClB~~,aAAa,CAAC,KAAkB;QAC9B,~~gEAAgE;QAChE,~~IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,aAAa,EAAE,CAAC;YACtD,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,~~CAAO~~,KAAK,~~EAAE~~,EAAE;~~gBAC/D~~,IAAI,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;oBAClC,MAAM,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;oBACrD,KAAK,CAAC,GAAG,GAAG,UAAU,IAAI,KAAK,CAAC,GAAG,CAAC;gBACtC,CAAC;YACH,CAAC,CAAA,CAAC,CAAC;QACL,CAAC~~;QAED~~,~~gEAAgE;QAChE~~,8GAA8G;~~QAC9G~~,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,WAAW,IAAI,KAAK,CAAC,SAAS,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACjH,eAAe,CAAC,~~EAAE,~~OAAO,EAAE,KAAK,CAAC,QAAQ,~~EAAE,~~CAAC,CAAC;~~QAC/C~~,CAAC;~~QAED~~,sBAAsB,CAAC,KAAK,EAAE,~~gEAAgE,CAAC,~~IAAI,CAAC,OAAO,CAAC,CAAC~~;QAE7G~~,~~gEAAgE;QAChE~~,oJAAoJ;~~QACpJ~~,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7B,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;~~QAED~~,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;YACtD,kEAAkE;YAClE,+BAA+B,CAAC,KAAK,CAAC,CAAC;QACzC,CAAC;IACH,CAAC;CACF;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,~~CACpC~~,KAAkB~~;AAClB~~,~~gEAAgE~~,~~CAAC~~,~~OAEvD~~,~~EACJ,~~EAAE;~~IACR~~,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,WAAW,IAAI,KAAK,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC;QACpF,~~gEAAgE;QAChE,~~OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,~~EAAE,~~OAAO,EAAE,KAAK,CAAC,QAAQ,~~EAAE,~~CAAC,CAAC;~~QACvC~~,~~gEAAgE;QAChE,~~OAAO;IACT,CAAC;AACH,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,KAAkB,EAAQ,EAAE;IAC1E,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,cAAc,IAAI,KAAK,CAAC,MAAM,KAAK,yBAAyB,CAAC,KAAK,EAAE,CAAC;QAC3G,~~mDAAmD;QACnD,~~4BAA4B,EAAE,CAAC;IACjC,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport type { PluginEvent, EditorPlugin, IEditor } from 'roosterjs-content-model-types';\~~n/* @conditional-compile-remove(rich-text-editor) /\~~nimport { scrollToBottomRichTextEditor } from '../../utils/RichTextEditorUtils';\nimport { ContentChangedEventSource, PluginEventType } from '../../utils/RichTextEditorUtils';\~~n/ @conditional-compile-remove(rich-text-editor-image-upload) /\~~nimport { getInlineImageAttributes } from '../../utils/RichTextEditorUtils';\~~n/ @conditional-compile-remove(rich-text-editor-image-upload) /\~~nimport { _base64ToBlob, removeImageTags, _IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY } from '@internal/acs-ui-common';\~~n/ @conditional-compile-remove(rich-text-editor-image-upload) /\~~nimport { v1 as generateGUID } from 'uuid';\n\n/\n CopyPastePlugin is a plugin for handling copy and paste events in the editor.\n /\nexport default class CopyPastePlugin implements EditorPlugin {\n private editor: IEditor \| null = null;\n // don't set value in constructor to be able to update it without plugin recreation\n ~~/ @conditional-compile-remove(rich-text-editor-image-upload) /\n~~ onPaste?: (event: { content: DocumentFragment }) => void;\n ~~/ @conditional-compile-remove(rich-text-editor-image-upload) /\n~~ onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n ~~/ @conditional-compile-remove(rich-text-editor-image-upload) /\n~~ private imageBase64DataMap: Record<string, string> = {};\n\n getName(): string {\n return 'CopyPastePlugin';\n }\n\n initialize(editor: IEditor): void {\n this.editor = editor;\n }\n\n dispose(): void {}\n\n ~~/ @conditional-compile-remove(rich-text-editor-image-upload) /\n~~ private handleInlineImage = (event: PluginEvent): void => {\n if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && this.onInsertInlineImage) {\n event.fragment.querySelectorAll('img').forEach((image) => {\n // Assign a unique id to the image element so Contosos can identify the image element.\n // We also use it internally such as in getRemovedInlineImages to compare images in the content with previous images\n image.id = generateGUID();\n\n const clipboardImage = event.clipboardData.image;\n const fileName ~~=\n~~ clipboardImage?.name ~~\|\|\n~~ clipboardImage?.type.replace('/', '.') ~~\|\|\n~~ image.getAttribute(_IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY) ~~\|\|\n~~ '';\n // If the image src is an external url, call the onInsertInlineImage callback with the url.\n let imageUrl = image.src;\n if (image.src.startsWith('data:image/')) {\n this.imageBase64DataMap[image.id] = image.src;\n\n const blobImage = _base64ToBlob(image.src);\n imageUrl = URL.createObjectURL(blobImage);\n }\n\n image.src = imageUrl;\n image.alt = image.alt \|\| 'image';\n\n image.dataset.imageFileName = fileName;\n\n const imageAttributes = getInlineImageAttributes(image);\n\n this.onInsertInlineImage && this.onInsertInlineImage(imageAttributes);\n });\n }\n };\n\n onPluginEvent(event: PluginEvent): void {\n ~~/ @conditional-compile-remove(rich-text-editor-image-upload) /\n~~ if (event.eventType === PluginEventType.BeforeCutCopy) {\n event.clonedRoot.querySelectorAll('img').forEach(async (image) => {\n if (image.src.startsWith('blob:')) {\n const base64Data = this.imageBase64DataMap[image.id];\n image.src = base64Data \|\| image.src;\n }\n });\n }\n\n / ~~@conditional-compile-remove(rich-text-editor-image-upload) /\n~~ // If onInsertInlineImage is not provided, we should remove the image tags before calling the onPaste callback\n if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && !this.onInsertInlineImage) {\n removeImageTags({ content: event.fragment });\n }\n\n handleBeforePasteEvent(event, ~~/ @conditional-compile-remove(rich-text-editor-image-upload) /~~ this.onPaste);\n\n / ~~@conditional-compile-remove(rich-text-editor-image-upload) /\n~~ // We should handle the onInsertInlineImage after the onPaste callback in case Contosos want to modify the image tags, especially the src attribute.\n if (this.onInsertInlineImage) {\n this.handleInlineImage(event);\n }\n\n if (this.editor !== null && !this.editor.isDisposed()) {\n // scroll the editor to the correct position after pasting content\n scrollToBottomAfterContentPaste(event);\n }\n }\n}\n\n/\n @internal\n * Exported only for unit testing\n /\nexport const handleBeforePasteEvent = (\n event: PluginEvent,\n / ~~@conditional-compile-remove(rich-text-editor-image-upload) /~~ onPaste?: (event: {\n content: DocumentFragment;\n }) => void\n): void => {\n if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal') {\n ~~/ @conditional-compile-remove(rich-text-editor-image-upload) /\n~~ onPaste?.({ content: event.fragment });\n ~~/ @conditional-compile-remove(rich-text-editor-image-upload) /\n~~ return;\n }\n};\n\n/\n Update the scroll position of the editor after pasting content to ensure the content is visible.\n * @param event - The plugin event.\n /\nexport const scrollToBottomAfterContentPaste = (event: PluginEvent): void => {\n if (event.eventType === PluginEventType.ContentChanged && event.source === ContentChangedEventSource.Paste) {\n ~~/ @conditional-compile-remove(rich-text-editor) */\n~~ scrollToBottomRichTextEditor();\n }\n}~~;\n~~"]}
1	+ {"version":3,"file":"CopyPastePlugin.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport type { PluginEvent, EditorPlugin, IEditor } from 'roosterjs-content-model-types';\nimport { scrollToBottomRichTextEditor } from '../../utils/RichTextEditorUtils';\nimport { ContentChangedEventSource, PluginEventType } from '../../utils/RichTextEditorUtils';\nimport { getInlineImageAttributes } from '../../utils/RichTextEditorUtils';\nimport { _base64ToBlob, removeImageTags, _IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY } from '@internal/acs-ui-common';\nimport { v1 as generateGUID } from 'uuid';\n\n/*\n CopyPastePlugin is a plugin for handling copy and paste events in the editor.\n /\nexport default class CopyPastePlugin implements EditorPlugin {\n private editor: IEditor \| null = null;\n // don't set value in constructor to be able to update it without plugin recreation\n onPaste?: (event: {\n content: DocumentFragment;\n }) => void;\n onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n private imageBase64DataMap: Record<string, string> = {};\n getName(): string {\n return 'CopyPastePlugin';\n }\n initialize(editor: IEditor): void {\n this.editor = editor;\n }\n dispose(): void {}\n private handleInlineImage = (event: PluginEvent): void => {\n if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && this.onInsertInlineImage) {\n event.fragment.querySelectorAll('img').forEach(image => {\n // Assign a unique id to the image element so Contosos can identify the image element.\n // We also use it internally such as in getRemovedInlineImages to compare images in the content with previous images\n image.id = generateGUID();\n const clipboardImage = event.clipboardData.image;\n const fileName = clipboardImage?.name \|\| clipboardImage?.type.replace('/', '.') \|\| image.getAttribute(_IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY) \|\| '';\n // If the image src is an external url, call the onInsertInlineImage callback with the url.\n let imageUrl = image.src;\n if (image.src.startsWith('data:image/')) {\n this.imageBase64DataMap[image.id] = image.src;\n const blobImage = _base64ToBlob(image.src);\n imageUrl = URL.createObjectURL(blobImage);\n }\n image.src = imageUrl;\n image.alt = image.alt \|\| 'image';\n image.dataset.imageFileName = fileName;\n const imageAttributes = getInlineImageAttributes(image);\n this.onInsertInlineImage && this.onInsertInlineImage(imageAttributes);\n });\n }\n };\n onPluginEvent(event: PluginEvent): void {\n if (event.eventType === PluginEventType.BeforeCutCopy) {\n event.clonedRoot.querySelectorAll('img').forEach(async image => {\n if (image.src.startsWith('blob:')) {\n const base64Data = this.imageBase64DataMap[image.id];\n image.src = base64Data \|\| image.src;\n }\n });\n } // If onInsertInlineImage is not provided, we should remove the image tags before calling the onPaste callback\n if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && !this.onInsertInlineImage) {\n removeImageTags({\n content: event.fragment\n });\n }\n handleBeforePasteEvent(event, this.onPaste); // We should handle the onInsertInlineImage after the onPaste callback in case Contosos want to modify the image tags, especially the src attribute.\n if (this.onInsertInlineImage) {\n this.handleInlineImage(event);\n }\n if (this.editor !== null && !this.editor.isDisposed()) {\n // scroll the editor to the correct position after pasting content\n scrollToBottomAfterContentPaste(event);\n }\n }\n}\n\n/\n @internal\n * Exported only for unit testing\n /\nexport const handleBeforePasteEvent = (event: PluginEvent, onPaste?: (event: {\n content: DocumentFragment;\n}) => void): void => {\n if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal') {\n onPaste?.({\n content: event.fragment\n });\n return;\n }\n};\n\n/\n Update the scroll position of the editor after pasting content to ensure the content is visible.\n * @param event - The plugin event.\n */\nexport const scrollToBottomAfterContentPaste = (event: PluginEvent): void => {\n if (event.eventType === PluginEventType.ContentChanged && event.source === ContentChangedEventSource.Paste) {\n scrollToBottomRichTextEditor();\n }\n};"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/KeyboardInputPlugin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KeyboardInputPlugin.js","sourceRoot":"","sources":["~~../../../../../../../../~~react-components/src/components/RichTextEditor/Plugins/KeyboardInputPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAElE;;GAEG;AACH,MAAM,OAAO,mBAAmB;IAAhC;QACE,4FAA4F;QAC5F,cAAS,GAA6C,IAAI,CAAC;~~IAe7D~~,CAAC;~~IAbC~~,OAAO;QACL,OAAO,qBAAqB,CAAC;IAC/B,CAAC;~~IAED~~,UAAU,KAAU,CAAC;~~IAErB~~,OAAO,KAAU,CAAC;~~IAElB~~,aAAa,CAAC,KAAkB;QAC9B,IAAI,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,YAAY,aAAa,EAAE,CAAC;YAC7G,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport type { PluginEvent, EditorPlugin } from 'roosterjs-content-model-types';\nimport { PluginEventType } from '../../utils/RichTextEditorUtils';\n\n/*\n KeyboardInputPlugin is a plugin for handling keyboard events in the editor.\n */\nexport class KeyboardInputPlugin implements EditorPlugin {\n // don't set callback in constructor to be able to update callback without plugin recreation\n onKeyDown?: ((event: KeyboardEvent) => void) \| null = null;\n\n getName(): string {\n return 'KeyboardInputPlugin';\n }\n\n initialize(): void {}\n\n dispose(): void {}\n\n onPluginEvent(event: PluginEvent): void {\n if (this.onKeyDown && event.eventType === PluginEventType.KeyDown && event.rawEvent instanceof KeyboardEvent) {\n this.onKeyDown(event.rawEvent);\n }\n }\n}\n"]}
1	+ {"version":3,"file":"KeyboardInputPlugin.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/KeyboardInputPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAElE;;GAEG;AACH,MAAM,OAAO,mBAAmB;IAAhC;QACE,4FAA4F;QAC5F,cAAS,GAA6C,IAAI,CAAC;IAW7D,CAAC;IAVC,OAAO;QACL,OAAO,qBAAqB,CAAC;IAC/B,CAAC;IACD,UAAU,KAAU,CAAC;IACrB,OAAO,KAAU,CAAC;IAClB,aAAa,CAAC,KAAkB;QAC9B,IAAI,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,YAAY,aAAa,EAAE,CAAC;YAC7G,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport type { PluginEvent, EditorPlugin } from 'roosterjs-content-model-types';\nimport { PluginEventType } from '../../utils/RichTextEditorUtils';\n\n/*\n KeyboardInputPlugin is a plugin for handling keyboard events in the editor.\n */\nexport class KeyboardInputPlugin implements EditorPlugin {\n // don't set callback in constructor to be able to update callback without plugin recreation\n onKeyDown?: ((event: KeyboardEvent) => void) \| null = null;\n getName(): string {\n return 'KeyboardInputPlugin';\n }\n initialize(): void {}\n dispose(): void {}\n onPluginEvent(event: PluginEvent): void {\n if (this.onKeyDown && event.eventType === PluginEventType.KeyDown && event.rawEvent instanceof KeyboardEvent) {\n this.onKeyDown(event.rawEvent);\n }\n }\n}"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/PlaceholderPlugin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlaceholderPlugin.js","sourceRoot":"","sources":["~~../../../../../../../../~~react-components/src/components/RichTextEditor/Plugins/PlaceholderPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAGlE;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,eAAe;IAAtD;;QACU,uBAAkB,GAAY,KAAK,CAAC;QACpC,gBAAW,GAAmB,IAAI,CAAC;~~IA+B7C~~,CAAC;IA7BC,iBAAiB,CAAC,WAAmB;QACnC,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;QAC7B,uDAAuD;QACvD,mEAAmE;QACnE,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAChD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IACD,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;QAC1B,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAEzB,uFAAuF;QACvF,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC;IACD,OAAO;QACL,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,KAAK,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC;IACS,IAAI,CAAC,MAAe;QAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;IACjC,CAAC;IACS,IAAI,CAAC,MAAe;QAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;IAClC,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { WatermarkPlugin } from 'roosterjs-content-model-plugins';\nimport type { IEditor } from 'roosterjs-content-model-types';\n\n/*\n PlaceholderPlugin is a plugin for displaying placeholder and handle localization for it in the editor.\n */\nexport class PlaceholderPlugin extends WatermarkPlugin {\n private isPlaceholderShown: boolean = false;\n private editorValue: IEditor \| null = null;\n\n updatePlaceholder(placeholder: string): void {\n this.watermark = placeholder;\n // hide and show the placeholder to show the latest one\n // this needs to be done only if the placeholder is currently shown\n if (this.editorValue && this.isPlaceholderShown) {\n this.hide(this.editorValue);\n this.show(this.editorValue);\n }\n }\n initialize(editor: IEditor): void {\n this.editorValue = editor;\n super.initialize(editor);\n\n // Hide/show the placeholder as workaround for the placeholder not hiding in some cases\n this.hide(this.editorValue);\n this.show(this.editorValue);\n }\n dispose(): void {\n this.editorValue = null;\n super.dispose();\n }\n protected show(editor: IEditor): void {\n super.show(editor);\n this.isPlaceholderShown = true;\n }\n protected hide(editor: IEditor): void {\n super.hide(editor);\n this.isPlaceholderShown = false;\n }\n}\n"]}
1	+ {"version":3,"file":"PlaceholderPlugin.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/PlaceholderPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAGlE;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,eAAe;IAAtD;;QACU,uBAAkB,GAAY,KAAK,CAAC;QACpC,gBAAW,GAAmB,IAAI,CAAC;IA8B7C,CAAC;IA7BC,iBAAiB,CAAC,WAAmB;QACnC,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;QAC7B,uDAAuD;QACvD,mEAAmE;QACnE,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAChD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IACD,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;QAC1B,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAEzB,uFAAuF;QACvF,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC;IACD,OAAO;QACL,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,KAAK,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC;IACS,IAAI,CAAC,MAAe;QAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;IACjC,CAAC;IACS,IAAI,CAAC,MAAe;QAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;IAClC,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { WatermarkPlugin } from 'roosterjs-content-model-plugins';\nimport type { IEditor } from 'roosterjs-content-model-types';\n\n/*\n PlaceholderPlugin is a plugin for displaying placeholder and handle localization for it in the editor.\n */\nexport class PlaceholderPlugin extends WatermarkPlugin {\n private isPlaceholderShown: boolean = false;\n private editorValue: IEditor \| null = null;\n updatePlaceholder(placeholder: string): void {\n this.watermark = placeholder;\n // hide and show the placeholder to show the latest one\n // this needs to be done only if the placeholder is currently shown\n if (this.editorValue && this.isPlaceholderShown) {\n this.hide(this.editorValue);\n this.show(this.editorValue);\n }\n }\n initialize(editor: IEditor): void {\n this.editorValue = editor;\n super.initialize(editor);\n\n // Hide/show the placeholder as workaround for the placeholder not hiding in some cases\n this.hide(this.editorValue);\n this.show(this.editorValue);\n }\n dispose(): void {\n this.editorValue = null;\n super.dispose();\n }\n protected show(editor: IEditor): void {\n super.show(editor);\n this.isPlaceholderShown = true;\n }\n protected hide(editor: IEditor): void {\n super.hide(editor);\n this.isPlaceholderShown = false;\n }\n}"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/RichTextToolbarPlugin.js CHANGED Viewed

@@ -51,12 +51,10 @@ export class RichTextToolbarPlugin {
         if (this.editor && this.onFormatChanged) {
             const newFormatState = getFormatState(this.editor);
             // use keys from the format that has more keys or the new format state if there is no current format state
-            const keys = !this.formatState || getObjectKeys(newFormatState).length > getObjectKeys(this.formatState).length
-                ? getObjectKeys(newFormatState)
-                : getObjectKeys(this.formatState);
+            const keys = !this.formatState || getObjectKeys(newFormatState).length > getObjectKeys(this.formatState).length ? getObjectKeys(newFormatState) : getObjectKeys(this.formatState);
             // check if there is any difference between the new format state and the current format state
             // otherwise the states will produce new objects every time even when the format state is the same
-            if (!this.formatState || keys.some((key) => { var _a; return newFormatState[key] !== ((_a = this.formatState) === null || _a === void 0 ? void 0 : _a[key]); })) {
+            if (!this.formatState || keys.some(key => { var _a; return newFormatState[key] !== ((_a = this.formatState) === null || _a === void 0 ? void 0 : _a[key]); })) {
                 this.formatState = newFormatState;
                 this.onFormatChanged(newFormatState);
             }

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/RichTextToolbarPlugin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextToolbarPlugin.js","sourceRoot":"","sources":["~~../../../../../../../../~~react-components/src/components/RichTextEditor/Plugins/RichTextToolbarPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAElE;;GAEG;AACH,MAAM,OAAO,qBAAqB;IAAlC;QACU,gBAAW,GAAmC,IAAI,CAAC;QACnD,WAAM,GAAmB,IAAI,CAAC;QACtC,oBAAe,GAA4D,IAAI,CAAC;~~IA0DlF~~,CAAC;~~IAxDC~~,OAAO;QACL,OAAO,uBAAuB,CAAC;IACjC,CAAC;~~IAED~~,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;~~IAED~~,OAAO;QACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;~~IAED~~,aAAa,CAAC,KAAkB;QAC9B,QAAQ,KAAK,CAAC,SAAS,EAAE,CAAC;YACxB,4GAA4G;YAC5G,KAAK,eAAe,CAAC,WAAW,CAAC;YACjC,KAAK,eAAe,CAAC,cAAc,CAAC;YACpC,KAAK,eAAe,CAAC,WAAW,CAAC;YACjC,KAAK,eAAe,CAAC,OAAO,CAAC;YAC7B,KAAK,eAAe,CAAC,OAAO;gBAC1B,IAAI,CAAC,YAAY,EAAE,CAAC;gBACpB,MAAM;QACV,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,oBAAoB,CAAC,YAAuC;QAC1D,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;YAC7C,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAC1B,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,YAAY;QACV,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACxC,MAAM,cAAc,GAAG,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACnD,0GAA0G;YAC1G,MAAM,IAAI,~~GACR~~,CAAC,IAAI,CAAC,WAAW,IAAI,aAAa,CAAC,cAAc,CAAC,CAAC,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM~~;gBAChG~~,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC~~;gBAC/B~~,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;~~YACtC~~,6FAA6F;YAC7F,kGAAkG;YAClG,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,~~CAAC,~~GAAG,~~EAAE~~,EAAE,WAAC,OAAA,cAAc,CAAC,GAAG,CAAC,MAAK,MAAA,IAAI,CAAC,WAAW,0CAAG,GAAG,CAAC,CAAA,CAAA,EAAA,CAAC,EAAE,CAAC;~~gBAC7F~~,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC;gBAClC,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;YACvC,CAAC;QACH,CAAC;IACH,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { getFormatState } from 'roosterjs-content-model-api';\nimport { getObjectKeys } from 'roosterjs-content-model-dom';\nimport type { ContentModelFormatState, EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';\nimport { PluginEventType } from '../../utils/RichTextEditorUtils';\n\n/*\n KeyboardInputPlugin is a plugin for handling keyboard events in the editor.\n /\nexport class RichTextToolbarPlugin implements EditorPlugin {\n private formatState: ContentModelFormatState \| null = null;\n private editor: IEditor \| null = null;\n onFormatChanged: ((formatState: ContentModelFormatState) => void) \| null = null;\n\n getName(): string {\n return 'RichTextToolbarPlugin';\n }\n\n initialize(editor: IEditor): void {\n this.editor = editor;\n }\n\n dispose(): void {\n this.editor = null;\n }\n\n onPluginEvent(event: PluginEvent): void {\n switch (event.eventType) {\n // KeyDown and MouseUp are used to update the state when the editor is already shown and focused by the user\n case PluginEventType.EditorReady:\n case PluginEventType.ContentChanged:\n case PluginEventType.ZoomChanged:\n case PluginEventType.KeyDown:\n case PluginEventType.MouseUp:\n this.updateFormat();\n break;\n }\n }\n\n /\n Handles the click event of a toolbar button.\n * @param buttonAction - The action to be performed when the button is clicked.\n /\n onToolbarButtonClick(buttonAction: (editor: IEditor) => void): void {\n if (this.editor && !this.editor.isDisposed()) {\n buttonAction(this.editor);\n this.updateFormat();\n }\n }\n\n /\n Updates the format state of the rich text editor and triggers the `onFormatChanged` callback\n * if there is any difference between the new and the current format states.\n */\n updateFormat(): void {\n if (this.editor && this.onFormatChanged) {\n const newFormatState = getFormatState(this.editor);\n // use keys from the format that has more keys or the new format state if there is no current format state\n const keys ~~=\n~~ !this.formatState \|\| getObjectKeys(newFormatState).length > getObjectKeys(this.formatState).length\n ? getObjectKeys(newFormatState)\n : getObjectKeys(this.formatState);\n // check if there is any difference between the new format state and the current format state\n // otherwise the states will produce new objects every time even when the format state is the same\n if (!this.formatState \|\| keys.some((key) => newFormatState[key] !== this.formatState?.[key])) {\n this.formatState = newFormatState;\n this.onFormatChanged(newFormatState);\n }\n }\n }\n}\n"]}
1	+ {"version":3,"file":"RichTextToolbarPlugin.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/RichTextToolbarPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAElE;;GAEG;AACH,MAAM,OAAO,qBAAqB;IAAlC;QACU,gBAAW,GAAmC,IAAI,CAAC;QACnD,WAAM,GAAmB,IAAI,CAAC;QACtC,oBAAe,GAA4D,IAAI,CAAC;IAmDlF,CAAC;IAlDC,OAAO;QACL,OAAO,uBAAuB,CAAC;IACjC,CAAC;IACD,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IACD,OAAO;QACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IACD,aAAa,CAAC,KAAkB;QAC9B,QAAQ,KAAK,CAAC,SAAS,EAAE,CAAC;YACxB,4GAA4G;YAC5G,KAAK,eAAe,CAAC,WAAW,CAAC;YACjC,KAAK,eAAe,CAAC,cAAc,CAAC;YACpC,KAAK,eAAe,CAAC,WAAW,CAAC;YACjC,KAAK,eAAe,CAAC,OAAO,CAAC;YAC7B,KAAK,eAAe,CAAC,OAAO;gBAC1B,IAAI,CAAC,YAAY,EAAE,CAAC;gBACpB,MAAM;QACV,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,oBAAoB,CAAC,YAAuC;QAC1D,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;YAC7C,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAC1B,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,YAAY;QACV,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACxC,MAAM,cAAc,GAAG,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACnD,0GAA0G;YAC1G,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,aAAa,CAAC,cAAc,CAAC,CAAC,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAClL,6FAA6F;YAC7F,kGAAkG;YAClG,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,WAAC,OAAA,cAAc,CAAC,GAAG,CAAC,MAAK,MAAA,IAAI,CAAC,WAAW,0CAAG,GAAG,CAAC,CAAA,CAAA,EAAA,CAAC,EAAE,CAAC;gBAC3F,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC;gBAClC,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;YACvC,CAAC;QACH,CAAC;IACH,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { getFormatState } from 'roosterjs-content-model-api';\nimport { getObjectKeys } from 'roosterjs-content-model-dom';\nimport type { ContentModelFormatState, EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';\nimport { PluginEventType } from '../../utils/RichTextEditorUtils';\n\n/*\n KeyboardInputPlugin is a plugin for handling keyboard events in the editor.\n /\nexport class RichTextToolbarPlugin implements EditorPlugin {\n private formatState: ContentModelFormatState \| null = null;\n private editor: IEditor \| null = null;\n onFormatChanged: ((formatState: ContentModelFormatState) => void) \| null = null;\n getName(): string {\n return 'RichTextToolbarPlugin';\n }\n initialize(editor: IEditor): void {\n this.editor = editor;\n }\n dispose(): void {\n this.editor = null;\n }\n onPluginEvent(event: PluginEvent): void {\n switch (event.eventType) {\n // KeyDown and MouseUp are used to update the state when the editor is already shown and focused by the user\n case PluginEventType.EditorReady:\n case PluginEventType.ContentChanged:\n case PluginEventType.ZoomChanged:\n case PluginEventType.KeyDown:\n case PluginEventType.MouseUp:\n this.updateFormat();\n break;\n }\n }\n\n /\n Handles the click event of a toolbar button.\n * @param buttonAction - The action to be performed when the button is clicked.\n /\n onToolbarButtonClick(buttonAction: (editor: IEditor) => void): void {\n if (this.editor && !this.editor.isDisposed()) {\n buttonAction(this.editor);\n this.updateFormat();\n }\n }\n\n /\n Updates the format state of the rich text editor and triggers the `onFormatChanged` callback\n * if there is any difference between the new and the current format states.\n */\n updateFormat(): void {\n if (this.editor && this.onFormatChanged) {\n const newFormatState = getFormatState(this.editor);\n // use keys from the format that has more keys or the new format state if there is no current format state\n const keys = !this.formatState \|\| getObjectKeys(newFormatState).length > getObjectKeys(this.formatState).length ? getObjectKeys(newFormatState) : getObjectKeys(this.formatState);\n // check if there is any difference between the new format state and the current format state\n // otherwise the states will produce new objects every time even when the format state is the same\n if (!this.formatState \|\| keys.some(key => newFormatState[key] !== this.formatState?.[key])) {\n this.formatState = newFormatState;\n this.onFormatChanged(newFormatState);\n }\n }\n }\n}"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/TableEditContextMenuProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableEditContextMenuProvider.js","sourceRoot":"","sources":["~~../../../../../../../../~~react-components/src/components/RichTextEditor/Plugins/TableEditContextMenuProvider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAE9E;;GAEG;AACH,MAAM,OAAO,4BAA4B;IAAzC;QACU,WAAM,GAAmB,IAAI,CAAC;QACtC,YAAO,GAA6B,EAAE,CAAC;QAC/B,UAAK,GAAiC,IAAI,CAAC;~~IAgCrD~~,CAAC;~~IA9BC~~,aAAa,CAAC,OAAiC;QAC7C,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,GAAG,4BAA4B,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;~~IAED~~,OAAO;QACL,OAAO,8BAA8B,CAAC;IACxC,CAAC;~~IAED~~,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,4BAA4B,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAClE,CAAC;IAED;;OAEG;IACH,OAAO;QACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;~~IAED~~,mBAAmB,CAAC,IAAU;QAC5B,IAAI,IAAI,CAAC,MAAM,IAAI,eAAe,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC;YACtD,OAAO,IAAI,CAAC,KAAK,CAAC;QACpB,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;CACF;~~AAED~~,MAAM,eAAe,GAAG,CAAC,MAAe,EAAE,IAAU,EAAW,EAAE;IAC/D,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,SAAS,CAAC,0BAA0B,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAG,EAAE,IAAI,SAAS,CAAC,0BAA0B,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;~~IAEtE~~,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,iBAAiB,MAAK,IAAI,CAAC;AAC3C,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport type { ContextMenuProvider, IEditor } from 'roosterjs-content-model-types';\nimport { RichTextStrings } from '../RichTextSendBox';\nimport { IContextualMenuItem } from '@fluentui/react';\nimport { getTableEditContextMenuItems } from '../../utils/RichTextTableUtils';\n\n/*\n Provides a context menu for editing tables in the rich text editor.\n /\nexport class TableEditContextMenuProvider implements ContextMenuProvider<IContextualMenuItem> {\n private editor: IEditor \| null = null;\n strings: Partial<RichTextStrings> = {};\n private items: IContextualMenuItem[] \| null = null;\n\n updateStrings(strings: Partial<RichTextStrings>): void {\n this.strings = strings;\n if (this.editor) {\n this.items = getTableEditContextMenuItems(this.editor, this.strings);\n }\n }\n\n getName(): string {\n return 'TableEditContextMenuProvider';\n }\n\n initialize(editor: IEditor): void {\n this.editor = editor;\n this.items = getTableEditContextMenuItems(editor, this.strings);\n }\n\n /\n Dispose this plugin\n */\n dispose(): void {\n this.editor = null;\n }\n\n getContextMenuItems(node: Node): IContextualMenuItem[] \| null {\n if (this.editor && isTableEditable(this.editor, node)) {\n return this.items;\n } else {\n return null;\n }\n }\n}\n\nconst isTableEditable = (editor: IEditor, node: Node): boolean => {\n const domHelper = editor.getDOMHelper();\n const td = domHelper.findClosestElementAncestor(node, 'TD,TH');\n const table = td && domHelper.findClosestElementAncestor(td, 'table');\n\n return table?.isContentEditable === true;\n}~~;\n~~"]}
1	+ {"version":3,"file":"TableEditContextMenuProvider.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/TableEditContextMenuProvider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAE9E;;GAEG;AACH,MAAM,OAAO,4BAA4B;IAAzC;QACU,WAAM,GAAmB,IAAI,CAAC;QACtC,YAAO,GAA6B,EAAE,CAAC;QAC/B,UAAK,GAAiC,IAAI,CAAC;IA4BrD,CAAC;IA3BC,aAAa,CAAC,OAAiC;QAC7C,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,GAAG,4BAA4B,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;IACD,OAAO;QACL,OAAO,8BAA8B,CAAC;IACxC,CAAC;IACD,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,4BAA4B,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAClE,CAAC;IAED;;OAEG;IACH,OAAO;QACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IACD,mBAAmB,CAAC,IAAU;QAC5B,IAAI,IAAI,CAAC,MAAM,IAAI,eAAe,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC;YACtD,OAAO,IAAI,CAAC,KAAK,CAAC;QACpB,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;CACF;AACD,MAAM,eAAe,GAAG,CAAC,MAAe,EAAE,IAAU,EAAW,EAAE;IAC/D,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,SAAS,CAAC,0BAA0B,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAG,EAAE,IAAI,SAAS,CAAC,0BAA0B,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IACtE,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,iBAAiB,MAAK,IAAI,CAAC;AAC3C,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport type { ContextMenuProvider, IEditor } from 'roosterjs-content-model-types';\nimport { RichTextStrings } from '../RichTextSendBox';\nimport { IContextualMenuItem } from '@fluentui/react';\nimport { getTableEditContextMenuItems } from '../../utils/RichTextTableUtils';\n\n/*\n Provides a context menu for editing tables in the rich text editor.\n /\nexport class TableEditContextMenuProvider implements ContextMenuProvider<IContextualMenuItem> {\n private editor: IEditor \| null = null;\n strings: Partial<RichTextStrings> = {};\n private items: IContextualMenuItem[] \| null = null;\n updateStrings(strings: Partial<RichTextStrings>): void {\n this.strings = strings;\n if (this.editor) {\n this.items = getTableEditContextMenuItems(this.editor, this.strings);\n }\n }\n getName(): string {\n return 'TableEditContextMenuProvider';\n }\n initialize(editor: IEditor): void {\n this.editor = editor;\n this.items = getTableEditContextMenuItems(editor, this.strings);\n }\n\n /\n Dispose this plugin\n */\n dispose(): void {\n this.editor = null;\n }\n getContextMenuItems(node: Node): IContextualMenuItem[] \| null {\n if (this.editor && isTableEditable(this.editor, node)) {\n return this.items;\n } else {\n return null;\n }\n }\n}\nconst isTableEditable = (editor: IEditor, node: Node): boolean => {\n const domHelper = editor.getDOMHelper();\n const td = domHelper.findClosestElementAncestor(node, 'TD,TH');\n const table = td && domHelper.findClosestElementAncestor(td, 'table');\n return table?.isContentEditable === true;\n};"]}