From 81ab2eb7dba3ccf77dd30bccb8170f959ad998e2 Mon Sep 17 00:00:00 2001
From: Andrew Pritchard <andrewjpritchard@gmail.com>
Date: Tue, 24 Sep 2019 21:27:02 +0800
Subject: [PATCH] Added line numbers to editable sections of code.

- Added line numbers to config struct
- Added playpen_line_numbers field to hbs renderer.
- Added section to set `window.playpen_line_numbers = true` in page template
- Use line number global variable to show line numbers when required.
---
 book-example/book.toml                       | 1 +
 book-example/src/format/config.md            | 2 ++
 src/config.rs                                | 4 ++++
 src/renderer/html_handlebars/hbs_renderer.rs | 3 +++
 src/theme/index.hbs                          | 6 ++++++
 src/theme/playpen_editor/editor.js           | 6 ++++--
 6 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/book-example/book.toml b/book-example/book.toml
index a9ba5a78..100247fa 100644
--- a/book-example/book.toml
+++ b/book-example/book.toml
@@ -9,6 +9,7 @@ mathjax-support = true
 
 [output.html.playpen]
 editable = true
+line-numbers = true
 
 [output.html.search]
 limit-results = 20
diff --git a/book-example/src/format/config.md b/book-example/src/format/config.md
index d443911f..c1c7bb14 100644
--- a/book-example/src/format/config.md
+++ b/book-example/src/format/config.md
@@ -179,6 +179,7 @@ Available configuration options for the `[output.html.playpen]` table:
 - **editable:** Allow editing the source code. Defaults to `false`.
 - **copy-js:** Copy JavaScript files for the editor to the output directory.
   Defaults to `true`.
+- **line-numbers** Display line numbers on editable sections of code. Requires both `editable` and `copy-js` to be `true`. Defaults to `false`.
 
 [Ace]: https://ace.c9.io/
 
@@ -228,6 +229,7 @@ git-repository-icon = "fa-github"
 [output.html.playpen]
 editable = false
 copy-js = true
+line-numbers = false
 
 [output.html.search]
 enable = true
diff --git a/src/config.rs b/src/config.rs
index 17c941d2..4d58328a 100644
--- a/src/config.rs
+++ b/src/config.rs
@@ -472,6 +472,8 @@ pub struct Playpen {
     /// Copy JavaScript files for the editor to the output directory?
     /// Default: `true`.
     pub copy_js: bool,
+    /// Display line numbers on playpen snippets
+    pub line_numbers: bool,
 }
 
 impl Default for Playpen {
@@ -479,6 +481,7 @@ impl Default for Playpen {
         Playpen {
             editable: false,
             copy_js: true,
+            line_numbers: false,
         }
     }
 }
@@ -613,6 +616,7 @@ mod tests {
         let playpen_should_be = Playpen {
             editable: true,
             copy_js: true,
+            line_numbers: false,
         };
         let html_should_be = HtmlConfig {
             curly_quotes: true,
diff --git a/src/renderer/html_handlebars/hbs_renderer.rs b/src/renderer/html_handlebars/hbs_renderer.rs
index 7a7f0ef6..29229e13 100644
--- a/src/renderer/html_handlebars/hbs_renderer.rs
+++ b/src/renderer/html_handlebars/hbs_renderer.rs
@@ -442,6 +442,9 @@ fn make_data(
 
     if html.playpen.editable && html.playpen.copy_js {
         data.insert("playpen_js".to_owned(), json!(true));
+        if html.playpen.line_numbers {
+            data.insert("playpen_line_numbers".to_owned(), json!(true));
+        }
     }
 
     let search = html_config.search.clone();
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index 4e29807c..3ef89e7d 100644
--- a/src/theme/index.hbs
+++ b/src/theme/index.hbs
@@ -230,6 +230,12 @@
         </script>
         {{/if}}
 
+        {{#if playpen_line_numbers}}
+        <script type="text/javascript">
+            window.playpen_line_numbers = true;
+        </script>
+        {{/if}}
+
         {{#if playpen_js}}
         <script src="{{ path_to_root }}ace.js" type="text/javascript" charset="utf-8"></script>
         <script src="{{ path_to_root }}editor.js" type="text/javascript" charset="utf-8"></script>
diff --git a/src/theme/playpen_editor/editor.js b/src/theme/playpen_editor/editor.js
index f1072d4e..5bfa1aa7 100644
--- a/src/theme/playpen_editor/editor.js
+++ b/src/theme/playpen_editor/editor.js
@@ -6,12 +6,14 @@ window.editors = [];
     }
 
     Array.from(document.querySelectorAll('.editable')).forEach(function(editable) {
+        let display_line_numbers = window.playpen_line_numbers || false;
+
         let editor = ace.edit(editable);
             editor.setOptions({
             highlightActiveLine: false,
             showPrintMargin: false,
-            showLineNumbers: false,
-            showGutter: false,
+            showLineNumbers: display_line_numbers,
+            showGutter: display_line_numbers,
             maxLines: Infinity,
             fontSize: "0.875em" // please adjust the font size of the code in general.css
         });