complete office add-in

package-lock.json

@@ -15,6 +15,7 @@
         "es6-promise": "^4.2.8",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-spinners": "^0.13.4",
         "regenerator-runtime": "^0.13.7"
       },
       "devDependencies": {
@@ -11504,6 +11505,15 @@
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
       "dev": true
     },
+    "node_modules/react-spinners": {
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.4.tgz",
+      "integrity": "sha512-V6IURjYOwomhdngMfuVxBp4utCF6v21sjQ6r4K2JoKl8fwXZp1UeHMBLf+2SU+cts8hAVj9rHOJ8kdT5UqqaJw==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cmd-shim": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-3.0.1.tgz",
@@ -23232,6 +23242,12 @@
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
       "dev": true
     },
+    "react-spinners": {
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.4.tgz",
+      "integrity": "sha512-V6IURjYOwomhdngMfuVxBp4utCF6v21sjQ6r4K2JoKl8fwXZp1UeHMBLf+2SU+cts8hAVj9rHOJ8kdT5UqqaJw==",
+      "requires": {}
+    },
     "read-cmd-shim": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-3.0.1.tgz",

package.json

@@ -32,6 +32,7 @@
     "es6-promise": "^4.2.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-spinners": "^0.13.4",
     "regenerator-runtime": "^0.13.7"
   },
   "devDependencies": {

src/api/check_state.ts

@@ -0,0 +1,6 @@
+import { check_state_url } from "./consts"
+import { get } from "./fetch"
+
+export const check_state = async (uuid: string) => {
+    return await get(check_state_url + uuid);
+}

src/api/consts.ts

@@ -0,0 +1,4 @@
+export const base_url = "https://5bf1-89-223-81-202.eu.ngrok.io/api"
+export const update_state_url = "/word/state/"
+export const load_docx_text_url = "/word/docx/"
+export const check_state_url = "word/state/"

src/api/fetch.ts

@@ -0,0 +1,10 @@
+import axios from 'axios'
+import { base_url } from './consts';
+
+export const get = async (url: string) => {
+    return (await axios.get(base_url + url)).data;
+}
+
+export const post = async (url: string, data: any) => {
+    return (await axios.post(base_url+url, data=data)).data;
+}

src/api/interfaces.ts

@@ -0,0 +1,8 @@
+export interface IEUID {
+    text: string;
+    uuid: string;
+}
+
+export interface IEData extends Record<string, (string|number)[]>{
+    
+}

src/api/load_docx_text.ts

@@ -0,0 +1,6 @@
+import { load_docx_text_url } from "./consts"
+import { post } from "./fetch"
+
+export const load_docx = async (text: string) => {
+    return await post(load_docx_text_url, {text: JSON.stringify(text)})
+}

src/api/update_state.ts

@@ -0,0 +1,6 @@
+import { update_state_url } from "./consts"
+import { get } from "./fetch"
+
+export const update_state = async (uid: string) => {
+    return await get(update_state_url + uid);
+}

src/taskpane/components/App.tsx

@@ -1,40 +1,100 @@
 import * as React from "react";
-import { DefaultButton } from "@fluentui/react";
+import { DefaultButton, ProgressIndicator } from "@fluentui/react";
+import { load_docx } from "../../api/load_docx_text";
+import { IEUID, IEData } from "../../api/interfaces";
+import { update_state } from "../../api/update_state";
+import ClipLoader from "react-spinners/ClipLoader";
 
 /* global Word, require */
 
 
+const processFunction = (context: Word.RequestContext, search_text: string, comment_text: string) => {
+    //if (search_text.includes("\u")) return undefined;
+    search_text.replace("\u0005", "")
+    console.log(search_text)
+    if (search_text.length > 10){
+        return context.document.body.search(
+            search_text.slice(0, 255).split("\\").join(""),
+            {
+                ignorePunct: true,
+                ignoreSpace: true
+            }
+        ).getFirst().insertComment(comment_text);
+    }
+    return undefined
+}
+
+
 const App: React.FC = () => {
 
-    const [process, onProcessed] = React.useState(false);
+    const [comments, setComments] = React.useState<Word.Comment[]>([]);
+    const [uid, setUid] = React.useState("");
+    const [response_data, setResponseData] = React.useState<IEData>();
 
+    React.useEffect(() => {
+        if (uid.length) {
+            setTimeout(async () => {
+                const data: IEData = await update_state(uid);
+                console.log(data)
+                setResponseData(data);
+            }, 2000)
+            setUid("");
+        }
+        if (response_data != undefined) {
+            Word.run(async (context) => {
+                var comments = []
+                const response_data_keys = Object.keys(response_data)
+                for (var i = 0; i < response_data_keys.length; ++i) {
+                    for (var j = 0; j < response_data[response_data_keys[i]].length; ++j) {
+                        var comm = processFunction(context, response_data[response_data_keys[i]][j][0], response_data_keys[i]);
+                        if (comm != undefined){
+                            comments.push();
+                        }
+                    }
+                }
+                setComments(comments)
+                setResponseData(undefined)
+                //
+            })
+            setResponseData(undefined);
+        }
+    })
     return (
         <div style={{
             'display': 'flex',
             'justifyContent': 'center',
-            'alignContent': 'center'
+            'alignContent': 'center',
+            'flexDirection': 'column'
         }}>
             <DefaultButton
-                onClick={() => {
+                    onClick={() => {
-                    Word.run(function(context) {
+                        Word.run(function(context) {
-                        // Insert your code here. For example:
+                            // Insert your code here. For example:
-                        var documentBody = context.document.body;
+                            var documentBody = context.document.body;
-                        context.load(documentBody);
+                            context.load(documentBody);
-                        return context.sync()
+                            return context.sync()
-                        .then(function(){
+                            .then( async () => {
-                            console.log(documentBody.text);
+                                const data: IEUID = await load_docx(documentBody.text);
-                        })
+                                console.log(data);
-                    });
+                                setUid(data.uuid);
-                    Word.run(async (context) => {
+                            })
-                        Office.context.document.getFileAsync(Office.FileType.Compressed, (file) => {
+                        });
-                            console.log(file.value);
+                    }}
-                        })
+                >
-                        context.document.body.search("2-кратного размера").getFirst().insertComment("fuck you")
+                    Проверить на ошибки
-                    })
+                </DefaultButton>
-                }}
+                <div style={{
-            >
+                    'display': 'flex',
-                Проверить на ошибки
+                    'justifyContent': 'center',
-            </DefaultButton>
+                    'alignItems': 'center',
+                    'marginTop': 100
+                }}>
+                {
+                    response_data === undefined && uid.length ?
+                    <ClipLoader></ClipLoader> : <div></div>
+                }
+                </div>
+
         </div>
     );
 }