react-native-richify 1.0.0

package/src/utils/formatter.ts

@@ -0,0 +1,276 @@
+import type {
+  StyledSegment,
+  FormatType,
+  FormatStyle,
+  HeadingLevel,
+  SelectionRange,
+} from '@/types';
+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.
+ *
+ * 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 function toggleFormatOnSelection(
+  segments: StyledSegment[],
+  selection: SelectionRange,
+  format: FormatType,
+): StyledSegment[] {
+  if (selection.start === selection.end) {
+    // No selection — return unchanged (active styles handle this case)
+    return segments;
+  }
+
+  const { start, end } = normalizeSelection(selection);
+
+  // Extract the selected segments to check current state
+  const selectedSegments = extractSegmentsInRange(segments, start, end);
+  const allHaveFormat = selectedSegments.every((s) => !!s.styles[format]);
+
+  // Apply or remove the format
+  return applyStyleToRange(segments, start, end, {
+    [format]: !allHaveFormat,
+  });
+}
+
+/**
+ * Set a specific style property on the selected range.
+ */
+export function setStyleOnSelection<K extends keyof FormatStyle>(
+  segments: StyledSegment[],
+  selection: SelectionRange,
+  key: K,
+  value: FormatStyle[K],
+): StyledSegment[] {
+  if (selection.start === selection.end) {
+    return segments;
+  }
+
+  const { start, end } = normalizeSelection(selection);
+  return applyStyleToRange(segments, start, end, { [key]: value });
+}
+
+/**
+ * Apply a heading level to the line containing the cursor/selection.
+ */
+export function setHeadingOnLine(
+  segments: StyledSegment[],
+  selection: SelectionRange,
+  level: HeadingLevel,
+): StyledSegment[] {
+  const plainText = segmentsToPlainText(segments);
+  const { lineStart, lineEnd } = getLineRange(plainText, selection.start);
+
+  const headingStyle: Partial<FormatStyle> = {
+    heading: level,
+    fontSize: HEADING_FONT_SIZES[level],
+    bold: level !== 'none' ? true : undefined,
+  };
+
+  return applyStyleToRange(segments, lineStart, lineEnd, headingStyle);
+}
+
+/**
+ * Checks whether the given format is active across the entire selection.
+ */
+export function isFormatActiveInSelection(
+  segments: StyledSegment[],
+  selection: SelectionRange,
+  format: FormatType,
+): boolean {
+  if (selection.start === selection.end) {
+    return false;
+  }
+
+  const { start, end } = normalizeSelection(selection);
+  const selected = extractSegmentsInRange(segments, start, end);
+  return selected.length > 0 && selected.every((s) => !!s.styles[format]);
+}
+
+/**
+ * Gets the format style that is common across the entire selection.
+ * For properties where segments disagree, the value is undefined.
+ */
+export function getSelectionStyle(
+  segments: StyledSegment[],
+  selection: SelectionRange,
+): FormatStyle {
+  if (selection.start === selection.end) {
+    // Return style at cursor position
+    const pos = findPositionInSegments(segments, selection.start);
+    if (segments.length > 0) {
+      return { ...segments[pos.segmentIndex].styles };
+    }
+    return {};
+  }
+
+  const { start, end } = normalizeSelection(selection);
+  const selected = extractSegmentsInRange(segments, start, end);
+
+  if (selected.length === 0) return {};
+
+  const result: FormatStyle = { ...selected[0].styles };
+
+  for (let i = 1; i < selected.length; i++) {
+    const s = selected[i].styles;
+    if (result.bold !== undefined && result.bold !== !!s.bold)
+      result.bold = undefined;
+    if (result.italic !== undefined && result.italic !== !!s.italic)
+      result.italic = undefined;
+    if (result.underline !== undefined && result.underline !== !!s.underline)
+      result.underline = undefined;
+    if (
+      result.strikethrough !== undefined &&
+      result.strikethrough !== !!s.strikethrough
+    )
+      result.strikethrough = undefined;
+    if (result.code !== undefined && result.code !== !!s.code)
+      result.code = undefined;
+    if (result.color !== s.color) result.color = undefined;
+    if (result.backgroundColor !== s.backgroundColor)
+      result.backgroundColor = undefined;
+    if (result.fontSize !== s.fontSize) result.fontSize = undefined;
+    if (result.heading !== s.heading) result.heading = undefined;
+  }
+
+  return result;
+}
+
+// ─── Internal Helpers ────────────────────────────────────────────────────────
+
+/**
+ * Normalize selection so start <= end.
+ */
+function normalizeSelection(selection: SelectionRange): SelectionRange {
+  return {
+    start: Math.min(selection.start, selection.end),
+    end: Math.max(selection.start, selection.end),
+  };
+}
+
+/**
+ * Extract the text segments that fall within [start, end) of the global text.
+ */
+function extractSegmentsInRange(
+  segments: StyledSegment[],
+  start: number,
+  end: number,
+): StyledSegment[] {
+  const result: StyledSegment[] = [];
+  let pos = 0;
+
+  for (const seg of segments) {
+    const segStart = pos;
+    const segEnd = pos + seg.text.length;
+
+    if (segEnd <= start) {
+      pos = segEnd;
+      continue;
+    }
+    if (segStart >= end) {
+      break;
+    }
+
+    // This segment overlaps with [start, end)
+    const overlapStart = Math.max(segStart, start);
+    const overlapEnd = Math.min(segEnd, end);
+    result.push(
+      createSegment(
+        seg.text.slice(overlapStart - segStart, overlapEnd - segStart),
+        seg.styles,
+      ),
+    );
+
+    pos = segEnd;
+  }
+
+  return result;
+}
+
+/**
+ * Apply a partial style to a character range within the segments array.
+ * Splits segments at boundaries and applies the style delta to all segments in range.
+ */
+function applyStyleToRange(
+  segments: StyledSegment[],
+  start: number,
+  end: number,
+  styleDelta: Partial<FormatStyle>,
+): StyledSegment[] {
+  const result: StyledSegment[] = [];
+  let pos = 0;
+
+  for (const seg of segments) {
+    const segStart = pos;
+    const segEnd = pos + seg.text.length;
+
+    if (segEnd <= start || segStart >= end) {
+      // Outside the range — keep as-is
+      result.push(createSegment(seg.text, seg.styles));
+    } else {
+      // Overlaps with range — may need to split
+      if (segStart < start) {
+        // Portion before the range
+        result.push(
+          createSegment(seg.text.slice(0, start - segStart), seg.styles),
+        );
+      }
+
+      // The overlapping portion — apply style delta
+      const overlapStart = Math.max(segStart, start);
+      const overlapEnd = Math.min(segEnd, end);
+      const newStyles = { ...seg.styles, ...styleDelta };
+      result.push(
+        createSegment(
+          seg.text.slice(overlapStart - segStart, overlapEnd - segStart),
+          newStyles,
+        ),
+      );
+
+      if (segEnd > end) {
+        // Portion after the range
+        result.push(
+          createSegment(seg.text.slice(end - segStart), seg.styles),
+        );
+      }
+    }
+
+    pos = segEnd;
+  }
+
+  return mergeAdjacentSegments(result);
+}
+
+/**
+ * Get the line start and end positions for the line containing the given position.
+ */
+function getLineRange(
+  text: string,
+  position: number,
+): { lineStart: number; lineEnd: number } {
+  let lineStart = position;
+  while (lineStart > 0 && text[lineStart - 1] !== '\n') {
+    lineStart--;
+  }
+
+  let lineEnd = position;
+  while (lineEnd < text.length && text[lineEnd] !== '\n') {
+    lineEnd++;
+  }
+
+  return { lineStart, lineEnd };
+}
+
+// Re-export for convenience
+export { createSegment } from '@/utils/parser';

package/src/utils/parser.d.ts

@@ -0,0 +1,45 @@
+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[];

package/src/utils/parser.ts

@@ -0,0 +1,252 @@
+import type { StyledSegment, FormatStyle } from '@/types';
+import { EMPTY_FORMAT_STYLE } from '@/constants/defaultStyles';
+
+/**
+ * Creates a new segment with the given text and optional styles.
+ */
+export function createSegment(
+  text: string,
+  styles: FormatStyle = { ...EMPTY_FORMAT_STYLE },
+): StyledSegment {
+  return { text, styles: { ...styles } };
+}
+
+/**
+ * Computes the total character length across all segments.
+ */
+export function getTotalLength(segments: StyledSegment[]): number {
+  return segments.reduce((sum, seg) => sum + seg.text.length, 0);
+}
+
+/**
+ * Converts an array of segments to plain text.
+ */
+export function segmentsToPlainText(segments: StyledSegment[]): string {
+  return segments.map((s) => s.text).join('');
+}
+
+/**
+ * Finds which segment and character offset a global position corresponds to.
+ * Returns { segmentIndex, offsetInSegment }.
+ */
+export function findPositionInSegments(
+  segments: StyledSegment[],
+  globalPosition: number,
+): { segmentIndex: number; offsetInSegment: number } {
+  let remaining = globalPosition;
+
+  for (let i = 0; i < segments.length; i++) {
+    const segLen = segments[i].text.length;
+    if (remaining <= segLen) {
+      return { segmentIndex: i, offsetInSegment: remaining };
+    }
+    remaining -= segLen;
+  }
+
+  // Position is past the end — return end of last segment
+  const lastIndex = Math.max(0, segments.length - 1);
+  return {
+    segmentIndex: lastIndex,
+    offsetInSegment: segments.length > 0 ? segments[lastIndex].text.length : 0,
+  };
+}
+
+/**
+ * Splits a segment at the given offset, returning [before, after].
+ * If offset is 0 or at end, one side will have empty text.
+ */
+export function splitSegment(
+  segment: StyledSegment,
+  offset: number,
+): [StyledSegment, StyledSegment] {
+  const before = createSegment(segment.text.slice(0, offset), segment.styles);
+  const after = createSegment(segment.text.slice(offset), segment.styles);
+  return [before, after];
+}
+
+/**
+ * Checks if two FormatStyle objects are deeply equal.
+ */
+export function areStylesEqual(a: FormatStyle, b: FormatStyle): boolean {
+  return (
+    !!a.bold === !!b.bold &&
+    !!a.italic === !!b.italic &&
+    !!a.underline === !!b.underline &&
+    !!a.strikethrough === !!b.strikethrough &&
+    !!a.code === !!b.code &&
+    (a.color ?? undefined) === (b.color ?? undefined) &&
+    (a.backgroundColor ?? undefined) === (b.backgroundColor ?? undefined) &&
+    (a.fontSize ?? undefined) === (b.fontSize ?? undefined) &&
+    (a.heading ?? undefined) === (b.heading ?? undefined)
+  );
+}
+
+/**
+ * Merges adjacent segments that have identical styles.
+ * Returns a new array (does not mutate input).
+ */
+export function mergeAdjacentSegments(
+  segments: StyledSegment[],
+): StyledSegment[] {
+  if (segments.length === 0) {
+    return [createSegment('')];
+  }
+
+  const result: StyledSegment[] = [];
+  let last: StyledSegment | null = null;
+
+  for (const seg of segments) {
+    // Empty segment → acts as boundary
+    if (seg.text.length === 0) {
+      last = null; // break merge chain
+      continue;
+    }
+
+    if (last && areStylesEqual(last.styles, seg.styles)) {
+      last.text += seg.text;
+    } else {
+      const newSeg = createSegment(seg.text, seg.styles);
+      result.push(newSeg);
+      last = newSeg;
+    }
+  }
+
+  // If everything was empty
+  if (result.length === 0) {
+    return [createSegment('')];
+  }
+
+  return result;
+}
+
+/**
+ * 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 function reconcileTextChange(
+  oldSegments: StyledSegment[],
+  newText: string,
+  activeStyles: FormatStyle,
+): StyledSegment[] {
+  const oldText = segmentsToPlainText(oldSegments);
+
+  if (newText === oldText) {
+    return oldSegments;
+  }
+
+  // Find common prefix length
+  let prefixLen = 0;
+  const minLen = Math.min(oldText.length, newText.length);
+  while (prefixLen < minLen && oldText[prefixLen] === newText[prefixLen]) {
+    prefixLen++;
+  }
+
+  // Find common suffix length (from end, but not overlapping with prefix)
+  let suffixLen = 0;
+  while (
+    suffixLen < minLen - prefixLen &&
+    oldText[oldText.length - 1 - suffixLen] ===
+    newText[newText.length - 1 - suffixLen]
+  ) {
+    suffixLen++;
+  }
+
+  const deleteStart = prefixLen;
+  const deleteEnd = oldText.length - suffixLen;
+  const insertedText = newText.slice(prefixLen, newText.length - suffixLen);
+
+  // Build new segments
+  // 1. Keep segments before deleteStart
+  // 2. Insert new text segment with activeStyles
+  // 3. Keep segments after deleteEnd
+
+  const result: StyledSegment[] = [];
+
+  let pos = 0;
+  let phase: 'before' | 'during' | 'after' = 'before';
+  let insertedNewSegment = false;
+
+  for (const seg of oldSegments) {
+    const segStart = pos;
+    const segEnd = pos + seg.text.length;
+
+    if (phase === 'before') {
+      if (segEnd <= deleteStart) {
+        // Entire segment is before delete region
+        result.push(createSegment(seg.text, seg.styles));
+      } else if (segStart < deleteStart) {
+        // Segment partially before delete region
+        result.push(
+          createSegment(seg.text.slice(0, deleteStart - segStart), seg.styles),
+        );
+
+        if (!insertedNewSegment && insertedText.length > 0) {
+          result.push(createSegment(insertedText, activeStyles));
+          insertedNewSegment = true;
+        }
+
+        if (segEnd > deleteEnd) {
+          // Segment also extends past delete region
+          result.push(
+            createSegment(seg.text.slice(deleteEnd - segStart), seg.styles),
+          );
+          phase = 'after';
+        } else {
+          phase = 'during';
+        }
+      } else {
+        // segStart >= deleteStart → we've reached the delete region
+        if (!insertedNewSegment && insertedText.length > 0) {
+          result.push(createSegment(insertedText, activeStyles));
+          insertedNewSegment = true;
+        }
+
+        if (segEnd <= deleteEnd) {
+          // Entire segment is within delete region — skip it
+          phase = segEnd === deleteEnd ? 'after' : 'during';
+        } else {
+          // Segment extends past delete region
+          result.push(
+            createSegment(seg.text.slice(deleteEnd - segStart), seg.styles),
+          );
+          phase = 'after';
+        }
+      }
+    } else if (phase === 'during') {
+      if (!insertedNewSegment && insertedText.length > 0) {
+        result.push(createSegment(insertedText, activeStyles));
+        insertedNewSegment = true;
+      }
+
+      if (segEnd <= deleteEnd) {
+        // Still in delete region — skip
+        if (segEnd === deleteEnd) {
+          phase = 'after';
+        }
+      } else {
+        // Segment extends past delete region
+        result.push(
+          createSegment(seg.text.slice(deleteEnd - segStart), seg.styles),
+        );
+        phase = 'after';
+      }
+    } else {
+      // phase === 'after'
+      result.push(createSegment(seg.text, seg.styles));
+    }
+
+    pos = segEnd;
+  }
+
+  // If we never inserted the new text (e.g., appending at end)
+  if (!insertedNewSegment && insertedText.length > 0) {
+    result.push(createSegment(insertedText, activeStyles));
+  }
+
+  return mergeAdjacentSegments(result);
+}

package/src/utils/styleMapper.d.ts

@@ -0,0 +1,15 @@
+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[];

package/src/utils/styleMapper.ts

@@ -0,0 +1,92 @@
+import type { TextStyle } from 'react-native';
+import type { FormatStyle, RichTextTheme, StyledSegment } from '@/types';
+import { DEFAULT_THEME, HEADING_FONT_SIZES } from '@/constants/defaultStyles';
+
+/**
+ * Maps a FormatStyle to a React Native TextStyle.
+ * Applies formatting properties based on the segment's style.
+ */
+export function formatStyleToTextStyle(
+  formatStyle: FormatStyle,
+  theme?: RichTextTheme,
+): TextStyle {
+  const resolvedTheme = theme ?? DEFAULT_THEME;
+  const style: TextStyle = {};
+
+  // Bold
+  if (formatStyle.bold) {
+    style.fontWeight = 'bold';
+  }
+
+  // Italic
+  if (formatStyle.italic) {
+    style.fontStyle = 'italic';
+  }
+
+  // Underline and strikethrough
+  if (formatStyle.underline && formatStyle.strikethrough) {
+    style.textDecorationLine = 'underline line-through';
+  } else if (formatStyle.underline) {
+    style.textDecorationLine = 'underline';
+  } else if (formatStyle.strikethrough) {
+    style.textDecorationLine = 'line-through';
+  }
+
+  // Code — apply monospace font and background
+  if (formatStyle.code) {
+    const codeStyle = resolvedTheme.codeStyle ?? DEFAULT_THEME.codeStyle;
+    if (codeStyle) {
+      Object.assign(style, codeStyle);
+    }
+  }
+
+  // Text color
+  if (formatStyle.color) {
+    style.color = formatStyle.color;
+  }
+
+  // Background color
+  if (formatStyle.backgroundColor) {
+    style.backgroundColor = formatStyle.backgroundColor;
+  }
+
+  // Font size
+  if (formatStyle.fontSize) {
+    style.fontSize = formatStyle.fontSize;
+  }
+
+  // Heading — overrides font size and weight
+  if (formatStyle.heading && formatStyle.heading !== 'none') {
+    style.fontSize = HEADING_FONT_SIZES[formatStyle.heading];
+    style.fontWeight = 'bold';
+    style.lineHeight = HEADING_FONT_SIZES[formatStyle.heading] * 1.3;
+  }
+
+  return style;
+}
+
+/**
+ * Maps an entire segment to its computed TextStyle (base + format).
+ */
+export function segmentToTextStyle(
+  segment: StyledSegment,
+  theme?: RichTextTheme,
+): TextStyle {
+  const baseStyle = theme?.baseTextStyle ?? DEFAULT_THEME.baseTextStyle ?? {};
+  const formatStyle = formatStyleToTextStyle(segment.styles, theme);
+
+  return {
+    ...baseStyle,
+    ...formatStyle,
+  };
+}
+
+/**
+ * Batch-maps an array of segments to an array of TextStyles.
+ */
+export function segmentsToTextStyles(
+  segments: StyledSegment[],
+  theme?: RichTextTheme,
+): TextStyle[] {
+  return segments.map((seg) => segmentToTextStyle(seg, theme));
+}