From f5d3a26ae1c4a47e4401cf11e2148714ffe302aa Mon Sep 17 00:00:00 2001 From: alok8bb Date: Thu, 14 Jul 2022 21:45:11 +0530 Subject: [PATCH] feat: paste post route and editor keybinding --- package.json | 1 + pnpm-lock.yaml | 58 +++++++++++++++++++++++++++++++++++++++ src/components/Editor.tsx | 34 +++++++++++++++++++++++ 3 files changed, 93 insertions(+) diff --git a/package.json b/package.json index a6e1972..4bf8d37 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@lezer/highlight": "^1.0.0", "@uiw/codemirror-themes": "^4.11.4", "@uiw/react-codemirror": "^4.11.4", + "axios": "^0.27.2", "react": "^18.0.0", "react-dom": "^18.0.0", "react-router-dom": "^6.3.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 77cc0ff..371d637 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,6 +9,7 @@ specifiers: '@uiw/codemirror-themes': ^4.11.4 '@uiw/react-codemirror': ^4.11.4 '@vitejs/plugin-react': ^1.3.0 + axios: ^0.27.2 react: ^18.0.0 react-dom: ^18.0.0 react-router-dom: ^6.3.0 @@ -20,6 +21,7 @@ dependencies: '@lezer/highlight': 1.0.0 '@uiw/codemirror-themes': 4.11.4 '@uiw/react-codemirror': 4.11.4_zkjxn7zmjazops4ey5en2fchna + axios: 0.27.2 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 react-router-dom: 6.3.0_biqbaboplfbrettd7655fr4n2y @@ -530,6 +532,19 @@ packages: color-convert: 1.9.3 dev: true + /asynckit/0.4.0: + resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} + dev: false + + /axios/0.27.2: + resolution: {integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==} + dependencies: + follow-redirects: 1.15.1 + form-data: 4.0.0 + transitivePeerDependencies: + - debug + dev: false + /browserslist/4.21.1: resolution: {integrity: sha512-Nq8MFCSrnJXSc88yliwlzQe3qNe3VntIjhsArW9IJOEPSHNx23FalwApUVbzAWABLhYJJ7y8AynWI/XM8OdfjQ==} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} @@ -576,6 +591,13 @@ packages: resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==} dev: true + /combined-stream/1.0.8: + resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} + engines: {node: '>= 0.8'} + dependencies: + delayed-stream: 1.0.0 + dev: false + /convert-source-map/1.8.0: resolution: {integrity: sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==} dependencies: @@ -602,6 +624,11 @@ packages: ms: 2.1.2 dev: true + /delayed-stream/1.0.0: + resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} + engines: {node: '>=0.4.0'} + dev: false + /electron-to-chromium/1.4.187: resolution: {integrity: sha512-t3iFLHVIMhB8jGZ+8ui951nz6Bna5qKfhxezG3wzXdBJ79qFKPsE2chjjVFNqC1ewhfrPQrw9pmVeo4FFpZeQA==} dev: true @@ -828,6 +855,25 @@ packages: resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} dev: true + /follow-redirects/1.15.1: + resolution: {integrity: sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==} + engines: {node: '>=4.0'} + peerDependencies: + debug: '*' + peerDependenciesMeta: + debug: + optional: true + dev: false + + /form-data/4.0.0: + resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==} + engines: {node: '>= 6'} + dependencies: + asynckit: 0.4.0 + combined-stream: 1.0.8 + mime-types: 2.1.35 + dev: false + /fsevents/2.3.2: resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} @@ -896,6 +942,18 @@ packages: js-tokens: 4.0.0 dev: false + /mime-db/1.52.0: + resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} + engines: {node: '>= 0.6'} + dev: false + + /mime-types/2.1.35: + resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==} + engines: {node: '>= 0.6'} + dependencies: + mime-db: 1.52.0 + dev: false + /ms/2.1.2: resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} dev: true diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx index 67f337f..c3706cc 100644 --- a/src/components/Editor.tsx +++ b/src/components/Editor.tsx @@ -1,14 +1,48 @@ import CodeMirror from "@uiw/react-codemirror"; +import React, { useCallback, useState } from "react"; import { GithubDark } from "./EditorTheme"; +import axios from "axios"; +import { useNavigate } from "react-router-dom"; const Editor = () => { + const [code, setCode] = useState(""); + let navigate = useNavigate(); + + // TODO: fix this callback thing later + const postPaste = useCallback(async () => { + let res = await axios.post("http://localhost:8080/bin/paste", code, { + headers: { "Content-type": "text/plain" }, + }); + + if (res.status !== 200) { + alert("Something went wrong!"); + console.log(res); + } + navigate(`/${res.data["endpoint"]}`); + }, [code]); + + const handleSavePaste = async ( + event: React.KeyboardEvent, + ) => { + if ((event.ctrlKey || event.metaKey) && event.code === "KeyS") { + event.preventDefault(); + postPaste(); + } + }; + + const placeholder = `// paste code here, use ctrl + s to save`; return ( // TODO: custom implementation? // TODO: fix line wrap { + setCode(value); + }} style={{ width: "100%", flex: 1,