Ok fine no contentEditable, not even a little as a treat
This commit is contained in:
parent
e0fa242e69
commit
9f3351292b
2 changed files with 13 additions and 8 deletions
|
@ -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',
|
||||
},
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue