No description
Find a file
Skyler Grey 7aa9de4f2f fix(android): match iframe size to visual viewport
I've been testing Collabora Online with Nextcloud on Android, and I've
noticed some content displaying behind the onscreen keyboard as follows:

There are two viewports on the web, the "visual" viewport (what you
actually see) and the "layout" viewport (how the browser draws the
page). The onscreen keyboard popping up used to resize the layout
viewport. In newer Android versions, the onscreen keyboard by default
resizes the visual viewport rather than the layout viewport.

Unfortunately, the visual viewport isn't propagated through iframes, as
per MDN docs which state:

> Only the top-level window has a visual viewport that's distinct from
> the layout viewport. Therefore, it's generally only the VisualViewport
> object of the top-level window that's useful. For an <iframe>, visual
> viewport metrics like VisualViewport.width always correspond to layout
> viewport metrics like document.documentElement.clientWidth.

(Quote from [VisualViewport page on MDN Docs][VV], by Mozilla
Contributors under [CC-BY-SA v2.5][VVLICENSE])

[VV]: https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport
[VVLICENSE]: https://creativecommons.org/licenses/by-sa/2.5/

This leads to Collabora Online seeing the viewport as the size of its
iframe in all cases. When the onscreen keyboard is up, this causes some
parts of the app (the bottom toolbar) to be hidden as they are behind
the keyboard. The intention is for this toolbar to instead float above
the keyboard.

I've done some investigation and this would be a problem on
iOS/iPadOS too... it would be, except Julius has already written
code to fix it (thanks Julius!). The code I'm talking about was in
`src/helpers/safariFixer.js`, its job was to resize the richdocuments
frame in place of the browser. It was previously gated to only running
on iOS, but we can make it broader so it encompasses all browsers -
including those running on Android devices.

If we change that code to fix things other than Safari, the name no
longer makes sense. Therefore, let's rename it to `mobileFixer.js` as
well

Finally, it's worth noting that this doesn't work in every browser
I tested. Notably [Fennec][FENNEC] doesn't appear to correctly
resize the visual viewport so this fix doesn't work over there.
Notwithstanding, this fix does appear to work in both Play Store
Chrome and Play Store Firefox which is a lot better than not
working at all. Potential fixes for Fennec were considered possibly
too risky: we could set a meta tag with `name="viewport"` and
`content="interactive-widget=resizes-content"` but this would need
to be set even when richdocuments isn't in use (or isn't installed!).
Therefore, we'll have to cope with the state of things as they are for
now...

[FENNEC]: https://f-droid.org/en/packages/org.mozilla.fennec_fdroid/

Signed-off-by: Skyler Grey <skyler.grey@collabora.com>
2025-11-05 11:53:42 +00:00
.github chore: update to php8.2 2025-10-06 13:54:43 -04:00
.tx [tx-robot] Update transifex configuration 2022-10-01 02:55:58 +00:00
appinfo feat(deps): Add Nextcloud 33 support on main 2025-09-04 12:35:33 +02:00
build Fixes #4565 - assets directory conflicts with assets API when the webserver is nginx 2025-08-11 09:33:23 -04:00
composer refactor: remove composer dir and redirect autoloader 2025-01-29 14:46:30 -05:00
css chore: Move from old dialog to a modern vue one 2025-05-27 08:20:29 +02:00
cypress fix(test): adjust selectors for image inseration test 2025-09-19 12:16:29 -04:00
docs chore(docs): add documentation for new ms office template 2025-08-28 16:32:34 -04:00
emptyTemplates feat(AI): generate presentations with AI 2025-09-22 12:51:39 -04:00
fonts Fixes #4565 - assets directory conflicts with assets API when the webserver is nginx 2025-08-11 09:33:23 -04:00
img fix: file action for opening pdf files with richdocuments 2024-05-02 14:36:55 -04:00
l10n fix(l10n): Update translations from Transifex 2025-10-29 01:32:11 +00:00
lib Update LOOL to COOL naming conventions 2025-10-22 20:27:30 +02:00
LICENSES chore: Add SPDX header 2024-05-09 10:37:22 +02:00
screenshots Add screenshots 2022-08-28 20:08:54 +02:00
src fix(android): match iframe size to visual viewport 2025-11-05 11:53:42 +00:00
templates chore: Move from old dialog to a modern vue one 2025-05-27 08:20:29 +02:00
tests Update LOOL to COOL naming conventions 2025-10-22 20:27:30 +02:00
.eslintignore chore: Add SPDX header 2024-05-09 10:37:22 +02:00
.eslintrc.js fix: Fix eslint errors for typescript files 2024-06-14 10:49:15 +02:00
.gitignore Fixes #4565 - assets directory conflicts with assets API when the webserver is nginx 2025-08-11 09:33:23 -04:00
.nextcloudignore fix: do not exclude dependency src/ 2025-09-03 15:15:29 -04:00
.php-cs-fixer.dist.php fix: Add further SPDX headers 2024-05-09 10:37:23 +02:00
.stylelintrc.js fix: Add further SPDX headers 2024-05-09 10:37:23 +02:00
AUTHORS.md fix: add further SPDX headers 2024-05-09 10:37:24 +02:00
babel.config.js fix: Add further SPDX headers 2024-05-09 10:37:23 +02:00
CHANGELOG.md chore(release): update changelog 2025-08-18 16:41:08 -04:00
composer.json chore(deps): Bump mikehaertl/php-pdftk from 0.14.0 to 0.14.2 2025-10-06 18:24:06 +00:00
composer.lock chore(dev-deps): Bump nextcloud/ocp package 2025-10-26 02:43:38 +00:00
cypress.config.ts fix: Add further SPDX headers 2024-05-09 10:37:23 +02:00
krankerl.toml refactor: remove composer dir and redirect autoloader 2025-01-29 14:46:30 -05:00
Makefile chore: Add SPDX header 2024-05-09 10:37:22 +02:00
mkdocs.yml chore: Add SPDX header 2024-05-09 10:37:22 +02:00
package-lock.json fix(deps): Fix npm audit 2025-10-26 03:21:15 +00:00
package.json chore(deps-dev): Bump cypress-split from 1.24.24 to 1.24.25 2025-10-25 01:02:59 +00:00
psalm.xml chore: update to php8.2 2025-10-06 13:54:43 -04:00
README.md chore: add docs/ai.md about document generation 2025-04-22 12:39:55 +02:00
rector.php chore: Add rector 2024-09-19 00:44:37 +02:00
REUSE.toml Fixes #4565 - assets directory conflicts with assets API when the webserver is nginx 2025-08-11 09:33:23 -04:00
tsconfig.json chore: Also handle typescript files in eslint 2024-06-14 10:49:15 +02:00
webpack.js fix: register handler within init script 2025-09-02 03:03:38 +02:00

Nextcloud Office

REUSE status

A Nextcloud app integrating Collabora Online into your Nextcloud!

Nextcloud Office supports editing your documents in real time with multiple other editors, showing high fidelity, WYSIWYG rendering and preserving the layout and formatting of your documents.

Users can insert and reply to comments and invite others without a Nextcloud account for anonymous editing of files with a public link shared folder.

Nextcloud Office supports dozens of document formats including DOC, DOCX, PPT, PPTX, XLS, XLSX + ODF, Import/View Visio, Publisher and many more…

Nextcloud Office is based on the Collabora Online Development Edition (CODE) and is available free and under heavy development, adding features and improvements all the time! Enterprise users have access to the more stable, scalable Collabora Online Enterprise based version through a Nextcloud support subscription.

Installation

Nextcloud Office is built on Collabora Online which requires a dedicated service running next to the Nextcloud webserver stack. There are several ways to run the coolwsd service. For full details, see the related section in the admin manual https://docs.nextcloud.com/server/latest/admin_manual/office/index.html

This repository covers only the Nextcloud integration app which requires a Collabora Online server to connect to.

Note: it is possible to use Collabora Onlines integration with re-compiled and/or re-branded backends. This app may work with other WOPI Edtiors such as LibreOffice Online but it is not tested.

Federated editing / Global Scale

Collaborative editing of federated documents requires richdocuments version 3.4 on all involved servers. Besides that the following conditions must be met:

  • Make sure the remote server is added as a trusted server
  • Allow any domain to embed Collabora Online in a frame: <frame_ancestors>https://*</frame_ancestors> must be set in coolwsd.xml

Note: Due to our content security policy we cannot open a document on a remote instance without reloading the page to allow Nextcloud embedding the remote Collabora Online instance in a frame.

AI document generation

This app is able to generate office documents from a prompt using AI. See the AI doc.

Development setup

Just clone this repo into your apps directory (Nextcloud server installation needed). Additionally, npm, Node.js, and Composer are needed for installing JavaScript dependencies and building the frontend code.

Once npm, Node.js, and Composer are installed, this can be done by running:

composer install
npm ci
npm run dev

Support

Enterprise users who need a more reliable and scalable solution can take advantage of Nextcloud GmbH's optional support contract for Collabora Online. Find out more about Enterprise support for Collabora Online over here: https://nextcloud.com/enterprise/