Implementing document anchoring/bookmarking in embedded Collabora Online

Development
1

Hi everyone, I’m working on a document bookmarking feature where users can save references to specific content in embedded Collabora Online documents. The feature needs to work with PDF, DOCX, XLSX, and PPTX files in strict read-only mode. I have text search and highlighting working, but the viewport doesn’t automatically scroll to show the highlighted content.

Current working solution

Text search and highlighting works using postMessage

function findAndHighlightText(searchText) {
    const iframe = document.getElementById('collabora-iframe');
    iframe.contentWindow.postMessage({
        MessageId: 'Action_Find',
        Values: {
            SearchItem: {
                SearchString: { type: 'string', value: searchText },
                Backward: { type: 'boolean', value: false },
                FindAll: { type: 'boolean', value: false }
            }
        }
    }, '*');
}

Current behavior: Text gets found and highlighted in yellow, but Collabora doesn’t scroll to show it

The problem

I have the coordinates where the text was originally located:

const originalCoordinates = { x: 1006, y: 1296 };

But I can’t get Collabora to scroll to those coordinates programmatically.

What I’ve tried (all failed)

PostMessage scroll commands - no API available

// These MessageId types don't seem to exist
iframe.contentWindow.postMessage({
    MessageId: 'Action_ScrollTo',    // Not valid
    Values: { x: 1006, y: 1296 }
}, '*');

iframe.contentWindow.postMessage({
    MessageId: 'UI_ScrollToPosition', // Not valid  
    Values: { x: 1006, y: 1296 }
}, '*');

UNO commands - limited positioning support

// These don't provide viewport control
iframe.contentWindow.postMessage({
    MessageId: 'uno:.uno:GoToPage',
    Values: { Page: 1 }
}, '*');

Workarounds that partially help

1. Document reload with search parameters

function reloadWithSearch(searchText) {
    const iframe = document.getElementById('collabora-iframe');
    const url = new URL(iframe.src);
    url.searchParams.set('search', searchText);
    url.searchParams.set('highlight', 'true');
    iframe.src = url.toString();
    
    // Follow up with search command after reload
    setTimeout(() => {
        findAndHighlightText(searchText);
    }, 3000);
}

This doesn’t actually work reliably - the reload approach was something I hoped would work but it doesn’t provide consistent viewport positioning. Collabora loads the document but doesn’t automatically scroll to highlighted search results.

2. Multiple search strategies

function enhancedSearch(searchText) {
    // Try regular find
    findAndHighlightText(searchText);
    
    // Try find with replace dialog (sometimes scrolls better)
    setTimeout(() => {
        iframe.contentWindow.postMessage({
            MessageId: 'Action_FindReplace',
            Values: {
                SearchItem: {
                    SearchString: { type: 'string', value: searchText }
                }
            }
        }, '*');
    }, 500);
}

Questions

  1. Is there a postMessage command for viewport scrolling that I’m missing from the documentation?

  2. Are there URL parameters that control initial scroll position when loading a document?

  3. Can I simulate keyboard shortcuts like Ctrl+F to open Collabora’s native find dialog?

  4. Is this a known limitation with any planned fixes or workarounds?

Environment details

  • Collabora CODE in Docker

  • iframe embedding with postMessage API

  • WOPI host for document serving

  • Strict read-only document mode (no modifications allowed)

  • Target formats: PDF, DOCX, XLSX, PPTX

Has anyone solved this viewport positioning challenge with embedded Collabora?