mirror of
https://github.com/okiba-org/frontend.git
synced 2025-02-22 09:12:04 +00:00
feat: add codemirror editor and fix layout
This commit is contained in:
parent
870cabfa51
commit
4af0ee7105
@ -8,6 +8,10 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/view": "^6.0.3",
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@uiw/codemirror-themes": "^4.11.4",
|
||||
"@uiw/react-codemirror": "^4.11.4",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-router-dom": "^6.3.0"
|
||||
|
||||
67
pnpm-lock.yaml
generated
67
pnpm-lock.yaml
generated
@ -1,22 +1,26 @@
|
||||
lockfileVersion: 5.4
|
||||
|
||||
specifiers:
|
||||
'@codemirror/view': ^6.0.3
|
||||
'@lezer/highlight': ^1.0.0
|
||||
'@types/react': ^18.0.0
|
||||
'@types/react-dom': ^18.0.0
|
||||
'@types/react-router-dom': ^5.3.3
|
||||
'@uiw/codemirror-themes': ^4.11.4
|
||||
'@uiw/react-codemirror': ^4.11.4
|
||||
'@vitejs/plugin-react': ^1.3.0
|
||||
codemirror: ^6.0.1
|
||||
react: ^18.0.0
|
||||
react-codemirror2: ^7.2.1
|
||||
react-dom: ^18.0.0
|
||||
react-router-dom: ^6.3.0
|
||||
typescript: ^4.6.3
|
||||
vite: ^2.9.9
|
||||
|
||||
dependencies:
|
||||
codemirror: 6.0.1
|
||||
'@codemirror/view': 6.0.3
|
||||
'@lezer/highlight': 1.0.0
|
||||
'@uiw/codemirror-themes': 4.11.4
|
||||
'@uiw/react-codemirror': 4.11.4_zkjxn7zmjazops4ey5en2fchna
|
||||
react: 18.2.0
|
||||
react-codemirror2: 7.2.1_zuovgz2ulb34y4plqf6p2rpz4q
|
||||
react-dom: 18.2.0_react@18.2.0
|
||||
react-router-dom: 6.3.0_biqbaboplfbrettd7655fr4n2y
|
||||
|
||||
@ -347,6 +351,15 @@ packages:
|
||||
resolution: {integrity: sha512-qbUr94DZTe6/V1VS7LDLz11rM/1t/nJxR1El4I6UaxDEdc0aZZvq6JCLJWiRmUf95NRAnDH6fhXn+PWp9wGCIg==}
|
||||
dev: false
|
||||
|
||||
/@codemirror/theme-one-dark/6.0.0:
|
||||
resolution: {integrity: sha512-jTCfi1I8QT++3m21Ui6sU8qwu3F/hLv161KLxfvkV1cYWSBwyUanmQFs89ChobQjBHi2x7s2k71wF9WYvE8fdw==}
|
||||
dependencies:
|
||||
'@codemirror/language': 6.2.0
|
||||
'@codemirror/state': 6.1.0
|
||||
'@codemirror/view': 6.0.3
|
||||
'@lezer/highlight': 1.0.0
|
||||
dev: false
|
||||
|
||||
/@codemirror/view/6.0.3:
|
||||
resolution: {integrity: sha512-1gDBymhbx2DZzwnR/rNUu1LiQqjxBJtFiB+4uLR6tHQ6vKhTIwUsP5uZUQ7SM7JxVx3UihMynnTqjcsC+mczZg==}
|
||||
dependencies:
|
||||
@ -458,6 +471,42 @@ packages:
|
||||
resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
|
||||
dev: true
|
||||
|
||||
/@uiw/codemirror-extensions-basic-setup/4.11.4:
|
||||
resolution: {integrity: sha512-pc9pQtCQFmAH5nV9UmX37VB0+yzSFQ2kbSvLHBFST9siYnacaR6HxmkBBBbYYXwVK/n9pGZ6A8ZefAUNTFfo/A==}
|
||||
dependencies:
|
||||
'@codemirror/autocomplete': 6.0.4
|
||||
'@codemirror/commands': 6.0.1
|
||||
'@codemirror/language': 6.2.0
|
||||
'@codemirror/lint': 6.0.0
|
||||
'@codemirror/search': 6.0.0
|
||||
'@codemirror/state': 6.1.0
|
||||
'@codemirror/view': 6.0.3
|
||||
dev: false
|
||||
|
||||
/@uiw/codemirror-themes/4.11.4:
|
||||
resolution: {integrity: sha512-tp4wahAuGRhMoKNMk/6lt8nNr21UZ4zhFqdDTZZ4jLc2w4BKTQ23AkublXAM8vMSuYt/LpE+cajuq4/aSYn01w==}
|
||||
dependencies:
|
||||
'@codemirror/language': 6.2.0
|
||||
'@codemirror/state': 6.1.0
|
||||
'@codemirror/view': 6.0.3
|
||||
dev: false
|
||||
|
||||
/@uiw/react-codemirror/4.11.4_zkjxn7zmjazops4ey5en2fchna:
|
||||
resolution: {integrity: sha512-p7DNBI6kj+DUzTe7MjBJwZ3qo0nSOav7T0MEGRpRNZA9ZO3RnzhPMie6swDA8e3dz1s59l9UdFB1fgyam1vFhQ==}
|
||||
peerDependencies:
|
||||
'@codemirror/view': '>=6.0.0'
|
||||
react: '>=16.8.0'
|
||||
react-dom: '>=16.8.0'
|
||||
dependencies:
|
||||
'@babel/runtime': 7.18.6
|
||||
'@codemirror/theme-one-dark': 6.0.0
|
||||
'@codemirror/view': 6.0.3
|
||||
'@uiw/codemirror-extensions-basic-setup': 4.11.4
|
||||
codemirror: 6.0.1
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0_react@18.2.0
|
||||
dev: false
|
||||
|
||||
/@vitejs/plugin-react/1.3.2:
|
||||
resolution: {integrity: sha512-aurBNmMo0kz1O4qRoY+FM4epSA39y3ShWGuqfLRA/3z0oEJAdtoSfgA3aO98/PCCHAqMaduLxIxErWrVKIFzXA==}
|
||||
engines: {node: '>=12.0.0'}
|
||||
@ -883,16 +932,6 @@ packages:
|
||||
source-map-js: 1.0.2
|
||||
dev: true
|
||||
|
||||
/react-codemirror2/7.2.1_zuovgz2ulb34y4plqf6p2rpz4q:
|
||||
resolution: {integrity: sha512-t7YFmz1AXdlImgHXA9Ja0T6AWuopilub24jRaQdPVbzUJVNKIYuy3uCFZYa7CE5S3UW6SrSa5nAqVQvtzRF9gw==}
|
||||
peerDependencies:
|
||||
codemirror: 5.x
|
||||
react: '>=15.5 <=16.x'
|
||||
dependencies:
|
||||
codemirror: 6.0.1
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/react-dom/18.2.0_react@18.2.0:
|
||||
resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
|
||||
peerDependencies:
|
||||
|
||||
@ -6,8 +6,12 @@ function App() {
|
||||
return (
|
||||
<Router>
|
||||
<div
|
||||
className="App"
|
||||
style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
|
||||
className="container"
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
}}>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/:id" element={<Paste />} />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
const BottomBar = () => {
|
||||
return (
|
||||
<div
|
||||
<footer
|
||||
style={{
|
||||
height: "5vh",
|
||||
minHeight: "30px",
|
||||
@ -9,7 +9,6 @@ const BottomBar = () => {
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
paddingInline: "20px",
|
||||
justifySelf: "end",
|
||||
}}
|
||||
className="BottomBar">
|
||||
<a
|
||||
@ -26,8 +25,8 @@ const BottomBar = () => {
|
||||
className="controls"
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyItems: "center",
|
||||
marginBottom: "2px",
|
||||
alignItems: "center",
|
||||
}}>
|
||||
<ButtonControl text="raw" link="/" />
|
||||
<Separator />
|
||||
@ -35,7 +34,7 @@ const BottomBar = () => {
|
||||
<Separator />
|
||||
<ButtonControl text="source" link="/" />
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,19 +1,22 @@
|
||||
import CodeMirror from "@uiw/react-codemirror";
|
||||
import { GithubDark } from "./EditorTheme";
|
||||
|
||||
const Editor = () => {
|
||||
return (
|
||||
<textarea
|
||||
// TODO: custom implementation?
|
||||
// TODO: fix line wrap
|
||||
<CodeMirror
|
||||
className="editor"
|
||||
autoFocus={true}
|
||||
height="100%"
|
||||
style={{
|
||||
width: "auto",
|
||||
backgroundColor: "black",
|
||||
padding: "10px",
|
||||
resize: "none",
|
||||
borderWidth: 0,
|
||||
width: "100%",
|
||||
flex: 1,
|
||||
color: "#fbfbfb",
|
||||
fontSize: 16,
|
||||
outline: "none",
|
||||
overflowY: "auto",
|
||||
fontFamily: "IBM Plex Mono",
|
||||
fontSize: "1rem",
|
||||
}}
|
||||
theme={GithubDark}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
34
src/components/EditorTheme.tsx
Normal file
34
src/components/EditorTheme.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import { tags as t } from "@lezer/highlight";
|
||||
import { createTheme } from "@uiw/codemirror-themes";
|
||||
|
||||
export const GithubDark = createTheme({
|
||||
theme: "dark",
|
||||
settings: {
|
||||
background: "black",
|
||||
// gutterBackground: "#0B0E14",
|
||||
gutterBackground: "black",
|
||||
gutterForeground: "#B8D7A3",
|
||||
foreground: "#c9d1d9",
|
||||
caret: "#c9d1d9",
|
||||
selection: "#003d73",
|
||||
selectionMatch: "#003d73",
|
||||
lineHighlight: "transparent",
|
||||
},
|
||||
styles: [
|
||||
{ tag: [t.comment, t.bracket], color: "#8b949e" },
|
||||
{ tag: [t.className, t.propertyName], color: "#d2a8ff" },
|
||||
{
|
||||
tag: [t.variableName, t.attributeName, t.number, t.operator],
|
||||
color: "#79c0ff",
|
||||
},
|
||||
{
|
||||
tag: [t.keyword, t.typeName, t.typeOperator, t.typeName],
|
||||
color: "#ff7b72",
|
||||
},
|
||||
{ tag: [t.string, t.meta, t.regexp], color: "#a5d6ff" },
|
||||
{ tag: [t.name, t.quote], color: "#7ee787" },
|
||||
{ tag: [t.heading], color: "#d2a8ff", fontWeight: "bold" },
|
||||
{ tag: [t.emphasis], color: "#d2a8ff", fontStyle: "italic" },
|
||||
{ tag: [t.deleted], color: "#ffdcd7", backgroundColor: "#ffeef0" },
|
||||
],
|
||||
});
|
||||
@ -1,14 +1,17 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap');
|
||||
|
||||
* {
|
||||
padding: 0%;
|
||||
margin: 0%;
|
||||
margin: 0;
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
}
|
||||
|
||||
body{
|
||||
body {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
background: black;
|
||||
color: white;
|
||||
/* min-height: 100%; */
|
||||
}
|
||||
|
||||
#root {
|
||||
height: 100vh;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user