Du BBCode dans React et React-Native

L'utilisation de différents styles de texte tels que le gras ou l'italique peut sembler élémentaire, mais c'est crucial pour apprécier un contenu.

Cela permet une compréhension rapide et la capacité à analyser les mots qui pèsent le plus dans votre récit. Plutôt courant, n'est-ce pas ?

Implémentation de base de React-Native

La gestion du style par le composant Text de React-Native se rapproche du web. Pour appliquer du style à des morceaux de texte, vous devez imbriquer des composants Text et définir le style pour chaque tronçon. Chaque composant Text hérite du style de ses composants parents.

Regardons comment reproduire en React-Native le texte suivant : “It is a tasty apple”

import React from "react";
import { Text, View } from "react-native";

const TextWithStyle = () => (
  <View>
    <Text>
      It is a <Text style={{ fontWeight: "bold" }}>tasty </Text>
      apple
    </Text>
  </View>
);

Cela semble assez intuitif, non ? Si cette solution vous convient, conservez-là. Privilégiez la clarté à toute autre solution inutilement complexe.

Le défi de l’internationalisation

Évidemment, la vie n'est pas toujours aussi simple, et il arrive que la première solution technique ne réponde pas parfaitement à vos besoins. Le premier problème rencontré avec cette approche est l'internationalisation (i18n). En effet, le placement des portions de texte mises en valeur dépend fortement de la langue de l'utilisateur, ce qui rend la maintenance du code impossible.

Reprenons notre exemple précédent, en anglais, français et japonais:

• en-US: “It is a tasty apple”

• fr-FR: “C’est une pomme délicieuse”

• ja-JP: “おいしいリンゴです”

Pour mettre en évidence l’adjectif, nous divisons la phrase en trois parties de texte.

Nous avons ainsi la traduction suivante :

// en-US
{
  "apple": {
    "part1": "It is a ",
    "part2_Emphasize": "tasty ",
    "part3": "apple",
  },
}
// fr-FR
{ 
  "apple": {
    "part1": "C'est une pomme ",
    "part2_Emphasize": "délicieuse",
    "part3": "",
  },
}
// ja-JP
{
  "apple": {
    "part1": "",
    "part2_Emphasize": "おいしい",
    "part3": "リンゴです",
  },
}

Et son composant texte associé :

import React from "react";
import { Text, View } from "react-native";

const TextWithStyle = () => (
  <View>
    <Text>
      <Text>{I18n.t("part1")}</Text>
      <Text style={{ fontWeight: "bold" }}>{I18n.t("part2_Emphasize")}</Text>
      <Text>{I18n.t("part3")}</Text>
    </Text>
  </View>
);

Observons les limites de ce choix :

• En découpant les phrases, les clés de traduction perdent leur sens.

• Votre fichier de traduction devient plus volumineux pour des détails d'implémentation.

• Certaines phrases ou langues pourraient complexifier d'autant plus la construction du texte.

• Erreurs possibles dans la gestion des espaces entre les portions de texte.

Le BBCode à la rescousse

Vous vous souvenez de l'époque des forums où les utilisateurs rédigeaient des messages formatés sans bagage technique ?

Les administrateurs de ces sites définissent un ensemble de balises, permettant à leurs utilisateurs de transformer leur texte brut en un contenu riche et formaté.

Nous avons voulu ramener cette simplicité. Pour mettre en gras, il suffit d'encadrer un mot avec la balise [b]. Ainsi, n'importe qui peut formater facilement et en toute sécurité son texte, sans connaissance technique.

En partant de cette approche, nous obtenons la traduction suivante :

// en-US
{
  "apple": "It is a [b]tasty[/b] apple"
}
// fr-FR
{ 
  "apple": "C'est une pomme [b]délicieuse[/b]"
}
// ja-JP
{
  "apple": "[b]おいしい[/b]リンゴです"
}

Nous avons développé notre librairie, nommée styled-tagged-text, qui met à disposition le composant StyledTaggedText. Avec une feuille de style StyleSheet, le composant génère autant de Text nécessaires pour obtenir un rendu formaté. Les clés de la feuille de style définissent le nom des balises, ce qui vous permet de définir votre propre composant RichText avec un ensemble de balises par défaut.

import { StyledTaggedText } from "@betomorrow/styled-tagged-text/native";
import React from "react";
import { StyleSheet, View } from "react-native";

const tagStyles = StyleSheet.create({
  b: {
    fontWeight: "bold",
  },
});

const TextWithStyles = () => {
  <View>
    <StyledTaggedText tagsStyle={tagStyles}>{I18n.t("apple")}</StyledTaggedText>
  </View>;
};

Styled-tagged-text

Le guide d’installation ainsi que deux exemples, web et mobile, sont disponibles dans le dépôt GitHub, ainsi qu’un CodeSandbox.

Minimaliste, cette librairie fonctionne sur les projets natifs et web. Elle gère également les balises imbriquées

Conclusion

Il est possible d'appliquer différents styles à plusieurs parties de votre texte, mais chaque langue présente ses propres défis en matière de formatage du contenu.

Avec styled-tagged-text, vous détenez une solution simple pour embellir votre texte, tout en conservant un format de traduction facile à maintenir.

• Plus besoin de découper les phrases, une lecture directe de votre fichier de traduction vous permet de distinguer les contenus stylisés.

• N'importe qui a la possibilité de modifier vos traductions et d'appliquer le formatage sans nécessiter une connaissance des détails d'implémentation.

• Disponible sur React-Native et React, vous pouvez partager le même format de traduction entre les plateformes.