Projet 38 - "POC champ de recherche enrichi avec CodeMirror et conceal"

Date de la création de cette note : 2026-07-19.

Projet terminé, résultat disponible dans ce repository : https://github.com/stephane-klein/svelte-codemirror-search-conceal-poc

Quel est l'objectif de ce projet ?

Créer un POC pour implémenter un champ de recherche avec filtre enrichi par le système de conceal. Deux librairies sont candidates : CodeMirror (déjà utilisé dans les Projet 1 et Projet 8) et ProseMirror. Je n'ai pas encore fait de choix définitif au moment de la rédaction de cette note — je vais commencer par explorer la piste CodeMirror (déjà maîtrisée via les Projets 1 et 8), puis évaluerai ProseMirror dans un second temps. L'objectif est de départager les deux sur le poids du code, la vitesse de rendu et la simplicité d'implémentation.

Ce champ sur une seule ligne, utilisé à la place d'un <input type="text"> classique, doit :

  • Afficher une autocomplétion de tags dès la saisie de # ou -
  • Utiliser le conceal pour basculer entre deux affichages : quand le curseur est suffisamment éloigné du tag (au-delà d'un seuil configurable en nombre de caractères), le tag est affiché sous forme de pastille. Quand le curseur s'approche en dessous de ce seuil, la pastille disparaît et laisse place au texte modifiable
  • Permettre à l'utilisateur de copier/coller l'intégralité du champ de recherche au format texte

Second groupe de fonctionnalités, optionnel et vraisemblablement plus difficile à implémenter :

  • Support des parenthèses et des mots-clés or / and. Par défaut, sans mot-clé, les termes sont combinés avec AND
  • Si l'utilisateur saisit (#tag1 and #tag2 and foo bar), alors la même logique de conceal s'applique : foo bar est affiché sous la forme "foo bar"
  • Si la parenthèse n'est pas fermée, afficher un message d'erreur et, si possible, surligner la parenthèse ouvrante orpheline

Questions ouvertes :

  • Est-il utile d'ajouter un élément UI de suppression sur les pastilles de tag ?
  • ProseMirror apportera-t-il un bénéfice suffisant par rapport à CodeMirror pour justifier son exploration ? Je commence par CodeMirror et je jugerai ensuite

Pourquoi je souhaite réaliser ce projet ?

J'ai toujours eu une mauvaise expérience avec les champs de filtre / recherche de GitLab ou Linear.

Quand j'ai terminé en juillet 2024 le Projet 8 - "CodeMirror, conceal, Svelte", l'idée m'est venue d'essayer de créer un composant de champ recherche qui offrirait une meilleure expérience utilisateur en mettant en œuvre le système de conceal.

Ce projet s'inscrit dans la continuité des réflexions de Projet GH-360 (fuzzy search en PostgreSQL) et Projet GH-382 (conversion de filtres tags en SQL). Je compte l'utiliser dans le cadre du Projet 36 (toggl-pg-mirror).

Note de contexte : LLM et filtres

#JeMeDemande si l'essor des LLMs — capables de générer du SQL à partir de prose humaine sans formalisme — ne rend pas ce langage de filtre structuré obsolète. Mon intuition : les deux approches sont complémentaires. Le champ de saisie avec autocomplétion de tags offre une UI réactive et un contrôle fin à l'utilisateur, tandis qu'un LLM peut traduire l'expression filtrée en requête SQL en backend. On peut utiliser les deux en même temps.

Repository de ce projet :

https://github.com/stephane-klein/svelte-codemirror-search-conceal-poc

Ressources :

Quitter le mode Zen