diff --git a/.gitignore b/.gitignore
index 6f79a45981..5a210bb73e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,6 +23,7 @@ npm-debug.log
 /play.pokemonshowdown.com/js/client-main.js
 /play.pokemonshowdown.com/js/client-core.js
 /play.pokemonshowdown.com/js/client-connection.js
+/play.pokemonshowdown.com/js/miniedit.js
 /play.pokemonshowdown.com/ads.txt
 
 /pokemonshowdown.com/.well-known/
diff --git a/play.pokemonshowdown.com/src/client-main.ts b/play.pokemonshowdown.com/src/client-main.ts
index 29e7da4a0a..cb2c9f9baa 100644
--- a/play.pokemonshowdown.com/src/client-main.ts
+++ b/play.pokemonshowdown.com/src/client-main.ts
@@ -999,7 +999,7 @@ const PS = new class extends PSModel {
 		}
 		this.room.autoDismissNotifications();
 		this.update();
-		if (this.room.onParentEvent) this.room.onParentEvent('focus', undefined);
+		this.room.onParentEvent?.('focus', undefined);
 		return true;
 	}
 	focusLeftRoom() {
diff --git a/play.pokemonshowdown.com/src/miniedit.ts b/play.pokemonshowdown.com/src/miniedit.ts
new file mode 100644
index 0000000000..c62e6f55fd
--- /dev/null
+++ b/play.pokemonshowdown.com/src/miniedit.ts
@@ -0,0 +1,235 @@
+// MiniEdit: ContentEditable-based rich source editor
+
+// True WYSIWYG is really complex, and <textarea> is really limited, but if you
+// have a use-case which is approximately "syntax highlighting", you can achieve
+// that relatively easily.
+
+// On Google, the most common hack for syntax highlighting is to put an invisible
+// <textarea> on top of syntax highlighted text, but this only works if your
+// text is monospace and syntax highlighting doesn't change its metrics. This
+// approach is more flexible and only requires textContent to be preserved.
+
+// Inspired by https://github.com/SjonHortensius/LRTEditor
+// and https://codepen.io/brianmearns/pen/YVjZWw?editors=0010
+
+const MAX_UNDO_HISTORY = 100;
+export type MiniEditPlugin = new (editor: MiniEdit) => unknown;
+export type MiniEditSelection = {start: number, end: number} | null;
+export class MiniEdit {
+	static plugins: MiniEditPlugin[] = [];
+
+	element: HTMLElement;
+
+	/**
+	 * Takes the plaintext `textContent` of the element, and renders it
+	 * in syntax-highlighted form. This must not change the resulting
+	 * `textContent`, because the data needs to flow two ways to
+	 * correctly respond to all the possible ways users can input text.
+	 *
+	 * It should, however, add a trailing `\n` if the text doesn't end
+	 * with one. This is because HTML ignores trailing newlines, so if
+	 * it doesn't already exist and the user types a newline at the end
+	 * of the text, it wouldn't appear.
+	 */
+	// tslint:disable-next-line
+	_setContent: (text: string) => void;
+	pushHistory?: (text: string, selection: MiniEditSelection) => void;
+	onKeyDown = (ev: KeyboardEvent) => {
+		if (ev.keyCode === 13) { // enter
+			this.replaceSelection('\n');
+			ev.preventDefault();
+		}
+	};
+
+	constructor(el: HTMLElement, options: {setContent: MiniEdit['_setContent'], onKeyDown?: (ev: KeyboardEvent) => void}) {
+		this.element = el;
+
+		this._setContent = options.setContent;
+		this.onKeyDown = options.onKeyDown || this.onKeyDown;
+
+		this.element.setAttribute('contentEditable', 'true');
+		this.element.setAttribute('autoComplete', 'off');
+		this.element.setAttribute('spellCheck', 'false');
+		this.element.addEventListener('input', () => {
+			this.reformat();
+		});
+		this.element.addEventListener('keydown', this.onKeyDown);
+
+		// tslint:disable-next-line
+		for (const Plugin of MiniEdit.plugins) new Plugin(this);
+	}
+
+	/** return true from callback for an early return */
+	private traverseText(node: Node, callback: (node: Text) => boolean): boolean {
+		if (node.nodeType === 3) {
+			if (callback(node as Text)) return true;
+		} else {
+			for (let i = 0, len = node.childNodes.length; i < len; ++i) {
+				if (this.traverseText(node.childNodes[i], callback)) return true;
+			}
+		}
+		return false;
+	}
+
+	setValue(text: string, selection?: MiniEditSelection): void {
+		if (selection === undefined) selection = this.getSelection();
+		this._setContent(text);
+
+		this.setSelection(selection);
+		this.pushHistory?.(text, selection);
+	}
+	getValue(): string {
+		let text = this.element.textContent || '';
+		if (text.endsWith('\n')) return text.slice(0, -1);
+		return text;
+	}
+	reformat(selection?: MiniEditSelection): void {
+		this.setValue(this.getValue(), selection);
+	}
+	replaceSelection(text: string): void {
+		const selection = this.getSelection()!;
+		const oldContent = this.getValue();
+		const newText = oldContent.slice(0, selection.start) + text + oldContent.slice(selection.end);
+		this.setValue(newText, {start: selection.start + text.length, end: selection.start + text.length});
+	}
+
+	getSelection(): MiniEditSelection {
+		const sel = window.getSelection()!;
+		let offset = 0;
+		let start = null as number | null;
+		let end = null as number | null;
+
+		if (sel.rangeCount) {
+			const range = sel.getRangeAt(0);
+			this.traverseText(this.element, node => {
+				if (start === null && node === range.startContainer) {
+					start = offset + range.startOffset;
+				}
+
+				if (start !== null && node === range.endContainer) {
+					end = offset + range.endOffset;
+					return true;
+				}
+
+				offset += node.length;
+				return false;
+			});
+		}
+
+		return (start === null || end === null) ? null : {start, end};
+	}
+
+	setSelection(sel: MiniEditSelection): void {
+		if (sel === null) return;
+
+		const range = document.createRange();
+		let offset = 0;
+		let found = false;
+		range.collapse(true);
+
+		if (this.traverseText(this.element, n => {
+			const nextOffset = offset + n.length;
+
+			if (!found && sel.start >= offset && sel.start <= nextOffset) {
+				range.setStart(n, sel.start - offset);
+				found = true;
+			}
+
+			if (found && sel.end >= offset && sel.end <= nextOffset) {
+				range.setEnd(n, sel.end - offset);
+				return true;
+			}
+
+			offset = nextOffset;
+			return false;
+		})) {
+			const selection = window.getSelection()!;
+			selection.removeAllRanges();
+			selection.addRange(range);
+		}
+	}
+	select(): void {
+		this.setSelection({start: 0, end: this.getValue().length});
+	}
+}
+
+export class MiniEditPastePlugin {
+	constructor(editor: MiniEdit) {
+		editor.element.addEventListener('paste', e => {
+			// Manually insert plain-text contents so we keep newlines
+			const text = e.clipboardData!.getData('text/plain');
+			editor.replaceSelection(text);
+			e.preventDefault();
+		});
+	}
+}
+MiniEdit.plugins.push(MiniEditPastePlugin);
+
+// We can't use the native undo/redo feature because browsers just get so
+// confused by our syntax highlighting, so we have to reimplement it.
+// We can intercept ctrl+z and ctrl+y, but we can't intercept the browser's
+// UI so things like Edit -> Undo will simply not work. I am sorry to say
+// that there is no solution and this is just what webdev is like.
+export class MiniEditUndoPlugin {
+	editor: MiniEdit;
+	undoIndex: number | null = null;
+	ignoreInput = false;
+	history: {text: string, selection: MiniEditSelection}[] = [];
+
+	constructor(editor: MiniEdit) {
+		this.editor = editor;
+		this.history.push({text: editor.getValue(), selection: {start: 0, end: 0}});
+
+		this.editor.pushHistory = this.onPushHistory;
+		editor.element.addEventListener('keydown', this.onKeyDown);
+	}
+
+	onPushHistory = (text: string, selection: MiniEditSelection) => {
+		if (this.ignoreInput) {
+			// This change was triggered by undo/redo, don't record it
+			this.ignoreInput = false;
+			return;
+		}
+
+		if (this.undoIndex !== null) {
+			// chop off everything after the current undo index
+			this.history.splice(this.undoIndex + 1);
+			this.undoIndex = null;
+		}
+
+		this.history.push({text, selection});
+
+		if (this.history.length > MAX_UNDO_HISTORY) this.history.shift();
+	};
+
+	onKeyDown = (e: KeyboardEvent) => {
+		// ctrl+z or cmd+z
+		const undoPressed = (e.ctrlKey && e.keyCode === 90) || (e.metaKey && !e.shiftKey && e.keyCode === 90);
+		// ctrl+y or cmd+shift+z
+		const redoPressed = (e.ctrlKey && e.keyCode === 89) || (e.metaKey && e.shiftKey && e.keyCode === 90);
+
+		if (undoPressed) {
+			this.undoIndex ??= this.history.length - 1;
+			this.undoIndex--;
+
+			if (this.undoIndex < 0) { // can't undo further
+				this.undoIndex = 0;
+				return;
+			}
+		} else if (redoPressed && this.undoIndex !== null) {
+			this.undoIndex++;
+
+			if (this.undoIndex > this.history.length - 1) { // can't redo further
+				this.undoIndex = null;
+				return;
+			}
+		} else {
+			return;
+		}
+
+		const {text, selection} = this.history[this.undoIndex];
+		this.ignoreInput = true;
+		this.editor.setValue(text, selection);
+	};
+}
+MiniEdit.plugins.push(MiniEditUndoPlugin);
diff --git a/play.pokemonshowdown.com/src/panel-chat.tsx b/play.pokemonshowdown.com/src/panel-chat.tsx
index 5258f93798..482885ce63 100644
--- a/play.pokemonshowdown.com/src/panel-chat.tsx
+++ b/play.pokemonshowdown.com/src/panel-chat.tsx
@@ -5,6 +5,10 @@
  * @license AGPLv3
  */
 
+declare const MiniEdit: typeof import('./miniedit').MiniEdit;
+type MiniEdit = import('./miniedit').MiniEdit;
+declare const formatText: any;
+
 class ChatRoom extends PSRoom {
 	readonly classType: 'chat' | 'battle' = 'chat';
 	users: {[userid: string]: string} = {};
@@ -155,26 +159,34 @@ class ChatTextEntry extends preact.Component<{
 }> {
 	subscription: PSSubscription | null = null;
 	textbox: HTMLTextAreaElement = null!;
+	miniedit: MiniEdit | null = null;
 	history: string[] = [];
 	historyIndex = 0;
-	componentDidMount() {
+	override componentDidMount() {
 		this.subscription = PS.user.subscribe(() => {
 			this.forceUpdate();
 		});
-		this.textbox = this.base!.children[0].children[1] as HTMLTextAreaElement;
+		const textbox = this.base!.children[0].children[1] as HTMLElement;
+		if (textbox.tagName === 'TEXTAREA') this.textbox = textbox as HTMLTextAreaElement;
+		this.miniedit = new MiniEdit(textbox, {
+			setContent: text => {
+				textbox.innerHTML = formatText(text, false, false, true) + '\n';
+			},
+			onKeyDown: this.onKeyDown,
+		});
 		if (this.base) this.update();
 	}
-	componentWillUnmount() {
+	override componentWillUnmount() {
 		if (this.subscription) {
 			this.subscription.unsubscribe();
 			this.subscription = null;
 		}
 	}
 	update = () => {
-		const textbox = this.textbox;
-		textbox.style.height = `12px`;
-		const newHeight = Math.min(Math.max(textbox.scrollHeight - 2, 16), 600);
-		textbox.style.height = `${newHeight}px`;
+		// const textbox = this.textbox;
+		// textbox.style.height = `12px`;
+		// const newHeight = Math.min(Math.max(textbox.scrollHeight - 2, 16), 600);
+		// textbox.style.height = `${newHeight}px`;
 	};
 	focusIfNoSelection = (e: Event) => {
 		if ((e.target as HTMLElement).tagName === 'TEXTAREA') return;
@@ -184,35 +196,46 @@ class ChatTextEntry extends preact.Component<{
 		elem.focus();
 	};
 	submit() {
-		this.props.onMessage(this.textbox.value);
-		this.historyPush(this.textbox.value);
-		this.textbox.value = '';
+		this.props.onMessage(this.getValue());
+		this.historyPush(this.getValue());
+		this.setValue('');
 		this.update();
 		return true;
 	}
-	keyDown = (e: KeyboardEvent) => {
+	onKeyDown = (e: KeyboardEvent) => {
 		if (this.handleKey(e) || this.props.onKey(e)) {
 			e.preventDefault();
 			e.stopImmediatePropagation();
 		}
 	};
+	getValue() {
+		return this.miniedit ? this.miniedit.getValue() : this.textbox.value;
+	}
+	setValue(value: string, selection?: {start: number, end: number}) {
+		if (this.miniedit) {
+			this.miniedit.setValue(value, selection);
+		} else {
+			this.textbox.value = value;
+			if (selection) this.textbox.setSelectionRange?.(selection.start, selection.end);
+		}
+	}
 	historyUp() {
 		if (this.historyIndex === 0) return false;
-		const line = this.textbox.value;
+		const line = this.getValue();
 		if (line !== '') this.history[this.historyIndex] = line;
-		this.textbox.value = this.history[--this.historyIndex];
+		this.setValue(this.history[--this.historyIndex]);
 		return true;
 	}
 	historyDown() {
-		const line = this.textbox.value;
+		const line = this.getValue();
 		if (line !== '') this.history[this.historyIndex] = line;
 		if (this.historyIndex === this.history.length) {
 			if (!line) return false;
-			this.textbox.value = '';
+			this.setValue('');
 		} else if (++this.historyIndex === this.history.length) {
-			this.textbox.value = '';
+			this.setValue('');
 		} else {
-			this.textbox.value = this.history[this.historyIndex];
+			this.setValue(this.history[this.historyIndex]);
 		}
 		return true;
 	}
@@ -223,22 +246,26 @@ class ChatTextEntry extends preact.Component<{
 		this.history.push(line);
 		this.historyIndex = this.history.length;
 	}
-	handleKey(e: KeyboardEvent) {
-		const cmdKey = ((e.metaKey ? 1 : 0) + (e.ctrlKey ? 1 : 0) === 1) && !e.altKey && !e.shiftKey;
-		if (e.keyCode === 13 && !e.shiftKey) { // Enter key
+	handleKey(ev: KeyboardEvent) {
+		const cmdKey = ((ev.metaKey ? 1 : 0) + (ev.ctrlKey ? 1 : 0) === 1) && !ev.altKey && !ev.shiftKey;
+		const anyModifier = ev.ctrlKey || ev.altKey || ev.metaKey || ev.shiftKey;
+		if (ev.keyCode === 13 && !ev.shiftKey) { // Enter key
 			return this.submit();
-		} else if (e.keyCode === 73 && cmdKey) { // Ctrl + I key
+		} else if (ev.keyCode === 13 && this.miniedit) { // enter
+			this.miniedit.replaceSelection('\n');
+			return true;
+		} else if (ev.keyCode === 73 && cmdKey) { // Ctrl + I key
 			return this.toggleFormatChar('_');
-		} else if (e.keyCode === 66 && cmdKey) { // Ctrl + B key
+		} else if (ev.keyCode === 66 && cmdKey) { // Ctrl + B key
 			return this.toggleFormatChar('*');
-		} else if (e.keyCode === 192 && cmdKey) { // Ctrl + ` key
+		} else if (ev.keyCode === 192 && cmdKey) { // Ctrl + ` key
 			return this.toggleFormatChar('`');
 		// } else if (e.keyCode === 9 && !e.ctrlKey) { // Tab key
 		// 	const reverse = !!e.shiftKey; // Shift+Tab reverses direction
 		// 	return this.handleTabComplete(this.$chatbox, reverse);
-		} else if (e.keyCode === 38 && !e.shiftKey && !e.altKey) { // Up key
+		} else if (ev.keyCode === 38 && !ev.shiftKey && !ev.altKey) { // Up key
 			return this.historyUp();
-		} else if (e.keyCode === 40 && !e.shiftKey && !e.altKey) { // Down key
+		} else if (ev.keyCode === 40 && !ev.shiftKey && !ev.altKey) { // Down key
 			return this.historyDown();
 		// } else if (app.user.lastPM && (textbox.value === '/reply' || textbox.value === '/r' || textbox.value === '/R') && e.keyCode === 32) { // '/reply ' is being written
 		// 	var val = '/pm ' + app.user.lastPM + ', ';
@@ -248,13 +275,21 @@ class ChatTextEntry extends preact.Component<{
 		}
 		return false;
 	}
+	getSelection() {
+		return this.miniedit ?
+			(this.miniedit.getSelection() || {start: 0, end: 0}) :
+			{start: this.textbox.selectionStart, end: this.textbox.selectionEnd};
+	}
+	setSelection(start: number, end: number) {
+		if (this.miniedit) {
+			this.miniedit.setSelection({start, end});
+		} else {
+			this.textbox.setSelectionRange?.(start, end);
+		}
+	}
 	toggleFormatChar(formatChar: string) {
-		const textbox = this.textbox;
-		if (!textbox.setSelectionRange) return false;
-
-		let value = textbox.value;
-		let start = textbox.selectionStart;
-		let end = textbox.selectionEnd;
+		let value = this.getValue();
+		let {start, end} = this.getSelection();
 
 		// make sure start and end aren't midway through the syntax
 		if (value.charAt(start) === formatChar && value.charAt(start - 1) === formatChar &&
@@ -290,36 +325,55 @@ class ChatTextEntry extends preact.Component<{
 			end -= 2;
 		}
 
-		textbox.value = value;
-		textbox.setSelectionRange(start, end);
+		this.setValue(value, {start, end});
 		return true;
 	}
-	render() {
+	override render() {
+		const OLD_TEXTBOX = false;
 		return <div
 			class="chat-log-add hasuserlist" onClick={this.focusIfNoSelection} style={{left: this.props.left || 0}}
 		>
 			<form class="chatbox">
 				<label style={{color: BattleLog.usernameColor(PS.user.userid)}}>{PS.user.name}:</label>
-				<textarea
+				{OLD_TEXTBOX ? <textarea
 					class={this.props.room.connected ? 'textbox' : 'textbox disabled'}
 					autofocus
 					rows={1}
 					onInput={this.update}
-					onKeyDown={this.keyDown}
+					onKeyDown={this.onKeyDown}
 					style={{resize: 'none', width: '100%', height: '16px', padding: '2px 3px 1px 3px'}}
 					placeholder={PS.focusPreview(this.props.room)}
-				/>
+				/> : <ChatTextBox
+					class={this.props.room.connected ? 'textbox' : 'textbox disabled'}
+					placeholder={PS.focusPreview(this.props.room)}
+				/>}
 			</form>
 		</div>;
 	}
 }
 
+class ChatTextBox extends preact.Component<{placeholder: string, class: string}> {
+	override shouldComponentUpdate() {
+		return false;
+	}
+	override render() {
+		return <pre class={this.props.class} placeholder={this.props.placeholder}>{'\n'}</pre>;
+	}
+}
+
 class ChatPanel extends PSRoomPanel<ChatRoom> {
 	send = (text: string) => {
 		this.props.room.send(text);
 	};
 	focus() {
-		this.base!.querySelector('textarea')!.focus();
+		// Called synchronously after a forceUpdate, so before the DOM has
+		// been updated to make the panel visible. The order isn't
+		// important for textboxes, which can be focused while inside a
+		// `display: none` element, but contentEditable boxes are pickier.
+		// Waiting for a 0 timeout turns out to be enough.
+		setTimeout(() => {
+			(this.base!.querySelector('textarea, pre.textbox') as HTMLElement).focus();
+		}, 0);
 	}
 	focusIfNoSelection = () => {
 		const selection = window.getSelection()!;
diff --git a/play.pokemonshowdown.com/src/panels.tsx b/play.pokemonshowdown.com/src/panels.tsx
index 28182ce9de..3bffff1b1e 100644
--- a/play.pokemonshowdown.com/src/panels.tsx
+++ b/play.pokemonshowdown.com/src/panels.tsx
@@ -285,6 +285,9 @@ class PSMain extends preact.Component {
 				if (isTextInput && elem.value) {
 					return;
 				}
+				if (elem.contentEditable === 'true' && elem.textContent && elem.textContent !== '\n') {
+					return;
+				}
 			}
 			if (PS.room.onParentEvent) {
 				if (PS.room.onParentEvent('keydown', e) === false) {
diff --git a/play.pokemonshowdown.com/style/battle-log.css b/play.pokemonshowdown.com/style/battle-log.css
index 2a48690f87..232404fdae 100644
--- a/play.pokemonshowdown.com/style/battle-log.css
+++ b/play.pokemonshowdown.com/style/battle-log.css
@@ -325,6 +325,12 @@ select.button {
 	background: #F8FBFD;
 	color: black;
 }
+pre.textbox {
+	white-space: pre-wrap;
+}
+.textbox tt {
+	color: #3388CC;
+}
 .textbox:hover {
 	border-color: #474747;
 	box-shadow: inset 0px 1px 2px #D2D2D2, 1px 1px 0 rgba(255,255,255,.6);
@@ -422,6 +428,7 @@ select {
 }
 
 input[type=range] {
+	appearance: auto;
 	-webkit-appearance: none;
 	-moz-appearance: revert;
 	cursor: pointer;
diff --git a/play.pokemonshowdown.com/style/client2.css b/play.pokemonshowdown.com/style/client2.css
index 4a3b259120..334aa64488 100644
--- a/play.pokemonshowdown.com/style/client2.css
+++ b/play.pokemonshowdown.com/style/client2.css
@@ -1074,7 +1074,7 @@ a.ilink.yours {
 	font-weight: bold;
 	font-size: 8pt;
 }
-.chatbox textarea {
+.chatbox .textbox {
 	display: block;
 	height: 1.1em;
 	width: 100%;
@@ -1084,6 +1084,10 @@ a.ilink.yours {
 	overflow-x: hidden;
 	overflow-wrap: break-word;
 }
+.chatbox pre.textbox {
+	margin: 0;
+	height: auto;
+}
 
 /* Tournaments */
 
diff --git a/play.pokemonshowdown.com/testclient-beta.html b/play.pokemonshowdown.com/testclient-beta.html
index b7f6138ef5..6069704a82 100644
--- a/play.pokemonshowdown.com/testclient-beta.html
+++ b/play.pokemonshowdown.com/testclient-beta.html
@@ -112,6 +112,7 @@ <h3><button class="closebutton" tabindex="-1" aria-label="Close"><i class="fa fa
 	<script src="src/battle-log-misc.js"></script>
 	<script src="js/server/chat-formatter.js"></script>
 	<script src="js/battle-log.js"></script>
+	<script src="js/miniedit.js"></script>
 	<script src="js/panel-chat.js"></script>
 
 	<script src="js/battle-sound.js"></script>