Merge pull request 'fix: markdown editor not accepting input due to Form.Item prop injection conflict' (#6) from fix/markdown-editor-not-editable into main

Reviewed-on: #6

frontend/src/admin/Admin.tsx

@@ -21,6 +21,7 @@ function Inventory() {
   const [editingItem, setEditingItem] = useState<Item | null>(null);
   const [form] = Form.useForm();
   const [fileList, setFileList] = useState<UploadFile[]>([]);
+  const [description, setDescription] = useState<string>('');
   const { mode } = useThemeMode();
 
   const load = () => fetchAdminItems().then(setItems);
@@ -30,6 +31,7 @@ function Inventory() {
     setEditingItem(null);
     form.resetFields();
     setFileList([]);
+    setDescription('');
     setModalOpen(true);
   }
 
@@ -37,10 +39,10 @@ function Inventory() {
     setEditingItem(item);
     form.setFieldsValue({
       name: item.name,
-      description: item.description,
       price: item.price_cents / 100
     });
     setFileList([]);
+    setDescription(item.description || '');
     setModalOpen(true);
   }
 
@@ -48,7 +50,7 @@ function Inventory() {
     const values = await form.validateFields();
     const fd = new FormData();
     fd.append('name', values.name);
-    fd.append('description', values.description || '');
+    fd.append('description', description);
     fd.append('price', String(values.price));
     fileList.forEach(f => {
       if (f.originFileObj) fd.append('images', f.originFileObj as File);
@@ -135,19 +137,21 @@ function Inventory() {
         destroyOnClose
         width={720}
       >
+        <div data-color-mode={mode}>
           <Form form={form} layout="vertical">
             <Form.Item name="name" label="Name" rules={[{ required: true }]}>
               <Input />
             </Form.Item>
-          <Form.Item
-            name="description"
-            label="Description (Markdown supported)"
-            getValueFromEvent={(value) => value}
-          >
-            <div data-color-mode={mode}>
-              <MDEditor height={220} preview="live" />
-            </div>
+
+            <Form.Item label="Description (Markdown supported)">
+              <MDEditor
+                value={description}
+                onChange={(val) => setDescription(val || '')}
+                height={220}
+                preview="live"
+              />
             </Form.Item>
+
             <Form.Item name="price" label="Price (USD)" rules={[{ required: true }]}>
               <InputNumber min={0} step={0.01} style={{ width: '100%' }} />
             </Form.Item>
@@ -184,6 +188,7 @@ function Inventory() {
               </Upload>
             </Form.Item>
           </Form>
+        </div>
       </Modal>
     </div>
   );