| import { useRef, useEffect } from "react"; | |
| interface NoteEditorProps { | |
| content: string; | |
| onChange: (html: string) => void; | |
| } | |
| export function NoteEditor({ content, onChange }: NoteEditorProps) { | |
| const ref = useRef<HTMLDivElement>(null); | |
| useEffect(() => { | |
| if (ref.current && ref.current.innerHTML !== content) { | |
| ref.current.innerHTML = content; | |
| } | |
| }, [content]); | |
| return ( | |
| <div className="relative"> | |
| <div | |
| ref={ref} | |
| contentEditable | |
| suppressContentEditableWarning | |
| className="min-h-[60px] p-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" | |
| onInput={(e) => onChange(e.currentTarget.innerHTML)} | |
| data-placeholder="Write a note…" | |
| style={ | |
| { | |
| "--placeholder": "'Write a note…'", | |
| } as React.CSSProperties | |
| } | |
| /> | |
| <style>{` | |
| [contentEditable]:empty:before { | |
| content: var(--placeholder); | |
| color: #9ca3af; | |
| } | |
| `}</style> | |
| </div> | |
| ); | |
| } |
Xet Storage Details
- Size:
- 1.13 kB
- Xet hash:
- 07fa97f766b35fa5f0b59103116ab3f79cb6ebdbf8d100c910d31360ced65898
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.