Support Text Preview

src/app.tsx

@@ -16,10 +16,12 @@ import { Version, asVersion } from './php-wasm/php';
 import SelectPHP from './select';
 import { Editor } from './editor';
 import { SunIcon } from '@chakra-ui/icons';
+import {Format, SelectFormat} from "./format";
 
 type UrlState = {
 	v: Version;
 	c: string;
+	f: Format;
 };
 
 export default function App() {
@@ -32,25 +34,30 @@ export default function App() {
 	const currentVersion =
 		asVersion(searchParams.get('v')) ?? '8.2';
 
+	const currentFormat = searchParams.get('f') as Format ?? "html";
+
 	function updateVersion(v: Version) {
 		const currentState = history.state as UrlState | null;
 		const code = lzstring.decompressFromEncodedURIComponent(
 			currentState?.c ?? initCode
 		);
+		const format = currentState?.f ?? currentFormat;
 		if (code == null) {
 			return;
 		}
 		setSearchParams({
 			v: v,
 			c: lzstring.compressToEncodedURIComponent(code),
+			f: format,
 		});
-		setHistory(code, v);
+		setHistory(code, v, format);
 	}
 
-	function setHistory(code: string, version: Version) {
+	function setHistory(code: string, version: Version, format: Format) {
 		const state: UrlState = {
 			c: lzstring.compressToEncodedURIComponent(code),
 			v: version,
+			f: format,
 		};
 		const urlSearchParam = new URLSearchParams(state).toString();
 		// Only push to history.
@@ -61,10 +68,28 @@ export default function App() {
 	useEffect(
 		function () {
 			updateVersion(currentVersion);
+			updateFormat(currentFormat)
 		},
-		[currentVersion]
+		[currentVersion, currentFormat]
 	);
 
+	function updateFormat(format: Format) {
+		const currentState = history.state as UrlState | null;
+		const code = lzstring.decompressFromEncodedURIComponent(
+			currentState?.c ?? initCode
+		);
+		const version = currentState?.v ?? currentVersion;
+		if (code == null) {
+			return;
+		}
+		setSearchParams({
+			v: version,
+			c: lzstring.compressToEncodedURIComponent(code),
+			f: format,
+		});
+		setHistory(code, version, format);
+	}
+
 	return (
 		<main style={{ margin: '16px' }}>
 			<Flex marginTop="8px" marginBottom="8px" gap="16px">
@@ -119,13 +144,15 @@ export default function App() {
 						onChange={updateVersion}
 						version={currentVersion}
 					/>
+					<SelectFormat format={currentFormat} updateFormat={updateFormat}/>
 				</Flex>
 			</Flex>
 			<Editor
 				initCode={initCode}
 				version={currentVersion}
+				format={currentFormat}
 				onChangeCode={function (code: string) {
-					setHistory(code, currentVersion);
+					setHistory(code, currentVersion, currentFormat);
 				}}
 			/>
 		</main>

src/editor.tsx

@@ -10,6 +10,7 @@ import { Box, Center, Flex, Spinner } from '@chakra-ui/react';
 import type { ReactElement } from 'react';
 import * as React from 'react';
 import MonacoEditor from '@monaco-editor/react';
+import {Format} from "./format";
 
 function LoadSpinner() {
 	return (
@@ -41,7 +42,7 @@ function PhpEditor() {
 	);
 }
 
-function PhpPreview(params: { version: Version }) {
+function PhpPreview(params: { version: Version, format: Format }) {
 	const { sandpack } = useSandpack();
 	const { files, activeFile } = sandpack;
 	const code = files[activeFile].code;
@@ -50,6 +51,9 @@ function PhpPreview(params: { version: Version }) {
 	if (loading) {
 		return <LoadSpinner />;
 	}
+	if (params.format === "console") {
+		return <pre style={{whiteSpace: "pre-wrap", overflow: "scroll", width: "100%", height: "100%"}}>{result}</pre>;
+	}
 
 	return <iframe srcDoc={result} height="100%" width="100%" sandbox="" />;
 }
@@ -76,7 +80,7 @@ function EditorLayout(params: { Editor: ReactElement; Preview: ReactElement }) {
 					as={SandpackLayout}
 					flexDirection={{ base: 'column', lg: 'row' }}
 					height={{ base: '50%', lg: '100%' }}
-					width="100%"
+					width={{ base: '100%', lg: '50%' }}
 				>
 					<Box
 						as="span"
@@ -90,8 +94,8 @@ function EditorLayout(params: { Editor: ReactElement; Preview: ReactElement }) {
 					</Box>
 				</Box>
 				<Box
-					width="100%"
 					height={{ base: '50%', lg: '100%' }}
+					width={{ base: '100%', lg: '50%' }}
 					style={{
 						backgroundColor: 'white',
 					}}
@@ -106,6 +110,7 @@ function EditorLayout(params: { Editor: ReactElement; Preview: ReactElement }) {
 export function Editor(params: {
 	initCode: string;
 	version: Version;
+	format: Format;
 	onChangeCode: (code: string) => void;
 }) {
 	return (
@@ -119,7 +124,7 @@ export function Editor(params: {
 		>
 			<EditorLayout
 				Editor={<PhpEditor />}
-				Preview={<PhpPreview version={params.version} />}
+				Preview={<PhpPreview version={params.version} format={params.format} />}
 			/>
 			<PhpCodeCallback onChangeCode={params.onChangeCode} />
 		</SandpackProvider>

src/format.tsx

@@ -0,0 +1,27 @@
+import {Checkbox} from "@chakra-ui/react";
+import * as React from 'react';
+import {useState} from "react";
+
+export type Format = "html" | "console";
+
+
+export function SelectFormat(
+    {
+        format,
+        updateFormat,
+    }: {
+        format: Format;
+        updateFormat: (f: Format) => void;
+    }
+) {
+    const [isHtml, setIsHtml] = useState<boolean>(format === "html");
+
+    return <Checkbox
+        isChecked={isHtml}
+        onChange={(e) => {
+            updateFormat(e.target.checked ? "html" : "console");
+            setIsHtml(e.target.checked);
+        }}>
+        HTML Preview
+    </Checkbox>
+}