Fixes Page Scroll Issue

css/index.css

@@ -163,7 +163,7 @@ body.dark .github-corner {
 }
 
 .left-margin-and-content {
-  min-height: calc(100% - 50px);
+  height: calc(100% - 50px);
 }
 
 .page-a {
@@ -177,7 +177,7 @@ body.dark .github-corner {
   font-family: var(--handwriting-font);
   color: var(--ink-color);
   line-height: 1.5em;
-  overflow-y: auto;
+  overflow-y: hidden;
   scrollbar-color: transparent;
   scrollbar-width: thin;
 }
@@ -218,6 +218,7 @@ body.dark .github-corner {
   top: 0px;
   padding-top: 50px;
   overflow-x: hidden;
+  overflow-y: hidden;
   position: absolute;
   left: 0;
 }
@@ -236,6 +237,9 @@ body.dark .github-corner {
   /* background-image: linear-gradient(10deg, #000a, #0001); */
 }
 
+.draw-button {
+  display: inline-block;
+}
 /* OUTPUT */
 .output {
   width: 100%;

index.html

@@ -16,7 +16,11 @@
 
       gtag('config', 'UA-125454191-4');
     </script>
-
+    <script
+      src="https://code.jquery.com/jquery-3.5.1.min.js"
+      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
+      crossorigin="anonymous"
+    ></script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
@@ -175,6 +179,22 @@ <h2 style="margin-top: 0px;">Input</h2>
                 >
                   Draw <small>(Beta)</small>
                 </button>
+                <button
+                  id="add-page-button"
+                  type="button"
+                  style="font-size: 0.9rem; margin-top: 5px;"
+                  class="draw-button"
+                >
+                  Add Page
+                </button>
+                <button
+                  id="remove-page-button"
+                  type="button"
+                  style="font-size: 0.9rem; margin-top: 5px;"
+                  class="draw-button"
+                >
+                  Remove Page
+                </button>
               </div>
             </div>
 

js/app.mjs

@@ -1,4 +1,13 @@
-import { addFontFromFile, formatText } from './utils/helpers.mjs';
+import {
+  addFontFromFile,
+  formatText,
+  preventNewDiv,
+  trimContent,
+  setFalse,
+  setTrue,
+  addPage,
+  removePage
+} from './utils/helpers.mjs';
 import { generateImages, downloadAsPDF } from './generate-images.mjs';
 import { setInkColor, toggleDrawCanvas } from './utils/draw.mjs';
 
@@ -93,6 +102,18 @@ const EVENT_MAP = {
       toggleDrawCanvas();
     }
   },
+  '#add-page-button': {
+    on: 'click',
+    action: () => {
+      addPage();
+    }
+  },
+  '#remove-page-button': {
+    on: 'click',
+    action: () => {
+      removePage();
+    }
+  },
   '.draw-container .close-button': {
     on: 'click',
     action: () => {
@@ -104,22 +125,51 @@ const EVENT_MAP = {
     action: () => {
       downloadAsPDF();
     }
+  }
+};
+
+const DELEGATED_EVENT_MAP = [
+  {
+    on: 'keydown',
+    action: setTrue
+  },
+  {
+    on: 'keyup',
+    action: setFalse
   },
-  '.page-a .paper-content': {
+  {
     on: 'paste',
     action: formatText
+  },
+  {
+    on: 'keydown',
+    action: preventNewDiv
+  },
+  {
+    on: 'keydown',
+    action: trimContent
   }
-};
+];
 
 for (const eventSelector in EVENT_MAP) {
   document
-    .querySelector(eventSelector)
-    .addEventListener(
-      EVENT_MAP[eventSelector].on,
-      EVENT_MAP[eventSelector].action
+    .querySelectorAll(eventSelector)
+    .forEach((node) =>
+      node.addEventListener(
+        EVENT_MAP[eventSelector].on,
+        EVENT_MAP[eventSelector].action
+      )
     );
 }
 
+for (const childSelector of DELEGATED_EVENT_MAP) {
+  $('.page-container').on(
+    childSelector.on,
+    '.page-a div[contenteditable=true]',
+    childSelector.action
+  );
+}
+
 /**
  * This makes toggles, accessible.
  */

js/generate-images.mjs

@@ -5,14 +5,13 @@ import {
 } from './utils/generate-utils.mjs';
 import { createPDF } from './utils/helpers.mjs';
 
-const pageEl = document.querySelector('.page-a');
 const outputImages = [];
 
 /**
  * To generate image, we add styles to DIV and converts that HTML Element into Image.
  * This is the function that deals with it.
  */
-async function convertDIVToImage() {
+async function convertDIVToImage(pageEl) {
   const options = {
     scrollX: 0,
     scrollY: -window.scrollY,
@@ -29,72 +28,43 @@ async function convertDIVToImage() {
     contrastImage(imageData, 0.55);
     canvas.getContext('2d').putImageData(imageData, 0, 0);
   }
-
-  outputImages.push(canvas);
-  // Displaying no. of images on addition
-  if (outputImages.length >= 1) {
-    document.querySelector('#output-header').textContent =
-      'Output ' + '( ' + outputImages.length + ' )';
-  }
+  return canvas;
 }
 
 /**
  * This is the function that gets called on clicking "Generate Image" button.
  */
 export async function generateImages() {
-  applyPaperStyles();
-  pageEl.scrollTo(0, 0);
-
-  const paperContentEl = document.querySelector('.page-a .paper-content');
-  const scrollHeight = paperContentEl.scrollHeight;
-  const clientHeight = 514; // height of .paper-content when there is no content
-
-  const totalPages = Math.ceil(scrollHeight / clientHeight);
-
-  if (totalPages > 1) {
-    // For multiple pages
-    if (paperContentEl.innerHTML.includes('<img')) {
-      alert(
-        "You're trying to generate more than one page, Images and some formatting may not work correctly with multiple images" // eslint-disable-line max-len
-      );
-    }
-    const initialPaperContent = paperContentEl.innerHTML;
-    const splitContent = initialPaperContent.split(/(\s+)/);
-
-    // multiple images
-    let wordCount = 0;
-    for (let i = 0; i < totalPages; i++) {
-      paperContentEl.innerHTML = '';
-      const wordArray = [];
-      let wordString = '';
-
-      while (
-        paperContentEl.scrollHeight <= clientHeight &&
-        wordCount <= splitContent.length
-      ) {
-        wordString = wordArray.join(' ');
-        wordArray.push(splitContent[wordCount]);
-        paperContentEl.innerHTML = wordArray.join(' ');
-        wordCount++;
-      }
-      paperContentEl.innerHTML = wordString;
-      wordCount--;
-      pageEl.scrollTo(0, 0);
-      await convertDIVToImage();
-      paperContentEl.innerHTML = initialPaperContent;
-    }
-  } else {
-    // single image
-    await convertDIVToImage();
+  let pageEl;
+  const allPagePromises = [];
+  const allPaperStylePromises = [];
+  const allRemoveStylePromises = [];
+  const paperContentEl = document.querySelectorAll('.page-a');
+  const paperArr = [...paperContentEl];
+  const totalPages = paperArr.length;
+  for (let index = 0; index < totalPages; index++) {
+    pageEl = paperArr[index];
+    pageEl.scrollTo(0, 0);
+    allPaperStylePromises.push(applyPaperStyles(pageEl));
+    allPagePromises.push(convertDIVToImage(pageEl));
+    allRemoveStylePromises.push(removePaperStyles(pageEl));
+  }
+  await Promise.all(allPaperStylePromises);
+  const allPages = await Promise.all(allPagePromises);
+  await Promise.all(allRemoveStylePromises);
+  outputImages.push(...allPages);
+  // Displaying no. of images on addition
+  if (outputImages.length >= 1) {
+    document.querySelector('#output-header').textContent =
+      'Output ' + '( ' + outputImages.length + ' )';
   }
-
-  removePaperStyles();
   renderOutput(outputImages);
   setRemoveImageListeners();
 }
 
 /**
  * Downloads generated images as PDF
+ *
  */
 export const downloadAsPDF = () => createPDF(outputImages);
 

js/utils/generate-utils.mjs

@@ -1,6 +1,6 @@
-const pageEl = document.querySelector('.page-a');
-const paperContentEl = document.querySelector('.page-a .paper-content');
-const overlayEl = document.querySelector('.overlay');
+// const pageEl = document.querySelector('.page-a');
+let paperContentEl;
+let overlayEl;
 
 let paperContentPadding;
 
@@ -15,10 +15,11 @@ function isFontErrory() {
   );
 }
 
-function applyPaperStyles() {
+async function applyPaperStyles(pageEl) {
   pageEl.style.border = 'none';
   pageEl.style.overflowY = 'hidden';
-
+  paperContentEl = pageEl.querySelector('.paper-content');
+  overlayEl = pageEl.querySelector('.overlay');
   // Adding class shadows even if effect is scanner
   if (document.querySelector('#page-effects').value === 'scanner') {
     overlayEl.classList.add('shadows');
@@ -46,10 +47,11 @@ function applyPaperStyles() {
   }
 }
 
-function removePaperStyles() {
+async function removePaperStyles(pageEl) {
   pageEl.style.overflowY = 'auto';
   pageEl.style.border = '1px solid var(--elevation-background)';
-
+  paperContentEl = pageEl.querySelector('.paper-content');
+  overlayEl = pageEl.querySelector('.overlay');
   if (document.querySelector('#page-effects').value === 'scanner') {
     overlayEl.classList.remove('shadows');
   } else {