feat: complete rich text editor toolbar with full states, hex pickers, and clean layout
All checks were successful
Deploy Canina / deploy (push) Successful in 1m36s

This commit is contained in:
parsa aghaei 2026-08-24 15:08:57 +03:30
parent ad0d98f846
commit 5371f1ba22

View File

@ -92,13 +92,14 @@ export default function RichTextEditor({
const updateActiveStates = useCallback(() => {
if (!editorRef.current || isCodeMode) return;
try {
const isBold = document.queryCommandState('bold');
const isItalic = document.queryCommandState('italic');
const isUnderline = document.queryCommandState('underline');
const isUL = document.queryCommandState('insertUnorderedList');
const isOL = document.queryCommandState('insertOrderedList');
const doc = document as any;
const isBold = doc.queryCommandState ? doc.queryCommandState('bold') : false;
const isItalic = doc.queryCommandState ? doc.queryCommandState('italic') : false;
const isUnderline = doc.queryCommandState ? doc.queryCommandState('underline') : false;
const isUL = doc.queryCommandState ? doc.queryCommandState('insertUnorderedList') : false;
const isOL = doc.queryCommandState ? doc.queryCommandState('insertOrderedList') : false;
let block = document.queryCommandValue('formatBlock') || '';
let block = (doc.queryCommandValue ? doc.queryCommandValue('formatBlock') : '') || '';
block = block.toLowerCase().replace(/[<>]/g, '');
// Check parent tag if queryCommandValue is ambiguous
@ -106,7 +107,7 @@ export default function RichTextEditor({
let parentTag = '';
if (selection && selection.rangeCount > 0) {
let node: Node | null = selection.getRangeAt(0).commonAncestorContainer;
if (node.nodeType === 3 && node.parentNode) {
if (node && node.nodeType === 3 && node.parentNode) {
node = node.parentNode;
}
while (node && node !== editorRef.current) {
@ -131,9 +132,9 @@ export default function RichTextEditor({
isP: activeBlock === 'p' || (!['h1', 'h2', 'h3'].includes(activeBlock) && !isUL && !isOL),
isUL,
isOL,
align: document.queryCommandState('justifyCenter')
align: doc.queryCommandState && doc.queryCommandState('justifyCenter')
? 'center'
: document.queryCommandState('justifyLeft')
: doc.queryCommandState && doc.queryCommandState('justifyLeft')
? 'left'
: 'right',
});