Added debug view to demo

CHANGELOG.md

@@ -3,6 +3,7 @@
 
 - Fixed speed degradation when linkifier enabled.
 - Added coverage reports.
+- Added debug view to demo (show internal representation)
 - Other minor optimizations and cleanup.
 
 

demo/assets/index.css

@@ -23,32 +23,51 @@ body {
   font-size: 13px;
   padding: 2px;
 }
-.result {
+.result-html {
   padding: 2px 10px;
   overflow: auto;
   background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
 }
-.result img {
+.result-html img {
   max-width: 50%;
 }
-.result-src {
+.result-src,
+.result-debug {
   display: none;
   background-color: #fff;
 }
-.result-src-content {
+.result-src-content,
+.result-debug-content {
   white-space: pre;
 }
-.result-as-text .result-src {
+.result-as-html .result-html {
+  display: block;
+}
+.result-as-html .result-src,
+.result-as-html .result-debug {
+  display: none;
+}
+.result-as-src .result-src {
+  display: block;
+}
+.result-as-src .result-html,
+.result-as-src .result-debug {
+  display: none;
+}
+.result-as-debug .result-debug {
   display: block;
 }
-.result-as-text .result {
+.result-as-debug .result-html,
+.result-as-debug .result-src {
   display: none;
 }
 .demo-control {
   position: absolute;
-  right: 15px;
+  right: 40px;
   top: 0;
-  border-radius: 0 4px;
+  border-radius: 0 0 6px 6px;
   font-size: 12px;
   background-color: #666;
   color: #fff !important;

demo/assets/index.js

@@ -14,7 +14,7 @@
     // options below are for demo only
     _highlight: true,
     _strict: false,
-    _src: false
+    _view: 'html'               // html / src / debug
   };
 
   defaults.highlight = function (str, lang) {
@@ -42,6 +42,14 @@
     }
   }
 
+  function setResultView(val) {
+    $('body').removeClass('result-as-html');
+    $('body').removeClass('result-as-src');
+    $('body').removeClass('result-as-debug');
+    $('body').addClass('result-as-' + val);
+    defaults._view = val;
+  }
+
   function mdInit() {
     if (defaults._strict) {
       mdHtml = new window.Remarkable('commonmark');
@@ -59,8 +67,13 @@
 
   function updateResult() {
     var source = $('.source').val();
-    $('.result').html(mdHtml.render(source));
+
+    $('.result-html').html(mdHtml.render(source));
     $('.result-src-content').html(window.hljs.highlight('html', mdSrc.render(source)).value);
+
+    var dump = JSON.stringify(mdSrc.parse(source, { references: {} }), null, 2);
+    $('.result-debug-content').html(window.hljs.highlight('json', dump).value);
+
     try {
       if (source) {
         // serialize state - source and options
@@ -107,11 +120,22 @@
         _.forOwn(opts, function (val, key) {
           if (!defaults.hasOwnProperty(key)) { return; }
 
+          // Legacy, for old links
+          if (key === '_src') {
+            defaults._view = val ? 'src' : 'html';
+            return;
+          }
+
           if ((_.isBoolean(defaults[key]) && _.isBoolean(val)) ||
               (_.isString(defaults[key]) && _.isString(val))) {
             defaults[key] = val;
           }
         });
+
+        // sanitize for sure
+        if ([ 'html', 'src', 'debug' ].indexOf(defaults._view) === -1) {
+          defaults._view = 'html';
+        }
       } catch (__) {}
     }
 
@@ -149,11 +173,7 @@
       }
     });
 
-    // Set display mode for result
+    setResultView(defaults._view);
-    if (defaults._src) {
-      $('body').addClass('result-as-text');
-    }
-
 
     mdInit();
     permalink = document.getElementById('permalink');
@@ -167,12 +187,14 @@
       event.preventDefault();
     });
 
-    $('.result-mode').on('click', function (event) {
+    $(document).on('click', '[data-result-as]', function (event) {
-      defaults._src = !defaults._src;
+      var view = $(this).data('resultAs');
-      $('body').toggleClass('result-as-text');
+      if (view) {
-      // only to update permalink
+        setResultView(view);
-      updateResult();
+        // only to update permalink
-      event.preventDefault();
+        updateResult();
+        event.preventDefault();
+      }
     });
 
     updateResult();

demo/assets/index.styl

@@ -22,32 +22,49 @@ body
   font-size 13px
   padding 2px
 
-.result
+.result-html
   padding 2px 10px
   overflow auto
   background-color #fff
+  border 1px solid #ccc
+  border-radius 4px
   img
     max-width 50%
 
 .result-src
+.result-debug
   display none
   background-color #fff
 
 .result-src-content
+.result-debug-content
   white-space pre
 
-.result-as-text
+.result-as-html
+  .result-html
+    display block
+  .result-src
+  .result-debug
+    display none
+.result-as-src
   .result-src
     display block
-  .result
+  .result-html
+  .result-debug
+    display none
+.result-as-debug
+  .result-debug
+    display block
+  .result-html
+  .result-src
     display none
 
 .demo-control
   position absolute
-  right 15px
+  right 40px
   top 0
   //padding 0 10px
-  border-radius 0 4px
+  border-radius 0 0 6px 6px
   font-size 12px
   background-color #666
   color #fff !important

demo/index.html

@@ -18,12 +18,12 @@
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-
+      
       ga('create', 'UA-26895916-3', 'auto');
       ga('require', 'displayfeatures');
       ga('require', 'linkid', 'linkid.js');
       ga('send', 'pageview');
-
+      
     </script>
   </head>
   <body>
@@ -109,7 +109,7 @@ console.log(md.render('# Remarkable rulezz!'));
           <textarea class="source full-height">---
 __Advertisement :)__
 
-- __[pica](http://nodeca.github.io/pica/demo/)__ - high quality and fast image
+- __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image
   resize in browser.
 - __[babelfish](https://github.com/nodeca/babelfish/)__ - developpers friendly
   i18n with plurals support and easy syntax.
@@ -254,7 +254,7 @@ Right aligned columns
 
 [link text](http://dev.nodeca.com)
 
-[link with title](https://nodeca.github.io/pica/demo/ &quot;title text!&quot;)
+[link with title](http://nodeca.github.io/pica/demo/ &quot;title text!&quot;)
 
 Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
 
@@ -275,12 +275,13 @@ With a reference later in the document defining the URL location:
 </textarea>
         </div>
         <section class="col-xs-6 full-height">
-          <div class="demo-control"><a href="#" class="result-mode">html / source</a></div>
+          <div class="demo-control"><a href="#" data-result-as="html">html</a><a href="#" data-result-as="src">source</a><a href="#" data-result-as="debug">debug</a></div>
-          <div class="result full-height"></div>
+          <div class="result-html full-height"></div>
           <pre class="result-src full-height"><code class="result-src-content full-height"></code></pre>
+          <pre class="result-debug full-height"><code class="result-debug-content full-height"></code></pre>
         </section>
       </div>
     </div>
     <div class="gh-ribbon"><a href="https://github.com/jonschlinkert/remarkable" target="_blank">Fork me on GitHub</a></div>
   </body>
-</html>
+</html>

demo/index.jade

@@ -86,10 +86,14 @@ html
           textarea.source.full-height= s.source
         section.col-xs-6.full-height
           .demo-control
-            a.result-mode(href='#') html / source
+            a(href='#' data-result-as='html') html
-          .result.full-height
+            a(href='#' data-result-as='src') source
+            a(href='#' data-result-as='debug') debug
+          .result-html.full-height
           pre.result-src.full-height
             code.result-src-content.full-height
+          pre.result-debug.full-height
+            code.result-debug-content.full-height
 
     .gh-ribbon
       a(href='https://github.com/jonschlinkert/remarkable' target='_blank') Fork me on GitHub