react-native-richify 1.0.0

package/src/hooks/useFormatting.ts

@@ -0,0 +1,135 @@
+import { useCallback } from 'react';
+import type {
+  StyledSegment,
+  FormatType,
+  FormatStyle,
+  HeadingLevel,
+  SelectionRange,
+} from '@/types';
+import {
+  toggleFormatOnSelection,
+  setStyleOnSelection,
+  setHeadingOnLine,
+  isFormatActiveInSelection,
+  getSelectionStyle,
+} from '@/utils/formatter';
+
+interface UseFormattingOptions {
+  segments: StyledSegment[];
+  selection: SelectionRange;
+  activeStyles: FormatStyle;
+  onSegmentsChange: (segments: StyledSegment[]) => void;
+  onActiveStylesChange: (styles: FormatStyle) => void;
+}
+
+/**
+ * Hook that provides formatting commands for the rich text editor.
+ *
+ * Handles both selection-based formatting (when text is selected)
+ * and active-style updates (when no text is selected — affects next typed text).
+ */
+export function useFormatting({
+  segments,
+  selection,
+  activeStyles,
+  onSegmentsChange,
+  onActiveStylesChange,
+}: UseFormattingOptions) {
+  const toggleFormat = useCallback(
+    (format: FormatType) => {
+      if (selection.start === selection.end) {
+        // No selection — toggle active style for next typed text
+        onActiveStylesChange({
+          ...activeStyles,
+          [format]: !activeStyles[format],
+        });
+      } else {
+        // Has selection — toggle format on selected text
+        const newSegments = toggleFormatOnSelection(
+          segments,
+          selection,
+          format,
+        );
+        onSegmentsChange(newSegments);
+      }
+    },
+    [segments, selection, activeStyles, onSegmentsChange, onActiveStylesChange],
+  );
+
+  const setStyleProperty = useCallback(
+    <K extends keyof FormatStyle>(key: K, value: FormatStyle[K]) => {
+      if (selection.start === selection.end) {
+        onActiveStylesChange({
+          ...activeStyles,
+          [key]: value,
+        });
+      } else {
+        const newSegments = setStyleOnSelection(
+          segments,
+          selection,
+          key,
+          value,
+        );
+        onSegmentsChange(newSegments);
+      }
+    },
+    [segments, selection, activeStyles, onSegmentsChange, onActiveStylesChange],
+  );
+
+  const setHeading = useCallback(
+    (level: HeadingLevel) => {
+      const newSegments = setHeadingOnLine(segments, selection, level);
+      onSegmentsChange(newSegments);
+    },
+    [segments, selection, onSegmentsChange],
+  );
+
+  const setColor = useCallback(
+    (color: string) => {
+      setStyleProperty('color', color);
+    },
+    [setStyleProperty],
+  );
+
+  const setBackgroundColor = useCallback(
+    (color: string) => {
+      setStyleProperty('backgroundColor', color);
+    },
+    [setStyleProperty],
+  );
+
+  const setFontSize = useCallback(
+    (size: number) => {
+      setStyleProperty('fontSize', size);
+    },
+    [setStyleProperty],
+  );
+
+  const isFormatActive = useCallback(
+    (format: FormatType): boolean => {
+      if (selection.start === selection.end) {
+        return !!activeStyles[format];
+      }
+      return isFormatActiveInSelection(segments, selection, format);
+    },
+    [segments, selection, activeStyles],
+  );
+
+  const currentSelectionStyle = useCallback((): FormatStyle => {
+    if (selection.start === selection.end) {
+      return activeStyles;
+    }
+    return getSelectionStyle(segments, selection);
+  }, [segments, selection, activeStyles]);
+
+  return {
+    toggleFormat,
+    setStyleProperty,
+    setHeading,
+    setColor,
+    setBackgroundColor,
+    setFontSize,
+    isFormatActive,
+    currentSelectionStyle,
+  };
+}

package/src/hooks/useRichText.d.ts

@@ -0,0 +1,16 @@
+import type { StyledSegment, UseRichTextReturn } from '@/types';
+export interface UseRichTextOptions {
+    /** Initial segments to populate the editor with. */
+    initialSegments?: StyledSegment[];
+    /** Callback when segments change. */
+    onChangeSegments?: (segments: StyledSegment[]) => void;
+    /** Callback when plain text changes. */
+    onChangeText?: (text: string) => void;
+}
+/**
+ * Main hook for the rich text editor.
+ *
+ * Manages the complete editor state (segments, selection, active styles)
+ * and exposes all actions needed to build a rich text UI.
+ */
+export declare function useRichText(options?: UseRichTextOptions): UseRichTextReturn;

package/src/hooks/useRichText.ts

@@ -0,0 +1,171 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type {
+  StyledSegment,
+  FormatType,
+  FormatStyle,
+  HeadingLevel,
+  SelectionRange,
+  RichTextState,
+  RichTextActions,
+  UseRichTextReturn,
+} from '@/types';
+import { EMPTY_FORMAT_STYLE } from '@/constants/defaultStyles';
+import {
+  createSegment,
+  segmentsToPlainText,
+  reconcileTextChange,
+  findPositionInSegments,
+} from '@/utils/parser';
+import { useSelection } from '@/hooks/useSelection';
+import { useFormatting } from '@/hooks/useFormatting';
+
+export interface UseRichTextOptions {
+  /** Initial segments to populate the editor with. */
+  initialSegments?: StyledSegment[];
+  /** Callback when segments change. */
+  onChangeSegments?: (segments: StyledSegment[]) => void;
+  /** Callback when plain text changes. */
+  onChangeText?: (text: string) => void;
+}
+
+/**
+ * Main hook for the rich text editor.
+ *
+ * Manages the complete editor state (segments, selection, active styles)
+ * and exposes all actions needed to build a rich text UI.
+ */
+export function useRichText(
+  options: UseRichTextOptions = {},
+): UseRichTextReturn {
+  const { initialSegments, onChangeSegments, onChangeText } = options;
+
+  // ─── State ───────────────────────────────────────────────────────────────
+
+  const [segments, setSegments] = useState<StyledSegment[]>(() => {
+    if (initialSegments && initialSegments.length > 0) {
+      return initialSegments;
+    }
+    return [createSegment('')];
+  });
+
+  const [activeStyles, setActiveStyles] = useState<FormatStyle>({
+    ...EMPTY_FORMAT_STYLE,
+  });
+
+  const { selection, handleSelectionChange } = useSelection();
+
+  // Refs for stable access in callbacks
+  const segmentsRef = useRef(segments);
+  segmentsRef.current = segments;
+  const activeStylesRef = useRef(activeStyles);
+  activeStylesRef.current = activeStyles;
+
+  // ─── Segment Change Handler ──────────────────────────────────────────────
+
+  const updateSegments = useCallback(
+    (newSegments: StyledSegment[]) => {
+      setSegments(newSegments);
+      onChangeSegments?.(newSegments);
+      onChangeText?.(segmentsToPlainText(newSegments));
+    },
+    [onChangeSegments, onChangeText],
+  );
+
+  // ─── Formatting ──────────────────────────────────────────────────────────
+
+  const formatting = useFormatting({
+    segments,
+    selection,
+    activeStyles,
+    onSegmentsChange: updateSegments,
+    onActiveStylesChange: setActiveStyles,
+  });
+
+  // ─── Text Change Handler ─────────────────────────────────────────────────
+
+  const handleTextChange = useCallback(
+    (newText: string) => {
+      const currentSegments = segmentsRef.current;
+      const currentActiveStyles = activeStylesRef.current;
+
+      const newSegments = reconcileTextChange(
+        currentSegments,
+        newText,
+        currentActiveStyles,
+      );
+
+      updateSegments(newSegments);
+    },
+    [updateSegments],
+  );
+
+  // ─── Selection Change Handler ────────────────────────────────────────────
+
+  const onSelectionChange = useCallback(
+    (newSelection: SelectionRange) => {
+      handleSelectionChange(newSelection);
+
+      // Update active styles based on cursor position
+      if (newSelection.start === newSelection.end) {
+        const pos = findPositionInSegments(
+          segmentsRef.current,
+          newSelection.start,
+        );
+        if (segmentsRef.current.length > 0) {
+          const seg = segmentsRef.current[pos.segmentIndex];
+          setActiveStyles({ ...seg.styles });
+        }
+      }
+    },
+    [handleSelectionChange],
+  );
+
+  // ─── Export / Import ─────────────────────────────────────────────────────
+
+  const getPlainText = useCallback((): string => {
+    return segmentsToPlainText(segmentsRef.current);
+  }, []);
+
+  const exportJSON = useCallback((): StyledSegment[] => {
+    return JSON.parse(JSON.stringify(segmentsRef.current));
+  }, []);
+
+  const importJSON = useCallback(
+    (newSegments: StyledSegment[]) => {
+      const safeSegments =
+        newSegments.length > 0 ? newSegments : [createSegment('')];
+      updateSegments(safeSegments);
+    },
+    [updateSegments],
+  );
+
+  const clear = useCallback(() => {
+    updateSegments([createSegment('')]);
+    setActiveStyles({ ...EMPTY_FORMAT_STYLE });
+  }, [updateSegments]);
+
+  // ─── Build Return Value ──────────────────────────────────────────────────
+
+  const state: RichTextState = {
+    segments,
+    selection,
+    activeStyles,
+  };
+
+  const actions: RichTextActions = {
+    toggleFormat: formatting.toggleFormat,
+    setStyleProperty: formatting.setStyleProperty,
+    setHeading: formatting.setHeading,
+    setColor: formatting.setColor,
+    setBackgroundColor: formatting.setBackgroundColor,
+    setFontSize: formatting.setFontSize,
+    handleTextChange,
+    handleSelectionChange: onSelectionChange,
+    getPlainText,
+    exportJSON,
+    importJSON,
+    clear,
+  };
+
+  return { state, actions };
+}

package/src/hooks/useSelection.d.ts

@@ -0,0 +1,13 @@
+import type { SelectionRange } from '@/types';
+/**
+ * Hook for tracking TextInput selection state.
+ *
+ * Returns the current selection and a handler to update it.
+ */
+export declare function useSelection(initialSelection?: SelectionRange): {
+    selection: SelectionRange;
+    setSelection: import("react").Dispatch<import("react").SetStateAction<SelectionRange>>;
+    handleSelectionChange: (newSelection: SelectionRange) => void;
+    getSelection: () => SelectionRange;
+    hasSelection: () => boolean;
+};

package/src/hooks/useSelection.ts

@@ -0,0 +1,40 @@
+import { useState, useCallback, useRef } from 'react';
+import type { SelectionRange } from '@/types';
+
+/**
+ * Hook for tracking TextInput selection state.
+ *
+ * Returns the current selection and a handler to update it.
+ */
+export function useSelection(initialSelection?: SelectionRange) {
+  const [selection, setSelection] = useState<SelectionRange>(
+    initialSelection ?? { start: 0, end: 0 },
+  );
+
+  // Use a ref to avoid stale closures in callbacks
+  const selectionRef = useRef(selection);
+  selectionRef.current = selection;
+
+  const handleSelectionChange = useCallback(
+    (newSelection: SelectionRange) => {
+      setSelection(newSelection);
+    },
+    [],
+  );
+
+  const getSelection = useCallback((): SelectionRange => {
+    return selectionRef.current;
+  }, []);
+
+  const hasSelection = useCallback((): boolean => {
+    return selectionRef.current.start !== selectionRef.current.end;
+  }, []);
+
+  return {
+    selection,
+    setSelection,
+    handleSelectionChange,
+    getSelection,
+    hasSelection,
+  };
+}

package/src/index.d.ts

@@ -0,0 +1,15 @@
+export { RichTextInput } from '@/components/RichTextInput';
+export { OverlayText } from '@/components/OverlayText';
+export { Toolbar } from '@/components/Toolbar';
+export { ToolbarButton } from '@/components/ToolbarButton';
+export { useRichText } from '@/hooks/useRichText';
+export type { UseRichTextOptions } from '@/hooks/useRichText';
+export { useSelection } from '@/hooks/useSelection';
+export { useFormatting } from '@/hooks/useFormatting';
+export { RichTextProvider, useRichTextContext, } from '@/context/RichTextContext';
+export type { RichTextProviderProps } from '@/context/RichTextContext';
+export { createSegment, segmentsToPlainText, getTotalLength, mergeAdjacentSegments, reconcileTextChange, } from '@/utils/parser';
+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';

package/src/index.ts

@@ -0,0 +1,68 @@
+// ─── Components ──────────────────────────────────────────────────────────────
+export { RichTextInput } from '@/components/RichTextInput';
+export { OverlayText } from '@/components/OverlayText';
+export { Toolbar } from '@/components/Toolbar';
+export { ToolbarButton } from '@/components/ToolbarButton';
+
+// ─── Hooks ───────────────────────────────────────────────────────────────────
+export { useRichText } from '@/hooks/useRichText';
+export type { UseRichTextOptions } from '@/hooks/useRichText';
+export { useSelection } from '@/hooks/useSelection';
+export { useFormatting } from '@/hooks/useFormatting';
+
+// ─── Context ─────────────────────────────────────────────────────────────────
+export {
+  RichTextProvider,
+  useRichTextContext,
+} from '@/context/RichTextContext';
+export type { RichTextProviderProps } from '@/context/RichTextContext';
+
+// ─── Utilities ───────────────────────────────────────────────────────────────
+export {
+  createSegment,
+  segmentsToPlainText,
+  getTotalLength,
+  mergeAdjacentSegments,
+  reconcileTextChange,
+} from '@/utils/parser';
+export {
+  toggleFormatOnSelection,
+  setStyleOnSelection,
+  setHeadingOnLine,
+  isFormatActiveInSelection,
+  getSelectionStyle,
+} from '@/utils/formatter';
+export {
+  formatStyleToTextStyle,
+  segmentToTextStyle,
+  segmentsToTextStyles,
+} from '@/utils/styleMapper';
+
+// ─── Constants ───────────────────────────────────────────────────────────────
+export {
+  DEFAULT_COLORS,
+  DEFAULT_THEME,
+  DEFAULT_TOOLBAR_ITEMS,
+  DEFAULT_BASE_TEXT_STYLE,
+  HEADING_FONT_SIZES,
+  EMPTY_FORMAT_STYLE,
+} from '@/constants/defaultStyles';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+export type {
+  FormatType,
+  HeadingLevel,
+  ListType,
+  FormatStyle,
+  StyledSegment,
+  SelectionRange,
+  RichTextState,
+  RichTextActions,
+  UseRichTextReturn,
+  RichTextTheme,
+  ToolbarItem,
+  OverlayTextProps,
+  ToolbarButtonProps,
+  ToolbarProps,
+  RichTextInputProps,
+} from '@/types';