react-native-richify 1.0.1 → 1.0.3

package/lib/typescript/src/types/index.d.ts

@@ -0,0 +1,257 @@
+import type { TextStyle, ViewStyle, TextInputProps, ColorValue } from 'react-native';
+/**
+ * Supported inline formatting types.
+ */
+export type FormatType = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'code';
+/**
+ * Heading level presets.
+ */
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'none';
+/**
+ * List type for a line/paragraph.
+ */
+export type ListType = 'bullet' | 'ordered' | 'none';
+/**
+ * Inline formatting styles attached to a text segment.
+ */
+export interface FormatStyle {
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    strikethrough?: boolean;
+    code?: boolean;
+    color?: string;
+    backgroundColor?: string;
+    fontSize?: number;
+    heading?: HeadingLevel;
+}
+/**
+ * A segment of text with uniform formatting.
+ * The entire rich text content is an ordered array of these segments.
+ */
+export interface StyledSegment {
+    /** The text content of this segment. */
+    text: string;
+    /** The formatting styles applied to this segment. */
+    styles: FormatStyle;
+}
+/**
+ * Represents a text selection range within the input.
+ */
+export interface SelectionRange {
+    /** Start index (inclusive). */
+    start: number;
+    /** End index (exclusive). */
+    end: number;
+}
+/**
+ * The complete state of the rich text input.
+ */
+export interface RichTextState {
+    /** Ordered array of styled text segments. */
+    segments: StyledSegment[];
+    /** Current selection range. */
+    selection: SelectionRange;
+    /** The current active styles that will be applied to newly typed text. */
+    activeStyles: FormatStyle;
+}
+/**
+ * Actions returned by the useRichText hook for controlling the editor.
+ */
+export interface RichTextActions {
+    /** Toggle an inline format on the current selection or active styles. */
+    toggleFormat: (format: FormatType) => void;
+    /** Set a specific style property on the current selection. */
+    setStyleProperty: <K extends keyof FormatStyle>(key: K, value: FormatStyle[K]) => void;
+    /** Apply a heading level to the current line. */
+    setHeading: (level: HeadingLevel) => void;
+    /** Set the text color for the current selection. */
+    setColor: (color: string) => void;
+    /** Set the background color for the current selection. */
+    setBackgroundColor: (color: string) => void;
+    /** Set the font size for the current selection. */
+    setFontSize: (size: number) => void;
+    /** Handle text change from TextInput. */
+    handleTextChange: (text: string) => void;
+    /** Handle selection change from TextInput. */
+    handleSelectionChange: (selection: SelectionRange) => void;
+    /** Check whether a format is active at the current cursor/selection. */
+    isFormatActive: (format: FormatType) => boolean;
+    /** Get the effective shared style at the current cursor/selection. */
+    getSelectionStyle: () => FormatStyle;
+    /** Get the full plain text content. */
+    getPlainText: () => string;
+    /** Export the segments as a serializable JSON array. */
+    exportJSON: () => StyledSegment[];
+    /** Import segments from a JSON array, replacing current content. */
+    importJSON: (segments: StyledSegment[]) => void;
+    /** Clear all content. */
+    clear: () => void;
+}
+/**
+ * Return value of the useRichText hook.
+ */
+export interface UseRichTextReturn {
+    state: RichTextState;
+    actions: RichTextActions;
+}
+/**
+ * Theme configuration for the RichTextInput component.
+ */
+export interface RichTextTheme {
+    /** Style for the outer container. */
+    containerStyle?: ViewStyle;
+    /** Style for the TextInput. */
+    inputStyle?: TextStyle;
+    /** Style for the overlay text container. */
+    overlayContainerStyle?: ViewStyle;
+    /** Base text style applied to all segments before formatting. */
+    baseTextStyle?: TextStyle;
+    /** Style for the toolbar container. */
+    toolbarStyle?: ViewStyle;
+    /** Style for toolbar buttons. */
+    toolbarButtonStyle?: ViewStyle;
+    /** Style for active toolbar buttons. */
+    toolbarButtonActiveStyle?: ViewStyle;
+    /** Text style for toolbar button labels. */
+    toolbarButtonTextStyle?: TextStyle;
+    /** Text style for active toolbar button labels. */
+    toolbarButtonActiveTextStyle?: TextStyle;
+    /** Style for the code format. */
+    codeStyle?: TextStyle;
+    /** Colors */
+    colors?: {
+        /** Primary accent color. */
+        primary?: string;
+        /** Background color of the editor. */
+        background?: string;
+        /** Text color. */
+        text?: string;
+        /** Placeholder text color. */
+        placeholder?: string;
+        /** Toolbar background. */
+        toolbarBackground?: string;
+        /** Toolbar border color. */
+        toolbarBorder?: string;
+        /** Cursor / caret color. */
+        cursor?: ColorValue;
+    };
+}
+/**
+ * A toolbar item configuration.
+ */
+export interface ToolbarItem {
+    /** Unique identifier. */
+    id: string;
+    /** Display label or icon text. */
+    label: string;
+    /** The format type this button toggles (for inline formats). */
+    format?: FormatType;
+    /** The heading level this button sets. */
+    heading?: HeadingLevel;
+    /** Custom action handler (overrides default behavior). */
+    onPress?: () => void;
+    /** Whether this item is currently active. */
+    active?: boolean;
+    /** Custom render function for the button. */
+    renderButton?: (props: ToolbarButtonRenderProps) => React.ReactElement | null;
+}
+/**
+ * Props passed to a custom toolbar button renderer.
+ */
+export interface ToolbarButtonRenderProps {
+    active: boolean;
+    onPress: () => void;
+    label: string;
+}
+/**
+ * Props passed to a custom toolbar renderer.
+ */
+export interface ToolbarRenderProps {
+    items: ToolbarItem[];
+    state: RichTextState;
+    actions: RichTextActions;
+}
+/**
+ * Props for the OverlayText component.
+ */
+export interface OverlayTextProps {
+    /** The styled segments to render. */
+    segments: StyledSegment[];
+    /** Base text style. */
+    baseTextStyle?: TextStyle;
+    /** Theme overrides. */
+    theme?: RichTextTheme;
+}
+/**
+ * Props for the ToolbarButton component.
+ */
+export interface ToolbarButtonProps {
+    /** Button label text. */
+    label: string;
+    /** Whether the button is currently active. */
+    active: boolean;
+    /** Press handler. */
+    onPress: () => void;
+    /** Theme overrides. */
+    theme?: RichTextTheme;
+    /** Custom render function. */
+    renderButton?: ToolbarItem['renderButton'];
+}
+/**
+ * Props for the Toolbar component.
+ */
+export interface ToolbarProps {
+    /** The current rich text actions. */
+    actions: RichTextActions;
+    /** The current rich text state. */
+    state: RichTextState;
+    /** Custom toolbar items (overrides defaults). */
+    items?: ToolbarItem[];
+    /** Theme overrides. */
+    theme?: RichTextTheme;
+    /** Whether to show the toolbar. */
+    visible?: boolean;
+    /** Custom render function for the entire toolbar. */
+    renderToolbar?: (props: ToolbarRenderProps) => React.ReactElement | null;
+}
+/**
+ * Props for the main RichTextInput component.
+ */
+export interface RichTextInputProps {
+    /** Initial segments to populate the editor with. */
+    initialSegments?: StyledSegment[];
+    /** Callback when the content changes. */
+    onChangeSegments?: (segments: StyledSegment[]) => void;
+    /** Callback when the plain text changes. */
+    onChangeText?: (text: string) => void;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Whether the input is editable. */
+    editable?: boolean;
+    /** Maximum character length. */
+    maxLength?: number;
+    /** Whether to show the toolbar. */
+    showToolbar?: boolean;
+    /** Toolbar position relative to the input. */
+    toolbarPosition?: 'top' | 'bottom';
+    /** Custom toolbar items. */
+    toolbarItems?: ToolbarItem[];
+    /** Theme configuration. */
+    theme?: RichTextTheme;
+    /** Whether multiline input is enabled. */
+    multiline?: boolean;
+    /** Minimum height for the input area. */
+    minHeight?: number;
+    /** Maximum height for the input area. */
+    maxHeight?: number;
+    /** Auto-focus the input on mount. */
+    autoFocus?: boolean;
+    /** Additional TextInput props. */
+    textInputProps?: Omit<TextInputProps, 'value' | 'onChangeText' | 'onSelectionChange' | 'multiline' | 'placeholder' | 'editable' | 'maxLength' | 'autoFocus'>;
+    /** Custom toolbar render function. */
+    renderToolbar?: ToolbarProps['renderToolbar'];
+    /** Ref callback to access actions. */
+    onReady?: (actions: RichTextActions) => void;
+}
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"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"}

package/lib/typescript/src/utils/formatter.d.ts

@@ -0,0 +1,29 @@
+import type { StyledSegment, FormatType, FormatStyle, HeadingLevel, SelectionRange } from '../types';
+/**
+ * Toggle an inline format (bold, italic, etc.) on the selected range.
+ *
+ * If the entire selection already has the format, it is removed.
+ * Otherwise, it is applied to the entire selection.
+ *
+ * Returns the new segments array.
+ */
+export declare function toggleFormatOnSelection(segments: StyledSegment[], selection: SelectionRange, format: FormatType): StyledSegment[];
+/**
+ * Set a specific style property on the selected range.
+ */
+export declare function setStyleOnSelection<K extends keyof FormatStyle>(segments: StyledSegment[], selection: SelectionRange, key: K, value: FormatStyle[K]): StyledSegment[];
+/**
+ * Apply a heading level to the line containing the cursor/selection.
+ */
+export declare function setHeadingOnLine(segments: StyledSegment[], selection: SelectionRange, level: HeadingLevel): StyledSegment[];
+/**
+ * Checks whether the given format is active across the entire selection.
+ */
+export declare function isFormatActiveInSelection(segments: StyledSegment[], selection: SelectionRange, format: FormatType): boolean;
+/**
+ * Gets the format style that is common across the entire selection.
+ * For properties where segments disagree, the value is undefined.
+ */
+export declare function getSelectionStyle(segments: StyledSegment[], selection: SelectionRange): FormatStyle;
+export { createSegment } from '../utils/parser';
+//# sourceMappingURL=formatter.d.ts.map

package/lib/typescript/src/utils/formatter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatter.d.ts","sourceRoot":"","sources":["../../../../src/utils/formatter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACf,MAAM,UAAU,CAAC;AAUlB;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,UAAU,GACjB,aAAa,EAAE,CAgBjB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,WAAW,EAC7D,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,EACzB,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,GACpB,aAAa,EAAE,CAOjB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,YAAY,GAClB,aAAa,EAAE,CAWjB;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,UAAU,GACjB,OAAO,CAQT;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,GACxB,WAAW,CAwCb;AAgID,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/typescript/src/utils/parser.d.ts

@@ -0,0 +1,46 @@
+import type { StyledSegment, FormatStyle } from '../types';
+/**
+ * Creates a new segment with the given text and optional styles.
+ */
+export declare function createSegment(text: string, styles?: FormatStyle): StyledSegment;
+/**
+ * Computes the total character length across all segments.
+ */
+export declare function getTotalLength(segments: StyledSegment[]): number;
+/**
+ * Converts an array of segments to plain text.
+ */
+export declare function segmentsToPlainText(segments: StyledSegment[]): string;
+/**
+ * Finds which segment and character offset a global position corresponds to.
+ * Returns { segmentIndex, offsetInSegment }.
+ */
+export declare function findPositionInSegments(segments: StyledSegment[], globalPosition: number): {
+    segmentIndex: number;
+    offsetInSegment: number;
+};
+/**
+ * Splits a segment at the given offset, returning [before, after].
+ * If offset is 0 or at end, one side will have empty text.
+ */
+export declare function splitSegment(segment: StyledSegment, offset: number): [StyledSegment, StyledSegment];
+/**
+ * Checks if two FormatStyle objects are deeply equal.
+ */
+export declare function areStylesEqual(a: FormatStyle, b: FormatStyle): boolean;
+/**
+ * Merges adjacent segments that have identical styles.
+ * Returns a new array (does not mutate input).
+ */
+export declare function mergeAdjacentSegments(segments: StyledSegment[]): StyledSegment[];
+/**
+ * Given the old segments and new plain text (from TextInput onChange),
+ * reconcile the segments to preserve formatting while reflecting the text change.
+ *
+ * Strategy:
+ * 1. Find the diff region between old plain text and new plain text
+ * 2. Replace that region in the segment array
+ * 3. New text inserted at the diff point inherits the `activeStyles`
+ */
+export declare function reconcileTextChange(oldSegments: StyledSegment[], newText: string, activeStyles: FormatStyle): StyledSegment[];
+//# sourceMappingURL=parser.d.ts.map

package/lib/typescript/src/utils/parser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parser.d.ts","sourceRoot":"","sources":["../../../../src/utils/parser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG3D;;GAEG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,MAAM,GAAE,WAAuC,GAC9C,aAAa,CAEf;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,aAAa,EAAE,GAAG,MAAM,CAEhE;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,aAAa,EAAE,GAAG,MAAM,CAErE;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,aAAa,EAAE,EACzB,cAAc,EAAE,MAAM,GACrB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,eAAe,EAAE,MAAM,CAAA;CAAE,CAiBnD;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,MAAM,GACb,CAAC,aAAa,EAAE,aAAa,CAAC,CAIhC;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,GAAG,OAAO,CAYtE;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,aAAa,EAAE,GACxB,aAAa,EAAE,CA8BjB;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,aAAa,EAAE,EAC5B,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,WAAW,GACxB,aAAa,EAAE,CAqHjB"}

package/lib/typescript/src/utils/styleMapper.d.ts

@@ -0,0 +1,16 @@
+import type { TextStyle } from 'react-native';
+import type { FormatStyle, RichTextTheme, StyledSegment } from '../types';
+/**
+ * Maps a FormatStyle to a React Native TextStyle.
+ * Applies formatting properties based on the segment's style.
+ */
+export declare function formatStyleToTextStyle(formatStyle: FormatStyle, theme?: RichTextTheme): TextStyle;
+/**
+ * Maps an entire segment to its computed TextStyle (base + format).
+ */
+export declare function segmentToTextStyle(segment: StyledSegment, theme?: RichTextTheme): TextStyle;
+/**
+ * Batch-maps an array of segments to an array of TextStyles.
+ */
+export declare function segmentsToTextStyles(segments: StyledSegment[], theme?: RichTextTheme): TextStyle[];
+//# sourceMappingURL=styleMapper.d.ts.map

package/lib/typescript/src/utils/styleMapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleMapper.d.ts","sourceRoot":"","sources":["../../../../src/utils/styleMapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG1E;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,WAAW,EACxB,KAAK,CAAC,EAAE,aAAa,GACpB,SAAS,CAsDX;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,aAAa,EACtB,KAAK,CAAC,EAAE,aAAa,GACpB,SAAS,CAQX;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,aAAa,EAAE,EACzB,KAAK,CAAC,EAAE,aAAa,GACpB,SAAS,EAAE,CAEb"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-richify",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A production-grade, fully customizable React Native Rich Text Input using the Overlay Technique — no WebView required.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/components/OverlayText.tsx

@@ -17,21 +17,29 @@ export const OverlayText: React.FC<OverlayTextProps> = React.memo(
     const overlayStyle =
       resolvedTheme.overlayContainerStyle ??
       DEFAULT_THEME.overlayContainerStyle;
+    const resolvedBaseTextStyle =
+      baseTextStyle ??
+      resolvedTheme.baseTextStyle ??
+      DEFAULT_THEME.baseTextStyle;
+    const overlayTheme = {
+      ...resolvedTheme,
+      baseTextStyle: resolvedBaseTextStyle,
+    };
 
     return (
       <View style={overlayStyle} pointerEvents="none">
-        <Text>
+        <Text style={resolvedBaseTextStyle}>
           {segments.map((segment, index) => {
             if (segment.text.length === 0 && segments.length > 1) {
               return null;
             }
 
-            const textStyle = segmentToTextStyle(segment, resolvedTheme);
+            const textStyle = segmentToTextStyle(segment, overlayTheme);
 
             return (
               <Text
                 key={`${index}-${segment.text.slice(0, 8)}`}
-                style={[baseTextStyle, textStyle]}
+                style={textStyle}
               >
                 {segment.text}
               </Text>

package/src/components/RichTextInput.tsx

@@ -89,7 +89,10 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
   // Input style
   const inputStyle = [
     styles.textInput,
+    resolvedTheme.baseTextStyle ?? DEFAULT_THEME.baseTextStyle,
     resolvedTheme.inputStyle ?? DEFAULT_THEME.inputStyle,
+    textInputProps?.style,
+    styles.hiddenInputText,
   ];
 
   // Toolbar component
@@ -141,11 +144,12 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
           editable={editable}
           maxLength={maxLength}
           autoFocus={autoFocus}
+          underlineColorAndroid="transparent"
           selectionColor={
             resolvedTheme.colors?.cursor ?? DEFAULT_THEME.colors?.cursor
           }
           textAlignVertical="top"
-          scrollEnabled={true}
+          scrollEnabled={typeof maxHeight === 'number'}
         />
       </View>
 
@@ -164,11 +168,13 @@ const styles = StyleSheet.create({
     position: 'relative',
   },
   textInput: {
-    // The TextInput must be transparent so the overlay text shows through.
-    // Only the caret/cursor and selection highlight are visible.
-    color: 'transparent',
-    // Ensure it matches the overlay text positioning exactly.
     position: 'relative',
     zIndex: 1,
   },
+  hiddenInputText: {
+    // Keep the editable layer invisible while preserving the caret.
+    color: 'transparent',
+    backgroundColor: 'transparent',
+    textShadowColor: 'transparent',
+  },
 });

package/src/components/Toolbar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ToolbarProps } from '@/types';
+import type { ToolbarProps } from '../types';
 /**
  * Formatting toolbar for the rich text editor.
  *

package/src/components/Toolbar.tsx

@@ -20,17 +20,17 @@ export const Toolbar: React.FC<ToolbarProps> = React.memo(
 
     // Compute active state for each item
     const enrichedItems: ToolbarItem[] = useMemo(() => {
+      const selectionStyle = actions.getSelectionStyle();
+
       return toolbarItems.map((item) => {
         let isActive = false;
 
         if (item.format) {
-          // Check if the format is currently active
-          const { activeStyles } = state;
-          isActive = !!activeStyles[item.format];
+          isActive = actions.isFormatActive(item.format);
         }
 
         if (item.heading) {
-          isActive = state.activeStyles.heading === item.heading;
+          isActive = selectionStyle.heading === item.heading;
         }
 
         return {
@@ -38,7 +38,7 @@ export const Toolbar: React.FC<ToolbarProps> = React.memo(
           active: item.active ?? isActive,
         };
       });
-    }, [toolbarItems, state]);
+    }, [actions, toolbarItems]);
 
     // Custom render
     if (renderToolbar) {

package/src/components/ToolbarButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ToolbarButtonProps } from '@/types';
+import type { ToolbarButtonProps } from '../types';
 /**
  * A single toolbar button that toggles a formatting option.
  * Supports custom rendering via the `renderButton` prop.

package/src/constants/defaultStyles.d.ts

@@ -1,4 +1,4 @@
-import type { RichTextTheme, FormatStyle, ToolbarItem } from '@/types';
+import type { RichTextTheme, FormatStyle, ToolbarItem } from '../types';
 /**
  * Default color palette used throughout the editor.
  */

package/src/hooks/useRichText.ts

@@ -1,9 +1,7 @@
-import { useState, useCallback, useRef, useEffect } from 'react';
+import { useState, useCallback, useRef } from 'react';
 import type {
   StyledSegment,
-  FormatType,
   FormatStyle,
-  HeadingLevel,
   SelectionRange,
   RichTextState,
   RichTextActions,
@@ -16,6 +14,7 @@ import {
   reconcileTextChange,
   findPositionInSegments,
 } from '../utils/parser';
+import { getSelectionStyle } from '../utils/formatter';
 import { useSelection } from '../hooks/useSelection';
 import { useFormatting } from '../hooks/useFormatting';
 
@@ -57,6 +56,8 @@ export function useRichText(
   // Refs for stable access in callbacks
   const segmentsRef = useRef(segments);
   segmentsRef.current = segments;
+  const selectionRef = useRef(selection);
+  selectionRef.current = selection;
   const activeStylesRef = useRef(activeStyles);
   activeStylesRef.current = activeStyles;
 
@@ -86,7 +87,11 @@ export function useRichText(
   const handleTextChange = useCallback(
     (newText: string) => {
       const currentSegments = segmentsRef.current;
-      const currentActiveStyles = activeStylesRef.current;
+      const currentSelection = selectionRef.current;
+      const currentActiveStyles =
+        currentSelection.start === currentSelection.end
+          ? activeStylesRef.current
+          : getSelectionStyle(currentSegments, currentSelection);
 
       const newSegments = reconcileTextChange(
         currentSegments,
@@ -161,6 +166,8 @@ export function useRichText(
     setFontSize: formatting.setFontSize,
     handleTextChange,
     handleSelectionChange: onSelectionChange,
+    isFormatActive: formatting.isFormatActive,
+    getSelectionStyle: formatting.currentSelectionStyle,
     getPlainText,
     exportJSON,
     importJSON,

package/src/index.d.ts

@@ -12,4 +12,4 @@ export { createSegment, segmentsToPlainText, getTotalLength, mergeAdjacentSegmen
 export { toggleFormatOnSelection, setStyleOnSelection, setHeadingOnLine, isFormatActiveInSelection, getSelectionStyle, } from './utils/formatter';
 export { formatStyleToTextStyle, segmentToTextStyle, segmentsToTextStyles, } from './utils/styleMapper';
 export { DEFAULT_COLORS, DEFAULT_THEME, DEFAULT_TOOLBAR_ITEMS, DEFAULT_BASE_TEXT_STYLE, HEADING_FONT_SIZES, EMPTY_FORMAT_STYLE, } from './constants/defaultStyles';
-export type { FormatType, HeadingLevel, ListType, FormatStyle, StyledSegment, SelectionRange, RichTextState, RichTextActions, UseRichTextReturn, RichTextTheme, ToolbarItem, OverlayTextProps, ToolbarButtonProps, ToolbarProps, RichTextInputProps, } from './types';
+export type { FormatType, HeadingLevel, ListType, FormatStyle, StyledSegment, SelectionRange, RichTextState, RichTextActions, UseRichTextReturn, RichTextTheme, ToolbarItem, ToolbarButtonRenderProps, ToolbarRenderProps, OverlayTextProps, ToolbarButtonProps, ToolbarProps, RichTextInputProps, } from './types';

package/src/index.ts

@@ -61,6 +61,8 @@ export type {
   UseRichTextReturn,
   RichTextTheme,
   ToolbarItem,
+  ToolbarButtonRenderProps,
+  ToolbarRenderProps,
   OverlayTextProps,
   ToolbarButtonProps,
   ToolbarProps,

package/src/types/index.d.ts

@@ -75,6 +75,10 @@ export interface RichTextActions {
     handleTextChange: (text: string) => void;
     /** Handle selection change from TextInput. */
     handleSelectionChange: (selection: SelectionRange) => void;
+    /** Check whether a format is active at the current cursor/selection. */
+    isFormatActive: (format: FormatType) => boolean;
+    /** Get the effective shared style at the current cursor/selection. */
+    getSelectionStyle: () => FormatStyle;
     /** Get the full plain text content. */
     getPlainText: () => string;
     /** Export the segments as a serializable JSON array. */
@@ -150,11 +154,23 @@ export interface ToolbarItem {
     /** Whether this item is currently active. */
     active?: boolean;
     /** Custom render function for the button. */
-    renderButton?: (props: {
-        active: boolean;
-        onPress: () => void;
-        label: string;
-    }) => React.ReactElement;
+    renderButton?: (props: ToolbarButtonRenderProps) => React.ReactElement | null;
+}
+/**
+ * Props passed to a custom toolbar button renderer.
+ */
+export interface ToolbarButtonRenderProps {
+    active: boolean;
+    onPress: () => void;
+    label: string;
+}
+/**
+ * Props passed to a custom toolbar renderer.
+ */
+export interface ToolbarRenderProps {
+    items: ToolbarItem[];
+    state: RichTextState;
+    actions: RichTextActions;
 }
 /**
  * Props for the OverlayText component.
@@ -197,11 +213,7 @@ export interface ToolbarProps {
     /** Whether to show the toolbar. */
     visible?: boolean;
     /** Custom render function for the entire toolbar. */
-    renderToolbar?: (props: {
-        items: ToolbarItem[];
-        state: RichTextState;
-        actions: RichTextActions;
-    }) => React.ReactElement;
+    renderToolbar?: (props: ToolbarRenderProps) => React.ReactElement | null;
 }
 /**
  * Props for the main RichTextInput component.