chaibuilder · surajair · Oct 16, 2025 · Oct 15, 2025 · Oct 15, 2025 · Oct 15, 2025
diff --git a/package.json b/package.json
@@ -119,6 +119,7 @@
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.16",
+    "@tiptap/extension-bubble-menu": "^3.7.0",
     "@tiptap/extension-bullet-list": "^2.12.0",
     "@tiptap/extension-highlight": "^3.6.5",
     "@tiptap/extension-link": "^2.11.5",

diff --git a/src/core/components/canvas/IframeInitialContent.ts b/src/core/components/canvas/IframeInitialContent.ts
@@ -51,7 +51,7 @@ export const IframeInitialContent: string = `<!doctype html>
     </style>
     <style>
       .react-colorful {
-        height: 150px !important;
+        height: 120px !important;
         width: 180px !important;
       }
       .react-colorful > div {
@@ -69,6 +69,8 @@ export const IframeInitialContent: string = `<!doctype html>
         width: 16px !important;
         height: 16px !important;
         border: 1.5px solid #fff !important;
+        cursor: pointer !important;
+        z-index: 10002 !important;
       }
     </style>
     <style type="text/tailwindcss">

diff --git a/src/core/components/canvas/static/with-block-text-editor.tsx b/src/core/components/canvas/static/with-block-text-editor.tsx
@@ -4,11 +4,12 @@ import { useInlineEditing } from "@/core/hooks/use-inline-editing";
 import { useLanguages } from "@/core/hooks/use-languages";
 import { useSelectedBlockIds } from "@/core/hooks/use-selected-blockIds";
 import { useUpdateBlocksProps } from "@/core/hooks/use-update-blocks-props";
-import { MenuBar, useRTEditor } from "@/core/rjsf-widgets";
+import { useRTEditor } from "@/core/rjsf-widgets/rte-widget/use-rte-editor";
+import RteMenubar from "@/core/rjsf-widgets/rte-widget/rte-menu-bar";
 import { ChaiBlock } from "@/types/chai-block";
 import { getRegisteredChaiBlock } from "@chaibuilder/runtime";
 import { useDebouncedCallback } from "@react-hookz/web";
-import { EditorContent } from "@tiptap/react";
+import { BubbleMenu, EditorContent } from "@tiptap/react";
 import { cloneDeep, get, has } from "lodash-es";
 import { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 
@@ -46,7 +47,6 @@ const RichTextEditor = memo(
     onChange: (content: string) => void;
     onEscape: (e: KeyboardEvent) => void;
   }) => {
-    const [showMenu, setShowMenu] = useState({ show: false, top: 0, left: 0 });
     const { document } = useFrame();
 
     const editor = useRTEditor({
@@ -86,41 +86,6 @@ const RichTextEditor = memo(
         event: new FocusEvent("focus"),
         transaction: [] as any,
       });
-      setTimeout(() => {
-        const editorRect = editor?.view?.dom?.getBoundingClientRect();
-        let top = editorRect?.top - 32;
-        let left = editorRect?.left;
-        if (top < 0) {
-          top = editorRect?.bottom;
-        }
-        if (left + 276 >= document.body.offsetWidth) {
-          left = editorRect?.right - 276;
-        }
-        setShowMenu({ show: true, top: top, left: left });
-      }, 100);
-
-      let timeout: any;
-      const handleScroll = () => {
-        setShowMenu({ show: false, top: 0, left: 0 });
-        clearTimeout(timeout);
-        timeout = setTimeout(() => {
-          const editorRect = editor?.view?.dom?.getBoundingClientRect();
-          let top = editorRect?.top - 32;
-          let left = editorRect?.left;
-          if (top < 0) {
-            top = editorRect?.bottom;
-          }
-          if (left + 276 >= document.body.offsetWidth) {
-            left = editorRect?.right - 276;
-          }
-          setShowMenu({ show: true, top: top, left: left });
-        }, 500);
-      };
-      document.addEventListener("scroll", handleScroll);
-      return () => {
-        document.removeEventListener("scroll", handleScroll);
-        clearTimeout(timeout);
-      };
     }, [editor]);
 
     const editorClassName = useMemo(() => {
@@ -138,14 +103,18 @@ const RichTextEditor = memo(
     };
 
     return (
-      <div onKeyDown={onKeyDown} onClick={(e) => e.stopPropagation()} className="relative">
-        {showMenu?.show && (
-          <div className="fixed" style={{ top: showMenu.top, left: showMenu.left }}>
-            <MenuBar editor={editor} from="canvas" />
-          </div>
-        )}
-        <EditorContent onKeyDown={onKeyDown} value={blockContent} editor={editor} className={editorClassName} />
-      </div>
+      editor && (
+        <div onKeyDown={onKeyDown} onClick={(e) => e.stopPropagation()} className="relative">
+          <BubbleMenu
+            editor={editor}
+            shouldShow={() => editor && editor?.isFocused}
+            tippyOptions={{ duration: 100, arrow: true, hideOnClick: false }}
+            className="w-max">
+            <RteMenubar editor={editor} from="canvas" />
+          </BubbleMenu>
+          <EditorContent onKeyDown={onKeyDown} value={blockContent} editor={editor} className={editorClassName} />
+        </div>
+      )
     );
   },
 );

diff --git a/src/core/index.css b/src/core/index.css
@@ -225,7 +225,7 @@ select:focus {
 
 /* Color picker */
 .react-colorful {
-  height: 150px !important;
+  height: 120px !important;
   width: 180px !important;
 }
 .react-colorful > div {
@@ -243,6 +243,12 @@ select:focus {
   width: 16px !important;
   height: 16px !important;
   border: 1.5px solid #fff !important;
+  cursor: pointer !important;
+  z-index: 10002 !important;
+}
+
+.ProseMirror {
+  @apply min-h-[100px] outline-none;
 }
 
 .rte {

diff --git a/src/core/rjsf-widgets/index.ts b/src/core/rjsf-widgets/index.ts
@@ -2,6 +2,6 @@ export * from "@/core/rjsf-widgets/Icon";
 export * from "@/core/rjsf-widgets/image";
 export * from "@/core/rjsf-widgets/link";
 export * from "@/core/rjsf-widgets/row-col";
-export * from "@/core/rjsf-widgets/rte-widget";
+export * from "@/core/rjsf-widgets/rte-widget/rte-widget";
 export * from "@/core/rjsf-widgets/slider";
 export * from "@/core/rjsf-widgets/sources";