README.ar.md

React Controlled Contenteditable

مكوّن ريأكت مضبوط للمحتوى القابل للتحرير

على عكس الحزم الأخرى ، فإن مكوّن ContentEditable هذا يمكن التحكم فيه بالكامل. مع القدرة على التنقل عبر عناصر html للتنسيق المتداخلة باستخدام مفاتيح الأسهم. وخلافا لحزمة react-contenteditable تستطيع استعمال useState من غير أن تواجه أي مشاكل.

التنصيب

npm i react-controlled-contenteditable

الخواص

الخاصية	الوصف	النوع
String	مطلوبة: نص HTML الداخلي للعنصر القابل للتحرير	html
(e: ContentEditableEvent) => void	مطلوبة: يتم استدعاؤها حينما تتغير قيمة innerHTML	onChange
(e: KeyDownEvent) => void	يتم استدعاؤها حينما يتم الضغط على مفاتح ما.	onKeyDown
any	خواص أخرى مثل، style، ref وإلخ ....	البقية...

ملاحظة: نوع KeyDownEvent يختلف عن React.KeyboardEvent من حيث أن الأول يأتي مع isComposing على عكس الأخير.

مثال

import {useState} from 'react';
import ContentEditable, {ContentEditableEvent} from './contentEditable';

function App() {
	const [content, setContent] = useState('');
	const handleChange = (e: ContentEditableEvent) => {
		setContent(e.target.value);
	};
	return (
		<div className="App">
			<ContentEditable
				onChange={handleChange}
				html={content}
				tagName="div"
			/>
		</div>
	);
}

export default App;

المساهمة

الباب مفتوح على مصرعيه للمساهمة.