Gnarwhal/ode_to_snack
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Ok fine no contentEditable, not even a little as a treat

Browse source
This commit is contained in:
Gnarwhal 2024-09-27 14:38:43 +00:00
parent e0fa242e69
commit 9f3351292b
Signed by: Gnarwhal
GPG key ID: 0989A73D8C421174
2 changed files with 13 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/airstrip_one/0/ministry_of_truth/components/Input.css.ts
View file

@ -1,4 +1,4 @@
import { style } from "@vanilla-extract/css"; import { style } from '@vanilla-extract/css';
export const message_style = style({ export const message_style = style({
boxSizing: 'border-box', boxSizing: 'border-box',
@ -8,10 +8,12 @@ export const message_style = style({
border: 'none', border: 'none',
padding: '0.5em', padding: '0.5em',
fontSize: '1em', fontSize: '1em',
fontFamily: 'inherit',
color: 'magenta', color: 'magenta',
backgroundColor: 'black', backgroundColor: 'black',
overflowWrap: 'break-word', overflowWrap: 'break-word',
textAlign: 'center', textAlign: 'center',
resize: 'none',
':focus': { ':focus': {
outline: 'none', outline: 'none',
}, },

17
src/app/airstrip_one/0/ministry_of_truth/components/Input.tsx
View file

@ -1,8 +1,9 @@
'use client' 'use client'
import { useEffect, useRef } from 'react'; import { useLayoutEffect, useRef } from 'react';
import { useSearchParams } from 'next/navigation'; import { useSearchParams } from 'next/navigation';
import comic_sans from '../../../../comic.ts';
import { message_style } from '../components/Input.css'; import { message_style } from '../components/Input.css';
export default function Input() { export default function Input() {
@ -13,6 +14,8 @@ export default function Input() {
const encoded = btoa(message); const encoded = btoa(message);
const new_url = `${window.location.protocol}//${window.location.host}${window.location.pathname}?e=${encoded}`; const new_url = `${window.location.protocol}//${window.location.host}${window.location.pathname}?e=${encoded}`;
window.history.replaceState(null, '', new_url); window.history.replaceState(null, '', new_url);
input_ref.current!.style.height = "";
input_ref.current!.style.height = `${input_ref.current!.scrollHeight}px`;
} }
const message = search_params.get('e') ? const message = search_params.get('e') ?
@ -22,18 +25,18 @@ export default function Input() {
?? 'At the apex of the pyramid comes Big Brother. Big Brother is infallible and all-powerful. Every success, every achievement, every victory, every scientific discovery, all knowledge, all wisdom, all happiness, all virtue, are held to issue directly from his leadership and inspiration.' ?? 'At the apex of the pyramid comes Big Brother. Big Brother is infallible and all-powerful. Every success, every achievement, every victory, every scientific discovery, all knowledge, all wisdom, all happiness, all virtue, are held to issue directly from his leadership and inspiration.'
); );
useEffect(() => { useLayoutEffect(() => {
set_message(message); set_message(message);
}); });
return ( return (
<p <textarea
ref={input_ref} ref={input_ref}
className={message_style} className={message_style}
type="text"
rows="1"
onInput={() => set_message(input_ref.current!.textContent ?? '')} onInput={() => set_message(input_ref.current!.textContent ?? '')}
contentEditable defaultValue={message}
> />
{message}
</p>
); );
} }