react-native-richify 1.0.5 → 1.0.7

package/src/components/ToolbarButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+import { TouchableOpacity, Text, StyleSheet, View } from 'react-native';
 import type { ToolbarButtonProps } from '../types';
 import { DEFAULT_THEME } from '../constants/defaultStyles';
 
@@ -8,13 +8,23 @@ import { DEFAULT_THEME } from '../constants/defaultStyles';
  * Supports custom rendering via the `renderButton` prop.
  */
 export const ToolbarButton: React.FC<ToolbarButtonProps> = React.memo(
-  ({ label, active, onPress, theme, renderButton }) => {
+  ({ label, accessibilityLabel, active, onPress, theme, renderButton }) => {
     // Custom render
     if (renderButton) {
-      return renderButton({ active, onPress, label });
+      return renderButton({ active, onPress, label, accessibilityLabel });
     }
 
     const resolvedTheme = theme ?? DEFAULT_THEME;
+    const baseTextColor =
+      resolvedTheme.toolbarButtonTextStyle?.color ??
+      DEFAULT_THEME.toolbarButtonTextStyle?.color;
+    const activeTextColor =
+      resolvedTheme.toolbarButtonActiveTextStyle?.color ??
+      DEFAULT_THEME.toolbarButtonActiveTextStyle?.color ??
+      baseTextColor;
+    const resolvedIconColor = active ? activeTextColor : baseTextColor;
+    const iconColor =
+      typeof resolvedIconColor === 'string' ? resolvedIconColor : undefined;
 
     const buttonStyle = [
       resolvedTheme.toolbarButtonStyle ?? DEFAULT_THEME.toolbarButtonStyle,
@@ -23,17 +33,11 @@ export const ToolbarButton: React.FC<ToolbarButtonProps> = React.memo(
         DEFAULT_THEME.toolbarButtonActiveStyle),
     ];
 
-    const textStyle = [
-      resolvedTheme.toolbarButtonTextStyle ??
-      DEFAULT_THEME.toolbarButtonTextStyle,
-      active &&
-      (resolvedTheme.toolbarButtonActiveTextStyle ??
-        DEFAULT_THEME.toolbarButtonActiveTextStyle),
-      // Make italic button actually italic, bold button actually bold, etc.
-      label === 'I' && styles.italicLabel,
-      label === 'U' && styles.underlineLabel,
-      label === 'S' && styles.strikethroughLabel,
-    ];
+    const derivedAccessibilityLabel =
+      accessibilityLabel ??
+      (typeof label === 'string' || typeof label === 'number'
+        ? `Format ${label}`
+        : 'Toolbar action');
 
     return (
       <TouchableOpacity
@@ -41,10 +45,10 @@ export const ToolbarButton: React.FC<ToolbarButtonProps> = React.memo(
         onPress={onPress}
         activeOpacity={0.7}
         accessibilityRole="button"
-        accessibilityLabel={`Format ${label}`}
+        accessibilityLabel={derivedAccessibilityLabel}
         accessibilityState={{ selected: active }}
       >
-        <Text style={textStyle}>{label}</Text>
+        {renderToolbarContent(label, iconColor, active, resolvedTheme)}
       </TouchableOpacity>
     );
   },
@@ -53,6 +57,10 @@ export const ToolbarButton: React.FC<ToolbarButtonProps> = React.memo(
 ToolbarButton.displayName = 'ToolbarButton';
 
 const styles = StyleSheet.create({
+  contentWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   italicLabel: {
     fontStyle: 'italic',
   },
@@ -63,3 +71,47 @@ const styles = StyleSheet.create({
     textDecorationLine: 'line-through',
   },
 });
+
+function renderToolbarContent(
+  label: ToolbarButtonProps['label'],
+  iconColor: string | undefined,
+  active: boolean,
+  theme: NonNullable<ToolbarButtonProps['theme']>,
+) {
+  if (typeof label === 'string' || typeof label === 'number') {
+    const textStyle = [
+      theme.toolbarButtonTextStyle ?? DEFAULT_THEME.toolbarButtonTextStyle,
+      active &&
+      (theme.toolbarButtonActiveTextStyle ??
+        DEFAULT_THEME.toolbarButtonActiveTextStyle),
+      label === 'I' && styles.italicLabel,
+      label === 'U' && styles.underlineLabel,
+      label === 'S' && styles.strikethroughLabel,
+    ];
+
+    return <Text style={textStyle}>{label}</Text>;
+  }
+
+  if (React.isValidElement(label)) {
+    return (
+      <View style={styles.contentWrapper}>
+        {React.cloneElement(
+          label as React.ReactElement<{
+            color?: string;
+            size?: number;
+            strokeWidth?: number;
+          }>,
+          {
+            color:
+              (label.props as { color?: string }).color ?? iconColor,
+            size: (label.props as { size?: number }).size ?? 18,
+            strokeWidth:
+              (label.props as { strokeWidth?: number }).strokeWidth ?? 2,
+          },
+        )}
+      </View>
+    );
+  }
+
+  return <View style={styles.contentWrapper}>{label}</View>;
+}

package/src/constants/defaultStyles.ts

@@ -1,3 +1,21 @@
+import React from 'react';
+import {
+  Bold,
+  Code,
+  Heading1,
+  Heading2,
+  Heading3,
+  ImagePlus,
+  Italic,
+  Link2,
+  List,
+  ListOrdered,
+  Strikethrough,
+  TextAlignCenter,
+  TextAlignEnd,
+  TextAlignStart,
+  Underline,
+} from 'lucide-react-native';
 import type { RichTextTheme, FormatStyle, ToolbarItem } from '../types';
 
 /**
@@ -168,23 +186,33 @@ export const DEFAULT_THEME: RichTextTheme = {
  * Default toolbar items for the built-in toolbar.
  */
 export const DEFAULT_TOOLBAR_ITEMS: ToolbarItem[] = [
-  { id: 'bold', label: 'B', format: 'bold' },
-  { id: 'italic', label: 'I', format: 'italic' },
-  { id: 'underline', label: 'U', format: 'underline' },
-  { id: 'strikethrough', label: 'S', format: 'strikethrough' },
-  { id: 'code', label: '<>', format: 'code' },
-  { 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' },
+  { id: 'bold', label: createToolbarIcon(Bold), format: 'bold', accessibilityLabel: 'Bold' },
+  { id: 'italic', label: createToolbarIcon(Italic), format: 'italic', accessibilityLabel: 'Italic' },
+  { id: 'underline', label: createToolbarIcon(Underline), format: 'underline', accessibilityLabel: 'Underline' },
+  { id: 'strikethrough', label: createToolbarIcon(Strikethrough), format: 'strikethrough', accessibilityLabel: 'Strikethrough' },
+  { id: 'code', label: createToolbarIcon(Code), format: 'code', accessibilityLabel: 'Code' },
+  { id: 'h1', label: createToolbarIcon(Heading1), heading: 'h1', accessibilityLabel: 'Heading 1' },
+  { id: 'h2', label: createToolbarIcon(Heading2), heading: 'h2', accessibilityLabel: 'Heading 2' },
+  { id: 'h3', label: createToolbarIcon(Heading3), heading: 'h3', accessibilityLabel: 'Heading 3' },
+  { id: 'bullet', label: createToolbarIcon(List), listType: 'bullet', accessibilityLabel: 'Bullet list' },
+  { id: 'ordered', label: createToolbarIcon(ListOrdered), listType: 'ordered', accessibilityLabel: 'Ordered list' },
+  { id: 'link', label: createToolbarIcon(Link2), actionType: 'link', accessibilityLabel: 'Link' },
+  { id: 'image', label: createToolbarIcon(ImagePlus), actionType: 'image', accessibilityLabel: 'Insert image' },
+  { id: 'align-left', label: createToolbarIcon(TextAlignStart), textAlign: 'left', accessibilityLabel: 'Align left' },
+  { id: 'align-center', label: createToolbarIcon(TextAlignCenter), textAlign: 'center', accessibilityLabel: 'Align center' },
+  { id: 'align-right', label: createToolbarIcon(TextAlignEnd), textAlign: 'right', accessibilityLabel: 'Align right' },
+  { id: 'format-markdown', label: 'MD', outputFormat: 'markdown', accessibilityLabel: 'Markdown output' },
+  { id: 'format-html', label: 'HTML', outputFormat: 'html', accessibilityLabel: 'HTML output' },
+  { id: 'preview-literal', label: 'Raw', outputPreviewMode: 'literal', accessibilityLabel: 'Raw output view' },
+  { id: 'preview-rendered', label: 'View', outputPreviewMode: 'rendered', accessibilityLabel: 'Rendered preview' },
 ];
+
+function createToolbarIcon(
+  Icon: React.ComponentType<{
+    color?: string;
+    size?: number;
+    strokeWidth?: number;
+  }>,
+) {
+  return React.createElement(Icon);
+}

package/src/hooks/useFormatting.ts

@@ -112,15 +112,28 @@ export function useFormatting({
 
   const setListType = useCallback(
     (listType: ListType) => {
+      const currentListType =
+        selection.start === selection.end
+          ? getSelectionStyle(segments, selection).listType ??
+            activeStyles.listType
+          : getSelectionStyle(segments, selection).listType;
+      const nextListType: ListType =
+        currentListType === listType ? 'none' : listType;
+
       if (selection.start === selection.end) {
         onActiveStylesChange({
           ...activeStyles,
-          listType: listType === 'none' ? undefined : listType,
-          heading: listType === 'none' ? activeStyles.heading : undefined,
+          listType: nextListType === 'none' ? undefined : nextListType,
+          heading:
+            nextListType === 'none' ? activeStyles.heading : undefined,
         });
       }
 
-      const newSegments = setListTypeOnLine(segments, selection, listType);
+      const newSegments = setListTypeOnLine(
+        segments,
+        selection,
+        nextListType,
+      );
       onSegmentsChange(newSegments);
     },
     [
@@ -134,14 +147,26 @@ export function useFormatting({
 
   const setTextAlign = useCallback(
     (textAlign: TextAlign) => {
+      const currentTextAlign =
+        selection.start === selection.end
+          ? getSelectionStyle(segments, selection).textAlign ??
+            activeStyles.textAlign
+          : getSelectionStyle(segments, selection).textAlign;
+      const nextTextAlign =
+        currentTextAlign === textAlign ? undefined : textAlign;
+
       if (selection.start === selection.end) {
         onActiveStylesChange({
           ...activeStyles,
-          textAlign,
+          textAlign: nextTextAlign,
         });
       }
 
-      const newSegments = setTextAlignOnLine(segments, selection, textAlign);
+      const newSegments = setTextAlignOnLine(
+        segments,
+        selection,
+        nextTextAlign,
+      );
       onSegmentsChange(newSegments);
     },
     [

package/src/types/index.d.ts

@@ -1,3 +1,4 @@
+import type { ReactElement, ReactNode } from 'react';
 import type { TextStyle, ViewStyle, TextInputProps, ColorValue } from 'react-native';
 /**
  * Supported inline formatting types.
@@ -183,8 +184,10 @@ export interface RichTextTheme {
 export interface ToolbarItem {
     /** Unique identifier. */
     id: string;
-    /** Display label or icon text. */
-    label: string;
+    /** Display content for the button: text, emoji, or a React element. */
+    label: ReactNode;
+    /** Accessibility label used when the button content is not plain text. */
+    accessibilityLabel?: string;
     /** The format type this button toggles (for inline formats). */
     format?: FormatType;
     /** The heading level this button sets. */
@@ -204,7 +207,7 @@ export interface ToolbarItem {
     /** Whether this item is currently active. */
     active?: boolean;
     /** Custom render function for the button. */
-    renderButton?: (props: ToolbarButtonRenderProps) => React.ReactElement | null;
+    renderButton?: (props: ToolbarButtonRenderProps) => ReactElement | null;
 }
 /**
  * Props passed to a custom toolbar button renderer.
@@ -212,7 +215,8 @@ export interface ToolbarItem {
 export interface ToolbarButtonRenderProps {
     active: boolean;
     onPress: () => void;
-    label: string;
+    label: ReactNode;
+    accessibilityLabel?: string;
 }
 /**
  * Props passed to a custom toolbar renderer.
@@ -264,8 +268,10 @@ export interface OverlayTextProps {
  * Props for the ToolbarButton component.
  */
 export interface ToolbarButtonProps {
-    /** Button label text. */
-    label: string;
+    /** Button label or icon content. */
+    label: ReactNode;
+    /** Accessibility label used for assistive technologies. */
+    accessibilityLabel?: string;
     /** Whether the button is currently active. */
     active: boolean;
     /** Press handler. */
@@ -302,7 +308,7 @@ export interface ToolbarProps {
     /** Called when the image button is pressed. */
     onRequestImage?: () => void;
     /** Custom render function for the entire toolbar. */
-    renderToolbar?: (props: ToolbarRenderProps) => React.ReactElement | null;
+    renderToolbar?: (props: ToolbarRenderProps) => ReactElement | null;
 }
 /**
  * Props for the main RichTextInput component.

package/src/types/index.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { TextStyle, ViewStyle, TextInputProps, ColorValue } from 'react-native';
 
 // ─── Format Types ────────────────────────────────────────────────────────────
@@ -224,8 +225,10 @@ export interface RichTextTheme {
 export interface ToolbarItem {
   /** Unique identifier. */
   id: string;
-  /** Display label or icon text. */
-  label: string;
+  /** Display content for the button: text, emoji, or a React element. */
+  label: ReactNode;
+  /** Accessibility label used when the button content is not plain text. */
+  accessibilityLabel?: string;
   /** The format type this button toggles (for inline formats). */
   format?: FormatType;
   /** The heading level this button sets. */
@@ -254,7 +257,8 @@ export interface ToolbarItem {
 export interface ToolbarButtonRenderProps {
   active: boolean;
   onPress: () => void;
-  label: string;
+  label: ReactNode;
+  accessibilityLabel?: string;
 }
 
 /**
@@ -316,8 +320,10 @@ export interface OverlayTextProps {
  * Props for the ToolbarButton component.
  */
 export interface ToolbarButtonProps {
-  /** Button label text. */
-  label: string;
+  /** Button label or icon content. */
+  label: ReactNode;
+  /** Accessibility label used for assistive technologies. */
+  accessibilityLabel?: string;
   /** Whether the button is currently active. */
   active: boolean;
   /** Press handler. */

package/src/utils/formatter.ts

@@ -95,7 +95,7 @@ export function setListTypeOnLine(
 export function setTextAlignOnLine(
   segments: StyledSegment[],
   selection: SelectionRange,
-  textAlign: TextAlign,
+  textAlign?: TextAlign,
 ): StyledSegment[] {
   return setLineStyleOnSelection(segments, selection, {
     textAlign,