@azure/communication-react 1.17.0-alpha-202406070015 → 1.17.0

package/dist/dist-esm/react-components/src/components/MeetingConferencePhoneInfo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MeetingConferencePhoneInfo.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MeetingConferencePhoneInfo.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport React, { useCallback } from 'react';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton, Icon } from '@fluentui/react';\n\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport {\n  themedPhoneInfoModalStyle,\n  titleClassName,\n  titleContainerClassName,\n  phoneInfoTextStyle,\n  phoneInfoIcon,\n  phoneInfoInctructionLine,\n  phoneInfoStep,\n  stepTextStyle,\n  infoConnectionLinkStyle,\n  phoneInfoIconStyle\n} from './styles/TeamsMeetingConferenceInfo';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { isPossiblePhoneNumber, parsePhoneNumber } from 'libphonenumber-js';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * strings for phone info modal\n * @beta\n */\nexport interface MeetingConferencePhoneInfoModalStrings {\n  /**\n   * Header for the phone info modal\n   */\n  meetingConferencePhoneInfoModalTitle?: string;\n  /**\n   * Phone number instruction\n   */\n  meetingConferencePhoneInfoModalDialIn?: string;\n  /**\n   * Meeting ID instruction\n   */\n  meetingConferencePhoneInfoModalMeetingId?: string;\n  /**\n   * Wait for phone connection\n   */\n  meetingConferencePhoneInfoModalWait?: string;\n  /**\n   * Toll Free Phone Label\n   */\n  meetingConferencePhoneInfoModalTollFree?: string;\n  /**\n   * Toll Free Phone Label without geo data\n   */\n  meetingConferencePhoneInfoModalTollFreeWithoutGeoData?: string;\n  /**\n   * Toll Phone Label\n   */\n  meetingConferencePhoneInfoModalToll?: string;\n  /**\n   * Toll Phone Label without geo data\n   */\n  meetingConferencePhoneInfoModalTollWithoutGeoData?: string;\n  /**\n   * No phone number available message\n   */\n  meetingConferencePhoneInfoModalNoPhoneAvailable?: string;\n}\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @beta\n * MeetingConferencePhoneInfoModal Component Props.\n */\nexport interface MeetingConferencePhoneInfoModalProps {\n  conferencePhoneInfoList: ConferencePhoneInfo[];\n  showModal?: boolean;\n  onDismissMeetingPhoneInfoSettings?: () => void;\n}\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @beta\n * a component for setting spoken languages\n */\nexport const MeetingConferencePhoneInfoModal = (props: MeetingConferencePhoneInfoModalProps): JSX.Element => {\n  const { conferencePhoneInfoList, showModal, onDismissMeetingPhoneInfoSettings } = props;\n\n  const theme = useTheme();\n  const strings = useLocale().strings.MeetingConferencePhoneInfo;\n\n  const onDismiss = useCallback((): void => {\n    if (onDismissMeetingPhoneInfoSettings) {\n      onDismissMeetingPhoneInfoSettings();\n    }\n  }, [onDismissMeetingPhoneInfoSettings]);\n\n  const PhoneInfoModalStyle: Partial<IModalStyles> = useMemo(() => themedPhoneInfoModalStyle(theme), [theme]);\n\n  return (\n    <>\n      <Modal\n        titleAriaId={strings?.meetingConferencePhoneInfoModalTitle}\n        isOpen={showModal}\n        onDismiss={onDismiss}\n        isBlocking={true}\n        styles={PhoneInfoModalStyle}\n      >\n        <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n          <Text className={titleClassName}>{strings?.meetingConferencePhoneInfoModalTitle}</Text>\n          <IconButton\n            iconProps={{ iconName: 'Cancel' }}\n            ariaLabel={strings?.meetingConferencePhoneInfoModalTitle}\n            onClick={onDismiss}\n            style={{ color: theme.palette.black }}\n          />\n        </Stack>\n        {conferencePhoneInfoList.length === 0 && (\n          <Stack horizontal>\n            <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalNoPhoneAvailable}</Text>\n          </Stack>\n        )}\n        {conferencePhoneInfoList.length > 0 && (\n          <Stack>\n            <Stack horizontal horizontalAlign=\"space-between\" className={phoneInfoInctructionLine}>\n              <Stack.Item style={{ display: 'flex' }}>\n                <Stack horizontal className={phoneInfoStep}>\n                  <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n                  <Stack.Item className={phoneInfoIcon(theme)}>\n                    <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n                      <Icon iconName=\"PhoneNumberButton\" className={phoneInfoIconStyle(theme)} />\n                    </Stack>\n                  </Stack.Item>\n                  <Stack.Item>\n                    <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalDialIn}</Text>\n                  </Stack.Item>\n                </Stack>\n              </Stack.Item>\n              <Stack.Item className={phoneInfoStep}>\n                {conferencePhoneInfoList.map((phoneNumber, index) => (\n                  <Stack.Item key={index}>\n                    <Text className={phoneInfoTextStyle}>{formatPhoneNumberInfo(phoneNumber, strings)}</Text>\n                  </Stack.Item>\n                ))}\n              </Stack.Item>\n            </Stack>\n            <Stack\n              horizontal\n              horizontalAlign=\"space-between\"\n              verticalAlign=\"center\"\n              className={phoneInfoInctructionLine}\n            >\n              <Stack.Item style={{ display: 'flex' }}>\n                <Stack horizontal>\n                  <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n                  <Stack.Item className={phoneInfoIcon(theme)}>\n                    <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n                      <Icon iconName=\"DtmfDialpadButton\" className={phoneInfoIconStyle(theme)} />\n                    </Stack>\n                  </Stack.Item>\n                  <Stack.Item>\n                    <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalMeetingId}</Text>\n                  </Stack.Item>\n                </Stack>\n              </Stack.Item>\n              <Text className={phoneInfoTextStyle}>{formatMeetingId(conferencePhoneInfoList[0].conferenceId)}</Text>\n            </Stack>\n            <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n              <Stack horizontal>\n                <Stack.Item className={phoneInfoIcon(theme)} style={{ marginLeft: _pxToRem(2) }}>\n                  <Icon iconName=\"PhoneInfoWait\" className={phoneInfoIconStyle(theme)} />\n                </Stack.Item>\n                <Stack.Item>\n                  <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalWait}</Text>\n                </Stack.Item>\n              </Stack>\n            </Stack>\n          </Stack>\n        )}\n      </Modal>\n    </>\n  );\n};\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @internal\n * format phone number\n */\nexport const formatPhoneNumber = (phoneNumber: string): string => {\n  if (!phoneNumber) {\n    return '';\n  }\n  let enchantedPhoneNumber = phoneNumber;\n  if (!phoneNumber.startsWith('+')) {\n    enchantedPhoneNumber = `+${phoneNumber}`;\n  }\n  if (isPossiblePhoneNumber(enchantedPhoneNumber)) {\n    return parsePhoneNumber(enchantedPhoneNumber)?.formatInternational() || enchantedPhoneNumber;\n  }\n  return phoneNumber;\n};\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @internal\n * format phone number\n */\nexport const formatPhoneNumberInfo = (\n  phoneNumber: ConferencePhoneInfo,\n  strings: MeetingConferencePhoneInfoModalStrings | undefined\n): string => {\n  const templateText = phoneNumber.isTollFree\n    ? phoneNumber.country && phoneNumber.city\n      ? strings?.meetingConferencePhoneInfoModalTollFree\n      : strings?.meetingConferencePhoneInfoModalTollFreeWithoutGeoData\n    : phoneNumber.country && phoneNumber.city\n    ? strings?.meetingConferencePhoneInfoModalToll\n    : strings?.meetingConferencePhoneInfoModalTollWithoutGeoData;\n  return (\n    templateText\n      ?.replace('{phoneNumber}', formatPhoneNumber(phoneNumber.phoneNumber))\n      .replace('{country}', phoneNumber.country || '')\n      .replace('{city}', phoneNumber.city || '')\n      .trim() || ''\n  );\n};\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @internal\n * format meeting id\n */\nexport const formatMeetingId = (meetingId?: string): string => {\n  if (!meetingId) {\n    return '';\n  }\n  if (meetingId?.length !== 9) {\n    return meetingId;\n  }\n\n  return [meetingId.slice(0, 3), meetingId.slice(3, 6), meetingId.slice(6, 9)].join(' ') + '#';\n};\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @public\n * Information for conference phone info\n */\nexport interface ConferencePhoneInfo {\n  phoneNumber: string;\n  conferenceId: string;\n  isTollFree: boolean;\n  country?: string;\n  city?: string;\n}\n"]}

package/dist/dist-esm/react-components/src/components/MentionPopover.d.ts

@@ -1,121 +0,0 @@
-import React from 'react';
-/**
- * Props for {@link _MentionPopover}.
- *
- * @internal
- */
-export interface _MentionPopoverProps {
-    /**
-     * Array of mention suggestions used to populate the suggestion list
-     */
-    suggestions: Mention[];
-    /**
-     * Index of the currently focused suggestion, if any
-     */
-    activeSuggestionIndex?: number;
-    /**
-     * Optional string used as mention popover's title.
-     * @defaultValue `Suggestions`
-     */
-    title?: string;
-    /**
-     * Element to anchor the popover to.
-     */
-    target: React.RefObject<Element>;
-    /**
-     * When rendering the popover, where to position it relative to the target.
-     */
-    targetPositionOffset?: {
-        top: number;
-        left: number;
-    };
-    /**
-     * Where to display the suggestions relative to the target.
-     * @defaultValue `above`
-     */
-    location?: 'above' | 'below';
-    /**
-     * Callback called when a mention suggestion is selected.
-     */
-    onSuggestionSelected: (suggestion: Mention) => void;
-    /**
-     * Callback to invoke when the popover is dismissed
-     */
-    onDismiss?: () => void;
-    /**
-     * Optional callback to render an item of the mention suggestions list.
-     */
-    onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, isActive: boolean) => JSX.Element;
-}
-/**
- * Options to lookup suggestions in the mention scenario.
- *
- * @beta
- */
-export interface MentionLookupOptions {
-    /**
-     * Optional string to set trigger keyword for mention a specific participant.
-     *
-     * @defaultValue `@`
-     */
-    trigger?: string;
-    /**
-     * Optional callback to fetch a list of mention suggestions base on the query.
-     */
-    onQueryUpdated: (query: string) => Promise<Mention[]>;
-    /**
-     * Optional callback to render an item of the mention suggestions list.
-     */
-    onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, isActive: boolean) => JSX.Element;
-}
-/**
- * Options to display suggestions in the mention scenario.
- *
- * @beta
- */
-export interface MentionDisplayOptions {
-    /**
-     * Optional callback for customizing the mention renderer in a message thread.
-     */
-    onRenderMention?: (mention: Mention, defaultOnRender: (mention: Mention) => JSX.Element) => JSX.Element;
-}
-/**
- * Options to lookup suggestions and display mentions in the mention scenario.
- *
- * @beta
- */
-export type MentionOptions = {
-    lookupOptions?: MentionLookupOptions;
-    displayOptions?: MentionDisplayOptions;
-};
-/**
- * Mention's state, as reflected in the UI.
- *
- * @beta
- */
-export interface Mention {
-    /** ID of a mention */
-    id: string;
-    /** Display text of a mention */
-    displayText: string;
-    /** Optional React element to render an item icon of a mention suggestion */
-    icon?: JSX.Element;
-}
-/**
- * Strings of {@link _MentionPopover} that can be overridden.
- *
- * @beta
- */
-export interface MentionPopoverStrings {
-    /**
-     * Header text for MentionPopover
-     */
-    mentionPopoverHeader: string;
-}
-/**
- * Component to render a pop-up of mention suggestions.
- *
- * @internal
- */
-export declare const _MentionPopover: (props: _MentionPopoverProps) => JSX.Element;
-//# sourceMappingURL=MentionPopover.d.ts.map

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

@@ -1,126 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React, { useEffect, useRef, useState, useCallback } from 'react';
-import { Persona, PersonaSize, Stack, mergeStyles, useTheme } from '@fluentui/react';
-import { mergeClasses } from '@fluentui/react-components';
-import { mentionPopoverContainerStyle, headerStyleThemed, suggestionItemStackStyle, suggestionItemWrapperStyle, useSuggestionListStyle } from './styles/MentionPopover.style';
-/* @conditional-compile-remove(mention) */
-import { useIdentifiers } from '../identifiers';
-import { useLocale } from '../localization';
-import { useDefaultStackStyles } from './styles/Stack.style';
-/**
- * Component to render a pop-up of mention suggestions.
- *
- * @internal
- */
-export const _MentionPopover = (props) => {
-    const { suggestions, activeSuggestionIndex, title, target, targetPositionOffset, onRenderSuggestionItem, onSuggestionSelected, onDismiss, location } = props;
-    const theme = useTheme();
-    /* @conditional-compile-remove(mention) */
-    const ids = useIdentifiers();
-    const localeStrings = useLocale().strings;
-    const popoverRef = useRef();
-    const suggestionsListRef = useRef(null);
-    const [position, setPosition] = useState();
-    const [hoveredSuggestion, setHoveredSuggestion] = useState(undefined);
-    const suggestionListStyle = useSuggestionListStyle();
-    const defaultStackStyles = useDefaultStackStyles();
-    const dismissPopoverWhenClickingOutside = useCallback((e) => {
-        const target = e.target;
-        if (popoverRef.current && !popoverRef.current.contains(target)) {
-            onDismiss && onDismiss();
-        }
-    }, [onDismiss]);
-    useEffect(() => {
-        if (suggestionsListRef.current && activeSuggestionIndex !== undefined && activeSuggestionIndex >= 0) {
-            const selectedItem = suggestionsListRef.current.children[activeSuggestionIndex];
-            if (selectedItem) {
-                selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-            }
-        }
-    }, [activeSuggestionIndex]);
-    useEffect(() => {
-        window && window.addEventListener('click', dismissPopoverWhenClickingOutside);
-        return () => {
-            window && window.removeEventListener('click', dismissPopoverWhenClickingOutside);
-        };
-    }, [dismissPopoverWhenClickingOutside]);
-    // Determine popover position
-    useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const rect = (_a = target === null || target === void 0 ? void 0 : target.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const maxWidth = 200;
-        const finalPosition = { maxWidth };
-        // Figure out whether it will fit horizontally
-        const leftOffset = (_b = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.left) !== null && _b !== void 0 ? _b : 0;
-        if (leftOffset + maxWidth > ((_c = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _c !== void 0 ? _c : 0)) {
-            finalPosition.right = ((_d = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _d !== void 0 ? _d : 0) - leftOffset;
-        }
-        else {
-            finalPosition.left = leftOffset;
-        }
-        // Offset between cursor and mention popover
-        const verticalOffset = 4;
-        if (location === 'below') {
-            finalPosition.top = ((_e = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _e !== void 0 ? _e : 0) + ((_f = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.top) !== null && _f !== void 0 ? _f : 0) + verticalOffset;
-        }
-        else {
-            // (location === 'above')
-            finalPosition.bottom = ((_g = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _g !== void 0 ? _g : 0) - ((_h = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.top) !== null && _h !== void 0 ? _h : 0) + verticalOffset;
-        }
-        setPosition(finalPosition);
-    }, [location, target, targetPositionOffset]);
-    const handleOnKeyDown = useCallback((e) => {
-        switch (e.key) {
-            case 'Escape':
-                onDismiss && onDismiss();
-                break;
-            default:
-                break;
-        }
-    }, [onDismiss]);
-    const personaRenderer = useCallback((displayName) => {
-        const avatarOptions = {
-            text: displayName.trim(),
-            size: PersonaSize.size24,
-            initialsColor: theme.palette.neutralLight,
-            initialsTextColor: theme.palette.neutralSecondary,
-            showOverflowTooltip: false,
-            showUnknownPersonaCoin: false
-        };
-        return React.createElement(Persona, Object.assign({}, avatarOptions));
-    }, [theme]);
-    const defaultOnRenderSuggestionItem = useCallback((suggestion, onSuggestionSelected, active) => {
-        return (React.createElement("div", { "data-is-focusable": true, "data-ui-id": ids.mentionSuggestionItem, key: suggestion.id, onClick: () => onSuggestionSelected(suggestion), onMouseEnter: () => setHoveredSuggestion(suggestion), onMouseLeave: () => setHoveredSuggestion(undefined), onKeyDown: (e) => {
-                handleOnKeyDown(e);
-            }, className: suggestionItemWrapperStyle(theme) },
-            React.createElement(Stack, { horizontal: true, className: suggestionItemStackStyle(theme, (hoveredSuggestion === null || hoveredSuggestion === void 0 ? void 0 : hoveredSuggestion.id) === suggestion.id, active) }, personaRenderer(suggestion.displayText))));
-    }, [
-        handleOnKeyDown,
-        theme,
-        /* @conditional-compile-remove(mention) */
-        ids,
-        hoveredSuggestion,
-        personaRenderer
-    ]);
-    const getHeaderTitle = useCallback(() => {
-        if (title) {
-            return title;
-        }
-        /* @conditional-compile-remove(mention) */
-        return localeStrings.mentionPopover.mentionPopoverHeader;
-        return '';
-    }, [localeStrings, title]);
-    return (React.createElement("div", { ref: popoverRef }, position && (React.createElement(Stack, { "data-testid": 'mention-suggestion-list-container', className: mergeStyles({
-            maxHeight: 212,
-            maxWidth: position.maxWidth
-        }, mentionPopoverContainerStyle(theme), Object.assign(Object.assign({}, position), { position: 'absolute' })) },
-        React.createElement(Stack.Item, { styles: headerStyleThemed(theme), "aria-label": title }, getHeaderTitle()),
-        React.createElement("div", { className: mergeClasses(defaultStackStyles.root, suggestionListStyle.root), "data-ui-id": ids.mentionSuggestionList, ref: suggestionsListRef }, suggestions.map((suggestion, index) => {
-            const active = index === activeSuggestionIndex;
-            return onRenderSuggestionItem
-                ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)
-                : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);
-        }))))));
-};
-//# sourceMappingURL=MentionPopover.js.map

package/dist/dist-esm/react-components/src/components/MentionPopover.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MentionPopover.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MentionPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { Persona, PersonaSize, Stack, mergeStyles, useTheme } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport {\n  mentionPopoverContainerStyle,\n  headerStyleThemed,\n  suggestionItemStackStyle,\n  suggestionItemWrapperStyle,\n  useSuggestionListStyle\n} from './styles/MentionPopover.style';\n/* @conditional-compile-remove(mention) */\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useDefaultStackStyles } from './styles/Stack.style';\n\n/**\n * Props for {@link _MentionPopover}.\n *\n * @internal\n */\nexport interface _MentionPopoverProps {\n  /**\n   * Array of mention suggestions used to populate the suggestion list\n   */\n  suggestions: Mention[];\n  /**\n   * Index of the currently focused suggestion, if any\n   */\n  activeSuggestionIndex?: number;\n  /**\n   * Optional string used as mention popover's title.\n   * @defaultValue `Suggestions`\n   */\n  title?: string;\n  /**\n   * Element to anchor the popover to.\n   */\n  target: React.RefObject<Element>;\n  /**\n   * When rendering the popover, where to position it relative to the target.\n   */\n  targetPositionOffset?: { top: number; left: number };\n  /**\n   * Where to display the suggestions relative to the target.\n   * @defaultValue `above`\n   */\n  location?: 'above' | 'below';\n  /**\n   * Callback called when a mention suggestion is selected.\n   */\n  onSuggestionSelected: (suggestion: Mention) => void;\n  /**\n   * Callback to invoke when the popover is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Optional callback to render an item of the mention suggestions list.\n   */\n  onRenderSuggestionItem?: (\n    suggestion: Mention,\n    onSuggestionSelected: (suggestion: Mention) => void,\n    isActive: boolean\n  ) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions in the mention scenario.\n *\n * @beta\n */\nexport interface MentionLookupOptions {\n  /**\n   * Optional string to set trigger keyword for mention a specific participant.\n   *\n   * @defaultValue `@`\n   */\n  trigger?: string;\n  /**\n   * Optional callback to fetch a list of mention suggestions base on the query.\n   */\n  onQueryUpdated: (query: string) => Promise<Mention[]>;\n  /**\n   * Optional callback to render an item of the mention suggestions list.\n   */\n  onRenderSuggestionItem?: (\n    suggestion: Mention,\n    onSuggestionSelected: (suggestion: Mention) => void,\n    isActive: boolean\n  ) => JSX.Element;\n}\n\n/**\n * Options to display suggestions in the mention scenario.\n *\n * @beta\n */\nexport interface MentionDisplayOptions {\n  /**\n   * Optional callback for customizing the mention renderer in a message thread.\n   */\n  onRenderMention?: (mention: Mention, defaultOnRender: (mention: Mention) => JSX.Element) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions and display mentions in the mention scenario.\n *\n * @beta\n */\nexport type MentionOptions = {\n  lookupOptions?: MentionLookupOptions;\n  displayOptions?: MentionDisplayOptions;\n};\n\n/**\n * Mention's state, as reflected in the UI.\n *\n * @beta\n */\nexport interface Mention {\n  /** ID of a mention */\n  id: string;\n  /** Display text of a mention */\n  displayText: string;\n  /** Optional React element to render an item icon of a mention suggestion */\n  icon?: JSX.Element;\n}\n\n/**\n * Strings of {@link _MentionPopover} that can be overridden.\n *\n * @beta\n */\nexport interface MentionPopoverStrings {\n  /**\n   * Header text for MentionPopover\n   */\n  mentionPopoverHeader: string;\n}\n\n/**\n * Component to render a pop-up of mention suggestions.\n *\n * @internal\n */\nexport const _MentionPopover = (props: _MentionPopoverProps): JSX.Element => {\n  interface Position {\n    left?: number;\n    right?: number;\n    top?: number;\n    bottom?: number;\n    maxWidth?: number;\n  }\n\n  const {\n    suggestions,\n    activeSuggestionIndex,\n    title,\n    target,\n    targetPositionOffset,\n    onRenderSuggestionItem,\n    onSuggestionSelected,\n    onDismiss,\n    location\n  } = props;\n\n  const theme = useTheme();\n  /* @conditional-compile-remove(mention) */\n  const ids = useIdentifiers();\n  const localeStrings = useLocale().strings;\n  const popoverRef = useRef() as React.MutableRefObject<HTMLDivElement>;\n  const suggestionsListRef = useRef<HTMLDivElement>(null);\n\n  const [position, setPosition] = useState<Position | undefined>();\n  const [hoveredSuggestion, setHoveredSuggestion] = useState<Mention | undefined>(undefined);\n\n  const suggestionListStyle = useSuggestionListStyle();\n  const defaultStackStyles = useDefaultStackStyles();\n\n  const dismissPopoverWhenClickingOutside = useCallback(\n    (e: MouseEvent) => {\n      const target = e.target as HTMLElement;\n      if (popoverRef.current && !popoverRef.current.contains(target)) {\n        onDismiss && onDismiss();\n      }\n    },\n    [onDismiss]\n  );\n\n  useEffect(() => {\n    if (suggestionsListRef.current && activeSuggestionIndex !== undefined && activeSuggestionIndex >= 0) {\n      const selectedItem = suggestionsListRef.current.children[activeSuggestionIndex];\n      if (selectedItem) {\n        selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n      }\n    }\n  }, [activeSuggestionIndex]);\n\n  useEffect(() => {\n    window && window.addEventListener('click', dismissPopoverWhenClickingOutside);\n    return () => {\n      window && window.removeEventListener('click', dismissPopoverWhenClickingOutside);\n    };\n  }, [dismissPopoverWhenClickingOutside]);\n\n  // Determine popover position\n  useEffect(() => {\n    const rect = target?.current?.getBoundingClientRect();\n    const maxWidth = 200;\n    const finalPosition: Position = { maxWidth };\n\n    // Figure out whether it will fit horizontally\n    const leftOffset = targetPositionOffset?.left ?? 0;\n    if (leftOffset + maxWidth > (rect?.width ?? 0)) {\n      finalPosition.right = (rect?.width ?? 0) - leftOffset;\n    } else {\n      finalPosition.left = leftOffset;\n    }\n    // Offset between cursor and mention popover\n    const verticalOffset = 4;\n    if (location === 'below') {\n      finalPosition.top = (rect?.height ?? 0) + (targetPositionOffset?.top ?? 0) + verticalOffset;\n    } else {\n      // (location === 'above')\n      finalPosition.bottom = (rect?.height ?? 0) - (targetPositionOffset?.top ?? 0) + verticalOffset;\n    }\n    setPosition(finalPosition);\n  }, [location, target, targetPositionOffset]);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      switch (e.key) {\n        case 'Escape':\n          onDismiss && onDismiss();\n          break;\n        default:\n          break;\n      }\n    },\n    [onDismiss]\n  );\n\n  const personaRenderer = useCallback(\n    (displayName: string): JSX.Element => {\n      const avatarOptions = {\n        text: displayName.trim(),\n        size: PersonaSize.size24,\n        initialsColor: theme.palette.neutralLight,\n        initialsTextColor: theme.palette.neutralSecondary,\n        showOverflowTooltip: false,\n        showUnknownPersonaCoin: false\n      };\n\n      return <Persona {...avatarOptions} />;\n    },\n    [theme]\n  );\n\n  const defaultOnRenderSuggestionItem = useCallback(\n    (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, active: boolean): JSX.Element => {\n      return (\n        <div\n          data-is-focusable={true}\n          /* @conditional-compile-remove(mention) */\n          data-ui-id={ids.mentionSuggestionItem}\n          key={suggestion.id}\n          onClick={() => onSuggestionSelected(suggestion)}\n          onMouseEnter={() => setHoveredSuggestion(suggestion)}\n          onMouseLeave={() => setHoveredSuggestion(undefined)}\n          onKeyDown={(e) => {\n            handleOnKeyDown(e);\n          }}\n          className={suggestionItemWrapperStyle(theme)}\n        >\n          <Stack\n            horizontal\n            className={suggestionItemStackStyle(theme, hoveredSuggestion?.id === suggestion.id, active)}\n          >\n            {personaRenderer(suggestion.displayText)}\n          </Stack>\n        </div>\n      );\n    },\n    [\n      handleOnKeyDown,\n      theme,\n      /* @conditional-compile-remove(mention) */\n      ids,\n      hoveredSuggestion,\n      personaRenderer\n    ]\n  );\n\n  const getHeaderTitle = useCallback((): string => {\n    if (title) {\n      return title;\n    }\n    /* @conditional-compile-remove(mention) */\n    return localeStrings.mentionPopover.mentionPopoverHeader;\n    return '';\n  }, [localeStrings, title]);\n\n  return (\n    <div ref={popoverRef}>\n      {position && (\n        <Stack\n          data-testid={'mention-suggestion-list-container'}\n          className={mergeStyles(\n            {\n              maxHeight: 212,\n              maxWidth: position.maxWidth\n            },\n            mentionPopoverContainerStyle(theme),\n            {\n              ...position,\n              position: 'absolute'\n            }\n          )}\n        >\n          <Stack.Item styles={headerStyleThemed(theme)} aria-label={title}>\n            {getHeaderTitle()}\n          </Stack.Item>\n          {/* FluentUI v9 approach is used here instead of Stack because Stack doesn't have ref prop */}\n          <div\n            className={mergeClasses(defaultStackStyles.root, suggestionListStyle.root)}\n            /* @conditional-compile-remove(mention) */\n            data-ui-id={ids.mentionSuggestionList}\n            ref={suggestionsListRef}\n          >\n            {suggestions.map((suggestion, index) => {\n              const active = index === activeSuggestionIndex;\n              return onRenderSuggestionItem\n                ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)\n                : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);\n            })}\n          </div>\n        </Stack>\n      )}\n    </div>\n  );\n};\n"]}

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

@@ -1,9 +0,0 @@
-import { ContextMenuPluginBase } from 'roosterjs-content-model-plugins';
-import type { IContextualMenuItem } from '@fluentui/react/';
-/**
- * Represents a plugin that adds a context menu to the rich text editor.
- */
-export declare class ContextMenuPlugin extends ContextMenuPluginBase<IContextualMenuItem> {
-    constructor(onRender: (container: HTMLElement, items: IContextualMenuItem[], onDismiss: () => void) => void, onDismiss: () => void);
-}
-//# sourceMappingURL=ContextMenuPlugin.d.ts.map

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

@@ -1,29 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { ContextMenuPluginBase } from 'roosterjs-content-model-plugins';
-/**
- * Represents a plugin that adds a context menu to the rich text editor.
- */
-export class ContextMenuPlugin extends ContextMenuPluginBase {
-    constructor(onRender, onDismiss) {
-        super({
-            /**
-             * Renders the context menu in the specified container with the provided items.
-             * @param container - The container element where the context menu should be rendered.
-             * @param items - The items to be displayed in the context menu.
-             * @param onDismiss - Callback function to be called when the context menu is dismissed. It will call `dismiss` method.
-             */
-            render: (container, items, onDismissCallback) => {
-                const filteredItems = items.filter((item) => item !== null);
-                onRender(container, filteredItems, onDismissCallback);
-            },
-            /**
-             * Dismisses the context menu.
-             */
-            dismiss: () => {
-                onDismiss();
-            }
-        });
-    }
-}
-//# sourceMappingURL=ContextMenuPlugin.js.map

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

@@ -1 +0,0 @@
-{"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.d.ts

@@ -1,26 +0,0 @@
-import type { PluginEvent, EditorPlugin, IEditor, BeforePasteEvent } from 'roosterjs-content-model-types';
-/**
- * CopyPastePlugin is a plugin for handling copy and paste events in the editor.
- */
-export default class CopyPastePlugin implements EditorPlugin {
-    private editor;
-    onPaste?: (event: {
-        content: DocumentFragment;
-    }) => void;
-    getName(): string;
-    initialize(editor: IEditor): void;
-    dispose(): void;
-    onPluginEvent(event: PluginEvent): void;
-}
-/**
- * @internal
- * Exported only for unit testing
- */
-export declare const removeImageElement: (event: BeforePasteEvent) => void;
-/**
- * Scrolls the editor's scroll container to the bottom after content is pasted.
- * @param event - The plugin event.
- * @param editor - The editor instance.
- */
-export declare const scrollToBottomAfterContentPaste: (event: PluginEvent, editor: IEditor) => void;
-//# sourceMappingURL=CopyPastePlugin.d.ts.map

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

@@ -1,85 +0,0 @@
-import { ContentChangedEventSource, PluginEventType } from '../../utils/RichTextEditorUtils';
-/**
- * CopyPastePlugin is a plugin for handling copy and paste events in the editor.
- */
-export default class CopyPastePlugin {
-    constructor() {
-        this.editor = null;
-    }
-    getName() {
-        return 'CopyPastePlugin';
-    }
-    initialize(editor) {
-        this.editor = editor;
-    }
-    dispose() { }
-    onPluginEvent(event) {
-        handleBeforePasteEvent(event, /* @conditional-compile-remove(rich-text-editor-image-upload) */ this.onPaste);
-        if (this.editor !== null && !this.editor.isDisposed()) {
-            // scroll the editor to the correct position after pasting content
-            scrollToBottomAfterContentPaste(event, this.editor);
-        }
-    }
-}
-const handleBeforePasteEvent = (event, 
-/* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste) => {
-    if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal') {
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        onPaste === null || onPaste === void 0 ? void 0 : onPaste({ content: event.fragment });
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        return;
-        // the initial behavior
-        // removes inline image elements from the pasted content when rich-text-editor-image-upload not available
-        removeImageElement(event);
-    }
-};
-/**
- * @internal
- * Exported only for unit testing
- */
-export const removeImageElement = (event) => {
-    // We don't support the pasting options such as paste as image yet.
-    if (event.pasteType === 'normal') {
-        event.fragment.querySelectorAll('img').forEach((image) => {
-            // If the image is the only child of its parent, remove all the parents of this img element.
-            let parentNode = image.parentElement;
-            let currentNode = image;
-            while ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.childNodes.length) === 1) {
-                currentNode = parentNode;
-                parentNode = parentNode.parentElement;
-            }
-            currentNode === null || currentNode === void 0 ? void 0 : currentNode.remove();
-        });
-    }
-};
-/**
- * Scrolls the editor's scroll container to the bottom after content is pasted.
- * @param event - The plugin event.
- * @param editor - The editor instance.
- */
-export const scrollToBottomAfterContentPaste = (event, editor) => {
-    if (event.eventType === PluginEventType.ContentChanged && event.source === ContentChangedEventSource.Paste) {
-        const scrollContainer = editor.getScrollContainer();
-        // get current selection for the editor
-        const selection = document.getSelection();
-        // if selection exists
-        if (selection && selection.rangeCount > 0) {
-            // the range for the selection
-            const range = selection.getRangeAt(0);
-            // the selection position relative to the viewport
-            const cursorRect = range.getBoundingClientRect();
-            // the scrollContainer position relative to the viewport
-            const scrollContainerRect = scrollContainer.getBoundingClientRect();
-            // 1. scrollContainer.scrollTop represents the number of pixels that the content of scrollContainer is scrolled upward.
-            // 2. subtract the top position of the scrollContainer element (scrollContainerRect.top) to
-            // translate the scroll position from being relative to the document to being relative to the viewport.
-            // 3. add the top position of the cursor (containerRect.top) to moves the scroll position to the cursor's position.
-            const updatedScrollTop = scrollContainer.scrollTop - scrollContainerRect.top + cursorRect.top;
-            scrollContainer.scrollTo({
-                top: updatedScrollTop,
-                behavior: 'smooth'
-            });
-        }
-    }
-};
-//# sourceMappingURL=CopyPastePlugin.js.map

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

@@ -1 +0,0 @@
-{"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, BeforePasteEvent } from 'roosterjs-content-model-types';\nimport { ContentChangedEventSource, PluginEventType } from '../../utils/RichTextEditorUtils';\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\n  getName(): string {\n    return 'CopyPastePlugin';\n  }\n\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n  }\n\n  dispose(): void {}\n\n  onPluginEvent(event: PluginEvent): void {\n    handleBeforePasteEvent(event, /* @conditional-compile-remove(rich-text-editor-image-upload) */ this.onPaste);\n\n    if (this.editor !== null && !this.editor.isDisposed()) {\n      // scroll the editor to the correct position after pasting content\n      scrollToBottomAfterContentPaste(event, this.editor);\n    }\n  }\n}\n\nconst 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    // the initial behavior\n    // removes inline image elements from the pasted content when rich-text-editor-image-upload not available\n    removeImageElement(event as BeforePasteEvent);\n  }\n};\n\n/**\n * @internal\n * Exported only for unit testing\n */\nexport const removeImageElement = (event: BeforePasteEvent): void => {\n  // We don't support the pasting options such as paste as image yet.\n  if (event.pasteType === 'normal') {\n    event.fragment.querySelectorAll('img').forEach((image) => {\n      // If the image is the only child of its parent, remove all the parents of this img element.\n      let parentNode: HTMLElement | null = image.parentElement;\n      let currentNode: HTMLElement = image;\n      while (parentNode?.childNodes.length === 1) {\n        currentNode = parentNode;\n        parentNode = parentNode.parentElement;\n      }\n      currentNode?.remove();\n    });\n  }\n};\n\n/**\n * Scrolls the editor's scroll container to the bottom after content is pasted.\n * @param event - The plugin event.\n * @param editor - The editor instance.\n */\nexport const scrollToBottomAfterContentPaste = (event: PluginEvent, editor: IEditor): void => {\n  if (event.eventType === PluginEventType.ContentChanged && event.source === ContentChangedEventSource.Paste) {\n    const scrollContainer = editor.getScrollContainer();\n    // get current selection for the editor\n    const selection = document.getSelection();\n    // if selection exists\n    if (selection && selection.rangeCount > 0) {\n      // the range for the selection\n      const range = selection.getRangeAt(0);\n      // the selection position relative to the viewport\n      const cursorRect = range.getBoundingClientRect();\n      // the scrollContainer position relative to the viewport\n      const scrollContainerRect = scrollContainer.getBoundingClientRect();\n      // 1. scrollContainer.scrollTop represents the number of pixels that the content of scrollContainer is scrolled upward.\n      // 2. subtract the top position of the scrollContainer element (scrollContainerRect.top) to\n      // translate the scroll position from being relative to the document to being relative to the viewport.\n      // 3. add the top position of the cursor (containerRect.top) to moves the scroll position to the cursor's position.\n      const updatedScrollTop = scrollContainer.scrollTop - scrollContainerRect.top + cursorRect.top;\n      scrollContainer.scrollTo({\n        top: updatedScrollTop,\n        behavior: 'smooth'\n      });\n    }\n  }\n};\n"]}

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

@@ -1,12 +0,0 @@
-import type { PluginEvent, EditorPlugin } from 'roosterjs-content-model-types';
-/**
- * KeyboardInputPlugin is a plugin for handling keyboard events in the editor.
- */
-export declare class KeyboardInputPlugin implements EditorPlugin {
-    onKeyDown?: ((event: KeyboardEvent) => void) | null;
-    getName(): string;
-    initialize(): void;
-    dispose(): void;
-    onPluginEvent(event: PluginEvent): void;
-}
-//# sourceMappingURL=KeyboardInputPlugin.d.ts.map

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

@@ -1,23 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { PluginEventType } from '../../utils/RichTextEditorUtils';
-/**
- * KeyboardInputPlugin is a plugin for handling keyboard events in the editor.
- */
-export class KeyboardInputPlugin {
-    constructor() {
-        // don't set callback in constructor to be able to update callback without plugin recreation
-        this.onKeyDown = null;
-    }
-    getName() {
-        return 'KeyboardInputPlugin';
-    }
-    initialize() { }
-    dispose() { }
-    onPluginEvent(event) {
-        if (this.onKeyDown && event.eventType === PluginEventType.KeyDown && event.rawEvent instanceof KeyboardEvent) {
-            this.onKeyDown(event.rawEvent);
-        }
-    }
-}
-//# sourceMappingURL=KeyboardInputPlugin.js.map

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

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

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

@@ -1,15 +0,0 @@
-import { WatermarkPlugin } from 'roosterjs-content-model-plugins';
-import type { /*PluginEvent, EditorPlugin,*/ IEditor } from 'roosterjs-content-model-types';
-/**
- * PlaceholderPlugin is a plugin for displaying placeholder and handle localization for it in the editor.
- */
-export default class PlaceholderPlugin extends WatermarkPlugin {
-    private isPlaceholderShown;
-    private editorValue;
-    updatePlaceholder(placeholder: string): void;
-    initialize(editor: IEditor): void;
-    dispose(): void;
-    protected show(editor: IEditor): void;
-    protected hide(editor: IEditor): void;
-}
-//# sourceMappingURL=PlaceholderPlugin.d.ts.map

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

@@ -1,39 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { WatermarkPlugin } from 'roosterjs-content-model-plugins';
-/**
- * PlaceholderPlugin is a plugin for displaying placeholder and handle localization for it in the editor.
- */
-export default class PlaceholderPlugin extends WatermarkPlugin {
-    constructor() {
-        super(...arguments);
-        this.isPlaceholderShown = false;
-        this.editorValue = null;
-    }
-    updatePlaceholder(placeholder) {
-        this.watermark = placeholder;
-        // hide and show the placeholder to show the latest one
-        // this needs to be done only if the placeholder is currently shown
-        if (this.editorValue && this.isPlaceholderShown) {
-            this.hide(this.editorValue);
-            this.show(this.editorValue);
-        }
-    }
-    initialize(editor) {
-        this.editorValue = editor;
-        super.initialize(editor);
-    }
-    dispose() {
-        this.editorValue = null;
-        super.dispose();
-    }
-    show(editor) {
-        super.show(editor);
-        this.isPlaceholderShown = true;
-    }
-    hide(editor) {
-        super.hide(editor);
-        this.isPlaceholderShown = false;
-    }
-}
-//# sourceMappingURL=PlaceholderPlugin.js.map

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

@@ -1 +0,0 @@
-{"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,CAAC,OAAO,OAAO,iBAAkB,SAAQ,eAAe;IAA9D;;QACU,uBAAkB,GAAY,KAAK,CAAC;QACpC,gBAAW,GAAmB,IAAI,CAAC;IA2B7C,CAAC;IAzBC,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;IAC3B,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 { /*PluginEvent, EditorPlugin,*/ 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 default class PlaceholderPlugin extends WatermarkPlugin {\n  private isPlaceholderShown: boolean = false;\n  private editorValue: IEditor | null = null;\n\n  updatePlaceholder(placeholder: string): void {\n    this.watermark = placeholder;\n    // hide and show the placeholder to show the latest one\n    // this needs to be done only if the placeholder is currently shown\n    if (this.editorValue && this.isPlaceholderShown) {\n      this.hide(this.editorValue);\n      this.show(this.editorValue);\n    }\n  }\n  initialize(editor: IEditor): void {\n    this.editorValue = editor;\n    super.initialize(editor);\n  }\n  dispose(): void {\n    this.editorValue = null;\n    super.dispose();\n  }\n  protected show(editor: IEditor): void {\n    super.show(editor);\n    this.isPlaceholderShown = true;\n  }\n  protected hide(editor: IEditor): void {\n    super.hide(editor);\n    this.isPlaceholderShown = false;\n  }\n}\n"]}

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

@@ -1,24 +0,0 @@
-import type { ContentModelFormatState, EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';
-/**
- * KeyboardInputPlugin is a plugin for handling keyboard events in the editor.
- */
-export declare class RichTextToolbarPlugin implements EditorPlugin {
-    private formatState;
-    private editor;
-    onFormatChanged: ((formatState: ContentModelFormatState) => void) | null;
-    getName(): string;
-    initialize(editor: IEditor): void;
-    dispose(): void;
-    onPluginEvent(event: PluginEvent): void;
-    /**
-     * Handles the click event of a toolbar button.
-     * @param buttonAction - The action to be performed when the button is clicked.
-     */
-    onToolbarButtonClick(buttonAction: (editor: IEditor) => void): void;
-    /**
-     * Updates the format state of the rich text editor and triggers the `onFormatChanged` callback
-     * if there is any difference between the new and the current format states.
-     */
-    private updateFormat;
-}
-//# sourceMappingURL=RichTextToolbarPlugin.d.ts.map