Release/v1.0.2

README.md

@@ -49,7 +49,7 @@ export default App
 
 ### Props
 
-> All props except `onChange` are optional.
+> All props are optional, that's how you can **fully customize** it!
 
 | Name                     | Optional | Type                | Description                                                           |
 | ------------------------ | -------- | ------------------- | --------------------------------------------------------------------- |
@@ -60,7 +60,7 @@ export default App
 | disabled                 | ✔️       | `boolean`           | Flag that disables the input element                                  |
 | updatedContent           | ✔️       | `string`            | Text injected from parent element into the input as the current value |
 | onContentExternalUpdate  | ✔️       | `(content) => void` | Method that emits the injected content by the `updatedContent` prop   |
-| onChange                 | ❌       | `(content) => void` | Method that emits the current content as a string                     |
+| onChange                 | ✔️       | `(content) => void` | Method that emits the current content as a string                     |
 | onKeyUp                  | ✔️       | `(e) => void`       | Method that emits the keyUp keyboard event                            |
 | onKeyDown                | ✔️       | `(e) => void`       | Method that emits the keyDown keyboard event                          |
 | onFocus                  | ✔️       | `(e) => void`       | Method that emits the focus event                                     |

lib/ContentEditable.tsx

@@ -7,7 +7,7 @@ interface ContentEditableProps {
   placeholder?: string
   disabled?: boolean
   updatedContent?: string
-  onChange: (content: string) => void
+  onChange?: (content: string) => void
   onKeyUp?: (e: React.KeyboardEvent) => void
   onKeyDown?: (e: React.KeyboardEvent) => void
   onFocus?: (e: React.FocusEvent) => void
@@ -43,7 +43,7 @@ const ContentEditable: React.FC<ContentEditableProps> = ({
   useEffect(() => {
     if (divRef.current) {
       divRef.current.style.height = "auto"
-      onChange(content)
+      if (onChange) onChange(content)
     }
   }, [content, onChange])
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-basic-contenteditable",
   "description": "React 18 contenteditable component. Super-customizable!",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

src/App.css

@@ -27,15 +27,22 @@ body {
 .full-width {
   width: 100%;
 }
+.falsy,
+.truthy {
+  padding: 0.1rem 0.4rem;
+  border-radius: 0.25rem;
+}
 .falsy {
   color: red;
+  background-color: rgba(248, 84, 84, 0.28);
 }
 .truthy {
   color: green;
+  background-color: rgba(5, 157, 5, 0.28);
 }
 
 .main-container {
-  min-height: 100vh;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -55,10 +62,13 @@ body {
   align-self: flex-start;
   padding: 0.85rem 1rem;
   border-radius: 0.35rem;
-  background-color: #eff1f6;
+  background-color: #f4f4f5;
+  border: 1px solid #e4e4e7;
   letter-spacing: 0.05ch;
   line-height: 1.2;
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  max-width: 100%;
 }
 .message-history-container,
 .input-container {
@@ -69,14 +79,17 @@ body {
   position: relative;
 }
 .input-element {
-  border: 1px solid #ccc;
+  border: 1px solid #e4e4e7;
   border-radius: 0.35rem;
   line-height: 1.3;
   min-height: 1.188rem;
   max-height: 10rem;
 }
+.input-element:focus {
+  outline: 1px solid #86868b;
+}
 .input-placeholder {
-  color: #a2acb4;
+  color: #71717a;
   margin-left: 1rem;
 }
 
@@ -89,7 +102,7 @@ body {
   font-size: 0.875rem;
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
-  border-top: 1px solid #0b57d0;
+  border-top: 1px dashed #0b57d0;
   background-color: #e0e8f6;
   padding: 2rem 3rem;
 }
@@ -100,16 +113,22 @@ body {
   gap: 0.35rem;
 }
 
+.current-message-text {
+  overflow-wrap: anywhere;
+}
+
 button {
   cursor: pointer;
   appearance: none;
   border: none;
   background-color: #2f6ed3;
   color: white;
-  padding: 0.875rem 1rem;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  padding: 0.5rem 1rem;
   border-radius: 0.35rem;
   letter-spacing: 0.08ch;
 }
 button:hover {
-  background-color: #1f4aa8;
+  background-color: #255db8;
 }

src/App.tsx

@@ -59,7 +59,10 @@ const App = () => {
       <div className="full-width metrics-section">
         <div className="metrics-section__left-box">
           <div>
-            Content: <b>{truncateString(content, 200)}</b>
+            Content:{" "}
+            <b className="current-message-text">
+              {truncateString(content, 200)}
+            </b>
           </div>
           <div>
             Is focused:{" "}