spire.officejs-react-brook 1.1.1

package/README.md

@@ -0,0 +1,211 @@
+# spire.officejs-react
+
+A React component library for integrating Spire.OfficeJS editors into your React applications.
+
+# Installation
+
+```bash
+npm install spire.officejs-react
+```
+
+# Usage
+
+```jsx
+import React, { useRef, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom'
+import OfficejsEditor from 'spire.officejs-react';
+
+function App() {
+  const file = new File() // The actual File Data of the document
+  const fileUint8Data = new Uint8Array() // The actual Uint8Array data of the document
+  const navigate = useNavigate()
+  const EditorRef = React.useRef()
+  const config = useRef({})
+  const serverUrl = useRef('')
+  let Editor = useRef(null)
+  let Api = useRef(null)
+  let originUrl = window.location.origin
+  let env = ''
+  const [isEditorReady, setIsEditorReady] = useState(false)
+  const editorTypes = {
+    document: 'document',
+    pdf: 'pdf',
+    spreadsheet: 'spreadsheet',
+    presentation: 'presentation'
+  }
+  const exts_document = ['docx', 'docm', 'doc', 'dotx', 'dotm', 'dot', 'odt', 'fodt', 'ott', 'txt', 'wps', 'wpt']
+  const exts_spreadsheet = ['xlsx', 'csv', 'xlsm', 'xls', 'xltx', 'xltm', 'xlt', 'et', 'ett']
+  const exts_presentation = ['pptx', 'pptm', 'ppt', 'ppsx', 'ppsm', 'pps', 'potx', 'potm', 'dps', 'dpt']
+  const exts_pdf = ['pdf', 'xps']
+
+  useEffect(() => {
+    if (!file) {
+      navigate('/')
+      return
+    }
+    init()
+  }, [])
+
+  useEffect(() => {
+    if (config.current && config.current.fileAttrs && EditorRef.current) {
+      const timer = setTimeout(() => {
+        setIsEditorReady(true)
+      }, 100)
+      return () => clearTimeout(timer)
+    }
+  }, [config.current, EditorRef.current])
+
+  useEffect(() => {
+    if (isEditorReady && EditorRef.current && EditorRef.current.open) {
+      EditorRef.current.open()
+    }
+  }, [isEditorReady])
+
+  const init = () => {
+    initConfig()
+  }
+  const initConfig = () => {
+    var url = new URL(import.meta.url)
+    var editorType = ''
+    var ext = getFileExtension()
+    if (import.meta.env.DEV) {
+      serverUrl.current = `http://127.0.0.1:7000`
+      originUrl = `http://127.0.0.1:7000`
+      env = 'develop'
+    } else if (import.meta.env.PROD) {
+      serverUrl.current = `${url.origin}/spire.officejs`
+      originUrl = `${url.origin}/spire.officejs`
+      env = 'product'
+    }
+
+    if (exts_document.includes(ext)) editorType = editorTypes.document
+    else if (exts_spreadsheet.includes(ext))
+      editorType = editorTypes.spreadsheet
+    else if (exts_presentation.includes(ext))
+      editorType = editorTypes.presentation
+    else if (exts_pdf.includes(ext)) editorType = editorTypes.pdf
+
+    config.current = {
+      fileAttrs: {
+        fileInfo: {
+          name: file.name,
+          ext: ext,
+          primary: String(new Date().getTime()), //this is key
+          creator: 'Jonn',
+          createTime: '2022-04-18 11:30:43'
+        },
+        sourceUrl: originUrl + '/files/__ffff_192.168.2.134/' + file.name,
+        createUrl: originUrl + '/open',
+        mergeFolderUrl: '',
+        fileChoiceUrl: '',
+        templates: {}
+      },
+      user: {
+        id: 'uid-1',
+        name: 'Jonn',
+        canSave: true
+      },
+      editorAttrs: {
+        editorMode: file.name.endsWith('.pdf') ? 'view' : 'edit',
+        editorWidth: '100%',
+        editorHeight: '100%',
+        editorType: editorType,
+        platform: 'desktop', //desktop£¬ mobile£¬ embedded
+        viewLanguage: 'zh', //en/zh
+        isReadOnly: false,
+        canChat: true,
+        canComment: true,
+        canReview: true,
+        canDownload: true,
+        canEdit: file.name.endsWith('.pdf') ? false : true,
+        canForcesave: true,
+        embedded: {
+          saveUrl: '',
+          embedUrl: '',
+          shareUrl: '',
+          toolbarDocked: 'top'
+        },
+        useWebAssemblyDoc: true,
+        useWebAssemblyExcel: true,
+        useWebAssemblyPpt: true,
+        useWebAssemblyPdf: true,
+        spireDocJsLicense: '',
+        spireXlsJsLicense: '',
+        spirePresentationJsLicense: '',
+        spirePdfJsLicense: '',
+        serverless: {
+          useServerless: true,
+          baseUrl: originUrl,
+          fileData: fileUint8Data
+        },
+        events: {
+          onSave: onFileSave
+        },
+        plugins: {
+          pluginsData: []
+        }
+      }
+    }
+  }
+  const getFileExtension = () => {
+    const filename = file.name.split(/[\\/]/).pop()
+    return filename.substring(filename.lastIndexOf('.') + 1).toLowerCase() || ''
+  }
+  const onFileSave = data => {
+    console.log('save data', data)
+  }
+
+  return (
+    <>
+      <SpireOfficejsEditor
+        ref={EditorRef}
+        config={config.current}
+        serverUrl={serverUrl.current}
+      ></SpireOfficejsEditor>
+    </>
+  )
+}
+```
+
+# Parameters
+
+## Props
+
+| Property | Description | Type | Default |
+|----------|-------------|------|---------|
+| id | Editor container ID | `string` | `'SpireofficejsEditor'` |
+| config | Editor configuration object | `object` | **Required** |
+| serverUrl | Server URL for Spire.OfficeJS | `string` | **Required** |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| open() | Manually initialize and open the editor |
+
+# Important Notes
+
+1. This component requires the `spire.officejs` package to be installed and configured on your server.
+2. Make sure your server is running and accessible from the client application.
+3. The component will automatically load the necessary editor scripts from the provided `serverUrl`.
+4. For production use, ensure proper error handling and loading states.
+
+# Supported File Formats
+
+## Document
+.docx, .docm, .doc, .dotx, .dotm, .dot, .odt, .fodt, .ott, .txt, .wps, .wpt
+
+## Spreadsheet
+.xlsx, .csv, .xlsm, .xls, .xltx, .xltm, .xlt, .et, .ett
+
+## Presentation
+.pptx, .pptm, .ppt, .ppsx, .ppsm, .pps, .potx, .potm, .dps, .dpt
+
+## PDF
+.pdf, .xps
+
+# Build Tool Plugins
+
+| Build Tool | Plugin Name | NPM Package |
+|------------|-------------|-------------|
+| Vite | vite-plugin-spire.officejs | [vite-plugin-spire.officejs](https://www.npmjs.com/package/vite-plugin-spire.officejs) |

package/es/index.mjs

@@ -0,0 +1,4 @@
+import { default as r } from "./src/officejsEditor/officejsEditor.mjs";
+export {
+  r as SpireOfficejsEditor
+};

package/es/src/index.d.ts

@@ -0,0 +1 @@
+export * from './officejsEditor/index';

package/es/src/officejsEditor/index.d.ts

@@ -0,0 +1,3 @@
+import SpireOfficejsEditor from './officejsEditor';
+export default SpireOfficejsEditor;
+export { SpireOfficejsEditor };

package/es/src/officejsEditor/index.types.d.ts

@@ -0,0 +1,16 @@
+export interface OfficejsEditorProps {
+    id?: string;
+    config: Object;
+    serverUrl: string;
+}
+declare global {
+    interface Window {
+        SpireofficejsEditors?: {
+            OpenApi: (id: string, config: any) => void;
+        };
+        SpireofficeEditor?: {
+            OpenApi?: (id: string, config: any) => void;
+        };
+        Api: any;
+    }
+}

package/es/src/officejsEditor/officejsEditor.d.ts

@@ -0,0 +1,2 @@
+declare const officejsEditor: any;
+export default officejsEditor;

package/es/src/officejsEditor/officejsEditor.mjs

@@ -0,0 +1,47 @@
+import r, { forwardRef as S, useEffect as A, useImperativeHandle as j } from "react";
+import n from "spire.officejs-web-editors";
+const R = S(
+  ({ id: s = "SpireofficejsEditor", config: p, serverUrl: i }, c) => {
+    const d = r.useRef();
+    let t, o;
+    const a = () => {
+      if (!p) throw new Error('Missing parameter "config"');
+      if (i == null || i == null)
+        throw new Error('Missing parameter "serverUrl"');
+    };
+    A(() => {
+      l();
+    }, []);
+    const l = () => {
+      g(), f(), u();
+    }, f = () => {
+      i ? i.endsWith("/") ? o = i.substring(0, i.length - 1) : o = i : o = window.location.origin;
+    }, w = () => {
+      if (a(), n && n.OpenApi) {
+        const e = n.OpenApi;
+        t = new e(s, p), window.Api = t.GetOpenApi(), E();
+      }
+    }, u = () => {
+      if (!document.querySelector('script[src*="SpireCloudEditor.js"]')) {
+        var e = document.createElement("script"), h = `${o}/editors/spireapi/SpireCloudEditor.js`;
+        e.setAttribute("src", h), document.body.appendChild(e);
+      }
+    }, E = () => {
+      let e = document.getElementsByClassName(
+        "spire-officejs-EditorWarpper"
+      );
+      e.length && (e[0] && (e[0].style.height = screen.availHeight + "px"), window.scrollTo(0, -1), e[0] && (e[0].style.height = window.innerHeight + "px"));
+    }, m = () => {
+      w();
+    }, g = () => {
+      t && (t?.destroyEditor(), t = null), window.Api && (window.Api = null);
+    };
+    return j(c, () => ({
+      // 定义暴露的方法
+      open: m
+    })), /* @__PURE__ */ r.createElement("div", { className: "spire-officejs-EditorWarpper" }, /* @__PURE__ */ r.createElement("div", { id: s, ref: d }));
+  }
+);
+export {
+  R as default
+};

package/lib/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./src/officejsEditor/officejsEditor.js");exports.SpireOfficejsEditor=e.default;

package/lib/src/index.d.ts

@@ -0,0 +1 @@
+export * from './officejsEditor/index';

package/lib/src/officejsEditor/index.d.ts

@@ -0,0 +1,3 @@
+import SpireOfficejsEditor from './officejsEditor';
+export default SpireOfficejsEditor;
+export { SpireOfficejsEditor };

package/lib/src/officejsEditor/index.types.d.ts

@@ -0,0 +1,16 @@
+export interface OfficejsEditorProps {
+    id?: string;
+    config: Object;
+    serverUrl: string;
+}
+declare global {
+    interface Window {
+        SpireofficejsEditors?: {
+            OpenApi: (id: string, config: any) => void;
+        };
+        SpireofficeEditor?: {
+            OpenApi?: (id: string, config: any) => void;
+        };
+        Api: any;
+    }
+}

package/lib/src/officejsEditor/officejsEditor.d.ts

@@ -0,0 +1,2 @@
+declare const officejsEditor: any;
+export default officejsEditor;

package/lib/src/officejsEditor/officejsEditor.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react"),n=require("spire.officejs-web-editors"),S=t.forwardRef(({id:s="SpireofficejsEditor",config:c,serverUrl:i},d)=>{const p=t.useRef();let r,o;const l=()=>{if(!c)throw new Error('Missing parameter "config"');if(i==null||i==null)throw new Error('Missing parameter "serverUrl"')};t.useEffect(()=>{a()},[]);const a=()=>{m(),f(),w()},f=()=>{i?i.endsWith("/")?o=i.substring(0,i.length-1):o=i:o=window.location.origin},u=()=>{if(l(),n&&n.OpenApi){const e=n.OpenApi;r=new e(s,c),window.Api=r.GetOpenApi(),E()}},w=()=>{if(!document.querySelector('script[src*="SpireCloudEditor.js"]')){var e=document.createElement("script"),h=`${o}/editors/spireapi/SpireCloudEditor.js`;e.setAttribute("src",h),document.body.appendChild(e)}},E=()=>{let e=document.getElementsByClassName("spire-officejs-EditorWarpper");e.length&&(e[0]&&(e[0].style.height=screen.availHeight+"px"),window.scrollTo(0,-1),e[0]&&(e[0].style.height=window.innerHeight+"px"))},g=()=>{u()},m=()=>{r&&(r?.destroyEditor(),r=null),window.Api&&(window.Api=null)};return t.useImperativeHandle(d,()=>({open:g})),t.createElement("div",{className:"spire-officejs-EditorWarpper"},t.createElement("div",{id:s,ref:p}))});exports.default=S;

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "spire.officejs-react-brook",
+  "version": "1.1.1",
+  "main": "lib/index.js",
+  "module": "es/index.mjs",
+  "scripts": {
+    "release": "release-it"
+  },
+  "files": [
+    "es",
+    "lib"
+  ],
+  "keywords": [
+    "spire.officejs",
+    "React",
+    "TypeScript"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "author": "icebluezhang",
+  "license": "MIT",
+  "description": "",
+  "typings": "lib/index.d.ts"
+}