✨ finally able to support html output, fixes the random chaos chinese characters on the output of word-to-html

src/import.ts

@@ -27,84 +27,52 @@ export default class Import extends Plugin {
 				tooltip: true
 			} );
 
-			// // Insert a text into the editor after clicking the button.
-			// this.listenTo( view, 'execute', () => {
-			// 	model.change( writer => {
-			// 		const textNode = writer.createText( 'Hello CKEditor 5!' );
-
-			// 		model.insertContent( textNode );
-			// 	} );
-
-			// 	editor.editing.view.focus();
-			// } );
-
-			// Insert a text into the editor after clicking the button.
-			// this.listenTo( view, 'execute', async () => {
-			// 	asBlob(this.editor.getData()).then((data: any) => {
-			// 		saveAs(data, 'file.docx') // save as docx file
-			// 	}) // asBlob() return Promise<Blob|Buffer>
-
-			// 	editor.editing.view.focus();
-			// } );
-
-			// POST fetch docx and download
+			// POST fetch html from docx
 			this.listenTo( view, 'execute', async () => {
-				const parser = new DOMParser();
-				const doc = parser.parseFromString(this.editor.getData(), "text/html");
+				// curl -X 'POST' \
+				// 'http://localhost:8080/aspose/word-to-html' \
+				// -H 'accept: text/plain' \
+				// -H 'Content-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document' \
+				// --data-binary '@stou(207).docx'
 
-				// pre-process mathlive script to html MathML tag with the help of temml
-				for (const mathliveElement of doc.querySelectorAll('script[type="math/tex"]')) {
-					const temmlWrapperElement = document.createElement('span');
-					const temmlMathMLString = Temml.render(mathliveElement.textContent ?? "", temmlWrapperElement);
-					mathliveElement.replaceWith(temmlWrapperElement);
-				}
+				// file accpt docx
+				const input = document.createElement('input');
+				input.type = 'file';
+				input.accept = '.docx';
+				input.click();
 
-				// pre-process for table
-				for (const table of doc.querySelectorAll('table')) {
-					// pre-process table for border and centering and inner border
-					table.style.borderCollapse = 'collapse';
-					table.style.borderSpacing = '0';
-					table.style.border = '1px solid #b3b3b3';
-					table.style.margin = 'auto';
-					// pre-process table for padding
-					for (const td of table.querySelectorAll('td')) {
-						td.style.padding = '8px';
-					}
-					// pre-process table for inner border
-					for (const tr of table.querySelectorAll('tr')) {
-						for (const td of tr.querySelectorAll('td')) {
-							td.style.border = '1px solid #b3b3b3';
-						}
-					}
-					// pre-process table for header background color rgba(0,0,0,.05) to hex #f2f2f2
-					// and it's own border
-					// and padding
-					const ths = table.querySelectorAll('th');
-					for (const th of ths) {
-						th.style.backgroundColor = '#f2f2f2';
-						th.style.border = '1px solid #b3b3b3';
-						th.style.padding = '8px';
-					}
-				}
+				input.addEventListener('change', async () => {
+					const file = input.files![0];
+					const formData = new FormData();
+					formData.append("file", file);
 
-				console.log(doc.body.innerHTML);
-
-				fetch('http://localhost:8080/aspose/html-to-word', {
-					method: 'POST',
-					body: doc.body.innerHTML,
+					try {
+						const response = await fetch("http://localhost:8080/aspose/word-to-html", {
+							method: "POST",
 							headers: {
-						'Content-Type': 'text/plain'
-					}
-				})
-				.then(response => response.blob())
-				.then(blob => {
-					saveAs(blob, 'stou.docx') // save as docx file
-				})
-				.catch(error => {
-					console.error('Error:', error);
+								// Do not set `Content-Type` manually when using FormData;
+								// the browser will automatically set the correct boundary for multipart/form-data.
+							},
+							body: file, // directly sending file bytes as the backend expects byte[]
 						});
+
+						if (!response.ok) {
+							throw new Error(`Failed to upload file: ${response.statusText}`);
+						}
+
+						const htmlText = await response.text();
+						// console.log("Converted HTML:", htmlText);
+						const htmlDoc = new DOMParser().parseFromString(htmlText, "text/html");
+						const body = htmlDoc.body;
+						this.editor.setData(body.innerHTML);
+					} catch (error) {
+						console.error("Error uploading file:", error);
+						throw error;
+					}
+
 					editor.editing.view.focus();
 				});
+			} );
 
 			return view;
 		} );