fancy text editor

src/components/NewPostWidget.tsx

@@ -1,4 +1,5 @@
 import { useState, ChangeEvent } from 'react'
+import FancyTextEditor, { TextInputKeyDownEvent } from './FancyTextEditor.tsx'
 
 interface NewPostWidgetProps {
   onSubmit: (content: string, media: File[]) => void
@@ -15,8 +16,8 @@ export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPos
   const [content, setContent] = useState('')
   const [attachments, setAttachments] = useState<Attachment[]>([])
 
-  const handleContentChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    setContent(e.target.value)
+  const onContentInput = (value: string) => {
+    setContent(value)
   }
 
   const handleMediaChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -56,15 +57,21 @@ export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPos
     URL.revokeObjectURL(attachment.objectUrl)
   }
 
+  const onInputKeyDown = (e: TextInputKeyDownEvent) => {
+    if (e.key === 'Enter' && e.ctrlKey) {
+      e.preventDefault()
+      handleSubmit()
+    }
+  }
+
   return (
     <div className="w-full p-4 border-b border-gray-200">
-      <textarea
-        className="w-full p-2 mb-3 resize-none border border-gray-200 rounded-md focus:outline-none focus:border-gray-300"
-        placeholder="Write something..."
+      <FancyTextEditor
         value={content}
-        onChange={handleContentChange}
-        rows={3}
-        disabled={isSubmitting}
+        onInput={onContentInput}
+        onKeyDown={onInputKeyDown}
+        className="mb-3"
+        placeholder="write something..."
       />
 
       {attachments.length > 0 && (