feat(viewer): migrate to @nextcloud/viewer package API

.github/workflows/cypress-e2e.yml

@@ -37,14 +37,6 @@ jobs:
           ref: ${{ matrix.server-versions }}
           submodules: true
 
-      - name: Checkout viewer
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
-        with:
-          persist-credentials: false
-          repository: nextcloud/viewer
-          ref: ${{ matrix.server-versions }}
-          path: apps/viewer
-
       - name: Checkout assistant
         if: matrix.server-versions == 'main'
         uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
@@ -162,7 +154,6 @@ jobs:
           export OC_PASS=1234561
           php occ user:add --password-from-env user1
           php occ user:add --password-from-env user2
-          php occ app:enable viewer
           php occ app:enable text
           php occ app:enable assistant --force
           php occ app:enable testing

cypress/e2e/nodes/CodeBlock.spec.js

@@ -148,7 +148,7 @@ describe('Front matter support', function() {
 					.contains('function')
 
 				// Mermaid diagram
-				cy.get('#viewer .modal-container__content').scrollTo('bottom')
+				cy.get('.viewer__modal .modal-container__content').scrollTo('bottom')
 				cy.getContent()
 					.find('.split-view__preview')
 					.eq(2)

cypress/e2e/share.spec.js

@@ -103,7 +103,7 @@ describe('Open test.md in viewer', function() {
 					.find('h2')
 					.should('contain', 'Hello world')
 				cy.getModal().find('.modal-header button.header-close').click()
-				cy.get('.modal-mask').should('not.be.visible')
+				cy.get('.viewer__modal').should('not.exist')
 				// cy.get('#rich-workspace').getContent().should('contain', 'Hello world')
 			})
 	})

cypress/e2e/shareWithAttachments.spec.js

@@ -94,7 +94,7 @@ describe('Public Share with attachments', () => {
 		cy.visit(`/s/${this.token}`)
 		cy.get('.editor__content-wrapper').should('exist')
 		cy.get('.editor__content-wrapper .name', { timeout: 10_000 }).click()
-		cy.get('.viewer').should('exist')
+		cy.get('.viewer__modal').should('exist')
 		cy.get('.language-plaintext').should('contain', 'multiple lines')
 	})
 })

cypress/e2e/viewer.spec.js

@@ -7,7 +7,7 @@ import { initUserAndFiles, randUser } from '../utils/index.js'
 const user = randUser()
 
 describe('Open test.md in viewer', function() {
-	const getViewer = () => cy.get('#viewer')
+	const getViewer = () => cy.get('.viewer__modal')
 
 	before(function() {
 		initUserAndFiles(user, 'test.md', 'empty.md')
@@ -67,8 +67,8 @@ describe('Open test.md in viewer', function() {
 
 	it('Closes the editor', function() {
 		cy.openFile('test.md')
-		cy.get('#viewer .modal-header button.header-close').click()
-		cy.get('#viewer').should('not.exist')
+		cy.get('.viewer__modal .modal-header button.header-close').click()
+		cy.get('.viewer__modal').should('not.exist')
 	})
 
 	it('Can use tab keys for list in the viewer', function() {

cypress/support/commands.js

@@ -261,8 +261,8 @@ Cypress.Commands.add('openFile', (fileName, params = {}) => {
 
 Cypress.Commands.add('closeFile', (params = {}) => {
 	cy.intercept({ method: 'POST', url: '**/apps/text/session/*/close' }).as('close')
-	cy.get('#viewer .modal-header button.header-close').click(params)
-	cy.get('#viewer .modal-header').should('not.exist')
+	cy.get('.viewer__modal .modal-header button.header-close').click(params)
+	cy.get('.viewer__modal .modal-header').should('not.exist')
 	cy.wait('@close', { timeout: 7000 })
 })
 
@@ -297,7 +297,7 @@ Cypress.Commands.add('getFile', (fileName) => {
 })
 
 Cypress.Commands.add('getModal', () => {
-	return cy.get('#viewer[data-handler="text"]')
+	return cy.get('.viewer__modal[data-handler="text"]')
 })
 
 Cypress.Commands.add('getEditor', { prevSubject: 'optional' }, (subject) => {
@@ -464,5 +464,7 @@ Cypress.Commands.add('createDirectEditingLinkForNewFile', (path) => {
 
 Cypress.on(
 	'uncaught:exception',
-	(err) => !err.message.includes('ResizeObserver loop limit exceeded'),
+	// Chrome said "limit exceeded", it now says "completed with undelivered
+	// notifications": a warning either way, not an error of the page
+	(err) => !err.message.includes('ResizeObserver loop'),
 )

lib/AppInfo/Application.php

@@ -28,11 +28,11 @@
 use OCA\Text\Middleware\SessionMiddleware;
 use OCA\Text\Notification\Notifier;
 use OCA\TpAssistant\Event\BeforeAssistantNotificationEvent;
-use OCA\Viewer\Event\LoadViewer;
 use OCP\AppFramework\App;
 use OCP\AppFramework\Bootstrap\IBootContext;
 use OCP\AppFramework\Bootstrap\IBootstrap;
 use OCP\AppFramework\Bootstrap\IRegistrationContext;
+use OCP\AppFramework\Http\Events\BeforeTemplateRenderedEvent as HttpBeforeTemplateRenderedEvent;
 use OCP\DB\Events\AddMissingIndicesEvent;
 use OCP\DirectEditing\RegisterDirectEditorEvent;
 use OCP\Files\Events\Node\BeforeNodeDeletedEvent;
@@ -53,7 +53,7 @@ public function register(IRegistrationContext $context): void {
 		$context->registerConfigLexicon(\OCA\Text\ConfigLexicon::class);
 
 		$context->registerEventListener(RegisterDirectEditorEvent::class, RegisterDirectEditorEventListener::class);
-		$context->registerEventListener(LoadViewer::class, LoadViewerListener::class);
+		$context->registerEventListener(HttpBeforeTemplateRenderedEvent::class, LoadViewerListener::class);
 		$context->registerEventListener(LoadAdditionalScriptsEvent::class, FilesLoadAdditionalScriptsListener::class);
 		$context->registerEventListener(BeforeTemplateRenderedEvent::class, FilesSharingLoadAdditionalScriptsListener::class);
 		$context->registerEventListener(LoadEditor::class, LoadEditorListener::class);

lib/Listeners/FilesLoadAdditionalScriptsListener.php

@@ -10,7 +10,9 @@
 
 use OCA\Files\Event\LoadAdditionalScriptsEvent;
 use OCA\Text\Service\InitialStateProvider;
+use OCP\Collaboration\Reference\RenderReferenceEvent;
 use OCP\EventDispatcher\Event;
+use OCP\EventDispatcher\IEventDispatcher;
 use OCP\EventDispatcher\IEventListener;
 
 /**
@@ -19,6 +21,7 @@
 class FilesLoadAdditionalScriptsListener implements IEventListener {
 	public function __construct(
 		private readonly InitialStateProvider $initialStateProvider,
+		private readonly IEventDispatcher $eventDispatcher,
 	) {
 	}
 
@@ -34,5 +37,8 @@ public function handle(Event $event): void {
 		\OCP\Util::addStyle('text', 'text-files');
 
 		$this->initialStateProvider->provideState();
+		// The viewer no longer has an event of its own to hang this on: the
+		// smart picker and link previews of a file opened from here need it
+		$this->eventDispatcher->dispatchTyped(new RenderReferenceEvent());
 	}
 }

lib/Listeners/FilesSharingLoadAdditionalScriptsListener.php

@@ -10,7 +10,9 @@
 
 use OCA\Files_Sharing\Event\BeforeTemplateRenderedEvent;
 use OCA\Text\Service\InitialStateProvider;
+use OCP\Collaboration\Reference\RenderReferenceEvent;
 use OCP\EventDispatcher\Event;
+use OCP\EventDispatcher\IEventDispatcher;
 use OCP\EventDispatcher\IEventListener;
 use OCP\IConfig;
 use OCP\Util;
@@ -20,6 +22,7 @@ class FilesSharingLoadAdditionalScriptsListener implements IEventListener {
 	public function __construct(
 		IConfig $config,
 		protected InitialStateProvider $initialStateProvider,
+		private readonly IEventDispatcher $eventDispatcher,
 	) {
 	}
 
@@ -34,6 +37,8 @@ public function handle(Event $event): void {
 		Util::addStyle('text', 'text-init');
 
 		$this->initialStateProvider->provideState();
+		// For the smart picker and link previews, as in the Files app
+		$this->eventDispatcher->dispatchTyped(new RenderReferenceEvent());
 		$node = $event->getShare()->getNode();
 		if ($node instanceof \OCP\Files\File) {
 			$this->initialStateProvider->provideFileId($node->getId());

lib/Listeners/LoadViewerListener.php

@@ -8,30 +8,24 @@
 
 namespace OCA\Text\Listeners;
 
-use OCA\Text\Service\InitialStateProvider;
-use OCA\Viewer\Event\LoadViewer;
-use OCP\Collaboration\Reference\RenderReferenceEvent;
+use OCP\AppFramework\Http\Events\BeforeTemplateRenderedEvent;
+use OCP\AppFramework\Http\TemplateResponse;
 use OCP\EventDispatcher\Event;
-use OCP\EventDispatcher\IEventDispatcher;
 use OCP\EventDispatcher\IEventListener;
 use OCP\Util;
 
-/** @implements IEventListener<Event|LoadViewer> */
+/** @implements IEventListener<BeforeTemplateRenderedEvent> */
 class LoadViewerListener implements IEventListener {
-	public function __construct(
-		private readonly InitialStateProvider $initialStateProvider,
-		private readonly IEventDispatcher $eventDispatcher,
-	) {
-	}
-
 	public function handle(Event $event): void {
-		if (!$event instanceof LoadViewer) {
+		if (!($event instanceof BeforeTemplateRenderedEvent)) {
+			return;
+		}
+
+		if ($event->getResponse()->getRenderAs() === TemplateResponse::RENDER_AS_ERROR) {
 			return;
 		}
-		Util::addScript('text', 'text-viewer', 'viewer');
-		Util::addStyle('text', 'text-viewer');
-		$this->eventDispatcher->dispatchTyped(new RenderReferenceEvent());
 
-		$this->initialStateProvider->provideState();
+		// Only registers the handler: the editor loads when a text file opens
+		Util::addInitScript('text', 'text-viewer');
 	}
 }