A small refresh button in the preview tab

[noam-honig]

Is your feature request related to a problem?

There are cases where I want my student to be able to manually hit refresh on the preview window to reload it - this is espcially useful with the new pathname option for previews.

Describe the solution you'd like.

A small refresh button :) it can be optional and determined for each preview - in the previews config

Describe alternatives you've considered.

I created my own "virutal" tabs and added my own refresh buttons, but it's not as cool

Additional context

No response

[AriPerkkio]

Cool idea!

Here's some quick testing with just re-setting the iframe.src. This seems to work fine on Chromium-based browser. We'll need to check other browsers as well.

  function onRefresh() {
    if (iframe.ref) {
      iframe.ref.src = iframe.ref.src;
    }
  }

  ...

  return <button onClick={onRefresh}>

tutorialkit/packages/components/react/src/Panels/PreviewPanel.tsx

Lines 148 to 193 in 9c1b55a

	function Preview({ preview, iframe, previewCount, first, last, toggleTerminal }: PreviewProps) {
	const previewContainerRef = useRef<HTMLDivElement>(null);
	useEffect(() => {
	if (!iframe.ref) {
	return;
	}
	iframe.container = previewContainerRef.current!;
	if (preview.url) {
	iframe.ref.src = preview.url;
	}
	}, [preview.url, iframe.ref]);
	return (
	<div className="panel-container">
	<div
	className={classNames('panel-header border-b border-tk-elements-app-borderColor justify-between', {
	'border-l border-tk-elements-app-borderColor': !first,
	})}
	>
	<div className="panel-title">
	<div className="panel-icon i-ph-globe-duotone"></div>
	<span className="text-sm truncate">{previewTitle(preview, previewCount)}</span>
	</div>
	{last && (
	<button
	className="panel-button px-2 py-0.5 -mr-1 -my-1"
	title="Toggle Terminal"
	onClick={() => toggleTerminal?.()}
	>
	<div className="panel-button-icon i-ph-terminal-window-duotone"></div>
	<span className="text-sm">Toggle Terminal</span>
	</button>
	)}
	</div>
	<div
	ref={previewContainerRef}
	className={classNames('h-full w-full flex justify-center items-center', {
	'border-l border-tk-elements-previews-borderColor': !first,
	})}
	/>
	</div>
	);
	}

preview-refresh.webm