Skip to content

Commit ad69481

Browse files
vacevace
committed
feat: #22 Refactoring the demo's demonstration effect, supporting katex formulas
- Implemented ExportModal.vue for exporting documents with customizable options. - Created MarkdownEditor.vue for editing markdown content with a clear button. - Developed MarkdownPreview.vue for rendering markdown content with theme support. - Introduced useI18n.js for internationalization support with translations. - Added useMarkdown.js for managing markdown content and preview updates. - Implemented useTheme.js for theme management and configuration. - Removed legacy language and theme management code from lang.js, theme-manager.js, and related files. - Updated main.js to initialize the Vue app and removed unnecessary initialization logic. - Added debounce utility function for optimizing markdown preview updates. - Updated Vite configuration to include Vue plugin.
1 parent d51f311 commit ad69481

21 files changed

+1079
-790
lines changed

‎web/index.html‎

Lines changed: 1 addition & 205 deletions
Original file line numberDiff line numberDiff line change
@@ -18,211 +18,7 @@
1818
<meta name="description" content="Convert Markdown files to DOCX format easily." />
1919
</head>
2020
<body>
21-
<div id="app">
22-
<div class="flex flex-col h-screen max-w-full">
23-
<!-- Header -->
24-
<header class="flex justify-between items-center p-4 bg-white shadow w-full z-10 mb-1">
25-
<div class="flex items-center space-x-4">
26-
<a class="flex items-center" target="_blank" href="https://github.com/vace/markdown-docx">
27-
<img src="/icon.svg" alt="MarkdownDocx Logo" class="h-8 w-8 mr-4">
28-
<div class="text-xl font-bold text-indigo-600">MarkdownDocx</div>
29-
</a>
30-
<div class="hidden sm:flex space-x-2" id="template-list">
31-
<!-- template place holder -->
32-
</div>
33-
</div>
34-
35-
<div class="flex items-center space-x-4">
36-
<!-- Theme Selector -->
37-
<div class="relative">
38-
<button id="theme-toggle" class="px-3 py-1 text-sm rounded bg-gray-200 hover:bg-gray-100 cursor-pointer flex items-center">
39-
<svg class="h-3.5 w-3.5 mr-1" width="24" height="24" viewBox="0 0 48 48" fill="none"
40-
xmlns="http://www.w3.org/2000/svg">
41-
<path
42-
d="M24 40.9444C26.123 42.8446 28.9266 44 32 44C38.6274 44 44 38.6274 44 32C44 26.4085 40.1757 21.7102 35 20.3781"
43-
stroke="#000000" stroke-width="4" stroke-linejoin="round" />
44-
<path
45-
d="M13 20.3781C7.82432 21.7102 4 26.4085 4 32C4 38.6274 9.37258 44 16 44C22.6274 44 28 38.6274 28 32C28 30.4506 27.7063 28.9697 27.1716 27.6101"
46-
stroke="#000000" stroke-width="4" stroke-linejoin="round" />
47-
<path
48-
d="M24 28C30.6274 28 36 22.6274 36 16C36 9.37258 30.6274 4 24 4C17.3726 4 12 9.37258 12 16C12 22.6274 17.3726 28 24 28Z"
49-
fill="none" stroke="#000000" stroke-width="4" stroke-linejoin="round" />
50-
</svg>
51-
<span class="lang" data-lang="theme">Theme</span>
52-
</button>
53-
<div id="theme-dropdown" class="hidden absolute right-0 mt-1 w-40 bg-white border border-gray-300 rounded-md shadow-lg z-20">
54-
<div class="py-1">
55-
<button class="theme-option block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left" data-theme="default">
56-
<span class="lang" data-lang="theme_default">Default</span>
57-
</button>
58-
<button class="theme-option block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left" data-theme="elegant">
59-
<span class="lang" data-lang="theme_elegant">Elegant</span>
60-
</button>
61-
<button class="theme-option block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left" data-theme="academic">
62-
<span class="lang" data-lang="theme_academic">Academic</span>
63-
</button>
64-
<button class="theme-option block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left" data-theme="modern">
65-
<span class="lang" data-lang="theme_modern">Modern</span>
66-
</button>
67-
</div>
68-
</div>
69-
</div>
70-
<button id="lang-toggle" class="px-3 py-1 text-sm rounded bg-gray-200 hover:bg-gray-100 cursor-pointer">EN</button>
71-
<label for="upload" class="px-3 py-1 rounded bg-gray-200 hover:bg-gray-100 cursor-pointer flex items-center" title="Upload Markdown file">
72-
<svg class="h-5 w-5 mr-2" viewBox="0 0 48 48" fill="none"
73-
xmlns="http://www.w3.org/2000/svg">
74-
<mask maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48"
75-
style="mask-type: alpha">
76-
<path d="M48 0H0V48H48V0Z" fill="currentColor" />
77-
</mask>
78-
<g mask="url(#icon-13c37f497f10b972)">
79-
<path d="M6 24.0083V42H42V24" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
80-
<path d="M33 15L24 6L15 15" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
81-
<path d="M23.9917 32V6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
82-
</g>
83-
</svg>
84-
<span class="lang" data-lang="upload">Upload</span>
85-
<input id="upload" type="file" accept=".md, .markdown, .txt" class="hidden">
86-
</label>
87-
<button id="download" class="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700 flex items-center">
88-
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
89-
<path d="M12 16l4-5h-3v-6h-2v6h-3l4 5zm-8 2v2h16v-2h-16z" />
90-
</svg>
91-
<span class="lang" data-lang="download">Download Docx</span>
92-
</button>
93-
94-
<a href="https://github.com/vace/markdown-docx" target="_blank" class="text-gray-700 hover:text-gray-700 flex items-center bg-gray-200 hover:bg-gray-100 rounded px-3 py-1">
95-
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
96-
<path
97-
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
98-
</svg>
99-
<span data-lang="github" class="lang hidden sm:inline-block ml-2 font-semibold">GitHub</span>
100-
</a>
101-
</div>
102-
103-
</header>
104-
105-
<!-- Bilingual notice -->
106-
<div class="text-center py-2 bg-green-50 text-sm">
107-
<p>
108-
<span class="text-green-600 font-medium">🔒 Nothing is uploaded, all processing happens locally.</span>
109-
<span class="text-green-600 font-medium ml-4">内容不会上传，仅在本地处理。</span>
110-
</p>
111-
</div>
112-
113-
<!-- Main content - split view -->
114-
<div class="flex flex-col md:flex-row flex-1 overflow-hidden">
115-
<div class="w-full md:w-1/2 p-2 overflow-auto relative">
116-
<div class="w-full h-full border rounded focus:outline-none focus:ring-2 focus:ring-indigo-500">
117-
<textarea id="markdown-input"
118-
class="w-full h-full p-4 resize-none"
119-
placeholder="Enter your Markdown here..."
120-
data-placeholder-lang="markdown_placeholder"></textarea>
121-
</div>
122-
<div class="absolute top-4 right-4 z-10">
123-
<button id="clear-markdown" class="p-1 rounded bg-gray-200 hover:bg-gray-300 text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500" title="Clear text">
124-
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
125-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
126-
</svg>
127-
</button>
128-
</div>
129-
</div>
130-
<div class="w-full md:w-1/2 p-2 bg-white">
131-
<div class="w-full max-w-full h-full p-4 border rounded overflow-auto">
132-
<div id="markdown-preview" class="prose prose-sm w-full max-w-full min-h-full p-4"></div>
133-
</div>
134-
</div>
135-
</div>
136-
</div>
137-
</div>
138-
139-
<div id="download-setting" class="fixed z-10 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
140-
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
141-
<div class="fixed inset-0 bg-gray-500/80 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
142-
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
143-
<div
144-
class="relative inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full sm:p-6">
145-
<div>
146-
<h3 class="text-lg leading-6 font-medium text-gray-900 flex items-center" id="modal-title">
147-
<span class="lang" data-lang="modal_options">Export Options</span>
148-
<span class="text-sm text-gray-500"> (MarkdownDocx v1.0)</span>
149-
<!-- close -->
150-
<button class="ml-auto text-gray-400 hover:text-gray-500 focus:outline-none cursor-pointer" id="close-modal">
151-
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
152-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
153-
</svg>
154-
<span class="sr-only">Close</span>
155-
</button>
156-
</h3>
157-
<div class="mt-3 text-center sm:mt-5">
158-
<form class="mt-2">
159-
<div class="mb-4">
160-
<label for="doc-theme" class="block text-sm font-medium text-gray-700 text-left lang" data-lang="theme">Theme</label>
161-
<select id="doc-theme" name="doc-theme" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
162-
<option value="default" class="lang" data-lang="theme_default">Default</option>
163-
<option value="elegant" class="lang" data-lang="theme_elegant">Elegant</option>
164-
<option value="academic" class="lang" data-lang="theme_academic">Academic</option>
165-
<option value="modern" class="lang" data-lang="theme_modern">Modern</option>
166-
</select>
167-
</div>
168-
169-
<div class="mb-4">
170-
<label for="doc-name" class="block text-sm font-medium text-gray-700 text-left lang" data-lang="filename">Filename</label>
171-
<input type="text" id="doc-name" name="doc-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Document Name" data-placeholder-lang="document_name">
172-
</div>
173-
174-
<div class="mb-4">
175-
<label for="doc-title" class="block text-sm font-medium text-gray-700 text-left lang" data-lang="title">Title</label>
176-
<input type="text" id="doc-title" name="doc-title" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Document Title" data-placeholder-lang="document_title">
177-
</div>
178-
179-
<div class="mb-4">
180-
<label for="doc-description" class="block text-sm font-medium text-gray-700 text-left lang" data-lang="description">Description</label>
181-
<textarea id="doc-description" name="doc-description" rows="2" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Document Description" data-placeholder-lang="document_description"></textarea>
182-
</div>
183-
184-
<div class="mt-4 space-y-2">
185-
<div class="flex items-start">
186-
<div class="flex items-center h-5">
187-
<input id="ignore-image" name="ignore-image" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
188-
</div>
189-
<div class="ml-3 text-sm">
190-
<label for="ignore-image" class="font-medium text-gray-700 lang" data-lang="ignore_images">Ignore Images</label>
191-
</div>
192-
</div>
193-
194-
<div class="flex items-start">
195-
<div class="flex items-center h-5">
196-
<input id="ignore-footnote" name="ignore-footnote" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
197-
</div>
198-
<div class="ml-3 text-sm">
199-
<label for="ignore-footnote" class="font-medium text-gray-700 lang" data-lang="ignore_footnotes">Ignore Footnotes</label>
200-
</div>
201-
</div>
202-
203-
<div class="flex items-start">
204-
<div class="flex items-center h-5">
205-
<input id="ignore-html" name="ignore-html" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
206-
</div>
207-
<div class="ml-3 text-sm">
208-
<label for="ignore-html" class="font-medium text-gray-700 lang" data-lang="ignore_html">Ignore HTML</label>
209-
</div>
210-
</div>
211-
</div>
212-
</form>
213-
</div>
214-
</div>
215-
<div class="mt-5 sm:mt-6">
216-
<button
217-
type="button"
218-
id="export-docx"
219-
class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm">
220-
<span class="lang" data-lang="export_to_docx">Export to DOCX</span>
221-
</button>
222-
</div>
223-
</div>
224-
</div>
225-
</div>
21+
<div id="app"></div>
22622
<script type="module" src="/src/main.js"></script>
22723
</body>
22824
</html>

‎web/package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,16 @@
1111
"devDependencies": {
1212
"@tailwindcss/typography": "^0.5.16",
1313
"@tailwindcss/vite": "^4.1.4",
14+
"@vitejs/plugin-vue": "^6.0.3",
1415
"marked": "^15.0.8",
1516
"tailwindcss": "^4.1.4",
1617
"vite": "^6.3.0"
1718
},
1819
"dependencies": {
1920
"clsx": "^2.1.1",
20-
"markdown-docx": "^1.5.1"
21+
"katex": "^0.16.27",
22+
"markdown-docx": "^1.5.1",
23+
"marked-katex-extension": "^5.1.6",
24+
"vue": "^3.5.26"
2125
}
2226
}

0 commit comments

Comments
 (0)