bermudalamb/redefined-designs
1
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects 3 Releases Wiki Activity

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

Merged
bermudalamb merged 1 commits from fix/markdown-editor-not-editable into main 2026-08-14 09:45:23 -05:00
Conversation 0 Commits 1 Files Changed 1
+54 -49
1 changed files with 54 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/admin/Admin.tsx
+54 -49
View File
@@ -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">
<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>
<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>
<div data-color-mode={mode}>
<Form form={form} layout="vertical">
<Form.Item name="name" label="Name" rules={[{ required: true }]}>
<Input />
</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>
<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>
{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>
);