Revert "Move hiding of boring lines into static content (#846)" (#1064)

This reverts commit 4448f3fc4b.

src/renderer/html_handlebars/hbs_renderer.rs

@@ -6,7 +6,6 @@ use crate::renderer::{RenderContext, Renderer};
 use crate::theme::{self, playpen_editor, Theme};
 use crate::utils;
 
-use std::borrow::Cow;
 use std::collections::BTreeMap;
 use std::collections::HashMap;
 use std::fs;
@@ -585,7 +584,6 @@ fn fix_code_blocks(html: &str) -> String {
 }
 
 fn add_playpen_pre(html: &str, playpen_config: &Playpen) -> String {
-    let boring_line_regex = Regex::new(r"^(\s*)#(#|.)(.*)$").unwrap();
     let regex = Regex::new(r##"((?s)<code[^>]?class="([^"]+)".*?>(.*?)</code>)"##).unwrap();
     regex
         .replace_all(html, |caps: &Captures<'_>| {
@@ -599,45 +597,21 @@ fn add_playpen_pre(html: &str, playpen_config: &Playpen) -> String {
                 || classes.contains("mdbook-runnable")
             {
                 // wrap the contents in an external pre block
-                format!("<pre class=\"playpen\"><code class=\"{}\">{}</code></pre>",
+                if playpen_config.editable && classes.contains("editable")
-                    classes,
-                    {
-                        let content: Cow<str> = if playpen_config.editable && classes.contains("editable")
                     || text.contains("fn main")
                     || text.contains("quick_main!")
                 {
-                            code.into()
+                    format!("<pre class=\"playpen\">{}</pre>", text)
                 } else {
                     // we need to inject our own main
                     let (attrs, code) = partition_source(code);
 
-                            format!("\n# #![allow(unused_variables)]\n{}#fn main() {{\n{}#}}",
+                    format!(
-                                attrs, code
+                        "<pre class=\"playpen\"><code class=\"{}\">\n# \
-                            ).into()
+                         #![allow(unused_variables)]\n{}#fn main() {{\n{}#}}</code></pre>",
-                        };
+                        classes, attrs, code
-                        let mut prev_line_hidden = false;
-                        let mut result = String::with_capacity(content.len());
-                        for line in content.lines() {
-                            if let Some(caps) = boring_line_regex.captures(line) {
-                                if !prev_line_hidden && &caps[2] != "#" {
-                                    result += "<span class=\"boring\">";
-                                    prev_line_hidden = true;
-                                }
-                                result += &caps[1];
-                                if &caps[2] != " " { result += &caps[2]; }
-                                result += &caps[3];
-                            } else {
-                                if prev_line_hidden {
-                                    result += "</span>";
-                                    prev_line_hidden = false;
-                                }
-                                result += line;
-                            }
-                            result += "\n";
-                        }
-                        result
-                    }
                     )
+                }
             } else {
                 // not language-rust, so no-op
                 text.to_owned()
@@ -713,22 +687,4 @@ mod tests {
             assert_eq!(got, should_be);
         }
     }
-
-    #[test]
-    fn add_playpen() {
-        let inputs = [
-          ("<code class=\"language-rust\">x()</code>",
-           "<pre class=\"playpen\"><code class=\"language-rust\">\n<span class=\"boring\">#![allow(unused_variables)]\nfn main() {\n</span>x()\n<span class=\"boring\">}\n</code></pre>"),
-          ("<code class=\"language-rust\">fn main() {}</code>",
-           "<pre class=\"playpen\"><code class=\"language-rust\">fn main() {}\n</code></pre>"),
-          ("<code class=\"language-rust editable\">let s = \"foo\n # bar\n\";</code>",
-           "<pre class=\"playpen\"><code class=\"language-rust editable\">let s = \"foo\n<span class=\"boring\"> bar\n</span>\";\n</code></pre>"),
-          ("<code class=\"language-rust editable\">let s = \"foo\n ## bar\n\";</code>",
-           "<pre class=\"playpen\"><code class=\"language-rust editable\">let s = \"foo\n # bar\n\";\n</code></pre>"),
-        ];
-        for (src, should_be) in &inputs {
-            let got = add_playpen_pre(src, &Playpen { editable: true, ..Playpen::default() });
-            assert_eq!(&*got, *should_be);
-        }
-    }
 }

src/theme/book.js

@@ -161,34 +161,72 @@ function playpen_text(playpen) {
 
     Array.from(document.querySelectorAll("code.language-rust")).forEach(function (block) {
 
-        var lines = Array.from(block.querySelectorAll('.boring'));
+        var code_block = block;
+        var pre_block = block.parentNode;
+        // hide lines
+        var lines = code_block.innerHTML.split("\n");
+        var first_non_hidden_line = false;
+        var lines_hidden = false;
+        var trimmed_line = "";
+
+        for (var n = 0; n < lines.length; n++) {
+            trimmed_line = lines[n].trim();
+            if (trimmed_line[0] == hiding_character && trimmed_line[1] != hiding_character) {
+                if (first_non_hidden_line) {
+                    lines[n] = "<span class=\"hidden\">" + "\n" + lines[n].replace(/(\s*)# ?/, "$1") + "</span>";
+                }
+                else {
+                    lines[n] = "<span class=\"hidden\">" + lines[n].replace(/(\s*)# ?/, "$1") + "\n" + "</span>";
+                }
+                lines_hidden = true;
+            }
+            else if (first_non_hidden_line) {
+                lines[n] = "\n" + lines[n];
+            }
+            else {
+                first_non_hidden_line = true;
+            }
+            if (trimmed_line[0] == hiding_character && trimmed_line[1] == hiding_character) {
+                lines[n] = lines[n].replace("##", "#")
+            }
+        }
+        code_block.innerHTML = lines.join("");
+
         // If no lines were hidden, return
-        if (!lines.length) { return; }
+        if (!lines_hidden) { return; }
-        block.classList.add("hide-boring");
 
         var buttons = document.createElement('div');
         buttons.className = 'buttons';
         buttons.innerHTML = "<button class=\"fa fa-expand\" title=\"Show hidden lines\" aria-label=\"Show hidden lines\"></button>";
 
         // add expand button
-        var pre_block = block.parentNode;
         pre_block.insertBefore(buttons, pre_block.firstChild);
 
         pre_block.querySelector('.buttons').addEventListener('click', function (e) {
             if (e.target.classList.contains('fa-expand')) {
+                var lines = pre_block.querySelectorAll('span.hidden');
+
                 e.target.classList.remove('fa-expand');
                 e.target.classList.add('fa-compress');
                 e.target.title = 'Hide lines';
                 e.target.setAttribute('aria-label', e.target.title);
 
-                block.classList.remove('hide-boring');
+                Array.from(lines).forEach(function (line) {
+                    line.classList.remove('hidden');
+                    line.classList.add('unhidden');
+                });
             } else if (e.target.classList.contains('fa-compress')) {
+                var lines = pre_block.querySelectorAll('span.unhidden');
+
                 e.target.classList.remove('fa-compress');
                 e.target.classList.add('fa-expand');
                 e.target.title = 'Show hidden lines';
                 e.target.setAttribute('aria-label', e.target.title);
 
-                block.classList.add('hide-boring');
+                Array.from(lines).forEach(function (line) {
+                    line.classList.remove('unhidden');
+                    line.classList.add('hidden');
+                });
             }
         });
     });

src/theme/css/general.css

@@ -22,9 +22,8 @@ code {
 
 .left { float: left; }
 .right { float: right; }
-.boring { opacity: 0.6; }
-.hide-boring .boring { display: none; }
 .hidden { display: none; }
+.play-button.hidden { display: none; }
 
 h2, h3 { margin-top: 2.5em; }
 h4, h5 { margin-top: 2em; }