Expose host viewport info for iframe apps to support stickyToolbarOffset
Problem
I am building a custom app in LOCATION_ENTRY_FIELD and using RichTextEditor from @contentful/field-editor-rich-text.
I want to keep the toolbar visible when the field iframe is partially scrolled out of view in the Entry Editor.
stickyToolbarOffset looks like the right API for this, but from inside the app iframe I cannot reliably know:
- how far the iframe is above the host viewport
- the host sticky header offset
- the current visible position of the iframe in the Entry Editor
Because of that, I cannot calculate the correct stickyToolbarOffset.
I also tried using IntersectionObserver to calculate the offset, but that did not work reliably because the app runs inside an iframe.
Expected
Some SDK API to expose host viewport geometry to iframe apps, for example:
sdk.window.getHostViewportInfo()
sdk.window.onHostViewportChanged(cb)
or even higher level:
sdk.window.getRecommendedStickyOffset()
sdk.window.onRecommendedStickyOffsetChanged(cb)
Current Workaround
The only reliable workaround I found is setting a fixed iframe height and letting the editor scroll inside the iframe, but the user experience is not as good as the native implementation.
Expose host viewport info for iframe apps to support stickyToolbarOffset
Problem
I am building a custom app in
LOCATION_ENTRY_FIELDand usingRichTextEditorfrom@contentful/field-editor-rich-text.I want to keep the toolbar visible when the field iframe is partially scrolled out of view in the Entry Editor.
stickyToolbarOffsetlooks like the right API for this, but from inside the app iframe I cannot reliably know:Because of that, I cannot calculate the correct
stickyToolbarOffset.I also tried using
IntersectionObserverto calculate the offset, but that did not work reliably because the app runs inside an iframe.Expected
Some SDK API to expose host viewport geometry to iframe apps, for example:
or even higher level:
Current Workaround
The only reliable workaround I found is setting a fixed iframe height and letting the editor scroll inside the iframe, but the user experience is not as good as the native implementation.