react-native-richify 1.0.2 → 1.0.4

package/src/hooks/useRichText.ts

@@ -1,9 +1,8 @@
-import { useState, useCallback, useRef, useEffect } from 'react';
+import { useState, useCallback, useRef } from 'react';
 import type {
   StyledSegment,
-  FormatType,
   FormatStyle,
-  HeadingLevel,
+  OutputFormat,
   SelectionRange,
   RichTextState,
   RichTextActions,
@@ -16,6 +15,8 @@ import {
   reconcileTextChange,
   findPositionInSegments,
 } from '../utils/parser';
+import { getSelectionStyle } from '../utils/formatter';
+import { serializeSegments } from '../utils/serializer';
 import { useSelection } from '../hooks/useSelection';
 import { useFormatting } from '../hooks/useFormatting';
 
@@ -57,8 +58,11 @@ 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;
+  const preserveActiveStylesRef = useRef(false);
 
   // ─── Segment Change Handler ──────────────────────────────────────────────
 
@@ -86,7 +90,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,
@@ -103,8 +111,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(
@@ -126,6 +148,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));
   }, []);
@@ -142,8 +171,69 @@ export function useRichText(
   const clear = useCallback(() => {
     updateSegments([createSegment('')]);
     setActiveStyles({ ...EMPTY_FORMAT_STYLE });
+    preserveActiveStylesRef.current = false;
   }, [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 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],
+  );
+
   // ─── Build Return Value ──────────────────────────────────────────────────
 
   const state: RichTextState = {
@@ -153,14 +243,17 @@ 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,
+    setColor,
+    setBackgroundColor,
+    setFontSize,
     handleTextChange,
     handleSelectionChange: onSelectionChange,
+    isFormatActive: formatting.isFormatActive,
+    getSelectionStyle: formatting.currentSelectionStyle,
+    getOutput,
     getPlainText,
     exportJSON,
     importJSON,

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, OverlayTextProps, ToolbarButtonProps, ToolbarProps, RichTextInputProps, } from './types';
+export type { FormatType, HeadingLevel, ListType, OutputFormat, FormatStyle, StyledSegment, SelectionRange, RichTextState, RichTextActions, UseRichTextReturn, RichTextTheme, ToolbarItem, ToolbarButtonRenderProps, ToolbarRenderProps, 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,7 @@ export type {
   FormatType,
   HeadingLevel,
   ListType,
+  OutputFormat,
   FormatStyle,
   StyledSegment,
   SelectionRange,
@@ -61,6 +67,8 @@ export type {
   UseRichTextReturn,
   RichTextTheme,
   ToolbarItem,
+  ToolbarButtonRenderProps,
+  ToolbarRenderProps,
   OverlayTextProps,
   ToolbarButtonProps,
   ToolbarProps,

package/src/types/index.d.ts

@@ -11,6 +11,10 @@ export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'none';
  * List type for a line/paragraph.
  */
 export type ListType = 'bullet' | 'ordered' | 'none';
+/**
+ * Serialized output formats supported by the editor.
+ */
+export type OutputFormat = 'markdown' | 'html';
 /**
  * Inline formatting styles attached to a text segment.
  */
@@ -75,6 +79,12 @@ 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;
+    /** 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. */
@@ -99,10 +109,16 @@ 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 toolbar container. */
     toolbarStyle?: ViewStyle;
     /** Style for toolbar buttons. */
@@ -150,11 +166,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 +225,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.
@@ -227,6 +251,12 @@ export interface RichTextInputProps {
     toolbarItems?: ToolbarItem[];
     /** Theme configuration. */
     theme?: RichTextTheme;
+    /** Whether to show the serialized output preview below the input. */
+    showOutputPreview?: boolean;
+    /** Format used for the serialized output preview. */
+    outputFormat?: OutputFormat;
+    /** Callback when the serialized output changes. */
+    onChangeOutput?: (output: string, format: OutputFormat) => void;
     /** Whether multiline input is enabled. */
     multiline?: boolean;
     /** Minimum height for the input area. */

package/src/types/index.ts

@@ -22,6 +22,11 @@ export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'none';
  */
 export type ListType = 'bullet' | 'ordered' | 'none';
 
+/**
+ * Serialized output formats supported by the editor.
+ */
+export type OutputFormat = 'markdown' | 'html';
+
 // ─── Style Types ─────────────────────────────────────────────────────────────
 
 /**
@@ -101,6 +106,12 @@ 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;
+  /** 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. */
@@ -131,10 +142,16 @@ 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 toolbar container. */
   toolbarStyle?: ViewStyle;
   /** Style for toolbar buttons. */
@@ -185,11 +202,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 +268,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;
 }
 
 /**
@@ -268,6 +295,12 @@ export interface RichTextInputProps {
   toolbarItems?: ToolbarItem[];
   /** Theme configuration. */
   theme?: RichTextTheme;
+  /** Whether to show the serialized output preview below the input. */
+  showOutputPreview?: boolean;
+  /** Format used for the serialized output preview. */
+  outputFormat?: OutputFormat;
+  /** Callback when the serialized output changes. */
+  onChangeOutput?: (output: string, format: OutputFormat) => void;
   /** Whether multiline input is enabled. */
   multiline?: boolean;
   /** Minimum height for the input area. */

package/src/utils/formatter.ts

@@ -8,11 +8,9 @@ import type {
 import {
   createSegment,
   findPositionInSegments,
-  splitSegment,
   mergeAdjacentSegments,
   segmentsToPlainText,
 } from '../utils/parser';
-import { HEADING_FONT_SIZES } from '../constants/defaultStyles';
 
 /**
  * Toggle an inline format (bold, italic, etc.) on the selected range.
@@ -73,9 +71,7 @@ export function setHeadingOnLine(
   const { lineStart, lineEnd } = getLineRange(plainText, selection.start);
 
   const headingStyle: Partial<FormatStyle> = {
-    heading: level,
-    fontSize: HEADING_FONT_SIZES[level],
-    bold: level !== 'none' ? true : undefined,
+    heading: level === 'none' ? undefined : level,
   };
 
   return applyStyleToRange(segments, lineStart, lineEnd, headingStyle);

package/src/utils/serializer.d.ts

@@ -0,0 +1,13 @@
+import type { OutputFormat, StyledSegment } from '../types';
+/**
+ * Serialize styled segments as Markdown or HTML.
+ */
+export declare function serializeSegments(segments: StyledSegment[], format?: OutputFormat): string;
+/**
+ * Convenience wrapper for Markdown output.
+ */
+export declare function segmentsToMarkdown(segments: StyledSegment[]): string;
+/**
+ * Convenience wrapper for HTML output.
+ */
+export declare function segmentsToHTML(segments: StyledSegment[]): string;

package/src/utils/serializer.ts

@@ -0,0 +1,223 @@
+import type {
+  FormatStyle,
+  HeadingLevel,
+  OutputFormat,
+  StyledSegment,
+} from '../types';
+
+type LineFragment = Pick<StyledSegment, 'text' | 'styles'>;
+
+/**
+ * Serialize styled segments as Markdown or HTML.
+ */
+export function serializeSegments(
+  segments: StyledSegment[],
+  format: OutputFormat = 'markdown',
+): string {
+  const lines = splitSegmentsByLine(segments);
+  return lines.map((line) => serializeLine(line, format)).join('\n');
+}
+
+/**
+ * Convenience wrapper for Markdown output.
+ */
+export function segmentsToMarkdown(segments: StyledSegment[]): string {
+  return serializeSegments(segments, 'markdown');
+}
+
+/**
+ * Convenience wrapper for HTML output.
+ */
+export function segmentsToHTML(segments: StyledSegment[]): string {
+  return serializeSegments(segments, 'html');
+}
+
+function splitSegmentsByLine(segments: StyledSegment[]): LineFragment[][] {
+  const lines: LineFragment[][] = [[]];
+
+  for (const segment of segments) {
+    const parts = segment.text.split('\n');
+
+    parts.forEach((part, index) => {
+      if (part.length > 0) {
+        lines[lines.length - 1]?.push({
+          text: part,
+          styles: { ...segment.styles },
+        });
+      }
+
+      if (index < parts.length - 1) {
+        lines.push([]);
+      }
+    });
+  }
+
+  return lines;
+}
+
+function serializeLine(
+  line: LineFragment[],
+  format: OutputFormat,
+): string {
+  const heading = getLineHeading(line);
+  const content = line
+    .map((fragment) => serializeFragment(fragment, format, heading))
+    .join('');
+
+  if (format === 'html') {
+    const blockTag = heading ?? 'p';
+    return `<${blockTag}>${content}</${blockTag}>`;
+  }
+
+  const headingPrefix = getHeadingPrefix(heading);
+  if (!headingPrefix) {
+    return content;
+  }
+
+  return content.length > 0 ? `${headingPrefix} ${content}` : headingPrefix;
+}
+
+function serializeFragment(
+  fragment: LineFragment,
+  format: OutputFormat,
+  lineHeading?: HeadingLevel,
+): string {
+  const normalizedStyles: FormatStyle = {
+    ...fragment.styles,
+    heading: undefined,
+    // Markdown headings already express emphasis at the block level.
+    bold:
+      lineHeading && lineHeading !== 'none' ? false : fragment.styles.bold,
+  };
+
+  return format === 'html'
+    ? serializeHtmlFragment(fragment.text, normalizedStyles)
+    : serializeMarkdownFragment(fragment.text, normalizedStyles);
+}
+
+function serializeHtmlFragment(text: string, styles: FormatStyle): string {
+  let result = escapeHtml(text);
+
+  if (styles.code) {
+    result = `<code>${result}</code>`;
+  }
+
+  if (styles.bold) {
+    result = `<strong>${result}</strong>`;
+  }
+
+  if (styles.italic) {
+    result = `<em>${result}</em>`;
+  }
+
+  if (styles.underline) {
+    result = `<u>${result}</u>`;
+  }
+
+  if (styles.strikethrough) {
+    result = `<s>${result}</s>`;
+  }
+
+  const styleAttribute = buildInlineStyle(styles);
+  if (styleAttribute) {
+    result = `<span style="${styleAttribute}">${result}</span>`;
+  }
+
+  return result;
+}
+
+function serializeMarkdownFragment(text: string, styles: FormatStyle): string {
+  let result = escapeMarkdown(text);
+
+  if (styles.code) {
+    result = wrapInlineCode(text);
+  }
+
+  if (styles.bold) {
+    result = `**${result}**`;
+  }
+
+  if (styles.italic) {
+    result = `*${result}*`;
+  }
+
+  if (styles.strikethrough) {
+    result = `~~${result}~~`;
+  }
+
+  if (styles.underline) {
+    result = `<u>${result}</u>`;
+  }
+
+  const styleAttribute = buildInlineStyle(styles);
+  if (styleAttribute) {
+    result = `<span style="${styleAttribute}">${result}</span>`;
+  }
+
+  return result;
+}
+
+function buildInlineStyle(styles: FormatStyle): string {
+  const cssRules: string[] = [];
+
+  if (styles.color) {
+    cssRules.push(`color: ${styles.color}`);
+  }
+
+  if (styles.backgroundColor) {
+    cssRules.push(`background-color: ${styles.backgroundColor}`);
+  }
+
+  if (styles.fontSize) {
+    cssRules.push(`font-size: ${styles.fontSize}px`);
+  }
+
+  return cssRules.join('; ');
+}
+
+function getLineHeading(line: LineFragment[]): HeadingLevel | undefined {
+  for (const fragment of line) {
+    if (fragment.styles.heading && fragment.styles.heading !== 'none') {
+      return fragment.styles.heading;
+    }
+  }
+
+  return undefined;
+}
+
+function getHeadingPrefix(heading?: HeadingLevel): string | undefined {
+  switch (heading) {
+    case 'h1':
+      return '#';
+    case 'h2':
+      return '##';
+    case 'h3':
+      return '###';
+    default:
+      return undefined;
+  }
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+function escapeMarkdown(text: string): string {
+  return text.replace(/([\\`*_~[\]])/g, '\\$1');
+}
+
+function wrapInlineCode(text: string): string {
+  const matches = text.match(/`+/g);
+  const longestBacktickRun = matches?.reduce(
+    (max, match) => Math.max(max, match.length),
+    0,
+  ) ?? 0;
+  const fence = '`'.repeat(longestBacktickRun + 1);
+
+  return `${fence}${text}${fence}`;
+}