29 lines
732 B
TypeScript
29 lines
732 B
TypeScript
|
"use client";
|
||
|
|
import { useEffect, useRef } from "react";
|
||
|
|
|
||
|
|
export function Editor({ value, onChange, placeholder }: { value: string; onChange: (v: string) => void; placeholder?: string }) {
|
||
|
|
const ref = useRef<HTMLDivElement | null>(null);
|
||
|
|
useEffect(() => {
|
||
|
|
const el = ref.current;
|
||
|
|
if (!el) return;
|
||
|
|
if (el.innerHTML !== value) el.innerHTML = value || "";
|
||
|
|
}, [value]);
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
ref={ref}
|
||
|
|
contentEditable
|
||
|
|
onInput={(e) => onChange((e.target as HTMLDivElement).innerHTML)}
|
||
|
|
data-placeholder={placeholder}
|
||
|
|
style={{
|
||
|
|
minHeight: 160,
|
||
|
|
border: "1px solid #ddd",
|
||
|
|
borderRadius: 6,
|
||
|
|
padding: 12,
|
||
|
|
}}
|
||
|
|
suppressContentEditableWarning
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
|