36 lines
772 B
TypeScript
36 lines
772 B
TypeScript
import { useEffect, useRef } from "react";
|
|
import { clsn } from "~utils";
|
|
|
|
import styles from "./article.module.less";
|
|
|
|
interface ArticleProps {
|
|
className?: string;
|
|
value: string | number;
|
|
onChange: (value: string) => void;
|
|
}
|
|
|
|
function Article({ className, value, onChange }: ArticleProps) {
|
|
const articleRef = useRef<HTMLElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!articleRef.current) {
|
|
return;
|
|
}
|
|
|
|
if (articleRef.current.innerHTML !== String(value)) {
|
|
articleRef.current.innerHTML = String(value);
|
|
}
|
|
}, [value]);
|
|
|
|
return (
|
|
<article
|
|
ref={articleRef}
|
|
className={clsn(styles.article, className)}
|
|
contentEditable
|
|
onInput={(ev) => onChange(articleRef.current.innerHTML)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default Article;
|