@atlaskit/editor-common 107.28.2 → 107.29.0

package/dist/types/types/floating-toolbar.d.ts

@@ -17,59 +17,59 @@ import type { MarkOptions, NodeOptions } from './copy-button';
  * New dropdown types to support editor controls
  */
 export type OverflowDropdownHeading = {
-    type: 'overflow-dropdown-heading';
     title: string;
+    type: 'overflow-dropdown-heading';
 };
 type OverflowDropdownCustom<T extends Object> = {
-    type: 'custom';
     fallback: Array<FloatingToolbarFallbackItem<T>>;
-    render: (view?: EditorView, dropdownOption?: Omit<DropdownMenuItemProps, 'item'>) => React.ReactNode;
     hidden?: boolean;
+    render: (view?: EditorView, dropdownOption?: Omit<DropdownMenuItemProps, 'item'>) => React.ReactNode;
+    type: 'custom';
 };
 export type OverflowDropdownOption<T extends Object> = DropdownOptionT<T> & {
     rank?: number;
 };
 export type FloatingToolbarOverflowDropdownOptions<T extends Object> = Array<OverflowDropdownOption<T> | FloatingToolbarSeparator | OverflowDropdownHeading | OverflowDropdownCustom<T>>;
 export type FloatingToolbarOverflowDropdown<T extends Object> = {
-    type: 'overflow-dropdown';
-    options: FloatingToolbarOverflowDropdownOptions<T>;
-    testId?: string;
-    id?: string;
-    hidden?: boolean;
+    alignDropdownWithToolbar?: boolean;
     disabled?: boolean;
-    tooltip?: string;
     dropdownWidth?: number;
+    hidden?: boolean;
+    id?: string;
+    onClick?: () => void;
+    options: FloatingToolbarOverflowDropdownOptions<T>;
     showSelected?: boolean;
-    alignDropdownWithToolbar?: boolean;
     supportsViewMode?: boolean;
-    onClick?: () => void;
+    testId?: string;
+    tooltip?: string;
+    type: 'overflow-dropdown';
 };
 export interface RenderOptionsPropsT<T extends Object> {
-    hide: () => void;
     dispatchCommand: (command: T) => void;
+    hide: () => void;
 }
 export interface DropdownOptionT<T extends Object> {
+    description?: string;
+    disabled?: boolean;
+    domItemOptions?: {
+        type: typeOption;
+    };
+    elemAfter?: React.ReactNode;
+    hidden?: boolean;
+    icon?: React.ReactNode;
     id?: string;
-    title: string;
+    onBlur?: T;
     onClick: T;
+    onFocus?: T;
     onMouseDown?: T;
-    onMouseOver?: T;
     onMouseEnter?: T;
     onMouseLeave?: T;
     onMouseOut?: T;
-    onFocus?: T;
-    onBlur?: T;
+    onMouseOver?: T;
     selected?: boolean;
-    disabled?: boolean;
-    hidden?: boolean;
-    domItemOptions?: {
-        type: typeOption;
-    };
     testId?: string;
+    title: string;
     tooltip?: string;
-    elemAfter?: React.ReactNode;
-    icon?: React.ReactNode;
-    description?: string;
 }
 export type typeOption = 
 /** Dropdown menu item type
@@ -77,17 +77,17 @@ export type typeOption =
  */
 'item' | 'item-checkbox';
 export type DropdownOptions<T extends Object> = Array<DropdownOptionT<T>> | {
-    render: (props: RenderOptionsPropsT<T>) => React.ReactElement<any> | null;
     height: number;
+    render: (props: RenderOptionsPropsT<T>) => React.ReactElement<any> | null;
     width: number;
 };
 export interface SelectOption<T extends Object = Object> {
-    value: string;
-    label: string;
-    selected?: boolean;
+    data?: T;
     disabled?: boolean;
     hidden?: boolean;
-    data?: T;
+    label: string;
+    selected?: boolean;
+    value: string;
 }
 export type ButtonAppearance = 'subtle' | 'danger';
 export type Icon = React.ComponentType<React.PropsWithChildren<{
@@ -96,106 +96,105 @@ export type Icon = React.ComponentType<React.PropsWithChildren<{
 export type RenderOptionsProps = RenderOptionsPropsT<Command>;
 export type AlignType = 'left' | 'center' | 'right';
 interface Position {
-    top?: number;
-    right?: number;
     bottom?: number;
     left?: number;
+    right?: number;
+    top?: number;
 }
 type PositionOffset = Position;
 export type ConfirmDialogChildInfo = {
+    amount: number;
     id: string;
     name: string | null;
-    amount: number;
 };
 export interface ConfirmDialogOptions {
-    title?: string;
-    message: string;
-    okButtonLabel?: string;
     cancelButtonLabel?: string;
-    isReferentialityDialog?: boolean;
     checkboxLabel?: string;
-    messagePrefix?: string;
     getChildrenInfo?: () => ConfirmDialogChildInfo[];
+    isReferentialityDialog?: boolean;
+    message: string;
+    messagePrefix?: string;
+    okButtonLabel?: string;
     onConfirm?: (...args: any[]) => Command;
+    title?: string;
 }
 export type ConfirmationDialogProps = {
-    onConfirm: (isCheck?: boolean) => void;
     /**
      * onClose is called every time when the dialog is closed.
      * Either clicking on 'Confirm' button or 'Cancel' button,
      * which means it is being called after onConfirm, or by itself when clicking 'Cancel' button.
      */
     onClose: () => void;
+    onConfirm: (isCheck?: boolean) => void;
     options?: ConfirmDialogOptions;
     testId?: string;
 };
 export type FloatingToolbarButtonSpotlightConfig = {
     isSpotlightOpen: boolean;
-    pulse?: boolean;
     onTargetClick?: () => void;
+    pulse?: boolean;
     spotlightCardOptions: React.ComponentProps<typeof SpotlightCard> & {
         placement?: Placement;
     };
 };
 export type FloatingToolbarCopyButton = {
-    type: 'copy-button';
-    items: Array<FloatingToolbarSeparator | MarkOptions | NodeOptions>;
     hidden?: boolean;
+    items: Array<FloatingToolbarSeparator | MarkOptions | NodeOptions>;
     supportsViewMode?: boolean;
+    type: 'copy-button';
 };
 export type FloatingToolbarButton<T extends Object> = {
-    id?: string;
-    type: 'button';
-    isRadioButton?: boolean;
-    title: string;
-    onClick: T;
-    showTitle?: boolean;
-    onMouseEnter?: T;
-    onMouseLeave?: T;
-    onFocus?: T;
-    onBlur?: T;
-    onMount?: () => void;
-    onUnmount?: () => void;
-    icon?: Icon;
-    iconFallback?: Icon;
-    iconAfter?: Icon;
-    selected?: boolean;
+    appearance?: ButtonAppearance;
+    ariaHasPopup?: boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | undefined;
+    ariaLabel?: string;
+    className?: string;
+    confirmDialog?: ConfirmDialogOptions | (() => ConfirmDialogOptions);
     disabled?: boolean;
+    focusEditoronEnter?: boolean;
     hidden?: boolean;
-    appearance?: ButtonAppearance;
+    hideTooltipOnClick?: boolean;
     href?: string;
-    target?: string;
-    className?: string;
-    tooltipContent?: TooltipProps['content'];
-    testId?: string;
+    icon?: Icon;
+    iconAfter?: Icon;
+    iconFallback?: Icon;
+    id?: string;
     interactionName?: string;
-    hideTooltipOnClick?: boolean;
-    confirmDialog?: ConfirmDialogOptions | (() => ConfirmDialogOptions);
+    isRadioButton?: boolean;
     metadata?: {
         [key: string]: string;
     };
-    ariaHasPopup?: boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | undefined;
-    tabIndex?: number | null | undefined;
-    focusEditoronEnter?: boolean;
-    supportsViewMode?: boolean;
+    onBlur?: T;
+    onClick: T;
+    onFocus?: T;
+    onMount?: () => void;
+    onMouseEnter?: T;
+    onMouseLeave?: T;
+    onUnmount?: () => void;
     /** If true, the component will have pulse onboarding effect around it. */
     pulse?: boolean;
+    selected?: boolean;
+    showTitle?: boolean;
     spotlightConfig?: FloatingToolbarButtonSpotlightConfig;
-    ariaLabel?: string;
+    supportsViewMode?: boolean;
+    tabIndex?: number | null | undefined;
+    target?: string;
+    testId?: string;
+    title: string;
+    tooltipContent?: TooltipProps['content'];
+    type: 'button';
 };
 export type FloatingToolbarInput<T extends Object> = {
-    id: string;
-    type: 'input';
-    title?: string;
+    defaultValue?: string;
     description?: string;
-    onSubmit: (...args: any[]) => T;
+    hidden?: boolean;
+    id: string;
     onBlur: (...args: any[]) => T;
-    defaultValue?: string;
+    onSubmit: (...args: any[]) => T;
     placeholder?: string;
-    hidden?: boolean;
+    title?: string;
+    type: 'input';
 };
 export type FloatingToolbarCustom<T extends Object> = {
-    type: 'custom';
     /**
      * By default -- the floating toolbar supports navigating between
      * items using arrow keys (to meet aria guidelines).
@@ -208,24 +207,25 @@ export type FloatingToolbarCustom<T extends Object> = {
      */
     disableArrowNavigation?: boolean;
     fallback: Array<FloatingToolbarFallbackItem<T>>;
-    render: (view?: EditorView, idx?: number, dispatchAnalyticsEvent?: DispatchAnalyticsEvent) => React.ReactNode;
     hidden?: boolean;
+    render: (view?: EditorView, idx?: number, dispatchAnalyticsEvent?: DispatchAnalyticsEvent) => React.ReactNode;
     supportsViewMode?: boolean;
+    type: 'custom';
 };
 type FloatingToolbarSelectBase<T extends Object, V = SelectOption> = {
+    defaultValue?: V | null;
+    filterOption?: ((option: V, rawInput: string) => boolean) | null;
+    hidden?: boolean;
+    hideExpandIcon?: boolean;
     id: string;
-    type: 'select';
-    selectType: 'list' | 'emoji' | 'date' | 'color';
-    title?: string;
     isAriaExpanded?: boolean;
+    onChange: (selected: V) => T;
     options: V[];
-    hidden?: boolean;
-    hideExpandIcon?: boolean;
-    defaultValue?: V | null;
     placeholder?: string;
     returnEscToButton?: boolean;
-    onChange: (selected: V) => T;
-    filterOption?: ((option: V, rawInput: string) => boolean) | null;
+    selectType: 'list' | 'emoji' | 'date' | 'color';
+    title?: string;
+    type: 'select';
 };
 export type FloatingToolbarListPicker<T extends Object> = FloatingToolbarSelectBase<T> & {
     selectType: 'list';
@@ -234,52 +234,52 @@ export type FloatingToolbarColorPicker<T extends Object> = FloatingToolbarSelect
     selectType: 'color';
 };
 export type FloatingToolbarEmojiPicker<T extends Object> = FloatingToolbarSelectBase<T, EmojiId> & {
-    selectType: 'emoji';
-    selected?: boolean;
     options: never[];
+    selected?: boolean;
+    selectType: 'emoji';
 };
 export type FloatingToolbarDatePicker<T extends Object> = FloatingToolbarSelectBase<T, number> & {
-    selectType: 'date';
     options: never[];
+    selectType: 'date';
 };
 export type FloatingToolbarSelect<T extends Object> = FloatingToolbarEmojiPicker<T> | FloatingToolbarColorPicker<T> | FloatingToolbarListPicker<T> | FloatingToolbarDatePicker<T>;
 export type FloatingToolbarSeparator = {
-    type: 'separator';
-    hidden?: boolean;
     fullHeight?: boolean;
+    hidden?: boolean;
     supportsViewMode?: boolean;
+    type: 'separator';
 };
 export type ExtensionDropdownOptions = () => DropdownOptions<Function>;
 export type FloatingToolbarDropdown<T extends Object> = {
-    testId?: string;
-    id?: string;
-    type: 'dropdown';
-    title: string;
+    alignDropdownWithToolbar?: boolean;
+    disabled?: boolean;
+    dropdownWidth?: number;
+    footer?: React.ReactNode;
+    hidden?: boolean;
+    hideExpandIcon?: boolean;
     icon?: Icon;
     /**
      * Places an icon before the title as a representation
      */
     iconBefore?: Icon;
-    options: DropdownOptions<T> | ExtensionDropdownOptions;
-    hidden?: boolean;
-    hideExpandIcon?: boolean;
-    disabled?: boolean;
-    tooltip?: string;
-    dropdownWidth?: number;
-    showSelected?: boolean;
-    alignDropdownWithToolbar?: boolean;
+    id?: string;
+    onClick?: () => void;
+    onMount?: () => void;
     onToggle?: (state: EditorState, dispatch: CommandDispatch | undefined) => boolean;
-    footer?: React.ReactNode;
+    options: DropdownOptions<T> | ExtensionDropdownOptions;
     /** If true, the component will have pulse onboarding effect around it. */
     pulse?: boolean;
-    onMount?: () => void;
-    onClick?: () => void;
     shouldFitContainer?: boolean;
+    showSelected?: boolean;
+    testId?: string;
+    title: string;
+    tooltip?: string;
+    type: 'dropdown';
 };
 type FloatingToolbarExtensionsPlaceholder = {
-    type: 'extensions-placeholder';
     hidden?: boolean;
     separator?: 'start' | 'end' | 'both';
+    type: 'extensions-placeholder';
 };
 /**
  * This additional type is introduced in order to prevent infinite loop due to
@@ -293,8 +293,25 @@ type FloatingToolbarExtensionsPlaceholder = {
 export type FloatingToolbarFallbackItem<T extends Object> = FloatingToolbarButton<T> | FloatingToolbarCopyButton | FloatingToolbarDropdown<T> | FloatingToolbarSelect<T> | FloatingToolbarInput<T> | FloatingToolbarSeparator;
 export type FloatingToolbarItem<T extends Object> = FloatingToolbarButton<T> | FloatingToolbarCopyButton | FloatingToolbarDropdown<T> | FloatingToolbarSelect<T> | FloatingToolbarInput<T> | FloatingToolbarCustom<T> | FloatingToolbarSeparator | FloatingToolbarExtensionsPlaceholder | FloatingToolbarOverflowDropdown<T>;
 export interface FloatingToolbarConfig {
-    /** Used for the ariaLabel on the <Popup /> component */
-    title: string;
+    /**
+     * For internal use only, we will be depricating this API soon.
+     * If any config has __suppressAllToolbars set to true, no floating toolbar will be rendered.
+     * Use case:
+     * When a node is nested inside a table and the cursor is inside of the nested node.
+     * Nested node's toolbar is active. When table's menu opens, we provide table's config with
+     * __suppressAllToolbars set to true.
+     */
+    __suppressAllToolbars?: boolean;
+    /** Absolute offset of the toolbar */
+    absoluteOffset?: PositionOffset;
+    align?: AlignType;
+    /** Class added to Toolbar wrapper */
+    className?: string;
+    /**
+     * Enable Popup component's focus trap
+     */
+    focusTrap?: boolean;
+    forcePlacement?: boolean;
     /**
      * Override the DOM reference used to apply as the target for the
      * floating toolbar, if the config matches.
@@ -303,50 +320,33 @@ export interface FloatingToolbarConfig {
      * head of the current selection.
      */
     getDomRef?: (view: EditorView) => HTMLElement | undefined;
-    /** Can prevent the Toolbar from rendering */
-    visible?: boolean;
-    /**
-     * nodeType or list of `nodeType`s this floating toolbar should be shown for.
-     **/
-    nodeType: NodeType | NodeType[];
+    /** aria-label added to role='radiogroup'element */
+    groupLabel?: string;
+    /** Toolbar height */
+    height?: number;
     /** Items that will populate the Toolbar.
      *
      * See: `FloatingToolbarItem`
      */
     items: Array<FloatingToolbarItem<Command>> | ((node: Node) => Array<FloatingToolbarItem<Command>>);
-    /** aria-label added to role='radiogroup'element */
-    groupLabel?: string;
-    align?: AlignType;
-    /** Class added to Toolbar wrapper */
-    className?: string;
-    /** Toolbar height */
-    height?: number;
-    /** Toolbar width */
-    width?: number;
-    zIndex?: number;
+    mediaAssistiveMessage?: string;
+    /**
+     * nodeType or list of `nodeType`s this floating toolbar should be shown for.
+     **/
+    nodeType: NodeType | NodeType[];
     /** Offset the position of the toolbar. */
     offset?: [number, number];
-    /** Absolute offset of the toolbar */
-    absoluteOffset?: PositionOffset;
-    forcePlacement?: boolean;
     onPositionCalculated?: (editorView: EditorView, nextPos: Position) => Position;
-    scrollable?: boolean;
-    /**
-     * Enable Popup component's focus trap
-     */
-    focusTrap?: boolean;
     preventPopupOverflow?: boolean;
-    mediaAssistiveMessage?: string;
+    scrollable?: boolean;
     stick?: boolean;
-    /**
-     * For internal use only, we will be depricating this API soon.
-     * If any config has __suppressAllToolbars set to true, no floating toolbar will be rendered.
-     * Use case:
-     * When a node is nested inside a table and the cursor is inside of the nested node.
-     * Nested node's toolbar is active. When table's menu opens, we provide table's config with
-     * __suppressAllToolbars set to true.
-     */
-    __suppressAllToolbars?: boolean;
+    /** Used for the ariaLabel on the <Popup /> component */
+    title: string;
+    /** Can prevent the Toolbar from rendering */
+    visible?: boolean;
+    /** Toolbar width */
+    width?: number;
+    zIndex?: number;
 }
 export type FloatingToolbarHandler = (state: EditorState, intl: IntlShape, providerFactory: ProviderFactory, processedConfigs?: Array<FloatingToolbarConfig>) => FloatingToolbarConfig | undefined;
 export {};

package/dist/types/types/hyperlink.d.ts

@@ -12,6 +12,10 @@ export type LinkPickerOptions = Partial<LinkPickerProps>;
  * Configuration for editor linking behaviours
  */
 export interface LinkingOptions {
+    /**
+     * Convert compatible link text to hyperlinks on blur of the editor
+     */
+    autoLinkOnBlur?: boolean;
     /**
      * Initial props to configure the link picker component with. Primarily used to provide link search and suggestions capabilities.
      * @see https://atlaskit.atlassian.com/packages/editor/editor-core/example/full-page-with-link-picker
@@ -22,10 +26,6 @@ export interface LinkingOptions {
      * Enables and configure smart link behaviour
      */
     smartLinks?: CardOptions;
-    /**
-     * Convert compatible link text to hyperlinks on blur of the editor
-     */
-    autoLinkOnBlur?: boolean;
 }
 type OnClickCallback = ({ event, url, }: {
     event: React.MouseEvent<HTMLAnchorElement>;
@@ -39,15 +39,15 @@ type OnClickCallback = ({ event, url, }: {
  * @see https://product-fabric.atlassian.net/browse/ED-27496
  */
 export interface HyperlinkPluginOptions {
-    linkPicker?: LinkPickerOptions;
-    platform?: 'mobile' | 'web';
-    editorAppearance?: EditorAppearance;
-    lpLinkPicker?: boolean;
-    disableFloatingToolbar?: boolean;
-    onClickCallback?: OnClickCallback;
     /**
      * Convert compatible link text to hyperlinks on blur of the editor
      */
     autoLinkOnBlur?: boolean;
+    disableFloatingToolbar?: boolean;
+    editorAppearance?: EditorAppearance;
+    linkPicker?: LinkPickerOptions;
+    lpLinkPicker?: boolean;
+    onClickCallback?: OnClickCallback;
+    platform?: 'mobile' | 'web';
 }
 export {};

package/dist/types/types/input-rules.d.ts

@@ -2,7 +2,7 @@ import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/stat
 export type InputRuleHandler = (state: EditorState, matchResult: RegExpExecArray, start: number, end: number) => Transaction | null;
 export type OnHandlerApply = (state: EditorState, tr: Transaction, matchResult: RegExpExecArray) => void;
 export interface InputRuleWrapper {
-    match: RegExp;
     handler: InputRuleHandler;
+    match: RegExp;
     onHandlerApply?: OnHandlerApply;
 }