Designer customization Issue

[linesh98]

I customized the designer as shown below, but it has some issues. I’ll provide the code as well. I added a custom button to the designer and hide all the icons in the header toolbar. I placed the custom button in the top-right corner to serve the same purpose as the original Edit/Preview toggle and theme switch button.

Now, I need to include the Undo/Redo and Multilanguage buttons. However, I’m unable to access these specific buttons from the designer. When I set hidden: false for these two buttons in builder customization, they don’t appear. These buttons only work when I remove the entire builder customization from the code.

const builderCustomizations: CustomizationMap = {
JsonViewButton: { hidden: true },
MainMenu_Button: { hidden: true },
ResolutionSelect: { hidden: true },
ToggleThemeButton: { hidden: true },
Actions_Tab: { hidden: true },
Actions_Tab_Content: { hidden: true },
LocalizationSelect: { hidden: true },
ToggleModeButton: { hidden: true },
Header_Toolbar: { hidden: true },
MainMenu_Dropdown: {
style: #menuitem-\\:r5\\:, #menuitem-\\:r6\\: { display: none; },
},
Header: {
customRenderer: () => (
<>
<style>
{.hidden-panel { display: none !important; }}
</style>
<div
style={{
position: "relative",
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
width: "100%",
padding: "0.5rem",
}}
>


</>
),
},
};

and
const CustomToggleModeButton = () => {
const builder = useFormBuilder();
const label = builder.builderMode === "builder" ? "Preview Mode" : "Edit Mode";

const toggleMode = useCallback(() => {
const newMode = builder.builderMode === "builder" ? "viewer" : "builder";
builder.builderMode = newMode;

const leftPanel = document.querySelector(".FE_LeftPanel");
const rightPanel = document.querySelector(".FE_RightPanel");

if (leftPanel && rightPanel) {
  if (newMode === "viewer") {
    leftPanel.classList.add("hidden-panel");
    rightPanel.classList.add("hidden-panel");
  } else {
    leftPanel.classList.remove("hidden-panel");
    rightPanel.classList.remove("hidden-panel");
  }
}

}, [builder]);

return {label};
};

and <FormBuilder
view={view}
builderRef={(ref) => {
if (ref) onRefReady(ref);
}}
customization={builderCustomizations}
onFormDataChange={({ data }) => {
onDataChange(data);
}}
/>