feat: add foreground color style for iOS

Author: IvanIhnatsiuk

android/src/main/java/com/swmansion/enriched/EnrichedTextInputViewManager.kt

@@ -251,6 +251,10 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
     view?.verifyAndToggleStyle(EnrichedSpans.UNORDERED_LIST)
   }
 
+  override fun toggleColor(view: EnrichedTextInputView?, color: String) {
+    // no-op for now
+  }
+
   override fun addLink(view: EnrichedTextInputView?, start: Int, end: Int, text: String, url: String) {
     view?.addLink(start, end, text, url)
   }

example/src/App.tsx

@@ -27,6 +27,8 @@ import { type MentionItem, MentionPopup } from './components/MentionPopup';
 import { useUserMention } from './useUserMention';
 import { useChannelMention } from './useChannelMention';
 import { HtmlSection } from './components/HtmlSection';
+import type { OnChangeColorEvent } from '../../src/EnrichedTextInputNativeComponent';
+import ColorPreview from './components/ColorPreview';
 
 type StylesState = OnChangeStateEvent;
 
@@ -38,6 +40,8 @@ interface Selection {
   text: string;
 }
 
+const PRIMARY_COLOR = '#000000';
+
 const DEFAULT_STYLE: StylesState = {
   isBold: false,
   isItalic: false,
@@ -54,6 +58,7 @@ const DEFAULT_STYLE: StylesState = {
   isLink: false,
   isImage: false,
   isMention: false,
+  isColored: false,
 };
 
 const DEFAULT_LINK_STATE = {
@@ -82,6 +87,7 @@ export default function App() {
   const [stylesState, setStylesState] = useState<StylesState>(DEFAULT_STYLE);
   const [currentLink, setCurrentLink] =
     useState<CurrentLinkState>(DEFAULT_LINK_STATE);
+  const [selectionColor, setSelectionColor] = useState<string>(PRIMARY_COLOR);
 
   const ref = useRef<EnrichedTextInputInstance>(null);
 
@@ -257,6 +263,14 @@ export default function App() {
     setSelection(e.nativeEvent);
   };
 
+  const handleSelectionColorChange = (
+    e: NativeSyntheticEvent<OnChangeColorEvent>
+  ) => {
+    if (e.nativeEvent.color) {
+      setSelectionColor(e.nativeEvent.color);
+    }
+  };
+
   return (
     <>
       <ScrollView
@@ -275,6 +289,7 @@ export default function App() {
             selectionColor="deepskyblue"
             cursorColor="dodgerblue"
             autoCapitalize="sentences"
+            onColorChangeInSelection={handleSelectionColorChange}
             onChangeText={handleChangeText}
             onChangeHtml={handleChangeHtml}
             onChangeState={handleChangeState}
@@ -293,6 +308,7 @@ export default function App() {
           <Toolbar
             stylesState={stylesState}
             editorRef={ref}
+            selectionColor={selectionColor}
             onOpenLinkModal={openLinkModal}
             onSelectImage={selectImage}
           />
@@ -308,6 +324,7 @@ export default function App() {
         />
         <HtmlSection currentHtml={currentHtml} />
         {DEBUG_SCROLLABLE && <View style={styles.scrollPlaceholder} />}
+        <ColorPreview color={selectionColor} />
       </ScrollView>
       <LinkModal
         isOpen={isLinkModalOpen}
@@ -368,7 +385,7 @@ const htmlStyle: HtmlStyle = {
     backgroundColor: 'yellow',
   },
   a: {
-    color: 'green',
+    color: 'blue',
     textDecorationLine: 'underline',
   },
   mention: {

example/src/components/ColorPreview.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+type Props = {
+  color: string;
+};
+
+const ColorPreview: React.FC<Props> = ({ color }) => {
+  return (
+    <>
+      <View
+        style={[
+          styles.preview,
+          {
+            backgroundColor: color,
+          },
+        ]}
+      />
+      <Text>{color}</Text>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  preview: {
+    marginVertical: 8,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+  },
+});
+
+export default ColorPreview;

example/src/components/Toolbar.tsx

@@ -5,6 +5,7 @@ import type {
   EnrichedTextInputInstance,
 } from 'react-native-enriched';
 import type { FC } from 'react';
+import { ToolbarColorButton } from './ToolbarColorButton';
 
 const STYLE_ITEMS = [
   {
@@ -67,6 +68,16 @@ const STYLE_ITEMS = [
     name: 'ordered-list',
     icon: 'list-ol',
   },
+  {
+    name: 'color',
+    value: '#FF0000',
+    text: 'A',
+  },
+  {
+    name: 'color',
+    value: '#E6FF5C',
+    text: 'A',
+  },
 ] as const;
 
 type Item = (typeof STYLE_ITEMS)[number];
@@ -77,13 +88,15 @@ export interface ToolbarProps {
   editorRef?: React.RefObject<EnrichedTextInputInstance | null>;
   onOpenLinkModal: () => void;
   onSelectImage: () => void;
+  selectionColor: string | null;
 }
 
 export const Toolbar: FC<ToolbarProps> = ({
   stylesState,
   editorRef,
   onOpenLinkModal,
   onSelectImage,
+  selectionColor,
 }) => {
   const handlePress = (item: Item) => {
     const currentRef = editorRef?.current;
@@ -138,6 +151,10 @@ export const Toolbar: FC<ToolbarProps> = ({
     }
   };
 
+  const handleColorButtonPress = (color: string) => {
+    editorRef?.current?.toggleColor(color);
+  };
+
   const isActive = (item: Item) => {
     switch (item.name) {
       case 'bold':
@@ -176,7 +193,14 @@ export const Toolbar: FC<ToolbarProps> = ({
   };
 
   const renderItem = ({ item }: ListRenderItemInfo<Item>) => {
-    return (
+    return item.name === 'color' ? (
+      <ToolbarColorButton
+        onPress={handleColorButtonPress}
+        color={item.value}
+        text={item.text}
+        isActive={stylesState.isColored && selectionColor === item.value}
+      />
+    ) : (
       <ToolbarButton
         {...item}
         isActive={isActive(item)}
@@ -185,7 +209,8 @@ export const Toolbar: FC<ToolbarProps> = ({
     );
   };
 
-  const keyExtractor = (item: Item) => item.name;
+  const keyExtractor = (item: Item) =>
+    item.name === 'color' ? item.value : item.name;
 
   return (
     <FlatList

example/src/components/ToolbarColorButton.tsx

@@ -0,0 +1,47 @@
+import { useMemo, type FC } from 'react';
+import { Pressable, StyleSheet, Text } from 'react-native';
+
+interface ColorButtonProps {
+  text: string;
+  isActive: boolean;
+  onPress: (color: string) => void;
+  color: string;
+}
+
+export const ToolbarColorButton: FC<ColorButtonProps> = ({
+  text,
+  isActive,
+  onPress,
+  color,
+}) => {
+  const handlePress = () => {
+    onPress(color);
+  };
+
+  const containerStyle = useMemo(
+    () => [
+      styles.container,
+      { backgroundColor: isActive ? color : 'rgba(0, 26, 114, 0.8)' },
+    ],
+    [isActive, color]
+  );
+
+  return (
+    <Pressable style={containerStyle} onPress={handlePress}>
+      <Text style={[styles.text, !isActive && { color }]}>{text}</Text>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 56,
+    height: 56,
+  },
+  text: {
+    color: 'white',
+    fontSize: 20,
+  },
+});