Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[iOS] Checkbox checked state lost/misplaced after an inline image

Abierto
  • ¿Algo no está bien?
#819 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 5 días

@henrikra ya está trabajando en esto.

Desde el 17/10/2026.

  • #820 de @henrikra — abierto

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
objective-c, react-native
Área
backend, mobile

Línea de trabajo

Read ios/htmlParser/HtmlParser.mm, especially the checkbox state recording near line 477, list range adjustment near line 172, and prepareCheckboxListStyleValue. Compare how link ranges compensate for image offsets near line 759. Reproduce with the supplied HTML containing an image before checkbox lists; done means all checkbox states and list boundaries remain correct after loading and after toggling one item.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

bug
Before submitting a new issue
  • I tested using the latest version of the library, as the bug might be already fixed. (1.1.1, the latest release; the code below is unchanged on main @ 0d015a7b1d)
  • I tested using a supported version of react native.
  • I checked for possible duplicate issues, with possible answers.
Bug summary

On iOS, when HTML contains an inline image (<img>) before checkbox lists, the checked state of the checkbox items after the image is applied to the wrong positions. Many items load unchecked, and some states land on a neighbouring item. Because the editor then emits HTML from this wrong state, the next edit anywhere in the document (even toggling one unrelated checkbox) saves the lost states. Checked items are silently unchecked.

Cause (from reading ios/htmlParser/HtmlParser.mm):

  • When an <li> opens inside a checkbox list, its state is recorded at checkboxStates[@(plainText.length)] (line ~477). plainText does not contain the image placeholder characters.
  • The <ul> tag range is shifted by +openImageCount (line ~172) to match the final NSTextStorage, which does contain one placeholder per image.
  • prepareCheckboxListStyleValue then filters checkboxStates by that shifted range. So with N preceding images, every key is N positions too low. The first item of each list falls outside its list's range and is dropped, and the remaining states end up on the item before them.
  • Links already compensate for this (adjustedRange.location - secondPassImageCount, line ~759), but checkbox states don't.

Suggested fix: record the state at plainText.length + precedingImageCount, or shift the keys by the same image offset when building the style value.

Library version

1.1.1

Environment info
react-native 0.86.2
expo 57.0.14 (dev client, new architecture)
react 19.2.3
iOS Simulator 18.6 (iPhone 16 Pro); also seen on a physical iPhone running iOS 26
Steps to reproduce
  1. On iOS, render an EnrichedTextInput with this defaultValue. All five items are checked: 
    <html>
<ul data-type="checkbox">
<li checked>A</li>
</ul>
<p><img src="https://placehold.co/200x120.png" width="200" height="120"/></p>
<ul data-type="checkbox">
<li checked>B</li>
</ul>
<p>text</p>
<ul data-type="checkbox">
<li checked>C</li>
</ul>
<ul data-type="checkbox">
<li checked>D</li>
<li checked>E</li>
</ul>
</html>
  2. Observed: A and D are checked; B, C and E are unchecked. Expected: A–E all checked.
  3. Tap A's checkbox to uncheck it. Observed in onChangeHtml: only D remains checked; B, C and E lost their state. Also, C's list was merged into the D/E list. Expected: B–E still checked.
  4. The same HTML without the <img> paragraph loads all five as checked. Android and web render it correctly.
Reproducible example repository

No standalone repo yet. The steps above use the stock component only, with no app code involved.

Lenguaje dominante
C
Estrellas
1.4k
Forks
69
Merge medio
9 d 3 h
PR fusionados (30 d)
7

Preparar el entorno

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de software-mansion/react-native-enriched-html

Todos los issues de software-mansion/react-native-enriched-html

Issues similares

Más issues de C

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.