From e45e81ab97c3d7d096a3c0d4b985f387bfa5d28e Mon Sep 17 00:00:00 2001
From: Boris Kubiak <kubiakboris@gmail.com>
Date: Mon, 27 Apr 2020 17:03:02 +0200
Subject: [PATCH] Edit embeded looks

---
 index.html | 25 +++++++++++++++++++++++--
 index.js   | 30 ++++++++++++++++--------------
 style.css  |  7 ++++++-
 3 files changed, 45 insertions(+), 17 deletions(-)
diff --git a/index.html b/index.html
index 1959db0..7db398c 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,14 @@ npm/codemirror@5.52.0/theme/dracula.min.css
         />
     </head>
     <body class="m-0">
+        <script>
+            const readOnly =
+                window.location !== window.parent.location ||
+                new URLSearchParams(window.location.search).has('readonly');
+            if (readOnly) {
+                document.body.classList.add('readonly');
+            }
+        </script>
         <div id="copy" class="container-fluid hidden shadow-bottom hide-readonly">
             <div class="row my-1">
                 <div class="col my-1">
@@ -74,7 +82,6 @@ npm/codemirror@5.52.0/theme/dracula.min.css
                         type="button"
                         id="enable-line-wrapping"
                         title="Enable line wrapping"
-                        class="hidden"
                     >
                         <svg class="icon"><use xlink:href="#icon-notes"></use></svg>
                     </button>
@@ -83,6 +90,7 @@ npm/codemirror@5.52.0/theme/dracula.min.css
                         type="button"
                         id="disable-line-wrapping"
                         title="Disable line wrapping"
+                        class="hidden"
                     >
                         <svg class="icon"><use xlink:href="#icon-wrap-text"></use></svg>
                     </button>
@@ -102,7 +110,14 @@ npm/codemirror@5.52.0/theme/dracula.min.css
         <div id="editor"></div>
         <footer id="footer" class="shadow-top container-fluid">
             <div class="row my-1">
-                <div class="col mono" id="stats"></div>
+                <div class="col mono hide-readonly" id="stats"></div>
+                <div class="col mono show-readonly">Hosted on NoPaste.ml</div>
+                <div class="col-auto mono show-readonly">
+                    <a href="javascript:void(0)" onclick="openInNewTab()">
+                        <svg class="icon icon-edit"><use xlink:href="#icon-edit"></use></svg>
+                        Edit
+                    </a>
+                </div>
             </div>
         </footer>
         <div class="hidden" id="overlay" onclick="this.classList.add('hidden')">
@@ -150,6 +165,12 @@ npm/codemirror@5.52.0/theme/dracula.min.css
                          7.25-4.156 3.344 0 7.094 2.672 7.094 6.25z"
                     ></path>
                 </symbol>
+                <symbol id="icon-edit" viewBox="0 0 24 24">
+                    <path
+                        d="M20.719 7.031l-1.828 1.828-3.75-3.75 1.828-1.828q0.281-0.281 0.703-0.281t0.703 0.281l2.344
+                         2.344q0.281 0.281 0.281 0.703t-0.281 0.703zM3 17.25l11.063-11.063 3.75 3.75-11.063 11.063h-3.75v-3.75z"
+                    ></path>
+                </symbol>
             </defs>
         </svg>
         <script src="https://cdn.jsdelivr.net/combine/
diff --git a/index.js b/index.js
index 5c4bdcc..e9379db 100644
--- a/index.js
+++ b/index.js
@@ -6,31 +6,26 @@ let select = null;
 let clipboard = null;
 let statsEl = null;
 
-const init = () => {
-    initCodeEditor();
-    initLangSelector();
-    initCode();
-    initClipboard();
-};
-
-const initCodeEditor = () => {
-    const readOnly = new URLSearchParams(window.location.search).has('readonly');
+const initCodeEditor = (initialValue) => {
     CodeMirror.modeURL = 'https://cdn.jsdelivr.net/npm/codemirror@5.52.0/mode/%N/%N.js';
     editor = new CodeMirror(byId('editor'), {
         lineNumbers: true,
         theme: 'dracula',
         readOnly: readOnly,
-        lineWrapping: true,
+        lineWrapping: false,
         scrollbarStyle: 'simple',
+        value: initialValue,
     });
     if (readOnly) {
         document.body.classList.add('readonly');
     }
 
     statsEl = byId('stats');
+    statsEl.innerHTML = `Length: ${initialValue.length} |  Lines: ${editor['doc'].size}`;
     editor.on('change', () => {
         statsEl.innerHTML = `Length: ${editor.getValue().length} |  Lines: ${editor['doc'].size}`;
     });
+    initLangSelector();
 };
 
 const initLangSelector = () => {
@@ -55,14 +50,16 @@ const initLangSelector = () => {
 const initCode = () => {
     const base64 = location.pathname.substr(1) || location.hash.substr(1);
     if (base64.length === 0) {
+        initCodeEditor('');
         return;
     }
     decompress(base64, (code, err) => {
         if (err) {
             alert('Failed to decompress data: ' + err);
+            initCodeEditor('');
             return;
         }
-        editor.setValue(code);
+        initCodeEditor(code);
     });
 };
 
@@ -125,6 +122,10 @@ const enableLineWrapping = () => {
     editor.setOption('lineWrapping', true);
 };
 
+const openInNewTab = () => {
+    window.open(location.href.replace('&readonly', ''));
+};
+
 // Build a shareable URL
 const buildUrl = (rawData, mode) => {
     const url = `${location.protocol}//${location.host}/` + rawData + `?lang=${encodeURIComponent(select.selected())}`;
@@ -132,8 +133,8 @@ const buildUrl = (rawData, mode) => {
         return `[NoPaste snippet](${url})`;
     }
     if (mode === 'iframe') {
-        const height = editor['doc'].size + 30;
-        return `<iframe width="100%" height="${height}" frameborder="0" src="${url}&readonly"></iframe>`;
+        const height = Math.min(editor['doc'].height + 45, 800);
+        return `<iframe width="100%" height="${height}" frameborder="0" src="${url}"></iframe>`;
     }
     return url;
 };
@@ -207,4 +208,5 @@ const testAllModes = () => {
     }
 };
 
-init();
+initCode(); // Will decode URL, create code editor, and language selector
+initClipboard();
diff --git a/style.css b/style.css
index 101c2dd..47e9ae2 100644
--- a/style.css
+++ b/style.css
@@ -36,7 +36,8 @@ footer {
 .hidden,
 select,
 #copy:not(.hidden) + #controls,
-.readonly .hide-readonly {
+body.readonly .hide-readonly,
+body:not(.readonly) .show-readonly {
     display: none;
 }
 
@@ -167,3 +168,7 @@ button:hover {
     stroke: currentColor;
     fill: currentColor;
 }
+.icon-edit {
+    font-size: 16px;
+    margin: -3px 0;
+}
