pabloid
/
tsgames
1
0
Fork 0
Code

Fix content editable onKeyDown

This commit is contained in:
Pabloader 2026-04-12 12:32:33 +00:00
parent 2a711a6dea
commit 20485ba551
1 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/common/components/ContentEditable.tsx
View File

@ -27,7 +27,8 @@ function setCaretOffset(el: HTMLElement, offset: number) {
function traverse(node: Node): boolean {
if (node.nodeType === Node.TEXT_NODE) {
const len = node.textContent?.length ?? 0;
const text = node.textContent || ''
const len = text.length;
if (remaining <= len) {
range.setStart(node, remaining);
range.collapse(true);
@ -56,7 +57,7 @@ function resizeToContent(el: HTMLElement) {
el.style.height = el.scrollHeight + 'px';
}
export const ContentEditable = ({ value, placeholder, autoLines, onInput, class: externalClass, ...props }: Props) => {
export const ContentEditable = ({ value, placeholder, autoLines, onInput, onKeyDown, class: externalClass, ...props }: Props) => {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
@ -70,7 +71,10 @@ export const ContentEditable = ({ value, placeholder, autoLines, onInput, class:
}, [value]);
const handleKeyDown: JSX.KeyboardEventHandler<HTMLDivElement> = (e) => {
if (e.key !== 'Enter' || !ref.current) return;
if (e.key !== 'Enter' || !ref.current) {
onKeyDown?.(e);
return;
};
e.preventDefault();
const sel = window.getSelection();
@ -79,8 +83,8 @@ export const ContentEditable = ({ value, placeholder, autoLines, onInput, class:
const range = sel.getRangeAt(0);
range.deleteContents();
const endsWithNewline = ref.current.textContent?.endsWith('\n');
const caretAtEnd = getCaretOffset(ref.current) === (ref.current.textContent?.length ?? 0);
const endsWithNewline = ref.current.innerText?.endsWith('\n');
const caretAtEnd = getCaretOffset(ref.current) === (ref.current.innerText?.length ?? 0);
const newline = document.createTextNode('\n'.repeat((endsWithNewline || !caretAtEnd) ? 1 : 2));
range.insertNode(newline);
@ -90,14 +94,15 @@ export const ContentEditable = ({ value, placeholder, autoLines, onInput, class:
sel.removeAllRanges();
sel.addRange(range);
(ref.current as any).value = ref.current.textContent;
(ref.current as any).value = ref.current.innerText;
ref.current?.dispatchEvent(new InputEvent('input', { bubbles: true }));
onKeyDown?.(e);
};
const handleInput: JSX.EventHandler<JSX.TargetedInputEvent<HTMLDivElement>> = (e) => {
if (autoLines && ref.current) resizeToContent(ref.current);
if (ref.current) {
(ref.current as any).value = ref.current.textContent;
(ref.current as any).value = ref.current.innerText;
}
onInput?.(e);
};
@ -105,12 +110,12 @@ export const ContentEditable = ({ value, placeholder, autoLines, onInput, class:
return (
<div
ref={ref}
{...props}
contentEditable
onKeyDown={handleKeyDown}
onInput={handleInput}
data-placeholder={value.replaceAll('\n', '').length ? undefined : placeholder}
class={clsx(styles.root, autoLines && styles.autoLines, externalClass)}
{...props}
onKeyDown={handleKeyDown}
onInput={handleInput}
/>
);
};