Fix: Refactor Collabora iframe setup for improved readability and maintainability

This commit is contained in:
Leon Bösche
2026-01-12 10:26:25 +01:00
parent 8e06e7e17d
commit ef60983534

View File

@@ -406,10 +406,11 @@ class _DocumentViewerModalState extends State<DocumentViewerModal> {
// Build Collabora Online viewer URL with WOPISrc
// The WOPISrc must be URL-encoded and kept encoded
// We use a double-encoding approach: encodeComponent keeps it encoded through iframe.src
final baseUrl = 'https://of.b0esche.cloud/loleaflet/dist/loleaflet.html';
final collaboraUrl = Uri.parse(baseUrl)
.replace(queryParameters: {'WOPISrc': wopiSession.wopisrc})
.toString();
final baseUrl =
'https://of.b0esche.cloud/loleaflet/dist/loleaflet.html';
final collaboraUrl = Uri.parse(
baseUrl,
).replace(queryParameters: {'WOPISrc': wopiSession.wopisrc}).toString();
// Use WebView to display Collabora Online
return _buildWebView(collaboraUrl);
@@ -461,64 +462,61 @@ class _DocumentViewerModalState extends State<DocumentViewerModal> {
// Create an iframe and submit a form to load the document
const String viewType = 'collabora-form';
ui.platformViewRegistry.registerViewFactory(
viewType,
(int viewId) {
// Extract the WOPISrc from the URL
final uri = Uri.parse(collaboraUrl);
final wopisrc = uri.queryParameters['WOPISrc'] ?? '';
ui.platformViewRegistry.registerViewFactory(viewType, (int viewId) {
// Extract the WOPISrc from the URL
final uri = Uri.parse(collaboraUrl);
final wopisrc = uri.queryParameters['WOPISrc'] ?? '';
// Create a container for the form and iframe
final container = html.DivElement()
..style.width = '100%'
..style.height = '100%'
..style.margin = '0'
..style.padding = '0'
..style.overflow = 'hidden';
// Create a container for the form and iframe
final container = html.DivElement()
..style.width = '100%'
..style.height = '100%'
..style.margin = '0'
..style.padding = '0'
..style.overflow = 'hidden';
// Create the iframe first
final iframe = html.IFrameElement()
..name = 'collabora-iframe'
..style.border = 'none'
..style.width = '100%'
..style.height = '100%'
..style.margin = '0'
..style.padding = '0'
..setAttribute(
'allow',
'microphone; camera; usb; autoplay; clipboard-read; clipboard-write',
)
..setAttribute(
'sandbox',
'allow-scripts allow-popups allow-forms allow-pointer-lock allow-presentation allow-modals allow-downloads allow-popups-to-escape-sandbox',
);
// Create the iframe first
final iframe = html.IFrameElement()
..name = 'collabora-iframe'
..style.border = 'none'
..style.width = '100%'
..style.height = '100%'
..style.margin = '0'
..style.padding = '0'
..setAttribute(
'allow',
'microphone; camera; usb; autoplay; clipboard-read; clipboard-write',
)
..setAttribute(
'sandbox',
'allow-scripts allow-popups allow-forms allow-pointer-lock allow-presentation allow-modals allow-downloads allow-popups-to-escape-sandbox',
);
container.append(iframe);
container.append(iframe);
// Create a hidden form that will POST to Collabora
final form = html.FormElement()
..method = 'POST'
..action = 'https://of.b0esche.cloud/loleaflet/dist/loleaflet.html'
..target = 'collabora-iframe'
..style.display = 'none';
// Create a hidden form that will POST to Collabora
final form = html.FormElement()
..method = 'POST'
..action = 'https://of.b0esche.cloud/loleaflet/dist/loleaflet.html'
..target = 'collabora-iframe'
..style.display = 'none';
// Add WOPISrc as a hidden input
final wopisrcInput = html.InputElement()
..type = 'hidden'
..name = 'WOPISrc'
..value = wopisrc;
// Add WOPISrc as a hidden input
final wopisrcInput = html.InputElement()
..type = 'hidden'
..name = 'WOPISrc'
..value = wopisrc;
form.append(wopisrcInput);
container.append(form);
form.append(wopisrcInput);
container.append(form);
// Use a timer to submit the form after the iframe is fully loaded
Future.delayed(const Duration(milliseconds: 100), () {
form.submit();
});
// Use a timer to submit the form after the iframe is fully loaded
Future.delayed(const Duration(milliseconds: 100), () {
form.submit();
});
return container;
},
);
return container;
});
return HtmlElementView(viewType: viewType);
}