feat(common): full viewport height in modal mode

[johannes-lindgren]

Field plugins will be using the full height of the modal window.

Issue: EXT-1806

When the field plugins enters modal mode, the height is set to auto and the autoResizer is disabled.

This pull request refactors createAutoResizer. Instead of sending the messages directly in the ResizeObserver, the code is split:

• createHeightChangeListener.ts: only listens to resize events and calls a callback function.
• createPluginActions now returns a function to call when the height changes. This is better, because now createPluginActions handles all calls to postToContainer.
• The onHeightChange function is passed as argument to createHeightChangeListener: https://github.com/storyblok/field-plugin/pull/215/files#diff-c70e7f93436d0cabe4d4709c27b1c3fe56f859b12fbd45afd70ee02e38d2c295R63

Why?

In modal mode, the scroll should be visible within the field plugin, so that we can position elements at the top and bottom of the modal window. This is important for

• The close modal button
• Pagination, where the pagnation always should be visible, and should not be part of the scrolled content.
• Actions that appear in the header and footer (for example "add item" in the Bynder plugin).

How to test?

You don't have to review the demo app in detail, because it is only used by us developers. If something is broken and slips past the review, there're no worries.

See https://github.com/storyblok/storyfront/pull/4225. If merged, you can test on production. If not, you must check out the branch release/church from Storyfront and run it in dev mode.

Then open up the demo app here. See how the height changes automatically in non-modal mode as you click on the increment button, while in modal mode, the height is fixed:

Then test in the sandbox, which should have corresponding changes.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
plugin-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 22, 2023 0:55am

[johannes-lindgren]

@eunjae-lee if you could gloss over this pull request and especially focus at:

• createPluginActions: https://github.com/storyblok/field-plugin/pull/215/files#diff-e62bdc8d2bfaac8dcd9c0ec5f420b868131bc32f10c4be5743ba3e5e28ebe938
• createHeightChangeListener (formerly createAutoResizer).

Does it seem reasonable?

Here are the changes that will be made to Storyfront: https://github.com/storyblok/storyfront/pull/4024/files

[eunjae-lee]

@johannes-lindgren thanks for the work!

// createPluginActions.ts
  const onHeightChange = (height: number) => {
    if (state.isModalOpen) {
      return
    }
    postToContainer(heightChangeMessage(uid, `${height}px`))
  }

...

        if (isModalOpen) {
          postToContainer(heightChangeMessage(uid, 'auto'))
        }

I feel like this two parts are a bit too magical. That might not be the behavior users would want. They may want infinitely growing iframe height. With this change, there's no way to do that. Maybe we detach this coupling, and let user set auto as height if they want. What do you think?

[johannes-lindgren]

@eunjae-lee how would we decouple it? How would the user set auto as the height? At the moment, we don't expose any function that lets the user manually change the height.

I agree it's not the prettiest solution. I experimented with some different ways and couldn't find something that I was delighted with.

What would be a use case when the user doesn't want to be in control of the scroll? (i.e. scroll within the app instead of around the iframe element).

---

If I would design the plugin API from scratch, I'd handle this logic in Storyfront's container instead. The plugin would send messages to the Visual Editor whenever the height changed, and Storyfront would determine whether to use that value in the iframe's height. If the plugin is in modal mode, the messages would be ignored.

There may be another possibility; in the ModalChangeMessage, add a new property:

{
  status: boolean // isModalOpen
  fullHeight: boolean
}

If the modal was opened with fullHeight: true, the Visual Editor will ignore any HeightChangeMessage as long as the modal is open, and instead use auto as the height.

[eunjae-lee]

At the moment, we don't expose any function that lets the user manually change the height.

Thanks for the reminder. I completely forgot about this part. Then this approach makes sense to me.

[johannes-lindgren]

Including you here as well, @BibiSebi, for your perspective too 🙂

[johannes-lindgren]

I made an update: instead of letting the field plugin set the height to auto, the field plugin will simply specify to the visual editor that it wants to occupy the full modal window:

This is the new heigthChange message:

{
  status: boolean // isModalOpen
  fullHeight: true
}

The field plugin can keep sending heightChange messages whenever the height changes, but in modal mode, the visual editor will ignore those messages.

Question:

Should we include the fullHeight property in the loaded message instead? This is the message that is initially sent to the visual editor. This might make more sense, as we won't switch between fullHeight=true and fullHeight=false. fullHeight will always be set to true for new field plugins. (https://github.com/storyblok/storyfront/pull/4024#discussion_r1284687011)

[eunjae-lee]

Should we include the fullHeight property in the loaded message instead?

I've left the reply over there 🙌🏼

[eunjae-lee]

This is the new heigthChange message:

And you meant, the new modalChange message, right?

[johannes-lindgren]

This is the new heigthChange message:

And you meant, the new modalChange message, right?

Oh yes exactly (toggleModal), I highlighted the wrong message