mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-08-03 02:11:07 +05:30
feat(renderer): WordExportDialog (docx export with template picker)
This commit is contained in:
@@ -0,0 +1,114 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||
import { useAppStore } from '@/stores/app-store';
|
||||
import { useSettingsStore } from '@/stores/settings-store';
|
||||
import { useExportSource } from '@/hooks/use-export-source';
|
||||
import { generateDocx } from '@/lib/docx-export';
|
||||
import { ipc } from '@/lib/ipc';
|
||||
import { toast } from '@/lib/toast';
|
||||
|
||||
export function WordExportDialog({ sourcePath }: { sourcePath: string }) {
|
||||
const closeModal = useAppStore((s) => s.closeModal);
|
||||
const setSetting = useSettingsStore((s) => s.setSetting);
|
||||
const docxCustomTemplatePath = useSettingsStore((s) => s.docxCustomTemplatePath);
|
||||
const source = useExportSource();
|
||||
|
||||
const [templateMode, setTemplateMode] = useState<'standard' | 'custom'>(docxCustomTemplatePath ? 'custom' : 'standard');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setTemplateMode(docxCustomTemplatePath ? 'custom' : 'standard');
|
||||
}, [docxCustomTemplatePath]);
|
||||
|
||||
const handleChooseTemplate = async () => {
|
||||
const result = await ipc.app.showSaveDialog?.({ title: 'Choose template path' });
|
||||
if (result?.ok && result.data) {
|
||||
setSetting('docxCustomTemplatePath', result.data);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!source) { setError('No file open.'); return; }
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
try {
|
||||
const blob = await generateDocx({
|
||||
source: source.source,
|
||||
title: source.title,
|
||||
customTemplatePath: templateMode === 'custom' ? docxCustomTemplatePath : null,
|
||||
});
|
||||
const saveResult = await ipc.app.showSaveDialog?.({ title: 'Save as Word document', defaultPath: source.path.replace(/\.md$/, '.docx') });
|
||||
if (!saveResult?.ok || !saveResult.data) {
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
const buffer = new Uint8Array(await blob.arrayBuffer());
|
||||
const writeResult = await ipc.file.writeBuffer({ path: saveResult.data, buffer });
|
||||
if (!writeResult.ok) {
|
||||
setError(writeResult.error.message);
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
toast.success(`Exported ${source.title} to ${saveResult.data}`);
|
||||
closeModal();
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
toast.error(`Export failed: ${msg}`);
|
||||
setError(msg);
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open onOpenChange={(o) => !o && closeModal()}>
|
||||
<DialogContent aria-describedby="word-desc">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Export to Word (.docx)</DialogTitle>
|
||||
<DialogDescription id="word-desc">{sourcePath}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div>
|
||||
<Label>Template</Label>
|
||||
<RadioGroup value={templateMode} onValueChange={(v) => setTemplateMode(v as 'standard' | 'custom')}>
|
||||
<div className="flex items-center gap-2">
|
||||
<RadioGroupItem value="standard" id="template-standard" />
|
||||
<Label htmlFor="template-standard">Standard (bundled)</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<RadioGroupItem value="custom" id="template-custom" />
|
||||
<Label htmlFor="template-custom">Custom .dotx</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
{templateMode === 'custom' && (
|
||||
<div className="rounded border border-border bg-card/20 p-2 text-xs">
|
||||
{docxCustomTemplatePath ? (
|
||||
<span>Template path: <code>{docxCustomTemplatePath}</code></span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">No template selected. Click "Choose template..." to pick a .dotx file.</span>
|
||||
)}
|
||||
<Button variant="ghost" size="sm" onClick={handleChooseTemplate} className="ml-2">
|
||||
Choose template...
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{error && (
|
||||
<div role="alert" className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="ghost" onClick={closeModal} disabled={submitting}>Cancel</Button>
|
||||
<Button onClick={handleSubmit} disabled={submitting}>
|
||||
{submitting ? 'Exporting…' : 'Export'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -102,6 +102,8 @@ export const ipc = {
|
||||
safeCall('app', 'openExternal', url),
|
||||
showItemInFolder: (path: string): Promise<IpcResult<void | ChannelMissing>> =>
|
||||
safeCall('app', 'showItemInFolder', path),
|
||||
showSaveDialog: (args?: { title?: string; defaultPath?: string }): Promise<IpcResult<string | null | ChannelMissing>> =>
|
||||
safeCall('app', 'showSaveDialog', args),
|
||||
},
|
||||
menu: {
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user