@alpaca-editor/core 1.0.3883 → 1.0.3885

package/src/editor/Terminal.tsx

@@ -19,7 +19,7 @@ export const Terminal = forwardRef<
   {
     commandHandler: (
       text: string,
-      callback: (text: React.ReactNode, finished: boolean) => void
+      callback: (text: React.ReactNode, finished: boolean) => void,
     ) => void;
     prompt: string;
     setPrompt: (text: string) => void;
@@ -51,7 +51,7 @@ export const Terminal = forwardRef<
   const [promptHistory, setPromptHistory] = useState<string[]>(() => {
     if (typeof window !== "undefined") {
       return JSON.parse(
-        localStorage.getItem("editor.ai.promptHistory") || "[]"
+        localStorage.getItem("editor.ai.promptHistory") || "[]",
       );
     }
     return [];
@@ -61,7 +61,7 @@ export const Terminal = forwardRef<
   useEffect(() => {
     localStorage.setItem(
       "editor.ai.promptHistory",
-      JSON.stringify(promptHistory)
+      JSON.stringify(promptHistory),
     );
   }, [promptHistory]);
 
@@ -153,20 +153,20 @@ export const Terminal = forwardRef<
   }));
 
   return (
-    <div className={classNames("flex flex-col h-full", className)}>
-      <div className="p-1 border-b border-gray-200 flex justify-between gap-2 text-xs items-center">
+    <div className={classNames("flex h-full flex-col", className)}>
+      <div className="flex items-center justify-between gap-2 border-b border-gray-200 p-1 text-xs">
         <button
           onClick={() => {
             setMessages([]);
             onReset();
           }}
         >
-          <i className="pi pi-trash text-sm m-1" />
+          <i className="pi pi-trash m-1 text-sm" />
         </button>
         {toolbar}
       </div>
-      <div className="overflow-y-auto h-full overflow-x-hidden p-2">
-        <div className="flex flex-col gap-3 items-end select-text">
+      <div className="h-full overflow-x-hidden overflow-y-auto p-2">
+        <div className="flex flex-col items-end gap-3 select-text">
           {messages.map((m, i) => (
             <div key={i} className={getClasses(m)}>
               {m.text}
@@ -175,11 +175,11 @@ export const Terminal = forwardRef<
 
           {response != null && (
             <div className={responseBoxClasses}>
-              <div className="flex text-xs">
-                <div className="text-xs mr-4">
-                  <i className="pi pi-spin pi-spinner"></i>{" "}
-                </div>
-                {response}
+              <div className="flex text-xs">{response}</div>
+              <div className="mr-4 flex items-center justify-end space-x-1 text-xs text-gray-400">
+                <div className="h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]"></div>
+                <div className="h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]"></div>
+                <div className="h-1 w-1 animate-bounce rounded-full bg-gray-400"></div>
               </div>
             </div>
           )}
@@ -191,14 +191,14 @@ export const Terminal = forwardRef<
         <InputTextarea
           ref={inputRef}
           value={prompt}
-          className="border-gray-300 border rounded flex-1 text-xs resize-none self-stretch"
+          className="flex-1 resize-none self-stretch rounded border border-gray-300 text-xs"
           onKeyDown={handleKeyPress}
           onChange={(e) => setPrompt(e.target.value)}
           rows={4}
           cols={30}
           disabled={disabled}
         />
-        <div className="flex justify-between items-center py-1">
+        <div className="flex items-center justify-between py-1">
           {statusbar}
           <Button
             icon={"pi pi-send"}

package/src/editor/ai/AiTerminal.tsx

@@ -211,8 +211,6 @@ export function AiTerminal({
       ...newMessages,
     ];
 
-    console.log(messages);
-
     const response = await executePrompt(
       activeProfile.id,
       messages,

package/src/editor/client/EditorClient.tsx

@@ -438,7 +438,7 @@ export function EditorClient({
 
       if (message.type === "comment-deleted") {
         setComments((x) => {
-          return x.filter((c) => c.id !== message.payload.id);
+          return x.filter((c) => c.id !== message.payload.commentId);
         });
       }
 

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

@@ -2,12 +2,13 @@ import {
   useEditContext,
   useModifiedFieldsContext,
 } from "../client/editContext";
-import { findFieldElement } from "../utils";
+import { findComponentRect, findFieldElement } from "../utils";
 import { Comment } from "../../types";
 import { useState } from "react";
 import { useEffect } from "react";
 import { classNames } from "primereact/utils";
 import { CommentIcon } from "../ui/Icons";
+import { getComponentById } from "../componentTreeHelper";
 
 export function CommentHighlighting({
   comment,
@@ -73,22 +74,21 @@ export function CommentHighlighting({
 
   if (!editContext) return null;
 
-  if (!comment.fieldId) return null;
-
-  const fieldElement = findFieldElement(iframe, {
-    item: {
-      id: comment.itemId,
-      language: comment.language,
-      version: comment.version,
-    },
-    fieldId: comment.fieldId,
-  });
-
-  if (!fieldElement) return null;
+  const fieldElement = comment.fieldId
+    ? findFieldElement(iframe, {
+        item: {
+          id: comment.itemId,
+          language: comment.language,
+          version: comment.version,
+        },
+        fieldId: comment.fieldId,
+      })
+    : undefined;
 
   let rects: DOMRectList | null = null;
+  let isTextRange = false;
 
-  if (range[0] !== undefined && range[1] !== undefined) {
+  if (fieldElement && range[0] !== undefined && range[1] !== undefined) {
     const startData = getTextNodeAtOffset(fieldElement, range[0]);
     const endData = getTextNodeAtOffset(fieldElement, range[1]);
 
@@ -97,11 +97,25 @@ export function CommentHighlighting({
       textRange.setStart(startData.node, startData.offset);
       textRange.setEnd(endData.node, endData.offset);
       rects = textRange.getClientRects();
+      isTextRange = true;
     }
   }
 
   if (!rects || rects.length === 0) {
-    const fallbackRect = fieldElement.getBoundingClientRect();
+    let fallbackElement = fieldElement;
+    if (!fallbackElement && comment.itemId && editContext.page) {
+      const componentStart = iframe.contentWindow?.document.body.querySelector(
+        "[data-component-start='" + comment.itemId + "']",
+      );
+
+      fallbackElement = componentStart?.nextElementSibling;
+      while (fallbackElement && fallbackElement.tagName === "SCRIPT") {
+        fallbackElement = fallbackElement.nextElementSibling;
+      }
+    }
+    if (!fallbackElement) return null;
+    const fallbackRect = fallbackElement.getBoundingClientRect();
+    if (!fallbackRect) return null;
     rects = {
       length: 1,
       0: fallbackRect,
@@ -146,16 +160,18 @@ export function CommentHighlighting({
               <CommentIcon className="text-blue-500 hover:text-blue-600" />
             </div>
           )}
-          <div
-            className="opacity-45"
-            style={{
-              width: "100%",
-              height: "100%",
-              backgroundColor: comment.isResolved
-                ? "rgba(0, 255, 0, 0.45)"
-                : "rgba(255, 0, 0, 0.45)",
-            }}
-          ></div>
+          {isTextRange && (
+            <div
+              className="opacity-45"
+              style={{
+                width: "100%",
+                height: "100%",
+                backgroundColor: comment.isResolved
+                  ? "rgba(0, 255, 0, 0.45)"
+                  : "rgba(255, 0, 0, 0.45)",
+              }}
+            ></div>
+          )}
         </div>
       ))}
     </>

package/src/editor/page-viewer/PageViewerFrame.tsx

@@ -273,7 +273,7 @@ export function PageViewerFrame({
         injectSXAScripts(iframeRef.current!);
       }, 1000);
 
-      buildPageModelSkeleton(doc, editContextRef, pageViewContextRef);
+      buildPageModelThrottled(doc, editContextRef, pageViewContextRef);
     }
   };
 
@@ -604,7 +604,11 @@ export function PageViewerFrame({
           //attributes: true, // observe attribute changes (like style or class)
         });
 
-        //buildPageModel(iframeDocument, editContextRef, pageViewContextRef);
+        buildPageModelThrottled(
+          iframeDocument,
+          editContextRef,
+          pageViewContextRef,
+        );
       }
     };
 

package/src/editor/sidebar/Translations.tsx

@@ -68,7 +68,7 @@ export function Translation() {
     return (
       <div
         key={language.languageCode}
-        className="flex gap-2"
+        className="flex items-center gap-2"
         onClick={() => selectLanguage(language)}
       >
         <img src={language.icon} className="h-5" /> {language.name}

package/src/editor/sidebar/ViewSelector.tsx

@@ -46,15 +46,6 @@ export function ViewSelector() {
             )}
           </div>
         ))}
-      {/* <div
-        title="Tour"
-        className={
-          "text-gray-400 hover:text-gray-900 cursor-pointer p-3"
-        }
-        onClick={() => editContext!.startTour()}
-      >
-        <i className="pi pi-question-circle text-xl" />
-      </div> */}
     </div>
   );
 }

package/src/editor/ui/PerfectTree.tsx

@@ -105,7 +105,6 @@ const DropZone = memo(
       if (isDragging) {
         if (isValidDropZone) {
           const isValid = isValidDropZone(parent, index);
-          console.log("CHECK RESULT", parent, index, isValid);
           setIsValidDrop(isValid);
         } else {
           setIsValidDrop(false);

package/src/editor/ui/Splitter.tsx

@@ -5,6 +5,7 @@ export type SplitterPanel = {
   name: string;
   content: React.ReactNode;
   collapsible?: boolean;
+  hidden?: boolean;
 };
 
 interface SplitterProps {
@@ -155,7 +156,7 @@ export const Splitter: React.FC<SplitterProps> = ({
       document.addEventListener("mousemove", onMouseMove);
       document.addEventListener("mouseup", onMouseUp, true);
     },
-    [panels, panelSizes]
+    [panels, panelSizes],
   );
 
   const isLastResizer = (index: number) => index === panels.length - 2;
@@ -184,7 +185,7 @@ export const Splitter: React.FC<SplitterProps> = ({
     return (
       <div
         onClick={!isResizing ? toggleLastPanelCollapse : undefined}
-        className="select-none p-1 bg-gray-200  flex items-center justify-center text-gray-500  hover:bg-blue-700 hover:text-white cursor-pointer"
+        className="flex cursor-pointer items-center justify-center bg-gray-200 p-1 text-gray-500 select-none hover:bg-blue-700 hover:text-white"
         style={{ writingMode: "vertical-rl", userSelect: "none" }}
       >
         {expandLabel}
@@ -200,7 +201,7 @@ export const Splitter: React.FC<SplitterProps> = ({
     return (
       <div
         className={
-          " bg-gray-200 cursor-ew-resize select-none flex items-center justify-center hover:bg-blue-700  w-[4px] relative z-1000"
+          "relative z-1000 flex w-[4px] cursor-ew-resize items-center justify-center bg-gray-200 select-none hover:bg-blue-700"
         }
         onDoubleClick={
           isLastResizer(index) ? toggleLastPanelCollapse : undefined
@@ -213,10 +214,7 @@ export const Splitter: React.FC<SplitterProps> = ({
   };
 
   return (
-    <div
-      className="flex w-full h-full overflow-hidden"
-      ref={splitterRef}
-    >
+    <div className="flex h-full w-full overflow-hidden" ref={splitterRef}>
       {panels.map((panel, index) => (
         <React.Fragment key={panel.name}>
           <div
@@ -226,13 +224,15 @@ export const Splitter: React.FC<SplitterProps> = ({
             className="relative"
             style={{
               flex: `${panel.defaultSize === "auto" ? 1 : 0} 1 ${getFlexBasis(
-                index
+                index,
               )}`,
+
               minWidth: 0,
               display:
-                panel.collapsible &&
-                isLastPanelCollapsed &&
-                index === totalPanels - 1
+                (panel.collapsible &&
+                  isLastPanelCollapsed &&
+                  index === totalPanels - 1) ||
+                panel.hidden
                   ? "none"
                   : "block",
             }}

package/src/editor/utils.ts

@@ -319,14 +319,6 @@ export function findComponentRect(
   const elements =
     startElement === endElement ? [startElement] : [startElement, endElement];
 
-  // console.log(
-  //   "start rect",
-  //   startRect,
-  //   startElement,
-  //   iframe.contentWindow?.scrollY,
-  //   takeScrollPositionIntoAccount
-  // );
-
   return {
     rect: {
       x: startRect.x,

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.3883";
-export const buildDate = "2025-05-20 09:23:06";
+export const version = "1.0.3885";
+export const buildDate = "2025-05-20 13:49:48";