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

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

@@ -20,8 +20,7 @@ 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,
@@ -34,7 +33,18 @@ 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({
@@ -72,7 +82,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') {
@@ -82,33 +92,31 @@ 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

@@ -1 +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};"]}
+{"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"]}

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

@@ -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

@@ -1 +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};"]}
+{"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"]}

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

@@ -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

@@ -1 +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};"]}
+{"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"]}

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

@@ -1 +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}"]}
+{"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"]}

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

@@ -7,10 +7,14 @@ 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.
@@ -18,15 +22,20 @@ 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/')) {
@@ -51,6 +60,7 @@ 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:')) {
@@ -58,13 +68,15 @@ export default class CopyPastePlugin {
                     image.src = base64Data || image.src;
                 }
             }));
-        } // If onInsertInlineImage is not provided, we should remove the image tags before calling the onPaste callback
+        }
+        /* @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 (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && !this.onInsertInlineImage) {
-            removeImageTags({
-                content: event.fragment
-            });
+            removeImageTags({ content: event.fragment });
         }
-        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.
+        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.
         if (this.onInsertInlineImage) {
             this.handleInlineImage(event);
         }
@@ -78,11 +90,12 @@ export default class CopyPastePlugin {
  * @internal
  * Exported only for unit testing
  */
-export const handleBeforePasteEvent = (event, onPaste) => {
+export const handleBeforePasteEvent = (event, 
+/* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste) => {
     if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal') {
-        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 });
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         return;
     }
 };
@@ -92,6 +105,7 @@ export const handleBeforePasteEvent = (event, onPaste) => {
  */
 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

@@ -1 +1 @@
-{"version":3,"file":"CopyPastePlugin.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.tsx"],"names":[],"mappings":";;;;;;;;;AAGA,OAAO,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAC;AAC/E,OAAO,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAC7F,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,2CAA2C,EAAE,yCAAgC;AACtH,OAAO,EAAE,EAAE,IAAI,YAAY,EAAE,MAAM,MAAM,CAAC;AAE1C;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,eAAe;IAApC;QACU,WAAM,GAAmB,IAAI,CAAC;QAM9B,uBAAkB,GAA2B,EAAE,CAAC;QAQhD,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,KAAK,CAAC,EAAE;oBACrD,sFAAsF;oBACtF,oHAAoH;oBACpH,KAAK,CAAC,EAAE,GAAG,YAAY,EAAE,CAAC;oBAC1B,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;oBACjD,MAAM,QAAQ,GAAG,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,MAAI,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA,IAAI,KAAK,CAAC,YAAY,CAAC,2CAA2C,CAAC,IAAI,EAAE,CAAC;oBACzJ,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;wBAC9C,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;wBAC3C,QAAQ,GAAG,GAAG,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;oBAC5C,CAAC;oBACD,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC;oBACrB,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,OAAO,CAAC;oBACjC,KAAK,CAAC,OAAO,CAAC,aAAa,GAAG,QAAQ,CAAC;oBACvC,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;oBACxD,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,mBAAmB,CAAC,eAAe,CAAC,CAAC;gBACxE,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;IAwBJ,CAAC;IArDC,OAAO;QACL,OAAO,iBAAiB,CAAC;IAC3B,CAAC;IACD,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IACD,OAAO,KAAU,CAAC;IAwBlB,aAAa,CAAC,KAAkB;QAC9B,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,aAAa,EAAE,CAAC;YACtD,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAM,KAAK,EAAC,EAAE;gBAC7D,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,CAAC,8GAA8G;QAChH,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,WAAW,IAAI,KAAK,CAAC,SAAS,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACjH,eAAe,CAAC;gBACd,OAAO,EAAE,KAAK,CAAC,QAAQ;aACxB,CAAC,CAAC;QACL,CAAC;QACD,sBAAsB,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,oJAAoJ;QACjM,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7B,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;QACD,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,CAAC,KAAkB,EAAE,OAEjD,EAAQ,EAAE;IAClB,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,WAAW,IAAI,KAAK,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC;QACpF,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG;YACR,OAAO,EAAE,KAAK,CAAC,QAAQ;SACxB,CAAC,CAAC;QACH,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,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';\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};"]}
+{"version":3,"file":"CopyPastePlugin.js","sourceRoot":"","sources":["../../../../../../../../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';\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"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/KeyboardInputPlugin.d.ts

@@ -1,11 +1,18 @@
-import type { PluginEvent, EditorPlugin } from 'roosterjs-content-model-types';
+import type { PluginEvent, EditorPlugin, IEditor } from 'roosterjs-content-model-types';
 /**
  * KeyboardInputPlugin is a plugin for handling keyboard events in the editor.
  */
 export declare class KeyboardInputPlugin implements EditorPlugin {
+    private editor;
+    private disposer;
     onKeyDown?: ((event: KeyboardEvent) => void) | null;
+    onCompositionUpdate?: (() => void) | null;
     getName(): string;
-    initialize(): void;
+    /**
+     * Initialize this plugin
+     * @param editor The editor instance
+     */
+    initialize(editor: IEditor): void;
     dispose(): void;
     onPluginEvent(event: PluginEvent): void;
 }

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

@@ -6,14 +6,32 @@ import { PluginEventType } from '../../utils/RichTextEditorUtils';
  */
 export class KeyboardInputPlugin {
     constructor() {
+        this.editor = null;
+        this.disposer = null;
         // don't set callback in constructor to be able to update callback without plugin recreation
         this.onKeyDown = null;
+        this.onCompositionUpdate = null;
     }
     getName() {
         return 'KeyboardInputPlugin';
     }
-    initialize() { }
-    dispose() { }
+    /**
+     * Initialize this plugin
+     * @param editor The editor instance
+     */
+    initialize(editor) {
+        this.editor = editor;
+        this.disposer = this.editor.attachDomEvent({
+            compositionupdate: { beforeDispatch: this.onCompositionUpdate }
+        });
+    }
+    dispose() {
+        this.editor = null;
+        if (this.disposer) {
+            this.disposer();
+            this.disposer = null;
+        }
+    }
     onPluginEvent(event) {
         if (this.onKeyDown && event.eventType === PluginEventType.KeyDown && event.rawEvent instanceof KeyboardEvent) {
             this.onKeyDown(event.rawEvent);

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

@@ -1 +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}"]}
+{"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;QACU,WAAM,GAAmB,IAAI,CAAC;QAC9B,aAAQ,GAAwB,IAAI,CAAC;QAC7C,4FAA4F;QAC5F,cAAS,GAA6C,IAAI,CAAC;QAC3D,wBAAmB,GAAyB,IAAI,CAAC;IA8BnD,CAAC;IA5BC,OAAO;QACL,OAAO,qBAAqB,CAAC;IAC/B,CAAC;IACD;;;OAGG;IACH,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;YACzC,iBAAiB,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,mBAAmB,EAAE;SAChE,CAAC,CAAC;IACL,CAAC;IAED,OAAO;QACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QAEnB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;IACH,CAAC;IAED,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, IEditor } 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  private editor: IEditor | null = null;\n  private disposer: (() => void) | null = null;\n  // don't set callback in constructor to be able to update callback without plugin recreation\n  onKeyDown?: ((event: KeyboardEvent) => void) | null = null;\n  onCompositionUpdate?: (() => void) | null = null;\n\n  getName(): string {\n    return 'KeyboardInputPlugin';\n  }\n  /**\n   * Initialize this plugin\n   * @param editor The editor instance\n   */\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n    this.disposer = this.editor.attachDomEvent({\n      compositionupdate: { beforeDispatch: this.onCompositionUpdate }\n    });\n  }\n\n  dispose(): void {\n    this.editor = null;\n\n    if (this.disposer) {\n      this.disposer();\n      this.disposer = null;\n    }\n  }\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"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/PlaceholderPlugin.d.ts

@@ -6,10 +6,12 @@ import type { IEditor } from 'roosterjs-content-model-types';
 export declare class PlaceholderPlugin extends WatermarkPlugin {
     private isPlaceholderShown;
     private editorValue;
+    private disposer;
     updatePlaceholder(placeholder: string): void;
     initialize(editor: IEditor): void;
     dispose(): void;
     protected show(editor: IEditor): void;
     protected hide(editor: IEditor): void;
+    private onCompositionStart;
 }
 //# sourceMappingURL=PlaceholderPlugin.d.ts.map

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

@@ -9,6 +9,13 @@ export class PlaceholderPlugin extends WatermarkPlugin {
         super(...arguments);
         this.isPlaceholderShown = false;
         this.editorValue = null;
+        this.disposer = null;
+        this.onCompositionStart = () => {
+            if (this.editorValue && this.isPlaceholderShown) {
+                // Hide the placeholder when composition starts
+                this.hide(this.editorValue);
+            }
+        };
     }
     updatePlaceholder(placeholder) {
         this.watermark = placeholder;
@@ -25,9 +32,16 @@ export class PlaceholderPlugin extends WatermarkPlugin {
         // Hide/show the placeholder as workaround for the placeholder not hiding in some cases
         this.hide(this.editorValue);
         this.show(this.editorValue);
+        this.disposer = this.editorValue.attachDomEvent({
+            compositionstart: { beforeDispatch: this.onCompositionStart }
+        });
     }
     dispose() {
         this.editorValue = null;
+        if (this.disposer) {
+            this.disposer();
+            this.disposer = null;
+        }
         super.dispose();
     }
     show(editor) {

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

@@ -1 +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}"]}
+{"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;QACnC,aAAQ,GAAwB,IAAI,CAAC;QA0CrC,uBAAkB,GAAG,GAAS,EAAE;YACtC,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAChD,+CAA+C;gBAC/C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;IA9CC,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;QAE5B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC;YAC9C,gBAAgB,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,kBAAkB,EAAE;SAC9D,CAAC,CAAC;IACL,CAAC;IAED,OAAO;QACL,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;QACD,KAAK,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC;IAES,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;CAQF","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  private disposer: (() => void) | 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    this.disposer = this.editorValue.attachDomEvent({\n      compositionstart: { beforeDispatch: this.onCompositionStart }\n    });\n  }\n\n  dispose(): void {\n    this.editorValue = null;\n    if (this.disposer) {\n      this.disposer();\n      this.disposer = null;\n    }\n    super.dispose();\n  }\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  private onCompositionStart = (): void => {\n    if (this.editorValue && this.isPlaceholderShown) {\n      // Hide the placeholder when composition starts\n      this.hide(this.editorValue);\n    }\n  };\n}\n"]}

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

@@ -51,10 +51,12 @@ 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

@@ -1 +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}"]}
+{"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"]}

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

@@ -1 +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};"]}
+{"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"]}