diff --git a/src/import.ts b/src/import.ts index f5a9ce6..69f8dac 100644 --- a/src/import.ts +++ b/src/import.ts @@ -27,83 +27,51 @@ 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 - - // 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'; + input.addEventListener('change', async () => { + const file = input.files![0]; + const formData = new FormData(); + formData.append("file", file); + + try { + const response = await fetch("http://localhost:8080/aspose/word-to-html", { + method: "POST", + headers: { + // 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}`); } - } - // 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'; - } - } - console.log(doc.body.innerHTML); - - fetch('http://localhost:8080/aspose/html-to-word', { - method: 'POST', - body: doc.body.innerHTML, - headers: { - 'Content-Type': 'text/plain' + 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; } - }) - .then(response => response.blob()) - .then(blob => { - saveAs(blob, 'stou.docx') // save as docx file - }) - .catch(error => { - console.error('Error:', error); + + editor.editing.view.focus(); }); - editor.editing.view.focus(); } ); return view;