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

[Feature request] Attribute-based conditional mention styling (mentionStyleRules)

Abierto
  • ¿Algo no está bien?
#494 0 comentarios 1 reacción 0 asignados Ver en GitHub

Los mantenedores suelen responder en 3 días

@ramcav ya está trabajando en esto.

Desde el 19/3/2026.

  • #493 de @ramcav — abierto

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
25/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
objective-c, react-native, typescript
Área
mobile

Línea de trabajo

Revisa PR #493 y los cambios propuestos en JavaScript relacionados con HtmlStyle y normalizeHtmlStyle; después, inspecciona la implementación de iOS InputConfig y MentionStyle.mm descrita en la issue. Extiende el enfoque para Android y web, conservando el fallback basado en indicadores y el comportamiento de las reglas de first-match; el trabajo estará terminado cuando los atributos coincidentes seleccionen el estilo configurado en todas las implementaciones.

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

Descripción

enhancement

Problem

Currently, mention styling is determined entirely by the indicator character — all mentions with the same indicator share one style. There's no way to style individual mentions differently based on their state or metadata.

Use case: In our app, we use mentions for template variables (%custom_var% and {{mapping_var}}). Some variables are "pending" (not yet configured by the user) and need to be visually distinct — e.g., orange instead of blue — so users can see at a glance which variables need attention. Since both valid and pending variables share the same indicator, we can't differentiate them with the current API.

Proposed API

A new mentionStyleRules property on htmlStyle that allows declarative, attribute-based style overrides:

<EnrichedTextInput
  htmlStyle={{
    mention: {
      "@": { color: "blue", backgroundColor: "lightblue", textDecorationLine: "none" },
    },
    mentionStyleRules: [
      {
        match: { pending: "true" },
        style: { color: "orange", backgroundColor: "lightyellow", textDecorationLine: "none" },
      },
      {
        match: { type: "urgent", priority: "high" },
        style: { color: "red", backgroundColor: "pink", textDecorationLine: "underline" },
      },
    ],
  }}
  mentionIndicators={["@"]}
/>

When committing a mention with matching attributes:

ref.current?.setMention("@", "John", { pending: "true" });
// → renders with orange style instead of the default blue
How it works
  • Each rule has match (key-value pairs) and style (MentionStyleProperties)
  • match is checked against the mention's attributes (the third arg to setMention, which are already stored on both iOS and Android)
  • First matching rule wins; unmatched mentions fall back to indicator-based style
  • Fully declarative — no lambdas, serializable over the bridge
Why this design
  • No indicator hacking: We tried using separate indicator characters for different states, but indicators are tightly coupled to detection triggers and the native editor displays them as visible prefixes.
  • Composable: Multiple rules for different conditions, each with independent match criteria.
  • Backwards compatible: No rules = existing behavior. The attributes parameter of setMention is already supported but unused for styling.
  • No codegen changes: Rules are embedded in the existing mention dict (which is UnsafeMixed) and extracted on the native side.

Implementation

I have a working iOS implementation in PR #493. Happy to adjust the approach based on feedback. The Android and web implementations would follow the same pattern.

Summary of changes

JS: mentionStyleRules on HtmlStyle, processed in normalizeHtmlStyle (color conversion), embedded as __rules__ in the mention dict for native transport.

iOS native: InputConfig stores rules and exposes mentionStylePropsForIndicator:attributes: which deserializes the mention's JSON attributes and matches against rules. MentionStyle.mm uses the attribute-aware lookup.

Lenguaje dominante
C
Estrellas
1.4k
Forks
73
Merge medio
3 d 4 h
PR fusionados (30 d)
18

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.