@spteck/react-controls-v2 2.5.17 → 2.6.1

package/dist/components/EmojiPicker/EmojiPicker.d.ts

@@ -0,0 +1,4 @@
+import { IEmojiPickerProps } from './IEmojiPickerProps';
+import * as React from "react";
+export declare const EmojiPicker: React.NamedExoticComponent<IEmojiPickerProps>;
+//# sourceMappingURL=EmojiPicker.d.ts.map

package/dist/components/EmojiPicker/IEmojiPickerProps.d.ts

@@ -0,0 +1,64 @@
+import { PopoverProps } from '@fluentui/react-components';
+import { SkinTone } from './emojiData';
+import type * as React from "react";
+export interface IEmojiPickerProps {
+    /**
+     * Callback fired when the user clicks an emoji.
+     * The selected emoji character is passed as the argument.
+     */
+    onEmojiSelect: (emoji: string) => void;
+    /**
+     * The element that acts as the popover trigger.
+     * Must accept a forwarded `ref` and an `onClick` handler
+     * (standard behaviour for any FluentUI or HTML button).
+     */
+    trigger: React.ReactElement;
+    /**
+     * Controls whether the picker popover is visible (controlled mode).
+     * When omitted the component manages its own open/close state internally.
+     */
+    open?: boolean;
+    /**
+     * Called whenever the popover open state should change.
+     * Required when `open` is provided (controlled mode).
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * FluentUI popover positioning strategy.
+     * @default "below-start"
+     */
+    positioning?: PopoverProps["positioning"];
+    /**
+     * Width of the picker panel in pixels.
+     * @default 260
+     */
+    popoverWidth?: number;
+    /**
+     * Maximum height of the emoji grid before it becomes scrollable.
+     * @default 200
+     */
+    maxGridHeight?: number;
+    /**
+     * Placeholder text shown inside the search input.
+     * @default "Search emoji…"
+     */
+    searchPlaceholder?: string;
+    /**
+     * Optional CSS class name applied to the `PopoverSurface` element.
+     */
+    className?: string;
+    /**
+     * Optional inline styles applied to the `PopoverSurface` element.
+     */
+    style?: React.CSSProperties;
+    /**
+     * The initially selected skin tone.
+     * When omitted, the default (yellow) tone is used.
+     */
+    defaultSkinTone?: SkinTone;
+    /**
+     * Called when the user picks a different skin tone.
+     */
+    onSkinToneChange?: (tone: SkinTone) => void;
+}
+//# sourceMappingURL=IEmojiPickerProps.d.ts.map

package/dist/components/EmojiPicker/SkinToneSelector.d.ts

@@ -0,0 +1,8 @@
+import { SkinTone } from './emojiData';
+import * as React from "react";
+export interface ISkinToneSelectorProps {
+    value: SkinTone;
+    onChange: (tone: SkinTone) => void;
+}
+export declare const SkinToneSelector: React.NamedExoticComponent<ISkinToneSelectorProps>;
+//# sourceMappingURL=SkinToneSelector.d.ts.map

package/dist/components/EmojiPicker/emojiData.d.ts

@@ -0,0 +1,17 @@
+/** Ordered to match the unicodeSkintones index in fluentEmojis.json */
+export declare const SKIN_TONES: readonly ["Default", "Light", "MediumLight", "Medium", "MediumDark", "Dark"];
+export type SkinTone = (typeof SKIN_TONES)[number];
+/** Visual color swatch for each skin tone (matches Fluent / Teams palette) */
+export declare const SKIN_TONE_COLORS: Record<SkinTone, string>;
+export interface IEmojiCategory {
+    /** Emoji character used as the category tab label */
+    readonly label: string;
+    /** Ordered list of emojis belonging to this category */
+    readonly emojis: readonly string[];
+}
+export declare const CATEGORY_TOOLTIPS: readonly string[];
+export declare function buildEmojiCategories(skinTone?: SkinTone): readonly IEmojiCategory[];
+export declare function matchesEmojiQuery(emoji: string, query: string): boolean;
+/** Default (no-tone) categories — kept for backward compat */
+export declare const EMOJI_CATEGORIES: readonly IEmojiCategory[];
+//# sourceMappingURL=emojiData.d.ts.map

package/dist/components/EmojiPicker/index.d.ts

@@ -0,0 +1,4 @@
+export { EmojiPicker } from './EmojiPicker';
+export type { IEmojiPickerProps } from './IEmojiPickerProps';
+export type { IEmojiCategory } from './emojiData';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/EmojiPicker/useEmojiPickerStyles.d.ts

@@ -0,0 +1,18 @@
+interface IEmojiPickerStyleOptions {
+    popoverWidth: number;
+    maxGridHeight: number;
+}
+export declare const useEmojiPickerStyles: ({ popoverWidth, maxGridHeight, }: IEmojiPickerStyleOptions) => {
+    popover: string;
+    header: string;
+    searchWrapper: string;
+    grid: string;
+    empty: string;
+    skinToneRow: string;
+    skinToneButton: string;
+    skinToneButtonSelected: string;
+    skinToneButtonUnselected: string;
+};
+export type EmojiPickerStyles = ReturnType<typeof useEmojiPickerStyles>;
+export {};
+//# sourceMappingURL=useEmojiPickerStyles.d.ts.map

package/dist/components/RichTextEditor/IRichTextEditorProps.d.ts

@@ -1,5 +1,5 @@
-import { Editor } from '@tiptap/react';
 import { IBaseProps } from '../baseComponentProps/IBaseProps';
+import { Editor } from '@tiptap/core';
 /**
  * Visual variant of the RichTextEditor
  */
@@ -55,13 +55,34 @@ export interface IRichTextEditorLabels {
     tasksSinkLabel: string;
     tasksLiftLabel: string;
     fontFamilyControlLabel: string;
+    imageUploadControlLabel: string;
+    bgColorPickerControlLabel: string;
+    bgColorPickerColorLabel: (color: string) => string;
+    emojiPickerControlLabel: string;
+    tableInsertControlLabel: string;
+    tableDeleteControlLabel: string;
+    tableAddColumnBeforeControlLabel: string;
+    tableAddColumnAfterControlLabel: string;
+    tableDeleteColumnControlLabel: string;
+    tableAddRowBeforeControlLabel: string;
+    tableAddRowAfterControlLabel: string;
+    tableDeleteRowControlLabel: string;
+    tableMergeOrSplitCellControlLabel: string;
+    tableToggleHeaderColumnControlLabel: string;
+    tableToggleHeaderRowControlLabel: string;
+    tableToggleColumnLinesControlLabel: string;
+    tableToggleRowLinesControlLabel: string;
 }
 /**
  * Props for the main RichTextEditor component
  */
 export interface IRichTextEditorProps extends IBaseProps {
-    /** Tiptap editor instance */
-    editor: Editor | null;
+    /** Initial HTML content for the editor */
+    content?: string;
+    /** Placeholder text shown when the editor is empty */
+    placeholder?: string;
+    /** Whether the editor is editable @default true */
+    editable?: boolean;
     /** Whether code highlight styles should be added @default true */
     withCodeHighlightStyles?: boolean;
     /** Whether typography styles should be added @default true */
@@ -89,6 +110,17 @@ export interface IRichTextEditorProps extends IBaseProps {
     /** Font families available in the FontFamily toolbar picker.
      *  Typically populated from `useBrandCenterFonts().fontFamilyNames`. */
     fontFamilies?: string[];
+    /** Background color of the editor content area (any valid CSS color value, e.g. '#f5f5f5', 'white') */
+    contentBackground?: string;
+    /** Called on every content change with a complete inline-styled, email-client-safe HTML document */
+    onGetContentAsEmailHtml?: (emailHtml: string) => void;
+    /** Called when the user selects an image file via the ImageUpload toolbar control.
+     *  Receive the File and call `insertImage(src)` to insert it into the editor.
+     *  If not provided, images are inserted as base64 data URLs by default. */
+    onImageUpload?: (file: File, insertImage: (src: string) => void) => void;
+    /** Colors available in the BgColorPicker toolbar control palette.
+     *  If not provided, a default palette is used. */
+    bgColorPickerColors?: string[];
     /** Child editor components */
     children: React.ReactNode;
     /** Additional className */
@@ -196,6 +228,15 @@ export interface IRichTextEditorColorPickerControlProps {
     /** Inline styles */
     style?: React.CSSProperties;
 }
+/**
+ * Props for the RichTextEditor.BgColorPicker control
+ */
+export interface IRichTextEditorBgColorPickerControlProps {
+    /** Additional className */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
 /**
  * Configuration for the createControl factory
  */
@@ -214,6 +255,23 @@ export interface ICreateControlProps {
         attributes?: Record<string, unknown> | string;
     };
 }
+/**
+ * Props for the RichTextEditor.DragHandle component
+ */
+export interface IRichTextEditorDragHandleProps {
+    /** Enable drag handles for nested blocks (list items, blockquotes, etc.) @default false */
+    nested?: boolean;
+    /** Called when the hovered node changes */
+    onNodeChange?: (data: {
+        node: import('@tiptap/pm/model').Node | null;
+        editor: Editor;
+        pos: number;
+    }) => void;
+    /** Additional className applied to the handle button */
+    className?: string;
+    /** Inline styles applied to the handle button */
+    style?: React.CSSProperties;
+}
 /**
  * Props for the RichTextEditor.FontFamily control
  */

package/dist/components/RichTextEditor/Icons.d.ts

@@ -37,7 +37,22 @@ export declare function IconArrowForwardUp(props: IconProps): import("react/jsx-
 export declare function IconListCheck(props: IconProps): import("react/jsx-runtime").JSX.Element;
 export declare function IconIndentIncrease(props: IconProps): import("react/jsx-runtime").JSX.Element;
 export declare function IconIndentDecrease(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconGripVertical(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconTable(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconTableOff(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconColumnInsertLeft(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconColumnInsertRight(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconColumnRemove(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconRowInsertTop(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconRowInsertBottom(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconRowRemove(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconTableMergeCells(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconTableColumnLines(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconTableRowLines(props: IconProps): import("react/jsx-runtime").JSX.Element;
 export declare function IconBraces(props: IconProps): import("react/jsx-runtime").JSX.Element;
 export declare function IconTypography(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconImageUpload(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconBgColor(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconEmoji(props: IconProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Icons.d.ts.map

package/dist/components/RichTextEditor/RichTextEditor.d.ts

@@ -159,5 +159,64 @@ export declare const RichTextEditor: React.FC<IRichTextEditorProps> & {
         style?: React.CSSProperties;
     }>;
     FontFamily: React.FC<import('./IRichTextEditorProps').IRichTextEditorFontFamilyControlProps>;
+    ImageUpload: React.FC<Omit<import('./IRichTextEditorProps').IRichTextEditorControlBaseProps, "icon">>;
+    BgColorPicker: React.FC<import('./IRichTextEditorProps').IRichTextEditorBgColorPickerControlProps>;
+    EmojiPicker: React.FC<Omit<import('./IRichTextEditorProps').IRichTextEditorControlBaseProps, "icon">>;
+    DragHandle: React.FC<import('./IRichTextEditorProps').IRichTextEditorDragHandleProps>;
+    TableActiveControls: React.FC<{
+        children?: React.ReactNode;
+    }>;
+    InsertTable: {
+        (props: import('./IRichTextEditorProps').IRichTextEditorControlBaseProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    DeleteTable: {
+        (props: import('./IRichTextEditorProps').IRichTextEditorControlBaseProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    AddColumnBefore: {
+        (props: import('./IRichTextEditorProps').IRichTextEditorControlBaseProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    AddColumnAfter: {
+        (props: import('./IRichTextEditorProps').IRichTextEditorControlBaseProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    DeleteColumn: {
+        (props: import('./IRichTextEditorProps').IRichTextEditorControlBaseProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    AddRowBefore: {
+        (props: import('./IRichTextEditorProps').IRichTextEditorControlBaseProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    AddRowAfter: {
+        (props: import('./IRichTextEditorProps').IRichTextEditorControlBaseProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    DeleteRow: {
+        (props: import('./IRichTextEditorProps').IRichTextEditorControlBaseProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    MergeOrSplitCell: {
+        (props: import('./IRichTextEditorProps').IRichTextEditorControlBaseProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    ToggleHeaderColumn: {
+        (props: import('./IRichTextEditorProps').IRichTextEditorControlBaseProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    ToggleHeaderRow: {
+        (props: import('./IRichTextEditorProps').IRichTextEditorControlBaseProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    ToggleTableColumnLines: {
+        (props: import('./IRichTextEditorProps').IRichTextEditorControlBaseProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    ToggleTableRowLines: {
+        (props: import('./IRichTextEditorProps').IRichTextEditorControlBaseProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
 };
 //# sourceMappingURL=RichTextEditor.d.ts.map

package/dist/components/RichTextEditor/RichTextEditorBgColorPickerControl.d.ts

@@ -0,0 +1,4 @@
+import { IRichTextEditorBgColorPickerControlProps } from './IRichTextEditorProps';
+import * as React from 'react';
+export declare const RichTextEditorBgColorPickerControl: React.FC<IRichTextEditorBgColorPickerControlProps>;
+//# sourceMappingURL=RichTextEditorBgColorPickerControl.d.ts.map

package/dist/components/RichTextEditor/RichTextEditorContext.d.ts

@@ -14,6 +14,16 @@ export interface IRichTextEditorContextValue {
     onSelectionChange?: () => void;
     fontFamily?: string;
     fontFamilies?: string[];
+    contentBackground?: string;
+    bgColor: string;
+    setBgColor: (color: string) => void;
+    bgColorPickerColors: string[];
+    showTableColumnLines: boolean;
+    showTableRowLines: boolean;
+    toggleTableColumnLines: () => void;
+    toggleTableRowLines: () => void;
+    onGetContentAsEmailHtml?: (emailHtml: string) => void;
+    onImageUpload?: (file: File, insertImage: (src: string) => void) => void;
 }
 export declare const RichTextEditorProvider: import('react').Provider<IRichTextEditorContextValue | null>;
 export declare function useRichTextEditorContext(): IRichTextEditorContextValue;

package/dist/components/RichTextEditor/RichTextEditorDragHandle.d.ts

@@ -0,0 +1,15 @@
+import { IRichTextEditorDragHandleProps } from './IRichTextEditorProps';
+import * as React from 'react';
+/**
+ * A drag handle that appears on hover to let users drag-and-drop any block
+ * in the editor. Place it as a sibling of `RichTextEditor.Content`.
+ *
+ * @example
+ * <RichTextEditor editor={editor}>
+ *   <RichTextEditor.Toolbar>…</RichTextEditor.Toolbar>
+ *   <RichTextEditor.DragHandle />
+ *   <RichTextEditor.Content />
+ * </RichTextEditor>
+ */
+export declare const RichTextEditorDragHandle: React.FC<IRichTextEditorDragHandleProps>;
+//# sourceMappingURL=RichTextEditorDragHandle.d.ts.map

package/dist/components/RichTextEditor/RichTextEditorEmojiPickerControl.d.ts

@@ -0,0 +1,4 @@
+import { IRichTextEditorControlBaseProps } from './IRichTextEditorProps';
+import * as React from "react";
+export declare const RichTextEditorEmojiPickerControl: React.FC<Omit<IRichTextEditorControlBaseProps, "icon">>;
+//# sourceMappingURL=RichTextEditorEmojiPickerControl.d.ts.map

package/dist/components/RichTextEditor/RichTextEditorImageUploadControl.d.ts

@@ -0,0 +1,19 @@
+import { IRichTextEditorControlBaseProps } from './IRichTextEditorProps';
+import * as React from 'react';
+/**
+ * Toolbar control that lets users insert images into the editor.
+ *
+ * - If `onImageUpload` is provided on `<RichTextEditor>`, it is called with the
+ *   selected `File` and an `insertImage(src)` callback — giving the consumer full
+ *   control (e.g. upload to a server and insert the resulting URL).
+ * - If no `onImageUpload` prop is provided, the image is read as a base64 data
+ *   URL and inserted directly into the editor content.
+ *
+ * Requires TipTap's Image extension to be included in the editor extensions:
+ * ```
+ * import Image from '@tiptap/extension-image';
+ * useEditor({ extensions: [..., Image] });
+ * ```
+ */
+export declare const RichTextEditorImageUploadControl: React.FC<Omit<IRichTextEditorControlBaseProps, 'icon'>>;
+//# sourceMappingURL=RichTextEditorImageUploadControl.d.ts.map

package/dist/components/RichTextEditor/RichTextEditorResizableImage.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Extends TipTap's Image extension with:
+ * - A `width` attribute that defaults to `'40%'` (medium size).
+ * - A resizable NodeView: click the image to select it, then drag the
+ *   bottom-right handle to resize it.
+ *
+ * Use this instead of `RichTextEditorImage` when you want drag-to-resize support.
+ *
+ * @example
+ * ```tsx
+ * import { RichTextEditorResizableImage } from '@spteck/react-controls-v2';
+ *
+ * const editor = useEditor({
+ *   extensions: [StarterKit, RichTextEditorResizableImage],
+ * });
+ *
+ * // In the toolbar:
+ * <RichTextEditor.ImageUpload />
+ * ```
+ */
+export declare const RichTextEditorResizableImage: import('@tiptap/core').Node<import('@tiptap/extension-image').ImageOptions, any>;
+//# sourceMappingURL=RichTextEditorResizableImage.d.ts.map

package/dist/components/RichTextEditor/RichTextEditorResizableImageView.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+interface ResizableImageViewProps {
+    node: {
+        attrs: {
+            src: string;
+            alt?: string;
+            title?: string;
+            width: string;
+        };
+    };
+    updateAttributes: (attrs: Record<string, unknown>) => void;
+    selected: boolean;
+}
+export declare const RichTextEditorResizableImageView: React.FC<ResizableImageViewProps>;
+export {};
+//# sourceMappingURL=RichTextEditorResizableImageView.d.ts.map

package/dist/components/RichTextEditor/RichTextEditorTableControls.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+/**
+ * Renders children only when the editor cursor is inside a table.
+ * Use this wrapper to show table action controls (add/remove columns/rows, merge cells, etc.)
+ * contextually, and keep the toolbar uncluttered when no table is active.
+ *
+ * ```tsx
+ * <RichTextEditor.Toolbar>
+ *   <RichTextEditor.ControlsGroup>
+ *     <RichTextEditor.InsertTable />
+ *   </RichTextEditor.ControlsGroup>
+ *   <RichTextEditor.TableActiveControls>
+ *     <RichTextEditor.ControlsGroup>
+ *       <RichTextEditor.DeleteTable />
+ *       <RichTextEditor.AddColumnBefore />
+ *       <RichTextEditor.AddColumnAfter />
+ *       <RichTextEditor.DeleteColumn />
+ *     </RichTextEditor.ControlsGroup>
+ *   </RichTextEditor.TableActiveControls>
+ * </RichTextEditor.Toolbar>
+ * ```
+ */
+export declare const RichTextEditorTableControls: React.FC<{
+    children?: React.ReactNode;
+}>;
+//# sourceMappingURL=RichTextEditorTableControls.d.ts.map