Skip to content

Commit b124bcf

Browse files
adarshrkumaradarshrkumar
committed
update!
1 parent 466b00b commit b124bcf

File tree

14 files changed

+120
-65
lines changed

14 files changed

+120
-65
lines changed

‎CNAME‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎actions.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
var queryString = window.location.search;
22
var urlParams = new URLSearchParams(queryString);
33
var action = urlParams.get('action')
4-
var tempCode = ''
4+
var codeObj = {}
55

66
if (action === 'upload' || action === 'new') {
77

@@ -37,7 +37,7 @@ else if (action === 'openfile') {
3737
}
3838
else {
3939
if (location.pathname === '/codeEditor.html') {
40-
setCode(fContent)
40+
setCode(fContent, file.extension)
4141
}
4242
else setContent(fContent)
4343
}
@@ -59,11 +59,16 @@ function getContent() {
5959
return fContent
6060
}
6161

62-
function setCode(c) {
63-
tempCode = c
62+
function setCode(c, ext) {
63+
codeObj = {
64+
content: c,
65+
ext: ext,
66+
}
6467
}
6568

6669
function setContent(c) {
67-
if (c.includes('\n')) c = c.split('\n').join('<br>')
70+
// if (c.includes('\n')) c = c.split('\n').join('<br>')
71+
// Convert markdown to HTML using marked
72+
c = marked.parse(c);
6873
document.querySelector('textarea').value = c;
6974
}

‎codeEditor.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width">
@@ -14,11 +14,11 @@
1414
</head>
1515
<body>
1616
<header class="toolbar">
17-
<div style="display: none;">
17+
<!-- <div>
1818
<label for="title">
1919
<b>Title: </b>
2020
</label>
21-
</div>
21+
</div> -->
2222
<div>
2323
<input id="title" name="title" placeholder="Title">
2424
</div>
@@ -40,17 +40,19 @@
4040
<input type="range" id="fs-slider" min="0" max="100">
4141
</div> -->
4242
</header>
43-
<input id="readfile" type="file" style="opacity: 0; width: 0; height: 0;" name="readfile" accept=".tnynpd, text/*,image/*,.md,html/*,.mht,.svg,.astro,.vue,.js/*,.jsxm,.jsm,.jsxm,ts/*,.ts,.tsx,.tsm,.tsxm,.scss,.sass,json/*,.bat,.cmd,.sh,.yml,.yaml,.🗿">
43+
<input id="readfile" type="file" style="opacity: 0; width: 0; height: 0;" name="readfile" title="File input" accept=".tnynpd, text/*,image/*,.md,html/*,.mht,.svg,.astro,.vue,.js/*,.jsxm,.jsm,.jsxm,ts/*,.ts,.tsx,.tsm,.tsxm,.scss,.sass,json/*,.bat,.cmd,.sh,.yml,.yaml,.🗿">
4444
<main class="container">
4545
<div id="container"></div>
46-
<iframe id="preview" src=" "></iframe>
46+
<iframe id="preview" src=" " title="Code Result"></iframe>
4747
<img class="image-preview" src="null" alt="">
4848
</main>
4949
<a id="downloader"></a>
5050
<input id="eleVal" hidden>
5151
<script>
5252
javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
5353
</script>
54+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
55+
<script src="https://unpkg.com/turndown/dist/turndown.js"></script>
5456
<script src="https://unpkg.com/monaco-editor@latest/min/vs/loader.js"></script>
5557
<script src="editorFunctions.js"></script>
5658
<script src="actions.js"></script>

‎codeEditor.js‎

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
11
require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@latest/min/vs' }});
22
window.MonacoEnvironment = { getWorkerUrl: () => proxy };
33

4+
var extentions = {
5+
'html': 'html',
6+
'css': 'css',
7+
'js': 'javascript',
8+
'json': 'json',
9+
'ts': 'typescript',
10+
'md': 'markdown',
11+
'txt': 'text',
12+
'py': 'python',
13+
'java': 'java',
14+
'c': 'c',
15+
}
16+
417
var languages = {
518
html: {
6-
hasTheme: false,
7-
startingCode =
19+
startingCode:
820
`<!DOCTYPE html>
921
<html lang="en">
1022
<head>
@@ -18,10 +30,8 @@ var languages = {
1830
</html>`
1931
},
2032
css: {
21-
hasTheme: false,
2233
},
2334
javascript: {
24-
hasTheme: false,
2535
},
2636
json: {
2737
hasTheme: false,
@@ -38,6 +48,8 @@ var languages = {
3848
markdown: {
3949
hasTheme: true,
4050
},
51+
text: {
52+
},
4153
}
4254

4355
var buttons = [
@@ -56,10 +68,6 @@ buttons.forEach(b => {
5668
else document.querySelector(`#${b}`).onclick = window[b]
5769
})
5870

59-
Object.keys(languages).forEach(language => {
60-
monaco.languages.setMonarchTokensProvider(language, editorThemes[language]());
61-
})
62-
6371
var editor
6472

6573
function getShareLinkCode() {
@@ -81,19 +89,34 @@ let proxy = URL.createObjectURL(new Blob([`
8189
importScripts('https://unpkg.com/monaco-editor@latest/min/vs/base/worker/workerMain.js');
8290
`], { type: 'text/javascript' }));
8391

84-
var language = alert(`What language do you want to use? (acceptable values are "${Object.keys(languages).join(', ')}")`)
85-
if (!language || language == '' || !Object.keys(languages).includes(language)) {
86-
alert('Error: Invalid language value entered, defaulting to "html"')
87-
language = 'html'
92+
var ext = codeObj.ext
93+
94+
var language
95+
if (!languages[ext]) {
96+
language = prompt(`What language do you want to use? (acceptable values are "${Object.keys(languages).join(', ')}")`)
97+
if (!language || language == '' || !Object.keys(languages).includes(language)) {
98+
alert('Error: Invalid language value entered, defaulting to "html"')
99+
language = 'html'
100+
}
101+
}
102+
else {
103+
language = languages[ext]
88104
}
89105

90106
require(["vs/editor/editor.main"], function () {
91107
editor = monaco.editor.create(document.getElementById('container'), {
92-
value: tempCode ?? languages[language].startingCode,
108+
value: codeObj.content ?? languages[language].startingCode,
93109
language: language,
94-
theme: languages[language].hasTheme ? language : 'vs-dark'
110+
theme: !!editorThemes[language] ? language : 'vs-dark'
95111
});
96112

113+
114+
Object.keys(languages).forEach(l => {
115+
if (!editorThemes[l]) return
116+
monaco.languages.setMonarchTokensProvider(l, editorThemes[l]());
117+
})
118+
119+
97120
editor.onKeyDown(keyDown);
98121
});
99122

@@ -105,8 +128,7 @@ function previewHTML() {
105128
ext = title.split('.')[1]
106129
}
107130

108-
let value = tinymce.activeEditor.getContent({ format: 'raw' });
109-
textarea = document.querySelector('textarea')
131+
var value = editor.getValue()
110132

111133
let eleVal = 'documentElement'
112134
if (value.includes('<html')) {

‎editor.html‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width">
@@ -12,21 +12,23 @@
1212
<script src="https://cdn.tiny.cloud/1/qe1yig5tgvcqpzeeabwqce18y6ids1owccr5y6ief739ddhq/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
1313
</head>
1414
<body>
15-
<input id="readfile" type="file" style="opacity: 0; width: 0; height: 0;" name="readfile" accept=".tnynpd, text/*,image/*,.md,html/*,.mht,.svg,.astro,.vue,.js/*,.jsxm,.jsm,.jsxm,ts/*,.ts,.tsx,.tsm,.tsxm,.json,.scss,.sass,.bat,.cmd,.sh,.yml,.yaml,.🗿">
15+
<input id="readfile" type="file" style="opacity: 0; width: 0; height: 0;" name="readfile" title="File input" accept=".tnynpd, text/*,image/*,.md,html/*,.mht,.svg,.astro,.vue,.js/*,.jsxm,.jsm,.jsxm,ts/*,.ts,.tsx,.tsm,.tsxm,.json,.scss,.sass,.bat,.cmd,.sh,.yml,.yaml,.🗿">
1616
<main class="container">
17-
<textarea></textarea>
18-
<iframe id="preview" src=" "></iframe>
17+
<textarea id="editor" title="Text editor" placeholder="Enter your text here"></textarea>
18+
<iframe id="preview" src=" " title="Content Preview"></iframe>
1919
<img class="image-preview" src="null" alt="">
2020
</main>
2121
<!-- Place the following <script> and <textarea> tags your HTML's <body> -->
2222
<a id="downloader"></a>
2323
<input id="eleVal" hidden>
24+
<script>
25+
javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
26+
</script>
27+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
28+
<script src="https://unpkg.com/turndown/dist/turndown.js"></script>
2429
<script src="editorFunctions.js"></script>
2530
<script src="editor.js"></script>
2631
<script src="actions.js"></script>
2732
<script src="sectionWidth.js"></script>
28-
<script>
29-
javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
30-
</script>
3133
</body>
3234
</html>

‎editor.js‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
var currentState = null
2-
var docTitle = ''
32

43
var custMenuItems = [
54
{
@@ -27,7 +26,7 @@ var custMenuItems = [
2726
func: getShareLink,
2827
},
2928
{
30-
name: 'Open in Code Editor',
29+
name: 'CodeEditor',
3130
func: openInCodeEditor,
3231
}
3332
]
@@ -47,7 +46,7 @@ tinymce.init({
4746
],
4847

4948
menu: {
50-
newFile: { title: 'File', items: 'rename save delete | upload download | share print "open in code editor"' }
49+
newFile: { title: 'File', items: 'rename save delete | upload download | share print codeeditor' }
5150
},
5251
menubar: 'newFile edit view insert format tools table help',
5352

@@ -64,7 +63,11 @@ tinymce.init({
6463
});
6564

6665
function saveContent(info) {
67-
let value = tinymce.activeEditor.getContent({ format: 'text' });
66+
let value = tinymce.activeEditor.getContent({ format: 'html' });
67+
68+
var turndownService = new TurndownService()
69+
var md = turndownService.turndown(value)
70+
6871
var type = 'text'
6972
if (info) {
7073
if (info.type) {
@@ -76,7 +79,7 @@ function saveContent(info) {
7679
}
7780
}
7881
}
79-
return saveFile(value);
82+
return saveFile(md);
8083
}
8184

8285
var supptdImgExts = [
@@ -91,15 +94,17 @@ var supptdImgExts = [
9194
['xbm'],
9295
]
9396

94-
var docTitle = document.title
9597
var theAlert = false
9698
var container = document.querySelector('.container')
9799
var textarea = container.querySelector('textarea')
98100

99101
function downloadFile() {
100-
let input = tinymce.activeEditor.getContent({ format: 'raw' });
102+
let input = tinymce.activeEditor.getContent({ format: 'html' });
103+
104+
var turndownService = new TurndownService()
105+
var md = turndownService.turndown(input)
101106

102-
download(input)
107+
download(md)
103108
}
104109

105110
var readfile = document.querySelector("input[type='file']#readfile");
@@ -192,8 +197,12 @@ outputsize()
192197
new ResizeObserver(outputsize).observe(textarea)
193198

194199
function getShareLinkTinyMCE() {
195-
let fContent = tinymce.activeEditor.getContent({ format: 'raw' });
196-
getShareLink(fContent)
200+
let fContent = tinymce.activeEditor.getContent({ format: 'html' });
201+
202+
var turndownService = new TurndownService()
203+
var md = turndownService.turndown(fContent)
204+
205+
getShareLink(md)
197206
}
198207

199208
function openInCodeEditor() {

‎editorFunctions.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
var docTitle = document.title
2+
13
function rename(newName) {
24
if (newName) {
35
docTitle = newName
@@ -9,10 +11,14 @@ function rename(newName) {
911
}
1012

1113
function download() {
12-
let input = tinymce.activeEditor.getContent({ format: 'raw' });
14+
let input = tinymce.activeEditor.getContent({ format: 'html' });
15+
16+
var turndownService = new TurndownService()
17+
var md = turndownService.turndown(input)
18+
1319

1420
// create a new Blob object with the content you want to assign
15-
let blob = new Blob([input], {type: 'text/plain'});
21+
let blob = new Blob([md], {type: 'text/plain'});
1622

1723
// create a FileReader object
1824
let reader = new FileReader();
@@ -36,6 +42,7 @@ function download() {
3642
}
3743

3844
function setTitle() {
45+
var ext
3946
let title = docTitle
4047
if (title.split('').length <= 0) {
4148
document.title = docTitle
@@ -53,11 +60,16 @@ function saveFile(value) {
5360
let title = docTitle
5461
if (title === '' || !!title === false || title === null) return
5562

56-
let author = localStorage.getItem('username')
63+
var ext = title
64+
if (ext.includes('.')) {
65+
ext = ext.split('.').slice(-1)
66+
}
67+
let author = localStorage.getItem('username')
5768
if (!!author === false) author = ''
5869
let d = new Date()
5970
let json = {
6071
title: title,
72+
extension: ext,
6173
content: value,
6274
author: author,
6375
dateModofied: `${d.getMonth()+1}/${d.getDate()}/${d.getFullYear()}`

‎index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width">
66
<title>Notepad</title>
7-
<link href="main.css" rel="stylesheet" type="text/css" />
8-
<link href="icons.css" rel="stylesheet" type="text/css" />
7+
<link href="/main.css" rel="stylesheet" type="text/css" />
8+
<link href="/icons.css" rel="stylesheet" type="text/css" />
99
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
1010
</head>
1111
<body>
@@ -15,23 +15,23 @@
1515
<sidebar></sidebar>
1616
<content class="grid-row">
1717
<div class="grid-parent">
18-
<a class="grid-item" href="editor?action=new">
18+
<a class="grid-item" href="/editor.html?action=new">
1919
<span class="img material-symbols-outlined">note_add</span>
2020
<div class="title-parent">
2121
<h2 class="title">New File</h2>
2222
</div>
2323
</a>
2424
</div>
2525
<div class="grid-parent">
26-
<a class="grid-item" href="open">
26+
<a class="grid-item" href="/open.html">
2727
<img src="icons/cloud-folder.svg" alt="Open Existing File" />
2828
<div class="title-parent">
2929
<h2 class="title">Open Existing File</h2>
3030
</div>
3131
</a>
3232
</div>
3333
<div class="grid-parent">
34-
<a class="grid-item" href="editor?action=upload">
34+
<a class="grid-item" href="/editor.html?action=upload">
3535
<span class="img material-symbols-outlined">upload_file</span>
3636
<div class="title-parent">
3737
<h2 class="title">Upload From Computer</h2>

0 commit comments

Comments
 (0)