react-native-richify 1.0.3 → 1.0.5

package/src/hooks/useFormatting.ts

@@ -4,12 +4,16 @@ import type {
   FormatType,
   FormatStyle,
   HeadingLevel,
+  ListType,
   SelectionRange,
+  TextAlign,
 } from '../types';
 import {
   toggleFormatOnSelection,
   setStyleOnSelection,
   setHeadingOnLine,
+  setListTypeOnLine,
+  setTextAlignOnLine,
   isFormatActiveInSelection,
   getSelectionStyle,
 } from '../utils/formatter';
@@ -78,10 +82,90 @@ export function useFormatting({
 
   const setHeading = useCallback(
     (level: HeadingLevel) => {
-      const newSegments = setHeadingOnLine(segments, selection, level);
+      const currentHeading =
+        selection.start === selection.end
+          ? getSelectionStyle(segments, selection).heading ?? activeStyles.heading
+          : getSelectionStyle(segments, selection).heading;
+      const nextHeading: HeadingLevel =
+        currentHeading === level ? 'none' : level;
+
+      if (selection.start === selection.end) {
+        onActiveStylesChange({
+          ...activeStyles,
+          heading: nextHeading === 'none' ? undefined : nextHeading,
+          listType:
+            nextHeading === 'none' ? activeStyles.listType : undefined,
+        });
+      }
+
+      const newSegments = setHeadingOnLine(segments, selection, nextHeading);
+      onSegmentsChange(newSegments);
+    },
+    [
+      activeStyles,
+      onActiveStylesChange,
+      onSegmentsChange,
+      segments,
+      selection,
+    ],
+  );
+
+  const setListType = useCallback(
+    (listType: ListType) => {
+      if (selection.start === selection.end) {
+        onActiveStylesChange({
+          ...activeStyles,
+          listType: listType === 'none' ? undefined : listType,
+          heading: listType === 'none' ? activeStyles.heading : undefined,
+        });
+      }
+
+      const newSegments = setListTypeOnLine(segments, selection, listType);
+      onSegmentsChange(newSegments);
+    },
+    [
+      activeStyles,
+      onActiveStylesChange,
+      onSegmentsChange,
+      segments,
+      selection,
+    ],
+  );
+
+  const setTextAlign = useCallback(
+    (textAlign: TextAlign) => {
+      if (selection.start === selection.end) {
+        onActiveStylesChange({
+          ...activeStyles,
+          textAlign,
+        });
+      }
+
+      const newSegments = setTextAlignOnLine(segments, selection, textAlign);
       onSegmentsChange(newSegments);
     },
-    [segments, selection, onSegmentsChange],
+    [
+      activeStyles,
+      onActiveStylesChange,
+      onSegmentsChange,
+      segments,
+      selection,
+    ],
+  );
+
+  const setLink = useCallback(
+    (url?: string) => {
+      if (selection.start === selection.end) {
+        onActiveStylesChange({
+          ...activeStyles,
+          link: url,
+        });
+      } else {
+        const newSegments = setStyleOnSelection(segments, selection, 'link', url);
+        onSegmentsChange(newSegments);
+      }
+    },
+    [segments, selection, activeStyles, onSegmentsChange, onActiveStylesChange],
   );
 
   const setColor = useCallback(
@@ -126,6 +210,9 @@ export function useFormatting({
     toggleFormat,
     setStyleProperty,
     setHeading,
+    setListType,
+    setTextAlign,
+    setLink,
     setColor,
     setBackgroundColor,
     setFontSize,

package/src/hooks/useRichText.ts

@@ -2,9 +2,12 @@ import { useState, useCallback, useRef } from 'react';
 import type {
   StyledSegment,
   FormatStyle,
+  ListType,
+  OutputFormat,
   SelectionRange,
   RichTextState,
   RichTextActions,
+  TextAlign,
   UseRichTextReturn,
 } from '../types';
 import { EMPTY_FORMAT_STYLE } from '../constants/defaultStyles';
@@ -15,6 +18,7 @@ import {
   findPositionInSegments,
 } from '../utils/parser';
 import { getSelectionStyle } from '../utils/formatter';
+import { serializeSegments } from '../utils/serializer';
 import { useSelection } from '../hooks/useSelection';
 import { useFormatting } from '../hooks/useFormatting';
 
@@ -60,6 +64,7 @@ export function useRichText(
   selectionRef.current = selection;
   const activeStylesRef = useRef(activeStyles);
   activeStylesRef.current = activeStyles;
+  const preserveActiveStylesRef = useRef(false);
 
   // ─── Segment Change Handler ──────────────────────────────────────────────
 
@@ -88,10 +93,11 @@ export function useRichText(
     (newText: string) => {
       const currentSegments = segmentsRef.current;
       const currentSelection = selectionRef.current;
-      const currentActiveStyles =
+      const currentActiveStyles = sanitizeTypingStyles(
         currentSelection.start === currentSelection.end
           ? activeStylesRef.current
-          : getSelectionStyle(currentSegments, currentSelection);
+          : getSelectionStyle(currentSegments, currentSelection),
+      );
 
       const newSegments = reconcileTextChange(
         currentSegments,
@@ -108,8 +114,22 @@ export function useRichText(
 
   const onSelectionChange = useCallback(
     (newSelection: SelectionRange) => {
+      const previousSelection = selectionRef.current;
       handleSelectionChange(newSelection);
 
+      const shouldPreserveActiveStyles =
+        preserveActiveStylesRef.current &&
+        previousSelection.start === previousSelection.end &&
+        newSelection.start === newSelection.end &&
+        newSelection.start >= previousSelection.start &&
+        newSelection.start - previousSelection.start <= 1;
+
+      if (shouldPreserveActiveStyles) {
+        return;
+      }
+
+      preserveActiveStylesRef.current = false;
+
       // Update active styles based on cursor position
       if (newSelection.start === newSelection.end) {
         const pos = findPositionInSegments(
@@ -118,7 +138,7 @@ export function useRichText(
         );
         if (segmentsRef.current.length > 0) {
           const seg = segmentsRef.current[pos.segmentIndex];
-          setActiveStyles({ ...seg.styles });
+          setActiveStyles(sanitizeTypingStyles(seg.styles));
         }
       }
     },
@@ -131,6 +151,13 @@ export function useRichText(
     return segmentsToPlainText(segmentsRef.current);
   }, []);
 
+  const getOutput = useCallback(
+    (format: OutputFormat = 'markdown'): string => {
+      return serializeSegments(segmentsRef.current, format);
+    },
+    [],
+  );
+
   const exportJSON = useCallback((): StyledSegment[] => {
     return JSON.parse(JSON.stringify(segmentsRef.current));
   }, []);
@@ -140,14 +167,143 @@ export function useRichText(
       const safeSegments =
         newSegments.length > 0 ? newSegments : [createSegment('')];
       updateSegments(safeSegments);
+      handleSelectionChange({ start: 0, end: 0 });
+      setActiveStyles({ ...EMPTY_FORMAT_STYLE });
     },
-    [updateSegments],
+    [handleSelectionChange, updateSegments],
   );
 
   const clear = useCallback(() => {
     updateSegments([createSegment('')]);
+    handleSelectionChange({ start: 0, end: 0 });
     setActiveStyles({ ...EMPTY_FORMAT_STYLE });
-  }, [updateSegments]);
+    preserveActiveStylesRef.current = false;
+  }, [handleSelectionChange, updateSegments]);
+
+  const toggleFormat = useCallback<RichTextActions['toggleFormat']>(
+    (format) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.toggleFormat(format);
+    },
+    [formatting],
+  );
+
+  const setStyleProperty = useCallback<RichTextActions['setStyleProperty']>(
+    (key, value) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.setStyleProperty(key, value);
+    },
+    [formatting],
+  );
+
+  const setHeading = useCallback<RichTextActions['setHeading']>(
+    (level) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.setHeading(level);
+    },
+    [formatting],
+  );
+
+  const setListType = useCallback<RichTextActions['setListType']>(
+    (type: ListType) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.setListType(type);
+    },
+    [formatting],
+  );
+
+  const setTextAlign = useCallback<RichTextActions['setTextAlign']>(
+    (align: TextAlign) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.setTextAlign(align);
+    },
+    [formatting],
+  );
+
+  const setLink = useCallback<RichTextActions['setLink']>(
+    (url) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.setLink(url);
+    },
+    [formatting],
+  );
+
+  const setColor = useCallback<RichTextActions['setColor']>(
+    (color) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.setColor(color);
+    },
+    [formatting],
+  );
+
+  const setBackgroundColor = useCallback<RichTextActions['setBackgroundColor']>(
+    (color) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.setBackgroundColor(color);
+    },
+    [formatting],
+  );
+
+  const setFontSize = useCallback<RichTextActions['setFontSize']>(
+    (size) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.setFontSize(size);
+    },
+    [formatting],
+  );
+
+  const insertImage = useCallback<RichTextActions['insertImage']>(
+    (source, options) => {
+      const currentSegments = segmentsRef.current;
+      const currentSelection = selectionRef.current;
+      const plainText = segmentsToPlainText(currentSegments);
+      const start = Math.min(currentSelection.start, currentSelection.end);
+      const end = Math.max(currentSelection.start, currentSelection.end);
+      const placeholder =
+        options?.placeholder ?? buildImagePlaceholder(source, options?.alt);
+      const nextText = `${plainText.slice(0, start)}${placeholder}${plainText.slice(end)}`;
+      const insertionStyles = sanitizeTypingStyles(
+        start === end
+          ? activeStylesRef.current
+          : getSelectionStyle(currentSegments, currentSelection),
+      );
+      const nextSegments = reconcileTextChange(
+        currentSegments,
+        nextText,
+        {
+          ...insertionStyles,
+          imageSrc: source,
+          imageAlt: options?.alt,
+        },
+      );
+
+      updateSegments(nextSegments);
+      handleSelectionChange({
+        start: start + placeholder.length,
+        end: start + placeholder.length,
+      });
+      preserveActiveStylesRef.current = false;
+    },
+    [handleSelectionChange, updateSegments],
+  );
 
   // ─── Build Return Value ──────────────────────────────────────────────────
 
@@ -158,16 +314,21 @@ export function useRichText(
   };
 
   const actions: RichTextActions = {
-    toggleFormat: formatting.toggleFormat,
-    setStyleProperty: formatting.setStyleProperty,
-    setHeading: formatting.setHeading,
-    setColor: formatting.setColor,
-    setBackgroundColor: formatting.setBackgroundColor,
-    setFontSize: formatting.setFontSize,
+    toggleFormat,
+    setStyleProperty,
+    setHeading,
+    setListType,
+    setTextAlign,
+    setLink,
+    insertImage,
+    setColor,
+    setBackgroundColor,
+    setFontSize,
     handleTextChange,
     handleSelectionChange: onSelectionChange,
     isFormatActive: formatting.isFormatActive,
     getSelectionStyle: formatting.currentSelectionStyle,
+    getOutput,
     getPlainText,
     exportJSON,
     importJSON,
@@ -176,3 +337,24 @@ export function useRichText(
 
   return { state, actions };
 }
+
+function sanitizeTypingStyles(style: FormatStyle): FormatStyle {
+  return {
+    ...style,
+    imageSrc: undefined,
+    imageAlt: undefined,
+  };
+}
+
+function buildImagePlaceholder(source: string, alt?: string): string {
+  if (alt && alt.trim().length > 0) {
+    return `[Image: ${alt.trim()}]`;
+  }
+
+  const fileName = source.split('/').pop()?.split('?')[0]?.trim();
+  if (fileName) {
+    return `[Image: ${fileName}]`;
+  }
+
+  return '[Image]';
+}

package/src/index.d.ts

@@ -11,5 +11,6 @@ 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 { serializeSegments, segmentsToMarkdown, segmentsToHTML, } from './utils/serializer';
 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, ToolbarButtonRenderProps, ToolbarRenderProps, OverlayTextProps, ToolbarButtonProps, ToolbarProps, RichTextInputProps, } from './types';
+export type { FormatType, HeadingLevel, ListType, TextAlign, OutputFormat, OutputPreviewMode, FormatStyle, StyledSegment, SelectionRange, RichTextState, RichTextActions, UseRichTextReturn, RichTextTheme, ToolbarItem, ToolbarButtonRenderProps, ToolbarRenderProps, LinkRequestPayload, ImageRequestPayload, OverlayTextProps, ToolbarButtonProps, ToolbarProps, RichTextInputProps, } from './types';

package/src/index.ts

@@ -37,6 +37,11 @@ export {
   segmentToTextStyle,
   segmentsToTextStyles,
 } from './utils/styleMapper';
+export {
+  serializeSegments,
+  segmentsToMarkdown,
+  segmentsToHTML,
+} from './utils/serializer';
 
 // ─── Constants ───────────────────────────────────────────────────────────────
 export {
@@ -53,6 +58,9 @@ export type {
   FormatType,
   HeadingLevel,
   ListType,
+  TextAlign,
+  OutputFormat,
+  OutputPreviewMode,
   FormatStyle,
   StyledSegment,
   SelectionRange,
@@ -63,6 +71,8 @@ export type {
   ToolbarItem,
   ToolbarButtonRenderProps,
   ToolbarRenderProps,
+  LinkRequestPayload,
+  ImageRequestPayload,
   OverlayTextProps,
   ToolbarButtonProps,
   ToolbarProps,

package/src/types/index.d.ts

@@ -11,6 +11,18 @@ export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'none';
  * List type for a line/paragraph.
  */
 export type ListType = 'bullet' | 'ordered' | 'none';
+/**
+ * Paragraph alignment presets.
+ */
+export type TextAlign = 'left' | 'center' | 'right';
+/**
+ * Serialized output formats supported by the editor.
+ */
+export type OutputFormat = 'markdown' | 'html';
+/**
+ * Output preview modes supported by the editor.
+ */
+export type OutputPreviewMode = 'literal' | 'rendered';
 /**
  * Inline formatting styles attached to a text segment.
  */
@@ -24,6 +36,11 @@ export interface FormatStyle {
     backgroundColor?: string;
     fontSize?: number;
     heading?: HeadingLevel;
+    listType?: ListType;
+    textAlign?: TextAlign;
+    link?: string;
+    imageSrc?: string;
+    imageAlt?: string;
 }
 /**
  * A segment of text with uniform formatting.
@@ -65,6 +82,17 @@ export interface RichTextActions {
     setStyleProperty: <K extends keyof FormatStyle>(key: K, value: FormatStyle[K]) => void;
     /** Apply a heading level to the current line. */
     setHeading: (level: HeadingLevel) => void;
+    /** Apply a list style to the current line. */
+    setListType: (type: ListType) => void;
+    /** Apply paragraph alignment to the current line. */
+    setTextAlign: (align: TextAlign) => void;
+    /** Apply or clear a hyperlink on the current selection. */
+    setLink: (url?: string) => void;
+    /** Insert an image placeholder into the document. */
+    insertImage: (source: string, options?: {
+        alt?: string;
+        placeholder?: string;
+    }) => void;
     /** Set the text color for the current selection. */
     setColor: (color: string) => void;
     /** Set the background color for the current selection. */
@@ -79,6 +107,8 @@ export interface RichTextActions {
     isFormatActive: (format: FormatType) => boolean;
     /** Get the effective shared style at the current cursor/selection. */
     getSelectionStyle: () => FormatStyle;
+    /** Serialize the current content as markdown or HTML. */
+    getOutput: (format?: OutputFormat) => string;
     /** Get the full plain text content. */
     getPlainText: () => string;
     /** Export the segments as a serializable JSON array. */
@@ -103,10 +133,18 @@ export interface RichTextTheme {
     containerStyle?: ViewStyle;
     /** Style for the TextInput. */
     inputStyle?: TextStyle;
-    /** Style for the overlay text container. */
+    /** Style for the legacy overlay text container. */
     overlayContainerStyle?: ViewStyle;
     /** Base text style applied to all segments before formatting. */
     baseTextStyle?: TextStyle;
+    /** Style for the serialized output container. */
+    outputContainerStyle?: ViewStyle;
+    /** Label style for the serialized output header. */
+    outputLabelStyle?: TextStyle;
+    /** Style for the serialized output text. */
+    outputTextStyle?: TextStyle;
+    /** Style for the rendered output preview content. */
+    renderedOutputStyle?: ViewStyle;
     /** Style for the toolbar container. */
     toolbarStyle?: ViewStyle;
     /** Style for toolbar buttons. */
@@ -133,6 +171,8 @@ export interface RichTextTheme {
         toolbarBackground?: string;
         /** Toolbar border color. */
         toolbarBorder?: string;
+        /** Default link color. */
+        link?: string;
         /** Cursor / caret color. */
         cursor?: ColorValue;
     };
@@ -149,6 +189,16 @@ export interface ToolbarItem {
     format?: FormatType;
     /** The heading level this button sets. */
     heading?: HeadingLevel;
+    /** The list type this button sets. */
+    listType?: ListType;
+    /** The alignment this button sets. */
+    textAlign?: TextAlign;
+    /** The output format this button toggles to. */
+    outputFormat?: OutputFormat;
+    /** The output preview mode this button toggles to. */
+    outputPreviewMode?: OutputPreviewMode;
+    /** Special toolbar action. */
+    actionType?: 'link' | 'image';
     /** Custom action handler (overrides default behavior). */
     onPress?: () => void;
     /** Whether this item is currently active. */
@@ -171,6 +221,33 @@ export interface ToolbarRenderProps {
     items: ToolbarItem[];
     state: RichTextState;
     actions: RichTextActions;
+    outputFormat: OutputFormat;
+    outputPreviewMode: OutputPreviewMode;
+    onOutputFormatChange: (format: OutputFormat) => void;
+    onOutputPreviewModeChange: (mode: OutputPreviewMode) => void;
+    onRequestLink?: () => void;
+    onRequestImage?: () => void;
+}
+/**
+ * Payload passed when the built-in link button requests a URL.
+ */
+export interface LinkRequestPayload {
+    /** Selected plain text at the time of the request. */
+    selectedText: string;
+    /** Existing URL on the selection, when present. */
+    currentUrl?: string;
+    /** Apply or clear the URL on the current selection. */
+    applyLink: (url?: string) => void;
+}
+/**
+ * Payload passed when the built-in image button requests an image source.
+ */
+export interface ImageRequestPayload {
+    /** Insert an image placeholder into the document. */
+    insertImage: (source: string, options?: {
+        alt?: string;
+        placeholder?: string;
+    }) => void;
 }
 /**
  * Props for the OverlayText component.
@@ -212,6 +289,18 @@ export interface ToolbarProps {
     theme?: RichTextTheme;
     /** Whether to show the toolbar. */
     visible?: boolean;
+    /** Currently selected serialized output format. */
+    outputFormat?: OutputFormat;
+    /** Currently selected preview mode. */
+    outputPreviewMode?: OutputPreviewMode;
+    /** Called when the output format changes from the toolbar. */
+    onOutputFormatChange?: (format: OutputFormat) => void;
+    /** Called when the preview mode changes from the toolbar. */
+    onOutputPreviewModeChange?: (mode: OutputPreviewMode) => void;
+    /** Called when the link button is pressed. */
+    onRequestLink?: () => void;
+    /** Called when the image button is pressed. */
+    onRequestImage?: () => void;
     /** Custom render function for the entire toolbar. */
     renderToolbar?: (props: ToolbarRenderProps) => React.ReactElement | null;
 }
@@ -239,6 +328,28 @@ export interface RichTextInputProps {
     toolbarItems?: ToolbarItem[];
     /** Theme configuration. */
     theme?: RichTextTheme;
+    /** Whether to show the serialized output preview below the input. */
+    showOutputPreview?: boolean;
+    /** Controlled format used for the serialized output preview. */
+    outputFormat?: OutputFormat;
+    /** Initial format used for the serialized output preview. */
+    defaultOutputFormat?: OutputFormat;
+    /** Controlled preview mode for the output panel. */
+    outputPreviewMode?: OutputPreviewMode;
+    /** Initial preview mode for the output panel. */
+    defaultOutputPreviewMode?: OutputPreviewMode;
+    /** Maximum height for the output preview panel. */
+    maxOutputHeight?: number;
+    /** Callback when the serialized output changes. */
+    onChangeOutput?: (output: string, format: OutputFormat) => void;
+    /** Callback when the output format changes. */
+    onChangeOutputFormat?: (format: OutputFormat) => void;
+    /** Callback when the output preview mode changes. */
+    onChangeOutputPreviewMode?: (mode: OutputPreviewMode) => void;
+    /** Invoked when the built-in link button needs a URL. */
+    onRequestLink?: (payload: LinkRequestPayload) => void;
+    /** Invoked when the built-in image button needs an image source. */
+    onRequestImage?: (payload: ImageRequestPayload) => void;
     /** Whether multiline input is enabled. */
     multiline?: boolean;
     /** Minimum height for the input area. */