refactor: refactor code.

Author: jaywcjlove

core/README.md

@@ -14,82 +14,129 @@ npm install react-code-preview-layout --save
 
 ## 基本用法
 
-```tsx
+```jsx mdx:preview
 import React from "react"
 import CodeLayout from "react-code-preview-layout"
 const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`
 
-const Demo = ()=>{
-  return <CodeLayout
-  title="示例"
-  code={<code style={{color:"red"}} >{code}</code>}
-  copyNodes={code}
-  >
-    <div>示例内容</div>
-  </CodeLayout>
+const Demo = () => {
+  return (
+    <CodeLayout
+      title="示例"
+      code={<code>{code}</code>}
+      copyNodes={code}
+    >
+      <div>这里是示例展示</div>
+    </CodeLayout>
+  );
+}
+export default Demo;
+```
+
+## 禁用方格背景
+
+```jsx mdx:preview
+import React from "react"
+import CodeLayout from "react-code-preview-layout"
+const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`
+
+const Demo = () => {
+  return (
+    <CodeLayout
+      title="示例"
+      code={<code>{code}</code>}
+      copyNodes={code}
+      disableCheckered
+    >
+      <div>这里方格背景被禁用了</div>
+    </CodeLayout>
+  );
 }
 export default Demo;
 ```
 
 ## 无边框
 
-```tsx
+```jsx  mdx:preview
 import React from "react"
 import CodeLayout from "react-code-preview-layout"
 const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`
-const Demo = ()=>{
-  return <CodeLayout
-  code={<code style={{color:"red"}} >{code}</code>}
-  copyNodes={code}
-  bordered={false}
+const Demo = () => (
+  <CodeLayout
+    code={<code>{code}</code>}
+    text={code}
+    bordered={false}
   >
     <div>示例内容</div>
   </CodeLayout>
-}
+);
 export default Demo;
 ```
 
 ## 自定义操作按钮
 
-```tsx
+```jsx mdx:preview?title=自定义操作按钮
 import React from "react"
 import CodeLayout from "react-code-preview-layout"
 const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`
 const Demo = () => {
-  return <CodeLayout
-    code={<code style={{color:"red"}} >{code}</code>}
-    copyNodes={code}
-    customButton={<div>按钮</div>}
+  return (
+    <CodeLayout
+      code={<code>{code}</code>}
+      copyNodes={code}
+      toolbar={<div>按钮</div>}
+    >
+      <div>示例内容</div>
+    </CodeLayout>
+  );
+}
+export default Demo;
+```
+
+## 禁用工具栏
+
+```jsx mdx:preview?title=禁用工具栏
+import React from "react"
+import CodeLayout from "react-code-preview-layout"
+const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`;
+
+const Demo = ()=> (
+  <CodeLayout
+    code={<code>{code}</code>}
+    text={code}
+    disableTollbar
   >
     <div>示例内容</div>
   </CodeLayout>
-}
+);
 export default Demo;
 ```
 
-## 无操作按钮
+## 禁用代码展示
 
-```tsx
+```jsx mdx:preview?title=禁用代码展示
 import React from "react"
 import CodeLayout from "react-code-preview-layout"
-const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`
-const Demo = ()=>{
-  return <CodeLayout
-  code={<code style={{color:"red"}} >{code}</code>}
-  copyNodes={code}
-  noButton={true}
+const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`;
+
+const Demo = ()=> (
+  <CodeLayout
+    code={<code>{code}</code>}
+    text={code}
+    disableCode
   >
     <div>示例内容</div>
   </CodeLayout>
-}
+);
 export default Demo;
 ```
 
-## 第三方预览参数
+## 添加 Codepen 按钮
 
-```tsx
+```jsx mdx:preview?title=添加 Codepen 按钮
 import React from "react"
 import CodeLayout from "react-code-preview-layout"
+import Codepen from '@uiw/react-codepen';
 const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`
 
 const codePenOptions = {
@@ -101,32 +148,56 @@ const codePenOptions = {
   js_external: `https://unpkg.com/[email protected]/umd/react.development.js;https://unpkg.com/[email protected]/umd/react-dom.development.js;https://unpkg.com/[email protected]/index.js;https://unpkg.com/[email protected]/dist/uiw.min.js;https://unpkg.com/@uiw/[email protected]/index.js`,
 }
 
-const Demo = ()=>{
-  return <CodeLayout
-  code={<code style={{color:"red"}} >{code}</code>}
-  copyNodes={code}
-  codePenOptions={codePenOptions}
+const Demo = () => (
+  <CodeLayout
+    code={
+      <code>{code}</code>
+    }
+    text={code}
+    toolbarExtra={
+      <Codepen {...codePenOptions}>
+        <svg viewBox="0 0 1024 1024" width="18" height="18">
+          <path
+            d="M123.428571 668l344.571429 229.714286v-205.142857L277.142857 565.142857z m-35.428571-82.285714l110.285714-73.714286-110.285714-73.714286v147.428572z m468 312l344.571429-229.714286-153.714286-102.857143-190.857143 127.428572v205.142857z m-44-281.714286l155.428571-104-155.428571-104-155.428571 104zM277.142857 458.857143l190.857143-127.428572V126.285714L123.428571 356z m548.571429 53.142857l110.285714 73.714286V438.285714z m-78.857143-53.142857l153.714286-102.857143-344.571429-229.714286v205.142857z m277.142857-102.857143v312q0 23.428571-19.428571 36.571429l-468 312q-12 7.428571-24.571429 7.428571t-24.571429-7.428571L19.428571 704.571429q-19.428571-13.142857-19.428571-36.571429V356q0-23.428571 19.428571-36.571429L487.428571 7.428571q12-7.428571 24.571429-7.428571t24.571429 7.428571l468 312q19.428571 13.142857 19.428571 36.571429z"
+            p-id="2071"
+          ></path>
+        </svg>
+      </Codepen>
+    }
   >
     <div>示例内容</div>
   </CodeLayout>
-}
+);
 export default Demo;
 ```
 
 ## Props
 
-| 参数      | 说明    | 类型      |  默认值   |
-|--------- |-------- |---------- |-------- |
-| code | 代码块内容展示 | `React.ReactNode` | - |
-| copyNodes | 复制按钮复制的内容  | `string` | false |
-| customButton | 自定义操作按钮 | `React.ReactNode` | - |
-| codePadding |代码块内容展示内边距 | number | `16` |
-| noButton | 不展示操作按钮 |  `boolean`  | `false` |
-| bordered | 是否设置边框 | `boolean` | `true` |
-| codeSandboxOptions | codeSandbox 预览配置参数 | `codeSandboxOptions` | - |
-| codePenOptions | codePen 预览配置参数 | `CodePenOption & { includeModule?: string[] }` | - |
-| className |  | `string` | - |
-| title | 左侧标题部分  | `React.ReactNode` | - |
+```ts
+interface CodeLayoutProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  prefixCls?: string;
+  /** 原始 代码块 渲染**/
+  code?: React.ReactNode;
+  text?: string;
+  /** 标题部分，也可以放置按钮 **/
+  toolbar?: React.ReactNode;
+  /** 额外内容，展示 toolbar 右侧内容 */
+  toolbarExtra?: React.ReactNode;
+  disableTollbar?: boolean;
+  disableCode?: boolean;
+  disablePreview?: boolean;
+  /**
+   * 是否需要边框
+   * @default true
+   */
+  bordered?: boolean;
+  /**
+   * 是否显示复制按钮
+   * @default true
+   */
+  copied?: boolean;
+}
+```
 
 
 ## 开发

core/package.json

@@ -44,8 +44,6 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@uiw/react-codepen": "~1.0.2",
-    "@uiw/react-codesandbox": "~1.1.5",
     "@uiw/copy-to-clipboard": "^1.0.12"
   }
 }

core/src/Copied.tsx

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+import copyTextToClipboard from '@uiw/copy-to-clipboard';
+import { CopyIcon, CopySuccessIcon } from './icons';
+
+export const Copied = (props: { text?: string }) => {
+  const [copied, setCopied] = useState(false);
+  const handle = () => {
+    setCopied(true);
+    copyTextToClipboard(props.text || '', () => {
+      const timer = setTimeout(() => {
+        setCopied(false);
+        clearTimeout(timer);
+      }, 2000);
+    });
+  };
+  return <button onClick={handle}>{copied ? <CopySuccessIcon /> : <CopyIcon />}</button>;
+};