Merge pull request #366 from simbabque/310-markdown

Add Markdown for banner description and warning
bannergress · Apr 7, 2024 · 344cce3 · 344cce3
2 parents 584b9db + 65b6d48
commit 344cce3
Show file tree

Hide file tree

Showing 8 changed files with 1,180 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "react-intersection-observer": "^9.5.2",
     "react-leaflet": "^4.2.1",
     "react-leaflet-cluster": "^2.1.0",
+    "react-markdown": "^9.0.1",
     "react-redux": "~7.2.3",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",

diff --git a/src/components/banner-info-card/BannerInfoCard.tsx b/src/components/banner-info-card/BannerInfoCard.tsx
@@ -1,6 +1,7 @@
 import React, { FC, Fragment } from 'react'
 import _ from 'underscore'
 import { LatLng } from 'leaflet'
+import Markdown from 'react-markdown'
 import { Trans, useTranslation } from 'react-i18next'
 import { TFunction } from 'i18next'
 import { Tooltip } from 'antd'
@@ -399,11 +400,34 @@ const getStartPointButton = (banner: Banner, t: TFunction) => {
 
 const BannerInfoCard: FC<BannerInfoCardProps> = ({ banner }) => {
   const { t } = useTranslation()
+  const allowedElements = [
+    'p',
+    'br',
+    'b',
+    'strong',
+    'em',
+    'ul',
+    'ol',
+    'li',
+    'a',
+  ]
   return (
     <div className="banner-info-card">
       {getEvent(banner, t)}
-      {banner.warning && <p className="warning-text">{banner.warning}</p>}
-      {banner.description && <p>{banner.description}</p>}
+      {banner.warning && (
+        <Markdown
+          className={'warning-text'}
+          allowedElements={allowedElements}
+          unwrapDisallowed={true}
+        >
+          {banner.warning}
+        </Markdown>
+      )}
+      {banner.description && (
+        <Markdown allowedElements={allowedElements} unwrapDisallowed={true}>
+          {banner.description}
+        </Markdown>
+      )}
       <IfUserLoggedIn>{getCreatedBy(banner, t)}</IfUserLoggedIn>
       <IfUserLoggedOut>
         <p>

diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json
@@ -72,10 +72,10 @@
       "step3": {
         "title": "<0>3</0> Informationen",
         "bannerTitle": "Banner-Titel",
-        "description": "Beschreibung",
+        "description": "Beschreibung <icon />",
         "warning": {
-          "title": "Warnungstext",
-          "subtitle": "Wird in einer auffallenderen Farbe angezeigt"
+          "title": "Warnungstext <icon />",
+          "subtitle": "Wird in einer auffallenderen Farbe angezeigt. Markdown wird unterstützt."
         },
         "plannedOfflineDate": {
           "title": "Geplantes Offline-Datum",
@@ -91,6 +91,7 @@
         },
         "options": "Optionen",
         "help": {
+          "markdown": "<p>Dieses Feld unterstützt einfaches Markdown. Die folgenden Formattierungsoptionen sind möglich:</p><ul><li><b><code>**fett**</code></b></li><li><i><code>*kursiv*</code></i></li><li>Absätze</li><li><a href='#'>[Links](https://example.org)</a></li><li>Listen: <pre><code>- Listenelement\n- Listenelement</code></pre><pre><code>1. numerierte Liste\n2. numerierte Liste</code></pre></li></ul>",
           "banner": "<b>Banner:</b> Menge von Missionen, die in der richtigen Reihenfolge abgeschlossen werden muss, um ein Gesamtbild in deinem Scanner zu erzeugen.",
           "collection": "<b>Sammlung:</b> Menge von Missionen, die in einer beliebigen Reihenfolge abgeschlossen werden kann, weil sie kein Gesamtbild darstellen."
         },

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -72,10 +72,10 @@
       "step3": {
         "title": "<0>3</0> Information",
         "bannerTitle": "Banner Title",
-        "description": "Description",
+        "description": "Description <icon />",
         "warning": {
-          "title": "Warning Text",
-          "subtitle": "Displays in a more noticeable color"
+          "title": "Warning Text <icon />",
+          "subtitle": "Displays in a more noticeable color."
         },
         "plannedOfflineDate": {
           "title": "Planned Offline Date",
@@ -91,6 +91,7 @@
         },
         "options": "Options",
         "help": {
+          "markdown": "<p>You can use basic Markdown in this field. The following formatting options are supported:</p><ul><li><b><code>**bold**</code></b></li><li><i><code>*italic*</code></i></li><li>paragraphs</li><li><a href='#'>[hyperlinks](https://example.org)</a></li><li>lists: <pre><code>- list entry\n- list entry</code></pre><pre><code>1. ordered list\n2. ordered list</code></pre></li></ul>",
           "banner": "<b>Banner:</b> Collection of missions that must be completed in sequence to complete the picture in your profile.",
           "collection": "<b>Collection:</b> Collection of missions that can be completed in any order as they don't form a picture."
         },

diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
@@ -72,9 +72,14 @@
       "step3": {
         "title": "<0>3</0> Información",
         "bannerTitle": "Título",
-        "description": "Descripción",
+        "description": "Descripción <icon />",
+        "warning": {
+          "title": "Texto de advertencia <icon />",
+          "subtitle": "Se muestra en un color más fácil de notar."
+        },
         "options": "Opciones",
         "help": {
+          "markdown": "<p>Puedes usar Markdown básico en este campo. Las siguientes opciones de formato están disponibles:</p><ul><li><b><code>**negrita**</code></b></li><li><i><code>*itálica*</code></i></li><li><a href='#'>[enlaces](https://example.org)</a></li><li>párrafos</li><li>listas: <pre><code>- entrada de lista\n- entrada de lista</code></pre><pre><code>1. lista ordenada\n2. lista ordenada</code></pre></li></ul>",
           "banner": "<b>Banner:</b> Colección de misiones que se han de completar seguidas para formar una imagen completa en tu perfil.",
           "collection": "<b>Colección:</b> Colección de misiones que se pueden completar en cualquier orden."
         },

diff --git a/src/pages/create-banner/CreateBanner.tsx b/src/pages/create-banner/CreateBanner.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { withRouter, RouteComponentProps, Prompt } from 'react-router-dom'
 import { Beforeunload } from 'react-beforeunload'
-import { Input, InputNumber, Button } from 'antd'
+import { Input, InputNumber, Button, Tooltip } from 'antd'
 import { Helmet } from 'react-helmet'
 import _ from 'underscore'
 import Scrollbars from 'react-custom-scrollbars-2'
@@ -47,6 +47,7 @@ import { IssuesList } from '../../components/Issues-list'
 import LoginRequired from '../../components/login/login-required'
 import SVGRightArrow from '../../img/icons/right_arrow.svg?react'
 import SVGCross from '../../img/icons/cross.svg?react'
+import SVGHelp from '../../img/icons/help-round.svg?react'
 import { getBannerIssues, MAX_MISSIONS } from './getBannerIssues'
 
 import './create-banner.less'
@@ -775,6 +776,20 @@ class CreateBanner extends React.Component<
       bannerTitle,
       detectedLength
     )
+    const markdownHelp = (
+      <Trans
+        i18nKey="banners.creation.step3.help.markdown"
+        components={{
+          b: <b />,
+          code: <code />,
+          pre: <pre />,
+          p: <p />,
+          ul: <ul />,
+          li: <li />,
+          a: <a />,
+        }}
+      />
+    )
 
     return (
       <div className="create-banner">
@@ -953,11 +968,18 @@ class CreateBanner extends React.Component<
                   this.onInputChange(e.target.value, 'bannerTitle')
                 }
               />
-              <h3>
-                <Trans i18nKey="banners.creation.step3.description">
-                  Description
-                </Trans>
-              </h3>
+              <Tooltip placement="right" title={markdownHelp}>
+                <h3>
+                  <Trans
+                    i18nKey="banners.creation.step3.description"
+                    components={{
+                      icon: <SVGHelp />,
+                    }}
+                  >
+                    Description
+                  </Trans>
+                </h3>
+              </Tooltip>
               <Input.TextArea
                 placeholder={i18n?.t('placeholders.startTyping')}
                 value={bannerDescription}
@@ -971,14 +993,21 @@ class CreateBanner extends React.Component<
               />
               {isEdit && (
                 <>
-                  <h3>
-                    <Trans i18nKey="banners.creation.step3.warning.title">
-                      Warning Text
-                    </Trans>
-                  </h3>
+                  <Tooltip placement="right" title={markdownHelp}>
+                    <h3>
+                      <Trans
+                        i18nKey="banners.creation.step3.warning.title"
+                        components={{
+                          icon: <SVGHelp />,
+                        }}
+                      >
+                        Warning Text
+                      </Trans>
+                    </h3>
+                  </Tooltip>
                   <span className="subtitle">
                     <Trans i18nKey="banners.creation.step3.warning.subtitle">
-                      Displays in a more noticeable color
+                      Displays in a more noticeable color. Markdown supported.
                     </Trans>
                   </span>
                   <Input.TextArea

diff --git a/src/pages/create-banner/create-banner.less b/src/pages/create-banner/create-banner.less
@@ -40,6 +40,12 @@
 
     h3 {
       margin-top: 10px;
+
+      svg {
+        path {
+          fill: white;
+        }
+      }
     }
 
     &>div {