refactor(markdownRender): improve markdownRender (#307)

Author: mortalYoung

src/markdownRender/__tests__/__snapshots__/markdownRender.test.tsx.snap

@@ -0,0 +1,181 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test MarkdownRender Component Should detect language by highlight 1`] = `
+<DocumentFragment>
+  <div
+    class="dtc-markdown-render-body dtc-vs-dark"
+  >
+    <pre>
+      <code>
+        hljs console.
+        <span
+          class="hljs-built_in"
+        >
+          log
+        </span>
+        (
+        <span
+          class="hljs-string"
+        >
+          'test'
+        </span>
+        );
+
+      </code>
+    </pre>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Test MarkdownRender Component Should match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="dtc-markdown-render-body dtc-vs"
+  >
+    <h1
+      id="h1"
+    >
+      h1
+    </h1>
+    
+
+    <h2
+      id="h2"
+    >
+      h2
+    </h2>
+    
+
+    <h3
+      id="h3"
+    >
+      h3
+    </h3>
+    
+
+    <ul>
+      
+
+      <li>
+        a
+      </li>
+      
+
+      <li>
+        b
+      </li>
+      
+
+      <li>
+        c
+      </li>
+      
+
+    </ul>
+    
+
+    <p>
+      <a
+        href="https://github.com/DTStack/dt-react-component"
+      >
+        url
+      </a>
+    </p>
+    
+
+    <p>
+      <strong>
+        strong1
+      </strong>
+    </p>
+    
+
+    <p>
+      <strong>
+        strong2
+      </strong>
+    </p>
+    
+
+    <p>
+      <em>
+        Italic
+      </em>
+    </p>
+    
+
+    <blockquote>
+      
+  
+      <p>
+        blockquote
+      </p>
+      
+
+    </blockquote>
+    
+
+    <p>
+      <code>
+        code block
+      </code>
+    </p>
+    
+
+    <hr />
+    
+
+    <table>
+      
+    
+      <tbody>
+        <tr>
+          
+        
+          <td>
+            Foo
+          </td>
+          
+    
+        </tr>
+        
+
+      </tbody>
+    </table>
+    
+
+    <pre>
+      <code
+        class="hljs sql language-sql"
+      >
+        <span
+          class="hljs-comment"
+        >
+          -- desc
+        </span>
+        
+
+        <span
+          class="hljs-keyword"
+        >
+          select
+        </span>
+         
+        <span
+          class="hljs-operator"
+        >
+          *
+        </span>
+         
+        <span
+          class="hljs-keyword"
+        >
+          from
+        </span>
+         employees
+
+      </code>
+    </pre>
+  </div>
+</DocumentFragment>
+`;

src/markdownRender/__tests__/markdownRender.test.tsx

@@ -0,0 +1,87 @@
+import { cleanup, render } from '@testing-library/react';
+import React from 'react';
+import MarkdownRender from '..';
+
+describe('Test MarkdownRender Component', () => {
+    beforeEach(cleanup);
+    it('Should match snapshot', () => {
+        const { asFragment } = render(
+            <MarkdownRender
+                value={`
+# h1
+## h2
+### h3
+
+- a
+- b
+- c
+
+[url](https://github.com/DTStack/dt-react-component)
+
+**strong1**
+
+__strong2__
+
+_Italic_
+
+> blockquote
+
+\`code block\`
+
+---
+
+<table>
+    <tr>
+        <td>Foo</td>
+    </tr>
+</table>
+
+\`\`\`sql
+-- desc
+select * from employees
+\`\`\`
+        `}
+            />
+        );
+
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it('Should render dark', () => {
+        const { container } = render(
+            <MarkdownRender
+                dark
+                value={`
+\`\`\`sql
+-- desc
+select * from employees
+\`\`\`
+        `}
+            />
+        );
+
+        const renderBody = container.querySelector<HTMLDivElement>('.dtc-markdown-render-body');
+
+        expect(renderBody).not.toBeNull();
+        expect(renderBody?.className).toContain('dtc-vs-dark');
+    });
+
+    it('Should detect language by highlight', () => {
+        const { asFragment } = render(
+            <MarkdownRender
+                dark
+                value={`
+\`\`\`
+console.log('test');
+\`\`\`
+        `}
+            />
+        );
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it('Should render empty value', () => {
+        const { container } = render(<MarkdownRender />);
+        expect(container.querySelector('.dtc-markdown-render-body')?.innerHTML).toBe('');
+    });
+});

src/markdownRender/demos/basic.tsx

@@ -0,0 +1,20 @@
+import React, { useEffect, useState } from 'react';
+import { MarkdownRender } from 'dt-react-component';
+
+export default () => {
+    const [value, setValue] = useState('');
+
+    useEffect(() => {
+        fetch('https://cdn.jsdelivr.net/npm/[email protected]/CHANGELOG.md', {
+            method: 'get',
+        })
+            .then((res) => res.text())
+            .then(setValue);
+    }, []);
+
+    return (
+        <div style={{ maxHeight: 200, overflow: 'auto', marginBottom: 16 }}>
+            <MarkdownRender value={value} />
+        </div>
+    );
+};

src/markdownRender/demos/dark.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react';
+import { MarkdownRender } from 'dt-react-component';
+
+const md = `
+以下是一段 sql 语法
+
+\`\`\`sql
+ select count(*) from a;
+-- name sqltest 
+-- type sql 
+-- create time 2022-11-09 16:13:45 
+-- desc
+
+
+-- create table employees(name string);
+insert into employees values('1111');
+
+
+select * from employees
+\`\`\`
+`;
+
+export default () => {
+    const [value, setValue] = useState('');
+
+    useEffect(() => {
+        setValue(md);
+    }, []);
+
+    return (
+        <div style={{ maxHeight: 400, overflow: 'auto', marginBottom: 16 }}>
+            <MarkdownRender dark value={value} />
+        </div>
+    );
+};

src/markdownRender/demos/sql.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react';
+import { MarkdownRender } from 'dt-react-component';
+
+const md = `
+以下是一段 sql 语法
+
+\`\`\`sql
+ select count(*) from a;
+-- name sqltest 
+-- type sql 
+-- create time 2022-11-09 16:13:45 
+-- desc
+
+
+-- create table employees(name string);
+insert into employees values('1111');
+
+
+select * from employees
+\`\`\`
+`;
+
+export default () => {
+    const [value, setValue] = useState('');
+
+    useEffect(() => {
+        setValue(md);
+    }, []);
+
+    return (
+        <div style={{ maxHeight: 400, overflow: 'auto', marginBottom: 16 }}>
+            <MarkdownRender value={value} />
+        </div>
+    );
+};

src/markdownRender/extensions/index.ts

@@ -0,0 +1,33 @@
+import showdown from 'showdown';
+import hljs from 'highlight.js';
+import sql from 'highlight.js/lib/languages/sql';
+import 'highlight.js/styles/default.css';
+import '../theme/vs.scss';
+import '../theme/vs-dark.scss';
+
+hljs.registerLanguage('sql', sql);
+
+export default function sqlHighlightExtension(): showdown.ShowdownExtension {
+    return {
+        type: 'output',
+        filter: function (text) {
+            return showdown.helper.replaceRecursiveRegExp(
+                text.replace(/&gt;/g, '>').replace(/&lt;/g, '<'),
+                (_: string, match: string, left: string, right: string) => {
+                    const lang = (left.match(/class=\"([^ \"]+)/) || [])[1];
+
+                    // Append hljs class
+                    const prefix = left.slice(0, 18) + 'hljs ' + left.slice(18);
+                    if (lang && hljs.getLanguage(lang)) {
+                        return prefix + hljs.highlight(match, { language: lang }).value + right;
+                    } else {
+                        return prefix + hljs.highlightAuto(match).value + right;
+                    }
+                },
+                '<pre><code\\b[^>]*>',
+                '</code></pre>',
+                'g'
+            );
+        },
+    };
+}