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

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

View file

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

View file

@ -1,8 +1,9 @@
'use client'
import { useEffect, useRef } from 'react';
import { useLayoutEffect, useRef } from 'react';
import { useSearchParams } from 'next/navigation';
import comic_sans from '../../../../comic.ts';
import { message_style } from '../components/Input.css';
export default function Input() {
@ -13,6 +14,8 @@ export default function Input() {
const encoded = btoa(message);
const new_url = `${window.location.protocol}//${window.location.host}${window.location.pathname}?e=${encoded}`;
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') ?
@ -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.'
);
useEffect(() => {
useLayoutEffect(() => {
set_message(message);
});
return (
<p
<textarea
ref={input_ref}
className={message_style}
type="text"
rows="1"
onInput={() => set_message(input_ref.current!.textContent ?? '')}
contentEditable
>
{message}
</p>
defaultValue={message}
/>
);
}