1+ import Head from 'next/head' ;
2+ import { useState , useEffect } from 'react' ;
3+ import dynamic from 'next/dynamic' ;
4+ import { StandardNav } from '@/components/StandardNav' ;
5+ import { Footer } from '@/components/Footer' ;
6+ import request from "@/utils/request" ;
7+ import { MarkdownViewer } from '@/components/MarkdownViewer' ;
8+
9+ export default function Create ( ) {
10+ const [ isOpen , setIsOpen ] = useState ( false ) ;
11+ const [ contentPreview , setContentPreview ] = useState ( '' ) ;
12+ const [ title , setTitle ] = useState ( '' ) ;
13+ useEffect ( ( ) => {
14+ try {
15+ request ( `${ process . env . NEXT_PUBLIC_API_URL } , "GET" , null )
16+ . then ( ( data ) => {
17+ // Handle data
18+ } )
19+ . catch ( ( err ) => {
20+ console . log ( err ) ;
21+ } ) ;
22+ } catch ( error ) {
23+ console . error ( error ) ;
24+ }
25+ } , [ ] ) ;
26+
27+ const handleLoad = ( event ) => {
28+ // let cid = router.query.id; // Challenge ID
29+
30+
31+ }
32+
33+ const initWriteup = ( event ) => {
34+ // Fetch the data from the form
35+ try {
36+ request ( `${ process . env . NEXT_PUBLIC_API_URL } , "POST" , {
37+ title : "Untitled Writeup" ,
38+ content : "" ,
39+ } )
40+ . then ( ( data ) => {
41+ // hide loader
42+ } )
43+ . catch ( ( err ) => {
44+ console . log ( err ) ;
45+ } ) ;
46+
47+ } catch ( error ) {
48+ console . error ( error ) ;
49+ }
50+
51+ } ;
52+
53+
54+ const insertText = ( text ) => {
55+ const textarea = document . getElementById ( 'content' ) ;
56+ const startPos = textarea . selectionStart ;
57+ const endPos = textarea . selectionEnd ;
58+ const newValue = textarea . value . substring ( 0 , startPos ) + text + textarea . value . substring ( endPos , textarea . value . length ) ;
59+ setContentPreview ( newValue ) ;
60+ textarea . focus ( ) ;
61+ textarea . selectionEnd = startPos + text . length ;
62+ } ;
63+
64+ return (
65+ < >
66+ < Head >
67+ < title > Create - CTFGuide</ title >
68+ < style >
69+ @import url('https://fonts.googleapis.com/css2?family=Poppins& display = swap ') ;
70+ </ style >
71+ </ Head >
72+ < StandardNav />
73+ < main className = 'flex items-center justify-center min-h-screen text-center' >
74+ < div className = 'center text-center mx-auto' >
75+ < h1 > < i className = "fas fa-spinner text-white fa-spin text-4xl mb-5" > </ i > </ h1 >
76+ < h1 className = 'text-white text-xl' > Setting up CTFGuide Editor</ h1 >
77+ </ div >
78+ </ main >
79+ < main className = 'hidden' >
80+
81+
82+ < div className = 'text-white text-xl px-6 py-4 w-full bg-neutral-800 flex' >
83+ < div >
84+ < h1 > CTFGuide Editor < span className = 'bg-blue-600 px-2 rounded-lg text-sm' > BETA</ span > </ h1 >
85+ </ div >
86+
87+ < div className = 'ml-auto text-sm ' >
88+ < button className = 'bg-red-600 px-4 py-1 mr-3 rounded-lg' > < i className = "fas fa-trash fa-fw" > </ i > Delete</ button >
89+
90+ < button className = 'bg-indigo-600 px-4 py-1 mr-3 rounded-lg' > < i className = "fas fa-save fa-fw" > </ i > Save</ button >
91+ < button className = 'bg-green-600 px-4 py-1 mr-3 rounded-lg' > < i className = "fas fa-rocket fa-fw" > </ i > Publish</ button >
92+ </ div >
93+ </ div >
94+
95+ < div className = 'px-6 mx-auto' >
96+ < input
97+ value = { title }
98+ onChange = { ( event ) => setTitle ( event . target . value ) }
99+ className = 'px-0 mt-2 bg-transparent border-none w-full text-white text-4xl placeholder-neutral-700 focus:outline-none focus:ring-0 focus:border-transparent focus:shadow-none'
100+ placeholder = 'Enter your title here'
101+ autoFocus
102+ />
103+ < div className = 'grid grid-cols-2 gap-x-10 border-t border-neutral-800 ' >
104+ < div className = 'mt-3' >
105+ < div className = "toolbar py-1 " >
106+ < button onClick = { ( ) => insertText ( '**bold**' ) } className = "toolbar-button text-white pr-2 mr-1" >
107+ < i className = "fas fa-bold" > </ i >
108+ </ button >
109+ < button onClick = { ( ) => insertText ( '*italic*' ) } className = "toolbar-button text-white px-2 mr-1" >
110+ < i className = "fas fa-italic" > </ i >
111+ </ button >
112+ < button onClick = { ( ) => insertText ( '# Heading' ) } className = "toolbar-button text-white px-2 mr-1" >
113+ < i className = "fas fa-heading" > </ i >
114+ </ button >
115+ < button onClick = { ( ) => insertText ( '[link](url)' ) } className = "toolbar-button text-white px-2 mr-1" >
116+ < i className = "fas fa-link" > </ i >
117+ </ button >
118+ < button onClick = { ( ) => insertText ( '```Code```' ) } className = "toolbar-button text-white px-2 mr-1" >
119+ < i className = "fas fa-code" > </ i >
120+ </ button >
121+ </ div >
122+ < textarea
123+ value = { contentPreview }
124+ id = "content"
125+ placeholder = "You can use Markdown here!"
126+ style = { { height : 'calc(100vh - 200px)' } }
127+ className = "px-0 h-full w-full rounded-lg border-none placeholder-neutral-700 bg-neutral-900 px-5 py-4 text-white focus:outline-none focus:ring-0 focus:border-transparent focus:shadow-none"
128+ onChange = { ( event ) => {
129+ setContentPreview ( event . target . value ) ;
130+ } }
131+ />
132+ </ div >
133+ < div className = 'border-l border-neutral-800' >
134+ < div contentEditable = { false } className = 'text-white py-4 px-4' >
135+ < MarkdownViewer content = { contentPreview } />
136+ </ div >
137+ </ div >
138+ </ div >
139+ </ div >
140+ </ main >
141+
142+
143+
144+ < div className = "hidden center fixed bottom-6 right-6 rounded-md bg-neutral-800/50 text-sm text-white p-2 opacity-40" >
145+ Automatically saved at 12:22AM.
146+ </ div >
147+
148+
149+
150+
151+
152+
153+ < div className = 'hidden flex w-full h-full grow basis-0' > </ div >
154+ < Footer />
155+ </ >
156+ ) ;
157+ }
0 commit comments