react-native-richify 1.0.4 → 1.0.5

package/src/components/RichTextInput.tsx

@@ -1,4 +1,10 @@
-import React, { useEffect, useCallback, useMemo, useRef } from 'react';
+import React, {
+  useEffect,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   Animated,
   Easing,
@@ -8,6 +14,7 @@ import {
   TextInput,
   View,
   type NativeSyntheticEvent,
+  type TextInputContentSizeChangeEventData,
   type TextInputSelectionChangeEventData,
 } from 'react-native';
 import type { RichTextInputProps } from '../types';
@@ -15,9 +22,10 @@ import { DEFAULT_THEME } from '../constants/defaultStyles';
 import { useRichText } from '../hooks/useRichText';
 import { segmentsToPlainText } from '../utils/parser';
 import { serializeSegments } from '../utils/serializer';
+import { RenderedOutput } from './RenderedOutput';
 import { Toolbar } from './Toolbar';
 
-const OUTPUT_PANEL_HEIGHT = 180;
+const DEFAULT_OUTPUT_PANEL_MAX_HEIGHT = 180;
 const isJestRuntime =
   typeof (
     globalThis as {
@@ -43,8 +51,16 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
   toolbarItems,
   theme,
   showOutputPreview = true,
-  outputFormat = 'markdown',
+  outputFormat,
+  defaultOutputFormat = 'markdown',
+  outputPreviewMode,
+  defaultOutputPreviewMode = 'literal',
+  maxOutputHeight = DEFAULT_OUTPUT_PANEL_MAX_HEIGHT,
   onChangeOutput,
+  onChangeOutputFormat,
+  onChangeOutputPreviewMode,
+  onRequestLink,
+  onRequestImage,
   multiline = true,
   minHeight = 120,
   maxHeight,
@@ -55,6 +71,12 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
 }) => {
   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,
@@ -67,15 +89,41 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
   }, [actions, onReady]);
 
   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, outputFormat),
-    [outputFormat, state.segments],
+    () => 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, outputFormat);
-  }, [onChangeOutput, outputFormat, serializedOutput]);
+    onChangeOutput?.(serializedOutput, resolvedOutputFormat);
+  }, [onChangeOutput, resolvedOutputFormat, serializedOutput]);
 
   useEffect(() => {
     if (isJestRuntime) {
@@ -99,30 +147,108 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
     [actions],
   );
 
+  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,
   ];
-  const inputAreaStyle = [
-    styles.inputArea,
-    { minHeight },
-    maxHeight ? { maxHeight } : undefined,
-  ];
+  const inputAreaStyle = [styles.inputArea];
   const inputStyle = [
     styles.textInput,
     resolvedTheme.baseTextStyle ?? DEFAULT_THEME.baseTextStyle,
     resolvedTheme.inputStyle ?? DEFAULT_THEME.inputStyle,
+    { height: inputHeight },
     textInputProps?.style,
   ];
   const outputAnimatedStyle = {
     maxHeight: previewProgress.interpolate({
       inputRange: [0, 1],
-      outputRange: [0, OUTPUT_PANEL_HEIGHT],
+      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({
@@ -148,6 +274,12 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
       state={state}
       items={toolbarItems}
       theme={resolvedTheme}
+      outputFormat={resolvedOutputFormat}
+      outputPreviewMode={resolvedOutputPreviewMode}
+      onOutputFormatChange={handleOutputFormatChange}
+      onOutputPreviewModeChange={handleOutputPreviewModeChange}
+      onRequestLink={handleRequestLink}
+      onRequestImage={handleRequestImage}
       renderToolbar={renderToolbar}
     />
   ) : null;
@@ -180,6 +312,7 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
           value={plainText}
           onChangeText={actions.handleTextChange}
           onSelectionChange={onSelectionChange}
+          onContentSizeChange={onContentSizeChange}
           multiline={multiline}
           placeholder={placeholder}
           placeholderTextColor={
@@ -193,7 +326,7 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
             resolvedTheme.colors?.cursor ?? DEFAULT_THEME.colors?.cursor
           }
           textAlignVertical="top"
-          scrollEnabled={typeof maxHeight === 'number'}
+          scrollEnabled={shouldScrollInput}
         />
 
         {showOutputPreview && (
@@ -203,12 +336,22 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
           >
             <View style={outputContainerStyle}>
               <Text style={outputLabelStyle}>
-                {outputFormat === 'html' ? 'HTML output' : 'Markdown output'}
+                {outputLabel}
               </Text>
-              <ScrollView showsVerticalScrollIndicator={false}>
-                <Text selectable style={outputTextStyle}>
-                  {serializedOutput}
-                </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>
@@ -235,3 +378,38 @@ const styles = StyleSheet.create({
     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

@@ -11,6 +11,7 @@ export declare const DEFAULT_COLORS: {
     readonly toolbarBorder: "#E5E7EB";
     readonly outputBackground: "#F8FAFC";
     readonly outputLabel: "#475569";
+    readonly link: "#2563EB";
     readonly cursor: "#6366F1";
     readonly activeButtonBg: "#EEF2FF";
     readonly codeBackground: "#F3F4F6";
@@ -34,7 +35,7 @@ export declare const DEFAULT_BASE_TEXT_STYLE: {
     readonly fontFamily: undefined;
 };
 /**
- * Empty format style — no formatting applied.
+ * Empty format style — no formatting applied.
  */
 export declare const EMPTY_FORMAT_STYLE: FormatStyle;
 /**

package/src/constants/defaultStyles.ts

@@ -12,6 +12,7 @@ export const DEFAULT_COLORS = {
   toolbarBorder: '#E5E7EB',
   outputBackground: '#F8FAFC',
   outputLabel: '#475569',
+  link: '#2563EB',
   cursor: '#6366F1',
   activeButtonBg: '#EEF2FF',
   codeBackground: '#F3F4F6',
@@ -50,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,
 };
 
 /**
@@ -108,6 +114,9 @@ export const DEFAULT_THEME: RichTextTheme = {
     color: DEFAULT_COLORS.text,
     fontFamily: 'monospace',
   },
+  renderedOutputStyle: {
+    gap: 10,
+  },
   toolbarStyle: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -150,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,
   },
 };
@@ -166,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' },
 ];

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,14 +82,66 @@ export function useFormatting({
 
   const setHeading = useCallback(
     (level: HeadingLevel) => {
+      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,
-          heading: level === 'none' ? undefined : level,
+          textAlign,
         });
       }
 
-      const newSegments = setHeadingOnLine(segments, selection, level);
+      const newSegments = setTextAlignOnLine(segments, selection, textAlign);
       onSegmentsChange(newSegments);
     },
     [
@@ -97,6 +153,21 @@ export function useFormatting({
     ],
   );
 
+  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(
     (color: string) => {
       setStyleProperty('color', color);
@@ -139,6 +210,9 @@ export function useFormatting({
     toggleFormat,
     setStyleProperty,
     setHeading,
+    setListType,
+    setTextAlign,
+    setLink,
     setColor,
     setBackgroundColor,
     setFontSize,