Merge pull request #242 from vtexdocs/fix/callout

fix(rehypeblockquote): fixes long callouts

src/components/markdown-renderer/components.tsx

@@ -74,8 +74,9 @@ const Callout = ({ node, icon, ...props }: Component) => {
           ? styles.blockquoteSuccess
           : ''
       }`}
-      {...props}
-    />
+    >
+      <p {...props} />
+    </blockquote>
   )
 }
 

src/components/markdown-renderer/styles.module.css

@@ -25,14 +25,19 @@
 
 .blockquote {
   display: grid;
-  padding: 5px 20px;
+  padding: 20px;
   gap: 20px;
   width: 100%;
   margin: 20px 0;
   border-radius: 4px;
   align-items: center;
   border: 1px solid #ccced8;
 }
+
+.blockquote p{
+  margin: 0px
+}
+
 .blockquote a{
   color: #D4084C !important;
 }

src/pages/docs/apps/[slug]/[child].tsx

@@ -4,7 +4,7 @@ import getNavigation from 'utils/getNavigation'
 import remarkGFM from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
 import hljsCurl from 'highlightjs-curl'
-import remarkBlockquote from '../../guides/rehypeBlockquote'
+import remarkBlockquote from 'utils/remark_plugins/rehypeBlockquote'
 import getHeadings from 'utils/getHeadings'
 import { serialize } from 'next-mdx-remote/serialize'
 import type { Item } from 'components/table-of-contents'

src/pages/docs/apps/[slug]/index.tsx

@@ -4,7 +4,7 @@ import getNavigation from 'utils/getNavigation'
 import remarkGFM from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
 import hljsCurl from 'highlightjs-curl'
-import remarkBlockquote from '../../guides/rehypeBlockquote'
+import remarkBlockquote from 'utils/remark_plugins/rehypeBlockquote'
 import getHeadings from 'utils/getHeadings'
 import { serialize } from 'next-mdx-remote/serialize'
 import type { Item } from 'components/table-of-contents'

src/pages/docs/guides/[slug].tsx

@@ -9,7 +9,7 @@ import { MDXRemoteSerializeResult } from 'next-mdx-remote'
 import remarkGFM from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
 import hljsCurl from 'highlightjs-curl'
-import remarkBlockquote from './rehypeBlockquote'
+import remarkBlockquote from 'utils/remark_plugins/rehypeBlockquote'
 
 import remarkImages from 'utils/remark_plugins/plaiceholder'
 

src/pages/updates/release-notes/[slug].tsx

@@ -8,6 +8,7 @@ import { MDXRemoteSerializeResult } from 'next-mdx-remote'
 import remarkGFM from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
 import hljsCurl from 'highlightjs-curl'
+import remarkBlockquote from 'utils/remark_plugins/rehypeBlockquote'
 
 import remarkImages from 'utils/remark_plugins/plaiceholder'
 import { getLogger } from 'utils/logging/log-util'
@@ -157,7 +158,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
     let serialized = await serialize(documentationContent, {
       parseFrontmatter: true,
       mdxOptions: {
-        remarkPlugins: [remarkGFM, remarkImages],
+        remarkPlugins: [remarkGFM, remarkImages, remarkBlockquote],
         rehypePlugins: [
           [rehypeHighlight, { languages: { hljsCurl }, ignoreMissing: true }],
         ],

src/pages/docs/guides/rehypeBlockquote.js → src/utils/remark_plugins/rehypeBlockquote.js

@@ -18,16 +18,18 @@ export default function remarkBlockquote() {
       if (node.type !== 'blockquote') return
 
       const { children = [] } = node
-      const [{ value, type }, ...siblings] = children[0].children
+      const [{ value }] = children[0].children
 
       const result = Object.entries(extendedNames).find(([, regex]) =>
         regex.test(value)
       )
       if (!result) return
+      const newNode = node.children
+      newNode[0].children[0].value = newNode[0].children[0].value.substring(2)
 
       const newChild = {
-        type,
-        value: formatValues(value, result[1]),
+        type: 'paragraph',
+        children: newNode,
       }
 
       const props = {
@@ -41,21 +43,9 @@ export default function remarkBlockquote() {
       parent.children.splice(
         index,
         1,
-        u('blockquote', props, [u('paragraph', [newChild, ...siblings])])
+        u('blockquote', props, [u('paragraph', [newChild])])
       )
       return [SKIP, index]
     })
   }
 }
-
-const formatValues = (value, regEx) => {
-  if (value && value.includes('\n')) {
-    return value
-      .split('\n')
-      .map((val) => {
-        if (val.length === 2) return val.concat(' ').replace(regEx, '')
-        return val.replace(regEx, '').trimStart()
-      })
-      .join('\n')
-  } else return value.replace(regEx, '').trimStart()
-}