Typograph texts

client/components/Articles/Article/Article.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import classNames from 'classnames/bind';
-import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
+import md from 'markdown-it';
 import { ArticleProps } from './Article.types';
 import Link from 'next/link';
 
 import styles from './Article.module.css';
+import t from 'utils/typograph';
 
 const cn = classNames.bind(styles);
 
@@ -20,9 +21,10 @@ export function Article({ title, description }: ArticleProps) {
                 {title}
             </h1>
 
-            <ReactMarkdown className={cn(styles.ArticleContent)}>
-                {description}
-            </ReactMarkdown>
+            <div
+                className={cn(styles.ArticleContent)}
+                dangerouslySetInnerHTML={{ __html: t(md().render(description)) }}
+            />
         </article>
     )
 }

client/components/MainPage/Card/Card.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames/bind';
 import { CardProps } from './Card.types';
 
 import styles from './Card.module.css';
+import t from 'utils/typograph';
 
 const cn = classNames.bind(styles);
 
@@ -41,11 +42,11 @@ export function Card({
             } as React.CSSProperties}
         >
             {title && <div className={cn(styles.CardTitle, { [styles.CardTitle_Bg]: Boolean(titleBackground) })}>
-                {title}
+                {t(title)}
             </div>}
 
             {subtitle && <div className={cn(styles.CardSubtitle)}>
-                {subtitle}
+                {t(subtitle)}
             </div>}
 
             {button && <div className={cn(styles.CardButton)}>

client/package.json

@@ -13,12 +13,13 @@
     "ekb": "^1.1.3",
     "leaflet": "^1.9.2",
     "lodash": "^4.17.21",
+    "markdown-it": "^13.0.1",
     "prop-types": "^15.8.1",
     "react-leaflet": "4.1.0",
-    "react-markdown": "^8.0.5",
     "react-redux": "^8.0.7",
     "redux": "^4.2.1",
-    "transport-common": "workspace:*"
+    "transport-common": "workspace:*",
+    "typograf": "^7.1.0"
   },
   "devDependencies": {
     "@svgr/webpack": "^6.5.1",

client/utils/typograph.ts

@@ -0,0 +1,34 @@
+import Typograf from 'typograf';
+
+const tp = new Typograf({
+    locale: ['ru', 'en-US'],
+});
+
+const tpForAsideMenu = new Typograf({
+    locale: ['ru', 'en-US'],
+});
+
+tpForAsideMenu.disableRule([
+    'common/space/trimRight',
+    'common/space/trimLeft',
+    'common/space/delBeforePunctuation',
+    'common/space/afterPunctuation',
+    'common/nbsp/replaceNbsp',
+    'ru/optalign/comma',
+    'ru/punctuation/ano',
+    'ru/punctuation/exclamation',
+    'ru/punctuation/exclamationQuestion',
+    'ru/punctuation/hellipQuestion',
+])
+
+tp.disableRule([
+    'common/space/trimRight',
+    'common/space/trimLeft',
+    'common/space/delBeforePunctuation',
+    'common/space/afterPunctuation',
+    'common/nbsp/replaceNbsp',
+]);
+
+export default function t(text) {
+    return tp.execute(text);
+};