chore: reimplement script hover preview

Author: Mint de Wit

packages/webui/src/client/ui/PreviewPopUp/PreviewPopUp.scss

@@ -17,11 +17,13 @@
 
 	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
 
+	z-index: 9999;
+
 	&--large {
 		width: 480px;
 	}
 
-	&-small {
+	&--small {
 		width: 320px;
 	}
 
@@ -32,6 +34,11 @@
 
 .preview-popUp__preview {
 	grid-area: 'preview';
+
+	.script {
+		padding: 0.3em;
+		font-style: italic;
+	}
 }
 
 .preview-popUp__controls {

packages/webui/src/client/ui/PreviewPopUp/PreviewPopUp.tsx

@@ -60,12 +60,28 @@ export const PreviewPopUp = React.forwardRef<
 		}),
 		[padding]
 	)
-	const { styles, attributes, update } = usePopper(anchor, popperEl, popperOptions)
+	const virtualElement = useRef<VirtualElement>({
+		getBoundingClientRect: generateGetBoundingClientRect(),
+	})
+	const { styles, attributes, update } = usePopper(virtualElement.current, popperEl, popperOptions)
 
 	const updateRef = useRef(update)
 
 	useEffect(() => {
 		updateRef.current = update
+
+		const listener = ({ clientX: x }: MouseEvent) => {
+			virtualElement.current.getBoundingClientRect = generateGetBoundingClientRect(
+				x,
+				anchor?.getBoundingClientRect().y ?? 0
+			)
+			if (update) update()
+		}
+		document.addEventListener('mousemove', listener)
+
+		return () => {
+			document.removeEventListener('mousemove', listener)
+		}
 	}, [update])
 
 	useImperativeHandle(
@@ -111,3 +127,17 @@ export const PreviewPopUp = React.forwardRef<
 export type PreviewPopUpHandle = {
 	readonly update: () => void
 }
+
+function generateGetBoundingClientRect(x = 0, y = 0) {
+	return () => ({
+		width: 0,
+		height: 0,
+		x: x,
+		y: y,
+		top: y,
+		right: x,
+		bottom: y,
+		left: x,
+		toJSON: () => '',
+	})
+}

packages/webui/src/client/ui/PreviewPopUp/PreviewPopUpContent.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { PreviewContent } from './PreviewPopUpContext'
+
+interface PreviewPopUpContentProps {
+	content: PreviewContent
+}
+
+export function PreviewPopUpContent({ content }: PreviewPopUpContentProps): React.ReactElement {
+	switch (content.type) {
+		case 'text':
+			return <ScriptPreviewElement content={content} />
+		default:
+			return <></>
+	}
+}
+
+interface ScriptPreviewProps {
+	content: {
+		type: 'text'
+		content: string
+	}
+}
+export function ScriptPreviewElement({ content }: ScriptPreviewProps): React.ReactElement {
+	return <div className="script">{content.content}</div>
+}

packages/webui/src/client/ui/PreviewPopUp/PreviewPopUpContext.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react'
 import { PreviewPopUp, PreviewPopUpHandle } from './PreviewPopUp'
 import { Padding, Placement } from '@popperjs/core'
+import { PreviewPopUpContent } from './PreviewPopUpContent'
 
 type VirtualElement = {
 	getBoundingClientRect: () => DOMRect
@@ -32,7 +33,7 @@ export type PreviewContent =
 			content: unknown
 	  }
 
-interface IPreviewPopUpSession {
+export interface IPreviewPopUpSession {
 	/**
 	 * Update the open preview with new content or modify the content already being previewed, such as change current showing
 	 * time in the video, etc.
@@ -77,7 +78,7 @@ interface IPreviewPopUpContext {
 	): IPreviewPopUpSession
 }
 
-const PreviewPopUpContext = React.createContext<IPreviewPopUpContext>({
+export const PreviewPopUpContext = React.createContext<IPreviewPopUpContext>({
 	requestPreview: () => {
 		throw new Error('Preview PopUp needs to set up with `PreviewPopUpContextProvider`.')
 	},
@@ -101,7 +102,7 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
 	const previewRef = useRef<PreviewPopUpHandle>(null)
 
 	const [previewSession, setPreviewSession] = useState<PreviewSession | null>(null)
-	const [_previewContent, setPreviewContent] = useState<PreviewContent | null>(null)
+	const [previewContent, setPreviewContent] = useState<PreviewContent | null>(null)
 
 	const context: IPreviewPopUpContext = {
 		requestPreview: (anchor, content, opts) => {
@@ -143,7 +144,9 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
 					contentInfo={previewSession.contentInfo}
 					controls={previewSession.controls}
 					warnings={previewSession.warnings}
-				/>
+				>
+					{previewContent && <PreviewPopUpContent content={previewContent} />}
+				</PreviewPopUp>
 			)}
 		</PreviewPopUpContext.Provider>
 	)