fix: add setColor and removeColor methods

Author: IvanIhnatsiuk

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

@@ -251,7 +251,11 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
     view?.verifyAndToggleStyle(EnrichedSpans.UNORDERED_LIST)
   }
 
-  override fun toggleColor(view: EnrichedTextInputView?, color: String) {
+  override fun setColor(view: EnrichedTextInputView?, color: String) {
+    // no-op for now
+  }
+
+  override fun removeColor(view: EnrichedTextInputView?) {
     // no-op for now
   }
 

example/src/App.tsx

@@ -34,7 +34,7 @@ import {
   prepareImageDimensions,
 } from './utils/prepareImageDimensions';
 import type { OnChangeColorEvent } from '../../src/EnrichedTextInputNativeComponent';
-import ColorPreview from './components/ColorPreview';
+import { ColorPreview } from './components/ColorPreview';
 
 type StylesState = OnChangeStateEvent;
 
@@ -306,6 +306,10 @@ export default function App() {
     }
   };
 
+  const handleRemoveColor = () => {
+    ref.current?.removeColor();
+  };
+
   return (
     <>
       <ScrollView
@@ -357,6 +361,11 @@ export default function App() {
           onPress={openValueModal}
           style={styles.valueButton}
         />
+        <Button
+          title="Remove color"
+          onPress={handleRemoveColor}
+          style={styles.valueButton}
+        />
         <HtmlSection currentHtml={currentHtml} />
         {DEBUG_SCROLLABLE && <View style={styles.scrollPlaceholder} />}
         <ColorPreview color={selectionColor} />

example/src/components/ColorPreview.tsx

@@ -1,10 +1,11 @@
 import { StyleSheet, Text, View } from 'react-native';
+import { type FC } from 'react';
 
 type Props = {
   color: string;
 };
 
-const ColorPreview: React.FC<Props> = ({ color }) => {
+export const ColorPreview: FC<Props> = ({ color }) => {
   return (
     <>
       <View
@@ -28,5 +29,3 @@ const styles = StyleSheet.create({
     borderRadius: 20,
   },
 });
-
-export default ColorPreview;

example/src/components/Toolbar.tsx

@@ -152,7 +152,7 @@ export const Toolbar: FC<ToolbarProps> = ({
   };
 
   const handleColorButtonPress = (color: string) => {
-    editorRef?.current?.toggleColor(color);
+    editorRef?.current?.setColor(color);
   };
 
   const isActive = (item: Item) => {

ios/EnrichedTextInputView.mm

@@ -773,10 +773,13 @@ - (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args {
     [self toggleRegularStyle: [UnderlineStyle getStyleType]];
   } else if([commandName isEqualToString:@"toggleStrikeThrough"]) {
     [self toggleRegularStyle: [StrikethroughStyle getStyleType]];
-  } else if([commandName isEqualToString:@"toggleColor"]) {
+  } else if([commandName isEqualToString:@"setColor"]) {
     NSString *colorText = (NSString *)args[0];
     UIColor *color = [UIColor colorFromString: colorText];
-    [self toggleColorStyle: color];
+    [self setColor: color];
+  } else if ([commandName isEqualToString:@"removeColor"]) {
+    ColorStyle *colorStyle = stylesDict[@([ColorStyle getStyleType])];
+    [colorStyle removeAttributes: textView.selectedRange];
   } else if([commandName isEqualToString:@"toggleInlineCode"]) {
     [self toggleRegularStyle: [InlineCodeStyle getStyleType]];
   } else if([commandName isEqualToString:@"addLink"]) {
@@ -959,7 +962,7 @@ - (void)tryEmittingOnChangeHtmlEvent {
 
 // MARK: - Styles manipulation
 
-- (void)toggleColorStyle:(UIColor *)color {
+- (void)setColor:(UIColor *)color {
   ColorStyle *colorStyle = stylesDict[@(Colored)];
 
   [colorStyle applyStyle:textView.selectedRange color: color];

ios/inputParser/InputParser.mm

@@ -201,12 +201,15 @@ - (NSString *)parseToHtmlFromRange:(NSRange)range {
       NSMutableSet *fixedEndedStyles = [endedStyles mutableCopy];
       NSMutableSet *stylesToBeReAdded = [[NSMutableSet alloc] init];
 
-      for (NSNumber *style in endedStyles) {
+      for(NSNumber *style in endedStyles) {
         NSInteger styleBeginning = [currentActiveStylesBeginning[style] integerValue];
 
         for(NSNumber *activeStyle in currentActiveStyles) {
           NSInteger activeStyleBeginning = [currentActiveStylesBeginning[activeStyle] integerValue];
-          
+
+          // we end the styles that began after the currently ended style but not at the "i" (cause the old style ended at exactly "i-1"
+          // also the ones that began in the exact same place but are "inner" in relation to them due to StyleTypeEnum integer values
+
           if((activeStyleBeginning > styleBeginning && activeStyleBeginning < i) ||
              (activeStyleBeginning == styleBeginning && activeStyleBeginning < i && [activeStyle integerValue]  > [style integerValue])) {
             [fixedEndedStyles addObject:activeStyle];

ios/utils/ColorExtension.mm

@@ -53,7 +53,6 @@ + (UIColor *)colorFromString:(NSString *)string {
         @"grey": [UIColor grayColor],
         @"transparent": [UIColor clearColor],
         @"aliceblue": [UIColor colorWithRed:0.941 green:0.973 blue:1.0 alpha:1.0],
-        // Add additional CSS names here, e.g., "chartreuse": [UIColor colorWithRed:0.498 green:1.0 blue:0.0 alpha:1.0],
     };
 
     UIColor *namedColor = namedColors[input];
@@ -167,7 +166,7 @@ - (NSString *)hexString {
         b = components[2];
     } else {
         // Unsupported color space (e.g., pattern colors)
-        return @"#FFFFFF"; // Or return nil for better error handling
+        return @"#FFFFFF";
     }
 
     int red = (int)lroundf(r * 255.0f);

src/EnrichedTextInput.tsx

@@ -60,7 +60,8 @@ export interface EnrichedTextInputInstance extends NativeMethods {
     text: string,
     attributes?: Record<string, string>
   ) => void;
-  toggleColor: (color: string) => void;
+  setColor: (color: string) => void;
+  removeColor: () => void;
 }
 
 export interface OnChangeMentionEvent {
@@ -299,8 +300,11 @@ export const EnrichedTextInput = ({
 
       Commands.startMention(nullthrows(nativeRef.current), indicator);
     },
-    toggleColor: (color: string) => {
-      Commands.toggleColor(nullthrows(nativeRef.current), color);
+    setColor: (color: string) => {
+      Commands.setColor(nullthrows(nativeRef.current), color);
+    },
+    removeColor: () => {
+      Commands.removeColor(nullthrows(nativeRef.current));
     },
   }));
 

src/EnrichedTextInputNativeComponent.ts

@@ -209,10 +209,8 @@ interface NativeCommands {
     text: string,
     payload: string
   ) => void;
-  toggleColor: (
-    viewRef: React.ElementRef<ComponentType>,
-    color: string
-  ) => void;
+  setColor: (viewRef: React.ElementRef<ComponentType>, color: string) => void;
+  removeColor: (viewRef: React.ElementRef<ComponentType>) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
@@ -239,7 +237,8 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
     'addImage',
     'startMention',
     'addMention',
-    'toggleColor',
+    'setColor',
+    'removeColor',
   ],
 });
 

src/index.tsx

@@ -6,4 +6,5 @@ export type {
   OnLinkDetected,
   OnMentionDetected,
   OnChangeSelectionEvent,
+  OnChangeColorEvent,
 } from './EnrichedTextInputNativeComponent';