Skip to content

Commit 625aa26

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 159d4ba commit 625aa26

1 file changed

Lines changed: 182 additions & 25 deletions

File tree

‎utils/editors/markdown-editor/html/output-md/output-md.html‎

Lines changed: 182 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,55 @@
44

55
<template shadowrootmode=open>
66

7+
<!--
78
<link rel=stylesheet href='css/github-markdown-light.css'>
9+
-->
810
<!--
911
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css">
1012
-->
1113

12-
<style>
14+
<style id=stylesheet>
15+
</style>
1316

17+
<style>
18+
:host
19+
{display:flex;flex-direction:column;overflow:auto}
20+
1421
#root
15-
{height:100%;display:flex;flex-direction:column;gap:5px}
22+
{flex:1;display:flex;flex-direction:column;gap:5px;overflow:auto}
1623

1724
#hdr
1825
{display:flex}
26+
27+
#npm
28+
{margin-right:20px;display:flex;align-items:center;gap:5px}
29+
30+
#npm img
31+
{width:15px;height:15px}
32+
33+
#standard
34+
{display:flex}
35+
1936
.radio
2037
{border:1px solid lightgray;padding:2px 10px;border-radius:5px;cursor:pointer;display:flex;align-items:center}
2138
.radio [type]
2239
{margin-right:5px;cursor:pointer}
2340

2441

25-
#output, web-editor
26-
{height:100%;border:2px solid lightgray;box-sizing:border-box}
42+
#view
43+
{flex:1;overflow:auto;display:flex;flex-direction:column}
44+
45+
46+
#output, web-editor, #npm-output
47+
{flex:1;border:2px solid lightgray;box-sizing:border-box}
48+
2749
#output
2850
{overflow:auto;padding:10px}
2951

52+
#npm-output
53+
{overflow:auto;max-width: 820px;margin: 0 auto}
54+
55+
3056
.spc
3157
{flex:1}
3258

@@ -36,18 +62,27 @@
3662

3763
<div id=hdr>
3864

39-
<span id=html class=radio>
40-
<input type=checkbox checked>
41-
allow-html
42-
</span>
43-
<span id=breaks class=radio>
65+
<div id=npm class=radio>
4466
<input type=checkbox>
45-
breaks
46-
</span>
47-
<span id=linkify class=radio>
48-
<input type=checkbox checked>
49-
linkify
50-
</span>
67+
<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcBAMAAACAI8KnAAAALVBMVEXLAADKAADMERHVSkrURkb////eeXnghITfgIDstrbFAADJAADhiorPJCTVSUliGH6+AAAAUklEQVR4AWMgETAKQoEAmKvsAgVGYEnTUCgIFmBgYmAQgOtiAHERACdXSNkBmevi/AGZyxrwAU3v4OJ+gLACGP7DA8dZgOGeixEi6ECUAIlhDgBoOA7wXH0RDQAAAABJRU5ErkJggg=='>
68+
npm
69+
</div>
70+
71+
<div id=standard>
72+
<span id=html class=radio>
73+
<input type=checkbox checked>
74+
allow-html
75+
</span>
76+
<span id=breaks class=radio>
77+
<input type=checkbox>
78+
breaks
79+
</span>
80+
<span id=linkify class=radio>
81+
<input type=checkbox checked>
82+
linkify
83+
</span>
84+
85+
</div>
5186

5287
<span class=spc></span>
5388

@@ -62,10 +97,20 @@
6297

6398
</div>
6499

65-
<div id=output class=markdown-body>
66-
</div>
100+
<div id=view>
67101

68-
<web-editor component mode=html style='display:none'></web-editor>
102+
<div id=output class=markdown-body>
103+
</div>
104+
105+
<div id=npm-output class='_6d9832ac _704c034e' style='display:none'>
106+
<div id=readme>
107+
</div>
108+
</div>
109+
110+
<web-editor component mode=html style='display:none'>
111+
</web-editor>
112+
113+
</div>
69114

70115
</div>
71116

@@ -97,15 +142,20 @@
97142
//vars:-
98143

99144
var md;
145+
var css = {};
100146

101147
var cur = {};
102148
cur.mode = 'md';
103149
cur.txt = null;
104150

105151
var shadow;
152+
var standard;
106153
var output;
107154
var chk = {};
108155

156+
var npm_output;
157+
var npm_readme;
158+
109159
var editor;
110160

111161

@@ -124,7 +174,6 @@
124174

125175

126176
var btn = {};
127-
var show = {};
128177

129178

130179
//:
@@ -149,7 +198,9 @@
149198
function libs(){
150199

151200
var resolve,promise=new Promise(res=>resolve=res);
201+
152202
var ct = 0;
203+
var total = 4;
153204

154205
var script = document.createElement('script');
155206
script.src = 'https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js';
@@ -161,20 +212,51 @@
161212
script.onload = onload;
162213
document.head.append(script);
163214

215+
get('/css/npm.css').then(({txt='',error})=>(css.npm=txt,onload()));
216+
get('/css/github-markdown-light.css').then(({txt='',error})=>(css.github=txt,onload()));
217+
164218
return promise;
165219

166220

167221
function onload(){
168222

169223
ct++;
170-
if(ct!=2)return;
224+
if(ct!=total)return;
171225
resolve();
172226

173227
}//onload
174228

175229
}//libs
176230

177231

232+
async function get(url){
233+
234+
var err;
235+
try{
236+
237+
var res = await fetch(url);
238+
239+
}//try
240+
catch(err2){
241+
242+
err = err2;
243+
244+
}//catch
245+
if(err){
246+
var error = err.message;
247+
return {error}
248+
}
249+
if(!res.ok){
250+
var error = await res.text();
251+
return {error};
252+
}
253+
254+
var txt = await res.text();
255+
return {txt};
256+
257+
}//get
258+
259+
178260
//:
179261

180262

@@ -183,14 +265,22 @@
183265
shadow = host.shadowRoot;
184266

185267
var hdr = $(shadow,'#hdr');
268+
269+
chk.npm = $.chkbox(shadow,'#npm',btn.npm);
270+
271+
standard = $(hdr,'#standard');
272+
186273
chk.html = $.chkbox(shadow,'#html');
187274
chk.breaks = $.chkbox(shadow,'#breaks');
188275
chk.linkify = $.chkbox(shadow,'#linkify');
276+
189277
var group = $.chkbox.group(shadow,'#mode-md','#mode-html');
190278
group.callback = btn.mode;
191279

192280

193281
output = $(shadow,'#output');
282+
npm_output = $(shadow,'#npm-output');
283+
npm_readme = $(shadow,'#readme');
194284

195285

196286
}//initdom
@@ -199,6 +289,17 @@
199289
//:
200290

201291

292+
btn.npm = function(chk){
293+
294+
if(chk.checked){
295+
standard.style.display = 'none';
296+
}else{
297+
standard.style.display = '';
298+
}
299+
300+
}//npm
301+
302+
202303
btn.mode = function(chk,id){
203304
debug('btn.mode',id);
204305
switch(id){
@@ -251,6 +352,11 @@
251352
}
252353
cur.txt = txt;
253354

355+
if(chk.npm.checked){
356+
display.npm(txt);
357+
return;
358+
}
359+
254360
var opts = {
255361
linkTarget : '_blank',
256362
};
@@ -265,29 +371,80 @@
265371

266372
display[cur.mode](html);
267373

268-
}//show
374+
}//display
269375

270376

271377
display.md = function(html){
272378
debug('display.md');
379+
show('output');
380+
273381
output.innerHTML = html;
274382

275-
output.style.display = '';
276-
editor.__host.style.display = 'none';
383+
$(shadow,'#stylesheet').textContent = css.github;
384+
277385

278386
}//md
279387

280388

389+
display.npm = async function(txt){
390+
debug('display.npm');
391+
var html = await github_markdown(txt);
392+
393+
npm_readme.innerHTML = html;
394+
395+
$(shadow,'#stylesheet').textContent = css.npm;
396+
397+
show('npm');
398+
399+
}//npm
400+
401+
402+
async function github_markdown(txt){
403+
404+
var body = txt;
405+
var res = await fetch('https://api.github.com/markdown/raw',{method:'post',body});
406+
var txt = await res.text();
407+
return txt;
408+
409+
}//get
410+
411+
281412
display.html = function(html){
282413
debug('display.html');
283414
editor.set(html);
284415

285-
output.style.display = 'none';
286-
editor.__host.style.display = '';
416+
show('editor');
287417

288418
}//html
289419

290420

421+
function show(id){
422+
423+
switch(id){
424+
425+
case 'output' :
426+
output.style.display = '';
427+
npm_output.style.display = 'none';
428+
editor.__host.style.display = 'none';
429+
break;
430+
431+
case 'npm' :
432+
output.style.display = 'none';
433+
npm_output.style.display = '';
434+
editor.__host.style.display = 'none';
435+
break;
436+
437+
case 'editor' :
438+
output.style.display = 'none';
439+
npm_output.style.display = 'none';
440+
editor.__host.style.display = '';
441+
break;
442+
443+
}//switch
444+
445+
}//show
446+
447+
291448
//:
292449

293450

0 commit comments

Comments
 (0)