From a31e54074fe2f9c7dbf1d5678072dccc800730f0 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Tue, 16 Jan 2024 20:32:05 +0800
Subject: [PATCH 1/5] fix: source code should wrap

---
 src/client/theme-default/builtins/SourceCode/index.less    | 3 +++
 src/client/theme-default/slots/SourceCodeEditor/index.less | 5 +++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/client/theme-default/builtins/SourceCode/index.less b/src/client/theme-default/builtins/SourceCode/index.less
index 18b9387530..5234f9be85 100644
--- a/src/client/theme-default/builtins/SourceCode/index.less
+++ b/src/client/theme-default/builtins/SourceCode/index.less
@@ -32,6 +32,9 @@
     line-height: 1.58;
     direction: ltr;
     background: transparent;
+    white-space: pre-wrap;
+    word-break: keep-all;
+    overflow-wrap: break-word;
 
     // remove shadow from coy theme
     &::before,
diff --git a/src/client/theme-default/slots/SourceCodeEditor/index.less b/src/client/theme-default/slots/SourceCodeEditor/index.less
index 0385bf44a4..bf84b31575 100644
--- a/src/client/theme-default/slots/SourceCodeEditor/index.less
+++ b/src/client/theme-default/slots/SourceCodeEditor/index.less
@@ -13,8 +13,6 @@
     height: 100%;
     color: transparent;
     caret-color: @c-text;
-    overflow-wrap: normal;
-    white-space: pre;
     box-sizing: border-box;
     background: transparent;
     opacity: 1;
@@ -24,6 +22,9 @@
     overflow: hidden;
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
+    white-space: pre-wrap;
+    word-break: keep-all;
+    overflow-wrap: break-word;
 
     @{dark-selector} & {
       caret-color: @c-text-dark;

From 4a6d8b10e8b07e37852c1d4dee873ee5ec145ea8 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Tue, 23 Jan 2024 22:06:30 +0800
Subject: [PATCH 2/5] fix: code scroll

---
 .../builtins/SourceCode/index.less            | 23 ++++-
 .../builtins/SourceCode/index.tsx             | 92 +++++++++++--------
 .../slots/SourceCodeEditor/index.less         | 28 ++++--
 .../slots/SourceCodeEditor/index.tsx          | 66 +++++++------
 4 files changed, 125 insertions(+), 84 deletions(-)

diff --git a/src/client/theme-default/builtins/SourceCode/index.less b/src/client/theme-default/builtins/SourceCode/index.less
index 5234f9be85..f306186090 100644
--- a/src/client/theme-default/builtins/SourceCode/index.less
+++ b/src/client/theme-default/builtins/SourceCode/index.less
@@ -25,16 +25,31 @@
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 
-  > pre.prism-code {
+  &-scroll-container {
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-scroll-content {
+    position: relative;
+    width: max-content;
+    height: max-content;
+    min-width: 100%;
+    min-height: 100%;
+  }
+
+  > pre.prism-code,
+  &-scroll-content > pre.prism-code {
     margin: 0;
     padding: 18px 24px;
     font-size: 14px;
     line-height: 1.58;
     direction: ltr;
     background: transparent;
-    white-space: pre-wrap;
-    word-break: keep-all;
-    overflow-wrap: break-word;
+    overflow: visible;
+    width: max-content;
+    position: relative;
 
     // remove shadow from coy theme
     &::before,
diff --git a/src/client/theme-default/builtins/SourceCode/index.tsx b/src/client/theme-default/builtins/SourceCode/index.tsx
index ed6b4af4ed..efd907dad5 100644
--- a/src/client/theme-default/builtins/SourceCode/index.tsx
+++ b/src/client/theme-default/builtins/SourceCode/index.tsx
@@ -27,6 +27,7 @@ interface SourceCodeProps {
   lang: Language;
   highlightLines?: number[];
   extra?: ReactNode;
+  textarea?: ReactNode;
 }
 
 const SourceCode: FC<SourceCodeProps> = (props) => {
@@ -44,6 +45,48 @@ const SourceCode: FC<SourceCodeProps> = (props) => {
     }
   }, [lang, children]);
 
+  const code = (
+    <Highlight
+      {...defaultProps}
+      code={children}
+      language={SIMILAR_DSL[lang] || lang}
+      theme={undefined}
+    >
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <pre className={className} style={style}>
+          {tokens.map((line, i) => (
+            <div
+              key={String(i)}
+              className={classNames({
+                highlighted: highlightLines.includes(i + 1),
+                wrap: themeConfig.showLineNum,
+              })}
+            >
+              {themeConfig.showLineNum && (
+                <span className="token-line-num">{i + 1}</span>
+              )}
+              <div
+                {...getLineProps({
+                  line,
+                  key: i,
+                })}
+                className={classNames({
+                  'line-cell': themeConfig.showLineNum,
+                })}
+              >
+                {line.map((token, key) => (
+                  // getTokenProps 返回值包含 key
+                  // eslint-disable-next-line react/jsx-key
+                  <span {...getTokenProps({ token, key })} />
+                ))}
+              </div>
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  );
+
   return (
     <div className="dumi-default-source-code">
       <CopyToClipboard
@@ -62,45 +105,16 @@ const SourceCode: FC<SourceCodeProps> = (props) => {
           {isCopied ? <IconCheck /> : <IconCopy />}
         </button>
       </CopyToClipboard>
-      <Highlight
-        {...defaultProps}
-        code={children}
-        language={SIMILAR_DSL[lang] || lang}
-        theme={undefined}
-      >
-        {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <pre className={className} style={style}>
-            {tokens.map((line, i) => (
-              <div
-                key={String(i)}
-                className={classNames({
-                  highlighted: highlightLines.includes(i + 1),
-                  wrap: themeConfig.showLineNum,
-                })}
-              >
-                {themeConfig.showLineNum && (
-                  <span className="token-line-num">{i + 1}</span>
-                )}
-                <div
-                  {...getLineProps({
-                    line,
-                    key: i,
-                  })}
-                  className={classNames({
-                    'line-cell': themeConfig.showLineNum,
-                  })}
-                >
-                  {line.map((token, key) => (
-                    // getTokenProps 返回值包含 key
-                    // eslint-disable-next-line react/jsx-key
-                    <span {...getTokenProps({ token, key })} />
-                  ))}
-                </div>
-              </div>
-            ))}
-          </pre>
-        )}
-      </Highlight>
+      {props.textarea ? (
+        <div className="dumi-default-source-code-scroll-container">
+          <div className="dumi-default-source-code-scroll-content">
+            {code}
+            {props.textarea}
+          </div>
+        </div>
+      ) : (
+        code
+      )}
       {props.extra}
     </div>
   );
diff --git a/src/client/theme-default/slots/SourceCodeEditor/index.less b/src/client/theme-default/slots/SourceCodeEditor/index.less
index bf84b31575..d6058adaf6 100644
--- a/src/client/theme-default/slots/SourceCodeEditor/index.less
+++ b/src/client/theme-default/slots/SourceCodeEditor/index.less
@@ -13,6 +13,8 @@
     height: 100%;
     color: transparent;
     caret-color: @c-text;
+    overflow-wrap: normal;
+    white-space: pre;
     box-sizing: border-box;
     background: transparent;
     opacity: 1;
@@ -22,20 +24,13 @@
     overflow: hidden;
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
-    white-space: pre-wrap;
-    word-break: keep-all;
-    overflow-wrap: break-word;
 
     @{dark-selector} & {
       caret-color: @c-text-dark;
     }
 
     &:focus {
-      box-shadow: 0 0 0 1px lighten(@c-primary, 20%) inset;
-
       @{dark-selector} & {
-        box-shadow: 0 0 0 1px darken(@c-primary-dark, 20%) inset;
-
         // for firefox because its selection color is not translucent when color-scheme is dark
         &::selection {
           background-color: fade(@c-primary-dark, 30%);
@@ -43,4 +38,23 @@
       }
     }
   }
+
+  &:focus-within {
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: 0;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
+      box-shadow: 0 0 0 1px @c-primary inset;
+
+      @{dark-selector} & {
+        box-shadow: 0 0 0 1px @c-primary-dark inset;
+      }
+    }
+  }
 }
diff --git a/src/client/theme-default/slots/SourceCodeEditor/index.tsx b/src/client/theme-default/slots/SourceCodeEditor/index.tsx
index 4fbb023121..da7af47cbe 100644
--- a/src/client/theme-default/slots/SourceCodeEditor/index.tsx
+++ b/src/client/theme-default/slots/SourceCodeEditor/index.tsx
@@ -51,45 +51,43 @@ const SourceCodeEditor: FC<ISourceCodeEditorProps> = (props) => {
     <div className="dumi-default-source-code-editor" ref={elm}>
       <SourceCode
         {...props}
-        extra={
+        textarea={
           style && (
-            <>
-              <textarea
-                className="dumi-default-source-code-editor-textarea"
-                style={style}
-                value={code}
-                onChange={(ev) => {
-                  setCode(ev.target.value);
-                  props.onChange?.(ev.target.value);
-                  // FIXME: remove before publish
-                  props.onTranspile?.({ err: null, code: ev.target.value });
-                }}
-                onKeyDown={(ev) => {
-                  // support tab to space
-                  if (ev.key === 'Tab') {
-                    ev.preventDefault();
+            <textarea
+              className="dumi-default-source-code-editor-textarea"
+              style={style}
+              value={code}
+              onChange={(ev) => {
+                setCode(ev.target.value);
+                props.onChange?.(ev.target.value);
+                // FIXME: remove before publish
+                props.onTranspile?.({ err: null, code: ev.target.value });
+              }}
+              onKeyDown={(ev) => {
+                // support tab to space
+                if (ev.key === 'Tab') {
+                  ev.preventDefault();
 
-                    const elm = ev.currentTarget;
-                    const { selectionStart: start, selectionEnd: end } = elm;
-                    const before = elm.value.substring(0, start);
-                    const after = elm.value.substring(end);
-                    const spaces = '  ';
-                    const pos = spaces.length + start;
+                  const elm = ev.currentTarget;
+                  const { selectionStart: start, selectionEnd: end } = elm;
+                  const before = elm.value.substring(0, start);
+                  const after = elm.value.substring(end);
+                  const spaces = '  ';
+                  const pos = spaces.length + start;
 
-                    setCode(`${before}${spaces}${after}`);
-                    setTimeout(() => {
-                      elm.setSelectionRange(pos, pos);
-                    });
-                  }
-                }}
-                autoComplete="off"
-                autoCorrect="off"
-                autoSave="off"
-              />
-              {props.extra}
-            </>
+                  setCode(`${before}${spaces}${after}`);
+                  setTimeout(() => {
+                    elm.setSelectionRange(pos, pos);
+                  });
+                }
+              }}
+              autoComplete="off"
+              autoCorrect="off"
+              autoSave="off"
+            />
           )
         }
+        extra={style && props.extra}
       >
         {code}
       </SourceCode>

From 1d9e59731f69db100ed9aa22646c9d5d3311c946 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Wed, 24 Jan 2024 10:02:49 +0800
Subject: [PATCH 3/5] chore: optimize

---
 .../slots/SourceCodeEditor/index.less         | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/client/theme-default/slots/SourceCodeEditor/index.less b/src/client/theme-default/slots/SourceCodeEditor/index.less
index d6058adaf6..6bd7d61ca5 100644
--- a/src/client/theme-default/slots/SourceCodeEditor/index.less
+++ b/src/client/theme-default/slots/SourceCodeEditor/index.less
@@ -39,17 +39,20 @@
     }
   }
 
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+
   &:focus-within {
     &::after {
-      content: '';
-      position: absolute;
-      z-index: 0;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border-bottom-left-radius: 3px;
-      border-bottom-right-radius: 3px;
       box-shadow: 0 0 0 1px @c-primary inset;
 
       @{dark-selector} & {

From f1574bd2ccc9df1f9ddc6020a66544158749db22 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Wed, 24 Jan 2024 10:59:36 +0800
Subject: [PATCH 4/5] chore: code opt

---
 examples/normal/.dumirc.ts                          |  1 +
 .../theme-default/builtins/SourceCode/index.less    | 13 ++++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/examples/normal/.dumirc.ts b/examples/normal/.dumirc.ts
index b5a7c1c952..36b2c46720 100644
--- a/examples/normal/.dumirc.ts
+++ b/examples/normal/.dumirc.ts
@@ -7,4 +7,5 @@ export default {
   mfsu: false,
   apiParser: {},
   resolve: { entryFile: './src/index.ts' },
+  ssr: {},
 };
diff --git a/src/client/theme-default/builtins/SourceCode/index.less b/src/client/theme-default/builtins/SourceCode/index.less
index f306186090..26020477df 100644
--- a/src/client/theme-default/builtins/SourceCode/index.less
+++ b/src/client/theme-default/builtins/SourceCode/index.less
@@ -37,6 +37,16 @@
     height: max-content;
     min-width: 100%;
     min-height: 100%;
+
+    > pre.prism-code {
+      width: max-content;
+      position: relative;
+      overflow: visible;
+    }
+  }
+
+  > pre.prism-code {
+    overflow: auto;
   }
 
   > pre.prism-code,
@@ -47,9 +57,6 @@
     line-height: 1.58;
     direction: ltr;
     background: transparent;
-    overflow: visible;
-    width: max-content;
-    position: relative;
 
     // remove shadow from coy theme
     &::before,

From dcb49917d1bbd447897626c0e13b0c6911f84a2e Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Wed, 24 Jan 2024 11:05:01 +0800
Subject: [PATCH 5/5] chore: code clean

---
 examples/normal/.dumirc.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/normal/.dumirc.ts b/examples/normal/.dumirc.ts
index 36b2c46720..b5a7c1c952 100644
--- a/examples/normal/.dumirc.ts
+++ b/examples/normal/.dumirc.ts
@@ -7,5 +7,4 @@ export default {
   mfsu: false,
   apiParser: {},
   resolve: { entryFile: './src/index.ts' },
-  ssr: {},
 };