Implement the show message event command

[Aelysya]

Description

This PR adds the Show Message event command to the Event editor.

closes #588

Note before testing

Remove any existing event from your project to avoid issues with CSV creation.

Tests to perform

• The project loads correctly.
• A CSV file is created when an event is created, the name of the csv is correct in the event's json file.
• Modifying the fields of the node from the canva works.
• The Translate buttons work from the node.
• Double clicking on the node opens the editor.
• Modifying fields in the editor works.
• There is no overlap with the narrator and message fields between the node and the editor, modifying one correctly replicates to the other.
• Any modification made and save are correctly replicated in the event's json file.
• Text IDs do not conflict when creating/deleting message nodes.
• The style is following Figma.

[AerunDev]

Salut ! 😄 Merci énormément pour le boulot et la réactivité sur les correctifs.

Je me permets une nouvelle passe de tests et de retours pour qu'on soit carrés sur cette commande pour les suivantes.

1. Dans l'éditeur des "Portraits", il n'y a pas de bouton "X" en haut à droite pour fermer l'éditeur, contrairement aux autres éditeurs secondaires comme la traduction.
2. Lorsqu'on clique sur le color picker afin de sélectionner une couleur pour le nom du narrateur, le champ n'est pas mis à jour à chaque clic, contrairement au color picker disponible pour la couleur d'animation d'une Pokéball. C'est assez perturbant parce qu'on a l'impression que ce n'est pas pris en compte. Ça l'est, mais seulement au clic en dehors.

[Palbolsky]

J'ai ajouté le bouton X dans l'éditeur des Portraits. Au passage j'ai ajouté la logique pour tous les éditeurs (sauf pour les éditeurs utilisant la pagination), on aura peut-être d'autre cas où ça servira.

[Walven]

Fonctionnellement, c'est top !

Node

• Est-ce qu'on ne devrait pas avoir une scrollbar lorsque le textarea est réduit manuellement avec un texte long ?

Editeur

• Fermer par défaut les catégories Boîte de message et Options supplémentaires
• Trop de padding sur l'éditeur des Portraits
• Même chose pour la traduction du message

Évidemment, je vais aussi vous parler de design :b

Node Design

• L'intégration des champs n'est pas bonne. Chaque bloc Label + Input doit être dans son propre container avec un padding de 6px. C'est important pour les autres types qu'on aura plus tard.
• Ils sont dans un body avec un padding left, right, bottom de 4px (d'où le total de 10px que vous avez actuellement). Il n'y a pas de padding top.
• Le gap entre deux blocs d'input est de 0, l'espacement se fait par les paddings des blocs.
• Petit hack, il faudrait faire chevaucher de 6px le body et le header (un margin-top négatif ?) pour là aussi le hover qu'on aura dans d'autres instructions
• Le problème du liseré de couleur qui apparaît trop clair à cause de la bordure qui passe au dessus, pour vous en rendre compte la couleur devrait apparaître exactement la même que le ring lorsque la node est sélectionnée.

Des soucis similaires au niveau de la bibliothèque d'instructions mais c'est pas le sujet du jour

[Palbolsky]

L'éditeur des portraits est volontairement plus large pour que ça soit plus beau car l'éditeur de base des messages est plus large (il reste afficher en dessous). Pour l'éditeur de traduction, si tu parles de la partie de gauche qui est trop importante, c'est simplement parce que tu vois l'éditeur qui est en dessous (c'est comme ça depuis des années).

[Palbolsky]

J'ai corrigé le design des nodes et fermé par défaut les catégories Boîte de message et Options supplémentaires.
Pour la scrollbar dans le textarea, si elle est ajoutée elle va entrer en conflit avec le zoom / dézoom de reactflow en utilisant la molette ^^'