feat: export markdown ux modal (#73)

fileverse · Aug 28, 2024 · bc0f2bc · bc0f2bc
1 parent b4c8eff
commit bc0f2bc
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 30 deletions.
diff --git a/package/components/editor-toolbar.tsx b/package/components/editor-toolbar.tsx
@@ -21,8 +21,11 @@ import {
   ButtonGroup,
   Button,
   LucideIconProps,
+  DynamicModal,
+  TextField,
 } from '@fileverse/ui';
 import ToolbarButton from '../common/toolbar-button';
+import { useState } from 'react';
 
 const TiptapToolBar = ({
   editor,
@@ -42,10 +45,31 @@ const TiptapToolBar = ({
     toolbar,
     undoRedoTools,
     markdownOptions,
+    isExportModalOpen,
+    setIsExportModalOpen,
   } = useEditorToolbar({
     editor: editor,
     onError,
   });
+  const [filename, setFilename] = useState('exported_document.md');
+
+  const handleExport = () => {
+    if (editor) {
+      const generateDownloadUrl = editor.commands.exportMarkdownFile();
+      if (generateDownloadUrl) {
+        const url = generateDownloadUrl;
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+      }
+    }
+    setIsExportModalOpen(false);
+  };
+
   return (
     <div className="w-full bg-transparent py-2 px-4 items-center h-9 flex justify-between relative">
       <div className="flex h-9 items-center gap-2 justify-center">
@@ -94,10 +118,10 @@ const TiptapToolBar = ({
             {editor?.isActive('heading', { level: 1 })
               ? 'Heading 1'
               : editor?.isActive('heading', { level: 2 })
-              ? 'Heading 2'
-              : editor?.isActive('heading', { level: 3 })
-              ? 'Heading 3'
-              : 'Text'}
+                ? 'Heading 2'
+                : editor?.isActive('heading', { level: 3 })
+                  ? 'Heading 3'
+                  : 'Text'}
           </span>
           <ChevronDown size={16} />
         </button>
@@ -114,7 +138,6 @@ const TiptapToolBar = ({
                         icon={tool.icon}
                         variant="ghost"
                         size="md"
-                        className="p-0 !pt-2 aspect-square"
                       />
                     </Tooltip>
                   }
@@ -206,6 +229,27 @@ const TiptapToolBar = ({
               elementRef={toolRef}
             />
           )}
+          <DynamicModal
+            open={isExportModalOpen}
+            onOpenChange={setIsExportModalOpen}
+            title="Export Markdown"
+            content={
+              <TextField
+                label="Filename"
+                value={filename}
+                onChange={(e) => setFilename(e.target.value)}
+                placeholder="Enter filename"
+              />
+            }
+            primaryAction={{
+              label: 'Export',
+              onClick: handleExport,
+            }}
+            secondaryAction={{
+              label: 'Cancel',
+              onClick: () => setIsExportModalOpen(false),
+            }}
+          />
         </div>
       </div>
       <div className="flex h-9 gap-[10px]">

diff --git a/package/components/editor-utils.tsx b/package/components/editor-utils.tsx
@@ -200,6 +200,8 @@ export const useEditorToolbar = ({
     toolVisibility,
     setToolVisibility,
   } = useEditorToolVisiibility(IEditorTool.NONE);
+  const [isExportModalOpen, setIsExportModalOpen] = useState(false);
+
 
   const undoRedoTools: Array<IEditorToolElement | null> = [
     {
@@ -367,7 +369,7 @@ export const useEditorToolbar = ({
     {
       icon: 'FileOutput',
       title: 'Export Markdown',
-      onClick: () => editor?.commands.exportMarkdownFile(),
+      onClick: () => setIsExportModalOpen(true),
       isActive: false,
     }
   ]
@@ -455,6 +457,8 @@ export const useEditorToolbar = ({
     toolRef,
     toolVisibility,
     setToolVisibility,
+    isExportModalOpen,
+    setIsExportModalOpen,
   };
 };
 

diff --git a/package/extensions/mardown-paste-handler/index.ts b/package/extensions/mardown-paste-handler/index.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Extension } from '@tiptap/core';
+import { Editor, Extension } from '@tiptap/core';
 import MarkdownIt from 'markdown-it';
 import { Plugin } from 'prosemirror-state';
 import DOMPurify from 'dompurify';
@@ -119,7 +119,7 @@ declare module '@tiptap/core' {
       uploadMarkdownFile: () => Command;
     };
     exportMarkdownFile: {
-      exportMarkdownFile: () => Command;
+      exportMarkdownFile: () => any;
     };
   }
 }
@@ -180,39 +180,24 @@ const MarkdownPasteHandler = Extension.create({
         },
       exportMarkdownFile:
         () =>
-        ({ editor }) => {
+        ({ editor }: { editor: Editor }) => {
           // Get the HTML content from the editor
           const html = editor.getHTML();
 
           // Convert HTML to Markdown
           const markdown = turndownService.turndown(html);
 
-          // Prompt the user for a custom filename
-          const defaultFilename = 'exported_document.md';
-          const customFilename = prompt(
-            'Enter a filename for your Markdown file:',
-            defaultFilename,
-          );
-
-          // Only proceed with the download if a filename was provided
-          if (customFilename) {
+          // Function to generate download URL
+          const generateDownloadUrl = () => {
             // Create a Blob with the Markdown content
             const blob = new Blob([markdown], {
               type: 'text/markdown;charset=utf-8',
             });
-            const url = URL.createObjectURL(blob);
-
-            // Create a download link and trigger the download
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = customFilename;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            URL.revokeObjectURL(url);
-          }
+            return URL.createObjectURL(blob);
+          };
 
-          return true;
+          // Return the generateDownloadUrl function
+          return generateDownloadUrl();
         },
     };
   },