diff --git a/src/services/Viewer.js b/src/services/Viewer.js
index 993ebb35a..48a7da6f5 100644
--- a/src/services/Viewer.js
+++ b/src/services/Viewer.js
@@ -24,6 +24,19 @@ import Images from '../models/images.js'
 import Videos from '../models/videos.js'
 import Audios from '../models/audios.js'
 
+/**
+ * Handler type definition
+ *
+ * @typedef {object} Handler
+ * @property {string} id unique identifier for the handler
+ * @property {string[]} mimes list of mime types that are supported for opening
+ * @property {object} component Vue component to render the file
+ * @property {string} group group identifier to combine for navigating to the next/previous files
+ * @property {?string} theme viewer modal theme (one of 'dark', 'light', 'default')
+ * @property {boolean} sourceSupport Indicate support for opening a source URL,
+ *   used for version preview and opening files from other sources (e.g. mail attachments)
+ */
+
 /**
  * File info type definition
  *
@@ -41,9 +54,11 @@ export default class Viewer {
 
 	_state
 	_mimetypes
+	_mimetypesSource
 
 	constructor() {
 		this._mimetypes = []
+		this._mimetypesSource = []
 		this._state = {}
 		this._state.file = ''
 		this._state.fileInfo = null
@@ -72,6 +87,7 @@ export default class Viewer {
 	 *
 	 * @readonly
 	 * @memberof Viewer
+	 * @return {Handler[]}
 	 */
 	get availableHandlers() {
 		return this._state.handlers
@@ -81,11 +97,14 @@ export default class Viewer {
 	 * Register a new handler
 	 *
 	 * @memberof Viewer
-	 * @param {object} handler a new unregistered handler
+	 * @param {Handler} handler a new unregistered handler
 	 */
 	registerHandler(handler) {
 		this._state.handlers.push(handler)
 		this._mimetypes.push.apply(this._mimetypes, handler.mimes)
+		if (handler?.sourceSupport === true) {
+			this._mimetypesSource.push.apply(this._mimetypesSource, handler.mimes)
+		}
 	}
 
 	/**
@@ -158,6 +177,16 @@ export default class Viewer {
 		return this._mimetypes
 	}
 
+	/**
+	 * Get the supported mimetypes that can be opened with the viewer from a source URL
+	 *
+	 * @memberof Viewer
+	 * @return {Array} list of mimetype strings that the viewer can open from a source URL
+	 */
+	get mimetypesSource() {
+		return this._mimetypesSource
+	}
+
 	/**
 	 * Return the method provided to fetch more results
 	 *
@@ -302,6 +331,13 @@ export default class Viewer {
 		this.open(options)
 	}
 
+	/**
+	 * Open the viewer with two files side by side
+	 *
+	 * @memberof Viewer
+	 * @param {Fileinfo} fileInfo current file
+	 * @param {Fileinfo} compareFileInfo older file to compare
+	 */
 	compare(fileInfo, compareFileInfo) {
 		this.open({
 			fileInfo,