Skip to content

fix: clean Word inline styles when pasting into rich editor#73

Open
mindcraft-research wants to merge 1 commit into
mainfrom
fix-rich-editor-clean-word-paste
Open

fix: clean Word inline styles when pasting into rich editor#73
mindcraft-research wants to merge 1 commit into
mainfrom
fix-rich-editor-clean-word-paste

Conversation

@mindcraft-research

Copy link
Copy Markdown
Owner

Summary

Quand l'utilisateur·rice colle du contenu depuis Word (ou Google Docs / Excel / etc.) dans l'éditeur riche, les balises inline (``, ``, ``...) reçoivent des inline-styles parasites (`color`, `font-family`, `font-size`...) qui écrasent ensuite les couleurs définies au niveau des titres via le bouton « couleur » de l'éditeur.

Exemple typique signalé : on colle un titre depuis Word, puis on tente de le passer en bleu via la toolbar. Visuellement le titre reste noir parce que le `` hérité de Word gagne sur le `` ajouté par l'éditeur.

Fix

Intercepter le coller via `editorProps.transformPastedHTML` de TipTap :

  1. Parser le HTML collé
  2. Retirer les inline-styles parasites (`color`, `background`, `font-family`, `font-size`, `font-weight`) sur les balises inline (`strong, b, em, i, u, span`)
  3. Nettoyer les classes Word « MsoXxx »
  4. Retirer les balises Office (`<o:p>`, `<w:WordDocument>`)

Le formatage utile (gras, italique, souligné, listes, alignement, titres) reste préservé.

Test plan

  • Copier un titre coloré depuis Word et le coller dans un Texte/HTML MindCraft
  • Mettre le curseur sur le titre, cliquer sur « couleur » dans la toolbar, choisir bleu
  • Sauvegarder → le titre s'affiche bien en bleu en prévisualisation

🤖 Generated with Claude Code

Quand l'utilisateur·rice colle du contenu depuis Word (ou Google Docs,
Excel...), les balises inline reçoivent des inline-styles parasites
(color, font-family, font-size...) qui écrasent ensuite les couleurs
définies au niveau des titres via le bouton « couleur » de l'éditeur.

Exemple typique signalé : on colle un titre depuis Word, puis on tente
de le passer en bleu via la toolbar. Visuellement le titre reste noir
parce que le <strong style="color:black"> hérité de Word gagne sur le
<span style="color:blue"> ajouté par l'éditeur.

Fix : intercepter le coller via editorProps.transformPastedHTML, parser
le contenu, retirer les inline-styles color / background / font-family /
font-size / font-weight des balises inline (strong, b, em, i, u, span).
On nettoie aussi les classes Word « MsoXxx » et les balises Office
(<o:p>, <w:WordDocument>).

Le formatage utile (gras, italique, souligné, listes, alignement,
titres) reste préservé.

Bug signalé par MaximeVIALA dans le feedback #cmp2cj1ok (qui avait
identifié la cause lui-même).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant