Skip to content

Commit 80f1f47

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 3de96d8 commit 80f1f47

1 file changed

Lines changed: 234 additions & 37 deletions

File tree

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

Lines changed: 234 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,124 +5,321 @@
55
<template shadowrootmode=open>
66

77
<link rel=stylesheet href='css/github-markdown-light.css'>
8+
<!--
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css">
10+
-->
11+
812
<style>
913

10-
#output {height:100%;border:2px solid lightgray;box-sizing:border-box;padding:10px}
11-
14+
#root
15+
{height:100%;display:flex;flex-direction:column;gap:5px}
16+
17+
#hdr
18+
{display:flex}
19+
.radio
20+
{border:1px solid lightgray;padding:2px 10px;border-radius:5px;cursor:pointer;display:flex;align-items:center}
21+
.radio [type]
22+
{margin-right:5px;cursor:pointer}
23+
24+
25+
#output, web-editor
26+
{height:100%;border:2px solid lightgray;box-sizing:border-box}
27+
#output
28+
{overflow:auto;padding:10px}
29+
30+
.spc
31+
{flex:1}
32+
1233
</style>
1334

14-
<div id=output class=markdown-body>
35+
<div id=root>
36+
37+
<div id=hdr>
38+
39+
<span id=html class=radio>
40+
<input type=checkbox checked>
41+
allow-html
42+
</span>
43+
<span id=breaks class=radio>
44+
<input type=checkbox>
45+
breaks
46+
</span>
47+
<span id=linkify class=radio>
48+
<input type=checkbox checked>
49+
linkify
50+
</span>
51+
52+
<span class=spc></span>
53+
54+
<span id=mode-md class=radio>
55+
<input type=checkbox checked>
56+
markdown
57+
</span>
58+
<span id=mode-html class=radio>
59+
<input type=checkbox>
60+
html
61+
</span>
62+
63+
</div>
64+
65+
<div id=output class=markdown-body>
66+
</div>
67+
68+
<web-editor component mode=html style='display:none'></web-editor>
69+
1570
</div>
1671

1772
</template>
1873

1974
<script>
2075

21-
(function output_md({mod,dom,host}){
22-
console.log('output');
76+
(function output_md({mod,host}){
77+
2378
var obj = {
2479
version : 'v2.0',
2580
};
26-
27-
var $
81+
82+
var df=true,did='output_mod'
83+
;
84+
85+
86+
var $,debug
2887
;
2988

3089
obj.initmod = function(params){
31-
32-
$ = params.$;
90+
91+
$ = mod.rd(params,'$',$);
92+
debug = mod.rd(params,'debug',debug);
3393

3494
}//initmod
35-
95+
3696

3797
//vars:-
38-
98+
3999
var md;
40100

41-
var shadow;
101+
var cur = {};
102+
cur.mode = 'md';
103+
cur.txt = null;
42104

105+
var shadow;
43106
var output;
44-
107+
var chk = {};
108+
109+
var editor;
110+
111+
112+
var themes = {
113+
'github' : {
114+
base : '',
115+
list : [
116+
'github-markdown.css','github-markdown-light.css','github-markdown-dark.css','github-markdown-dark-dimmed.css',
117+
'github-markdown-dark-high-contrast.css','github-markdown-light-colorblind.css','github-markdown-dark-colorblind.css'
118+
]
119+
},
120+
'water.css' : {
121+
},
122+
};
123+
124+
125+
126+
var btn = {};
127+
var show = {};
128+
45129

46130
//:
47-
131+
48132

49133
obj.init = async function(){
50-
51-
await libs();
134+
debug=eval(debug);
135+
debug('init',obj.version);
136+
editor = mod['web-editor'];
137+
138+
139+
await Promise.all([
140+
libs(),
141+
mod.auto(),
142+
]);
143+
52144

53145
}//init
54-
55-
56-
146+
147+
148+
57149
function libs(){
58-
150+
59151
var resolve,promise=new Promise(res=>resolve=res);
152+
var ct = 0;
60153

61154
var script = document.createElement('script');
62155
script.src = 'https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js';
63156
script.onload = onload;
64157
document.head.append(script);
65158

159+
var script = document.createElement('script');
160+
script.src = 'https://cdn.jsdelivr.net/npm/markdown-it-attrs@4.3.1/markdown-it-attrs.browser.min.js';
161+
script.onload = onload;
162+
document.head.append(script);
163+
66164
return promise;
67165

68166

69167
function onload(){
70-
71-
md = markdownit();
168+
169+
ct++;
170+
if(ct!=2)return;
72171
resolve();
73172

74173
}//onload
75174

76175
}//libs
77-
176+
78177

79178
//:
80-
179+
81180

82181
obj.initdom = function(rootnode){
83182

84183
shadow = host.shadowRoot;
85184

185+
var hdr = $(shadow,'#hdr');
186+
chk.html = $.chkbox(shadow,'#html');
187+
chk.breaks = $.chkbox(shadow,'#breaks');
188+
chk.linkify = $.chkbox(shadow,'#linkify');
189+
var group = $.chkbox.group(shadow,'#mode-md','#mode-html');
190+
group.callback = btn.mode;
191+
192+
86193
output = $(shadow,'#output');
87-
194+
88195

89196
}//initdom
90-
91-
197+
198+
92199
//:
93200

201+
202+
btn.mode = function(chk,id){
203+
debug('btn.mode',id);
204+
switch(id){
205+
206+
case 'mode-md' : cur.mode='md'; break;
207+
case 'mode-html' : cur.mode='html'; break;
208+
209+
}//switch
210+
211+
display();
212+
213+
}//mode
214+
94215

216+
//:
217+
218+
219+
/*
220+
221+
html : true, // allow raw HTML
222+
xhtmlOut : false, // use <br> instead of <br />
223+
breaks : false, // convert \n to <br>
224+
langPrefix : 'language-', // CSS class prefix for fenced code blocks
225+
linkify : false, // autolink plain URLs
226+
typographer : false, // smart quotes, dashes, ellipses
227+
quotes : '“”‘’', // quote characters when typographer is on
228+
highlight : (str, lang) => { // custom code highlighting
229+
return ''; // return HTML or empty string to skip
230+
},
231+
maxNesting : 100, // block nesting limit
232+
validateLink : (url) => true,// custom link validation
233+
linkTarget : '', // e.g. '_blank' to force new tab
234+
renderer : null, // custom renderer instance
235+
inline : null // custom inline parser instance
95236
96-
obj.display = async function(txt){
237+
*/
238+
97239

240+
obj.display = function(txt){return display(txt)}
241+
242+
async function display(txt){
243+
debug('display');
98244
await libs;
99245

246+
output.replaceChildren();
247+
248+
txt = txt||cur.txt;
249+
if(!txt){
250+
return;
251+
}
252+
cur.txt = txt;
253+
254+
var opts = {
255+
linkTarget : '_blank',
256+
};
257+
opts.html = chk.html.checked;
258+
opts.breaks = chk.breaks.checked;
259+
opts.linkify = chk.linkify.checked;
260+
debug.json(opts);
261+
var md = markdownit(opts);
262+
md.use(markdownItAttrs,{leftDelimiter:'{',rightDelimiter:'}',allowedAttributes:['id','class',/^data-.*$/]});
263+
100264
var html = md.render(txt);
101-
output.innerHTML = html;
265+
266+
display[cur.mode](html);
102267

103268
}//show
104-
105-
269+
270+
271+
display.md = function(html){
272+
debug('display.md');
273+
output.innerHTML = html;
274+
275+
output.style.display = '';
276+
editor.__host.style.display = 'none';
277+
278+
}//md
279+
280+
281+
display.html = function(html){
282+
debug('display.html');
283+
editor.set(html);
284+
285+
output.style.display = 'none';
286+
editor.__host.style.display = '';
287+
288+
}//html
289+
290+
291+
//:
292+
293+
106294
obj.horiz = function(){
107-
295+
debug('horiz');
108296
host.style.width = '100%';
109297
host.style.height = '50%';
110-
298+
111299
}//horiz
112300

113301

114302
obj.vert = function(){
115-
303+
debug('vert');
116304
host.style.width = '50%';
117305
host.style.height = '100%';
118306

119307
}//vert
120-
121308

309+
310+
311+
312+
//:
313+
314+
315+
316+
122317
return obj;
123318

124-
})//output_md
125-
319+
//output_md
320+
})
321+
322+
126323
</script>
127324

128325
</output-md>

0 commit comments

Comments
 (0)