wasm-onlyoffice-sdk 0.1.5 → 0.1.7

package/README.md

@@ -8,40 +8,66 @@ Offline OnlyOffice document editor SDK for React and Vue, powered by WebAssembly
 
 This SDK requires two sets of static assets:
 
-**OnlyOffice web-apps** — the `v9.3.0.24-1/` directory from the WASM build. Can be served from the same origin or a CDN.
+**OnlyOffice web-apps scaffold** — a small set of HTML files (~2 MB) that must be served from the **same origin** as your app. These HTML files contain `<base href>` tags pointing to a CDN, so the browser loads the actual heavy content (SDK JS, fonts, CSS) from the CDN at runtime. You do not need to self-host the full OnlyOffice SDK.
 
-**x2t WASM converter** — the `x2t-1/` directory containing `x2t.js` and `x2t.wasm`. Must be served from the **same origin** as your app (required for the Web Worker).
+**x2t WASM converter** — `x2t.js` and `x2t.wasm`. Can be served from the same origin or a CDN.
 
-### Same-origin setup
+### Setup
 
-Place assets in your project's `public/` folder:
+Download the web-apps scaffold from the [demo repo](https://github.com/oonxt/wasm-onlyoffice-demo) (`public/` directory) and place it in your project:
 
 ```
 your-project/
   public/
-    v9.3.0.24-1/   ← OnlyOffice web-apps assets
-    x2t-1/         ← x2t WASM converter (x2t.js + x2t.wasm)
+    v9.3.0.24-1/   ← web-apps scaffold (HTML files + api.js, ~2 MB)
+    x2t-1/         ← x2t WASM converter (x2t.js + x2t.wasm), optional if using CDN
 ```
 
-Pass a relative path to `assetsPath`:
-
 ```tsx
 <OnlyOfficeEditor assetsPath="/v9.3.0.24-1" x2tPath="/x2t-1" ... />
 ```
 
-### CDN setup
+The scaffold's HTML files have `<base href>` tags pre-configured to load assets from a public CDN. You can swap those URLs to your own CDN if needed.
+
+### Using a CDN for x2t
 
-`assetsPath` also accepts a full URL. The SDK will automatically handle cross-origin restrictions by keeping the editor frame same-origin while loading web-apps assets from the CDN:
+`x2tPath` accepts either a local path or a full CDN URL:
 
 ```tsx
 <OnlyOfficeEditor
-  assetsPath="https://cdn.example.com/v9.3.0.24-1"
-  x2tPath="/x2t-1"
+  assetsPath="/v9.3.0.24-1"
+  x2tPath="https://cdn.example.com/x2t"
   ...
 />
 ```
 
-> **Note:** `x2tPath` must remain same-origin regardless of where `assetsPath` points.
+The x2t worker script is bundled inside the SDK (always same-origin). `x2tPath` only controls where the worker fetches `x2t.js` and `x2t.wasm`.
+
+Both files are brotli-compressed and must be served with the following headers:
+
+| File | `Content-Type` | `Content-Encoding` |
+|------|---------------|-------------------|
+| `x2t.js` | `application/javascript` | `br` |
+| `x2t.wasm` | `application/wasm` | `br` |
+
+When using a CDN, also add `Access-Control-Allow-Origin: *` on both files.
+
+### Vite setup
+
+```ts
+export default defineConfig({
+  optimizeDeps: {
+    exclude: ['wasm-onlyoffice-sdk'],
+  },
+  server: {
+    fs: {
+      allow: ['../..'],  // only needed when referencing the SDK via a local file: path
+    },
+  },
+})
+```
+
+`optimizeDeps.exclude` is required because the SDK resolves its bundled worker via `new URL(...)`, which Vite's pre-bundler would break.
 
 ## Installation
 

package/dist/core/editor-server.d.ts

@@ -16,9 +16,11 @@ export declare class EditorServer {
     private urlsMap;
     private downloadId;
     private downloadParts;
-    constructor({ x2tPath, user }?: {
+    private onSave;
+    constructor({ x2tPath, user, onSave }?: {
         x2tPath?: string;
         user?: User;
+        onSave?: (blob: Blob, filename: string) => void;
     });
     open(file: File, { fileType, fileName }?: {
         fileType?: string;

package/dist/core/editor-server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor-server.d.ts","sourceRoot":"","sources":["../../src/core/editor-server.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,IAAI,EAA6B,MAAM,SAAS,CAAA;AA0BzD,qBAAa,YAAY;IACvB,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,EAAE,CAAM;IAChB,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,SAAS,CAAwB;IACzC,OAAO,CAAC,IAAI,CAGV;IACF,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,WAAW,CAA8B;IAEjD,OAAO,CAAC,IAAI,CAAqB;IACjC,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,KAAK,CAAsC;IACnD,OAAO,CAAC,OAAO,CAAkC;IAEjD,OAAO,CAAC,UAAU,CAAc;IAChC,OAAO,CAAC,aAAa,CAAoB;gBAE7B,EAAE,OAAkB,EAAE,IAAI,EAAE,GAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,IAAI,CAAA;KAAO;IAQ1E,IAAI,CACR,IAAI,EAAE,IAAI,EACV,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAO;;;;IAiBvE,OAAO,CAAC,QAAQ,CAAC,EAAE,MAAM;;;;IAqCnB,OAAO,CACX,GAAG,EAAE,MAAM,EACX,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAO;;;;IAgBvE,WAAW;;;;;;IAaX,OAAO;YAIO,YAAY;IAqC1B,OAAO,CAAC,QAAQ;IAQhB,aAAa,CAAC,EAAE,MAAM,EAAE,EAAE;QAAE,MAAM,EAAE,UAAU,CAAA;KAAE;IA+ChD,gBAAgB,CAAC,EAAE,MAAM,EAAE,EAAE;QAAE,MAAM,EAAE,UAAU,CAAA;KAAE;IAKnD,IAAI,CAAC,GAAG,EAAE,GAAG;IAQP,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE;IAyG1C,aAAa,CAAC,GAAG,EAAE,OAAO;IA4GhC,OAAO;CAIR"}
+{"version":3,"file":"editor-server.d.ts","sourceRoot":"","sources":["../../src/core/editor-server.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,IAAI,EAA6B,MAAM,SAAS,CAAA;AA0BzD,qBAAa,YAAY;IACvB,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,EAAE,CAAM;IAChB,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,SAAS,CAAwB;IACzC,OAAO,CAAC,IAAI,CAGV;IACF,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,WAAW,CAA8B;IAEjD,OAAO,CAAC,IAAI,CAAqB;IACjC,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,KAAK,CAAsC;IACnD,OAAO,CAAC,OAAO,CAAkC;IAEjD,OAAO,CAAC,UAAU,CAAc;IAChC,OAAO,CAAC,aAAa,CAAoB;IAEzC,OAAO,CAAC,MAAM,CAAuD;gBAEzD,EAAE,OAAkB,EAAE,IAAI,EAAE,MAAM,EAAE,GAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,IAAI,CAAC;QAAC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;KAAO;IASnI,IAAI,CACR,IAAI,EAAE,IAAI,EACV,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAO;;;;IAiBvE,OAAO,CAAC,QAAQ,CAAC,EAAE,MAAM;;;;IAqCnB,OAAO,CACX,GAAG,EAAE,MAAM,EACX,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAO;;;;IAgBvE,WAAW;;;;;;IAaX,OAAO;YAIO,YAAY;IAqC1B,OAAO,CAAC,QAAQ;IAQhB,aAAa,CAAC,EAAE,MAAM,EAAE,EAAE;QAAE,MAAM,EAAE,UAAU,CAAA;KAAE;IA+ChD,gBAAgB,CAAC,EAAE,MAAM,EAAE,EAAE;QAAE,MAAM,EAAE,UAAU,CAAA;KAAE;IAKnD,IAAI,CAAC,GAAG,EAAE,GAAG;IAQP,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE;IAyG1C,aAAa,CAAC,GAAG,EAAE,OAAO;IAiHhC,OAAO;CAIR"}

package/dist/index.mjs

@@ -209,11 +209,11 @@ function u(g, A) {
   return URL.createObjectURL(B);
 }
 class $ {
-  constructor({ x2tPath: A = "/x2t-1", user: B } = {}) {
+  constructor({ x2tPath: A = "/x2t-1", user: B, onSave: Q } = {}) {
     this.id = "", this.socket = null, this.sessionId = "session-id", this.user = {
       id: "uid",
       name: "Me"
-    }, this.participants = [], this.syncChangesIndex = 0, this.loadPromise = null, this.file = null, this.fileType = "docx", this.title = "", this.fsMap = /* @__PURE__ */ new Map(), this.urlsMap = /* @__PURE__ */ new Map(), this.downloadId = "", this.downloadParts = [], this.converter = new K(A), B && (this.user = B), this.send = this.send.bind(this), this.handleConnect = this.handleConnect.bind(this), this.handleMessage = this.handleMessage.bind(this);
+    }, this.participants = [], this.syncChangesIndex = 0, this.loadPromise = null, this.file = null, this.fileType = "docx", this.title = "", this.fsMap = /* @__PURE__ */ new Map(), this.urlsMap = /* @__PURE__ */ new Map(), this.downloadId = "", this.downloadParts = [], this.converter = new K(A), B && (this.user = B), Q && (this.onSave = Q), this.send = this.send.bind(this), this.handleConnect = this.handleConnect.bind(this), this.handleMessage = this.handleMessage.bind(this);
   }
   async open(A, { fileType: B, fileName: Q } = {}) {
     const E = Q || A.name;
@@ -450,19 +450,25 @@ class $ {
       !r && C.endsWith(".pdf") && (r = 513);
       const D = async () => {
         const G = W(this.downloadParts);
-        let o = "from.bin";
-        s.format == "pdf" && (o = "from.pdf");
+        let t = "from.bin";
+        s.format == "pdf" && (t = "from.pdf");
         let { output: w } = await this.converter.convert({
           data: G.buffer,
-          fileFrom: o,
+          fileFrom: t,
           fileTo: C,
           formatTo: r,
           media: Object.fromEntries(this.fsMap)
         });
         if (!w && s.format == "pdf" && (w = G), !w)
           return console.error("Conversion failed"), { status: "error" };
-        const M = new Blob([new Uint8Array(w)]), i = URL.createObjectURL(M), t = document.createElement("a");
-        return t.href = i, t.download = s.title || "test.docx", t.click(), URL.revokeObjectURL(i), { status: "ok" };
+        const M = new Blob([new Uint8Array(w)]), i = s.title || "document.docx";
+        if (this.onSave)
+          this.onSave(M, i);
+        else {
+          const o = URL.createObjectURL(M), I = document.createElement("a");
+          I.href = o, I.download = i, I.click(), URL.revokeObjectURL(o);
+        }
+        return { status: "ok" };
       };
       let e = {
         status: "ok"
@@ -521,10 +527,10 @@ function q() {
     function E(r, D, e) {
       this.fn = r, this.context = D, this.once = e || !1;
     }
-    function s(r, D, e, G, o) {
+    function s(r, D, e, G, t) {
       if (typeof e != "function")
         throw new TypeError("The listener must be a function");
-      var w = new E(e, G || r, o), M = B ? B + D : D;
+      var w = new E(e, G || r, t), M = B ? B + D : D;
       return r._events[M] ? r._events[M].fn ? r._events[M] = [r._events[M], w] : r._events[M].push(w) : (r._events[M] = w, r._eventsCount++), r;
     }
     function P(r, D) {
@@ -543,54 +549,54 @@ function q() {
       var e = B ? B + D : D, G = this._events[e];
       if (!G) return [];
       if (G.fn) return [G.fn];
-      for (var o = 0, w = G.length, M = new Array(w); o < w; o++)
-        M[o] = G[o].fn;
+      for (var t = 0, w = G.length, M = new Array(w); t < w; t++)
+        M[t] = G[t].fn;
       return M;
     }, C.prototype.listenerCount = function(D) {
       var e = B ? B + D : D, G = this._events[e];
       return G ? G.fn ? 1 : G.length : 0;
-    }, C.prototype.emit = function(D, e, G, o, w, M) {
+    }, C.prototype.emit = function(D, e, G, t, w, M) {
       var i = B ? B + D : D;
       if (!this._events[i]) return !1;
-      var t = this._events[i], I = arguments.length, c, n;
-      if (t.fn) {
-        switch (t.once && this.removeListener(D, t.fn, void 0, !0), I) {
+      var o = this._events[i], I = arguments.length, c, n;
+      if (o.fn) {
+        switch (o.once && this.removeListener(D, o.fn, void 0, !0), I) {
           case 1:
-            return t.fn.call(t.context), !0;
+            return o.fn.call(o.context), !0;
           case 2:
-            return t.fn.call(t.context, e), !0;
+            return o.fn.call(o.context, e), !0;
           case 3:
-            return t.fn.call(t.context, e, G), !0;
+            return o.fn.call(o.context, e, G), !0;
           case 4:
-            return t.fn.call(t.context, e, G, o), !0;
+            return o.fn.call(o.context, e, G, t), !0;
           case 5:
-            return t.fn.call(t.context, e, G, o, w), !0;
+            return o.fn.call(o.context, e, G, t, w), !0;
           case 6:
-            return t.fn.call(t.context, e, G, o, w, M), !0;
+            return o.fn.call(o.context, e, G, t, w, M), !0;
         }
         for (n = 1, c = new Array(I - 1); n < I; n++)
           c[n - 1] = arguments[n];
-        t.fn.apply(t.context, c);
+        o.fn.apply(o.context, c);
       } else {
-        var m = t.length, h;
+        var m = o.length, Y;
         for (n = 0; n < m; n++)
-          switch (t[n].once && this.removeListener(D, t[n].fn, void 0, !0), I) {
+          switch (o[n].once && this.removeListener(D, o[n].fn, void 0, !0), I) {
             case 1:
-              t[n].fn.call(t[n].context);
+              o[n].fn.call(o[n].context);
               break;
             case 2:
-              t[n].fn.call(t[n].context, e);
+              o[n].fn.call(o[n].context, e);
               break;
             case 3:
-              t[n].fn.call(t[n].context, e, G);
+              o[n].fn.call(o[n].context, e, G);
               break;
             case 4:
-              t[n].fn.call(t[n].context, e, G, o);
+              o[n].fn.call(o[n].context, e, G, t);
               break;
             default:
-              if (!c) for (h = 1, c = new Array(I - 1); h < I; h++)
-                c[h - 1] = arguments[h];
-              t[n].fn.apply(t[n].context, c);
+              if (!c) for (Y = 1, c = new Array(I - 1); Y < I; Y++)
+                c[Y - 1] = arguments[Y];
+              o[n].fn.apply(o[n].context, c);
           }
       }
       return !0;
@@ -598,18 +604,18 @@ function q() {
       return s(this, D, e, G, !1);
     }, C.prototype.once = function(D, e, G) {
       return s(this, D, e, G, !0);
-    }, C.prototype.removeListener = function(D, e, G, o) {
+    }, C.prototype.removeListener = function(D, e, G, t) {
       var w = B ? B + D : D;
       if (!this._events[w]) return this;
       if (!e)
         return P(this, w), this;
       var M = this._events[w];
       if (M.fn)
-        M.fn === e && (!o || M.once) && (!G || M.context === G) && P(this, w);
+        M.fn === e && (!t || M.once) && (!G || M.context === G) && P(this, w);
       else {
-        for (var i = 0, t = [], I = M.length; i < I; i++)
-          (M[i].fn !== e || o && !M[i].once || G && M[i].context !== G) && t.push(M[i]);
-        t.length ? this._events[w] = t.length === 1 ? t[0] : t : P(this, w);
+        for (var i = 0, o = [], I = M.length; i < I; i++)
+          (M[i].fn !== e || t && !M[i].once || G && M[i].context !== G) && o.push(M[i]);
+        o.length ? this._events[w] = o.length === 1 ? o[0] : o : P(this, w);
       }
       return this;
     }, C.prototype.removeAllListeners = function(D) {
@@ -619,7 +625,7 @@ function q() {
   })(f)), f.exports;
 }
 var X = q();
-const T = /* @__PURE__ */ j(X), Y = class Y {
+const T = /* @__PURE__ */ j(X), h = class h {
   constructor(A = {}) {
     this.active = !0, this.connected = !1, this.disconnected = !0, this.recovered = !1, this.id = "", this.io = {
       setOpenToken: () => {
@@ -657,10 +663,10 @@ const T = /* @__PURE__ */ j(X), Y = class Y {
     }, this._debug = A.debug ?? !1, this.connect();
   }
   static on(A, B) {
-    Y._staticEmitter.on(A, B);
+    h._staticEmitter.on(A, B);
   }
   static off(A, B) {
-    Y._staticEmitter.off(A, B);
+    h._staticEmitter.off(A, B);
   }
   _log(...A) {
     this._debug && console.log("[MockSocket]", ...A);
@@ -675,11 +681,11 @@ const T = /* @__PURE__ */ j(X), Y = class Y {
    */
   connect() {
     return this.connected = !0, this.disconnected = !1, this.id = Math.random().toString(36).substring(2, 15), setTimeout(() => {
-      this._trigger("connect"), Y._staticEmitter.emit("connect", { socket: this });
+      this._trigger("connect"), h._staticEmitter.emit("connect", { socket: this });
     }, 0), this;
   }
   disconnect() {
-    return this.connected = !1, this.disconnected = !0, this._trigger("disconnect"), Y._staticEmitter.emit("disconnect", { socket: this }), this;
+    return this.connected = !1, this.disconnected = !0, this._trigger("disconnect"), h._staticEmitter.emit("disconnect", { socket: this }), this;
   }
   close() {
     return this.disconnect();
@@ -735,8 +741,8 @@ const T = /* @__PURE__ */ j(X), Y = class Y {
     return setTimeout(() => Q(), 0), this;
   }
 };
-Y._staticEmitter = new T();
-let p = Y;
+h._staticEmitter = new T();
+let p = h;
 function AA(g, A) {
   return new p(A);
 }
@@ -755,8 +761,8 @@ function BA(g = globalThis.XMLHttpRequest) {
     /**
      * Register global middleware
      */
-    static use(o) {
-      this._middlewares.push(o);
+    static use(t) {
+      this._middlewares.push(t);
     }
     /**
      * Clear all middleware
@@ -764,27 +770,27 @@ function BA(g = globalThis.XMLHttpRequest) {
     static clearMiddlewares() {
       this._middlewares = [];
     }
-    open(o, w, M = !0, i, t) {
-      H(this, B, o), H(this, Q, w.toString()), H(this, E, new Headers()), H(this, A, !1), super.open(
-        o,
+    open(t, w, M = !0, i, o) {
+      H(this, B, t), H(this, Q, w.toString()), H(this, E, new Headers()), H(this, A, !1), super.open(
+        t,
         w,
         M,
         i ?? void 0,
-        t ?? void 0
+        o ?? void 0
       );
     }
-    setRequestHeader(o, w) {
-      a(this, E).append(o, w), a(this, A) || super.setRequestHeader(o, w);
+    setRequestHeader(t, w) {
+      a(this, E).append(t, w), a(this, A) || super.setRequestHeader(t, w);
     }
-    send(o) {
-      H(this, s, o), l(this, P, N).call(this).then((w) => {
-        w || super.send(o);
+    send(t) {
+      H(this, s, t), l(this, P, N).call(this).then((w) => {
+        w || super.send(t);
       }).catch((w) => {
-        console.error("ProxyXMLHttpRequest middleware error:", w), super.send(o);
+        console.error("ProxyXMLHttpRequest middleware error:", w), super.send(t);
       });
     }
   }, A = new WeakMap(), B = new WeakMap(), Q = new WeakMap(), E = new WeakMap(), s = new WeakMap(), P = new WeakSet(), N = async function() {
-    let o;
+    let t;
     try {
       const w = {
         method: a(this, B),
@@ -792,17 +798,17 @@ function BA(g = globalThis.XMLHttpRequest) {
         body: a(this, s),
         mode: "cors"
       };
-      this.withCredentials && (w.credentials = "include"), o = new Request(a(this, Q), w);
+      this.withCredentials && (w.credentials = "include"), t = new Request(a(this, Q), w);
     } catch {
       return !1;
     }
     for (const w of D._middlewares) {
-      const M = await w(o.clone());
+      const M = await w(t.clone());
       if (M)
         return H(this, A, !0), await l(this, P, O).call(this, M), !0;
     }
     return !1;
-  }, O = async function(o) {
+  }, O = async function(t) {
     this.dispatchEvent(new ProgressEvent("loadstart")), Object.defineProperty(this, "readyState", {
       value: 2,
       writable: !1,
@@ -815,22 +821,22 @@ function BA(g = globalThis.XMLHttpRequest) {
     try {
       let w;
       if (this.responseType === "json")
-        w = await o.json();
+        w = await t.json();
       else if (this.responseType === "arraybuffer")
-        w = await o.arrayBuffer();
+        w = await t.arrayBuffer();
       else if (this.responseType === "blob")
-        w = await o.blob();
+        w = await t.blob();
       else if (this.responseType === "document") {
-        const M = await o.text();
+        const M = await t.text();
         w = new DOMParser().parseFromString(M, "text/xml");
       } else
-        w = await o.text();
+        w = await t.text();
       Object.defineProperty(this, "status", {
-        value: o.status,
+        value: t.status,
         writable: !1,
         configurable: !0
       }), Object.defineProperty(this, "statusText", {
-        value: o.statusText,
+        value: t.statusText,
         writable: !1,
         configurable: !0
       }), Object.defineProperty(this, "response", {
@@ -842,7 +848,7 @@ function BA(g = globalThis.XMLHttpRequest) {
         writable: !1,
         configurable: !0
       }), Object.defineProperty(this, "responseURL", {
-        value: o.url,
+        value: t.url,
         writable: !1,
         configurable: !0
       }), this.dispatchEvent(

package/dist/react/index.mjs

@@ -1,61 +1,65 @@
-import { jsx as w } from "react/jsx-runtime";
-import { useRef as X, useEffect as j, useLayoutEffect as F } from "react";
-import { EditorServer as M, getDocumentType as N, MockSocket as l, createXHRProxy as $, io as B } from "../index.mjs";
-function J({
-  assetsPath: R,
-  x2tPath: S = "/x2t-1",
-  file: y,
-  fileUrl: v,
+import { jsx as m } from "react/jsx-runtime";
+import { useRef as d, useEffect as z, useLayoutEffect as B } from "react";
+import { EditorServer as V, getDocumentType as _, MockSocket as f, createXHRProxy as G, io as J } from "../index.mjs";
+function Z({
+  assetsPath: H,
+  x2tPath: I = "/x2t-1",
+  file: w,
+  fileUrl: y,
   newDocument: g,
-  language: q = "en",
-  theme: x = "theme-light",
-  user: D = { id: "uid", name: "User" },
-  onReady: p,
-  onDocumentStateChange: u,
-  onSave: z,
-  onError: t,
-  style: A,
-  className: P
+  language: P = "en",
+  theme: W = "theme-light",
+  user: E = { id: "uid", name: "User" },
+  onReady: D,
+  onDocumentStateChange: v,
+  onSave: k,
+  onError: L,
+  style: X,
+  className: j
 }) {
-  const d = X(!1), r = R.replace(/\/$/, ""), f = /^https?:\/\//.test(r);
-  j(() => {
-    const c = (a) => {
-      d.current && (a.preventDefault(), a.returnValue = "");
+  const l = d(!1), b = H.replace(/\/$/, ""), a = d(D), u = d(v), p = d(k), r = d(L);
+  a.current = D, u.current = v, p.current = k, r.current = L, z(() => {
+    const c = (n) => {
+      l.current && (n.preventDefault(), n.returnValue = "");
     };
     return window.addEventListener("beforeunload", c), () => window.removeEventListener("beforeunload", c);
-  }, []), F(() => {
-    const c = r + "/web-apps/apps/api/documents/api.js", a = f ? r + "/web-apps/apps/api/documents/" : location.origin, n = new M({ x2tPath: S, user: D });
-    y ? n.open(y) : v ? n.openUrl(v) : g ? n.openNew(g) : n.openNew("docx");
-    const s = n.getDocument(), H = N(s.fileType);
-    let i = null;
-    const b = ({ socket: e }) => n.handleConnect({ socket: e }), k = ({ socket: e }) => n.handleDisconnect({ socket: e });
-    l.on("connect", b), l.on("disconnect", k);
-    const I = () => {
-      const e = document.querySelector('iframe[name="frameEditor"]'), o = e == null ? void 0 : e.contentWindow, h = e == null ? void 0 : e.contentDocument;
-      if (!h || !o) {
-        t == null || t(new Error("Iframe not loaded"));
+  }, []), B(() => {
+    const c = b + "/web-apps/apps/api/documents/api.js", n = new V({ x2tPath: I, user: E, onSave: (e, t) => {
+      var o;
+      return (o = p.current) == null ? void 0 : o.call(p, e, t);
+    } });
+    w ? n.open(w) : y ? n.openUrl(y) : g ? n.openNew(g) : n.openNew("docx");
+    const i = n.getDocument(), M = _(i.fileType);
+    let s = null;
+    const T = ({ socket: e }) => n.handleConnect({ socket: e }), q = ({ socket: e }) => n.handleDisconnect({ socket: e });
+    f.on("connect", T), f.on("disconnect", q);
+    const O = () => {
+      var U, C;
+      const e = document.querySelector('iframe[name="frameEditor"]'), t = e == null ? void 0 : e.contentWindow, o = e == null ? void 0 : e.contentDocument;
+      if (!o || !t) {
+        (U = r.current) == null || U.call(r, new Error("Iframe not loaded"));
         return;
       }
-      const T = $(o.XMLHttpRequest), O = o.Worker;
-      T.use((m) => n.handleRequest(m)), Object.assign(o, {
-        io: B,
-        XMLHttpRequest: T,
-        Worker: function(m, W) {
-          return new O(new URL(m, a).href, W);
+      const A = G(t.XMLHttpRequest), N = t.Worker;
+      A.use((h) => n.handleRequest(h)), Object.assign(t, {
+        io: J,
+        XMLHttpRequest: A,
+        Worker: function(h, $) {
+          return new N(new URL(h, location.origin).href, $);
         }
       });
-      const E = h.createElement("script");
-      E.src = new URL(c, location.origin).href, h.body.appendChild(E), p == null || p();
-    }, L = () => {
-      i = new window.DocsAPI.DocEditor("placeholder", {
+      const S = o.createElement("script");
+      S.src = new URL(c, location.origin).href, o.body.appendChild(S), (C = a.current) == null || C.call(a);
+    }, x = () => {
+      s = new window.DocsAPI.DocEditor("placeholder", {
         isLocalFile: !0,
         document: {
-          fileType: s.fileType,
-          key: s.key,
-          title: s.title,
-          url: s.url,
+          fileType: i.fileType,
+          key: i.key,
+          title: i.title,
+          url: i.url,
           permissions: {
-            edit: s.fileType !== "pdf",
+            edit: i.fileType !== "pdf",
             chat: !1,
             rename: !0,
             protect: !0,
@@ -63,27 +67,31 @@ function J({
             print: !1
           }
         },
-        documentType: H,
+        documentType: M,
         editorConfig: {
-          lang: q,
+          lang: P,
           coEditing: { mode: "fast", change: !1 },
-          user: { ...D },
+          user: { ...E },
           customization: {
-            uiTheme: x,
+            uiTheme: W,
             features: { spellcheck: { change: !1 } }
           }
         },
         events: {
-          onAppReady: () => I(),
+          onAppReady: () => O(),
           onDocumentStateChange: (e) => {
-            e.data && (d.current = !0), u == null || u(e.data);
+            var t;
+            e.data && (l.current = !0), (t = u.current) == null || t.call(u, e.data);
+          },
+          onError: (e) => {
+            var t;
+            return (t = r.current) == null ? void 0 : t.call(r, new Error(String(e)));
           },
-          onError: (e) => t == null ? void 0 : t(new Error(String(e))),
           onSaveDocument: () => {
-            d.current = !1;
+            l.current = !1;
           },
           writeFile: () => {
-            d.current = !1;
+            l.current = !1;
           }
         },
         width: "100%",
@@ -91,28 +99,30 @@ function J({
       });
     };
     return (() => {
-      var o;
-      if ((o = window.DocsAPI) != null && o.DocEditor) {
-        L();
+      var t;
+      if ((t = window.DocsAPI) != null && t.DocEditor) {
+        x();
         return;
       }
       let e = document.querySelector(`script[src="${c}"]`);
-      e || (e = document.createElement("script"), e.src = c, document.head.appendChild(e)), e.onload = () => L(), e.onerror = () => t == null ? void 0 : t(new Error("Failed to load DocsAPI script"));
+      e || (e = document.createElement("script"), e.src = c, document.head.appendChild(e)), e.onload = () => x(), e.onerror = () => {
+        var o;
+        return (o = r.current) == null ? void 0 : o.call(r, new Error("Failed to load DocsAPI script"));
+      };
     })(), () => {
       var e;
-      l.off("connect", b), l.off("disconnect", k), (e = i == null ? void 0 : i.destroyEditor) == null || e.call(i), n.destroy();
+      f.off("connect", T), f.off("disconnect", q), (e = s == null ? void 0 : s.destroyEditor) == null || e.call(s), n.destroy();
     };
   }, []);
-  const U = f ? void 0 : r + "/web-apps/apps/api/documents/preload.html", C = f ? `<!DOCTYPE html><html><head><base href="${r}/web-apps/apps/api/documents/"></head><body></body></html>` : void 0;
-  return /* @__PURE__ */ w("div", { style: { width: "100%", height: "100%", ...A }, className: P, children: /* @__PURE__ */ w("div", { id: "placeholder", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ w(
+  const F = b + "/web-apps/apps/api/documents/preload.html";
+  return /* @__PURE__ */ m("div", { style: { width: "100%", height: "100%", ...X }, className: j, children: /* @__PURE__ */ m("div", { id: "placeholder", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ m(
     "iframe",
     {
       style: { width: 0, height: 0, display: "none" },
-      src: U,
-      srcDoc: C
+      src: F
     }
   ) }) });
 }
 export {
-  J as OnlyOfficeEditor
+  Z as OnlyOfficeEditor
 };

package/dist/vue/OnlyOfficeEditor.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OnlyOfficeEditor.vue.d.ts","sourceRoot":"","sources":["../../src/vue/OnlyOfficeEditor.vue"],"names":[],"mappings":"AAoLA,OAAO,KAAK,EAAa,WAAW,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEjE,UAAU,KAAK;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAA;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,IAAI,CAAC,EAAE,IAAI,CAAA;CACZ;;;;;;;;;;;;aAPW,MAAM;UAMT,IAAI;cAFA,MAAM;WACT,WAAW;;AAwMrB,wBAQG"}
+{"version":3,"file":"OnlyOfficeEditor.vue.d.ts","sourceRoot":"","sources":["../../src/vue/OnlyOfficeEditor.vue"],"names":[],"mappings":"AAsKA,OAAO,KAAK,EAAa,WAAW,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEjE,UAAU,KAAK;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAA;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,IAAI,CAAC,EAAE,IAAI,CAAA;CACZ;;;;;;;;;;;;aAPW,MAAM;UAMT,IAAI;cAFA,MAAM;WACT,WAAW;;AAyLrB,wBAQG"}