{"id":5960,"date":"2024-09-28T09:24:24","date_gmt":"2024-09-28T09:24:24","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/detecter-changements-texte-markdown-react\/"},"modified":"2024-09-28T09:24:28","modified_gmt":"2024-09-28T09:24:28","slug":"detecter-changements-texte-markdown-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/detecter-changements-texte-markdown-react\/","title":{"rendered":"6.4 D\u00e9tecter les Changements de Texte dans Markdown React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>D\u00e9tecter les Changements de Texte dans Markdown React<\/strong> est une comp\u00e9tence essentielle pour les d\u00e9veloppeurs travaillant avec des applications React bas\u00e9es sur Markdown. Comprendre comment mettre en place une d\u00e9tection efficace des changements de texte peut am\u00e9liorer la r\u00e9activit\u00e9 et la fluidit\u00e9 de votre application. Apprenons comment cela fonctionne et comment l&rsquo;impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>D\u00e9tection des Changements de Texte dans Markdown React<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706080421?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Dans une application Markdown bas\u00e9e sur React, la n\u00e9cessiter de d\u00e9tecter les changements de texte est courante. Que ce soit pour <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\" target=\"_blank\" rel=\"noopener\">pr\u00e9visualiser les modifications en temps r\u00e9el<\/a>, sauvegarder automatiquement les brouillons, ou d\u00e9clencher des actions sp\u00e9cifiques, savoir comment d\u00e9tecter et r\u00e9agir aux changements de texte est crucial.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer un \u00c9diteur Markdown en React<\/h3>\n\n\n\n<p>Pour commencer, nous devons configurer un \u00e9diteur Markdown. Nous utiliserons `react-markdown` pour rendre le markdown et un simple `textarea` pour saisir le texte. Voici comment proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\nimport ReactMarkdown from 'react-markdown';\n\nfunction MarkdownEditor() {\n  const [markdown, setMarkdown] = useState('');\n\n  const handleChange = (event) => {\n    setMarkdown(event.target.value);\n  };\n\n  return (\n    <div>\n      <textarea onChange={handleChange} value={markdown} rows=\"10\" cols=\"50\" \/>\n      <ReactMarkdown>{markdown}<\/ReactMarkdown>\n    <\/div>\n  );\n}\n\nexport default MarkdownEditor;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9tecter les Changements de Texte<\/h3>\n\n\n\n<p>La d\u00e9tection des changements de texte se fait essentiellement en attachant un gestionnaire d&rsquo;\u00e9v\u00e9nements au <code>textarea<\/code>. Dans notre cas, il s&rsquo;agit de la fonction <code>handleChange<\/code> qui met \u00e0 jour l&rsquo;\u00e9tat <code>markdown<\/code> \u00e0 chaque modification de la valeur du <code>textarea<\/code>.\n<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const handleChange = (event) => {\n  setMarkdown(event.target.value);\n  console.log('Le texte a chang\u00e9 : ', event.target.value);\n};\n<\/code><\/pre>\n\n\n\n<p>Avec cette mise en place, chaque fois que le contenu du <code>textarea<\/code> change, la console loggera la nouvelle valeur. Toutefois, pour des applications plus avanc\u00e9es, vous souhaitez probablement effectuer d&rsquo;autres actions, comme la <a href=\"https:\/\/wikiform.fr\/codespace\/sauvegarder-donnees-react\" target=\"_blank\" rel=\"noopener\">sauvegarde automatique<\/a> ou la validation du texte.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Impl\u00e9menter la Sauvegarde Automatique<\/h3>\n\n\n\n<p>La sauvegarde automatique peut s&rsquo;av\u00e9rer tr\u00e8s utile pour \u00e9viter la perte de donn\u00e9es. Vous pouvez impl\u00e9menter une sauvegarde automatique en invoquant une fonction de sauvegarde chaque fois que le texte change.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState, useEffect } from 'react';\n\nfunction MarkdownEditor() {\n  const [markdown, setMarkdown] = useState('');\n\n  useEffect(() => {\n    const timerId = setTimeout(() => {\n      saveDraft(markdown);\n    }, 1000);\n\n    return () => clearTimeout(timerId);\n  }, [markdown]);\n\n  const handleChange = (event) => {\n    setMarkdown(event.target.value);\n  };\n\n  const saveDraft = (text) => {\n    console.log(\"Brouillon sauvegard\u00e9 :\", text);\n    \/\/ Vous pouvez appeler vos m\u00e9thodes d'API pour enregistrer ici\n  };\n\n  return (\n    <div>\n      <textarea onChange={handleChange} value={markdown} rows=\"10\" cols=\"50\" \/>\n      <ReactMarkdown>{markdown}<\/ReactMarkdown>\n    <\/div>\n  );\n}\n\nexport default MarkdownEditor;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Pr\u00e9visualisation en Temps R\u00e9el<\/h3>\n\n\n\n<p>Pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur, la pr\u00e9visualisation en temps r\u00e9el est une fonctionnalit\u00e9 souhaitable. <a href=\"https:\/\/wikiform.fr\/codespace\/afficher-modifications-react\" target=\"_blank\" rel=\"noopener\">Notre \u00e9diteur de markdown<\/a> actuel affiche d\u00e9j\u00e0 une pr\u00e9visualisation en temps r\u00e9el \u00e0 c\u00f4t\u00e9 du <code>textarea<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation d&rsquo;Observateurs pour Validation Dynamique<\/h3>\n\n\n\n<p>Pour valider dynamiquement le texte saisi, vous pouvez ajouter des validations conditionnelles dans la fonction <code>handleChange<\/code> ou utiliser des observateurs comme dans les exemples Tkinter pr\u00e9c\u00e9dents.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const handleChange = (event) => {\n  const text = event.target.value;\n  setMarkdown(text);\n\n  if (!isValidMarkdown(text)) {\n    console.warn(\"Le texte contient des erreurs de Markdown.\");\n  } else {\n    console.log(\"Le texte est valide.\");\n  }\n};\n\nconst isValidMarkdown = (text) => {\n  \/\/ Impl\u00e9menter la logique de validation du Markdown ici\n  return true; \n};\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Synchroniser avec un Backend<\/h3>\n\n\n\n<p>Dans une application r\u00e9elle, vous pourriez vouloir synchroniser les changements de texte avec un backend pour stocker ou analyser les donn\u00e9es. Vous pouvez utiliser <code>fetch<\/code> ou <code>axios<\/code> pour effectuer ces requ\u00eates.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import axios from 'axios';\n\nconst saveDraft = async (text) => {\n  try {\n    const response = await axios.post('\/api\/saveDraft', { content: text });\n    console.log('Brouillon enregistr\u00e9 avec succ\u00e8s : ', response.data);\n  } catch (error) {\n    console.error('Erreur lors de la sauvegarde du brouillon : ', error);\n  }\n};\n\n\/\/ Cette m\u00e9thode serait utilis\u00e9e de la m\u00eame mani\u00e8re qu'auparavant dans useEffect\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Examples Avanc\u00e9s et Cas d&rsquo;Utilisation<\/h3>\n\n\n\n<p>Pour mieux illustrer ces concepts, voici quelques exemples avanc\u00e9s :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Synchronisation de Widgets Multiples<\/h4>\n\n\n\n<p>Vous pouvez synchroniser plusieurs champs de saisie ou autres composants avec le texte modifi\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction MultiInputEditor() {\n  const [markdown, setMarkdown] = useState('');\n  const [title, setTitle] = useState('');\n\n  const handleMarkdownChange = (event) => {\n    setMarkdown(event.target.value);\n  };\n\n  const handleTitleChange = (event) => {\n    setTitle(event.target.value);\n  };\n\n  return (\n    <div>\n      <input type=\"text\" value={title} onChange={handleTitleChange} placeholder=\"Titre\" \/>\n      <textarea onChange={handleMarkdownChange} value={markdown} rows=\"10\" cols=\"50\" \/>\n      <h1>{title}<\/h1>\n      <ReactMarkdown>{markdown}<\/ReactMarkdown>\n    <\/div>\n  );\n}\n\nexport default MultiInputEditor;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation dans une Application Compl\u00e8te<\/h4>\n\n\n\n<p>Imaginez une application de blog o\u00f9 la d\u00e9tection des changements permet de <a href=\"https:\/\/example.com\" target=\"_blank\" rel=\"noopener\">pr\u00e9visualiser le contenu live avant de le publier<\/a> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\nimport ReactMarkdown from 'react-markdown';\n\nfunction BlogEditor() {\n  const [markdown, setMarkdown] = useState('');\n  const [isSaved, setIsSaved] = useState(false);\n\n  const handleChange = (event) => {\n    setMarkdown(event.target.value);\n    setIsSaved(false);\n  };\n\n  const handleSave = () => {\n    \/\/ M\u00e9thode pour sauvegarder le contenu (appel API par ex)\n    setIsSaved(true);\n  };\n\n  return (\n    <div>\n      <textarea onChange={handleChange} value={markdown} rows=\"10\" cols=\"50\" \/>\n      <button onClick={handleSave}>Sauvegarder<\/button>\n      {isSaved && <p>Brouillon sauvegard\u00e9 !<\/p>}\n      <ReactMarkdown>{markdown}<\/ReactMarkdown>\n    <\/div>\n  );\n}\n\nexport default BlogEditor;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion : Changements Texte Markdown React<\/h3>\n\n\n\n<p>La d\u00e9tection des changements de texte dans une application Markdown React permet d\u2019am\u00e9liorer consid\u00e9rablement l\u2019exp\u00e9rience utilisateur en fournissant des fonctionnalit\u00e9s comme la pr\u00e9visualisation en temps r\u00e9el, la sauvegarde automatique, et la validation dynamique. Continuez \u00e0 explorer et exp\u00e9rimenter ces techniques pour tirer le meilleur parti de React et Markdown ensemble.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/r%C3%A9act-et-markdown\/154\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-react-markdown-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation React Markdown Offre 50%\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Redux et React Offre 50%\" title=\"\"><\/a>\n\n\n\n<p>Pour en savoir plus sur la cr\u00e9ation de votre premi\u00e8re application React, <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">cliquez ici<\/a>. Vous pouvez \u00e9galement d\u00e9couvrir les extensions indispensables pour d\u00e9velopper avec React dans cet <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\" target=\"_blank\" rel=\"noopener\">article sur les extensions React<\/a>. Enfin, pour ma\u00eetriser les concepts avanc\u00e9s comme les composants, explorez notre guide sur","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html D\u00e9tecter les Changements de Texte dans Markdown React est une comp\u00e9tence essentielle pour les d\u00e9veloppeurs travaillant avec des applications React bas\u00e9es sur Markdown. Comprendre&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3201,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5960","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5960"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5960\/revisions"}],"predecessor-version":[{"id":5961,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5960\/revisions\/5961"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3201"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}