react-text-forge 1.2.12 → 1.3.1

package/dist/react-text-forge.js

@@ -386,6 +386,7 @@ const deserialize = (html) => {
       return null;
     }
     const children = Array.from(node.childNodes).map(deserializeNode).flat().filter(Boolean);
+    const validChildren = children.length > 0 ? children : [{ text: "" }];
     const styles = {
       bold: node.querySelector("strong") !== null,
       italic: node.querySelector("em") !== null,
@@ -403,33 +404,33 @@ const deserialize = (html) => {
     };
     switch (node.nodeName) {
       case "P":
-        return jsx("element", { type: "paragraph" }, children);
+        return jsx("element", { type: "paragraph" }, validChildren);
       case "PRE":
-        return jsx("element", { type: "code" }, children);
+        return jsx("element", { type: "code" }, validChildren);
       case "UL":
-        return jsx("element", { type: "bullet-list" }, children);
+        return jsx("element", { type: "bullet-list" }, validChildren);
       case "OL":
-        return jsx("element", { type: "numbered-list" }, children);
+        return jsx("element", { type: "numbered-list" }, validChildren);
       case "LI":
-        return jsx("element", { type: "list-item" }, children);
+        return jsx("element", { type: "list-item" }, validChildren);
       case "H1":
-        return jsx("element", { type: "h1" }, children);
+        return jsx("element", { type: "h1" }, validChildren);
       case "H2":
-        return jsx("element", { type: "h2" }, children);
+        return jsx("element", { type: "h2" }, validChildren);
       case "BLOCKQUOTE":
-        return jsx("element", { type: "blockquote" }, children);
+        return jsx("element", { type: "blockquote" }, validChildren);
       case "IMG":
         return jsx("element", { type: "image", url: node.getAttribute("src") });
       case "TABLE":
-        return jsx("element", { type: "table" }, children);
+        return jsx("element", { type: "table" }, validChildren);
       case "TR":
-        return jsx("element", { type: "table-row" }, children);
+        return jsx("element", { type: "table-row" }, validChildren);
       case "TD":
-        return jsx("element", { type: "table-cell" }, children);
+        return jsx("element", { type: "table-cell" }, validChildren);
       case "A":
-        return jsx("element", { type: "link", url: node.getAttribute("href") }, children);
+        return jsx("element", { type: "link", url: node.getAttribute("href") }, validChildren);
       default:
-        return children.map((child) => {
+        return validChildren.map((child) => {
           if (typeof child === "string") {
             return jsx("text", styles, child);
           }
@@ -879,7 +880,7 @@ const CodeElement = ({ attributes, children, element }) => {
 const CustomEditor = {
   /**
    * Permet de définir si le format défini est actif
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @param {string} format - format défini (ex: gras, italique, etc...)
    * @returns {boolean}
    */
@@ -889,7 +890,7 @@ const CustomEditor = {
   },
   /**
    * Permet de gérer l'application et la désapplication du format défini
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @param {string} format - format défini (ex: gras, italique, etc...)
    * @returns {void}
    */
@@ -908,7 +909,7 @@ const CustomEditor = {
   },
   /**
    * Permet de définir si le bloc défini est actif
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @param {string} blockType - élément défini (ex: p, h1, h2...)
    * @returns {boolean}
    */
@@ -920,7 +921,7 @@ const CustomEditor = {
   },
   /**
    * Permet de définir si le bloc défini est dans une liste à puces (non-ordonnée ou numérotée)
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @returns {boolean}
    */
   isSelectionInList(editor) {
@@ -931,7 +932,7 @@ const CustomEditor = {
   },
   /**
    * Permet de définir la puce utilisée dans une liste à puces (non-ordonnée ou numérotée)
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @returns {string}
    */
   getListStyleType(editor) {
@@ -940,9 +941,31 @@ const CustomEditor = {
     });
     return match[0].listStyleType;
   },
+  /**
+   * Permet de récupérer le type de bloc utilisé
+   * @param {Editor} editor
+   * @param {Range | Point | null} selection 
+   */
+  getCurrentBlock(editor, selection) {
+    if (!selection) {
+      return null;
+    }
+    const [currentNodeEntry] = Editor.nodes(editor, {
+      match: (node) => {
+        return Element$1.isElement(node);
+      },
+      // Limiter la recherche au chemin de la sélection
+      at: selection
+    });
+    if (currentNodeEntry) {
+      const [node] = currentNodeEntry;
+      return node.type;
+    }
+    return null;
+  },
   /**
    * Permet de gérer l'application et la désapplication du bloc défini
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @param {string} blockType - format défini (ex: gras, italique, etc...)
    * @param {string} bulletType - puces définies dans
    * @returns {void}
@@ -989,7 +1012,7 @@ const CustomEditor = {
   },
   /**
    * Permet de définir si le bloc défini possède un alignement
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @param {string} align - alignement défini (ex: left, right ou center.)
    * @returns {boolean}
    */
@@ -1001,7 +1024,7 @@ const CustomEditor = {
   },
   /**
    * Permet de gérer l'alignement du bloc sélectionné
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @param {string} alignement - alignement défini (ex: left, right ou center)
    * @returns {void}
    */
@@ -1016,7 +1039,7 @@ const CustomEditor = {
   },
   /**
    * Permet de définir si le bloc sélectionné peut être indenté
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @param {string} mark - indentation sélectionné
    * @returns {boolean}
    */
@@ -1041,7 +1064,7 @@ const CustomEditor = {
   },
   /**
    * Permet de gérer l'indentation du bloc sélectionné
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @returns {void}
    */
   handleIndent(editor) {
@@ -1074,7 +1097,7 @@ const CustomEditor = {
   },
   /**
    * Permet de gérer l'désindentation du bloc sélectionné
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @returns {void}
    */
   handleOutdent(editor) {
@@ -1106,7 +1129,7 @@ const CustomEditor = {
   },
   /**
    * Permet de définir si le bloc sélectionné est un lien
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @returns {boolean}
    */
   isLinkActive(editor) {
@@ -1119,7 +1142,7 @@ const CustomEditor = {
   },
   /**
    * Permet de ajouter ou mettre à jour un lien
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @param {string} url - url défini
    * @param {string} openInNewTab - attribut pour définir si le lien ouvre dans un nouvel onglet
    * @returns {void}
@@ -1159,7 +1182,7 @@ const CustomEditor = {
   },
   /**
    * Permet de supprimer le lien
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @returns {void}
    */
   removeLink(editor) {
@@ -1185,7 +1208,7 @@ const CustomEditor = {
   },
   /**
    * Permet de gérer la couleur de fond du bloc sélectionné
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @param {string} coulor - couleur définie
    * @returns {void}
    */
@@ -1197,7 +1220,7 @@ const CustomEditor = {
   },
   /**
    * Permet de gérer la couleur de texte du bloc sélectionné
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @param {string} coulor - couleur définie
    * @returns {void}
    */
@@ -1209,7 +1232,7 @@ const CustomEditor = {
   },
   /**
    * Permet de gérer la taille de police bloc sélectionné
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @param {string} size - taille définie
    * @returns {void}
    */
@@ -1221,7 +1244,7 @@ const CustomEditor = {
   },
   /**
    * Permet de gérer la police d'écriture bloc sélectionné
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @param {string} fontFamily - police définie
    * @returns {void}
    */
@@ -1234,7 +1257,7 @@ const CustomEditor = {
   /**
    * Permet de vérifier si la sélection se situe dans un code
    * 
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @returns {boolean}
    */
   isSelectionInCode(editor) {
@@ -1246,7 +1269,7 @@ const CustomEditor = {
   /**
    * Permet de récupérer le langage actuel
    * 
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @returns {boolean}
    */
   getCurrentCodeLanguage(editor) {
@@ -1257,7 +1280,7 @@ const CustomEditor = {
   },
   /**
    * Gère l'ajout, l'édition et la suppression d'un bloc de code
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @param {string} language - langage défini (ex: cpp(C++), php, etc...)
    * @returns {void}
    */
@@ -1329,7 +1352,7 @@ const CustomEditor = {
   /**
    * Insère un bloc de code
    * 
-   * @param {object} editor 
+   * @param {ReactEditor} editor 
    * @param {string} text
    * @return {void}
    */
@@ -1352,7 +1375,7 @@ const CustomEditor = {
   },
   /**
    * Permet de gérer les images
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @param {string} url - url définie
    * @returns {void}
    */
@@ -1372,7 +1395,7 @@ const CustomEditor = {
   /**
    * Permet de gérer l'upload d'un fichier
    * @param {Event} event
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @returns {void}
    */
   handleFileChange(event, editor) {
@@ -1426,7 +1449,7 @@ const CustomEditor = {
   },
   /**
    * Permet de créer un tableau
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @param {number} rows - nombre de lignes
    * @param {number} columns - nombre de colonnes
    * @returns {void}
@@ -1446,7 +1469,7 @@ const CustomEditor = {
   },
   /**
    * Permet de définir si l'élément sélectionné est dans un tableau
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @returns {boolean}
    */
   isSelectionInTable(editor) {
@@ -1457,7 +1480,7 @@ const CustomEditor = {
   },
   /**
    * Permet d'obtenir le tableau sélectionné
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @returns {void}
    */
   getTableFromSelection(editor) {
@@ -1468,7 +1491,7 @@ const CustomEditor = {
   },
   /**
    * Permet d'ajouter une ligne au tableau sélectionné
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @returns {void}
    */
   addRow(editor) {
@@ -1493,7 +1516,7 @@ const CustomEditor = {
   },
   /**
    * Permet d'ajouter une colonne au tableau sélectionné
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @returns {void}
    */
   addColumn(editor) {
@@ -1530,7 +1553,7 @@ const CustomEditor = {
   },
   /**
    * Permet de supprimer une ligne du tableau sélectionné
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @returns {void}
    */
   deleteRow(editor) {
@@ -1552,7 +1575,7 @@ const CustomEditor = {
   },
   /**
    * Permet de supprimer une colonne du tableau sélectionné
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @returns {void}
    */
   deleteColumn(editor) {
@@ -1588,7 +1611,7 @@ const CustomEditor = {
   },
   /**
    * Permet de supprimer le tableau sélectionné
-   * @param {object} editor - éditeur de texte
+   * @param {ReactEditor} editor - éditeur de texte
    * @returns {void}
    */
   deleteTable(editor) {
@@ -1734,6 +1757,7 @@ const ListElement = ({ attributes, children, element }) => {
     textAlign: element.align || "left",
     listStyleType: element.listStyleType || "disc"
   };
+  console.log(element.type);
   switch (element.type) {
     case "bullet-list":
       return /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "rtf", style, ...attributes, children });
@@ -1841,6 +1865,7 @@ const ThemeProvider = ({ showTheme, backgroundDarkColor, borderDarkColor, imageD
 const useTheme = () => useContext(ThemeContext);
 const ReactTextForgeContext = createContext();
 const ReactTextForgeProvider = ({ backgroundColor, borderColor, imageColor, editor, children }) => {
+  const [dropdownActive, setDropdownActive] = useState(null);
   const { showTheme, isDarkTheme, backgroundDarkColor, borderDarkColor, imageDarkColor } = useTheme();
   const resolvedBackgroundColor = showTheme && isDarkTheme ? backgroundDarkColor : backgroundColor;
   const resolvedBorderColor = showTheme && isDarkTheme ? borderDarkColor : borderColor;
@@ -1850,12 +1875,20 @@ const ReactTextForgeProvider = ({ backgroundColor, borderColor, imageColor, edit
     document.documentElement.style.setProperty("--border-color", resolvedBorderColor);
     document.documentElement.style.setProperty("--image-color", resolvedImageColor);
   }, [resolvedBackgroundColor, resolvedBorderColor, resolvedImageColor]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ReactTextForgeContext.Provider, { value: { backgroundColor: resolvedBackgroundColor, borderColor: resolvedBorderColor, editor, imageColor: resolvedImageColor }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rtf react-text-forge", style: { backgroundColor: resolvedBackgroundColor, borderColor: resolvedBorderColor }, children }) });
+  const value = {
+    backgroundColor: resolvedBackgroundColor,
+    borderColor: resolvedBorderColor,
+    editor,
+    imageColor: resolvedImageColor,
+    dropdownActive,
+    setDropdownActive
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ReactTextForgeContext.Provider, { value, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rtf react-text-forge", style: { backgroundColor: resolvedBackgroundColor, borderColor: resolvedBorderColor }, children }) });
 };
 const useReactTextForgeContext = () => {
   return useContext(ReactTextForgeContext);
 };
-const BulletTypeSelector = ({ onChange, selectStyle, toggleForm }) => {
+const BulletTypeSelector = ({ onChange, selectStyle, onClose }) => {
   const bulletTypes = [
     { value: "disc", label: "Disque" },
     { value: "circle", label: "Cercle" },
@@ -1866,7 +1899,7 @@ const BulletTypeSelector = ({ onChange, selectStyle, toggleForm }) => {
     { value: "'➔'", label: "Flèche épaisse" }
   ];
   const { editor } = useReactTextForgeContext();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { onMouseLeave: () => toggleForm(false), style: selectStyle, className: "rtf dropdown-menu", children: bulletTypes.map((type) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { onMouseLeave: onClose, style: selectStyle, className: "rtf dropdown-menu", children: bulletTypes.map((type) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "li",
     {
       value: type.value,
@@ -1877,7 +1910,7 @@ const BulletTypeSelector = ({ onChange, selectStyle, toggleForm }) => {
     type.value
   )) });
 };
-const NumeredTypeSelector = ({ onChange, selectStyle, toggleForm }) => {
+const NumeredTypeSelector = ({ onChange, selectStyle, onClose }) => {
   const numeredTypes = [
     { value: "decimal", label: "Décimal" },
     { value: "upper-roman", label: "Lettres Romaines majuscules" },
@@ -1886,7 +1919,7 @@ const NumeredTypeSelector = ({ onChange, selectStyle, toggleForm }) => {
     { value: "lower-greek", label: "Lettres Grecques minuscules" }
   ];
   const { editor } = useReactTextForgeContext();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { onMouseLeave: () => toggleForm(false), style: selectStyle, className: "rtf dropdown-menu", children: numeredTypes.map((type) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { onMouseLeave: onClose, style: selectStyle, className: "rtf dropdown-menu", children: numeredTypes.map((type) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "li",
     {
       value: type.value,
@@ -2003,15 +2036,21 @@ function Images({ format, imageColor }) {
   return returnImage();
 }
 const BlockListDropdown = ({ format, isActive, onMouseDown }) => {
-  const { backgroundColor, editor, imageColor } = useReactTextForgeContext();
-  const [showBulletOptions, setShowBulletOptions] = useState(false);
+  const { backgroundColor, editor, imageColor, dropdownActive, setDropdownActive } = useReactTextForgeContext();
   const selectStyle = {
     backgroundColor,
     color: imageColor
   };
   const handleBulletTypeChange = (bulletType) => {
     CustomEditor.toggleBlock(editor, format === "bulletList" ? "bullet-list" : "numbered-list", bulletType);
-    setShowBulletOptions(false);
+    setDropdownActive(null);
+  };
+  const toggleDropDown = () => {
+    if (dropdownActive !== format) {
+      setDropdownActive(format);
+    } else {
+      setDropdownActive(null);
+    }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -2028,42 +2067,47 @@ const BlockListDropdown = ({ format, isActive, onMouseDown }) => {
             {
               className: "rtf tool tool--arrow",
               style: { color: selectStyle.color },
-              onClick: () => setShowBulletOptions(!showBulletOptions),
-              children: showBulletOptions ? "↑" : "↓"
+              onClick: toggleDropDown,
+              children: dropdownActive === format ? "↑" : "↓"
             }
           )
         ]
       }
     ),
-    showBulletOptions && (format === "bulletList" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    dropdownActive === "bulletList" && format === "bulletList" && /* @__PURE__ */ jsxRuntimeExports.jsx(
       BulletTypeSelector,
       {
         selectStyle,
         onChange: handleBulletTypeChange,
-        toggleForm: setShowBulletOptions
+        onClose: () => setDropdownActive(null)
       }
-    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ),
+    dropdownActive === "numberedList" && format === "numberedList" && /* @__PURE__ */ jsxRuntimeExports.jsx(
       NumeredTypeSelector,
       {
         selectStyle,
         onChange: handleBulletTypeChange,
-        toggleForm: setShowBulletOptions
+        onClose: () => setDropdownActive(null)
       }
-    ))
+    )
   ] });
 };
-function ContainerDropdown({ disabled = false, elements, elementSelected, format, isOpen, setIsOpen, onClick }) {
-  const { backgroundColor, imageColor } = useReactTextForgeContext();
+function ContainerDropdown({ disabled = false, elements, elementSelected, format, onClick }) {
+  const { backgroundColor, imageColor, dropdownActive, setDropdownActive } = useReactTextForgeContext();
   const toggleForm = () => {
-    setIsOpen(!isOpen);
+    if (dropdownActive !== null && dropdownActive === format) {
+      setDropdownActive(null);
+    } else {
+      setDropdownActive(format);
+    }
   };
   const selectElement = (element) => {
     onClick(element);
-    setIsOpen(false);
+    setDropdownActive(null);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rtf dropdown tool", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: toggleForm, className: "rtf dropdown-toggle", disabled, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Images, { format, imageColor }) }),
-    isOpen && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { style: { backgroundColor, color: imageColor }, className: "rtf dropdown-menu", onMouseLeave: toggleForm, children: elements.map((element, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    dropdownActive === format && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { style: { backgroundColor, color: imageColor }, className: "rtf dropdown-menu", onMouseLeave: toggleForm, children: elements.map((element, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       "li",
       {
         style: { backgroundColor: `${elementSelected && element === elementSelected ? `color-mix(in srgb, ${backgroundColor} 80%, ${isDarkColor(backgroundColor) ? "white" : "black"})` : backgroundColor}` },
@@ -2075,7 +2119,6 @@ function ContainerDropdown({ disabled = false, elements, elementSelected, format
   ] });
 }
 const FontSizeDropdown = ({ disabled, sizeSelected, onSelectSize }) => {
-  const [isOpen, setIsOpen] = useState(false);
   const fontSizes = ["10px", "12px", "14px", "16px", "18px", "20px", "24px", "28px", "36px"];
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ContainerDropdown,
@@ -2084,14 +2127,11 @@ const FontSizeDropdown = ({ disabled, sizeSelected, onSelectSize }) => {
       elements: fontSizes,
       elementSelected: sizeSelected,
       format: "size",
-      isOpen,
-      setIsOpen,
       onClick: onSelectSize
     }
   );
 };
 const FontFamilyDropdown = ({ fontFamilySelected, onSelectFontFamily }) => {
-  const [isOpen, setIsOpen] = useState(false);
   const fontFamilies = ["Arial", "Arial Black", "Bookman", "Comic Sans MS", "Courier", "Courier New", "Garamond", "Georgia", "Helvetica", "Impact", "Palatino", "Times", "Times New Roman", "Trebuchet MS", "Verdana"];
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ContainerDropdown,
@@ -2099,8 +2139,6 @@ const FontFamilyDropdown = ({ fontFamilySelected, onSelectFontFamily }) => {
       elements: fontFamilies,
       elementSelected: fontFamilySelected,
       format: "fontFamily",
-      isOpen,
-      setIsOpen,
       onClick: onSelectFontFamily
     }
   );
@@ -2207,29 +2245,21 @@ const LinkForm = ({ onClose, initialUrl = "", isOpenInNewTab }) => {
  *
  * For any questions or suggestions, please contact: administrateur@nhumeria.fr
  */
-function useToolbar(editor) {
+function useToolbar(editor, setDropdownActive) {
   const [selectedLink, setSelectedLink] = useState("");
   const [colorMode, setColorMode] = useState("");
   const [openInNewTab, setOpenInNewTab] = useState(false);
   const [selectedColor, setSelectedColor] = useState("");
   const [selectedBackgroundColor, setSelectedBackgroundColor] = useState("");
   const [activeBlock, setActiveBlock] = useState("paragraph");
-  const [showColorPicker, setShowColorPicker] = useState(false);
   const [selectedLanguage, setSelectedLanguage] = useState("");
-  const [showLinkForm, setShowLinkForm] = useState(false);
-  const toggleLinkForm = () => {
-    setShowLinkForm(!showLinkForm);
-  };
-  const toggleColorPicker = () => {
-    setShowColorPicker(!showColorPicker);
-  };
   const handleColorChange = (color) => {
     CustomEditor.applyTextColor(editor, color);
-    toggleColorPicker();
+    setDropdownActive(null);
   };
   const handleBackgroundColorChange = (color) => {
     CustomEditor.applyBackgroundTextColor(editor, color);
-    toggleColorPicker();
+    setDropdownActive(null);
   };
   const handleBlockTypeChange = (blockType) => {
     CustomEditor.toggleBlock(editor, blockType);
@@ -2250,6 +2280,7 @@ function useToolbar(editor) {
   };
   return {
     activeBlock,
+    setActiveBlock,
     colorMode,
     setColorMode,
     openInNewTab,
@@ -2262,13 +2293,8 @@ function useToolbar(editor) {
     setSelectedLanguage,
     selectedLink,
     setSelectedLink,
-    showColorPicker,
-    showLinkForm,
-    setShowLinkForm,
     // Fonctions utiles
     detectCurrentLanguage,
-    toggleLinkForm,
-    toggleColorPicker,
     handleColorChange,
     handleBackgroundColorChange,
     handleBlockTypeChange
@@ -2276,6 +2302,7 @@ function useToolbar(editor) {
 }
 function ColorPickerPopup({ selectedColor, onSelectColor, onClose }) {
   const [color, setColor] = useState("#ffffff");
+  const { theme } = useTheme();
   const { editor, backgroundColor, borderColor, imageColor } = useReactTextForgeContext();
   const style = {
     backgroundColor,
@@ -2318,8 +2345,18 @@ function ColorPickerPopup({ selectedColor, onSelectColor, onClose }) {
       setColor(selectedColor);
     }
   }, [selectedColor]);
+  useEffect(() => {
+    const inputs = document.querySelectorAll(".sketch-picker input");
+    const labels = document.querySelectorAll(".sketch-picker label");
+    inputs.forEach((input, index) => {
+      input.style.border = "2px solid " + borderColor;
+      input.style.background = backgroundColor;
+      input.style.color = imageColor;
+      labels[index].style.color = imageColor;
+    });
+  }, [theme]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { onMouseLeave: onClose, className: "rtf color-picker-popup", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SketchPicker, { styles: pickerStyles, color, onChangeComplete: handleChangeComplete }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SketchPicker, { className: "rtf sketch-picker", styles: pickerStyles, color, onChangeComplete: handleChangeComplete }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style, className: "rtf link-form-actions", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "rtf", style: confirmStyle, onClick: handleApplyColor, disabled: !color, children: "Appliquer" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "rtf", style: cancelStyle, onClick: handleCancel, children: "Annuler" })
@@ -2327,13 +2364,14 @@ function ColorPickerPopup({ selectedColor, onSelectColor, onClose }) {
   ] });
 }
 const BlockquoteButton = () => {
-  const { editor, backgroundColor, imageColor } = useReactTextForgeContext();
+  const { editor, backgroundColor, imageColor, setDropdownActive } = useReactTextForgeContext();
   const isActive = CustomEditor.isBlockquoteActive(editor);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "button",
     {
       onMouseDown: (event) => {
         event.preventDefault();
+        setDropdownActive(null);
         CustomEditor.toggleBlockquote(editor);
       },
       style: { backgroundColor: isActive ? `color-mix(in srgb, ${backgroundColor} 80%, ${isDarkColor(backgroundColor) ? "white" : "black"})` : "" },
@@ -2375,7 +2413,7 @@ const Tooltip = ({ text, children, position = "top" }) => {
 };
 const FormatButton = ({ activeMarks, format, isActive, tooltip }) => {
   const [selectedFontFamily, setSelectedFontFamily] = useState("");
-  const { backgroundColor, editor, imageColor } = useReactTextForgeContext();
+  const { backgroundColor, editor, imageColor, dropdownActive, setDropdownActive } = useReactTextForgeContext();
   const {
     activeBlock,
     colorMode,
@@ -2390,13 +2428,8 @@ const FormatButton = ({ activeMarks, format, isActive, tooltip }) => {
     selectedColor,
     setSelectedColor,
     selectedLink,
-    setSelectedLink,
-    showColorPicker,
-    showLinkForm,
-    setShowLinkForm,
-    toggleColorPicker,
-    toggleLinkForm
-  } = useToolbar(editor);
+    setSelectedLink
+  } = useToolbar(editor, setDropdownActive);
   const isHeading = activeBlock === "h1" || activeBlock === "h2";
   const alignList = ["left", "center", "right"];
   const handleFontSizeChange = (size) => {
@@ -2430,7 +2463,10 @@ const FormatButton = ({ activeMarks, format, isActive, tooltip }) => {
     {
       title: tooltip,
       className: "rtf tool",
-      onClick: () => format === "indent" ? CustomEditor.handleIndent(editor) : CustomEditor.handleOutdent(editor),
+      onClick: () => {
+        setDropdownActive(null);
+        format === "indent" ? CustomEditor.handleIndent(editor) : CustomEditor.handleOutdent(editor);
+      },
       disabled: !isActive,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(Images, { format, imageColor: isActive ? imageColor : `color-mix(in srgb, ${imageColor} 40%, black)` })
     }
@@ -2450,18 +2486,18 @@ const FormatButton = ({ activeMarks, format, isActive, tooltip }) => {
       {
         onMouseDown: (event) => {
           event.preventDefault();
+          setDropdownActive("href");
           handleMouseDown();
-          toggleLinkForm();
         },
         title: tooltip,
         className: `rtf tool tool--${isActive ? "active" : "inactive"}`,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(Images, { format, imageColor })
       }
     ),
-    showLinkForm && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    dropdownActive === "href" && /* @__PURE__ */ jsxRuntimeExports.jsx(
       LinkForm,
       {
-        onClose: () => setShowLinkForm(false),
+        onClose: () => setDropdownActive(null),
         initialUrl: selectedLink,
         isOpenInNewTab: openInNewTab
       }
@@ -2475,25 +2511,25 @@ const FormatButton = ({ activeMarks, format, isActive, tooltip }) => {
           event.preventDefault();
           handleMouseDown();
           if (format === "color") {
+            setDropdownActive("color");
             setSelectedColor(activeMarks[format]);
             setColorMode("color");
-            toggleColorPicker();
           } else {
+            setDropdownActive("bgColor");
             setSelectedBackgroundColor(activeMarks[format]);
             setColorMode("bgColor");
-            toggleColorPicker();
           }
         },
         className: `rtf tool tool--${isActive ? "active" : "inactive"}`,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(Images, { format, imageColor })
       }
     ),
-    showColorPicker && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    dropdownActive === format && /* @__PURE__ */ jsxRuntimeExports.jsx(
       ColorPickerPopup,
       {
         selectedColor: colorMode === "color" ? selectedColor : selectedBackgroundColor,
         onSelectColor: colorMode === "color" ? handleColorChange : handleBackgroundColorChange,
-        onClose: colorMode === "color" ? toggleColorPicker : toggleColorPicker
+        onClose: () => setDropdownActive(null)
       }
     )
   ] }) : format === "blockquote" ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlockquoteButton, { tooltip }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2501,6 +2537,7 @@ const FormatButton = ({ activeMarks, format, isActive, tooltip }) => {
     {
       onMouseDown: (event) => {
         event.preventDefault();
+        setDropdownActive(null);
         if (alignList.includes(format)) {
           CustomEditor.toggleAlign(editor, format);
         } else {
@@ -2519,8 +2556,12 @@ const BlockTypeDropdown = forwardRef(({ tooltip }, ref) => {
   const { editor } = useReactTextForgeContext();
   const {
     activeBlock,
+    setActiveBlock,
     handleBlockTypeChange
   } = useToolbar(editor);
+  useEffect(() => {
+    setActiveBlock(CustomEditor.getCurrentBlock(editor, editor.selection));
+  }, [editor.selection]);
   const blockTypes = [
     {
       type: "paragraph",
@@ -2547,7 +2588,7 @@ const BlockTypeDropdown = forwardRef(({ tooltip }, ref) => {
 });
 const LanguageDropdown = forwardRef((props, ref) => {
   const [isOpen, setIsOpen] = useState(false);
-  const { backgroundColor, editor, imageColor } = useReactTextForgeContext();
+  const { backgroundColor, editor, imageColor, dropdownActive, setDropdownActive } = useReactTextForgeContext();
   const {
     selectedLanguage,
     setSelectedLanguage
@@ -2573,6 +2614,11 @@ const LanguageDropdown = forwardRef((props, ref) => {
   };
   const toggleForm = () => {
     setIsOpen(!isOpen);
+    if (!isOpen === true) {
+      setDropdownActive("code");
+      return;
+    }
+    setDropdownActive(null);
   };
   const handleLanguageChange = (language) => {
     setSelectedLanguage(language);
@@ -2581,7 +2627,7 @@ const LanguageDropdown = forwardRef((props, ref) => {
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref, className: `rtf dropdown tool ${selectedLanguage && selectedLanguage !== "init" && selectedLanguage !== "" ? "tool--active" : ""}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "rtf dropdown-toggle", onClick: toggleForm, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Images, { format: "blockCode", imageColor }) }),
-    isOpen && /* @__PURE__ */ jsxRuntimeExports.jsxs("ul", { style: dropdownStyle, onMouseLeave: toggleForm, className: "rtf dropdown-menu", children: [
+    isOpen && dropdownActive === "code" && /* @__PURE__ */ jsxRuntimeExports.jsxs("ul", { style: dropdownStyle, onMouseLeave: toggleForm, className: "rtf dropdown-menu", children: [
       selectedLanguage && /* @__PURE__ */ jsxRuntimeExports.jsx("li", { onClick: () => handleLanguageChange("init"), children: "Réinitialiser" }),
       Object.keys(languages).map((lang) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         "li",
@@ -2600,7 +2646,7 @@ const LanguageDropdown = forwardRef((props, ref) => {
   ] });
 });
 const ImageForm = forwardRef((props, ref) => {
-  const { editor, imageColor } = useReactTextForgeContext();
+  const { editor, imageColor, setDropdownActive } = useReactTextForgeContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rtf tool image-upload-container", ref, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "input",
@@ -2612,7 +2658,7 @@ const ImageForm = forwardRef((props, ref) => {
         className: "rtf hidden-file-input"
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "file-input", className: "rtf image-upload-label", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Images, { format: "image", imageColor }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "file-input", className: "rtf image-upload-label", onClick: () => setDropdownActive(null), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Images, { format: "image", imageColor }) })
   ] });
 });
 const TableForm = ({ onClose }) => {
@@ -2662,8 +2708,8 @@ const TableForm = ({ onClose }) => {
     ] })
   ] });
 };
-const TableDropdown = forwardRef(({ allButtons, hiddenButtons }, ref) => {
-  const { editor, imageColor } = useReactTextForgeContext();
+const TableButtons = forwardRef(({ allButtons, hiddenButtons }, ref) => {
+  const { editor, imageColor, setDropdownActive } = useReactTextForgeContext();
   const isTableSelected = CustomEditor.isSelectionInTable(editor);
   const buttons = [
     { name: "deleteTable", alt: "Supprimer le tableau", onClick: CustomEditor.deleteTable },
@@ -2672,6 +2718,10 @@ const TableDropdown = forwardRef(({ allButtons, hiddenButtons }, ref) => {
     { name: "deleteRow", alt: "Supprimer une ligne", onClick: CustomEditor.deleteRow },
     { name: "deleteColumn", alt: "Supprimer une colonne", onClick: CustomEditor.deleteColumn }
   ];
+  const handleClick = (button) => {
+    setDropdownActive(null);
+    button.onClick(editor);
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: buttons.map((button, index) => {
     var _a, _b;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { text: allButtons.find((action) => action.format === button.name).tooltip, position: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2680,7 +2730,7 @@ const TableDropdown = forwardRef(({ allButtons, hiddenButtons }, ref) => {
         ref: (el) => ref.current[button.name] = el,
         className: "rtf tool",
         style: { display: hiddenButtons.includes(button.name) ? "none" : "inline-block" },
-        onClick: () => button.onClick(editor),
+        onClick: () => handleClick(button),
         disabled: !isTableSelected,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Images,
@@ -2698,7 +2748,8 @@ const Toolbar = ({ activeMarks }) => {
   const [hiddenButtons, setHiddenButtons] = useState([]);
   const toolbarRef = useRef(null);
   const buttonsRef = useRef({});
-  const { editor, imageColor, backgroundColor } = useReactTextForgeContext();
+  const modalRef = useRef(null);
+  const { editor, imageColor, backgroundColor, dropdownActive, setDropdownActive } = useReactTextForgeContext();
   const allButtons = [
     { format: "blockType", tooltip: "Insérer un bloc de texte" },
     { format: "bold", tooltip: "Gras (Ctrl+B)" },
@@ -2732,26 +2783,40 @@ const Toolbar = ({ activeMarks }) => {
     { format: "redo", tooltip: "Rétablir (Ctrl+Y)" }
   ];
   const [showTableForm, setShowTableForm] = useState(false);
+  const [toolbarGap, setToolbarGap] = useState(0);
   const tablesActions = ["deleteTable", "addRow", "addColumn", "deleteRow", "deleteColumn"];
   const toggleTableForm = () => {
     setShowTableForm(!showTableForm);
+    if (!showTableForm === true) {
+      setDropdownActive("table");
+      return;
+    }
+    setDropdownActive(null);
   };
   const handleBlur = () => {
     document.querySelector(".rtf.toolbar").blur();
   };
-  const toggleModal = () => setShowModal((prev) => !prev);
+  const toggleModal = () => {
+    setShowModal((prev) => !prev);
+  };
   const handleResize = () => {
     if (toolbarRef.current) {
       const toolbar = toolbarRef.current;
       const toolbarWidth = toolbar.clientWidth - 15;
-      const totalWidth = 978;
+      let totalWidth = 0;
+      allButtons.forEach((button, index) => {
+        const buttonElement = buttonsRef.current[button.format];
+        if (buttonElement) {
+          totalWidth += (index === 0 ? buttonElement.clientWidth : buttonsRef.current[allButtons[1].format].clientWidth) + 5;
+        }
+      });
       if (totalWidth > toolbarWidth) {
         let currentWidth = 0;
         const visibleButtons = [];
-        allButtons.forEach((button) => {
+        allButtons.forEach((button, index) => {
           const buttonElement = buttonsRef.current[button.format];
           if (buttonElement) {
-            currentWidth += (button.format === "blockType" ? buttonElement.clientWidth : 25) + 5;
+            currentWidth += (index === 0 ? buttonElement.clientWidth : buttonsRef.current[allButtons[1].format].clientWidth) + 5;
             if (currentWidth <= toolbarWidth) {
               visibleButtons.push(button.format);
             }
@@ -2774,7 +2839,14 @@ const Toolbar = ({ activeMarks }) => {
       resizeObserver.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rtf toolbar-container", children: [
+  useEffect(() => {
+    if (modalRef.current) {
+      setToolbarGap(modalRef.current.clientHeight);
+    } else {
+      setToolbarGap(0);
+    }
+  }, [showModal]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rtf toolbar-container", style: { marginBottom: toolbarGap }, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rtf toolbar", onClick: handleBlur, ref: toolbarRef, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(BlockTypeDropdown, { ref: (el) => buttonsRef.current["blockType"] = el, tooltip: allButtons.find((button) => button.format === "blockType").tooltip }),
       Object.keys(activeMarks).map((format, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2797,7 +2869,7 @@ const Toolbar = ({ activeMarks }) => {
       )),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rtf dropdown tool", style: { display: hiddenButtons.includes("table") ? "none" : "flex", padding: hiddenButtons.includes("table") ? 0 : 5 }, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { text: allButtons.find((action) => action.format === "table").tooltip, position: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { ref: (el) => buttonsRef.current["table"] = el, onClick: toggleTableForm, className: "rtf dropdown-toggle", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Images, { format: "table", imageColor }) }) }),
-        showTableForm && !hiddenButtons.includes("table") && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        showTableForm && !hiddenButtons.includes("table") && dropdownActive === "table" && /* @__PURE__ */ jsxRuntimeExports.jsx(
           TableForm,
           {
             onClose: toggleTableForm
@@ -2805,16 +2877,16 @@ const Toolbar = ({ activeMarks }) => {
         )
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        TableDropdown,
+        TableButtons,
         {
           allButtons,
           hiddenButtons,
           ref: buttonsRef
         }
       ),
-      !hiddenButtons.includes("image") && /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { text: allButtons.find((button) => button.format === "image").tooltip, position: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ImageForm, { ref: (el) => buttonsRef.current["image"] = el }) }),
-      !hiddenButtons.includes("code") && /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { text: allButtons.find((button) => button.format === "code").tooltip, position: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LanguageDropdown, { ref: (el) => buttonsRef.current["code"] = el }) }),
-      ["undo", "redo"].map((historyAction) => !hiddenButtons.includes(historyAction) && /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { text: allButtons.find((button) => button.format === historyAction).tooltip, position: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rtf dropdown tool", style: { display: hiddenButtons.includes("image") ? "none" : "flex", padding: 0 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { text: allButtons.find((button) => button.format === "image").tooltip, position: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ImageForm, { ref: (el) => buttonsRef.current["image"] = el }) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rtf dropdown tool", style: { display: hiddenButtons.includes("code") ? "none" : "flex", padding: 0 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { text: allButtons.find((button) => button.format === "code").tooltip, position: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LanguageDropdown, { ref: (el) => buttonsRef.current["code"] = el }) }) }),
+      ["undo", "redo"].map((historyAction) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rtf dropdown tool", style: { display: hiddenButtons.includes(historyAction) ? "none" : "flex", padding: 0 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { text: allButtons.find((button) => button.format === historyAction).tooltip, position: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
           ref: (el) => buttonsRef.current[historyAction] = el,
@@ -2833,21 +2905,29 @@ const Toolbar = ({ activeMarks }) => {
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(Images, { format: historyAction, imageColor: editor.history[historyAction + "s"].length === 0 ? `color-mix(in srgb, ${imageColor} 40%, ${isDarkColor(imageColor) ? "white" : "black"})` : imageColor })
         },
         historyAction
-      ) }, historyAction)),
+      ) }) }, historyAction)),
       hiddenButtons.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { text: "Voir plus", position: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "rtf tool toolbar-more-button", onClick: toggleModal, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Images, { format: "more", imageColor }) }) })
     ] }),
-    showModal && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rtf toolbar-modal", style: { backgroundColor }, onMouseLeave: () => setShowModal(false), children: hiddenButtons.map((format) => {
+    showModal && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rtf toolbar-modal", ref: modalRef, style: { backgroundColor }, onMouseLeave: () => setShowModal(false), children: hiddenButtons.map((format) => {
       if (format === "image" || format === "code" || format === "table" || format === "deleteTable" || format === "addRow" || format === "addColumn" || format === "deleteRow" || format === "deleteColumn") {
-        return format === "image" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ImageForm, { ref: (el) => buttonsRef.current["image"] = el }, format) : format === "code" ? /* @__PURE__ */ jsxRuntimeExports.jsx(LanguageDropdown, { ref: (el) => buttonsRef.current["code"] = el }, format) : format === "table" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rtf dropdown tool", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { text: allButtons.find((action) => action.format === format).tooltip, position: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            className: "rtf dropdown-toggle",
-            ref: (el) => buttonsRef.current[format] = el,
-            onClick: toggleTableForm,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Images, { format, imageColor })
-          }
-        ) }, format) }) : tablesActions.includes(format) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-          TableDropdown,
+        return format === "image" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ImageForm, { ref: (el) => buttonsRef.current["image"] = el }, format) : format === "code" ? /* @__PURE__ */ jsxRuntimeExports.jsx(LanguageDropdown, { ref: (el) => buttonsRef.current["code"] = el }, format) : format === "table" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rtf dropdown tool", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { text: allButtons.find((action) => action.format === format).tooltip, position: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              className: "rtf dropdown-toggle",
+              ref: (el) => buttonsRef.current[format] = el,
+              onClick: toggleTableForm,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Images, { format, imageColor })
+            }
+          ) }),
+          showTableForm && dropdownActive === "table" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            TableForm,
+            {
+              onClose: toggleTableForm
+            }
+          )
+        ] }, format) : tablesActions.includes(format) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          TableButtons,
           {
             allButtons,
             hiddenButtons: tablesActions.filter((tablesAction) => tablesAction !== format),