react-native-richify 1.0.3 → 1.0.5

package/src/components/RichTextInput.tsx

@@ -1,34 +1,43 @@
-import React, { useEffect, useCallback } from 'react';
+import React, {
+  useEffect,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
-  View,
-  TextInput,
+  Animated,
+  Easing,
+  ScrollView,
   StyleSheet,
+  Text,
+  TextInput,
+  View,
   type NativeSyntheticEvent,
+  type TextInputContentSizeChangeEventData,
   type TextInputSelectionChangeEventData,
 } from 'react-native';
 import type { RichTextInputProps } from '../types';
 import { DEFAULT_THEME } from '../constants/defaultStyles';
-import { segmentsToPlainText } from '../utils/parser';
 import { useRichText } from '../hooks/useRichText';
-import { OverlayText } from './OverlayText';
+import { segmentsToPlainText } from '../utils/parser';
+import { serializeSegments } from '../utils/serializer';
+import { RenderedOutput } from './RenderedOutput';
 import { Toolbar } from './Toolbar';
 
+const DEFAULT_OUTPUT_PANEL_MAX_HEIGHT = 180;
+const isJestRuntime =
+  typeof (
+    globalThis as {
+      process?: { env?: { JEST_WORKER_ID?: string } };
+    }
+  ).process?.env?.JEST_WORKER_ID === 'string';
+
 /**
  * RichTextInput — The main rich text editor component.
  *
- * Uses the Overlay Technique:
- * - A transparent `TextInput` on top captures user input and selection
- * - A styled `<Text>` layer behind it renders the formatted content
- * - Both share identical font metrics for pixel-perfect alignment
- *
- * @example
- * ```tsx
- * <RichTextInput
- *   placeholder="Start typing..."
- *   showToolbar
- *   onChangeSegments={(segments) => console.log(segments)}
- * />
- * ```
+ * Uses a plain `TextInput` for editing and renders the serialized rich output
+ * below it as Markdown or HTML.
  */
 export const RichTextInput: React.FC<RichTextInputProps> = ({
   initialSegments,
@@ -41,6 +50,17 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
   toolbarPosition = 'top',
   toolbarItems,
   theme,
+  showOutputPreview = true,
+  outputFormat,
+  defaultOutputFormat = 'markdown',
+  outputPreviewMode,
+  defaultOutputPreviewMode = 'literal',
+  maxOutputHeight = DEFAULT_OUTPUT_PANEL_MAX_HEIGHT,
+  onChangeOutput,
+  onChangeOutputFormat,
+  onChangeOutputPreviewMode,
+  onRequestLink,
+  onRequestImage,
   multiline = true,
   minHeight = 120,
   maxHeight,
@@ -50,6 +70,13 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
   onReady,
 }) => {
   const resolvedTheme = theme ?? DEFAULT_THEME;
+  const previewProgress = useRef(new Animated.Value(0)).current;
+  const [internalOutputFormat, setInternalOutputFormat] =
+    useState(defaultOutputFormat);
+  const [internalOutputPreviewMode, setInternalOutputPreviewMode] = useState(
+    defaultOutputPreviewMode,
+  );
+  const [contentHeight, setContentHeight] = useState(minHeight);
 
   const { state, actions } = useRichText({
     initialSegments,
@@ -57,15 +84,61 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
     onChangeText,
   });
 
-  // Expose actions via onReady callback
   useEffect(() => {
     onReady?.(actions);
-  }, [onReady, actions]);
+  }, [actions, onReady]);
 
-  // Build plain text for the TextInput value
   const plainText = segmentsToPlainText(state.segments);
+  const resolvedOutputFormat = outputFormat ?? internalOutputFormat;
+  const resolvedOutputPreviewMode =
+    outputPreviewMode ?? internalOutputPreviewMode;
+  const inputHeight = Math.max(
+    minHeight,
+    typeof maxHeight === 'number'
+      ? Math.min(contentHeight, maxHeight)
+      : contentHeight,
+  );
+  const shouldScrollInput =
+    typeof maxHeight === 'number' && contentHeight > maxHeight;
+  const serializedOutput = useMemo(
+    () => serializeSegments(state.segments, resolvedOutputFormat),
+    [resolvedOutputFormat, state.segments],
+  );
+  const shouldShowOutputPreview = showOutputPreview && plainText.length > 0;
+  const normalizedSelection = useMemo(
+    () => ({
+      start: Math.min(state.selection.start, state.selection.end),
+      end: Math.max(state.selection.start, state.selection.end),
+    }),
+    [state.selection.end, state.selection.start],
+  );
+  const selectedText = useMemo(
+    () => plainText.slice(normalizedSelection.start, normalizedSelection.end),
+    [normalizedSelection.end, normalizedSelection.start, plainText],
+  );
+  const selectionStyle = useMemo(
+    () => actions.getSelectionStyle(),
+    [actions, state.activeStyles, state.segments, state.selection],
+  );
+
+  useEffect(() => {
+    onChangeOutput?.(serializedOutput, resolvedOutputFormat);
+  }, [onChangeOutput, resolvedOutputFormat, serializedOutput]);
+
+  useEffect(() => {
+    if (isJestRuntime) {
+      previewProgress.setValue(shouldShowOutputPreview ? 1 : 0);
+      return;
+    }
+
+    Animated.timing(previewProgress, {
+      toValue: shouldShowOutputPreview ? 1 : 0,
+      duration: 180,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: false,
+    }).start();
+  }, [previewProgress, shouldShowOutputPreview]);
 
-  // Handle selection change from TextInput
   const onSelectionChange = useCallback(
     (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
       const { start, end } = e.nativeEvent.selection;
@@ -74,67 +147,172 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
     [actions],
   );
 
-  // Container style
+  const onContentSizeChange = useCallback(
+    (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+      setContentHeight(Math.ceil(e.nativeEvent.contentSize.height));
+      textInputProps?.onContentSizeChange?.(e);
+    },
+    [textInputProps],
+  );
+
+  const handleOutputFormatChange = useCallback(
+    (format: 'markdown' | 'html') => {
+      if (outputFormat === undefined) {
+        setInternalOutputFormat(format);
+      }
+
+      onChangeOutputFormat?.(format);
+    },
+    [onChangeOutputFormat, outputFormat],
+  );
+
+  const handleOutputPreviewModeChange = useCallback(
+    (mode: 'literal' | 'rendered') => {
+      if (outputPreviewMode === undefined) {
+        setInternalOutputPreviewMode(mode);
+      }
+
+      onChangeOutputPreviewMode?.(mode);
+    },
+    [onChangeOutputPreviewMode, outputPreviewMode],
+  );
+
+  const handleRequestLink = useCallback(() => {
+    if (onRequestLink) {
+      onRequestLink({
+        selectedText,
+        currentUrl: selectionStyle.link,
+        applyLink: actions.setLink,
+      });
+      return;
+    }
+
+    if (selectionStyle.link) {
+      actions.setLink(undefined);
+      return;
+    }
+
+    const detectedUrl = detectLinkTarget(selectedText);
+    if (detectedUrl) {
+      actions.setLink(detectedUrl);
+    }
+  }, [actions, onRequestLink, selectedText, selectionStyle.link]);
+
+  const handleRequestImage = useCallback(() => {
+    if (onRequestImage) {
+      onRequestImage({
+        insertImage: actions.insertImage,
+      });
+      return;
+    }
+
+    const detectedSource = detectImageSource(selectedText);
+    if (detectedSource) {
+      actions.insertImage(detectedSource, {
+        alt: selectedText.trim() || undefined,
+      });
+    }
+  }, [actions, onRequestImage, selectedText]);
+
+  const outputLabel = useMemo(() => {
+    const formatLabel = resolvedOutputFormat === 'html' ? 'HTML' : 'Markdown';
+
+    if (resolvedOutputPreviewMode === 'rendered') {
+      return `${formatLabel} preview`;
+    }
+
+    return `${formatLabel} output`;
+  }, [resolvedOutputFormat, resolvedOutputPreviewMode]);
+
   const containerStyle = [
     resolvedTheme.containerStyle ?? DEFAULT_THEME.containerStyle,
   ];
-
-  // Input area style
-  const inputAreaStyle = [
-    styles.inputArea,
-    { minHeight },
-    maxHeight ? { maxHeight } : undefined,
-  ];
-
-  // Input style
+  const inputAreaStyle = [styles.inputArea];
   const inputStyle = [
     styles.textInput,
     resolvedTheme.baseTextStyle ?? DEFAULT_THEME.baseTextStyle,
     resolvedTheme.inputStyle ?? DEFAULT_THEME.inputStyle,
+    { height: inputHeight },
     textInputProps?.style,
-    styles.hiddenInputText,
+  ];
+  const outputAnimatedStyle = {
+    maxHeight: previewProgress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, maxOutputHeight + 72],
+    }),
+    opacity: previewProgress,
+    marginTop: previewProgress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 12],
+    }),
+    marginBottom: previewProgress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 16],
+    }),
+    transform: [
+      {
+        translateY: previewProgress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-8, 0],
+        }),
+      },
+    ],
+  };
+  const outputContainerStyle = [
+    resolvedTheme.outputContainerStyle ?? DEFAULT_THEME.outputContainerStyle,
+  ];
+  const outputLabelStyle = [
+    resolvedTheme.outputLabelStyle ?? DEFAULT_THEME.outputLabelStyle,
+  ];
+  const outputTextStyle = [
+    resolvedTheme.outputTextStyle ?? DEFAULT_THEME.outputTextStyle,
   ];
 
-  // Toolbar component
   const toolbarComponent = showToolbar ? (
     <Toolbar
       actions={actions}
       state={state}
       items={toolbarItems}
       theme={resolvedTheme}
+      outputFormat={resolvedOutputFormat}
+      outputPreviewMode={resolvedOutputPreviewMode}
+      onOutputFormatChange={handleOutputFormatChange}
+      onOutputPreviewModeChange={handleOutputPreviewModeChange}
+      onRequestLink={handleRequestLink}
+      onRequestImage={handleRequestImage}
       renderToolbar={renderToolbar}
     />
   ) : null;
 
-  // Toolbar border
   const toolbarBorderStyle =
     toolbarPosition === 'top'
-      ? { borderBottomWidth: 1, borderBottomColor: resolvedTheme.colors?.toolbarBorder ?? DEFAULT_THEME.colors?.toolbarBorder }
-      : { borderTopWidth: 1, borderTopColor: resolvedTheme.colors?.toolbarBorder ?? DEFAULT_THEME.colors?.toolbarBorder };
+      ? {
+          borderBottomWidth: 1,
+          borderBottomColor:
+            resolvedTheme.colors?.toolbarBorder ??
+            DEFAULT_THEME.colors?.toolbarBorder,
+        }
+      : {
+          borderTopWidth: 1,
+          borderTopColor:
+            resolvedTheme.colors?.toolbarBorder ??
+            DEFAULT_THEME.colors?.toolbarBorder,
+        };
 
   return (
     <View style={containerStyle}>
-      {/* Toolbar — Top */}
       {toolbarPosition === 'top' && toolbarComponent && (
         <View style={toolbarBorderStyle}>{toolbarComponent}</View>
       )}
 
-      {/* Editor Area */}
       <View style={inputAreaStyle}>
-        {/* Overlay — Styled text rendering (behind TextInput) */}
-        <OverlayText
-          segments={state.segments}
-          baseTextStyle={resolvedTheme.baseTextStyle}
-          theme={resolvedTheme}
-        />
-
-        {/* TextInput — Transparent layer on top for input capture */}
         <TextInput
           {...textInputProps}
           style={inputStyle}
           value={plainText}
           onChangeText={actions.handleTextChange}
           onSelectionChange={onSelectionChange}
+          onContentSizeChange={onContentSizeChange}
           multiline={multiline}
           placeholder={placeholder}
           placeholderTextColor={
@@ -144,16 +322,42 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
           editable={editable}
           maxLength={maxLength}
           autoFocus={autoFocus}
-          underlineColorAndroid="transparent"
           selectionColor={
             resolvedTheme.colors?.cursor ?? DEFAULT_THEME.colors?.cursor
           }
           textAlignVertical="top"
-          scrollEnabled={typeof maxHeight === 'number'}
+          scrollEnabled={shouldScrollInput}
         />
+
+        {showOutputPreview && (
+          <Animated.View
+            pointerEvents={shouldShowOutputPreview ? 'auto' : 'none'}
+            style={[styles.outputAnimatedWrapper, outputAnimatedStyle]}
+          >
+            <View style={outputContainerStyle}>
+              <Text style={outputLabelStyle}>
+                {outputLabel}
+              </Text>
+              <ScrollView
+                style={{ maxHeight: maxOutputHeight }}
+                showsVerticalScrollIndicator={false}
+              >
+                {resolvedOutputPreviewMode === 'rendered' ? (
+                  <RenderedOutput
+                    segments={state.segments}
+                    theme={resolvedTheme}
+                  />
+                ) : (
+                  <Text selectable style={outputTextStyle}>
+                    {serializedOutput}
+                  </Text>
+                )}
+              </ScrollView>
+            </View>
+          </Animated.View>
+        )}
       </View>
 
-      {/* Toolbar — Bottom */}
       {toolbarPosition === 'bottom' && toolbarComponent && (
         <View style={toolbarBorderStyle}>{toolbarComponent}</View>
       )}
@@ -169,12 +373,43 @@ const styles = StyleSheet.create({
   },
   textInput: {
     position: 'relative',
-    zIndex: 1,
   },
-  hiddenInputText: {
-    // Keep the editable layer invisible while preserving the caret.
-    color: 'transparent',
-    backgroundColor: 'transparent',
-    textShadowColor: 'transparent',
+  outputAnimatedWrapper: {
+    overflow: 'hidden',
   },
 });
+
+function detectLinkTarget(value: string): string | undefined {
+  const trimmed = value.trim();
+  if (trimmed.length === 0) {
+    return undefined;
+  }
+
+  if (/^https?:\/\//i.test(trimmed) || /^mailto:/i.test(trimmed)) {
+    return trimmed;
+  }
+
+  if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) {
+    return `mailto:${trimmed}`;
+  }
+
+  if (/^[^\s]+\.[^\s]+$/.test(trimmed)) {
+    return `https://${trimmed}`;
+  }
+
+  return undefined;
+}
+
+function detectImageSource(value: string): string | undefined {
+  const normalized = detectLinkTarget(value);
+  if (!normalized) {
+    return undefined;
+  }
+
+  const candidate = normalized.replace(/^mailto:/i, '');
+  if (/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/i.test(candidate)) {
+    return normalized;
+  }
+
+  return undefined;
+}

package/src/components/Toolbar.tsx

@@ -14,7 +14,20 @@ import { ToolbarButton } from './ToolbarButton';
  * - Horizontal scrolling for overflow
  */
 export const Toolbar: React.FC<ToolbarProps> = React.memo(
-  ({ actions, state, items, theme, visible = true, renderToolbar }) => {
+  ({
+    actions,
+    state,
+    items,
+    theme,
+    visible = true,
+    outputFormat = 'markdown',
+    outputPreviewMode = 'literal',
+    onOutputFormatChange,
+    onOutputPreviewModeChange,
+    onRequestLink,
+    onRequestImage,
+    renderToolbar,
+  }) => {
     const resolvedTheme = theme ?? DEFAULT_THEME;
     const toolbarItems = items ?? DEFAULT_TOOLBAR_ITEMS;
 
@@ -33,12 +46,32 @@ export const Toolbar: React.FC<ToolbarProps> = React.memo(
           isActive = selectionStyle.heading === item.heading;
         }
 
+        if (item.listType) {
+          isActive = selectionStyle.listType === item.listType;
+        }
+
+        if (item.textAlign) {
+          isActive = selectionStyle.textAlign === item.textAlign;
+        }
+
+        if (item.outputFormat) {
+          isActive = outputFormat === item.outputFormat;
+        }
+
+        if (item.outputPreviewMode) {
+          isActive = outputPreviewMode === item.outputPreviewMode;
+        }
+
+        if (item.actionType === 'link') {
+          isActive = !!selectionStyle.link;
+        }
+
         return {
           ...item,
           active: item.active ?? isActive,
         };
       });
-    }, [actions, toolbarItems]);
+    }, [actions, outputFormat, outputPreviewMode, toolbarItems]);
 
     // Custom render
     if (renderToolbar) {
@@ -46,6 +79,13 @@ export const Toolbar: React.FC<ToolbarProps> = React.memo(
         items: enrichedItems,
         state,
         actions,
+        outputFormat,
+        outputPreviewMode,
+        onOutputFormatChange: onOutputFormatChange ?? (() => undefined),
+        onOutputPreviewModeChange:
+          onOutputPreviewModeChange ?? (() => undefined),
+        onRequestLink,
+        onRequestImage,
       });
     }
 
@@ -79,6 +119,18 @@ export const Toolbar: React.FC<ToolbarProps> = React.memo(
                   actions.toggleFormat(item.format);
                 } else if (item.heading) {
                   actions.setHeading(item.heading);
+                } else if (item.listType) {
+                  actions.setListType(item.listType);
+                } else if (item.textAlign) {
+                  actions.setTextAlign(item.textAlign);
+                } else if (item.outputFormat) {
+                  onOutputFormatChange?.(item.outputFormat);
+                } else if (item.outputPreviewMode) {
+                  onOutputPreviewModeChange?.(item.outputPreviewMode);
+                } else if (item.actionType === 'link') {
+                  onRequestLink?.();
+                } else if (item.actionType === 'image') {
+                  onRequestImage?.();
                 }
               }}
             />

package/src/constants/defaultStyles.d.ts

@@ -9,6 +9,9 @@ export declare const DEFAULT_COLORS: {
     readonly placeholder: "#9CA3AF";
     readonly toolbarBackground: "#F9FAFB";
     readonly toolbarBorder: "#E5E7EB";
+    readonly outputBackground: "#F8FAFC";
+    readonly outputLabel: "#475569";
+    readonly link: "#2563EB";
     readonly cursor: "#6366F1";
     readonly activeButtonBg: "#EEF2FF";
     readonly codeBackground: "#F3F4F6";

package/src/constants/defaultStyles.ts

@@ -10,6 +10,9 @@ export const DEFAULT_COLORS = {
   placeholder: '#9CA3AF',
   toolbarBackground: '#F9FAFB',
   toolbarBorder: '#E5E7EB',
+  outputBackground: '#F8FAFC',
+  outputLabel: '#475569',
+  link: '#2563EB',
   cursor: '#6366F1',
   activeButtonBg: '#EEF2FF',
   codeBackground: '#F3F4F6',
@@ -48,6 +51,11 @@ export const EMPTY_FORMAT_STYLE: FormatStyle = {
   backgroundColor: undefined,
   fontSize: undefined,
   heading: undefined,
+  listType: undefined,
+  textAlign: undefined,
+  link: undefined,
+  imageSrc: undefined,
+  imageAlt: undefined,
 };
 
 /**
@@ -64,7 +72,7 @@ export const DEFAULT_THEME: RichTextTheme = {
   inputStyle: {
     fontSize: DEFAULT_BASE_TEXT_STYLE.fontSize,
     lineHeight: DEFAULT_BASE_TEXT_STYLE.lineHeight,
-    color: 'transparent',
+    color: DEFAULT_COLORS.text,
     paddingHorizontal: 16,
     paddingVertical: 12,
     textAlignVertical: 'top',
@@ -83,6 +91,32 @@ export const DEFAULT_THEME: RichTextTheme = {
     lineHeight: DEFAULT_BASE_TEXT_STYLE.lineHeight,
     color: DEFAULT_COLORS.text,
   },
+  outputContainerStyle: {
+    marginHorizontal: 12,
+    marginBottom: 12,
+    padding: 12,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: DEFAULT_COLORS.toolbarBorder,
+    backgroundColor: DEFAULT_COLORS.outputBackground,
+  },
+  outputLabelStyle: {
+    marginBottom: 8,
+    fontSize: 12,
+    fontWeight: '700',
+    letterSpacing: 0.4,
+    color: DEFAULT_COLORS.outputLabel,
+    textTransform: 'uppercase',
+  },
+  outputTextStyle: {
+    fontSize: 14,
+    lineHeight: 20,
+    color: DEFAULT_COLORS.text,
+    fontFamily: 'monospace',
+  },
+  renderedOutputStyle: {
+    gap: 10,
+  },
   toolbarStyle: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -125,6 +159,7 @@ export const DEFAULT_THEME: RichTextTheme = {
     placeholder: DEFAULT_COLORS.placeholder,
     toolbarBackground: DEFAULT_COLORS.toolbarBackground,
     toolbarBorder: DEFAULT_COLORS.toolbarBorder,
+    link: DEFAULT_COLORS.link,
     cursor: DEFAULT_COLORS.cursor,
   },
 };
@@ -141,4 +176,15 @@ export const DEFAULT_TOOLBAR_ITEMS: ToolbarItem[] = [
   { id: 'h1', label: 'H1', heading: 'h1' },
   { id: 'h2', label: 'H2', heading: 'h2' },
   { id: 'h3', label: 'H3', heading: 'h3' },
+  { id: 'bullet', label: '\u2022', listType: 'bullet' },
+  { id: 'ordered', label: '1.', listType: 'ordered' },
+  { id: 'link', label: 'Link', actionType: 'link' },
+  { id: 'image', label: 'Img', actionType: 'image' },
+  { id: 'align-left', label: 'L', textAlign: 'left' },
+  { id: 'align-center', label: 'C', textAlign: 'center' },
+  { id: 'align-right', label: 'R', textAlign: 'right' },
+  { id: 'format-markdown', label: 'MD', outputFormat: 'markdown' },
+  { id: 'format-html', label: 'HTML', outputFormat: 'html' },
+  { id: 'preview-literal', label: 'Raw', outputPreviewMode: 'literal' },
+  { id: 'preview-rendered', label: 'View', outputPreviewMode: 'rendered' },
 ];