From eb7f1225bd39a682213d090570e715a52def11eb Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Wed, 24 Jan 2024 13:40:07 +0800
Subject: [PATCH] fix: overflow for source code editor (#2014)

* fix: source code should wrap

* fix: code scroll

* chore: optimize

* chore: code opt

* chore: code clean
---
 .../builtins/SourceCode/index.less            | 25 +++++
 .../builtins/SourceCode/index.tsx             | 92 +++++++++++--------
 .../slots/SourceCodeEditor/index.less         | 26 +++++-
 .../slots/SourceCodeEditor/index.tsx          | 66 +++++++------
 4 files changed, 132 insertions(+), 77 deletions(-)

diff --git a/src/client/theme-default/builtins/SourceCode/index.less b/src/client/theme-default/builtins/SourceCode/index.less
index 18b9387530..26020477df 100644
--- a/src/client/theme-default/builtins/SourceCode/index.less
+++ b/src/client/theme-default/builtins/SourceCode/index.less
@@ -25,7 +25,32 @@
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 
+  &-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 {
+      width: max-content;
+      position: relative;
+      overflow: visible;
+    }
+  }
+
   > pre.prism-code {
+    overflow: auto;
+  }
+
+  > pre.prism-code,
+  &-scroll-content > pre.prism-code {
     margin: 0;
     padding: 18px 24px;
     font-size: 14px;
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 0385bf44a4..6bd7d61ca5 100644
--- a/src/client/theme-default/slots/SourceCodeEditor/index.less
+++ b/src/client/theme-default/slots/SourceCodeEditor/index.less
@@ -30,11 +30,7 @@
     }
 
     &: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%);
@@ -42,4 +38,26 @@
       }
     }
   }
+
+  &::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 {
+      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>