beacon_live_admin icon indicating copy to clipboard operation
beacon_live_admin copied to clipboard

Visual Editor: disable interacting with iframes

Open cbroeren opened this issue 6 months ago • 0 comments

Issue #196: Embedded video elements should display attrs when selected

Description

Embedded video elements couldn't be selected, because the iframe that is being used to render this embedded content is catching all cursor events. This will apply to basically any embedded content, and for a lot of reasons we don't want the user to interact with the iframe while in visual editing mode. Although being able to test a video to check whether it's the right one, we decided it might be best to disable any interaction because we never know what content is being rendered in the embedded element.

Changes

Disable interacting with iframes, so selection for the element is being captured

Testing

Make sure your app has a component which embed external content, like a YouTube video.

  1. Go to edit a page (and if it doesn't already have one, add the embedded component/section)
  2. Verify: you are able to selected the embedded element by clicking
  3. Verify: the embedded element is selected and shows the expected selection state
  4. Verify: you're not able to interact with the embedded content, like start playing the video

Screenshots

Before After
196-select-embedded-before 196-select-embedded-after
It either plays/stops the video or opens it. Not being able to select the element. Cannot interact with the embedded content. Element can be selected

cbroeren avatar Aug 09 '24 22:08 cbroeren