fix: Responsive Editor options and wordcount ( #31 from 1-Harshit/res…

…ponsiveness) fix: Responsive Editor options and wordcount
1-Harshit · Nov 17, 2023 · 386772e · 386772e
2 parents 9fce309 + ceda2b5
commit 386772e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/components/card/WordCountCard.tsx b/src/components/card/WordCountCard.tsx
@@ -13,7 +13,7 @@ export default function Default(props: {value: number}) {
 	const boxBg = useColorModeValue("secondaryGray.300", "whiteAlpha.100");
 
 	return (
-		<Card py='15px'>
+		<Card py='15px' h='100%'>
 			<Flex my='auto' h='100%' align={{ base: 'center', xl: 'start' }} justify={{ base: 'center', xl: 'center' }}>
 				<IconBox
 					w="56px"

diff --git a/src/components/editor/EditorOptions.tsx b/src/components/editor/EditorOptions.tsx
@@ -31,7 +31,7 @@ export default function Default(props: { name: string }) {
 	const boxBg = useColorModeValue("secondaryGray.300", "whiteAlpha.100");
 
 	return (
-		<Card py="15px">
+		<Card py="15px" h="100%">
 			<Flex
 				my="auto"
 				h="100%"

diff --git a/src/views/editor/index.tsx b/src/views/editor/index.tsx
@@ -32,28 +32,39 @@ import {
 import WordCountCard from "components/card/WordCountCard";
 import EditorOptions from "components/editor/EditorOptions";
 import EditorArea from "components/editor/EditorArea";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function EditorHome() {
 	const [wordCount, setWrordCount] = useState(0);
 
+	const setWrordCountFromText = (text: string) => {
+		text = text.trim();
+		const value = text === "" ? 0 : text.split(/\s+/).length;
+		setWrordCount(value);
+	};
+
 	const handleContentChange = (e: React.SyntheticEvent) => {
 		const target = e.target as HTMLDivElement;
 		console.log(target.innerHTML);
-		setWrordCount(target.innerText.trim().split(/\s+/).length);
+		setWrordCountFromText(target.innerText);
 	};
 
+	useEffect(() => {
+		const target = document.getElementById("editor-main") as HTMLDivElement;
+		setWrordCountFromText(target.innerText);
+	}, []);
+
 	return (
 		<Box pt={{ base: "130px", md: "80px", xl: "80px" }}>
 			<Grid
 				templateColumns="repeat(5, 1fr)"
 				gap="20px"
 				mb="20px"
 			>
-				<GridItem colSpan={4}>
+				<GridItem colSpan={{ base: 5, lg: 4 }} minHeight="100px">
 					<EditorOptions name="Editor Options" />
 				</GridItem>
-				<GridItem colSpan={1}>
+				<GridItem colSpan={1} minHeight="100px" display={{ base: "none", lg: "block" }}>
 					<WordCountCard value={wordCount} />
 				</GridItem>
 			</Grid>