From 0f439a97a1940c2e76931a81cda42ee5e298f047 Mon Sep 17 00:00:00 2001 From: HOTHEAD01TH Date: Sat, 12 Oct 2024 00:13:38 +0530 Subject: [PATCH 1/3] added word and character count and added auto save feature that saves md content to localstorage --- components/WordCounter.tsx | 18 +++++ pages/editor.tsx | 136 ++++++++++++++++++++++--------------- 2 files changed, 99 insertions(+), 55 deletions(-) create mode 100644 components/WordCounter.tsx diff --git a/components/WordCounter.tsx b/components/WordCounter.tsx new file mode 100644 index 0000000..ab5329b --- /dev/null +++ b/components/WordCounter.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +interface WordCounterProps { + text: string; +} + +const WordCounter: React.FC = ({ text }) => { + const wordCount = text.trim().split(/\s+/).length; + const characterCount = text.length; + + return ( +
+ Words: {wordCount} | Characters: {characterCount} +
+ ); +}; + +export default WordCounter; \ No newline at end of file diff --git a/pages/editor.tsx b/pages/editor.tsx index 606c71b..5b7f30b 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -1,86 +1,112 @@ import dynamic from "next/dynamic"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import Head from 'next/head'; import Switch from "react-switch"; import { useRouter } from 'next/router'; -import Image from 'next/image' import "@uiw/react-md-editor/markdown-editor.css"; import "@uiw/react-markdown-preview/markdown.css"; import "../styles/Editor.module.css"; -import {uncheckedIcon, checkedIcon} from '../src/svg'; +import { uncheckedIcon, checkedIcon } from '../src/svg'; import Quotes from '../src/mdQuotes'; - +// Dynamic import for the markdown editor const MDEditor = dynamic( () => import("@uiw/react-md-editor").then((mod) => mod.default), { ssr: false } ); -const EditerMarkdown = dynamic( - () => - import("@uiw/react-md-editor").then((mod) => { - return mod.default.Markdown; - }), - { ssr: false } -); + +// WordCounter Component +const WordCounter = ({ text, darkMode }: { text: string; darkMode: boolean }) => { + const wordCount = text.trim() ? text.trim().split(/\s+/).length : 0; // Count words + const characterCount = text.length; // Count characters + + return ( +
+ Words: {wordCount} | Characters: {characterCount} +
+ ); +}; function HomePage() { -// generate random number from quotes range -var randomnumber = Math.floor(Math.random() * ((Quotes.quotes.length-1) - 0 + 1)) + 0; - const [value, setValue] = useState(` - ## A quote you may need for today 😊 - > ${Quotes.quotes[randomnumber].quote} + const [value, setValue] = useState(""); // Initialize with an empty string + const [darkMode, setDarkMode] = useState(false); + const router = useRouter(); + let navBackground = { + dark: 'flex justify-between bg-gradient-to-r from-slate-700 via-neutral-700 to-gray-800', + light: 'flex justify-between bg-gradient-to-r from-indigo-100 via-purple-200 to-pink-200' + }; + + // Load saved content from localStorage when the component mounts + useEffect(() => { + if (typeof window !== "undefined") { // Check if running in the browser + const savedContent = localStorage.getItem('markdownContent'); + if (savedContent) { + setValue(savedContent); + } else { + // Set initial content if nothing is saved + const randomnumber = Math.floor(Math.random() * Quotes.quotes.length); + setValue(` +## A quote you may need for today 😊 +> ${Quotes.quotes[randomnumber].quote} - ${Quotes.quotes[randomnumber].author} + ${Quotes.quotes[randomnumber].author} ----- +--- ### Getting started 😎 - Delete this template before starting. - This editor supports all markdown functionalities. - Fully open-source. - We don't store your data, anything you type remains in your local browser (_Once we move to cloud, we will encryt all of your data before saving them on servers_). - Want any improvemnts or contribute @ [GitHub](https://github.com/hotheadhacker/next-markdown). - ` as any); - const [darkMode, setDarkMode] = useState(false); - const router = useRouter(); - let navBackground = { - dark: 'flex justify-between bg-gradient-to-r from-slate-700 via-neutral-700 to-gray-800', - light: 'flex justify-between bg-gradient-to-r from-indigo-100 via-purple-200 to-pink-200' - } + `); + } + } + }, []); + // Save content to localStorage whenever it changes + useEffect(() => { + if (typeof window !== "undefined") { // Check if running in the browser + localStorage.setItem('markdownContent', value); + } + }, [value]); + + // Wrapper function for onChange + const handleEditorChange = (value?: string) => { + setValue(value || ""); // Update state with the new value + }; return ( <> - - Online Markdown Editor | isalman.dev - - - - - -
- - {/*
- -
*/} + + Online Markdown Editor | isalman.dev + + + + + +
+ + {/* Pass darkMode to WordCounter */} +
); } From 094a0fe23bd2bcd68d4e2f0ce2b364bad55907b2 Mon Sep 17 00:00:00 2001 From: HOTHEAD01TH Date: Sat, 12 Oct 2024 01:13:52 +0530 Subject: [PATCH 2/3] slightly cleaner navbar --- pages/editor.tsx | 41 +++++++++++++++++++---------------------- 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/pages/editor.tsx b/pages/editor.tsx index 5b7f30b..010930d 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -1,12 +1,10 @@ import dynamic from "next/dynamic"; import { useState, useEffect } from "react"; import Head from 'next/head'; -import Switch from "react-switch"; import { useRouter } from 'next/router'; import "@uiw/react-md-editor/markdown-editor.css"; import "@uiw/react-markdown-preview/markdown.css"; import "../styles/Editor.module.css"; -import { uncheckedIcon, checkedIcon } from '../src/svg'; import Quotes from '../src/mdQuotes'; // Dynamic import for the markdown editor @@ -31,10 +29,6 @@ function HomePage() { const [value, setValue] = useState(""); // Initialize with an empty string const [darkMode, setDarkMode] = useState(false); const router = useRouter(); - let navBackground = { - dark: 'flex justify-between bg-gradient-to-r from-slate-700 via-neutral-700 to-gray-800', - light: 'flex justify-between bg-gradient-to-r from-indigo-100 via-purple-200 to-pink-200' - }; // Load saved content from localStorage when the component mounts useEffect(() => { @@ -56,8 +50,8 @@ function HomePage() { - Delete this template before starting. - This editor supports all markdown functionalities. - Fully open-source. -- We don't store your data, anything you type remains in your local browser (_Once we move to cloud, we will encryt all of your data before saving them on servers_). -- Want any improvemnts or contribute @ [GitHub](https://github.com/hotheadhacker/next-markdown). +- We don't store your data, anything you type remains in your local browser (_Once we move to cloud, we will encrypt all of your data before saving them on servers_). +- Want any improvements or contribute @ [GitHub](https://github.com/hotheadhacker/next-markdown). `); } } @@ -83,20 +77,23 @@ function HomePage() { -