1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

/**
 * PreviewPane shows a file from the workspace: rendered Markdown or AsciiDoc
 * (with a Rendered/Source toggle), images at natural size, draw.io diagrams
 * through the diagrams.net viewer (with the XML as Source), and
 * syntax-highlighted read-only code for everything else.
 *
 * @example
 * <PreviewPane path="README.md" />
 */

import { useEffect, useState } from "react";
import { readFile } from "../api";
import { type DocumentKind, kindForPath, languageForPath } from "../lang";
import { openEditor } from "../workspace";
import { AsciiDocView } from "./AsciiDocView";
import { CodeView } from "./CodeView";
import { DrawioView } from "./DrawioView";
import { ImageView } from "./ImageView";
import { Markdown } from "./Markdown";

type PreviewMode = "rendered" | "source";

/** Kinds with both a rendered form and a source form. */
const toggleableKinds: ReadonlySet<DocumentKind> = new Set([
	"markdown",
	"asciidoc",
	"drawio",
]);

/**
 * usePreviewFile loads the file behind path (images excepted: the browser
 * fetches their bytes itself) and resets the view mode whenever the path
 * changes. `content` stays null while loading.
 */
function usePreviewFile(path: string | null) {
	const [content, setContent] = useState<string | null>(null);
	const [error, setError] = useState<string | null>(null);
	const [mode, setMode] = useState<PreviewMode>("rendered");

	useEffect(() => {
		if (!path) {
			return;
		}
		setContent(null);
		setError(null);
		setMode("rendered");
		if (kindForPath(path) === "image") {
			return;
		}
		readFile(path)
			.then((file) => setContent(file.content))
			.catch((cause: Error) => setError(cause.message));
	}, [path]);

	return { content, error, mode, setMode };
}

export function PreviewPane({ path }: { path: string | null }) {
	const { content, error, mode, setMode } = usePreviewFile(path);
	const kind = path ? kindForPath(path) : "code";

	if (!path) {
		return (
			<p className="pane-empty">Select a file in the tree to preview it.</p>
		);
	}
	if (error) {
		return <p className="pane-error">{error}</p>;
	}
	if (kind !== "image" && content === null) {
		return <p className="pane-empty">loading…</p>;
	}

	const toggleable = toggleableKinds.has(kind);

	return (
		<div className="preview">
			<div className="pane-header">
				<span className="pane-path" title={path}>
					{path.split("/").pop()}
				</span>
				{toggleable && (
					<div className="pane-modes">
						<ModeButton current={mode} mode="rendered" onSelect={setMode} />
						<ModeButton current={mode} mode="source" onSelect={setMode} />
					</div>
				)}
				{kind !== "image" && (
					<button
						type="button"
						className="pane-action"
						onClick={() => openEditor(path)}
					>
						Edit
					</button>
				)}
			</div>
			<div className="preview-body">
				<PreviewContent
					path={path}
					kind={kind}
					content={content ?? ""}
					mode={toggleable ? mode : "rendered"}
				/>
			</div>
		</div>
	);
}

function ModeButton({
	current,
	mode,
	onSelect,
}: {
	current: PreviewMode;
	mode: PreviewMode;
	onSelect: (mode: PreviewMode) => void;
}) {
	return (
		<button
			type="button"
			className={`pane-mode${current === mode ? " pane-mode-active" : ""}`}
			onClick={() => onSelect(mode)}
		>
			{mode === "rendered" ? "Rendered" : "Source"}
		</button>
	);
}

function PreviewContent({
	path,
	kind,
	content,
	mode,
}: {
	path: string;
	kind: DocumentKind;
	content: string;
	mode: PreviewMode;
}) {
	if (kind === "image") {
		return <ImageView path={path} />;
	}
	if (mode === "source" || kind === "code") {
		return <CodeView content={content} language={languageForPath(path)} />;
	}
	if (kind === "drawio") {
		return <DrawioView xml={content} />;
	}
	return (
		<div className="preview-rendered">
			{kind === "markdown" ? (
				<Markdown text={content} />
			) : (
				<AsciiDocView content={content} />
			)}
		</div>
	);
}