feat: add support multi-language to MarkdownOutput component

.circleci/config.yml

@@ -34,7 +34,6 @@ jobs:
                       else
                           yarn test --ci --maxWorkers=2 
                       fi
-
             - store_test_results:
                   path: test-results/jest-junit-results
 
@@ -61,7 +60,6 @@ jobs:
                       sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
                       sudo apt-get update
                       sudo apt-get -y install google-chrome-stable
-
             - run:
                   command: yarn start
                   background: true
@@ -72,12 +70,10 @@ jobs:
                   name: run integration test
                   command: |
                       yarn test:integration --headless
-
             - run:
                   name: generate report
                   command: |
                       yarn allure generate test-results/wdio-allure-results --clean --output test-results/allure-report
-
             - store_test_results:
                   path: test-results/wdio-junit-results
 
@@ -122,7 +118,6 @@ jobs:
                       echo REACT_APP_RECAPTCHA_APIKEY=$REACT_APP_RECAPTCHA_APIKEY >> .env;
                       echo REACT_APP_CARBON_ADS_SRC=$REACT_APP_CARBON_ADS_SRC >> .env;
                       echo REACT_APP_STRIPE_APIKEY=$REACT_APP_STRIPE_APIKEY >> .env;
-
             - run: yarn install
             - run: yarn deploy:library --token=$FIREBASE_TOKEN
 

package.json

@@ -37,8 +37,11 @@
         "clipboard-copy": "^2.0.0",
         "prop-types": "^15.6.2",
         "react-async-script-loader": "^0.3.0",
+        "rehype-highlight": "^4.0.0",
+        "rehype-minify-whitespace": "^4.0.4",
+        "rehype-react": "^6.1.0",
         "remark-parse": "^8.0.2",
-        "remark-react": "^7.0.1",
+        "remark-rehype": "^7.0.0",
         "styled-components": "^4.3.2",
         "unified": "^9.0.0",
         "xlsx": "^0.14.4"

src/components/MarkdownOutput/hooks/__test__/useMarkdownToReact.spec.js

@@ -32,9 +32,9 @@ describe('useMarkdownToReact', () => {
             '- [x] Item #1\n- [ ] Item #2\n- [ ] Item #3',
         ];
         const patterns = [
-            /<ul class="(.*)">\n<li class="(.*)">Item #1<\/li>\n<li class="(.*)">Item #2<\/li>\n<li class="(.*)">Item #3<\/li>\n<\/ul>/,
-            /<ol class="(.*)">\n<li class="(.*)">Item #1<\/li>\n<li class="(.*)">Item #2<\/li>\n<li class="(.*)">Item #3<\/li>\n<\/ol>/,
-            /<ul class="(.*)">\n<li class="(.*)"><input type="checkbox" checked="" disabled=""\/>(.*)Item #1<\/li>\n<li class="(.*)"><input type="checkbox" disabled=""\/>(.*)Item #2<\/li>\n<li class="(.*)"><input type="checkbox" disabled=""\/>(.*)Item #3<\/li>\n<\/ul>/,
+            /<ul class="(.*)"><li class="(.*)">Item #1<\/li><li class="(.*)">Item #2<\/li><li class="(.*)">Item #3<\/li><\/ul>/,
+            /<ol class="(.*)"><li class="(.*)">Item #1<\/li><li class="(.*)">Item #2<\/li><li class="(.*)">Item #3<\/li><\/ol>/,
+            /<ul class="(.*)"><li class="(.*)"><input type="checkbox" checked="" disabled=""\/>(.*)Item #1<\/li><li class="(.*)"><input type="checkbox" disabled=""\/>(.*)Item #2<\/li><li class="(.*)"><input type="checkbox" disabled=""\/>(.*)Item #3<\/li><\/ul>/,
         ];
         values.forEach((value, index) => {
             const { result } = renderHook(() => useMarkdownToReact(value));
@@ -57,7 +57,7 @@ describe('useMarkdownToReact', () => {
     it('should return valid html for code', () => {
         const values = ['```js\ndoSomething();\n```', '`doSomenthing`'];
         const patterns = [
-            /<pre[^>]*><code[^>]*>([^<]*)<\/code><\/pre>/,
+            /<pre[^>]*><code class="hljs language-js[^>]*>([^<]*)<\/code><\/pre>/,
             /<code\s[^>]*>doSomenthing<\/code>/,
         ];
         values.forEach((value, index) => {
@@ -73,8 +73,8 @@ describe('useMarkdownToReact', () => {
             '| Header |\n| :-------: |\n| Cell |',
         ];
         const patterns = [
-            /<table[^>]*><thead[^>]*><tr[^>]*><td[^>]*>Header<\/td><\/tr><\/thead><tbody[^>]*><tr[^>]*><td[^>]*>Cell<\/td><\/tr><\/tbody><\/table>/,
-            /<table[^>]*><thead[^>]*><tr[^>]*><td style="text-align:left"[^>]*>Header<\/td><\/tr><\/thead><tbody[^>]*><tr[^>]*><td style="text-align:left"[^>]*>Cell<\/td><\/tr><\/tbody><\/table>/,
+            /<table[^>]*><thead><tr[^>]*><td[^>]*>Header<\/td><\/tr><\/thead><tbody[^>]*><tr[^>]*><td[^>]*>Cell<\/td><\/tr><\/tbody><\/table>/,
+            /<table[^>]*><thead><tr[^>]*><td style="text-align:left"[^>]*>Header<\/td><\/tr><\/thead><tbody[^>]*><tr[^>]*><td style="text-align:left"[^>]*>Cell<\/td><\/tr><\/tbody><\/table>/,
             /<table[^>]*><thead[^>]*><tr[^>]*><td style="text-align:right"[^>]*>Header<\/td><\/tr><\/thead><tbody[^>]*><tr[^>]*><td style="text-align:right"[^>]*>Cell<\/td><\/tr><\/tbody><\/table>/,
             /<table[^>]*><thead[^>]*><tr[^>]*><td style="text-align:center"[^>]*>Header<\/td><\/tr><\/thead><tbody[^>]*><tr[^>]*><td style="text-align:center"[^>]*>Cell<\/td><\/tr><\/tbody><\/table>/,
         ];

src/components/MarkdownOutput/hooks/useMarkdownToReact.js

@@ -1,16 +1,25 @@
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import unified from 'unified';
 import markdownParse from 'remark-parse';
-import remark2react from 'remark-react';
+import remark2rehype from 'remark-rehype';
+import minify from 'rehype-minify-whitespace';
+import highlight from 'rehype-highlight';
+import rehype2react from 'rehype-react';
 import defaultRenderers from '../renderers';
 
 export default function useMarkdown2React(source) {
     return useMemo(() => {
         return unified()
             .use(markdownParse)
-            .use(remark2react, {
-                remarkReactComponents: defaultRenderers,
+            .use(remark2rehype)
+            .use(highlight, {
+                subset: false,
             })
+            .use(rehype2react, {
+                createElement: React.createElement,
+                components: defaultRenderers,
+            })
+            .use(minify, { newlines: true })
             .processSync(source).result;
     }, [source]);
 }

src/components/MarkdownOutput/readme.md

@@ -67,3 +67,73 @@ const MarkdownCard = props => {
         <MarkdownCard text={state.text} />
     </div>
 ```
+
+##### MarkdownOutput code:
+
+```js
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Card, RadioButtonGroup, Textarea, MarkdownOutput } from 'react-rainbow-components';
+
+initialState = {
+    text: '# Code examples\n ### Standard \n```\nconst data = \'Lorem ipsum....\';\n\nconst doSomething = (param) => {\n};\n\nconst xx = doSomething(data);\n```\n\n ### Javascript \n```js\nconst data = \'Lorem ipsum....\';\n\nconst doSomething = (param) => {\n};\n\nconst xx = doSomething(data);\n```\n\n ### Shell \n```sh\n$ node index.js;\n```\n\n ### Java \n ```java\n String foo = 5;\n```',
+};
+
+const StyledCard = styled(Card)`
+    padding: 1rem 2rem 2rem;
+`;
+
+const ToggleMode = props => {
+    const [mode, setMode] = useState(props.mode);
+
+    const handleChange = event => {
+        setMode(event.target.value);
+        props.onModeChange(event.target.value);
+    };
+
+    return (
+        <RadioButtonGroup
+            variant="brand"
+            value={mode}
+            options={props.options}
+            onChange={handleChange}
+            size="small"
+        />
+    );
+};
+
+const MarkdownCard = props => {
+    const [mode, setMode] = useState('preview');
+    const [text, setText] = useState(props.text);
+
+    const content = mode === 'edit'
+        ? <Textarea value={text} rows={15} onChange={event => setText(event.target.value)}/>
+        : <MarkdownOutput id="markdown-output-1" value={text} />
+
+    return (
+        <StyledCard
+            actions={
+                <ToggleMode
+                    mode={mode}
+                    options={[{
+                        label: 'Edit',
+                        value: 'edit',
+                    }, {
+                        label: 'Preview',
+                        value: 'preview',
+                    }]}
+                    onModeChange={value => setMode(value)}
+                />
+            }
+        >
+            {content}
+        </StyledCard>
+    );
+};
+
+<div
+    className="rainbow-m-vertical_large rainbow-p-horizontal_large rainbow-m_auto rainbow-flex_wrap"
+>
+        <MarkdownCard text={state.text} />
+    </div>
+```

src/components/MarkdownOutput/renderers/styled.js

@@ -53,6 +53,10 @@ export const StyledCode = attachThemeAttrs(styled.code)`
         margin-left: 4px;
         margin-right: 4px;
     }
+
+    .hljs-emphasis {
+        font-style: italic;
+    }
 `;
 
 export const StyledHR = attachThemeAttrs(styled.hr)`