From 83d8861a67bcf04f03ca610bc080f7be2b3163d4 Mon Sep 17 00:00:00 2001
From: pokepetter <pokepetter@gmail.com>
Date: Wed, 1 May 2024 20:01:58 +0200
Subject: [PATCH] added copy code buttons to code blocks.

---
 index.html | 18 ++++++++++++++----
 sswg.css   |  4 ++--
 sswg.py    | 23 +++++++++++++++++++++--
 3 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 5be0fd5..6cfc5fe 100644
--- a/index.html
+++ b/index.html
@@ -26,7 +26,7 @@ <h2><div id="Installation"/><br>
 <br>
 2) Install sswg:<br>
 <br>
-<div class="code_block" style="margin-left: 0em;">pip install <a href="https://github.com/pokepetter/sswg/archive/refs/heads/master.zip">https://github.com/pokepetter/sswg/archive/refs/heads/master.zip</a>
+<div class="code_block" id="code_block_0" style="margin-left: 0em;"><button class="copy_code_button" onclick="copy_to_clipboard(code_block_0)">copy</button>pip install <a href="https://github.com/pokepetter/sswg/archive/refs/heads/master.zip">https://github.com/pokepetter/sswg/archive/refs/heads/master.zip</a>
 </div><br>
 <h2><div id="How to Run"/><br>
 How to Run<br>
@@ -34,14 +34,14 @@ <h2><div id="How to Run"/><br>
 <br>
 cd into the folder where your text files are and run:<br>
 <br>
-<div class="code_block" style="margin-left: 0em;">python -m sswg
+<div class="code_block" id="code_block_1" style="margin-left: 0em;"><button class="copy_code_button" onclick="copy_to_clipboard(code_block_1)">copy</button>python -m sswg
 </div><br>
 <br>
 <h2><div id="Tags"/><br>
 Tags<br>
 </h2><br>
 <br>
-<div class="code_block" style="margin-left: 0em;"> - <gray># size <yellow>1</yellow>.<yellow>2</yellow><yellow>5</yellow></gray>
+<div class="code_block" id="code_block_2" style="margin-left: 0em;"><button class="copy_code_button" onclick="copy_to_clipboard(code_block_2)">copy</button> - <gray># size <yellow>1</yellow>.<yellow>2</yellow><yellow>5</yellow></gray>
  - <gray># width <yellow>9</yellow><yellow>0</yellow><yellow>0</yellow></gray>
  - <gray># left, right, center</gray>
  - <gray># normal, bold, bolder, lighter</gray>
@@ -75,7 +75,7 @@ <h2><div id="Example Website"/><br>
 Example Website<br>
 </h2><br>
 <br>
-<div class="code_block" style="margin-left: 0em;"><gray># center, bold, arial, size <yellow>5</yellow></gray>
+<div class="code_block" id="code_block_3" style="margin-left: 0em;"><button class="copy_code_button" onclick="copy_to_clipboard(code_block_3)">copy</button><gray># center, bold, arial, size <yellow>5</yellow></gray>
 
 ursina engine
 ʕ •ᴥ•ʔゝ□
@@ -111,6 +111,16 @@ <h2><div id="Made with sswg"/><br>
  (>.<)<br>
 (")_(")<br>
 <br>
+<script>
+function copy_to_clipboard(containerid) {
+    var range = document.createRange();
+    range.selectNode(containerid); //changed here
+    window.getSelection().removeAllRanges();
+    window.getSelection().addRange(range);
+    document.execCommand("copy");
+    window.getSelection().removeAllRanges();
+}
+</script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/sswg.css b/sswg.css
index 89ea4af..90ab3d6 100644
--- a/sswg.css
+++ b/sswg.css
@@ -15,10 +15,10 @@ a.button_big:hover {background-color: white; color: #e6d23f; text-decoration: un
 mark {background: #ccff99;}
 span {background-color: rgba(0, 0, 0, 0.55); padding: .1em; line-height: 1.35em;}
 img {max-width: 100%; vertical-align: top;}
-.code_block {background-color: whitesmoke; padding: 10px; margin: 0; font-family: monospace; font-size: 20; font-weight: normal; white-space: pre; overflow: auto; border-radius:4px; scrollbar-color:red;}
+.code_block {background-color: whitesmoke; padding: 10px; margin: 0; position: relative; font-family: monospace; font-size: 20; font-weight: normal; white-space: pre; overflow: auto; border-radius:4px; scrollbar-color:red;}
+.copy_code_button {position:absolute; right:10px; border:none; border-radius:5px; font-family:inherit; color:gray}
 /* Hide scrollbar for Chrome, Safari and Opera */
 .code_block::-webkit-scrollbar {
-  //display: none;
 }
 .sidebar {position:fixed; z-index:1; left:1em; top:1em;}
 @media screen and (max-width: 1800px) {.sidebar {display:none;}}
diff --git a/sswg.py b/sswg.py
index b776dc7..f648514 100644
--- a/sswg.py
+++ b/sswg.py
@@ -101,6 +101,7 @@ def get_tags(string, start_tag, end_tag, include_tags=False):
     is_code_block = False
     is_in_style_tag = False
     inline_images = list()
+    code_block_id = 0
 
     lines = text.split('\n')
 
@@ -214,7 +215,12 @@ def get_tags(string, start_tag, end_tag, include_tags=False):
                 if div_class:
                     div_class = f'class="{div_class}" '
 
-                new_text += f'<div {div_class}style="{style}">'
+                div_id = f'id="code_block_{code_block_id}" ' if is_code_block else ''
+
+                new_text += f'<div {div_class}{div_id}style="{style}">'
+                if is_code_block:
+                    new_text += f'<button class="copy_code_button" onclick="copy_to_clipboard(code_block_{code_block_id})">copy</button>'
+                    code_block_id += 1
 
                 if not is_code_block:
                     new_text += '\n'
@@ -326,6 +332,18 @@ def get_tags(string, start_tag, end_tag, include_tags=False):
 
             new_text += '\n'
 
+    new_text += dedent('''\
+        <script>
+        function copy_to_clipboard(containerid) {
+            var range = document.createRange();
+            range.selectNode(containerid); //changed here
+            window.getSelection().removeAllRanges();
+            window.getSelection().addRange(range);
+            document.execCommand("copy");
+            window.getSelection().removeAllRanges();
+        }
+        </script>
+        ''')
 
     new_text += '\n</body>\n</html>'
 
@@ -347,7 +365,8 @@ def get_tags(string, start_tag, end_tag, include_tags=False):
             mark {background: #ccff99;}
             span {background-color: rgba(0, 0, 0, 0.55); padding: .1em; line-height: 1.35em;}
             img {max-width: 100%; vertical-align: top;}
-            .code_block {background-color: whitesmoke; padding: 10px; margin: 0; font-family: monospace; font-size: 20; font-weight: normal; white-space: pre; overflow: auto; border-radius:4px; scrollbar-color:red;}
+            .code_block {background-color: whitesmoke; padding: 10px; margin: 0; position: relative; font-family: monospace; font-size: 20; font-weight: normal; white-space: pre; overflow: auto; border-radius:4px; scrollbar-color:red;}
+            .copy_code_button {position:absolute; right:10px; border:none; border-radius:5px; font-family:inherit; color:gray}
             /* Hide scrollbar for Chrome, Safari and Opera */
             .code_block::-webkit-scrollbar {
             }