fix(uier-toolbar): Fixed comment not inside shadow DOM

web/apps/uier/app/layout.tsx

@@ -21,7 +21,7 @@ export default function RootLayout({ children, }: {
                     <ClientProvider>
                         {children}
                         <Analytics />
-                        <Script src="http://localhost:5500/index.js" />
+                        <Script src="http://localhost:4005/index.js" />
                     </ClientProvider>
                 </AuthProvider>
             </body>

web/apps/uier/next.config.js

@@ -32,7 +32,7 @@ const nextConfig = {
                 isDevelopment,
                 [
                     knownSecureHeadersExternalUrls.vercel,
-                    { scriptSrc: 'http://localhost:5500', styleSrc: 'http://localhost:5500' },
+                    { scriptSrc: 'http://localhost:4005', styleSrc: 'http://localhost:4005' },
                 ]
             ))
         }];

web/packages/ui-primitives/src/Popper/Popper.tsx

@@ -11,9 +11,10 @@ export type PopperProps = HTMLAttributes<HTMLDivElement> & {
     align?: 'start' | 'center' | 'end';
     alignOffset?: number;
     onOpenChange?: (open: boolean) => void;
+    container?: HTMLElement;
 };
 
-export function Popper({ className, trigger, anchor, side, sideOffset, align, alignOffset, open, onOpenChange, ...rest }: PopperProps) {
+export function Popper({ className, trigger, anchor, side, sideOffset, align, alignOffset, open, onOpenChange, container, ...rest }: PopperProps) {
     return (
         <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
             {trigger && (
@@ -26,7 +27,7 @@ export function Popper({ className, trigger, anchor, side, sideOffset, align, al
                     {anchor}
                 </PopoverPrimitive.Anchor>
             )}
-            <PopoverPrimitive.Portal>
+            <PopoverPrimitive.Portal container={container}>
                 <PopoverPrimitive.Content
                     align={align ?? 'center'}
                     sideOffset={sideOffset ?? 4}

web/packages/uier-toolbar/package.json

@@ -10,19 +10,14 @@
         "./index.css": "./dist/index.css"
     },
     "scripts": {
-        "dev": "tsup ./src/index.tsx --format esm --watch --env.NODE_ENV production",
+        "dev:build": "tsup ./src/index.tsx --format esm --watch --env.NODE_ENV production",
+        "dev:serve": "pnpm dlx serve dist -l 4005",
+        "dev": "pnpm run /^dev:.*/",
         "build": "tsup ./src/index.tsx --format esm --minify --env.NODE_ENV production",
         "lint": "eslint ."
     },
     "devDependencies": {
         "@enterwell/react-hooks": "0.4.1",
-        "@radix-ui/react-checkbox": "1.0.4",
-        "@radix-ui/react-dialog": "1.0.5",
-        "@radix-ui/react-dropdown-menu": "2.0.6",
-        "@radix-ui/react-menubar": "1.0.4",
-        "@radix-ui/react-popover": "1.0.7",
-        "@radix-ui/react-select": "2.0.0",
-        "@radix-ui/react-slot": "1.0.2",
         "@signalco/eslint-config-signalco": "workspace:*",
         "@signalco/hooks": "workspace:*",
         "@signalco/js": "workspace:*",
@@ -33,9 +28,7 @@
         "@signalco/tsconfig": "workspace:*",
         "@types/react": "18.2.46",
         "@types/react-dom": "18.2.18",
-        "@types/react-timeago": "4.1.7",
         "autoprefixer": "10.4.16",
-        "classix": "2.1.35",
         "postcss": "8.4.33",
         "postcss-preset-env": "9.3.0",
         "@tanstack/react-query": "5.17.1",
@@ -44,9 +37,8 @@
         "react-timeago": "7.2.0",
         "sass": "1.69.7",
         "tsup": "8.0.1",
-        "tailwind-merge": "2.2.0",
         "tailwindcss": "3.4.0",
         "tailwindcss-animate": "1.0.7",
         "typescript": "5.3.3"
     }
-}
+}

web/packages/uier-toolbar/src/components/CommentBubble.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Fragment, HTMLAttributes, useEffect, useRef, useState } from 'react';
+import { Fragment, HTMLAttributes, useContext, useState } from 'react';
 import { Stack } from '@signalco/ui-primitives/Stack';
 import { Row } from '@signalco/ui-primitives/Row';
 import { Popper } from '@signalco/ui-primitives/Popper';
@@ -14,6 +14,7 @@ import { useComments } from '../hooks/useComments';
 import { useCommentItemRects } from '../hooks/useCommentItemRects';
 import { CommentThreadItem } from './CommentThreadItem';
 import { CommentSelectionHighlight } from './CommentSelectionHighlight';
+import { CommentsBootstrapperContext } from './CommentsBootstrapperContext';
 import { CommentItem } from './Comments';
 import { CommentIcon } from './CommentIcon';
 
@@ -28,6 +29,7 @@ type CommentBubbleProps = HTMLAttributes<HTMLDivElement> & {
 export function CommentBubble({
     defaultOpen, creating, onCreated, onCanceled, commentItem, className, style
 }: CommentBubbleProps) {
+    const { rootElement } = useContext(CommentsBootstrapperContext);
     const selectionRects = useCommentItemRects(commentItem.position);
     const lastRect = orderBy(selectionRects, r => r.bottom).at(-1);
     const { upsert } = useComments();
@@ -76,6 +78,7 @@ export function CommentBubble({
                 <CommentSelectionHighlight commentSelection={commentItem.position} />
             )}
             <Popper
+                container={rootElement}
                 trigger={(
                     <div
                         role="button"

web/packages/uier-toolbar/src/components/Comments.tsx

@@ -39,4 +39,5 @@ export type CommentItem = {
 
 export type CommentsGlobalProps = {
     reviewParamKey?: string;
+    rootElement?: HTMLElement;
 }

web/packages/uier-toolbar/src/components/CommentsBootstrapper.tsx

@@ -2,12 +2,14 @@
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { CommentsGlobal } from './CommentsGlobal';
+import { CommentsBootstrapperContext } from './CommentsBootstrapperContext';
 import { CommentsGlobalProps } from './Comments';
 
 const queryClient = new QueryClient();
 
 export function CommentsBootstrapper({
-    reviewParamKey = 'review'
+    reviewParamKey = 'review',
+    rootElement
 }: CommentsGlobalProps) {
     const urlInReview = new URL(window.location.href).searchParams.get(reviewParamKey) === 'true';
     console.log(urlInReview, window.location.href);
@@ -16,9 +18,11 @@ export function CommentsBootstrapper({
     }
 
     return (
-        <QueryClientProvider client={queryClient}>
-            <CommentsGlobal
-                reviewParamKey={reviewParamKey} />
-        </QueryClientProvider>
+        <CommentsBootstrapperContext.Provider value={{ rootElement }}>
+            <QueryClientProvider client={queryClient}>
+                <CommentsGlobal
+                    reviewParamKey={reviewParamKey} />
+            </QueryClientProvider>
+        </CommentsBootstrapperContext.Provider>
     );
 }

web/packages/uier-toolbar/src/components/CommentsBootstrapperContext.tsx

@@ -0,0 +1,4 @@
+'use client';
+import { createContext } from 'react';
+
+export const CommentsBootstrapperContext = createContext({ rootElement: undefined as HTMLElement | undefined });

web/packages/uier-toolbar/src/index.tsx

@@ -9,12 +9,12 @@ function MountOnPage() {
 
     const stylesheet = document.createElement('link');
     stylesheet.setAttribute('rel', 'stylesheet');
-    stylesheet.setAttribute('href', 'http://localhost:5500/index.css');
+    stylesheet.setAttribute('href', 'http://localhost:4005/index.css');
     shadowRoot.appendChild(stylesheet);
 
     document.body.appendChild(container);
     const root = createRoot(shadowRoot);
-    root.render(<CommentsBootstrapper />);
+    root.render(<CommentsBootstrapper rootElement={shadowRoot} />);
 }
 
 MountOnPage();

web/packages/uier-toolbar/tsconfig.json

@@ -10,4 +10,4 @@
     "exclude": [
         "node_modules"
     ]
-}
+}