feat: add RichTextEditor component and integrate company policy management into settings page
This commit is contained in:
sazzadulalambd
258
src/components/RichTextEditor.tsx
Normal file
258
src/components/RichTextEditor.tsx
Normal file
@@ -0,0 +1,258 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useRef, useEffect, useCallback, Fragment } from 'react';
|
||||
import { Bold, Italic, Underline, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Undo, Redo, Table, Trash2, Rows, Columns } from 'lucide-react';
|
||||
|
||||
interface RichTextEditorProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
minHeight?: number;
|
||||
}
|
||||
|
||||
export default function RichTextEditor({ value, onChange, placeholder = 'Enter description...', minHeight = 150 }: RichTextEditorProps) {
|
||||
const editorRef = useRef<HTMLDivElement>(null);
|
||||
const [isInitialized, setIsInitialized] = useState(false);
|
||||
const [showTableMenu, setShowTableMenu] = useState(false);
|
||||
const lastValueRef = useRef(value);
|
||||
|
||||
useEffect(() => {
|
||||
if (editorRef.current && !isInitialized) {
|
||||
editorRef.current.innerHTML = value || '';
|
||||
lastValueRef.current = value;
|
||||
setIsInitialized(true);
|
||||
}
|
||||
}, [value, isInitialized]);
|
||||
|
||||
useEffect(() => {
|
||||
if (editorRef.current && isInitialized && value !== lastValueRef.current) {
|
||||
if (document.activeElement !== editorRef.current) {
|
||||
editorRef.current.innerHTML = value || '';
|
||||
lastValueRef.current = value;
|
||||
}
|
||||
}
|
||||
}, [value, isInitialized]);
|
||||
|
||||
const execCommand = (command: string) => {
|
||||
editorRef.current?.focus();
|
||||
|
||||
if (command === 'bold') {
|
||||
document.execCommand('bold', false);
|
||||
} else if (command === 'italic') {
|
||||
document.execCommand('italic', false);
|
||||
} else if (command === 'underline') {
|
||||
document.execCommand('underline', false);
|
||||
} else if (command === 'insertUnorderedList') {
|
||||
document.execCommand('insertUnorderedList', false);
|
||||
} else if (command === 'insertOrderedList') {
|
||||
document.execCommand('insertOrderedList', false);
|
||||
} else if (command === 'justifyLeft') {
|
||||
document.execCommand('justifyLeft', false);
|
||||
} else if (command === 'justifyCenter') {
|
||||
document.execCommand('justifyCenter', false);
|
||||
} else if (command === 'justifyRight') {
|
||||
document.execCommand('justifyRight', false);
|
||||
} else if (command === 'undo') {
|
||||
document.execCommand('undo', false);
|
||||
} else if (command === 'redo') {
|
||||
document.execCommand('redo', false);
|
||||
}
|
||||
|
||||
updateValue();
|
||||
};
|
||||
|
||||
const updateValue = useCallback(() => {
|
||||
if (editorRef.current) {
|
||||
lastValueRef.current = editorRef.current.innerHTML;
|
||||
onChange(editorRef.current.innerHTML);
|
||||
}
|
||||
}, [onChange]);
|
||||
|
||||
const insertTable = (rows: number, cols: number) => {
|
||||
let tableHTML = '<table style="border-collapse: collapse; width: 100%; margin: 10px 0;">';
|
||||
for (let r = 0; r < rows; r++) {
|
||||
tableHTML += '<tr>';
|
||||
for (let c = 0; c < cols; c++) {
|
||||
const cellTag = r === 0 ? 'th' : 'td';
|
||||
const border = 'border: 1px solid #ccc; padding: 8px;';
|
||||
tableHTML += `<${cellTag} style="${border}"><br></${cellTag}>`;
|
||||
}
|
||||
tableHTML += '</tr>';
|
||||
}
|
||||
tableHTML += '</table><p><br></p>';
|
||||
|
||||
if (editorRef.current) {
|
||||
editorRef.current.focus();
|
||||
document.execCommand('insertHTML', false, tableHTML);
|
||||
updateValue();
|
||||
}
|
||||
setShowTableMenu(false);
|
||||
};
|
||||
|
||||
const insertRow = () => {
|
||||
if (!editorRef.current) return;
|
||||
const selection = window.getSelection();
|
||||
if (!selection || selection.rangeCount === 0) return;
|
||||
|
||||
const range = selection.getRangeAt(0);
|
||||
let cell = range.commonAncestorContainer;
|
||||
while (cell && cell !== editorRef.current) {
|
||||
if ((cell as HTMLElement).tagName === 'TD' || (cell as HTMLElement).tagName === 'TH') {
|
||||
const row = (cell as HTMLElement).parentElement;
|
||||
if (row && row.tagName === 'TR') {
|
||||
const newRow = row.cloneNode(true) as HTMLElement;
|
||||
row.parentElement?.insertBefore(newRow, row.nextSibling);
|
||||
updateValue();
|
||||
break;
|
||||
}
|
||||
}
|
||||
cell = (cell as HTMLElement).parentElement || (cell as Text).parentElement!;
|
||||
}
|
||||
};
|
||||
|
||||
const insertColumn = () => {
|
||||
if (!editorRef.current) return;
|
||||
const selection = window.getSelection();
|
||||
if (!selection || selection.rangeCount === 0) return;
|
||||
|
||||
const range = selection.getRangeAt(0);
|
||||
let cell = range.commonAncestorContainer;
|
||||
while (cell && cell !== editorRef.current) {
|
||||
if ((cell as HTMLElement).tagName === 'TD' || (cell as HTMLElement).tagName === 'TH') {
|
||||
const table = (cell as HTMLElement).closest('table');
|
||||
if (table) {
|
||||
const colIndex = Array.from((cell as HTMLElement).parentElement?.children || []).indexOf(cell as HTMLElement);
|
||||
table.querySelectorAll('tr').forEach(row => {
|
||||
const newCell = (cell as HTMLElement).cloneNode() as HTMLElement;
|
||||
newCell.innerHTML = '<br>';
|
||||
if (row.children[colIndex]) {
|
||||
row.insertBefore(newCell, row.children[colIndex]);
|
||||
} else {
|
||||
row.appendChild(newCell);
|
||||
}
|
||||
});
|
||||
updateValue();
|
||||
break;
|
||||
}
|
||||
}
|
||||
cell = (cell as HTMLElement).parentElement || (cell as Text).parentElement!;
|
||||
}
|
||||
};
|
||||
|
||||
const deleteTable = () => {
|
||||
if (!editorRef.current) return;
|
||||
const selection = window.getSelection();
|
||||
if (!selection || selection.rangeCount === 0) return;
|
||||
|
||||
const range = selection.getRangeAt(0);
|
||||
let cell = range.commonAncestorContainer;
|
||||
while (cell && cell !== editorRef.current) {
|
||||
if ((cell as HTMLElement).tagName === 'TABLE') {
|
||||
(cell as HTMLElement).remove();
|
||||
updateValue();
|
||||
break;
|
||||
}
|
||||
cell = (cell as HTMLElement).parentElement || (cell as Text).parentElement!;
|
||||
}
|
||||
};
|
||||
|
||||
const ToolbarButton = ({ onClick, children, title }: { onClick: () => void; children: React.ReactNode; title: string }) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
title={title}
|
||||
className="p-1.5 rounded text-slate-600 hover:bg-slate-100"
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
|
||||
const ToolbarDivider = () => <div className="w-px h-5 bg-slate-300 mx-1" />;
|
||||
|
||||
return (
|
||||
<div className="border border-slate-200 rounded-lg overflow-hidden bg-white">
|
||||
<div className="flex items-center gap-1 px-2 py-1 bg-slate-50 border-b border-slate-200 flex-wrap">
|
||||
<ToolbarButton onClick={() => execCommand('bold')} title="Bold">
|
||||
<Bold className="w-4 h-4" />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton onClick={() => execCommand('italic')} title="Italic">
|
||||
<Italic className="w-4 h-4" />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton onClick={() => execCommand('underline')} title="Underline">
|
||||
<Underline className="w-4 h-4" />
|
||||
</ToolbarButton>
|
||||
<ToolbarDivider />
|
||||
<ToolbarButton onClick={() => execCommand('insertUnorderedList')} title="Bullet List">
|
||||
<List className="w-4 h-4" />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton onClick={() => execCommand('insertOrderedList')} title="Numbered List">
|
||||
<ListOrdered className="w-4 h-4" />
|
||||
</ToolbarButton>
|
||||
<ToolbarDivider />
|
||||
<ToolbarButton onClick={() => execCommand('justifyLeft')} title="Align Left">
|
||||
<AlignLeft className="w-4 h-4" />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton onClick={() => execCommand('justifyCenter')} title="Align Center">
|
||||
<AlignCenter className="w-4 h-4" />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton onClick={() => execCommand('justifyRight')} title="Align Right">
|
||||
<AlignRight className="w-4 h-4" />
|
||||
</ToolbarButton>
|
||||
<ToolbarDivider />
|
||||
<div className="relative">
|
||||
<ToolbarButton onClick={() => setShowTableMenu(!showTableMenu)} title="Insert Table">
|
||||
<Table className="w-4 h-4" />
|
||||
</ToolbarButton>
|
||||
{showTableMenu && (
|
||||
<div className="absolute top-full left-0 mt-1 bg-white border border-slate-200 rounded-lg shadow-lg p-2 z-50 min-w-[160px]">
|
||||
<div className="text-xs text-slate-500 mb-2 px-1">Insert Table</div>
|
||||
<div className="grid grid-cols-4 gap-1 mb-2">
|
||||
{[2, 3, 4, 5].map(rows =>
|
||||
<Fragment key={rows}>
|
||||
{[2, 3, 4, 5].map(cols => (
|
||||
<button
|
||||
key={`${rows}-${cols}`}
|
||||
onClick={() => insertTable(rows, cols)}
|
||||
className="w-6 h-6 text-xs bg-slate-100 hover:bg-blue-100 rounded flex items-center justify-center"
|
||||
>
|
||||
{rows}x{cols}
|
||||
</button>
|
||||
))}
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
<div className="border-t border-slate-200 pt-2 mt-2">
|
||||
<button onClick={insertRow} className="w-full text-left px-2 py-1 text-sm hover:bg-slate-100 rounded flex items-center gap-2">
|
||||
<Rows className="w-3 h-3" /> Add Row
|
||||
</button>
|
||||
<button onClick={insertColumn} className="w-full text-left px-2 py-1 text-sm hover:bg-slate-100 rounded flex items-center gap-2">
|
||||
<Columns className="w-3 h-3" /> Add Column
|
||||
</button>
|
||||
<button onClick={deleteTable} className="w-full text-left px-2 py-1 text-sm hover:bg-red-50 text-red-600 rounded flex items-center gap-2">
|
||||
<Trash2 className="w-3 h-3" /> Delete Table
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<ToolbarDivider />
|
||||
<ToolbarButton onClick={() => execCommand('undo')} title="Undo">
|
||||
<Undo className="w-4 h-4" />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton onClick={() => execCommand('redo')} title="Redo">
|
||||
<Redo className="w-4 h-4" />
|
||||
</ToolbarButton>
|
||||
</div>
|
||||
<div
|
||||
ref={editorRef}
|
||||
contentEditable
|
||||
onBlur={updateValue}
|
||||
onInput={updateValue}
|
||||
className="px-3 py-2 text-sm text-slate-700 focus:outline-none prose prose-sm max-w-none"
|
||||
style={{ minHeight }}
|
||||
data-placeholder={placeholder}
|
||||
suppressContentEditableWarning
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user