From f9c774458e0af70033cac930b9607c3bcd9f601b Mon Sep 17 00:00:00 2001
From: worksapce <289582304@qq.com>
Date: Mon, 25 Mar 2024 12:25:54 +0800
Subject: [PATCH 1/6] fix: fixed up ts error on `/website`

---
 typing.d.ts         | 6 ++++++
 website/App.tsx     | 4 ++--
 website/Example.tsx | 2 +-
 website/index.tsx   | 7 ++++++-
 4 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 typing.d.ts

diff --git a/typing.d.ts b/typing.d.ts
new file mode 100644
index 00000000..f1f3b869
--- /dev/null
+++ b/typing.d.ts
@@ -0,0 +1,6 @@
+/**
+ * 增加这个文件是为了解决全局的ts 对 `md|less`后缀的文件引用后ts的报错问题
+ * @see bugs(https://github.com/uiwjs/react-code-preview/issues/229)
+ */
+declare module '*.md';
+declare module '*.less';
diff --git a/website/App.tsx b/website/App.tsx
index 3d12143b..056da6d0 100644
--- a/website/App.tsx
+++ b/website/App.tsx
@@ -5,10 +5,10 @@ import '@wcj/dark-mode';
 import DocumentStr from '../README.md';
 import styles from './App.module.less';
 import Example from './Example';
+import pkgJson from '../package.json';
 
 export default function App() {
-  // @ts-ignore
-  const version = VERSION;
+  const version = pkgJson.version;
   let DocumentStrSource = DocumentStr;
   if (DocumentStrSource) DocumentStrSource = DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '');
   return (
diff --git a/website/Example.tsx b/website/Example.tsx
index b9328a05..d6a757ae 100644
--- a/website/Example.tsx
+++ b/website/Example.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useState, useEffect } from 'react';
+import React, { Fragment, useState, useEffect } from 'react';
 import CodePreview from '../';
 import { Switch } from 'uiw';
 import * as UIW from 'uiw';
diff --git a/website/index.tsx b/website/index.tsx
index 7f8163d8..6237b23d 100644
--- a/website/index.tsx
+++ b/website/index.tsx
@@ -4,7 +4,12 @@ import ReactDOM from 'react-dom/client';
 import '@uiw/reset.css/reset.less';
 import App from './App';
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+/**
+ * 增加一个❕，解决ts报错的问题
+ * 因为 `document.getElementById('root')`有可能为null
+ * @see https://github.com/uiwjs/react-code-preview/issues/229
+ */
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,

From 0450d76b3df588e5ec0e396a08fe756c86e51c68 Mon Sep 17 00:00:00 2001
From: worksapce <289582304@qq.com>
Date: Mon, 25 Mar 2024 12:39:41 +0800
Subject: [PATCH 2/6] =?UTF-8?q?feat(deps):=20=E5=A2=9E=E5=8A=A0@types=20re?=
 =?UTF-8?q?act|react-dom=20to=20^18.2.0=20version?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 3dd109a9..78cd19b7 100644
--- a/package.json
+++ b/package.json
@@ -52,8 +52,8 @@
     "@kkt/raw-modules": "~7.1.1",
     "@kkt/scope-plugin-options": "~7.1.1",
     "@types/babel__standalone": "~7.1.4",
-    "@types/react": "~18.0.5",
-    "@types/react-dom": "~18.0.1",
+    "@types/react": "^18.2.69",
+    "@types/react-dom": "^18.2.22",
     "@types/react-test-renderer": "~18.0.0",
     "@uiw/react-github-corners": "~1.5.14",
     "@uiw/react-markdown-preview": "~4.0.6",
@@ -102,4 +102,4 @@
       "last 1 safari version"
     ]
   }
-}
\ No newline at end of file
+}

From 91720df1f5b9c06994f95d603c418c1eb6720263 Mon Sep 17 00:00:00 2001
From: worksapce <289582304@qq.com>
Date: Mon, 25 Mar 2024 14:44:59 +0800
Subject: [PATCH 3/6] feat: Add an additional 'sourceState' props attribute to
 the component.

---
 src/index.tsx         | 4 ++++
 src/useCodePreview.ts | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/index.tsx b/src/index.tsx
index 82482d44..2b7fc5c9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -71,6 +71,10 @@ export interface CodePreviewProps extends SplitProps {
    * @default light
    */
   theme?: ReactCodeMirrorProps['theme'];
+  /**
+   * Specifies the initial state of the source panel.
+   */
+  sourceState?: 'hidden' | 'shown';
 }
 
 export interface CodePreviewState {
diff --git a/src/useCodePreview.ts b/src/useCodePreview.ts
index 06c900cc..8ec4fc7f 100644
--- a/src/useCodePreview.ts
+++ b/src/useCodePreview.ts
@@ -20,7 +20,7 @@ export function useCodePreview(props: CodePreviewProps) {
   const playerId = useRef(`${parseInt(String(Math.random() * 1e9), 10).toString(36)}`);
   const [fullScreen, setFullScreen] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
-  const [showEdit, setShowEdit] = useState(false);
+  const [showEdit, setShowEdit] = useState(props.sourceState === 'shown');
   const [width, setWidth] = useState<number | string>(1);
   const [copied, setCopied] = useState(false);
   const [code, setCode] = useState(props.code || '');

From d0bc09350709e1a0936a30319c7d65de086d4c5b Mon Sep 17 00:00:00 2001
From: worksapce <289582304@qq.com>
Date: Mon, 25 Mar 2024 15:20:14 +0800
Subject: [PATCH 4/6] fix: fixed up eslint error

---
 src/useCodePreview.ts | 5 +++--
 test/index.test.tsx   | 1 +
 website/App.tsx       | 1 -
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/useCodePreview.ts b/src/useCodePreview.ts
index 8ec4fc7f..418fde4c 100644
--- a/src/useCodePreview.ts
+++ b/src/useCodePreview.ts
@@ -16,12 +16,13 @@ export const getReactDOMClient = () => {
 };
 
 export function useCodePreview(props: CodePreviewProps) {
+  const isShowEdit = props.sourceState === 'shown';
   const [demoDom, setDemoDom] = useState<HTMLDivElement>();
   const playerId = useRef(`${parseInt(String(Math.random() * 1e9), 10).toString(36)}`);
   const [fullScreen, setFullScreen] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
-  const [showEdit, setShowEdit] = useState(props.sourceState === 'shown');
-  const [width, setWidth] = useState<number | string>(1);
+  const [showEdit, setShowEdit] = useState(isShowEdit);
+  const [width, setWidth] = useState<number | string>(isShowEdit ? '50%' : 1);
   const [copied, setCopied] = useState(false);
   const [code, setCode] = useState(props.code || '');
 
diff --git a/test/index.test.tsx b/test/index.test.tsx
index 85af2d33..a9ee6245 100644
--- a/test/index.test.tsx
+++ b/test/index.test.tsx
@@ -7,6 +7,7 @@ describe('<CodePreview />', () => {
     const component = TestRenderer.create(<CodePreview />);
     let tree = component.toJSON();
     if (tree && !Array.isArray(tree)) {
+      /* eslint-disable jest/no-conditional-expect */
       expect(tree.type).toEqual('div');
       expect(tree.props.className).toEqual('w-split w-code-preview w-code-preview-bordered w-split-horizontal');
       expect(tree.props.style).toEqual({
diff --git a/website/App.tsx b/website/App.tsx
index 056da6d0..1495ca13 100644
--- a/website/App.tsx
+++ b/website/App.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import GitHubCorners from '@uiw/react-github-corners';
 import Markdown from '@uiw/react-markdown-preview';
 import '@wcj/dark-mode';

From d2930ee8d3989277db4940336847e41c5fc8ade1 Mon Sep 17 00:00:00 2001
From: worksapce <289582304@qq.com>
Date: Mon, 25 Mar 2024 15:22:30 +0800
Subject: [PATCH 5/6] fix: Option 'emitDeclarationOnly' cannot be specified
 with option 'noEmit'.

---
 tsconfig.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index 79da1c40..c1a38a4d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,8 +19,8 @@
     "noUnusedLocals": true,
     "experimentalDecorators": true,
     "removeComments": false,
-    "noEmit": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "emitDeclarationOnly": true
   },
   "include": ["src"]
 }

From 551fbf20538732e56ab7c91e51acc5b9ad8eacfb Mon Sep 17 00:00:00 2001
From: worksapce <289582304@qq.com>
Date: Thu, 28 Mar 2024 21:50:00 +0800
Subject: [PATCH 6/6] refactor: fixed up(#235) and adding docs to the
 `sourceState` prop

---
 README.md             |  4 ++++
 src/index.tsx         | 11 ++++++++++-
 src/useCodePreview.ts |  5 ++---
 website/Example.tsx   |  6 ++++++
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index d12ade7e..c2d0f331 100644
--- a/README.md
+++ b/README.md
@@ -131,6 +131,10 @@ interface CodePreviewProps extends SplitProps {
    * @default light
    */
   theme?: ReactCodeMirrorProps['theme'];
+  /**
+   * Specifies the initial state of the source panel.
+   */
+  sourceState?: 'hidden' | 'shown';
 }
 ```
 
diff --git a/src/index.tsx b/src/index.tsx
index 2b7fc5c9..d0c36079 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -109,6 +109,7 @@ const CodePreview = React.forwardRef<CodePreviewRef, CodePreviewProps>((props, r
     noPreview = false,
     noScroll = false,
     bgWhite = false,
+    sourceState,
     ...otherProps
   } = props;
   const {
@@ -183,6 +184,13 @@ const CodePreview = React.forwardRef<CodePreviewRef, CodePreviewProps>((props, r
     setWidth(width === 1 ? '50%' : 1);
     setShowEdit(true);
   };
+  // 通过状态props属性判断是否切换源码
+  const isShown = sourceState === 'shown';
+  useEffect(() => {
+    setWidth(isShown ? '50%' : 1);
+    setShowEdit(isShown);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShown]);
   const onCopyCode = () => {
     copyTextToClipboard(code || '', (isCopy) => setCopied(isCopy));
     setTimeout(() => setCopied(false), 2000);
@@ -196,7 +204,7 @@ const CodePreview = React.forwardRef<CodePreviewRef, CodePreviewProps>((props, r
   };
   return (
     <Split data-color-mode={theme} visiable={visiable} className={cls} style={{ flex: 1, ...style }} {...otherProps}>
-      {!noPreview && !onlyEdit && (
+      {!onlyEdit && (
         <div
           className={[
             `${prefixCls}-demo`,
@@ -208,6 +216,7 @@ const CodePreview = React.forwardRef<CodePreviewRef, CodePreviewProps>((props, r
             .trim()}
           style={{
             flex: 1,
+            display: !noPreview ? 'unset' : 'none',
             ...(width === 1 ? { width: '100%' } : {}),
           }}
         >
diff --git a/src/useCodePreview.ts b/src/useCodePreview.ts
index 418fde4c..06c900cc 100644
--- a/src/useCodePreview.ts
+++ b/src/useCodePreview.ts
@@ -16,13 +16,12 @@ export const getReactDOMClient = () => {
 };
 
 export function useCodePreview(props: CodePreviewProps) {
-  const isShowEdit = props.sourceState === 'shown';
   const [demoDom, setDemoDom] = useState<HTMLDivElement>();
   const playerId = useRef(`${parseInt(String(Math.random() * 1e9), 10).toString(36)}`);
   const [fullScreen, setFullScreen] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
-  const [showEdit, setShowEdit] = useState(isShowEdit);
-  const [width, setWidth] = useState<number | string>(isShowEdit ? '50%' : 1);
+  const [showEdit, setShowEdit] = useState(false);
+  const [width, setWidth] = useState<number | string>(1);
   const [copied, setCopied] = useState(false);
   const [code, setCode] = useState(props.code || '');
 
diff --git a/website/Example.tsx b/website/Example.tsx
index d6a757ae..5680f663 100644
--- a/website/Example.tsx
+++ b/website/Example.tsx
@@ -27,6 +27,7 @@ const Example = () => {
     noScroll: false,
     noPreview: false,
     bordered: true,
+    sourceState: false,
     codeSandbox: {
       files: {
         'sandbox.config.json': {
@@ -105,6 +106,7 @@ const Example = () => {
         noScroll={state.noScroll}
         bgWhite={state.bgWhite}
         noCode={state.noCode}
+        sourceState={state.sourceState ? 'shown' : 'hidden'}
         editProps={{
           onChange: (value) => {
             setState({
@@ -166,6 +168,10 @@ const Example = () => {
           是否显示滚动条 `noScroll={state.noScroll.toString()}`
         </Switch>
         <br />
+        <Switch checked={state.sourceState} onChange={handleChange.bind(this, 'sourceState')}>
+          是否显示源码 `sourceState={state.sourceState ? 'shown' : 'hidden'}`
+        </Switch>
+        <br />
         <Switch checked={state.bordered} onChange={handleChange.bind(this, 'bordered')}>
           是否显示边框 `bordered={state.bordered.toString()}`
         </Switch>