@alpaca-editor/core 1.0.4074 → 1.0.4075

package/src/editor/client/EditorShell.tsx

@@ -204,6 +204,7 @@ export function EditorShell({
   const [contentEditorItem, setContentEditorItem] = useState<FullItem>();
 
   const [focusedField, setFocusedField] = useState<FieldDescriptor>();
+  const focusedFieldRef = useRef<FieldDescriptor | undefined>(undefined);
   const [selectedRange, setSelectedRange] = useState<SelectionRange>();
 
   const [validating, setValidating] = useState(false);
@@ -426,6 +427,10 @@ export function EditorShell({
     }
   }, [selection]);
 
+  useEffect(() => {
+    focusedFieldRef.current = focusedField;
+  }, [focusedField]);
+
   const itemsRepository = useItemsRepository(setModifiedFields, addRecentEdit);
 
   const pageViewContext = usePageViewContext({
@@ -460,6 +465,13 @@ export function EditorShell({
     setSelectedForInsertion("");
   }, [selection]);
 
+  // Clear any selected insertion template when insert mode is disabled
+  useEffect(() => {
+    if (!insertMode) {
+      setSelectedForInsertion("");
+    }
+  }, [insertMode]);
+
   useEffect(() => {
     if (focusedField?.fieldId !== selectedRange?.fieldId) {
       setSelectedRange(undefined);
@@ -1269,6 +1281,37 @@ export function EditorShell({
     validate,
   });
 
+  // WebSocket message handler and connection
+  const messageHandler = useSocketMessageHandler({
+    sessionId,
+    setWebSocketMessages,
+    setActiveSessions,
+    sendClientInfo,
+    itemsRepository,
+    currentItemDescriptor,
+    loadItem,
+    loadItemVersions,
+    setComments,
+    setSuggestedEdits,
+    setActiveFieldActions,
+    setQuotaInfo,
+    requestRefresh,
+    currentItemRef,
+    loadHistory,
+    addRecentEdit,
+    socketMessageListeners,
+  });
+
+  const { socketRef: socketInstanceRef } = useEditorWebSocket({
+    sessionId,
+    onMessage: messageHandler,
+    onOpen: () => console.log("Connected!"),
+    onError: (error) => console.error("WebSocket error:", error),
+    connectSocket,
+    requestQuota,
+    sendClientInfo,
+  });
+
   const switchView = (
     viewName: string,
     options?: { skipConfirmation?: boolean },
@@ -1778,7 +1821,7 @@ export function EditorShell({
         if (!descriptor) return;
 
         const itemId =
-          focusedField?.item.id ||
+          focusedFieldRef.current?.item.id ||
           (selection.length > 0 ? selection[0] : undefined) ||
           descriptor.id;
 
@@ -1788,8 +1831,8 @@ export function EditorShell({
         const version = descriptor.version;
 
         const getFieldName = async () => {
-          if (!focusedField) return "";
-          const field = await itemsRepository.getField(focusedField);
+          if (!focusedFieldRef.current) return "";
+          const field = await itemsRepository.getField(focusedFieldRef.current);
           return field?.name;
         };
 
@@ -1807,7 +1850,7 @@ export function EditorShell({
           isNew: true,
           itemId,
           itemName: await getItemName(),
-          fieldId: focusedField?.fieldId,
+          fieldId: focusedFieldRef.current?.fieldId,
           fieldName: await getFieldName(),
           mainItemId: descriptor.id,
           language,
@@ -1816,7 +1859,7 @@ export function EditorShell({
           rangeStart: selectedRange?.startOffset || 0,
           rangeEnd: selectedRange?.endOffset || 0,
           author: user?.name,
-          authorDisplayName: user?.displayName,
+          authorDisplayName: user?.fullName,
           date: new Date().toISOString(),
         };
 

package/src/editor/client/hooks/useEditorWebSocket.ts

@@ -25,9 +25,35 @@ export function useEditorWebSocket(params: {
   );
   const reconnectAttemptsRef = useRef<number>(0);
 
+  // Stable refs for callbacks to avoid re-connecting on every render
+  const onMessageRef = useRef(onMessage);
+  const onOpenRef = useRef(onOpen);
+  const onErrorRef = useRef(onError);
+  const requestQuotaRef = useRef(requestQuota);
+  const sendClientInfoRef = useRef(sendClientInfo);
+
+  useEffect(() => {
+    onMessageRef.current = onMessage;
+  }, [onMessage]);
+  useEffect(() => {
+    onOpenRef.current = onOpen;
+  }, [onOpen]);
+  useEffect(() => {
+    onErrorRef.current = onError;
+  }, [onError]);
+  useEffect(() => {
+    requestQuotaRef.current = requestQuota;
+  }, [requestQuota]);
+  useEffect(() => {
+    sendClientInfoRef.current = sendClientInfo;
+  }, [sendClientInfo]);
+
   useEffect(() => {
-    const attach = (socket: WebSocket) => {
-      socket.addEventListener("message", onMessage as any);
+    const attach = (
+      socket: WebSocket,
+      handler: (e: MessageEvent<any>) => void,
+    ) => {
+      socket.addEventListener("message", handler as any);
       socketInstanceRef.current = socket;
     };
 
@@ -37,13 +63,16 @@ export function useEditorWebSocket(params: {
         !socket ||
         socket.readyState === WebSocket.CLOSING ||
         socket.readyState === WebSocket.CLOSED;
+      const handleMessage = (event: MessageEvent<any>) => {
+        onMessageRef.current?.(event);
+      };
       if (needsNewSocket) {
         socket = connectSocket(sessionId);
         socket.addEventListener("open", () => {
           reconnectAttemptsRef.current = 0;
-          onOpen?.();
-          sendClientInfo();
-          requestQuota?.();
+          onOpenRef.current?.();
+          sendClientInfoRef.current?.();
+          requestQuotaRef.current?.();
         });
         socket.addEventListener("close", (event) => {
           if (event.code !== 1000) {
@@ -59,15 +88,15 @@ export function useEditorWebSocket(params: {
           }
         });
         socket.addEventListener("error", (error) => {
-          onError?.(error);
+          onErrorRef.current?.(error);
         });
         (globalThis as any).editorSocket = socket;
       }
       if (socket) {
-        attach(socket);
+        attach(socket, handleMessage);
         if (socket.readyState === WebSocket.OPEN) {
-          sendClientInfo();
-          requestQuota?.();
+          sendClientInfoRef.current?.();
+          requestQuotaRef.current?.();
         }
       }
     };
@@ -87,15 +116,7 @@ export function useEditorWebSocket(params: {
         socketInstanceRef.current = null;
       }
     };
-  }, [
-    sessionId,
-    onMessage,
-    onOpen,
-    onError,
-    connectSocket,
-    requestQuota,
-    sendClientInfo,
-  ]);
+  }, [sessionId, connectSocket]);
 
   return { socketRef: socketInstanceRef } as const;
 }

package/src/editor/commands/componentCommands.tsx

@@ -479,7 +479,12 @@ function getCreateCommentCommand(
       const y = ev?.clientY ?? ev?.pageY ?? window.innerHeight / 2;
       setTimeout(() => {
         requestAnimationFrame(() => {
-          showCommentPopoverAt({ x, y }, context.editContext);
+          const snapshotField = context.editContext.focusedField;
+          const snapshotRange = context.editContext.selectedRange;
+          showCommentPopoverAt({ x, y }, context.editContext, {
+            field: snapshotField,
+            range: snapshotRange,
+          });
         });
       }, 0);
     },

package/src/editor/control-center/Info.tsx

@@ -23,14 +23,16 @@ export function Info() {
                 <label className="text-sm font-medium text-gray-500">
                   Name
                 </label>
-                <p className="text-gray-900">{user.displayName || user.name}</p>
-              </div>
-              <div>
-                <label className="text-sm font-medium text-gray-500">
-                  Email
-                </label>
-                <p className="text-gray-900">{user.email || "Not available"}</p>
+                <p className="text-gray-900">{user.fullName || user.name}</p>
               </div>
+              {user.email?.trim() && (
+                <div>
+                  <label className="text-sm font-medium text-gray-500">
+                    Email
+                  </label>
+                  <p className="text-gray-900">{user.email.trim()}</p>
+                </div>
+              )}
               <div>
                 <label className="text-sm font-medium text-gray-500">
                   User Type

package/src/editor/menubar/ActiveUsers.tsx

@@ -105,7 +105,6 @@ export function ActiveUsers() {
   const allUsers = [...activeUsers, ...recentVisitors];
   const visibleUsers = activeSessions.slice(0, 3); // Only show active users in the avatar stack
   const remainingActiveCount = Math.max(0, activeSessions.length - 3);
-  const totalCount = activeSessions.length + recentVisitors.length;
 
   const handleAbout = () => {
     editContext?.openDialog(AboutDialog, {});
@@ -161,12 +160,13 @@ export function ActiveUsers() {
           {activeSessions.length > 0 && (
             <>
               {activeSessions.map((session) => {
-                const userName = session.user.displayName || session.user.name;
+                const userName = session.user.fullName || session.user.name;
                 const idxBackslash = userName.indexOf("\\");
                 const displayName =
                   idxBackslash >= 0
                     ? userName.substring(idxBackslash + 1)
                     : userName;
+                const userEmail = session.user.email?.trim();
 
                 return (
                   <div
@@ -181,9 +181,11 @@ export function ActiveUsers() {
                       <div className="truncate text-sm font-medium text-gray-900">
                         {displayName}
                       </div>
-                      <div className="truncate text-xs text-gray-500">
-                        {session.user.email}
-                      </div>
+                      {userEmail && (
+                        <div className="truncate text-xs text-gray-500">
+                          {userEmail}
+                        </div>
+                      )}
                     </div>
                     {session.sessionId === editContext?.sessionId && (
                       <div className="text-xs font-medium text-blue-600">

package/src/editor/menubar/User.tsx

@@ -5,7 +5,7 @@ export function User({ session }: { session: EditSession }) {
   const editContext = useEditContext();
   if (!editContext) return;
 
-  const userName = session.user.displayName || session.user.name;
+  const userName = session.user.fullName || session.user.name;
 
   const idxBackslash = userName.indexOf("\\");
   const letter =
@@ -15,11 +15,14 @@ export function User({ session }: { session: EditSession }) {
         ? userName[0].toUpperCase()
         : "";
 
+  const userEmail = session.user.email?.trim();
+  const userTitle = userEmail ? `${userName} (${userEmail})` : userName;
+
   return (
     <div
       className="grid h-7 w-7 items-center justify-center rounded-full text-xs font-normal text-white"
       style={{ background: session.color }}
-      title={userName + " (" + session.user.email + ")"}
+      title={userTitle}
     >
       {letter?.toUpperCase()}
     </div>

package/src/editor/page-editor-chrome/PlaceholderDropZone.tsx

@@ -3,7 +3,8 @@
 import { useEffect, useState } from "react";
 import { useEditContext } from "../client/editContext";
 
-import { MenuItem } from "primereact/menuitem";
+import { MenuItem } from "../../config/types";
+import { Plus } from "lucide-react";
 
 import { getAbsoluteIconUrl } from "../utils";
 import { Placeholder } from "../pageModel";
@@ -118,12 +119,12 @@ export function PlaceholderDropZone({
                     src={getAbsoluteIconUrl(x.icon)}
                     width="16"
                     height="16"
-                    className="m-1"
+                    className="shrink-0"
                   />
                 ),
                 label: x.name,
-                command: () => {
-                  editContext.operations.addComponent(
+                command: async (_e: any) => {
+                  await editContext.operations.addComponent(
                     x.typeId,
                     placeholder.key,
                     index,
@@ -135,12 +136,12 @@ export function PlaceholderDropZone({
           if (insertOptions.length > 0)
             editContext.showContextMenu(e, [
               {
+                id: "header",
                 label: insertMenuTitle || "Insert",
                 disabled: true,
-                className: "border-b border-gray-400 pb-2 pl-2 text-xs",
-                template: () => {
-                  return <span className="text-sm text-black">Insert</span>;
-                },
+                className:
+                  "bg-gray-100 text-gray-900 font-medium  py-1.5 text-sm",
+                
               },
               ...insertOptions,
             ]);

package/src/editor/page-editor-chrome/PlaceholderDropZones.tsx

@@ -26,16 +26,27 @@ export function PlaceholderDropZones({
 
   if (
     !pageViewContext ||
-    (!editContext?.dragObject && !editContext.selectedForInsertion) ||
+    (!editContext?.dragObject &&
+      !editContext?.selectedForInsertion &&
+      !editContext?.insertMode) ||
     !placeholders
   )
     return null;
 
-  const matchingPlaceholders = placeholders.filter(
+  const showAllDueToInsertMode =
+    !!editContext?.insertMode &&
+    !editContext?.dragObject &&
+    !editContext?.selectedForInsertion;
+
+  const matchingPlaceholders = (showAllDueToInsertMode
+    ? placeholders
+    : placeholders
+  ).filter(
     (x) =>
       // Only include editable placeholders
       x.editable &&
-      (x.parentComponent?.id === editContext.selectedForInsertion ||
+      (showAllDueToInsertMode ||
+        x.parentComponent?.id === editContext.selectedForInsertion ||
         x.insertOptions?.find(
           (y) =>
             y.typeId === editContext.selectedForInsertion ||

package/src/editor/reviews/CommentPopover.tsx

@@ -9,6 +9,8 @@ import {
   EditContextType,
   useFieldsEditContext,
 } from "../client/editContext";
+import type { SelectionRange } from "../client/editContext";
+import type { FieldDescriptor } from "../../types";
 import {
   createOrUpdateComment,
   getAvailableCommentTags,
@@ -27,11 +29,15 @@ export function CommentPopover({
   editContext: externalEditContext,
   position,
   onClose,
+  initialField,
+  initialRange,
 }: {
   children?: React.ReactNode;
   editContext?: EditContextType;
   position?: { x: number; y: number };
   onClose?: () => void;
+  initialField?: FieldDescriptor;
+  initialRange?: SelectionRange;
 }) {
   const [isOpen, setIsOpen] = useState(!!position);
   const [saving, setSaving] = useState(false);
@@ -70,8 +76,12 @@ export function CommentPopover({
     const descriptor = editContext.contentEditorItem?.descriptor;
     if (!descriptor) return;
 
+    const snapshotField = initialField || fieldsContext?.focusedField;
+    const snapshotRange: SelectionRange | undefined =
+      initialRange || editContext.selectedRange;
+
     const itemId =
-      fieldsContext?.focusedField?.item.id ||
+      snapshotField?.item.id ||
       (editContext.selection.length > 0
         ? editContext.selection[0]!
         : undefined) ||
@@ -82,10 +92,8 @@ export function CommentPopover({
     const version = descriptor.version;
 
     const getFieldName = async (): Promise<string | undefined> => {
-      if (!fieldsContext?.focusedField) return undefined;
-      const field = await editContext.itemsRepository.getField(
-        fieldsContext.focusedField,
-      );
+      if (!snapshotField) return undefined;
+      const field = await editContext.itemsRepository.getField(snapshotField);
       return field?.name;
     };
 
@@ -105,16 +113,16 @@ export function CommentPopover({
         isNew: false,
         itemId,
         itemName: await getItemName(),
-        fieldId: fieldsContext?.focusedField?.fieldId,
+        fieldId: snapshotField?.fieldId,
         fieldName: await getFieldName(),
         mainItemId: descriptor.id,
         language,
         version,
         position: 0,
-        rangeStart: editContext.selectedRange?.startOffset || 0,
-        rangeEnd: editContext.selectedRange?.endOffset || 0,
+        rangeStart: snapshotRange?.startOffset || 0,
+        rangeEnd: snapshotRange?.endOffset || 0,
         author: editContext.user?.name,
-        authorDisplayName: editContext.user?.displayName,
+        authorDisplayName: editContext.user?.fullName,
         date: new Date().toISOString(),
         text: text,
         tags: tags.join(","),
@@ -231,6 +239,7 @@ export function CommentPopover({
 export function showCommentPopoverAt(
   position: { x: number; y: number },
   editContext: EditContextType,
+  options?: { field?: FieldDescriptor; range?: SelectionRange },
 ) {
   const container = document.createElement("div");
   document.body.appendChild(container);
@@ -244,6 +253,8 @@ export function showCommentPopoverAt(
       editContext={editContext}
       position={position}
       onClose={handleClose}
+      initialField={options?.field}
+      initialRange={options?.range}
     />,
   );
 }

package/src/editor/reviews/PreviewInfo.tsx

@@ -5,14 +5,14 @@ export function PreviewInfo() {
   const editContext = useEditContext();
   if (!editContext) return null;
   const review = editContext.reviews.reviews.find(
-    (x) => x.reviewerEmail === editContext.user?.email
+    (x) => x.reviewerEmail === editContext.user?.email,
   );
 
   return (
-    <div className="flex gap-3 items-center">
+    <div className="flex items-center gap-3">
       <div className="text-white">
-        Welcome to your page <b>preview</b>, {editContext.user?.displayName}!
-        <div className="text-gray-300 text-xs">
+        Welcome to your page <b>preview</b>, {editContext.user?.fullName}!
+        <div className="text-xs text-gray-300">
           {editContext.contentEditorItem?.path}{" "}
           {editContext.contentEditorItem?.language}{" "}
           {editContext.contentEditorItem?.version}
@@ -20,13 +20,13 @@ export function PreviewInfo() {
       </div>
       {review?.approvalDate && (
         <i
-          className="pi pi-check text-green-400 text-2xl font-bold"
+          className="pi pi-check text-2xl font-bold text-green-400"
           title={"Approved " + formatDate(new Date(review.approvalDate))}
         ></i>
       )}
       {review?.rejectedDate && (
         <i
-          className="pi pi-times text-red-400 text-2xl font-bold"
+          className="pi pi-times text-2xl font-bold text-red-400"
           title={"Rejected " + formatDate(new Date(review.rejectedDate))}
         ></i>
       )}

package/src/editor/reviews/Reviews.tsx

@@ -185,7 +185,10 @@ export function Reviews() {
         />
       </SimpleToolbar>
       <OverlayPanel ref={overlayPanelRef}>
-        <div className="flex flex-col gap-2 p-2 text-xs">
+        <div
+          className="flex flex-col gap-2 p-2 text-xs"
+          data-testid="add-reviewer-popover"
+        >
           <div className="flex flex-col gap-2">
             <label htmlFor="name">Name</label>
 
@@ -265,7 +268,10 @@ export function Reviews() {
         </div>
       </OverlayPanel>
       <div className="relative flex-1">
-        <div className="absolute inset-0 overflow-auto">
+        <div
+          className="absolute inset-0 overflow-auto"
+          data-testid="reviews-table"
+        >
           <SimpleTable
             columns={[
               {

package/src/editor/ui/Icons.tsx

@@ -403,14 +403,14 @@ export function RotateDeviceIcon({ className }: { className?: string }) {
       <path
         d="M10.24 9C10.8561 9 11.1641 9 11.3994 9.12456C11.6064 9.23413 11.7746 9.40897 11.8801 9.62401C12 9.86848 12 10.1885 12 10.8286L12 15.1714C12 15.8115 12 16.1315 11.8801 16.376C11.7746 16.591 11.6064 16.7659 11.3994 16.8754C11.1641 17 10.8561 17 10.24 17L2.76 17C2.14394 17 1.83591 17 1.60061 16.8754C1.39363 16.7659 1.22535 16.591 1.11989 16.376C0.999999 16.1315 0.999999 15.8115 0.999999 15.1714L1 10.8286C1 10.1885 1 9.86848 1.11989 9.62401C1.22535 9.40897 1.39363 9.23413 1.60061 9.12456C1.83591 9 2.14394 9 2.76 9L10.24 9Z"
         stroke="#111111"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M15 11L15 9.11111C15 7.24427 15 6.31085 14.6321 5.59781C14.3086 4.9706 13.7923 4.46067 13.1572 4.14109C12.4353 3.77778 11.4902 3.77778 9.6 3.77778L6 3.77778M6 3.77778L8.8125 6.55556M6 3.77778L8.8125 1"
         stroke="#111111"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   );

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.4074";
-export const buildDate = "2025-09-05 09:17:08";
+export const version = "1.0.4075";
+export const buildDate = "2025-09-08 01:46:37";

package/src/types.ts

@@ -158,7 +158,7 @@ export type UserInfo = {
 
 export type User = {
   name: string;
-  displayName?: string;
+  fullName?: string;
   ai: boolean;
   email?: string;
   isLimitedPreviewUser?: boolean;