build(deps): bump react-code-view from v1 to v2

rsuite · Jul 6, 2022 · 11dea56 · 11dea56
1 parent eebe6e0
commit 11dea56
Show file tree

Hide file tree

Showing 19 changed files with 5,371 additions and 1,545 deletions.
diff --git a/docs/components/CodeView.tsx b/docs/components/CodeView.tsx
@@ -1,20 +1,13 @@
 import React from 'react';
 import ReactCodeView from 'react-code-view';
 
-export interface CodeViewProps extends React.HTMLAttributes<HTMLDivElement> {
-  theme?: 'light' | 'dark';
-  classPrefix?: string;
-  delay?: number;
-  showCode?: boolean;
-  source?: string;
-  dependencies?: any;
-  babelTransformOptions?: any;
-  babelOptions?: any;
-  buttonClassName?: string;
-  showCodeIcon?: React.ReactNode;
-  renderToolbar?: (button: React.ReactNode) => React.ReactNode;
-}
-
-export default React.memo(function CodeView(props: CodeViewProps) {
-  return <ReactCodeView classPrefix="rs-" {...props} />;
+export default React.memo(function CodeView(props: any) {
+  return (
+    <ReactCodeView
+      {...props}
+      afterCompile={(code: string) => {
+        return code.replace(/import\ [\w\,\{\}\ ]+\ from\ "[\w-]+";/gi, '');
+      }}
+    />
+  );
 });
diff --git a/docs/components/PageContent.tsx b/docs/components/PageContent.tsx
@@ -1,30 +1,23 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { Divider, IconButton, Tooltip, Whisper, Placeholder, Footer } from 'rsuite';
 import canUseDOM from 'dom-lib/canUseDOM';
 import toggleClass from 'dom-lib/toggleClass';
-import { Markdown } from 'react-markdown-reader';
+import { MarkdownRenderer, CodeViewProps } from 'react-code-view';
 import AppContext from './AppContext';
 import PageContainer from './PageContainer';
 import Head from './Head';
 import Paragraph from './Paragraph';
 import components from '../utils/component.config.json';
 import { getTitle, getDescription } from '../utils/parseHTML';
 import scrollIntoView from '../utils/scrollIntoView';
-import { CodeViewProps } from './CodeView';
 import Github from '@rsuite/icons/legacy/Github';
 import { Icon } from '@rsuite/icons';
 import { Transparent as TransparentIcon } from './SvgIcons';
 import { useCallback } from 'react';
 import { VercelBanner } from './VercelBanner';
 
-const babelOptions = {
-  presets: ['env', 'stage-1', 'react'],
-  plugins: ['transform-class-properties']
-};
-
 interface CustomCodeViewProps {
   className?: string;
   height?: number;
@@ -65,10 +58,11 @@ const CustomCodeView = (props: CustomCodeViewProps) => {
         <CodeView
           {...rest}
           style={{ minHeight: height }}
-          source={source}
           theme="dark"
-          babelOptions={babelOptions}
-          buttonClassName="rs-btn-subtle rs-btn-icon-circle"
+          editor={{
+            classPrefix: 'rs',
+            buttonClassName: 'rs-btn-subtle rs-btn-icon-circle'
+          }}
           dependencies={{ ...dependencies, Paragraph, Divider }}
           renderToolbar={(CodeButton: React.ReactElement) => {
             return (
@@ -107,20 +101,15 @@ const CustomCodeView = (props: CustomCodeViewProps) => {
               </React.Fragment>
             );
           }}
-        />
+        >
+          {source}
+        </CodeView>
       </div>
     );
   }
   return renderPlaceholder();
 };
 
-CustomCodeView.propTypes = {
-  height: PropTypes.number,
-  dependencies: PropTypes.object,
-  source: PropTypes.string,
-  onLoaded: PropTypes.func
-};
-
 export interface PageContentProps {
   id?: string;
   category?: string;
@@ -141,7 +130,7 @@ const PageContent = (props: PageContentProps) => {
   const id = pathname.match(new RegExp(`\/${category}\/(\\S*)`))?.[1];
 
   // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const context = require(`../pages${pathname}${localePath}/index.md`);
+  const context = require(`../pages${pathname}${localePath}/index.md`).default;
   const title = getTitle(context);
   const description = getDescription(context);
   const pageHead = <Head title={title} description={description} />;
@@ -183,10 +172,17 @@ const PageContent = (props: PageContentProps) => {
         const markdownFile = item.match(/include:\((\S+)\)/)?.[1];
 
         if (markdownFile) {
-          return <Markdown key={index}>{require(`../pages/${markdownFile}`)}</Markdown>;
+          return (
+            <MarkdownRenderer key={index}>
+              {
+                // eslint-disable-next-line @typescript-eslint/no-var-requires
+                require(`../pages/${markdownFile}`)?.default
+              }
+            </MarkdownRenderer>
+          );
         }
 
-        return <Markdown key={index}>{item}</Markdown>;
+        return <MarkdownRenderer key={index}>{item}</MarkdownRenderer>;
       })}
 
       {children}

diff --git a/docs/less/code-view.less b/docs/less/code-view.less
@@ -1,13 +1,14 @@
-@import '~react-code-view/lib/less/index';
+@import '~react-code-view/styles/react-code-view.css';
 
-.doc-highlight {
+.rcv-highlight {
   background-color: #f5f5f5;
   padding: 10px;
   margin: 1em 0;
   pre {
     margin: 0;
   }
-  code {
+  code,
+  .hljs-title {
     padding: 0 !important;
     margin: 0 !important;
     color: var(--rs-text-primary) !important;
@@ -19,7 +20,7 @@
   }
 }
 
-code:not(.doc-highlight) {
+code:not(.rcv-highlight) {
   border-radius: 2px;
   color: #e96900;
   font-size: 0.8rem;
@@ -40,27 +41,27 @@ a code {
   background: none !important;
 }
 
-.code-view .rs-btn-toolbar + .rs-btn-toolbar {
+.rcv-render .rs-btn-toolbar + .rs-btn-toolbar {
   margin-top: 10px;
 }
 
-.code-view .rs-toggle {
+.rcv-render .rs-toggle {
   margin-right: 8px;
   .rs-icon {
     width: 14px;
     text-align: center;
   }
 }
 
-.code-view > div > .tree-view {
+.rcv-render > div > .tree-view {
   border: 1px solid #eee;
 }
 
-.code-view .field p {
+.rcv-render .field p {
   line-height: 32px;
 }
 
-.code-view-wrapper {
+.rcv-container {
   transition: 0.3s linear border-color;
   margin: 18px 0;
   padding: 0;
@@ -80,7 +81,7 @@ a code {
     border-top-color: var(--rs-border-primary);
   }
 
-  .code-view-toolbar {
+  .rcv-toolbar {
     padding: 8px;
     border-color: @code-view-wrapper-border-color;
 
@@ -94,29 +95,29 @@ a code {
       }
     }
   }
-  .code-view-error {
+  .rcv-render-error {
     max-height: 200px;
   }
 
-  .code-view {
+  .rcv-render {
     padding: 18px;
   }
 
   .rs-theme-dark &,
   .rs-theme-high-contrast & {
     border-color: #1a1d24;
 
-    .code-view-toolbar {
+    .rcv-toolbar {
       border-color: #1a1d24;
     }
   }
 }
 
-.code-view .rs-badge ~ .rs-badge {
+.rcv-render .rs-badge ~ .rs-badge {
   margin-left: 20px;
 }
 
-.code-view .notification-container {
+.rcv-render .notification-container {
   display: flex;
   flex-direction: column;
   align-items: flex-start;

diff --git a/docs/less/markdown.less b/docs/less/markdown.less
@@ -1,6 +1,6 @@
 @import './themes/hightlight/default.less';
 
-.markdown {
+.rcv-markdown {
   h1 {
     font-size: 28px;
     code {

diff --git a/docs/less/pages/resources/icons.less b/docs/less/pages/resources/icons.less
@@ -100,7 +100,7 @@
   background-position: 0 0, 0 15px, 15px -15px, -15px 0;
 }
 
-.code-view-wrapper .rs-btn,
+.rcv-container .rs-btn,
 .icon-example-list,
 .title-wrapper {
   .rs-icon svg use {

diff --git a/docs/less/themes/dark.less b/docs/less/themes/dark.less
@@ -21,7 +21,7 @@
 }
 
 //noinspection Stylelint
-.code-view {
+.rcv-render {
   .rs-nav-tabs:not(.rs-nav-reversed).rs-nav-horizontal
     .rs-nav-item.rs-nav-item-active
     > .rs-nav-item-content {
@@ -59,11 +59,11 @@
   background: #000;
 }
 
-.code-view-wrapper .code-view {
+.rcv-container .rcv-render {
   padding: 18px;
   background: transparent;
 }
 
-.rs-code-transparent .code-view {
+.rs-code-transparent .rcv-render {
   background: transparent;
 }
diff --git a/docs/less/themes/default.less b/docs/less/themes/default.less
@@ -27,11 +27,11 @@
   }
 }
 
-.code-view-wrapper .code-view {
+.rcv-container .rcv-render {
   padding: 18px;
 }
 
-.rs-code-transparent .code-view {
+.rs-code-transparent .rcv-render {
   background-image: linear-gradient(45deg, rgb(249, 249, 250) 25%, transparent 25%),
     linear-gradient(135deg, rgb(249, 249, 250) 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, rgb(249, 249, 250) 75%),

diff --git a/docs/less/themes/hightlight/dark.less b/docs/less/themes/hightlight/dark.less
@@ -1,3 +1,5 @@
+/** https://github.com/highlightjs/highlight.js/blob/10-stable/src/styles/vs2015.css **/
+
 /*
  * Visual Studio 2015 dark style
  * Author: Nicolas LLOBERA <nllobera@gmail.com>

diff --git a/docs/less/themes/hightlight/default.less b/docs/less/themes/hightlight/default.less
@@ -1,3 +1,5 @@
+/** https://github.com/highlightjs/highlight.js/blob/10-stable/src/styles/tomorrow.css **/
+
 /* Tomorrow Comment */
 .hljs-comment,
 .hljs-quote {

diff --git a/docs/next.config.js b/docs/next.config.js
@@ -117,22 +117,26 @@ module.exports = {
       test: /\.md$/,
       use: [
         {
-          loader: 'html-loader'
-        },
-        {
-          loader: 'markdown-loader',
+          loader: 'react-code-view/webpack-md-loader',
           options: {
-            pedantic: true,
-            renderer: markdownRenderer([
-              'javascript',
-              'bash',
-              'xml',
-              'css',
-              'less',
-              'json',
-              'diff',
-              'typescript'
-            ])
+            htmlOptions: {
+              // HTML Loader options
+              // See https://github.com/webpack-contrib/html-loader#options
+            },
+            markedOptions: {
+              renderer: markdownRenderer([
+                'javascript',
+                'bash',
+                'xml',
+                'css',
+                'less',
+                'json',
+                'diff',
+                'typescript'
+              ])
+              // Pass options to marked
+              // See https://marked.js.org/using_advanced#options
+            }
           }
         }
       ]