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..feb0910 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -1,86 +1,128 @@ 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 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(); - ${Quotes.quotes[randomnumber].author} + // 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} + +--- ### 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' - } +- 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). + `); + } + } + }, []); + + // 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 + }; + // Function to save the markdown content as a .md file + const saveMarkdownFile = () => { + const blob = new Blob([value], { type: 'text/markdown' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'document.md'; // Name of the file to be downloaded + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); // Clean up the URL object + }; return ( <> - - Online Markdown Editor | isalman.dev - - - - - -
- + Online Markdown Editor | isalman.dev + + + + + +
+ - {/*
- -
*/} -
+ {/* Pass darkMode to WordCounter */} + +
); }