diff --git a/css/filetypes.scss b/css/filetypes.scss
index 6d3bbe5392..19048dd007 100644
--- a/css/filetypes.scss
+++ b/css/filetypes.scss
@@ -13,3 +13,11 @@
 .icon-filetype-draw {
 	background-image: url('../img/x-office-drawing.svg');
 }
+
+.icon-richdocuments {
+	background-image: url(../img/app-dark.svg);
+}
+
+body.dark .icon-richdocuments {
+	background-image: url(../img/app.svg);
+}
diff --git a/src/viewer.js b/src/viewer.js
index 92d7e57c14..0e6259118b 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -37,3 +37,28 @@ if (OCA.Viewer) {
 		theme: 'light',
 	})
 }
+
+// TODO: Viewer.openWith introduced with https://github.com/nextcloud/viewer/pull/1273
+//       This check can be replaced with `if(OCA.Viewer)` once NC 24 is EOL.
+if (OCA.Viewer.openWith) {
+	const supportedMimes = OC.getCapabilities().richdocuments.mimetypesNoDefaultOpen
+	const actionName = 'Edit with ' + OC.getCapabilities().richdocuments.productName
+	const actionDisplayName = t('richdocuments', 'Edit with {productName}', { productName: OC.getCapabilities().richdocuments.productName }, undefined, { escape: false })
+
+	for (const mime of supportedMimes) {
+		const action = {
+			name: actionName,
+			mime,
+			permissions: OC.PERMISSION_READ,
+			iconClass: 'icon-richdocuments',
+			displayName: actionDisplayName,
+			actionHandler: (fileName, context) => {
+				OCA.Viewer.openWith('richdocuments', {
+					path: context.fileInfoModel.getFullPath()
+				})
+			}
+		}
+
+		OCA.Files.fileActions.registerAction(action)
+	}
+}