From 5371f1ba22b93d184f0b806ebe5dc668cceb0147 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Mon, 24 Aug 2026 15:08:57 +0330
Subject: [PATCH] feat: complete rich text editor toolbar with full states, hex
 pickers, and clean layout

---
 .../src/components/ui/RichTextEditor.tsx      | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/admin-panel/src/components/ui/RichTextEditor.tsx b/frontend/admin-panel/src/components/ui/RichTextEditor.tsx
index 7d8df13..ef01056 100644
--- a/frontend/admin-panel/src/components/ui/RichTextEditor.tsx
+++ b/frontend/admin-panel/src/components/ui/RichTextEditor.tsx
@@ -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',
       });