begin implementing paste function

This commit is contained in:
Peter Cai 2020-02-18 11:43:48 +08:00
parent 916502b56c
commit 4238027024
No known key found for this signature in database
GPG Key ID: 71F5FB4E4F3FD54F
7 changed files with 85 additions and 4 deletions

View File

@ -1 +1,2 @@
import "babel-polyfill"
import "./src/web/index"

41
package-lock.json generated
View File

@ -1409,6 +1409,35 @@
"object.assign": "^4.1.0"
}
},
"babel-polyfill": {
"version": "6.26.0",
"resolved": "https://registry.npm.taobao.org/babel-polyfill/download/babel-polyfill-6.26.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-polyfill%2Fdownload%2Fbabel-polyfill-6.26.0.tgz",
"integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
"dev": true,
"requires": {
"babel-runtime": "^6.26.0",
"core-js": "^2.5.0",
"regenerator-runtime": "^0.10.5"
}
},
"babel-runtime": {
"version": "6.26.0",
"resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
"dev": true,
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
"integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk=",
"dev": true
}
}
},
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@ -2060,6 +2089,12 @@
"integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
"dev": true
},
"core-js": {
"version": "2.6.11",
"resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.11.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-2.6.11.tgz",
"integrity": "sha1-OIMUafmSK97Y7iHJ3EaYXgOZMIw=",
"dev": true
},
"core-js-compat": {
"version": "3.6.4",
"resolved": "https://registry.npm.taobao.org/core-js-compat/download/core-js-compat-3.6.4.tgz",
@ -5717,6 +5752,12 @@
"regenerate": "^1.4.0"
}
},
"regenerator-runtime": {
"version": "0.10.5",
"resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.10.5.tgz",
"integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=",
"dev": true
},
"regenerator-transform": {
"version": "0.14.1",
"resolved": "https://registry.npm.taobao.org/regenerator-transform/download/regenerator-transform-0.14.1.tgz",

View File

@ -18,6 +18,7 @@
"@babel/preset-env": "^7.8.4",
"@babel/preset-react": "^7.8.3",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"coffee-loader": "^0.9.0",
"coffeescript": "^2.5.1",
"css-loader": "^3.4.2",

View File

@ -6,12 +6,37 @@ class Pastebin extends React.Component
super props
@state =
text: ""
pasting: false
onEditTextUpdate: (ev) =>
console.log ev.target.value
@setState
text: ev.target.value
paste: =>
return if @state.text.trim() == ""
# Set the state first to disable the button
@setState
pasting: true
# For things pasted through the web interface,
# we always assume the name is `web_paste.txt`,
# and the content type is always `text/plain`.
resp = await fetch "/paste/web_paste.txt",
method: 'PUT'
headers:
'content-type': 'text/plain'
body: @state.text
console.log resp
# Ok reponse
if resp.ok
# Body is the paste url
url = await resp.text()
console.log url
# TODO: show a dialog or something
# Reset the button
@setState
pasting: false
render: ->
<div className="content-pastebin">
<ContentEditable
@ -20,6 +45,14 @@ class Pastebin extends React.Component
value={@state.text}
highlightCode
plainText/>
<div className="content-buttons">
<button
className="button-blue"
disabled={@state.pasting}
onClick={@paste}>
Paste
</button>
</div>
</div>
export default Pastebin

View File

@ -4,6 +4,7 @@
@import './contentEditable.scss';
@import './home.scss';
@import './pastebin.scss';
@import './buttons.scss';
body, html {
margin: 0px;

View File

@ -1,13 +1,15 @@
.content-pastebin {
display: block;
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
}
.content-pastebin-edit {
display: block;
height: 100%;
width: 100%;
//display: block;
flex: 1;
//height: 100%;
//width: 100%;
overflow-y: auto;
text-align: left;
box-sizing: border-box;

View File

@ -2,6 +2,8 @@
$editable-color: rgba(0, 0, 0, 0.1);
$editable-color-active: rgba(0, 0, 0, 0.2);
$editable-radius: 5px;
// Button dimensions
$button-radius: 5px;
// Dimensions of main content card
$content-padding: 100px;
$content-width: 1000px;