Collabora in a Vue 3 + Vite component

This project is two-fold in how to display the Collabora Online iframe :

• a Vue3 component that can be used in any vue3 application
• an independent application that can run anywhere

It is prepared and build with vite. It also can be run with it.

Usual commands :

• npm run build to build the library that can be imported anywhere
• npm run dev to show the application

The example.html is there for dev purposes, change AppExample.vue to your fit. Navigate to http://localhost:8008/example.html

The main view (http://localhost:8008/index.html) is the independent application. Just give the right parameters and it should show you Collabora :

• accessToken : the wopi token generated by the backend
• accessTokenTTL : and its TTL
• collaboraUrl : the cool.html url
• wopiFileUrl : the wopi URL of the file you want to access with Collabora (has to be understood by the Collabora Server)

Example : http://localhost:8008/index.html?collaboraUrl=http://localhost:9980/browser/b639546/cool.html?&wopiFileUrl=http://acs:8080/alfresco/service/wopi/files/0dde2d84-0ba6-4f6e-9f0a-0eb9f15d9888&access_token=ghseipu77bseoo1jgodbj7ci75&access_token_ttl=1666803915100

Changelog

• v0.1.0 : initial public release
• v0.1.1 : update dependencies (axios, saas, vite)
• v0.2.0 : add lang, ui_defaults and css_variables parameters
• v0.2.1 : fix allow fullscreen, update dependencies and node 20.9.0
• v0.2.2 : update node 20.19.1, update main dependencies (vue, vite, eslint)
• v0.2.3 : update dependencies
• v0.2.4 : add clipboard permissions to Collabora iframe
• v0.3.0 :
  • fix: encode wopiFileUrl with encodeURIComponent
  • build: update node and vite configuration
  • refactor: compress svg with svgo
• v0.3.1 : fix bad export module
• v0.3.3 : allow fullscreen
• v0.3.4 : iframe allow must have collabora origin
• v0.4.0 : add postMessage dispatcher and Doc_ModifiedStatus handling
• v0.5.0 : add CollaboraSettingsIframe for the WOPI Settings management UI (UserSettings / SharedSettings)
• v0.5.1 : fix CollaboraSettingsIframe settings urlsrc separator (avoid ".htmllang=fr" 404)
• v0.5.2 : CollaboraSettingsIframe fills its container by default (inline sizing, no CSS import needed); opt-in autoHeight for content-height sizing

CollaboraSettingsIframe

Renders the Collabora Online settings management iframe (WOPI Settings API), used to manage per-user (user) or shared/admin (admin) settings without an open document.

Props:

• settingsUrl : the urlsrc of the settings action from the Collabora discovery.xml (ends with ?)
• accessToken : the WOPI access token generated by the backend
• wopiSettingBaseUrl : the WOPI base URL Collabora appends /settings to (e.g. https://acs/alfresco/s/wopi)
• iframeType : user or admin
• lang : UI language (default en)
• uiTheme : light or dark (optional)
• cssVariables : theming variables (optional, see https://sdk.collaboraonline.com/docs/theming.html)
• autoHeight : when true, size the iframe to the content height from the Iframe_Height postMessage. Default false: the iframe fills its container (use a sized container).

The Iframe_Height postMessage is always re-emitted via the iframe-height event, regardless of autoHeight.