Cannot focus on input element inside iframe when the editor has focus.

[tomoam]

Describe the problem

Cannot focus on input element inside iframe when the editor has focus.

• Reproduction
  1. visit https://learn.svelte.dev/tutorial/named-form-actions
  2. click the editor
  3. click the input element in iframe

focus_issue_480p.mov

This is probably related to #161.
I suppose the intent of #161 is to consider pointerdown event as a human operation. However, events that occur inside iframe cannot be handled from outside iframe.

learn.svelte.dev/src/routes/tutorial/[slug]/Editor.svelte

Lines 243 to 249 in 8d0376c

	<svelte:window
	on:pointerdown={(e) => {
	if (!container.contains(/** @type {HTMLElement} */ (e.target))) {
	preserve_focus = false;
	}
	}}
	/>

learn.svelte.dev/src/routes/tutorial/[slug]/Editor.svelte

Lines 266 to 272 in 8d0376c

	on:focusout={() => {
	if (preserve_focus) {
	setTimeout(() => {
	instance?.editor.focus();
	}, 0);
	}
	}}

Describe the proposed solution

when body element inside iframe gets focus, set focus on the editor. (using postMessage)

https://github.com/tomoam/learn.svelte.dev/blob/e291cb8c0d08f011d358427f7990fe7f2e6257d3/content/tutorial/common/src/__client.js#L93-L106

https://github.com/tomoam/learn.svelte.dev/blob/e291cb8c0d08f011d358427f7990fe7f2e6257d3/src/routes/tutorial/%5Bslug%5D/Editor.svelte#L236-L242