Spaces:

ThorAILabs
/

DocEditor

Running

App Files Files Community

ThorAILabs commited on Apr 14, 2025

Commit

a22420b

verified ·

1 Parent(s): f179228

Update index.html

Browse files

Files changed (1) hide show

index.html +76 -76

index.html CHANGED Viewed

@@ -2,82 +2,70 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Simple Docs Clone</title>
-    <!-- Required libraries -->
     <script src="https://unpkg.com/mammoth@1.4.8/mammoth.browser.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/html-docx-js@0.3.1/dist/html-docx.js"></script>
-    <style>
-        #editor {
-            width: 80%;
-            height: 80vh;
-            margin: 20px auto;
-            padding: 20px;
-            border: 1px solid #ccc;
-            overflow-y: auto;
-        }
-        .toolbar {
-            display: flex;
-            gap: 10px;
-            padding: 10px;
-            background: #f8f9fa;
-            border-bottom: 1px solid #ddd;
-        }
-        button {
-            padding: 5px 10px;
-            cursor: pointer;
-        }
-    </style>
 </head>
-<body>
-    <div class="toolbar">
-        <button onclick="formatText('bold')"><strong>B</strong></button>
-        <button onclick="formatText('italic')"><em>I</em></button>
-        <button onclick="formatText('underline')"><u>U</u></button>
-        <input type="file" id="importFile" accept=".docx" />
-        <button onclick="exportDOCX()">Export DOCX</button>
-        <button onclick="toggleAlignment()">Align</button>
-        <label><input type="checkbox" id="autosave"> Autosave</label>
-    </div>
-    <div id="editor" contenteditable="true"></div>
-    <script>
-        // Initialize editor with saved content
-        document.addEventListener('DOMContentLoaded', () => {
-            const savedContent = getCookie('documentContent');
-            if(savedContent) {
-                document.getElementById('editor').innerHTML =
-                    decodeURIComponent(savedContent);
-            }
-            // Autosave every 5 seconds
-            setInterval(() => {
-                if(document.getElementById('autosave').checked) {
-                    saveDocument();
-                }
-            }, 5000);
-        });
-        // Text formatting
-        function formatText(command) {
-            document.execCommand(command, false, null);
-        }
-        // Alignment toggle
-        let alignState = 0;
-        function toggleAlignment() {
-            const alignments = ['left', 'center', 'right', 'justify'];
-            document.execCommand('justify' + alignments[alignState]);
-            alignState = (alignState + 1) % 4;
-        }
-        // Cookie handling
-        function saveDocument() {
-            const content = document.getElementById('editor').innerHTML;
-            document.cookie = `documentContent=${encodeURIComponent(content)}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
-        }
-        function getCookie(name) {
-            return document.cookie.split('; ').find(row => row.startsWith(name))?.split('=')[1];
         }
         // DOCX Import
@@ -85,11 +73,9 @@
             const file = e.target.files[0];
             const reader = new FileReader();
-            reader.onload = function(event) {
-                mammoth.convertToHtml({ arrayBuffer: event.target.result })
-                    .then(result => {
-                        document.getElementById('editor').innerHTML = result.value;
-                    })
                     .catch(err => console.error(err));
             };
@@ -98,15 +84,29 @@
         // DOCX Export
         function exportDOCX() {
-            const content = document.getElementById('editor').innerHTML;
             const converted = htmlDocx.asBlob(content);
-            const url = window.URL.createObjectURL(converted);
             const a = document.createElement('a');
             a.href = url;
             a.download = 'document.docx';
             a.click();
         }
     </script>
 </body>
 </html>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DocX Editor</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- DOCX Libraries -->
     <script src="https://unpkg.com/mammoth@1.4.8/mammoth.browser.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/html-docx-js@1.1.1/dist/html-docx.min.js"></script>
+    <!-- Cookie Library -->
+    <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
 </head>
+<body class="bg-gray-100">
+    <div class="container mx-auto px-4">
+        <!-- Toolbar -->
+        <div class="bg-white shadow-md sticky top-0 p-4 mb-4 flex gap-4">
+            <input type="file" id="importFile" class="hidden" accept=".docx">
+            <button onclick="document.getElementById('importFile').click()"
+                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex items-center gap-2">
+                <i class="fas fa-file-import"></i>
+                Import DOCX
+            </button>
+            <button onclick="exportDOCX()"
+                    class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded flex items-center gap-2">
+                <i class="fas fa-file-export"></i>
+                Export DOCX
+            </button>
+            <div class="flex items-center ml-auto text-gray-500">
+                <i class="fas fa-save mr-2"></i>
+                <span id="saveStatus">Auto-saved</span>
+            </div>
+        </div>
+        <!-- Editor -->
+        <div id="editor"
+             class="bg-white shadow-lg min-h-[calc(100vh-150px)] p-8 text-lg focus:outline-none"
+             contenteditable="true"
+             oninput="scheduleSave()"></div>
+    </div>
+    <script>
+        let timeoutId;
+        const COOKIE_NAME = 'documentContent';
+        const EDITOR = document.getElementById('editor');
+        // Load saved content
+        window.onload = () => {
+            const savedContent = Cookies.get(COOKIE_NAME);
+            if(savedContent) EDITOR.innerHTML = savedContent;
+        };
+        // Auto-save functionality
+        function scheduleSave() {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                Cookies.set(COOKIE_NAME, EDITOR.innerHTML, { expires: 7 });
+                document.getElementById('saveStatus').textContent = 'Auto-saved just now';
+            }, 2000);
         }
         // DOCX Import
             const file = e.target.files[0];
             const reader = new FileReader();
+            reader.onload = function() {
+                mammoth.convertToHtml({ arrayBuffer: reader.result })
+                    .then(result => EDITOR.innerHTML = result.value)
                     .catch(err => console.error(err));
             };
         // DOCX Export
         function exportDOCX() {
+            const content = `
+                <html>
+                    <head><meta charset="UTF-8"></head>
+                    <body>${EDITOR.innerHTML}</body>
+                </html>
+            `;
             const converted = htmlDocx.asBlob(content);
+            const url = URL.createObjectURL(converted);
             const a = document.createElement('a');
             a.href = url;
             a.download = 'document.docx';
             a.click();
+            URL.revokeObjectURL(url);
         }
+        // Handle paste to remove formatting
+        EDITOR.addEventListener('paste', e => {
+            e.preventDefault();
+            const text = (e.clipboardData || window.clipboardData).getData('text');
+            document.execCommand('insertText', false, text);
+        });
     </script>
 </body>
 </html>