How to pass data from a page to onlyoffice plugin?

149 Views Asked by At

I need your input regarding an issue I am facing with an OnlyOffice plugin. I am currently developing a plugin for OnlyOffice, and I've encountered a problem when trying to access the app's local storage. My goal within the plugin is to make a fetch request to the server to dynamically obtain some data, which requires the user's token that is stored in the local storage. While this works on certain versions of the Chrome browser, I've been unable to access local storage within the plugin code in Mozilla.

I have also attempted to use the postMessage API to send a message from the React component to the plugin, but this method was unsuccessful as well. It's worth noting that the OnlyOffice DocEditor is rendered from a React component.

Here is what I've tried so far

React Component :

const Documents = () => {
    const onDocumentReady = function (event) {
        console.log('Document is loaded')
    }

    function sendCustomEventToPlugin(params) {
        window.postMessage('data', '*')
    }

    return (
        <div className="container ">
            <div style={{ height: '100vh' }} className="shadow-sm my-2">
                <DocumentEditor
                    id="docxEditor"
                    documentServerUrl="example host"
                    config={{
                        document: {
                            fileType: 'docx',
                            key: 'Khirz6zTPdfd7',
                            url: 'example',
                        },
                        documentType: 'word',
                        editorConfig: {
                            callbackUrl: 'example',
                        },
                    }}
                    events_onDocumentReady={onDocumentReady}
                />
            </div>
            <button onClick={sendCustomEventToPlugin}>CLick</button>
        </div>
    )
}
export default Documents`

And plugin code:

window.Asc.plugin.init = async function () {
    isInit = true;

    window.addEventListener(
        "message",
        (event) => {
            console.log(event)
        }
    );

    try {

        var token = window.parent.localStorage.getItem('app-token');

        var bearerAuth = 'Bearer ' + JSON.parse(token);

        const response = await fetch(
            'path-example',
            {
                method: 'GET',
                headers: {
                    Authorization: bearerAuth,
                    'Content-Type': 'application/json',
                },
            }
        );
        const data = await response.json();
        console.log(data);
        renderPlaceholders(data.documentPlaceholders);
    } catch (error) {
        console.error('Error fetching data from API', error);
    }
}

Is there another way to pass dynamic data from my react component to plugin? Thank you!

0

There are 0 best solutions below