feat: add disableLinks props for Markdown

qiwi · Jan 23, 2025 · d329725 · d329725
1 parent 0c07ce2
commit d329725
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 8 deletions.
diff --git a/packages/desktop/src/main/ts/markdown/Markdown.md b/packages/desktop/src/main/ts/markdown/Markdown.md
@@ -208,3 +208,33 @@
   </BlockContent>
 </Block>
 ```
+
+## Отключение ссылок
+
+```jsx
+<Block>
+  <BlockContent>
+    <Markdown>{`
+####disableLinks = false
+
+Киви кошелек: https://qiwi.com
+
+Игровая витрина: <a href="https://games.qiwi.com">games.qiwi.com</a>
+    `}</Markdown>
+  </BlockContent>
+</Block>
+```
+
+```jsx
+<Block>
+  <BlockContent>
+    <Markdown disableLinks>{`
+####disableLinks = true
+
+Киви кошелек: https://qiwi.com
+
+Игровая витрина: <a href="https://games.qiwi.com">games.qiwi.com</a>
+    `}</Markdown>
+  </BlockContent>
+</Block>
+```
diff --git a/packages/desktop/src/main/ts/markdown/Markdown.tsx b/packages/desktop/src/main/ts/markdown/Markdown.tsx
@@ -6,6 +6,7 @@ import { List } from '../list'
 import { Heading, Paragraph, Text } from '../typography'
 
 export interface MarkdownProps {
+  disableLinks?: boolean
   size?: 's' | 'm' | 'l'
   children: string
 }
@@ -49,13 +50,20 @@ const img: FC<ImageProps> = ({ src, alt }) => (
 img.displayName = 'img'
 
 interface LinkProps extends SizeProps {
+  disableLinks?: boolean
   title?: string
   href?: string
 }
 
-const a: FC<LinkProps> = ({ title, href, size, children }) => (
-  <Link title={title} href={href} size={size} children={children} />
-)
+const a: FC<LinkProps> = ({ disableLinks, title, href, size, children }) => {
+  if (disableLinks) {
+    return <Text size={size} children={children} />
+  }
+
+  return (
+    <Link title={title} href={href} size={size} children={children} />
+  )
+}
 
 a.displayName = 'a'
 
@@ -167,10 +175,15 @@ const overrides: { [tag: string]: FC<any> } = {
   img,
 }
 
-export const Markdown: FC<MarkdownProps> = ({ size = 'm', children }) => (
+export const Markdown: FC<MarkdownProps> = ({
+  size = 'm',
+  disableLinks = false,
+  children
+}) => (
   <MarkdownToJSX
     children={children}
     options={{
+      disableAutoLink: disableLinks,
       overrides: Object.keys(overrides).reduce(
         (prev, tag) => ({
           ...prev,
@@ -179,6 +192,7 @@ export const Markdown: FC<MarkdownProps> = ({ size = 'm', children }) => (
               component: overrides[tag],
               props: {
                 size,
+                disableLinks
               },
             },
           },

diff --git a/packages/mobile/src/main/ts/markdown/Markdown.md b/packages/mobile/src/main/ts/markdown/Markdown.md
@@ -203,3 +203,33 @@
   </BlockContent>
 </Block>
 ```
+
+## Отключение ссылок
+
+```jsx
+<Block>
+  <BlockContent>
+    <Markdown>{`
+####disableLinks = false
+
+Киви кошелек: https://qiwi.com
+
+Игровая витрина: <a href="https://games.qiwi.com">games.qiwi.com</a>
+    `}</Markdown>
+  </BlockContent>
+</Block>
+```
+
+```jsx
+<Block>
+  <BlockContent>
+    <Markdown disableLinks>{`
+####disableLinks = true
+
+Киви кошелек: https://qiwi.com
+
+Игровая витрина: <a href="https://games.qiwi.com">games.qiwi.com</a>
+    `}</Markdown>
+  </BlockContent>
+</Block>
+```
diff --git a/packages/mobile/src/main/ts/markdown/Markdown.tsx b/packages/mobile/src/main/ts/markdown/Markdown.tsx
@@ -6,6 +6,7 @@ import { List } from '../list'
 import { Heading, Paragraph, Text } from '../typography'
 
 export interface MarkdownProps {
+  disableLinks?: boolean
   size?: 's' | 'm' | 'l'
   children: string
 }
@@ -49,13 +50,20 @@ const img: FC<ImageProps> = ({ src, alt }) => (
 img.displayName = 'img'
 
 interface LinkProps extends SizeProps {
+  disableLinks?: boolean
   title?: string
   href?: string
 }
 
-const a: FC<LinkProps> = ({ title, href, size, children }) => (
-  <Link title={title} href={href} size={size} children={children} />
-)
+const a: FC<LinkProps> = ({ disableLinks, title, href, size, children }) => {
+  if (disableLinks) {
+    return <Text size={size} children={children} />
+  }
+
+  return (
+    <Link title={title} href={href} size={size} children={children} />
+  )
+}
 
 a.displayName = 'a'
 
@@ -158,10 +166,15 @@ const overrides: { [tag: string]: FC<any> } = {
   img,
 }
 
-export const Markdown: FC<MarkdownProps> = ({ size = 'm', children }) => (
+export const Markdown: FC<MarkdownProps> = ({
+  size = 'm',
+  disableLinks = false,
+  children
+}) => (
   <MarkdownToJSX
     children={children}
     options={{
+      disableAutoLink: disableLinks,
       overrides: Object.keys(overrides).reduce(
         (prev, tag) => ({
           ...prev,
@@ -170,6 +183,7 @@ export const Markdown: FC<MarkdownProps> = ({ size = 'm', children }) => (
               component: overrides[tag],
               props: {
                 size,
+                disableLinks
               },
             },
           },