pancy fants

src/components/FancyTextEditor.tsx

@@ -18,8 +18,8 @@ export default function FancyTextEditor({
   value: _value,
   onInput,
   onKeyDown,
-  className,
-  placeholder,
+  className: extraClasses = '',
+  placeholder = '',
 }: TextInputProps) {
   const divRef = useRef<HTMLDivElement>(null)
   const [hasFocus, setHasFocus] = useState(false)
@@ -39,7 +39,7 @@ export default function FancyTextEditor({
     }
 
     if (!value && !hasFocus) {
-      div.innerText = placeholder ?? ''
+      div.innerText = placeholder
     } else if (div.innerText !== value) {
       div.innerText = value
     }
@@ -58,7 +58,7 @@ export default function FancyTextEditor({
     const blurListener = () => {
       setHasFocus(false)
       if (!value) {
-        div.innerText = placeholder ?? ''
+        div.innerText = placeholder
       }
     }
 
@@ -86,7 +86,7 @@ export default function FancyTextEditor({
   return (
     <div
       ref={divRef}
-      className={`w-full p-3 resize-none border border-gray-200 rounded-md focus:outline-none focus:border-gray-300 ${textColour} min-h-30 ${className ?? ''}`}
+      className={`text-input w-full min-h-30 ${textColour} ${extraClasses}`}
       contentEditable
       onKeyDown={handleKeyDown}
       suppressContentEditableWarning