feat: add paragraphSpacing to checkbox list (iOS + Android)

android/src/main/java/com/swmansion/enriched/common/EnrichedStyle.kt

@@ -38,6 +38,7 @@ interface EnrichedStyle {
   val ulCheckboxGapWidth: Int
   val ulCheckboxMarginLeft: Int
   val ulCheckboxBoxColor: Int
+  val ulCheckboxParagraphSpacing: Int
 
   // Links
   val aColor: Int

android/src/main/java/com/swmansion/enriched/common/spans/EnrichedCheckboxListSpan.kt

@@ -56,6 +56,15 @@ open class EnrichedCheckboxListSpan(
       fm.top -= halfExtra
       fm.bottom += (extraSpace - halfExtra)
     }
+
+    // Add paragraph spacing after the last line of this span's paragraph
+    val paragraphSpacing = enrichedStyle.ulCheckboxParagraphSpacing
+    if (paragraphSpacing > 0 && end > 0 && end <= text.length &&
+      (text[end - 1] == '\n' || end == text.length)
+    ) {
+      fm.descent += paragraphSpacing
+      fm.bottom = maxOf(fm.bottom, fm.descent)
+    }
   }
 
   override fun getLeadingMargin(first: Boolean): Int =

android/src/main/java/com/swmansion/enriched/textinput/styles/HtmlStyle.kt

@@ -58,6 +58,7 @@ class HtmlStyle : EnrichedStyle {
   override var ulCheckboxGapWidth: Int = 16
   override var ulCheckboxMarginLeft: Int = 24
   override var ulCheckboxBoxColor: Int = Color.BLACK
+  override var ulCheckboxParagraphSpacing: Int = 0
 
   override var aColor: Int = Color.BLACK
   override var aUnderline: Boolean = true
@@ -130,6 +131,7 @@ class HtmlStyle : EnrichedStyle {
     ulCheckboxGapWidth = parseFloat(ulCheckboxStyle, "gapWidth").toInt()
     ulCheckboxMarginLeft = parseFloat(ulCheckboxStyle, "marginLeft").toInt()
     ulCheckboxBoxColor = parseColor(ulCheckboxStyle, "boxColor")
+    ulCheckboxParagraphSpacing = parseFloat(ulCheckboxStyle, "paragraphSpacing").toInt()
 
     val aStyle = style.getMap("a")
     aColor = parseColor(aStyle, "color")
@@ -307,6 +309,7 @@ class HtmlStyle : EnrichedStyle {
       ulCheckboxGapWidth == other.ulCheckboxGapWidth &&
       ulCheckboxMarginLeft == other.ulCheckboxMarginLeft &&
       ulCheckboxBoxColor == other.ulCheckboxBoxColor &&
+      ulCheckboxParagraphSpacing == other.ulCheckboxParagraphSpacing &&
 
       aColor == other.aColor &&
       aUnderline == other.aUnderline &&
@@ -354,6 +357,7 @@ class HtmlStyle : EnrichedStyle {
     result = 31 * result + ulCheckboxGapWidth.hashCode()
     result = 31 * result + ulCheckboxMarginLeft.hashCode()
     result = 31 * result + ulCheckboxBoxColor.hashCode()
+    result = 31 * result + ulCheckboxParagraphSpacing.hashCode()
 
     result = 31 * result + aColor.hashCode()
     result = 31 * result + aUnderline.hashCode()

ios/EnrichedTextInputView.mm

@@ -652,6 +652,12 @@ - (void)updateProps:(Props::Shared const &)props
     }
   }
 
+  if (newViewProps.htmlStyle.ulCheckbox.paragraphSpacing !=
+      oldViewProps.htmlStyle.ulCheckbox.paragraphSpacing) {
+    [newConfig setCheckboxListParagraphSpacing:newViewProps.htmlStyle.ulCheckbox.paragraphSpacing];
+    stylePropChanged = YES;
+  }
+
   if (newViewProps.htmlStyle.a.textDecorationLine !=
       oldViewProps.htmlStyle.a.textDecorationLine) {
     NSString *objcString =

ios/config/InputConfig.h

@@ -99,6 +99,8 @@
 - (void)setCheckboxListMarginLeft:(CGFloat)newValue;
 - (UIColor *)checkboxListBoxColor;
 - (void)setCheckboxListBoxColor:(UIColor *)newValue;
+- (CGFloat)checkboxListParagraphSpacing;
+- (void)setCheckboxListParagraphSpacing:(CGFloat)newValue;
 - (UIImage *)checkboxCheckedImage;
 - (UIImage *)checkboxUncheckedImage;
 @end

ios/config/InputConfig.mm

@@ -52,6 +52,7 @@ @implementation InputConfig {
   CGFloat _checkboxListGapWidth;
   CGFloat _checkboxListMarginLeft;
   UIColor *_checkboxListBoxColor;
+  CGFloat _checkboxListParagraphSpacing;
   UIImage *_checkboxCheckedImage;
   UIImage *_checkboxUncheckedImage;
 }
@@ -113,6 +114,7 @@ - (id)copyWithZone:(NSZone *)zone {
   copy->_checkboxListGapWidth = _checkboxListGapWidth;
   copy->_checkboxListMarginLeft = _checkboxListMarginLeft;
   copy->_checkboxListBoxColor = [_checkboxListBoxColor copy];
+  copy->_checkboxListParagraphSpacing = _checkboxListParagraphSpacing;
   copy->_checkboxCheckedImage = _checkboxCheckedImage;
   copy->_checkboxUncheckedImage = _checkboxUncheckedImage;
   return copy;
@@ -596,6 +598,14 @@ - (void)setCheckboxListBoxColor:(UIColor *)newValue {
   }
 }
 
+- (CGFloat)checkboxListParagraphSpacing {
+  return _checkboxListParagraphSpacing;
+}
+
+- (void)setCheckboxListParagraphSpacing:(CGFloat)newValue {
+  _checkboxListParagraphSpacing = newValue;
+}
+
 - (UIImage *)checkboxCheckedImage {
   if (!_checkboxCheckedImage) {
     _checkboxCheckedImage = [self generateCheckboxImage:YES];

ios/styles/CheckboxListStyle.mm

@@ -81,6 +81,7 @@ - (void)removeAttributes:(NSRange)range {
                   pStyle.textLists = @[];
                   pStyle.headIndent = 0;
                   pStyle.firstLineHeadIndent = 0;
+                  pStyle.paragraphSpacing = 0;
                   [_input->textView.textStorage
                       addAttribute:NSParagraphStyleAttributeName
                              value:pStyle
@@ -98,6 +99,7 @@ - (void)removeAttributes:(NSRange)range {
   pStyle.textLists = @[];
   pStyle.headIndent = 0;
   pStyle.firstLineHeadIndent = 0;
+  pStyle.paragraphSpacing = 0;
   typingAttrs[NSParagraphStyleAttributeName] = pStyle;
   _input->textView.typingAttributes = typingAttrs;
 }
@@ -220,6 +222,7 @@ - (void)addAttributesWithCheckedValue:(BOOL)checked
                   pStyle.textLists = @[ checkboxMarker ];
                   pStyle.headIndent = [self getHeadIndent];
                   pStyle.firstLineHeadIndent = [self getHeadIndent];
+                  pStyle.paragraphSpacing = [_input->config checkboxListParagraphSpacing];
                   [_input->textView.textStorage
                       addAttribute:NSParagraphStyleAttributeName
                              value:pStyle
@@ -249,6 +252,7 @@ - (void)addAttributesWithCheckedValue:(BOOL)checked
     pStyle.textLists = @[ checkboxMarker ];
     pStyle.headIndent = [self getHeadIndent];
     pStyle.firstLineHeadIndent = [self getHeadIndent];
+    pStyle.paragraphSpacing = [_input->config checkboxListParagraphSpacing];
     typingAttrs[NSParagraphStyleAttributeName] = pStyle;
     _input->textView.typingAttributes = typingAttrs;
   }

src/spec/EnrichedTextInputNativeComponent.ts

@@ -342,6 +342,7 @@ export interface HtmlStyleInternal {
     boxSize?: Float;
     marginLeft?: Float;
     boxColor?: ColorValue;
+    paragraphSpacing?: Float;
   };
 }
 

src/types.ts

@@ -55,5 +55,6 @@ export interface HtmlStyle {
     gapWidth?: number;
     marginLeft?: number;
     boxColor?: ColorValue;
+    paragraphSpacing?: number;
   };
 }

src/utils/normalizeHtmlStyle.ts

@@ -68,6 +68,7 @@ const defaultStyle: Required<HtmlStyle> = {
     gapWidth: 16,
     marginLeft: 16,
     boxColor: 'blue',
+    paragraphSpacing: 0,
   },
 };