feat: implemented demo page

Author: ChrisUser

lib/ContentEditable.tsx

@@ -33,8 +33,9 @@ const ContentEditable: React.FC<ContentEditableProps> = ({
   const divRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
-    if (updatedContent) {
+    if (updatedContent !== null && updatedContent !== undefined) {
       setContent(updatedContent)
+      if (divRef.current) divRef.current.innerText = updatedContent
       if (onContentExternalUpdate) onContentExternalUpdate(updatedContent)
     }
   }, [updatedContent, onContentExternalUpdate])

src/App.css

@@ -1,14 +1,45 @@
+.full-width {
+  width: 100%;
+}
+.falsy {
+  color: red;
+}
+.truthy {
+  color: green;
+}
+
 .main-container {
-  padding: 3rem;
+  min-height: 100vh;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  justify-content: flex-end;
   align-items: center;
 }
-.full-width {
-  width: 100%;
+.message-history-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 2rem 0;
+  flex: 1;
+  overflow: auto;
+  max-height: 75vh;
+}
+.message-item {
+  display: flex;
+  align-self: flex-start;
+  padding: 0.85rem 1rem;
+  border-radius: 0.35rem;
+  background-color: #eff1f6;
+  letter-spacing: 0.05ch;
+  line-height: 1.2;
+  white-space: pre-wrap;
+}
+.message-history-container,
+.input-container {
+  padding: 0 3rem;
 }
+
 .input-container {
-  padding: 0 1rem;
   position: relative;
 }
 .input-element {
@@ -22,3 +53,37 @@
   color: #a2acb4;
   margin-left: 1rem;
 }
+
+.metrics-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 2rem;
+  margin: 2rem -3rem 0;
+  font-size: 0.875rem;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+  border-top: 1px solid #0b57d0;
+  background-color: #e0e8f6;
+  padding: 2rem 3rem;
+}
+.metrics-section__left-box {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+button {
+  cursor: pointer;
+  appearance: none;
+  border: none;
+  background-color: #2f6ed3;
+  color: white;
+  padding: 0.875rem 1rem;
+  border-radius: 0.35rem;
+  letter-spacing: 0.08ch;
+}
+button:hover {
+  background-color: #1f4aa8;
+}

src/App.tsx

@@ -1,19 +1,89 @@
 import ContentEditable from "../lib/ContentEditable"
 import "./App.css"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 
 function App() {
+  const [emptyContent, setEmptyContent] = useState<string | undefined>(
+    undefined
+  )
   const [content, setContent] = useState("")
+  const [isFocused, setIsFocused] = useState(false)
+  const [isBlurred, setIsBlurred] = useState(false)
+  const [keyDown, setKeyDown] = useState("")
+  const [keyUp, setKeyUp] = useState("")
+  const [messageHistory, setMessageHistory] = useState<string[]>([
+    "Type something and press on 'Send' to send another message...",
+  ])
+
+  const truncateString = (str: string, limit: number) => {
+    return str.length > limit ? str.slice(0, limit) + "..." : str
+  }
+
+  useEffect(() => {
+    setEmptyContent(undefined)
+  }, [emptyContent])
+
+  const saveMessageInHistory = (message: string) => {
+    setMessageHistory([...messageHistory, message])
+    setContent("")
+    setEmptyContent("")
+  }
+
   return (
-    <div className="main-container full-width">
-      <div style={{ whiteSpace: "pre-wrap" }}>{content}</div>
+    <div className="full-width main-container">
+      <div className="full-width message-history-container">
+        {messageHistory.map((message, index) => (
+          <div key={index} className="message-item">
+            {message}
+          </div>
+        ))}
+      </div>
       <ContentEditable
         placeholder="Type here"
         containerClassName="full-width input-container"
         contentEditableClassName="full-width input-element"
         placeholderClassName="input-placeholder"
+        updatedContent={emptyContent}
         onChange={(content) => setContent(content)}
+        onFocus={() => {
+          setIsFocused(true)
+          setIsBlurred(false)
+        }}
+        onBlur={() => {
+          setIsFocused(false)
+          setIsBlurred(true)
+        }}
+        onKeyDown={(e) => setKeyDown(e.key)}
+        onKeyUp={(e) => setKeyUp(e.key)}
       />
+      <div className="full-width metrics-section">
+        <div className="metrics-section__left-box">
+          <div>
+            Content: <b>{truncateString(content, 200)}</b>
+          </div>
+          <div>
+            Is focused:{" "}
+            <b className={isFocused ? "truthy" : "falsy"}>
+              {isFocused ? "true" : "false"}
+            </b>
+          </div>
+          <div>
+            Is blurred:{" "}
+            <b className={isBlurred ? "truthy" : "falsy"}>
+              {isBlurred ? "true" : "false"}
+            </b>
+          </div>
+          <div>
+            Key down: <b>{keyDown}</b>
+          </div>
+          <div>
+            Key up: <b>{keyUp}</b>
+          </div>
+        </div>
+        <div>
+          <button onClick={() => saveMessageInHistory(content)}>Send</button>
+        </div>
+      </div>
     </div>
   )
 }

src/index.css

@@ -6,7 +6,9 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
+* {
+  box-sizing: border-box;
+}
 body {
   margin: 0;
   display: flex;