    <div id="toolbar-container">

                                <!-- تنسيقات أساسية -->
                                <span class="ql-formats">
                                    <button class="ql-bold"></button>
                                    <button class="ql-italic"></button>
                                    <button class="ql-underline"></button>
                                    <button class="ql-strike"></button>
                                </span>

                                <!-- عناوين -->
                                <span class="ql-formats">
                                    <select class="ql-header">
                                        <option selected></option>
                                        <option value="1"></option>
                                        <option value="2"></option>
                                        <option value="3"></option>
                                        <option value="4"></option>
                                        <option value="5"></option>
                                        <option value="6"></option>
                                    </select>
                                </span>

                                <!-- قوائم -->
                                <span class="ql-formats">
                                    <button class="ql-list" value="ordered"></button>
                                    <button class="ql-list" value="bullet"></button>
                                    <button class="ql-indent" value="-1"></button>
                                    <button class="ql-indent" value="+1"></button>
                                </span>

                                <!-- محاذاة واتجاه -->
                                <span class="ql-formats">
                                    <select class="ql-align"></select>
                                    <button class="ql-direction" value="rtl"></button> <!-- هذا الزر موجود بالفعل -->
                                </span>

                                <!-- حجم الخط - تم تعديله لإضافة خيارات أكثر -->
                                <span class="ql-formats">
                                    <select class="ql-size">
                                        <option value="small">Small</option>
                                        <option selected>Normal</option>
                                        <option value="large">Large</option>
                                        <option value="huge">Huge</option>
                                        <!-- إضافة خيارات حجم مخصصة -->
                                        <option value="10px">10px</option>
                                        <option value="12px">12px</option>
                                        <option value="14px">14px</option>
                                        <option value="16px">16px</option>
                                        <option value="18px">18px</option>
                                        <option value="20px">20px</option>
                                    </select>
                                </span>

                                <!-- ألوان - تم تعديله لإضافة لون الخط -->
                                <span class="ql-formats">
                                    <!-- لون الخط -->
                                    <select class="ql-color">
                                        <option value="#000000" selected>Black</option>
                                        <option value="#ffffff">White</option>
                                        <option value="#ff0000">Red</option>
                                        <option value="#00ff00">Green</option>
                                        <option value="#0000ff">Blue</option>
                                        <option value="#ffff00">Yellow</option>
                                        <option value="#ff00ff">Magenta</option>
                                        <option value="#00ffff">Cyan</option>
                                        <option value="#808080">Gray</option>
                                        <option value="#800000">Maroon</option>
                                        <option value="#008000">Olive</option>
                                        <option value="#000080">Navy</option>
                                        <option value="#800080">Purple</option>
                                        <option value="#008080">Teal</option>
                                        <option value="#808000">Khaki</option>
                                    </select>
                                    <!-- لون الخلفية -->
                                    <select class="ql-background">
                                        <option value="#ffffff" selected>White</option>
                                        <option value="#000000">Black</option>
                                        <option value="#ff0000">Red</option>
                                        <option value="#00ff00">Green</option>
                                        <option value="#0000ff">Blue</option>
                                        <option value="#ffff00">Yellow</option>
                                        <option value="#ff00ff">Magenta</option>
                                        <option value="#00ffff">Cyan</option>
                                        <option value="#808080">Gray</option>
                                        <option value="#800000">Maroon</option>
                                        <option value="#008000">Olive</option>
                                        <option value="#000080">Navy</option>
                                        <option value="#800080">Purple</option>
                                        <option value="#008080">Teal</option>
                                        <option value="#808000">Khaki</option>
                                    </select>
                                </span>

                                <!-- خط -->
                                <span class="ql-formats">
                                    <select class="ql-font">
                                        <option value="sans-serif">Sans Serif</option>
                                        <option value="serif">Serif</option>
                                        <option value="monospace">Monospace</option>
                                        <!-- يمكنك إضافة خطوط عربية مثل: -->
                                        <option value="Arial">Arial</option>
                                        <option value="Tahoma">Tahoma</option>
                                        <option value="Verdana">Verdana</option>
                                        <option value="Times New Roman">Times New Roman</option>
                                        <option value="Courier New">Courier New</option>
                                    </select>
                                </span>

                                <!-- كود واقتباس -->
                                <span class="ql-formats">
                                    <button class="ql-blockquote"></button>
                                    <!-- <button class="ql-code-block"></button> -->
                                </span>

                                <!-- روابط وصور وفيديو -->
                                <span class="ql-formats">
                                    <button class="ql-link"></button>
                                    <button class="ql-image"></button>
                                    <button class="ql-video"></button>
                                </span>

                                <!-- تنظيف -->
                                <span class="ql-formats">
                                    <button class="ql-clean"></button>
                                </span>

                            </div> <!-- with click edit -->
