-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.js
92 lines (83 loc) · 1.93 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import dynamic from "next/dynamic";
import { useState } from "react";
import onImagePasted from "@/components/markdown/onImagePasted";
const MDEditor = dynamic(
() => import("@uiw/react-md-editor"),
{ ssr: false }
);
function HomePage() {
/* const [markdown, setMarkdown] = useState(
`---
title: ""
date: ""
excerpt: ""
cover_image: ""
authors: [""]
tags:
[
"",
"",
]
---`
); */
const [markdown, setMarkdown] = useState("")
const handleFileChange = (event) => {
const file = event.target.files[0];
if (file) {
const imagePath = `images/${file.name}`;
const updatedMarkdown = markdown.replace('cover_image: ""', `cover_image: "${imagePath}"`);
setMarkdown(updatedMarkdown);
}
};
function exportUserInfo(userInfo) {
const markdownData = userInfo;
const blob = new Blob([markdownData], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.download = "user-info.md";
link.href = url;
link.click();
}
return (
<div>
<input style={{
padding: '5px 10px',
backgroundColor: '#291BA8',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
fontSize: '15px',
}} type="file" accept="image/*" onChange={handleFileChange} />
<MDEditor
value={markdown}
onChange={
setMarkdown
}
onDrop={async (event) => {
await onImagePasted(event.dataTransfer, setMarkdown);
event.preventDefault();
}
}
style={{
minHeight : "500px"
}}
/>
<button
style={{
padding: '9px 18px',
backgroundColor: '#291BA8',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
fontSize: '15px',
}}
onClick={() => exportUserInfo(markdown)}
>
Create markdown
</button>
</div>
);
};
export default HomePage;