save file

Author: javascript-2020

utils/editors/markdown-editor/html/output-md/v2.0/output-md-v2.0.html

@@ -4,18 +4,27 @@
 
       <template shadowrootmode=open>
 
+            <!--
             <link rel=stylesheet href='css/github-markdown-light.css'>
+            -->
             <!--
             <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css">
             -->
 
+            <style id=stylesheet>
+            </style>
+            
             <style>
 
   #root
     {height:100%;display:flex;flex-direction:column;gap:5px}
 
   #hdr
     {display:flex}
+    
+  #npm
+    {margin-right:20px}
+    
   .radio
     {border:1px solid lightgray;padding:2px 10px;border-radius:5px;cursor:pointer;display:flex;align-items:center}
   .radio [type]
@@ -36,29 +45,36 @@
 
                   <div id=hdr>
 
-                        <span id=html class=radio>
-                              <input type=checkbox checked>
-                              allow-html
-                        </span>
-                        <span id=breaks class=radio>
+                        <div id=npm class=radio>
                               <input type=checkbox>
-                              breaks
-                        </span>
-                        <span id=linkify class=radio>
-                              <input type=checkbox checked>
-                              linkify
-                        </span>
-                        
-                        <span class=spc></span>
+                              npm
+                        </div>
 
-                        <span id=mode-md class=radio>
-                              <input type=checkbox checked>
-                              markdown
-                        </span>
-                        <span id=mode-html class=radio>
-                              <input type=checkbox>
-                              html
-                        </span>
+                        <div id=standard>
+                              <span id=html class=radio>
+                                    <input type=checkbox checked>
+                                    allow-html
+                              </span>
+                              <span id=breaks class=radio>
+                                    <input type=checkbox>
+                                    breaks
+                              </span>
+                              <span id=linkify class=radio>
+                                    <input type=checkbox checked>
+                                    linkify
+                              </span>
+                              
+                              <span class=spc></span>
+                              
+                              <span id=mode-md class=radio>
+                                    <input type=checkbox checked>
+                                    markdown
+                              </span>
+                              <span id=mode-html class=radio>
+                                    <input type=checkbox>
+                                    html
+                              </span>
+                        </div>
 
                   </div>
 
@@ -97,12 +113,14 @@
   //vars:-
 
       var md;
+      var css         = {};
 
       var cur         = {};
       cur.mode        = 'md';
       cur.txt         = null;
 
       var shadow;
+      var standard;
       var output;
       var chk         = {};
 
@@ -149,7 +167,9 @@
       function libs(){
 
             var resolve,promise=new Promise(res=>resolve=res);
+            
             var ct          = 0;
+            var total       = 4;
 
             var script      = document.createElement('script');
             script.src      = 'https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js';
@@ -161,20 +181,50 @@
             script.onload   = onload;
             document.head.append(script);
 
+            get('/css/npm.css').then({txt='',error}=>(css.npm=txt,onload()));
+            get('/css/github-markdown-light.css').then({txt='',error}=>(css.github=txt,onload()));
+            
             return promise;
 
 
             function onload(){
 
                   ct++;
-                  if(ct!=2)return;
+                  if(ct!=total)return;
                   resolve();
 
             }//onload
 
       }//libs
 
 
+      async function get(url){
+      
+            var err;
+            try{
+            
+                  var res   = await fetch(url);
+                  
+            }//try
+            catch(err2){
+            
+                  err   = err2;
+                  
+            }//catch
+            if(err){
+                  var error   = err.message;
+                  return {error}
+            }
+            if(!res.ok){
+                  var error   = await res.text();
+                  return {error};
+            }
+            var txt   = await res.text();
+            return {txt};
+            
+      }//get
+      
+      
   //:
 
 
@@ -183,9 +233,15 @@
             shadow              = host.shadowRoot;
 
             var hdr             = $(shadow,'#hdr');
+            
+            chk.npm             = $.chkbox(shadow,'#npm',btn.npm);
+            
+            standard            = $(hdr,'#standard');
+            
             chk.html            = $.chkbox(shadow,'#html');
             chk.breaks          = $.chkbox(shadow,'#breaks');
             chk.linkify         = $.chkbox(shadow,'#linkify');
+            
             var group           = $.chkbox.group(shadow,'#mode-md','#mode-html');
             group.callback      = btn.mode;
 
@@ -199,6 +255,17 @@
   //:
 
 
+      btn.npm   = function(chk){
+      
+            if(chk.checked){
+                  standard.style.display    = 'none';
+            }else{
+                  standard.style.display    = '';
+            }
+            
+      }//npm
+      
+      
       btn.mode    = function(chk,id){
                                                                                 debug('btn.mode',id);
             switch(id){
@@ -263,21 +330,41 @@
 
             var html            = md.render(txt);
 
-            display[cur.mode](html);
+            if(chk.npm.checked){
+                  display.npm(html);
+            }else{
+                  display[cur.mode](html);
+            }
 
       }//show
 
 
       display.md    = function(html){
                                                                                 debug('display.md');
+            output.classList.remove('_6d9832ac','_704c034e');
             output.innerHTML              = html;
 
+            $(shadow,'#stylesheet').textContent   = css.github;
+            
             output.style.display          = '';
             editor.__host.style.display   = 'none';
 
       }//md
 
 
+      display.npm   = function(html){
+                                                                                debug('display.npm');
+            output.classList.add('_6d9832ac','_704c034e');
+            output.innerHTML              = html;
+            
+            $(shadow,'#stylesheet').textContent   = css.npm;
+            
+            output.style.display          = '';
+            editor.__host.style.display   = 'none';
+            
+      }//npm
+      
+      
       display.html    = function(html){
                                                                                 debug('display.html');
             editor.set(html);