Hugging Face's logo

Spaces:
ThorAILabs
/
DocEditor
Running

App Files Community
ThorAILabs commited on
Commit
f179228
·
verified ·
1 Parent(s): 5fbb7eb

add initial template

Browse files
Files changed (1) hide show
  1. index.html +112 -19
index.html CHANGED
@@ -1,19 +1,112 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Simple Docs Clone</title>
6
+ <!-- Required libraries -->
7
+ <script src="https://unpkg.com/mammoth@1.4.8/mammoth.browser.min.js"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/html-docx-js@0.3.1/dist/html-docx.js"></script>
9
+ <style>
10
+ #editor {
11
+ width: 80%;
12
+ height: 80vh;
13
+ margin: 20px auto;
14
+ padding: 20px;
15
+ border: 1px solid #ccc;
16
+ overflow-y: auto;
17
+ }
18
+ .toolbar {
19
+ display: flex;
20
+ gap: 10px;
21
+ padding: 10px;
22
+ background: #f8f9fa;
23
+ border-bottom: 1px solid #ddd;
24
+ }
25
+ button {
26
+ padding: 5px 10px;
27
+ cursor: pointer;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body>
32
+ <div class="toolbar">
33
+ <button onclick="formatText('bold')"><strong>B</strong></button>
34
+ <button onclick="formatText('italic')"><em>I</em></button>
35
+ <button onclick="formatText('underline')"><u>U</u></button>
36
+ <input type="file" id="importFile" accept=".docx" />
37
+ <button onclick="exportDOCX()">Export DOCX</button>
38
+ <button onclick="toggleAlignment()">Align</button>
39
+ <label><input type="checkbox" id="autosave"> Autosave</label>
40
+ </div>
41
+ <div id="editor" contenteditable="true"></div>
42
+
43
+ <script>
44
+ // Initialize editor with saved content
45
+ document.addEventListener('DOMContentLoaded', () => {
46
+ const savedContent = getCookie('documentContent');
47
+ if(savedContent) {
48
+ document.getElementById('editor').innerHTML =
49
+ decodeURIComponent(savedContent);
50
+ }
51
+
52
+ // Autosave every 5 seconds
53
+ setInterval(() => {
54
+ if(document.getElementById('autosave').checked) {
55
+ saveDocument();
56
+ }
57
+ }, 5000);
58
+ });
59
+
60
+ // Text formatting
61
+ function formatText(command) {
62
+ document.execCommand(command, false, null);
63
+ }
64
+
65
+ // Alignment toggle
66
+ let alignState = 0;
67
+ function toggleAlignment() {
68
+ const alignments = ['left', 'center', 'right', 'justify'];
69
+ document.execCommand('justify' + alignments[alignState]);
70
+ alignState = (alignState + 1) % 4;
71
+ }
72
+
73
+ // Cookie handling
74
+ function saveDocument() {
75
+ const content = document.getElementById('editor').innerHTML;
76
+ document.cookie = `documentContent=${encodeURIComponent(content)}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
77
+ }
78
+
79
+ function getCookie(name) {
80
+ return document.cookie.split('; ').find(row => row.startsWith(name))?.split('=')[1];
81
+ }
82
+
83
+ // DOCX Import
84
+ document.getElementById('importFile').addEventListener('change', function(e) {
85
+ const file = e.target.files[0];
86
+ const reader = new FileReader();
87
+
88
+ reader.onload = function(event) {
89
+ mammoth.convertToHtml({ arrayBuffer: event.target.result })
90
+ .then(result => {
91
+ document.getElementById('editor').innerHTML = result.value;
92
+ })
93
+ .catch(err => console.error(err));
94
+ };
95
+
96
+ reader.readAsArrayBuffer(file);
97
+ });
98
+
99
+ // DOCX Export
100
+ function exportDOCX() {
101
+ const content = document.getElementById('editor').innerHTML;
102
+ const converted = htmlDocx.asBlob(content);
103
+ const url = window.URL.createObjectURL(converted);
104
+
105
+ const a = document.createElement('a');
106
+ a.href = url;
107
+ a.download = 'document.docx';
108
+ a.click();
109
+ }
110
+ </script>
111
+ </body>
112
+ </html>