react-native-richify 1.0.2 → 1.0.3

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.

package/src/types/index.ts

@@ -101,6 +101,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. */
@@ -185,11 +189,25 @@ 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;
 }
 
 // ─── Component Props ─────────────────────────────────────────────────────────
@@ -237,11 +255,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;
 }
 
 /**