Add source document storage and editing functionality for document history

Author: ralyodio

public/js/components/document-history.js

@@ -75,6 +75,26 @@ export class DocumentHistory extends BaseComponent {
         background-color: var(--primary-dark);
       }
       
+      .edit-link {
+        display: inline-block;
+        padding: 5px 10px;
+        background-color: var(--secondary-color, #6c757d);
+        color: white;
+        text-decoration: none;
+        border-radius: 4px;
+        font-size: 14px;
+        margin-left: 5px;
+      }
+      
+      .edit-link:hover {
+        background-color: var(--secondary-dark, #5a6268);
+      }
+      
+      .action-buttons {
+        display: flex;
+        gap: 5px;
+      }
+      
       .pagination {
         display: flex;
         justify-content: space-between;
@@ -219,8 +239,9 @@ export class DocumentHistory extends BaseComponent {
               <td>${this._formatDate(item.generated_at)}</td>
               <td>${item.storage_path}</td>
               <td>${this._formatMetadata(item.metadata)}</td>
-              <td>
+              <td class="action-buttons">
                 <button class="download-link" data-path="${item.storage_path}">Download</button>
+                ${item.source_doc ? `<button class="edit-link" data-source="${encodeURIComponent(item.source_doc)}" data-type="${item.document_type}">Edit</button>` : ''}
               </td>
             </tr>
           `).join('')}
@@ -363,6 +384,40 @@ export class DocumentHistory extends BaseComponent {
     }
   }
 
+  /**
+   * Edit a document by pre-filling the HTML editor with the source document content
+   * @param {string} sourceDocEncoded - URL-encoded source document content
+   * @param {string} documentType - Type of document (pdf, doc, etc.)
+   * @private
+   */
+  _editDocument(sourceDocEncoded, documentType) {
+    try {
+      // Decode the source document content
+      const sourceDoc = decodeURIComponent(sourceDocEncoded);
+      
+      // Dispatch a custom event with the source document content
+      const event = new CustomEvent('edit-document', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          sourceDoc,
+          documentType
+        }
+      });
+      
+      this.dispatchEvent(event);
+      
+      // Scroll to the top of the page to show the editor
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+      
+      // Show a notification to the user
+      alert('The editor has been pre-filled with the original content. You can now make changes and regenerate the document.');
+    } catch (error) {
+      console.error('Error editing document:', error);
+      alert(`Error editing document: ${error.message}`);
+    }
+  }
+  
   /**
    * Initialize event listeners
    */
@@ -387,15 +442,26 @@ export class DocumentHistory extends BaseComponent {
       }
     });
 
-    // Add event delegation for download buttons
+    // Add event delegation for download and edit buttons
     this.shadowRoot.addEventListener('click', (event) => {
+      // Handle download button clicks
       const downloadButton = event.target.closest('.download-link');
       if (downloadButton) {
         const path = downloadButton.dataset.path;
         if (path) {
           this._downloadDocument(path);
         }
       }
+      
+      // Handle edit button clicks
+      const editButton = event.target.closest('.edit-link');
+      if (editButton) {
+        const sourceDoc = editButton.dataset.source;
+        const documentType = editButton.dataset.type;
+        if (sourceDoc) {
+          this._editDocument(sourceDoc, documentType);
+        }
+      }
     });
   }
 

public/js/components/html-editor.js

@@ -74,6 +74,19 @@ export class HtmlEditor extends DocumentEditor {
     generateDocBtn.addEventListener('click', () => this.generateDoc());
     generateEpubBtn.addEventListener('click', () => this.generateEpub());
     convertToMarkdownBtn.addEventListener('click', () => this.convertToMarkdown());
+    
+    // Listen for the edit-document event from the document history component
+    document.addEventListener('edit-document', (event) => {
+      const { sourceDoc, documentType } = event.detail;
+      if (sourceDoc) {
+        this.setContent(sourceDoc);
+        this.updatePreview();
+        this.showStatus(`Loaded original content for editing (${documentType} document)`, 'success');
+        
+        // Scroll to the editor
+        this.scrollIntoView({ behavior: 'smooth' });
+      }
+    });
   }
 
   /**

src/routes/html-to-doc.js

@@ -28,8 +28,8 @@ export async function htmlToDocHandler(c) {
         // Get user email from context
         const userEmail = c.get('userEmail');
 
-        // Store the document with user association
-        const result = await storageService.storeDoc(docBuffer, filename, metadata, userEmail);
+        // Store the document with user association and original HTML content
+        const result = await storageService.storeDoc(docBuffer, filename, metadata, userEmail, html);
 
         // Add storage information to the response headers
         c.header('X-Storage-Path', result.path);

src/routes/html-to-epub.js

@@ -31,8 +31,8 @@ export async function htmlToEpubHandler(c) {
         // Get user email from context
         const userEmail = c.get('userEmail');
 
-        // Store the EPUB with user association
-        const result = await storageService.storeEpub(epubBuffer, filename, metadata, userEmail);
+        // Store the EPUB with user association and original HTML content
+        const result = await storageService.storeEpub(epubBuffer, filename, metadata, userEmail, html);
 
         // Add storage information to the response headers
         c.header('X-Storage-Path', result.path);

src/routes/html-to-excel.js

@@ -29,8 +29,8 @@ export async function htmlToExcelHandler(c) {
         // Get user email from context
         const userEmail = c.get('userEmail');
 
-        // Store the Excel file with user association
-        const result = await storageService.storeExcel(excelBuffer, filename, metadata, userEmail);
+        // Store the Excel file with user association and original HTML content
+        const result = await storageService.storeExcel(excelBuffer, filename, metadata, userEmail, html);
 
         // Add storage information to the response headers
         c.header('X-Storage-Path', result.path);

src/routes/html-to-pdf.js

@@ -30,8 +30,8 @@ export async function htmlToPdfHandler(c) {
         // Get user email from context
         const userEmail = c.get('userEmail');
 
-        // Store the PDF with user association
-        const result = await storageService.storePdf(pdfBuffer, filename, metadata, userEmail);
+        // Store the PDF with user association and original HTML content
+        const result = await storageService.storePdf(pdfBuffer, filename, metadata, userEmail, html);
 
         // Add storage information to the response headers
         c.header('X-Storage-Path', result.path);

src/routes/html-to-ppt.js

@@ -29,8 +29,8 @@ export async function htmlToPptHandler(c) {
         // Get user email from context
         const userEmail = c.get('userEmail');
 
-        // Store the PowerPoint with user association
-        const result = await storageService.storePpt(pptBuffer, filename, metadata, userEmail);
+        // Store the PowerPoint with user association and original HTML content
+        const result = await storageService.storePpt(pptBuffer, filename, metadata, userEmail, html);
 
         // Add storage information to the response headers
         c.header('X-Storage-Path', result.path);

src/services/storage-service.js

@@ -10,9 +10,10 @@ export const storageService = {
    * @param {string} filename - Filename
    * @param {Object} metadata - Additional metadata
    * @param {string} userEmail - User email for associating with user_id
+   * @param {string} sourceHtml - Original HTML content used to generate the PDF
    * @returns {Promise<Object>} - Storage result
    */
-  async storePdf(pdfBuffer, filename = 'document.pdf', metadata = {}, userEmail = null) {
+  async storePdf(pdfBuffer, filename = 'document.pdf', metadata = {}, userEmail = null, sourceHtml = null) {
     const result = await supabaseUtils.storeDocument(
       pdfBuffer,
       filename,
@@ -21,7 +22,7 @@ export const storageService = {
     );
 
     // Record the document generation in the database
-    await supabaseUtils.recordDocumentGeneration('pdf', result.path, metadata, userEmail);
+    await supabaseUtils.recordDocumentGeneration('pdf', result.path, metadata, userEmail, sourceHtml);
 
     return result;
   },
@@ -32,9 +33,10 @@ export const storageService = {
    * @param {string} filename - Filename
    * @param {Object} metadata - Additional metadata
    * @param {string} userEmail - User email for associating with user_id
+   * @param {string} sourceHtml - Original HTML content used to generate the document
    * @returns {Promise<Object>} - Storage result
    */
-  async storeDoc(docBuffer, filename = 'document.doc', metadata = {}, userEmail = null) {
+  async storeDoc(docBuffer, filename = 'document.doc', metadata = {}, userEmail = null, sourceHtml = null) {
     const result = await supabaseUtils.storeDocument(
       docBuffer,
       filename,
@@ -43,7 +45,7 @@ export const storageService = {
     );
 
     // Record the document generation in the database
-    await supabaseUtils.recordDocumentGeneration('doc', result.path, metadata, userEmail);
+    await supabaseUtils.recordDocumentGeneration('doc', result.path, metadata, userEmail, sourceHtml);
 
     return result;
   },
@@ -54,9 +56,10 @@ export const storageService = {
    * @param {string} filename - Filename
    * @param {Object} metadata - Additional metadata
    * @param {string} userEmail - User email for associating with user_id
+   * @param {string} sourceHtml - Original HTML content used to generate the Excel file
    * @returns {Promise<Object>} - Storage result
    */
-  async storeExcel(excelBuffer, filename = 'document.xlsx', metadata = {}, userEmail = null) {
+  async storeExcel(excelBuffer, filename = 'document.xlsx', metadata = {}, userEmail = null, sourceHtml = null) {
     const result = await supabaseUtils.storeDocument(
       excelBuffer,
       filename,
@@ -65,7 +68,7 @@ export const storageService = {
     );
 
     // Record the document generation in the database
-    await supabaseUtils.recordDocumentGeneration('excel', result.path, metadata, userEmail);
+    await supabaseUtils.recordDocumentGeneration('excel', result.path, metadata, userEmail, sourceHtml);
 
     return result;
   },
@@ -76,9 +79,10 @@ export const storageService = {
    * @param {string} filename - Filename
    * @param {Object} metadata - Additional metadata
    * @param {string} userEmail - User email for associating with user_id
+   * @param {string} sourceHtml - Original HTML content used to generate the PowerPoint
    * @returns {Promise<Object>} - Storage result
    */
-  async storePpt(pptBuffer, filename = 'presentation.pptx', metadata = {}, userEmail = null) {
+  async storePpt(pptBuffer, filename = 'presentation.pptx', metadata = {}, userEmail = null, sourceHtml = null) {
     const result = await supabaseUtils.storeDocument(
       pptBuffer,
       filename,
@@ -87,7 +91,7 @@ export const storageService = {
     );
 
     // Record the document generation in the database
-    await supabaseUtils.recordDocumentGeneration('ppt', result.path, metadata, userEmail);
+    await supabaseUtils.recordDocumentGeneration('ppt', result.path, metadata, userEmail, sourceHtml);
 
     return result;
   },
@@ -98,9 +102,10 @@ export const storageService = {
    * @param {string} filename - Filename
    * @param {Object} metadata - Additional metadata
    * @param {string} userEmail - User email for associating with user_id
+   * @param {string} sourceHtml - Original HTML content used to generate the EPUB
    * @returns {Promise<Object>} - Storage result
    */
-  async storeEpub(epubBuffer, filename = 'document.epub', metadata = {}, userEmail = null) {
+  async storeEpub(epubBuffer, filename = 'document.epub', metadata = {}, userEmail = null, sourceHtml = null) {
     const result = await supabaseUtils.storeDocument(
       epubBuffer,
       filename,
@@ -109,7 +114,7 @@ export const storageService = {
     );
 
     // Record the document generation in the database
-    await supabaseUtils.recordDocumentGeneration('epub', result.path, metadata, userEmail);
+    await supabaseUtils.recordDocumentGeneration('epub', result.path, metadata, userEmail, sourceHtml);
 
     return result;
   },

src/utils/supabase.js

@@ -240,9 +240,10 @@ export const supabaseUtils = {
    * @param {string} storagePath - Path in Supabase storage
    * @param {Object} metadata - Additional metadata
    * @param {string} userEmail - User email for associating with user_id
+   * @param {string} sourceDoc - Original source document content (HTML, Markdown, etc.)
    * @returns {Promise<Object>} - Database record
    */
-  async recordDocumentGeneration(documentType, storagePath, metadata = {}, userEmail = null) {
+  async recordDocumentGeneration(documentType, storagePath, metadata = {}, userEmail = null, sourceDoc = null) {
     try {
       console.log(`Recording document generation for type: ${documentType}, path: ${storagePath}`);
 
@@ -251,7 +252,8 @@ export const supabaseUtils = {
         document_type: documentType,
         storage_path: storagePath,
         generated_at: new Date().toISOString(),
-        metadata
+        metadata,
+        source_doc: sourceDoc
       };
 
       // If no user email is provided, we can't associate the document with a user

supabase/migrations/20250430161500_add_source_doc_to_document_generations.sql

@@ -0,0 +1,13 @@
+-- Add source_doc column to document_generations table
+-- This column will store the original input content for the conversion,
+-- allowing users to edit and regenerate documents
+ALTER TABLE document_generations ADD COLUMN source_doc TEXT;
+
+-- Add comment to explain the purpose of the column
+COMMENT ON COLUMN document_generations.source_doc IS 'Stores the original input content (HTML, Markdown, etc.) used for the document generation, enabling document editing and regeneration';
+
+-- Create an index on document_type and source_doc for faster lookups when filtering by document type
+CREATE INDEX IF NOT EXISTS idx_document_generations_type_source ON document_generations(document_type, (source_doc IS NOT NULL));
+
+-- Update the RLS policies to ensure they still work with the new column
+-- (No changes needed as the existing policies are based on user_id)