Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-24 22:05:56 -05:00
Code Issues Activity

Merge pull request #835 from logto-io/charles-log-2452-fix-long-text-wrapping-issue-in-code-editor

Browse source 
fix(console): long text should wrap in code editor
This commit is contained in:
Charles Zhao 2022-05-16 00:12:07 +08:00 • committed by GitHub
commit c7d43ee823
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/console/src/components/CodeEditor/index.module.scss
View file

@ -36,10 +36,9 @@
background: none;
font-size: 14px;
line-height: 1.5;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-family: 'Roboto Mono', monospace;
white-space: pre-wrap;
word-break: keep-all;
overflow-wrap: break-word;
word-break: break-all;
position: absolute;
inset: 0;
resize: none;

13
packages/console/src/components/CodeEditor/index.tsx
View file

@ -22,6 +22,8 @@ const CodeEditor = ({ language, isReadonly = false, value = '', onChange }: Prop
<div className={styles.container}>
<CopyToClipboard value={value} variant="icon" className={styles.copy} />
<div className={styles.editor}>
{/* SyntaxHighlighter is a readonly component, so a transparent <textarea> layer is needed
in order to support user interactions, such as code editing, copy-pasting, etc. */}
<textarea
autoCapitalize="off"
autoComplete="off"
@ -32,13 +34,24 @@ const CodeEditor = ({ language, isReadonly = false, value = '', onChange }: Prop
value={value}
onChange={handleChange}
/>
{/* SyntaxHighlighter will generate a <pre> tag and a inner <code> tag. Both have
inline-styles by default. Therefore, We can only use inline styles to customize them.
Some styles have to be applied multiple times to each of them for the sake of consistency. */}
<SyntaxHighlighter
wrapLongLines
codeTagProps={{
style: {
fontFamily: "'Roboto Mono', monospace", // Override default font-family of <code>
},
}}
customStyle={{
background: 'transparent',
fontSize: '14px',
margin: '0',
padding: '0',
borderRadius: '0',
wordBreak: 'break-all',
fontFamily: "'Roboto Mono', monospace", // Override default font-family of <pre>
}}
language={language}
style={theme}