diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index f112508c1..c2e65370d 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -111,6 +111,9 @@ "opml_version_1": "OPML v1.0 - plain text only", "opml_version_2": "OPML v2.0 - allows also HTML", "export_type_single": "Only this note without its descendants", + "export_to_clipboard": "Export to clipboard", + "export_to_clipboard_on_tooltip": "Export the note content to clipboard.", + "export_to_clipboard_off_tooltip": "Download the note as a file.", "export": "Export", "choose_export_type": "Choose export type first please", "export_status": "Export status", diff --git a/apps/client/src/widgets/dialogs/export.css b/apps/client/src/widgets/dialogs/export.css index a0903b06c..1bc2a5c93 100644 --- a/apps/client/src/widgets/dialogs/export.css +++ b/apps/client/src/widgets/dialogs/export.css @@ -13,4 +13,8 @@ .export-dialog form .form-check-label { padding: 2px; -} \ No newline at end of file +} + +.export-dialog form .export-single-formats .switch-widget { + margin-top: 10px; +} diff --git a/apps/client/src/widgets/dialogs/export.tsx b/apps/client/src/widgets/dialogs/export.tsx index 2f10f8063..8038121de 100644 --- a/apps/client/src/widgets/dialogs/export.tsx +++ b/apps/client/src/widgets/dialogs/export.tsx @@ -1,8 +1,10 @@ import { useState } from "preact/hooks"; import { t } from "../../services/i18n"; import tree from "../../services/tree"; +import { copyTextWithToast } from "../../services/clipboard_ext.js"; import Button from "../react/Button"; import FormRadioGroup from "../react/FormRadioGroup"; +import FormToggle from "../react/FormToggle"; import Modal from "../react/Modal"; import "./export.css"; import ws from "../../services/ws"; @@ -21,10 +23,12 @@ interface ExportDialogProps { export default function ExportDialog() { const [ opts, setOpts ] = useState(); const [ exportType, setExportType ] = useState(opts?.defaultType ?? "subtree"); + const [ exportToClipboard, setExportToClipboard ] = useState(false); const [ subtreeFormat, setSubtreeFormat ] = useState("html"); const [ singleFormat, setSingleFormat ] = useState("html"); const [ opmlVersion, setOpmlVersion ] = useState("2.0"); const [ shown, setShown ] = useState(false); + const [ exporting, setExporting ] = useState(false); useTriliumEvent("showExportDialog", async ({ notePath, defaultType }) => { const { noteId, parentNoteId } = tree.getNoteIdAndParentIdFromUrl(notePath); @@ -47,18 +51,20 @@ export default function ExportDialog() { className="export-dialog" title={`${t("export.export_note_title")} ${opts?.noteTitle ?? ""}`} size="lg" - onSubmit={() => { + onSubmit={async () => { if (!opts || !opts.branchId) { return; } const format = (exportType === "subtree" ? subtreeFormat : singleFormat); const version = (format === "opml" ? opmlVersion : "1.0"); - exportBranch(opts.branchId, exportType, format, version); + setExporting(true); + await exportBranch(opts.branchId, exportType, format, version, exportToClipboard); + setExporting(false); setShown(false); }} onHidden={() => setShown(false)} - footer={