fix: fixed line numbers and text wrapping in editor
This commit is contained in:
parent
b8dffc41e6
commit
ce119c6328
4 changed files with 76 additions and 43 deletions
|
@ -1,9 +1,14 @@
|
||||||
import React, { useState, useEffect, useRef, useMemo } from "react";
|
import React, { useState, useEffect, useRef } from "react";
|
||||||
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
||||||
import Prism from "prismjs";
|
import Prism from "prismjs";
|
||||||
import styles from "./Editor.module.css";
|
import styles from "./Editor.module.css";
|
||||||
import "../prism-themes/prism-gruvbox-dark.css";
|
import "../prism-themes/prism-gruvbox-dark.css";
|
||||||
import { CLIENT_BASE_URL, SERVER_BASE_URL, URL_REGEX } from "../../utils/constants";
|
import "../prism-themes/prism-line-numbers.css";
|
||||||
|
import {
|
||||||
|
CLIENT_BASE_URL,
|
||||||
|
SERVER_BASE_URL,
|
||||||
|
URL_REGEX,
|
||||||
|
} from "../../utils/constants";
|
||||||
import Header from "../Header/Header";
|
import Header from "../Header/Header";
|
||||||
|
|
||||||
const Editor = () => {
|
const Editor = () => {
|
||||||
|
@ -67,8 +72,7 @@ const Editor = () => {
|
||||||
if (location.pathname === `/r/${id}`) {
|
if (location.pathname === `/r/${id}`) {
|
||||||
window.location.href = data.content;
|
window.location.href = data.content;
|
||||||
}
|
}
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
setLanguage(data.language);
|
setLanguage(data.language);
|
||||||
setText(data.content);
|
setText(data.content);
|
||||||
}
|
}
|
||||||
|
@ -83,8 +87,6 @@ const Editor = () => {
|
||||||
}
|
}
|
||||||
}, [id]);
|
}, [id]);
|
||||||
|
|
||||||
const lines = useMemo(() => text.split("\n"), [text]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header isSelectVisible={!id} onLanguageChange={handleLanguageChange} />
|
<Header isSelectVisible={!id} onLanguageChange={handleLanguageChange} />
|
||||||
|
@ -96,17 +98,6 @@ const Editor = () => {
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className={styles.editor}>
|
<div className={styles.editor}>
|
||||||
<div
|
|
||||||
className={styles.line__numbers}
|
|
||||||
ref={lineNumberRef}
|
|
||||||
onScroll={handleScroll}
|
|
||||||
>
|
|
||||||
{lines.map((_, index) => (
|
|
||||||
<div key={index + 1} className={styles.line__number}>
|
|
||||||
{index + 1}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className={styles.codespace}>
|
<div className={styles.codespace}>
|
||||||
<textarea
|
<textarea
|
||||||
className={styles.codespace__textarea}
|
className={styles.codespace__textarea}
|
||||||
|
@ -117,11 +108,11 @@ const Editor = () => {
|
||||||
ref={textareaRef}
|
ref={textareaRef}
|
||||||
placeholder="</> Paste, save, share! (Pasting just a URL will shorten it!)"
|
placeholder="</> Paste, save, share! (Pasting just a URL will shorten it!)"
|
||||||
/>
|
/>
|
||||||
<pre className={styles.codespace__pre}>
|
<pre className="line-numbers">
|
||||||
<code
|
<code
|
||||||
className={`${styles.codespace__code} language-${language}`}
|
className={`${styles.codespace__code} language-${language}`}
|
||||||
>
|
>
|
||||||
{text}
|
{text + "\n"}
|
||||||
</code>
|
</code>
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,29 +9,11 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 20px 70px 0 40px;
|
overflow: hidden;
|
||||||
|
padding: 20px 70px 0 0px;
|
||||||
border-top: 1px solid #3c3836;
|
border-top: 1px solid #3c3836;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line__numbers {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-right: 20px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line__numbers::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line__number {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 1.5rem;
|
|
||||||
text-align: right;
|
|
||||||
color: var(--color-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.codespace {
|
.codespace {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -46,15 +28,14 @@
|
||||||
color: transparent;
|
color: transparent;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: calc(100% - 60.8px);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
resize: none;
|
resize: none;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
padding: 0;
|
padding: 0 0 0 60.8px;
|
||||||
overflow-y: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.codespace__pre {
|
.codespace__pre {
|
||||||
|
@ -91,7 +72,7 @@
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
.editor {
|
.editor {
|
||||||
padding: 20px 20px 0 20px;
|
padding: 20px 20px 0 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn__save {
|
.btn__save {
|
||||||
|
|
60
client/src/components/prism-themes/prism-line-numbers.css
Normal file
60
client/src/components/prism-themes/prism-line-numbers.css
Normal file
|
@ -0,0 +1,60 @@
|
||||||
|
pre {
|
||||||
|
background: transparent !important;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 0 !important;
|
||||||
|
margin-top: 0 !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[class*="language-"],
|
||||||
|
code[class*="language-"] {
|
||||||
|
/* there might be some slight offsets,
|
||||||
|
depending on what font you select */
|
||||||
|
font-family: "Roboto Mono", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* from Prism */
|
||||||
|
pre[class*="language-"].line-numbers {
|
||||||
|
padding-left: 3.8em;
|
||||||
|
counter-reset: linenumber;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[class*="language-"].line-numbers > code {
|
||||||
|
position: relative;
|
||||||
|
white-space: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-numbers .line-numbers-rows {
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
top: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
left: -3.8em;
|
||||||
|
width: 3em; /* works for line-numbers below 1000 lines */
|
||||||
|
letter-spacing: -1px;
|
||||||
|
border-right: 1px solid #999;
|
||||||
|
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-numbers-rows > span {
|
||||||
|
pointer-events: none;
|
||||||
|
display: block;
|
||||||
|
counter-increment: linenumber;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-numbers-rows > span:before {
|
||||||
|
content: counter(linenumber);
|
||||||
|
color: #999;
|
||||||
|
display: block;
|
||||||
|
padding-right: 0.8em;
|
||||||
|
text-align: right;
|
||||||
|
}
|
|
@ -7,6 +7,7 @@ export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
react(),
|
react(),
|
||||||
prismjs({
|
prismjs({
|
||||||
|
plugins: ["line-numbers"],
|
||||||
languages: [
|
languages: [
|
||||||
"c",
|
"c",
|
||||||
"cpp",
|
"cpp",
|
||||||
|
|
Loading…
Reference in a new issue