feat: Refactor WYSIWYG Editor UI

Author: iduspara

src/app/page.tsx

@@ -36,9 +36,10 @@ import { useIsMobile } from "@/hooks/use-mobile";
 import SocialLinks from "@/components/form-builder/sidebar/socialLinks";
 import { OpenJsonDialog } from "@/components/form-builder/dialogs/open-json-dialog";
 import { useForm } from "react-hook-form";
-import { getGridRows, updateColSpans } from "@/lib/utils";
+import { cn, getGridRows, updateColSpans } from "@/lib/utils";
 import { RenderEditorComponent } from "@/components/form-builder/helpers/render-editor-component";
 import { FormComponentModel } from "@/models/FormComponent";
+import { EditorToolbar } from "@/components/form-builder/form-components/wysiwyg/editor-toolbar";
 
 export default function FormBuilderPage() {
   const isMobile = useIsMobile();
@@ -60,7 +61,8 @@ export default function FormBuilderPage() {
     code: string;
     dependenciesImports: DependenciesImports;
   }>({ code: "", dependenciesImports: {} });
-  const [draggingDOMElement, setDraggingDOMElement] = useState<HTMLElement | null>(null);
+  const [draggingDOMElement, setDraggingDOMElement] =
+    useState<HTMLElement | null>(null);
   const form = useForm();
 
   // Memoize static values
@@ -85,7 +87,7 @@ export default function FormBuilderPage() {
   const moveComponent = useFormBuilderStore((state) => state.moveComponent);
   const addComponent = useFormBuilderStore((state) => state.addComponent);
   const gridRows = getGridRows(components, viewport);
-
+  const editor = useFormBuilderStore((state) => state.editor);
   const handleGenerateCode = async () => {
     const generatedCode = await generateFormCode(components);
     setGeneratedCode(generatedCode);
@@ -99,12 +101,8 @@ export default function FormBuilderPage() {
     },
   });
 
-
   // Memoize sensors array
-  const sensors = useMemo(
-    () => [pointerSensor],
-    [pointerSensor]
-  );
+  const sensors = useMemo(() => [pointerSensor], [pointerSensor]);
 
   // Memoize drag end handler
   const handleDragEnd = (event: any) => {
@@ -223,7 +221,9 @@ export default function FormBuilderPage() {
   const handleDragStart = useCallback(
     (event: DragStartEvent) => {
       selectComponent(null);
-      const element = document.querySelector(`[data-item-id="${event.active.data.current?.component.id}"]`);
+      const element = document.querySelector(
+        `[data-item-id="${event.active.data.current?.component.id}"]`
+      );
       if (element) {
         setDraggingDOMElement(element as HTMLElement);
       }
@@ -233,7 +233,7 @@ export default function FormBuilderPage() {
 
   return (
     <div>
-      <div className="fixed top-0 w-full flex flex-row gap-2 justify-between bg-white border-b z-10">
+      <div className="fixed top-0 w-full flex flex-row gap-2 justify-between bg-white border-b z-30">
         <div className="flex flex-row gap-2 items-center justify-center md:justify-start p-2 px-4 border-r w-full md:w-[300px]">
           <BlocksIcon className="h-6 w-6" strokeWidth={2} />
           <h2 className="text-lg font-semibold">
@@ -243,24 +243,35 @@ export default function FormBuilderPage() {
             </sup>
           </h2>
         </div>
-        <div className="p-2 flex-1 grid-cols-2 xl:grid-cols-3 hidden md:grid">
-          <div className="hidden xl:block col-span-1">
+        <div className="p-2 flex-1 grid grid-cols-7 2xl:grid-cols-3">
+          <div
+            className={cn("hidden 2xl:block col-span-1", editor && "2xl:hidden")}
+          >
             {process.env.NODE_ENV === "development" && <OpenJsonDialog />}
           </div>
-          <div className="col-span-1 flex xl:justify-center">
-            <div className=" text-center flex flex-row items-center justify-center gap-1 border rounded-md h-9 px-4">
-              <div
-                className="max-w-80 overflow-y-hidden whitespace-nowrap text-sm outline-none scrollbar-hide"
-                contentEditable
-                suppressContentEditableWarning
-                onBlur={(e) => updateFormTitle(e.target.innerText)}
-              >
-                {formTitle}
+          <div className="col-span-5 2xl:col-span-1 2xl:col-start-2 flex 2xl:justify-center">
+            {editor ? (
+              <EditorToolbar editor={editor} isEditable={true} />
+            ) : (
+              <div className="text-center flex flex-row items-center justify-center gap-1 border rounded-md h-9 px-4">
+                <div
+                  className="max-w-80 overflow-y-hidden whitespace-nowrap text-sm outline-none scrollbar-hide"
+                  contentEditable
+                  suppressContentEditableWarning
+                  onBlur={(e) => updateFormTitle(e.target.innerText)}
+                >
+                  {formTitle}
+                </div>
+                <span className="text-muted-foreground text-xs">.tsx</span>
               </div>
-              <span className="text-muted-foreground text-xs">.tsx</span>
-            </div>
+            )}
           </div>
-          <div className="col-span-1 hidden md:flex justify-end gap-4 ">
+          <div
+            className={cn(
+              "col-span-2 2xl:col-span-1 hidden md:flex justify-end gap-4",
+              editor && ""
+            )}
+          >
             {process.env.NODE_ENV === "development" && (
               <Button
                 variant="ghost"
@@ -335,7 +346,12 @@ export default function FormBuilderPage() {
               <DragOverlay>
                 {draggingDOMElement && (
                   <div className="bg-white p-2 rounded-md shadow opacity-80">
-                    <div dangerouslySetInnerHTML={{ __html: draggingDOMElement.innerHTML }} className="max-h-52 overflow-hidden" />
+                    <div
+                      dangerouslySetInnerHTML={{
+                        __html: draggingDOMElement.innerHTML,
+                      }}
+                      className="max-h-52 overflow-hidden"
+                    />
                   </div>
                 )}
               </DragOverlay>

src/components/form-builder/canvas/sortable-row.tsx

@@ -128,8 +128,9 @@ export const RowColumn = ({
         colStartClasses,
         mode === "editor" && "group/component hover:outline-1 hover:outline-offset-6 hover:outline-primary cursor-pointer",
         columnIsDragging && "cursor-grabbing",
+        selectedComponent && "opacity-30",
         selectedComponent?.id === component.id &&
-          "outline-1 outline-offset-6 outline-primary",
+          "outline-1 outline-offset-6 outline-primary z-20 opacity-100",
       )}
       key={component.id}
       data-component-id={component.id}

src/components/form-builder/form-components/form-text.tsx

@@ -3,7 +3,7 @@ import {
   generateTWClassesForAllViewports,
   escapeHtml,
 } from "@/lib/utils";
-import { DesignPropertiesViews, FormRow } from "@/types/form-builder.types";
+import { DesignPropertiesViews } from "@/types/form-builder.types";
 import { FormComponentModel } from "@/models/FormComponent";
 import { HtmlGroup } from "../sidebar/groups/html-group";
 import { GridGroup } from "../sidebar/groups/grid-group";

src/components/form-builder/form-components/wysiwyg/editor-toolbar.tsx

@@ -43,8 +43,8 @@ const ToolbarButton = memo(
       variant="ghost"
       size="sm"
       className={cn(
-        "text-slate-500 hover:text-slate-700",
-        isActive ? "bg-slate-100 text-slate-700" : "bg-white"
+        "text-muted-foreground hover:text-primary",
+        isActive ? "bg-muted text-primary" : "bg-white"
       )}
     >
       {children}
@@ -84,20 +84,19 @@ const ToolbarDropdownMenu = memo(
           <div
             className={cn(
               buttonVariants({ variant: "ghost", size: "sm" }),
-              activeItem ? "bg-slate-100" : "bg-white"
+              activeItem ? "bg-muted" : "bg-white"
             )}
           >
             <Icon
               name={
                 (activeItem?.type === "option" && activeItem.icon) || defaultIcon
               }
-              className={activeItem ? "text-slate-700" : "text-slate-500"}
+              className={"text-primary"}
             />
-            <Icon name="ChevronDown" className="w-2 h-2" />
+            <Icon name="ChevronDown" className="w-2 h-2 text-primary" />
           </div>
         </DropdownMenuTrigger>
         <DropdownMenuContent portalProps={{ container: menuRef?.current }}>
-          <div>
             {options.map((option) => {
               return (
                 <div key={option.id}>
@@ -129,7 +128,6 @@ const ToolbarDropdownMenu = memo(
                 </div>
               );
             })}
-          </div>
         </DropdownMenuContent>
       </DropdownMenu>
     );
@@ -156,14 +154,9 @@ export function EditorToolbar({
   const menuRef = useRef<HTMLDivElement>(null);
 
   return (
-    <BubbleMenu
-      editor={editor}
-      tippyOptions={{ duration: 100, maxWidth: "none" }}
-      updateDelay={0}
-      className={cn(isEditable ? "" : "hidden")}
-    >
+
       <div
-        className="flex gap-2 p-2 bg-white rounded-md shadow-sm relative items-center"
+        className="flex gap-2 relative items-center z-20"
         ref={menuRef}
       >
         <ToolbarDropdownMenu options={options} menuRef={menuRef} />
@@ -207,6 +200,5 @@ export function EditorToolbar({
           <Quote />
         </ToolbarButton>
       </div>
-    </BubbleMenu>
   );
 }

src/components/form-builder/form-components/wysiwyg/form-wysiwyg-editor.tsx

@@ -9,6 +9,7 @@ import TextAlign from '@tiptap/extension-text-align'
 import "./form-wysiwyg-editor.css";
 import { EditorToolbar } from "./editor-toolbar";
 import customClass from "./extensions/textCustomStyle";
+import { useFormBuilderStore } from "@/stores/form-builder-store";
 interface FormWysiwygEditorProps {
   isEditable?: boolean;
   value: string;
@@ -98,6 +99,8 @@ export const FormWysiwygEditor: React.FC<FormWysiwygEditorProps> = memo(
       []
     );
 
+    const setEditor = useFormBuilderStore((state) => state.setEditor);
+
     const editor = useEditor({
       editable: isEditable,
       immediatelyRender: true,
@@ -106,14 +109,16 @@ export const FormWysiwygEditor: React.FC<FormWysiwygEditorProps> = memo(
       onUpdate: ({ editor }) => {
         onChange(editor.getHTML());
       },
-      onFocus: () => {
+      onFocus: ({ editor }) => {
         onFocus?.();
+        setEditor(editor);
       },
-      onBlur: () => {
+      onBlur: ({ editor }) => {
         onBlur?.();
       },
     }, [isEditable]);
 
+
     // Only update content when value prop changes and it's different from our local content
 
     if (!editor) {
@@ -122,7 +127,6 @@ export const FormWysiwygEditor: React.FC<FormWysiwygEditorProps> = memo(
 
     return (
       <>
-        <EditorToolbar editor={editor} isEditable={isEditable} />
         <EditorContent editor={editor} />
       </>
     );

src/components/form-builder/helpers/generate-react-code.tsx

@@ -1,4 +1,3 @@
-import { FormRow } from "@/types/form-builder.types";
 import { FormComponentModel } from "@/models/FormComponent";
 import { getComponentViews } from "@/config/available-components";
 import { cn, generateTWClassesForAllViewports } from "@/lib/utils";

src/components/form-builder/helpers/render-editor-component.tsx

@@ -54,7 +54,7 @@ export function RenderEditorComponent({ form, component }: FormComponentProps) {
         )}
       />
   ) : (
-    <div className={cn("relative flex flex-col h-full", (selectedComponent?.id === component.id && mode === "editor") && "cursor-text")} key={component.id} data-item-id={component.id}>
+    <div className={cn("relative flex flex-col h-full", (selectedComponent?.id === component.id && mode === "editor") && "cursor-text bg-white")} key={component.id} data-item-id={component.id}>
       <FormWysiwygEditor
         value={component.content || ""}
         onChange={(content) => {

src/components/form-builder/mainCanvas.tsx

@@ -43,7 +43,7 @@ export function MainCanvas() {
   const components = useFormBuilderStore((state) => state.components);
 
   return (
-    <div className="flex gap-4 h-full flex-col 3xl:flex-row">
+    <div className="flex gap-4 flex-col 3xl:flex-row">
       <div
         className={`h-full w-full`}
         onClick={() => {

src/components/form-builder/sidebar/sidebarLeft.tsx

@@ -118,7 +118,7 @@ export function SidebarLeft() {
   };
 
   return (
-    <Sidebar className="bg-white top-14 bottom-14">
+    <Sidebar className="bg-white top-13 bottom-14 z-20">
       <div className="flex flex-col h-[calc(100%-56px)]">
         <SidebarContent className="gap-0">
           {componentGroups.map((group) => (

src/components/form-builder/sidebar/sidebarRight.tsx

@@ -92,7 +92,7 @@ export function SidebarRight() {
   }
 
   return (
-    <Sidebar side="right" className="border-l top-14">
+    <Sidebar side="right" className="border-l top-13">
       <SidebarContent>{sidebarContent}</SidebarContent>
     </Sidebar>
   );