react-native-richify 1.0.3 → 1.0.5

package/src/types/index.ts

@@ -22,6 +22,21 @@ export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'none';
  */
 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';
+
 // ─── Style Types ─────────────────────────────────────────────────────────────
 
 /**
@@ -37,6 +52,11 @@ export interface FormatStyle {
   backgroundColor?: string;
   fontSize?: number;
   heading?: HeadingLevel;
+  listType?: ListType;
+  textAlign?: TextAlign;
+  link?: string;
+  imageSrc?: string;
+  imageAlt?: string;
 }
 
 /**
@@ -91,6 +111,20 @@ export interface RichTextActions {
   ) => 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. */
@@ -105,6 +139,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. */
@@ -135,10 +171,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. */
@@ -165,6 +209,8 @@ export interface RichTextTheme {
     toolbarBackground?: string;
     /** Toolbar border color. */
     toolbarBorder?: string;
+    /** Default link color. */
+    link?: string;
     /** Cursor / caret color. */
     cursor?: ColorValue;
   };
@@ -184,6 +230,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. */
@@ -208,6 +264,38 @@ 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;
 }
 
 // ─── Component Props ─────────────────────────────────────────────────────────
@@ -254,6 +342,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;
 }
@@ -282,6 +382,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. */

package/src/utils/formatter.ts

@@ -3,16 +3,16 @@ import type {
   FormatType,
   FormatStyle,
   HeadingLevel,
+  ListType,
   SelectionRange,
+  TextAlign,
 } 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.
@@ -69,16 +69,37 @@ export function setHeadingOnLine(
   selection: SelectionRange,
   level: HeadingLevel,
 ): StyledSegment[] {
-  const plainText = segmentsToPlainText(segments);
-  const { lineStart, lineEnd } = getLineRange(plainText, selection.start);
+  return setLineStyleOnSelection(segments, selection, {
+    heading: level === 'none' ? undefined : level,
+    listType: level === 'none' ? undefined : undefined,
+  });
+}
 
-  const headingStyle: Partial<FormatStyle> = {
-    heading: level,
-    fontSize: HEADING_FONT_SIZES[level],
-    bold: level !== 'none' ? true : undefined,
-  };
+/**
+ * Apply a list type to the lines containing the cursor/selection.
+ */
+export function setListTypeOnLine(
+  segments: StyledSegment[],
+  selection: SelectionRange,
+  listType: ListType,
+): StyledSegment[] {
+  return setLineStyleOnSelection(segments, selection, {
+    listType: listType === 'none' ? undefined : listType,
+    heading: listType === 'none' ? undefined : undefined,
+  });
+}
 
-  return applyStyleToRange(segments, lineStart, lineEnd, headingStyle);
+/**
+ * Apply text alignment to the lines containing the cursor/selection.
+ */
+export function setTextAlignOnLine(
+  segments: StyledSegment[],
+  selection: SelectionRange,
+  textAlign: TextAlign,
+): StyledSegment[] {
+  return setLineStyleOnSelection(segments, selection, {
+    textAlign,
+  });
 }
 
 /**
@@ -142,6 +163,11 @@ export function getSelectionStyle(
       result.backgroundColor = undefined;
     if (result.fontSize !== s.fontSize) result.fontSize = undefined;
     if (result.heading !== s.heading) result.heading = undefined;
+    if (result.listType !== s.listType) result.listType = undefined;
+    if (result.textAlign !== s.textAlign) result.textAlign = undefined;
+    if (result.link !== s.link) result.link = undefined;
+    if (result.imageSrc !== s.imageSrc) result.imageSrc = undefined;
+    if (result.imageAlt !== s.imageAlt) result.imageAlt = undefined;
   }
 
   return result;
@@ -252,6 +278,17 @@ function applyStyleToRange(
   return mergeAdjacentSegments(result);
 }
 
+function setLineStyleOnSelection(
+  segments: StyledSegment[],
+  selection: SelectionRange,
+  styleDelta: Partial<FormatStyle>,
+): StyledSegment[] {
+  const plainText = segmentsToPlainText(segments);
+  const { lineStart, lineEnd } = getSelectionLineRange(plainText, selection);
+
+  return applyStyleToRange(segments, lineStart, lineEnd, styleDelta);
+}
+
 /**
  * Get the line start and end positions for the line containing the given position.
  */
@@ -272,5 +309,18 @@ function getLineRange(
   return { lineStart, lineEnd };
 }
 
+function getSelectionLineRange(
+  text: string,
+  selection: SelectionRange,
+): { lineStart: number; lineEnd: number } {
+  const normalized = normalizeSelection(selection);
+  const lineStart = getLineRange(text, normalized.start).lineStart;
+  const effectiveEnd =
+    normalized.end > normalized.start ? normalized.end - 1 : normalized.end;
+  const lineEnd = getLineRange(text, effectiveEnd).lineEnd;
+
+  return { lineStart, lineEnd };
+}
+
 // Re-export for convenience
 export { createSegment } from '../utils/parser';

package/src/utils/parser.ts

@@ -77,7 +77,12 @@ export function areStylesEqual(a: FormatStyle, b: FormatStyle): boolean {
     (a.color ?? undefined) === (b.color ?? undefined) &&
     (a.backgroundColor ?? undefined) === (b.backgroundColor ?? undefined) &&
     (a.fontSize ?? undefined) === (b.fontSize ?? undefined) &&
-    (a.heading ?? undefined) === (b.heading ?? undefined)
+    (a.heading ?? undefined) === (b.heading ?? undefined) &&
+    (a.listType ?? undefined) === (b.listType ?? undefined) &&
+    (a.textAlign ?? undefined) === (b.textAlign ?? undefined) &&
+    (a.link ?? undefined) === (b.link ?? undefined) &&
+    (a.imageSrc ?? undefined) === (b.imageSrc ?? undefined) &&
+    (a.imageAlt ?? undefined) === (b.imageAlt ?? undefined)
   );
 }
 

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,365 @@
+import type {
+  FormatStyle,
+  HeadingLevel,
+  ListType,
+  OutputFormat,
+  StyledSegment,
+  TextAlign,
+} 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);
+  const blocks: string[] = [];
+
+  for (let index = 0; index < lines.length; ) {
+    const line = lines[index];
+    const listType = getLineListType(line);
+
+    if (listType && listType !== 'none') {
+      const listLines: LineFragment[][] = [];
+
+      while (index < lines.length && getLineListType(lines[index]) === listType) {
+        listLines.push(lines[index]);
+        index++;
+      }
+
+      blocks.push(serializeListBlock(listLines, format, listType));
+      continue;
+    }
+
+    blocks.push(serializeBlockLine(line, format));
+    index++;
+  }
+
+  return blocks.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 || segment.styles.imageSrc) {
+        lines[lines.length - 1]?.push({
+          text: part,
+          styles: { ...segment.styles },
+        });
+      }
+
+      if (index < parts.length - 1) {
+        lines.push([]);
+      }
+    });
+  }
+
+  return lines;
+}
+
+function serializeListBlock(
+  lines: LineFragment[][],
+  format: OutputFormat,
+  listType: ListType,
+): string {
+  if (format === 'html' || lines.some((line) => !!getLineTextAlign(line))) {
+    const tag = listType === 'ordered' ? 'ol' : 'ul';
+    const items = lines.map((line) => serializeHtmlListItem(line)).join('');
+    return `<${tag}>${items}</${tag}>`;
+  }
+
+  return lines
+    .map((line, index) => {
+      const marker = listType === 'ordered' ? `${index + 1}.` : '-';
+      const content = serializeLineContent(line, format);
+      return content.length > 0 ? `${marker} ${content}` : marker;
+    })
+    .join('\n');
+}
+
+function serializeHtmlListItem(line: LineFragment[]): string {
+  const content = serializeLineContent(line, 'html');
+  const styleAttribute = buildBlockStyle(getLineTextAlign(line));
+  return `<li${styleAttribute ? ` style="${styleAttribute}"` : ''}>${content}</li>`;
+}
+
+function serializeBlockLine(
+  line: LineFragment[],
+  format: OutputFormat,
+): string {
+  const heading = getLineHeading(line);
+  const textAlign = getLineTextAlign(line);
+  const content = serializeLineContent(line, format, heading);
+
+  if (format === 'html') {
+    const blockTag = heading ?? 'p';
+    const styleAttribute = buildBlockStyle(textAlign);
+    return `<${blockTag}${styleAttribute ? ` style="${styleAttribute}"` : ''}>${content}</${blockTag}>`;
+  }
+
+  if (textAlign) {
+    return serializeAlignedMarkdownLine(content, heading, textAlign);
+  }
+
+  const headingPrefix = getHeadingPrefix(heading);
+  if (!headingPrefix) {
+    return content;
+  }
+
+  return content.length > 0 ? `${headingPrefix} ${content}` : headingPrefix;
+}
+
+function serializeAlignedMarkdownLine(
+  content: string,
+  heading: HeadingLevel | undefined,
+  textAlign: TextAlign,
+): string {
+  const blockTag = heading ?? 'p';
+  const styleAttribute = buildBlockStyle(textAlign);
+  return `<${blockTag} style="${styleAttribute}">${content}</${blockTag}>`;
+}
+
+function serializeLineContent(
+  line: LineFragment[],
+  format: OutputFormat,
+  lineHeading?: HeadingLevel,
+): string {
+  return line
+    .map((fragment) => serializeFragment(fragment, format, lineHeading))
+    .join('');
+}
+
+function serializeFragment(
+  fragment: LineFragment,
+  format: OutputFormat,
+  lineHeading?: HeadingLevel,
+): string {
+  if (fragment.styles.imageSrc) {
+    return serializeImageFragment(fragment, format);
+  }
+
+  const normalizedStyles: FormatStyle = {
+    ...fragment.styles,
+    heading: undefined,
+    listType: undefined,
+    textAlign: undefined,
+    imageSrc: undefined,
+    imageAlt: undefined,
+    bold:
+      lineHeading && lineHeading !== 'none' ? false : fragment.styles.bold,
+  };
+
+  return format === 'html'
+    ? serializeHtmlFragment(fragment.text, normalizedStyles)
+    : serializeMarkdownFragment(fragment.text, normalizedStyles);
+}
+
+function serializeImageFragment(
+  fragment: LineFragment,
+  format: OutputFormat,
+): string {
+  const source = fragment.styles.imageSrc ?? '';
+  const altText = fragment.styles.imageAlt ?? extractImageAlt(fragment.text);
+
+  if (format === 'html') {
+    return `<img src="${escapeHtml(source)}" alt="${escapeHtml(altText)}" />`;
+  }
+
+  return `![${escapeMarkdown(altText)}](${escapeMarkdownUrl(source)})`;
+}
+
+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>`;
+  }
+
+  if (styles.link) {
+    result = `<a href="${escapeHtml(styles.link)}">${result}</a>`;
+  }
+
+  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>`;
+  }
+
+  if (styles.link) {
+    result = `[${result}](${escapeMarkdownUrl(styles.link)})`;
+  }
+
+  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 buildBlockStyle(textAlign?: TextAlign): string {
+  const cssRules: string[] = [];
+
+  if (textAlign) {
+    cssRules.push(`text-align: ${textAlign}`);
+  }
+
+  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 getLineListType(line: LineFragment[]): ListType | undefined {
+  for (const fragment of line) {
+    if (fragment.styles.listType && fragment.styles.listType !== 'none') {
+      return fragment.styles.listType;
+    }
+  }
+
+  return undefined;
+}
+
+function getLineTextAlign(line: LineFragment[]): TextAlign | undefined {
+  for (const fragment of line) {
+    if (fragment.styles.textAlign) {
+      return fragment.styles.textAlign;
+    }
+  }
+
+  return undefined;
+}
+
+function getHeadingPrefix(heading?: HeadingLevel): string | undefined {
+  switch (heading) {
+    case 'h1':
+      return '#';
+    case 'h2':
+      return '##';
+    case 'h3':
+      return '###';
+    default:
+      return undefined;
+  }
+}
+
+function extractImageAlt(text: string): string {
+  const normalized = text.replace(/^\[Image:\s*/i, '').replace(/^\[Image\]/i, '').replace(/\]$/, '').trim();
+  return normalized.length > 0 ? normalized : 'image';
+}
+
+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 escapeMarkdownUrl(url: string): string {
+  return url.replaceAll(' ', '%20').replaceAll(')', '%29');
+}
+
+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}`;
+}