@commercetools/nimbus 0.0.0-canary-20250826133439 → 0.0.0-canary-20250827101922

package/dist/rich-text-input.d.ts

@@ -0,0 +1,79 @@
+import { FocusEventHandler } from 'react';
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { Ref } from 'react';
+import { SlotRecipeDefinition } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
+
+declare type DefaultExcludedProps = "css" | "asChild" | "as" | "onChange";
+
+/**
+ RichTextInput - A rich text input component with formatting capabilities.
+ */
+export declare const RichTextInput: {
+    (props: RichTextInputProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface RichTextInputProps extends Omit<RichTextInputRootSlotProps, DefaultExcludedProps | "children"> {
+    /**
+     * The ref for the rich text input component
+     */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * The HTML value of the rich text input
+     */
+    value?: string;
+    /**
+     * The default HTML value of the rich text input (uncontrolled)
+     */
+    defaultValue?: string;
+    /**
+     * Called when the value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Called when the input is focused
+     */
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    /**
+     * Called when the input is blurred
+     */
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    /**
+     * Placeholder text to show when the editor is empty
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the input is read-only
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether the input is in an invalid state
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether to focus the input when it mounts
+     */
+    autoFocus?: boolean;
+}
+
+declare const richTextInputRecipe: SlotRecipeDefinition<"toolbar" | "root" | "editable", {}>;
+
+declare type RichTextInputRootSlotProps = HTMLChakraProps<"div", RecipeVariantProps<typeof richTextInputRecipe> & UnstyledProp>;
+
+export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/select.d.ts

@@ -148,3 +148,12 @@ trigger: {
 }>;
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/setup-jsdom-polyfills.d.ts

@@ -1 +1,10 @@
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/simple-grid.d.ts

@@ -24,3 +24,12 @@ export declare interface SimpleGridProps extends SimpleGridProps_2 {
 }
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/split-button.d.ts

@@ -65,3 +65,12 @@ export declare interface SplitButtonProps extends Omit<MenuTriggerProps, "trigge
 }
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/stack.d.ts

@@ -19,3 +19,12 @@ export declare interface StackProps extends StackProps_2 {
 }
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/switch.d.ts

@@ -75,3 +75,12 @@ label: {
 }>;
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/table.d.ts

@@ -3,3 +3,12 @@ import { Table } from '@chakra-ui/react/table';
 export { Table }
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/tag-group.d.ts

@@ -97,3 +97,12 @@ export declare type TagGroupTagProps = TagProps & Omit<TagGroupTagSlotProps, key
 declare type TagGroupTagSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/text-input.d.ts

@@ -61,3 +61,12 @@ declare interface TextInputRecipeProps extends RecipeVariantProps<typeof textInp
 declare type TextInputRootSlotProps = HTMLChakraProps<"input", TextInputRecipeProps>;
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/text.d.ts

@@ -20,3 +20,12 @@ export declare interface TextProps extends Omit<TextProps_2, "slot"> {
 }
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/time-input.d.ts

@@ -100,3 +100,12 @@ declare interface TimeInputRootProps extends HTMLChakraProps<"div", TimeInputRec
 }
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/toggle-button-group.d.ts

@@ -112,3 +112,12 @@ declare type ToggleButtonGroupRootProps = ToggleButtonGroupRootSlotProps & AriaT
 declare type ToggleButtonGroupRootSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/toggle-button.d.ts

@@ -142,3 +142,12 @@ declare interface ToggleButtonRecipeProps extends RecipeVariantProps<typeof togg
 declare type ToggleButtonRootProps = HTMLChakraProps<"button", ToggleButtonRecipeProps>;
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/toolbar.d.ts

@@ -37,22 +37,25 @@ declare const toolbarRecipe: RecipeDefinition<    {
 size: {
 xs: {
 "--toolbar-spacing": "{spacing.100}";
+"--divider-size": "{sizes.600}";
 };
 md: {
 "--toolbar-spacing": "{spacing.200}";
+"--divider-size": "{sizes.800}";
 };
 };
 orientation: {
 horizontal: {
 "--toolbar-direction": "row";
 "& .nimbus-divider": {
-height: "auto";
+height: "var(--divider-size)";
 mx: "var(--toolbar-spacing)";
 };
 };
 vertical: {
 "--toolbar-direction": "column";
 "& .nimbus-divider": {
+width: "var(--divider-size)";
 my: "var(--toolbar-spacing)";
 };
 };
@@ -82,3 +85,12 @@ declare interface ToolbarSlotProps extends Omit<HTMLChakraProps<"div", ToolbarRe
 }
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/tooltip.d.ts

@@ -130,3 +130,12 @@ declare interface TooltipRootProps extends HTMLChakraProps<"div", TooltipRecipeP
 declare type TooltipVariantProps = ExcludePolymorphicFromProps<TooltipRootProps & RecipeVariantProps<typeof tooltipRecipe> & TooltipProps_2>;
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/utils.d.ts

@@ -0,0 +1,164 @@
+import { BaseText } from 'slate';
+import { Descendant } from 'slate';
+import { Editor } from 'slate';
+import { ReactElement } from 'react';
+import { RenderElementProps } from 'slate-react';
+import { RenderLeafProps } from 'slate-react';
+
+declare const BLOCK_TAGS: {
+    readonly blockquote: "block-quote";
+    readonly p: "paragraph";
+    readonly pre: "code";
+    readonly h1: "heading-one";
+    readonly h2: "heading-two";
+    readonly h3: "heading-three";
+    readonly h4: "heading-four";
+    readonly h5: "heading-five";
+    readonly ul: "bulleted-list";
+    readonly ol: "numbered-list";
+    readonly li: "list-item";
+    readonly a: "link";
+};
+
+declare type BlockType = (typeof blockTypes)[number] | "paragraph";
+
+/**
+ * Available block types for text style detection
+ *
+ * Used by:
+ * - hooks/useToolbarState.ts: Detects currently active block type in editor
+ * - Excludes "paragraph" as it's the default/fallback type
+ */
+declare const blockTypes: readonly ["heading-one", "heading-two", "heading-three", "heading-four", "heading-five", "block-quote"];
+
+export declare const createEmptyValue: () => Descendant[];
+
+/**
+ * Creates a block type from heading level
+ */
+export declare function createHeadingBlockType(level: number): BlockType | null;
+
+export declare interface CustomElement {
+    type: ElementFormat;
+    children: Descendant[];
+    align?: string;
+    url?: string;
+    htmlAttributes?: Record<string, string>;
+}
+
+export declare interface CustomText extends BaseText {
+    bold?: boolean;
+    code?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    superscript?: boolean;
+    subscript?: boolean;
+    strikethrough?: boolean;
+}
+
+declare const Element_2: ({ attributes, children, element, }: RenderElementProps) => ReactElement;
+export { Element_2 as Element }
+
+export declare type ElementFormat = (typeof BLOCK_TAGS)[keyof typeof BLOCK_TAGS];
+
+export declare const focusEditor: (editor: Editor) => void;
+
+export declare const fromHTML: (html: string) => Descendant[];
+
+/**
+ * Gets the heading level from a heading block type (1-6)
+ */
+export declare function getHeadingLevel(blockType: string): number | null;
+
+/**
+ * Gets a text style definition by its ID
+ */
+export declare function getTextStyleById(styleId: string): TextStyleDefinition | undefined;
+
+/**
+ * Gets all available text style IDs
+ */
+export declare function getTextStyleIds(): string[];
+
+/**
+ * Gets the display label for a text style ID
+ */
+export declare function getTextStyleLabel(styleId: string): string;
+
+/**
+ * Gets the text style properties for rendering
+ */
+export declare function getTextStyleProps(styleId: string): TextStyleDefinition["props"] | null;
+
+export declare const isBlockActive: (editor: Editor, format: ElementFormat) => boolean;
+
+/**
+ * Checks if a rich text HTML value is empty or contains no meaningful content
+ */
+export declare const isEmpty: (value: string) => boolean;
+
+/**
+ * Determines if a block type is a heading
+ */
+export declare function isHeadingType(blockType: string): boolean;
+
+export declare const isMarkActive: (editor: Editor, format: string) => boolean;
+
+/**
+ * Checks if a style ID is a valid text style
+ */
+export declare function isValidTextStyle(styleId: string): boolean;
+
+export declare const Leaf: ({ attributes, children, leaf, }: RenderLeafProps) => ReactElement;
+
+export declare const resetEditor: (editor: Editor, value: string) => void;
+
+export declare const Softbreaker: {
+    placeholderCharacter: string;
+    serialize: (string: string) => string;
+    deserialize: (string: string) => string;
+};
+
+/**
+ * Text style definitions for rich text editor block formatting
+ *
+ * Used by:
+ * - components/rich-text-toolbar.tsx: Renders text style dropdown menu with these options
+ * - hooks/useToolbarState.ts: Manages current text style state and selection logic
+ * - utils/text-style-utils.ts: Helper functions for text style operations
+ * - utils/validation-utils.ts: Validates if block types are supported
+ *
+ * Purpose:
+ * - Centralizes all available text styles and their visual properties
+ * - Maps block type IDs to user-friendly labels and Chakra UI styling props
+ * - Ensures consistent styling across the editor and UI controls
+ */
+declare interface TextStyleDefinition {
+    id: string;
+    label: string;
+    props: {
+        textStyle: string;
+        fontWeight: string;
+    };
+}
+
+export declare const toggleBlock: (editor: Editor, format: ElementFormat) => void;
+
+export declare const toggleMark: (editor: Editor, format: string) => void;
+
+export declare const toHTML: (value: Descendant[]) => string;
+
+export declare const validSlateStateAdapter: (value: unknown) => Descendant[];
+
+export declare const withLinks: (editor: Editor) => Editor;
+
+export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/visually-hidden.d.ts

@@ -20,3 +20,12 @@ export declare interface VisuallyHiddenProps extends Omit<VisuallyHiddenProps_2,
 }
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools/nimbus",
-  "version": "0.0.0-canary-20250826133439",
+  "version": "0.0.0-canary-20250827101922",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "type": "module",
@@ -49,12 +49,18 @@
     "@chakra-ui/react": "^3.25.0",
     "@emotion/is-prop-valid": "^1.3.1",
     "@react-aria/interactions": "3.25.4",
+    "escape-html": "^1.0.3",
+    "is-hotkey": "^0.2.0",
     "next-themes": "^0.4.6",
     "react-aria": "3.42.0",
     "react-aria-components": "1.11.0",
     "react-hotkeys-hook": "^4.6.1",
     "react-stately": "3.40.0",
-    "react-use": "^17.5.1"
+    "react-use": "^17.5.1",
+    "slate": "^0.75.0",
+    "slate-history": "^0.113.1",
+    "slate-hyperscript": "^0.77.0",
+    "slate-react": "^0.75.0"
   },
   "devDependencies": {
     "@chakra-ui/cli": "^3.25.0",
@@ -66,6 +72,8 @@
     "@storybook/react-vite": "^9.0.18",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/escape-html": "^1.0.4",
+    "@types/is-hotkey": "^0.1.10",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.4.1",
@@ -84,24 +92,24 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4",
-    "@commercetools/nimbus-icons": "^0.0.0-canary-20250826133439",
-    "@commercetools/nimbus-tokens": "^0.0.0-canary-20250826133439"
+    "@commercetools/nimbus-icons": "^0.0.0-canary-20250827101922",
+    "@commercetools/nimbus-tokens": "^0.0.0-canary-20250827101922"
   },
   "peerDependencies": {
     "@chakra-ui/react": "^3.25.0",
     "react": "^19.0.0",
-    "@commercetools/nimbus-icons": "^0.0.0-canary-20250826133439",
-    "@commercetools/nimbus-tokens": "^0.0.0-canary-20250826133439"
+    "@commercetools/nimbus-icons": "^0.0.0-canary-20250827101922",
+    "@commercetools/nimbus-tokens": "^0.0.0-canary-20250827101922"
   },
   "scripts": {
     "build": "pnpm run build-theme-typings && pnpm run build:lib",
     "build:lib": "vite build",
     "dev": "vite build --watch",
     "test": "vitest",
+    "typecheck": "tsc --noEmit",
     "build-theme-typings": "pnpm chakra typegen ./src/theme/index.ts",
     "bundles:analyze": "ANALYZE_BUNDLE=true vite build",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "typecheck": "tsc --noEmit"
+    "build-storybook": "storybook build"
   }
 }