fix: markdown editor not accepting input due to Form.Item prop injection conflict

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,55 +137,58 @@ function Inventory() {
         destroyOnClose
         width={720}
       >
-        <Form form={form} layout="vertical">
+        <div data-color-mode={mode}>
-          <Form.Item name="name" label="Name" rules={[{ required: true }]}>
+          <Form form={form} layout="vertical">
-            <Input />
+            <Form.Item name="name" label="Name" rules={[{ required: true }]}>
-          </Form.Item>
+              <Input />
-          <Form.Item
-            name="description"
-            label="Description (Markdown supported)"
-            getValueFromEvent={(value) => value}
-          >
-            <div data-color-mode={mode}>
-              <MDEditor height={220} preview="live" />
-            </div>
-          </Form.Item>
-          <Form.Item name="price" label="Price (USD)" rules={[{ required: true }]}>
-            <InputNumber min={0} step={0.01} style={{ width: '100%' }} />
-          </Form.Item>
-
-          {editingItem && editingItem.images.length > 0 && (
-            <Form.Item label="Existing Images (front / back / etc.)">
-              <Space wrap>
-                {editingItem.images.map(img => (
-                  <div key={img.id} style={{ position: 'relative' }}>
-                    <AntImage src={img.image_path} width={80} height={80} style={{ objectFit: 'cover' }} />
-                    <Button
-                      size="small"
-                      danger
-                      icon={<DeleteOutlined />}
-                      style={{ position: 'absolute', top: 0, right: 0 }}
-                      onClick={() => handleDeleteImage(editingItem.id, img.id)}
-                    />
-                  </div>
-                ))}
-              </Space>
             </Form.Item>
-          )}
 
-          <Form.Item label={editingItem ? 'Add More Images' : 'Images (front, back, etc.)'}>
+            <Form.Item label="Description (Markdown supported)">
-            <Upload
+              <MDEditor
-              fileList={fileList}
+                value={description}
-              beforeUpload={() => false}
+                onChange={(val) => setDescription(val || '')}
-              onChange={({ fileList }) => setFileList(fileList.slice(-6))}
+                height={220}
-              maxCount={6}
+                preview="live"
-              multiple
+              />
-              listType="picture-card"
+            </Form.Item>
-            >
+
-              <div><UploadOutlined /><div style={{ marginTop: 8 }}>Upload</div></div>
+            <Form.Item name="price" label="Price (USD)" rules={[{ required: true }]}>
-            </Upload>
+              <InputNumber min={0} step={0.01} style={{ width: '100%' }} />
-          </Form.Item>
+            </Form.Item>
-        </Form>
+
+            {editingItem && editingItem.images.length > 0 && (
+              <Form.Item label="Existing Images (front / back / etc.)">
+                <Space wrap>
+                  {editingItem.images.map(img => (
+                    <div key={img.id} style={{ position: 'relative' }}>
+                      <AntImage src={img.image_path} width={80} height={80} style={{ objectFit: 'cover' }} />
+                      <Button
+                        size="small"
+                        danger
+                        icon={<DeleteOutlined />}
+                        style={{ position: 'absolute', top: 0, right: 0 }}
+                        onClick={() => handleDeleteImage(editingItem.id, img.id)}
+                      />
+                    </div>
+                  ))}
+                </Space>
+              </Form.Item>
+            )}
+
+            <Form.Item label={editingItem ? 'Add More Images' : 'Images (front, back, etc.)'}>
+              <Upload
+                fileList={fileList}
+                beforeUpload={() => false}
+                onChange={({ fileList }) => setFileList(fileList.slice(-6))}
+                maxCount={6}
+                multiple
+                listType="picture-card"
+              >
+                <div><UploadOutlined /><div style={{ marginTop: 8 }}>Upload</div></div>
+              </Upload>
+            </Form.Item>
+          </Form>
+        </div>
       </Modal>
     </div>
   );