48 lines
1.4 KiB
JavaScript
48 lines
1.4 KiB
JavaScript
import { useState } from 'react';
|
|
import ReactQuill from 'react-quill';
|
|
import 'react-quill/dist/quill.snow.css';
|
|
|
|
function ArticleEditor ({ article, onSave, onCancel }) {
|
|
const [title, setTitle] = useState(article.title);
|
|
const [content, setContent] = useState(article.content);
|
|
|
|
const handleSave = () => {
|
|
onSave({
|
|
ka_number: article.ka_number,
|
|
title: title,
|
|
content: content
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className='article-editor'>
|
|
<div className='editor-header'>
|
|
<h2>Editing: {article.ka_number}</h2>
|
|
</div>
|
|
|
|
<div className='editor-form'>
|
|
<p>
|
|
<label>Title: </label>
|
|
<input
|
|
type='text'
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
/>
|
|
</p>
|
|
|
|
<p><label>Content:</label></p>
|
|
<ReactQuill
|
|
value={content}
|
|
onChange={setContent}
|
|
/>
|
|
|
|
<div className='editor-buttons'>
|
|
<button onClick={handleSave}>Save</button>
|
|
<button onClick={onCancel}>Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ArticleEditor; |