Feat: Font size

Author: peterjuma

package-lock.json

@@ -9,7 +9,6 @@
   "main": "src/index.js",
   "homepage": "https://apps.peterjuma.com/noteApp",
   "dependencies": {
-    "@monaco-editor/react": "^4.1.3",
     "file-saver": "^2.0.5",
     "gh-pages": "^3.1.0",
     "github-markdown": "^3.2.0",
@@ -25,10 +24,12 @@
     "marked": "^2.0.3",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "react-input-number": "^5.0.19",
     "react-markdown": "^6.0.1",
     "react-scripts": "4.0.0",
     "react-syntax-highlighter": "^15.4.3",
     "remark-gfm": "^1.0.0",
+    "rsuite": "^4.9.4",
     "turndown": "^7.0.0",
     "turndown-plugin-gfm": "^1.0.2"
   },

package.json

@@ -36,7 +36,6 @@ class App extends Component {
     this.handleDownloadNote = this.handleDownloadNote.bind(this);
     this.handleSearchNotes = this.handleSearchNotes.bind(this);
     this.handleIndexedDB = this.handleIndexedDB.bind(this);
-    this.handleCopyNote = this.handleCopyNote.bind(this);
     this.handleCopyEvent = this.handleCopyEvent.bind(this);
     this.handleSortNotes = this.handleSortNotes.bind(this);
     this.updateCodeSyntaxHighlighting;
@@ -369,42 +368,7 @@ class App extends Component {
     }
   }
 
-  handleCopyNote(e, content) {
-    var textArea = document.createElement("textarea");
-    // Place in top-left corner of screen regardless of scroll position.
-    textArea.style.position = "fixed";
-    textArea.style.top = 0;
-    textArea.style.left = 0;
-    // Ensure it has a small width and height. Setting to 1px / 1em
-    // doesn't work as this gives a negative w/h on some browsers.
-    textArea.style.width = "2em";
-    textArea.style.height = "2em";
-    // We don't need padding, reducing the size if it does flash render.
-    textArea.style.padding = 0;
-    // Clean up any borders.
-    textArea.style.border = "none";
-    textArea.style.outline = "none";
-    textArea.style.boxShadow = "none";
-    // Avoid flash of white box if rendered for any reason.
-    textArea.style.background = "transparent";
-    textArea.value =
-      typeof content === "object"
-        ? `## ${content.notetitle}\n${content.notebody}`
-        : content;
-    document.body.appendChild(textArea);
-    textArea.focus();
-    textArea.select();
-    try {
-      var successful = document.execCommand("copy");
-    } catch (err) {
-      console.log("Oops, unable to copy");
-    }
-    document.body.removeChild(textArea);
-  }
-
-  handleCopyEvent(e) {
-    e.preventDefault();
-    var copiedContent = "";
+  handleCopyEvent(e, copiedContent = "") {
     if (typeof window.getSelection != "undefined") {
       var sel = window.getSelection();
       if (sel.rangeCount) {
@@ -419,7 +383,10 @@ class App extends Component {
         copiedContent = document.selection.createRange().htmlText;
       }
     }
-    this.handleCopyNote("", html2md.turndown(copiedContent));
+
+    e.clipboardData.setData("text/html", copied);
+    e.clipboardData.setData("text/plain", html2md.turndown(copied));
+    e.preventDefault();
   }
 
   handleSearchNotes(e) {
@@ -483,7 +450,7 @@ class App extends Component {
           }}
           handleEditNoteBtn={this.handleEditNoteBtn}
           handleDeleteNote={this.handleDeleteNote}
-          handleCopyNote={this.handleCopyNote}
+          handleCopyEvent={this.handleCopyEvent}
           handleDownloadNote={this.handleDownloadNote}
         />
       );

src/App.js

@@ -3,9 +3,14 @@ import NotePreview from "./NotePreview";
 import keyCodes from "./KeyCodes";
 import { html2md, md2html } from "./useMarkDown";
 import marked from "marked";
+import InputNumber from "react-input-number";
 
 function NoteEditor(props) {
   var note = props.editNoteData;
+
+  // Handle FontSize
+  const [fontsize, setFontsize] = useState(16);
+
   // Set default screen size  - full
   const [splitscreen, setSplitscreen] = useState(false);
   const styles = {
@@ -29,7 +34,7 @@ function NoteEditor(props) {
       margin: "0 auto",
       width: "100%",
       padding: "50px 60px",
-      fontSize: "16px",
+      fontSize: `${fontsize}px`,
       fontWeight: "400",
       overflow: "auto",
       lineHeight: "1.45",
@@ -450,6 +455,25 @@ function NoteEditor(props) {
           >
             <span className="tooltiptext">Strikethrough</span>
           </i>
+          <InputNumber
+            min={10}
+            max={48}
+            step={1}
+            value={fontsize}
+            onChange={setFontsize}
+            style={{
+              width: "4.2rem",
+              height: "2.7rem",
+              borderRadius: "4px 2px 2px 4px",
+              color: "#292a2b",
+              padding: "0.1ex 1ex",
+              border: "1px solid #ccc",
+              fontWeight: 100,
+              textShadow: "1px 1px 1px rgba(0, 0, 0, 0.1)",
+              outline: "none",
+            }}
+          />
+
           <div style={styles.buttons}>
             <i
               className={screenSize.buttonClass}
@@ -481,8 +505,8 @@ function NoteEditor(props) {
               id="notebody"
               ref={inputRef}
               data-action={note.action}
-              selectionEnd={cusor.end}
-              selectionStart={cusor.start}
+              selectionend={cusor.end}
+              selectionstart={cusor.start}
               style={
                 toggleState.theme === "vs-light"
                   ? { ...styles.textarea, ...styles.light }

src/NoteEditor.js

@@ -380,7 +380,6 @@ h3 {
   max-width: 1440px;
   margin: 0 auto;
   width: 100%;
-  font-size: 16px;
   font-weight: 400;
   overflow: auto;
   line-height: 1.45;
@@ -591,3 +590,7 @@ button[disabled]:hover {
   opacity: 0.6;
   font-size: 1.55rem;
 }
+
+input[type="number"] {
+  width: 4rem;
+}