Function MergeComp

app/src/components/diffCss.tsx:37–69

(props)

	before: string
	after: string
}> = (props) => {
	let ref!: HTMLDivElement
	onMount(() => {
		const [theme] = useThemeContext()
		const view = new MergeView({
			parent: ref,
			a: createConfig(props.before, theme()),
			b: createConfig(props.after, theme()),
		})
		createEffect(
			on(
				// Only run this effect when the theme changes
				theme,
				(t) => {
					view.a.setState(EditorState.create(createConfig(props.before, t)))
					view.b.setState(EditorState.create(createConfig(props.after, t)))
				},
				{ defer: true },
			),
		)
		onCleanup(() => {
			view.destroy()
		})
	})
	return (
		<fieldset class='border-black border p-2'>
			<legend>
				<span class='p-2 px-4 font-bold'>CSS</span>
			</legend>
			<div class='max-h-[500px] resize-y overflow-auto' ref={ref} />
		</fieldset>
	)
}

function createConfig(doc: string, theme: 'light' | 'dark') {
	const maybeDark = theme === 'dark' ? [oneDark] : []