@alpaca-editor/core 1.0.3812 → 1.0.3815

package/src/editor/sidebar/ComponentTree.tsx

@@ -177,7 +177,7 @@ export function ComponentTree({}) {
       });
     }
 
-    if (c.datasourceItem && c.datasourceItem?.id !== c.id) {
+    if (c.isShared) {
       node.tags!.push({
         id: "linked",
         severity: "warning",
@@ -274,13 +274,17 @@ export function ComponentTree({}) {
   };
 
   // Handle tree context menu
-  const handleTreeContextMenu = (item: any, event: React.MouseEvent) => {
-    const componentId = nodeDictionary[item.id]?.componentId;
+  const handleTreeContextMenu = (
+    node: TreeNode<Component>,
+    event: React.MouseEvent,
+  ) => {
+    const componentId = nodeDictionary[node.key]?.componentId;
 
     let selectedComponentIds = editContext?.selection || [];
 
     if (componentId) {
       if (selectedComponentIds.indexOf(componentId) < 0) {
+        console.log("selecting", componentId);
         editContextRef.current?.select([componentId]);
         selectedComponentIds = [componentId];
       }
@@ -297,8 +301,8 @@ export function ComponentTree({}) {
       .map((key) => nodeDictionary[key]!.data)
       .filter(isDefinedEntity);
 
-    if (selectedEntities.length === 0 && item.data) {
-      selectedEntities = [item.data];
+    if (selectedEntities.length === 0 && nodeDictionary[node.key]?.data) {
+      selectedEntities = [nodeDictionary[node.key]!.data as Component];
     }
 
     let commands = getComponentCommands(
@@ -402,6 +406,7 @@ export function ComponentTree({}) {
         expandedKeys={expandedItems}
         onToggleExpand={handleToggle}
         onSelect={handleTreeSelection}
+        onContextMenu={handleTreeContextMenu}
         enableDragAndDrop={true}
         onDragOverZone={(parent, index, event) =>
           handleDragOverZone(parent as CustomTreeNode | null, index, event)

package/src/editor/sidebar/MainContentTree.tsx

@@ -78,7 +78,7 @@ export function MainContentTree({
               insertOptions?.find(
                 (insertOption: InsertOption) =>
                   insertOption.typeId == x.templateId ||
-                  insertOption.compatibleTemplates?.find(
+                  insertOption.compatibleTypeIds?.find(
                     (compatibleTemplate) => compatibleTemplate == x.templateId,
                   ) !== undefined,
               ) !== undefined

package/src/editor/sidebar/SidebarView.tsx

@@ -19,7 +19,7 @@ export function SidebarView({
 
   const [sizes, setSizes] = useState<number[]>([]);
   const [preferredSizes, setPreferredSizes] = useState<number[] | undefined>(
-    undefined
+    undefined,
   );
   const [panelsExpanded, setPanelsExpanded] = useState<boolean[]>([]);
   const [sizeToSet, setSizeToSet] = useState<number[] | undefined>();
@@ -76,8 +76,8 @@ export function SidebarView({
     return (
       <div
         className={classNames(
-          " p-2.5 bg-gray-50 uppercase text-gray-500 text-xs flex justify items-center cursor-pointer relative",
-          panelsExpanded[index] ? "border-b border-gray-200" : ""
+          "justify relative flex cursor-pointer items-center bg-gray-50 p-2.5 text-xs text-gray-500 uppercase",
+          panelsExpanded[index] ? "border-b border-gray-200" : "",
         )}
         onClick={() => toggle(index)}
       >
@@ -85,13 +85,13 @@ export function SidebarView({
           (typeof panel.icon === "string" ? (
             <i className={classNames(panel.icon, "pi mr-1.5")}></i>
           ) : (
-            <div className="w-4 h-4 mr-2">{panel.icon}</div>
+            <div className="mr-2 h-4 w-4">{panel.icon}</div>
           ))}
         <div className="mr-auto">{panel.title}</div>
         <i
           className={classNames(
             panelsExpanded[index] ? "pi-chevron-up" : "pi-chevron-down",
-            "pi text-sm"
+            "pi text-sm",
           )}
         ></i>
       </div>
@@ -128,14 +128,14 @@ export function SidebarView({
               : panelHeaderSize
           }
         >
-          <div className="flex flex-col h-full">
+          <div className="flex h-full flex-col">
             {getHeader(panel, index)}
             {panelsExpanded[index] && (
-              <div className="overflow-hidden relative flex-1">
+              <div className="relative flex-1 overflow-hidden">
                 <div
                   className={classNames(
-                    "inset-0 absolute",
-                    panel.noOverflow ? "" : "overflow-y-auto"
+                    "absolute inset-0",
+                    panel.noOverflow ? "" : "overflow-y-auto",
                   )}
                 >
                   {panel.content}

package/src/editor/ui/CopyToClipboardButton.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Copy } from "lucide-react";
 import { useEditContext } from "../client/editContext";
 
 export function CopyToClipboardButton({ text }: { text: string }) {
@@ -17,7 +18,7 @@ export function CopyToClipboardButton({ text }: { text: string }) {
       className="ml-1 cursor-pointer"
       onClick={() => handleCopyToClipboard(text)}
     >
-      <i className="pi pi-copy text-xs" />
+      <Copy size={14} />
     </span>
   );
 }

package/src/editor/ui/Icons.tsx

@@ -310,24 +310,6 @@ export function PuzzleIcon() {
   );
 }
 
-export function NavigatorIcon() {
-  return (
-    <svg
-      width="18"
-      height="16"
-      viewBox="0 0 16 14"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      stroke="currentColor"
-    >
-      <path
-        d="M8.27572 8.58057L0.942383 4.58057L8.27572 0.580566L15.609 4.58057L8.27572 8.58057ZM8.27572 11.2472L1.32572 7.4639L2.72572 6.69723L8.27572 9.73057L13.8257 6.69723L15.2257 7.4639L8.27572 11.2472ZM8.27572 13.9139L1.32572 10.1306L2.72572 9.3639L8.27572 12.3972L13.8257 9.3639L15.2257 10.1306L8.27572 13.9139ZM8.27572 7.0639L12.8257 4.58057L8.27572 2.09723L3.72572 4.58057L8.27572 7.0639Z"
-        fill="#6b7280"
-      />
-    </svg>
-  );
-}
-
 export function FormEditIcon({ className }: { className?: string }) {
   return (
     <svg

package/src/editor/ui/Section.tsx

@@ -16,8 +16,8 @@ export function Section({
         className={classNames(
           open
             ? "border-blue-500 bg-gray-600"
-            : "border-gray-400 bg-gray-400 hover:bg-gray-500 hover:border-gray-300",
-          "py-2.5 px-3 border-l-[8px] text-white text-xs cursor-pointer flex justify-between items-center"
+            : "border-gray-400 bg-gray-400 hover:border-gray-300 hover:bg-gray-500",
+          "flex cursor-pointer items-center justify-between border-l-[8px] px-3 py-2 text-xs text-white",
         )}
         onClick={() => setOpen(!open)}
       >
@@ -25,11 +25,11 @@ export function Section({
         <i
           className={classNames(
             open ? "pi-chevron-up" : "pi-chevron-down",
-            "pi cursor-pointer text-xs"
+            "pi cursor-pointer text-xs",
           )}
         ></i>
       </div>
-      {open && <div className="pt-4 pb-6 px-2 bg-gray-50">{children}</div>}
+      {open && <div className="bg-gray-50 px-2 pt-4 pb-6">{children}</div>}
     </div>
   );
 }

package/src/editor/ui/SimpleMenu.tsx

@@ -1,13 +1,5 @@
 import { ReactNode } from "react";
-
-export type MenuItem = {
-  key: string;
-  label: string;
-  items?: MenuItem[];
-  icon?: ReactNode;
-  command?: () => void;
-};
-
+import { MenuItem } from "../../config/types";
 export function SimpleMenu({
   items,
   activeItemKey,
@@ -18,9 +10,9 @@ export function SimpleMenu({
   onItemClick: (item: MenuItem) => void;
 }) {
   return (
-    <div className="flex flex-col p-1 h-full">
+    <div className="flex h-full flex-col p-1">
       {items.map((item, index) => (
-        <div key={index} className="p-2 h-full flex flex-col gap-1">
+        <div key={index} className="flex h-full flex-col gap-1 p-2">
           <div className="flex flex-row items-center gap-2 border-b border-gray-200 pb-1 pl-2">
             {item.icon && item.icon}
             {item.label}
@@ -28,8 +20,8 @@ export function SimpleMenu({
           {item.items?.map((subItem, subIndex) => (
             <div
               key={subIndex}
-              className={`flex flex-col px-4 p-1 cursor-pointer hover:bg-gray-100 ${
-                activeItemKey === subItem.key ? "bg-gray-100" : ""
+              className={`flex cursor-pointer flex-col p-1 px-4 hover:bg-gray-100 ${
+                activeItemKey === subItem.id ? "bg-gray-100" : ""
               }`}
               onClick={() => {
                 onItemClick(subItem);

package/src/editor/utils.ts

@@ -4,7 +4,7 @@ import { useEffect, useRef } from "react";
 import { EditContextType } from "./client/editContext";
 
 import { FieldDescriptor } from "../types";
-import { Field, FullItem, ItemDescriptor } from "./pageModel";
+import { Field, FullItem, ItemDescriptor, Component } from "./pageModel";
 
 export type Rect = {
   x: number;
@@ -284,31 +284,19 @@ export function findFieldElement(
 
 export function findComponentRect(
   iframe: HTMLIFrameElement,
-  componentId: string,
+  component: Component,
   takeScrollPositionIntoAccount = false,
 ) {
   if (!iframe.contentWindow?.document.body) return undefined;
 
-  const componentStart = iframe.contentWindow?.document.body.querySelector(
-    "[data-component-start='" + componentId + "']",
-  );
-
-  const componentEnd = iframe?.contentWindow?.document.body.querySelector(
-    "[data-component-end='" + componentId + "']",
-  );
-
-  if (!componentStart || !componentEnd) {
-    return null;
-  }
-
-  let startElement = componentStart.nextElementSibling;
+  let startElement: Element | undefined | null = component.firstDOMElement;
 
   while (startElement && startElement.tagName === "SCRIPT") {
     startElement = startElement.nextElementSibling;
   }
 
   if (!startElement) {
-    console.error("No start element found for component " + componentId);
+    console.error("No start element found for component " + component.id);
     return null;
   }
 
@@ -316,12 +304,13 @@ export function findComponentRect(
     ? getAbsolutePosition(startElement as HTMLElement, iframe)
     : startElement.getBoundingClientRect();
 
-  let endElement = componentEnd.previousElementSibling;
+  let endElement: Element | undefined | null = component.lastDOMElement;
 
   while (endElement && endElement.tagName === "SCRIPT") {
     endElement = endElement.previousElementSibling;
   }
 
+
   if (!endElement) return null;
 
   const endRect = takeScrollPositionIntoAccount
@@ -350,6 +339,74 @@ export function findComponentRect(
   };
 }
 
+// export function findComponentRect(
+//   iframe: HTMLIFrameElement,
+//   componentId: string,
+//   takeScrollPositionIntoAccount = false,
+// ) {
+//   if (!iframe.contentWindow?.document.body) return undefined;
+
+//   const componentStart = iframe.contentWindow?.document.body.querySelector(
+//     "[data-component-start='" + componentId + "']",
+//   );
+
+//   const componentEnd = iframe?.contentWindow?.document.body.querySelector(
+//     "[data-component-end='" + componentId + "']",
+//   );
+
+//   if (!componentStart || !componentEnd) {
+//     return null;
+//   }
+
+//   let startElement = componentStart.nextElementSibling;
+
+//   while (startElement && startElement.tagName === "SCRIPT") {
+//     startElement = startElement.nextElementSibling;
+//   }
+
+//   if (!startElement) {
+//     console.error("No start element found for component " + componentId);
+//     return null;
+//   }
+
+//   const startRect = takeScrollPositionIntoAccount
+//     ? getAbsolutePosition(startElement as HTMLElement, iframe)
+//     : startElement.getBoundingClientRect();
+
+//   let endElement = componentEnd.previousElementSibling;
+
+//   while (endElement && endElement.tagName === "SCRIPT") {
+//     endElement = endElement.previousElementSibling;
+//   }
+
+//   if (!endElement) return null;
+
+//   const endRect = takeScrollPositionIntoAccount
+//     ? getAbsolutePosition(endElement as HTMLElement, iframe)
+//     : endElement.getBoundingClientRect();
+
+//   const elements =
+//     startElement === endElement ? [startElement] : [startElement, endElement];
+
+//   // console.log(
+//   //   "start rect",
+//   //   startRect,
+//   //   startElement,
+//   //   iframe.contentWindow?.scrollY,
+//   //   takeScrollPositionIntoAccount
+//   // );
+
+//   return {
+//     rect: {
+//       x: startRect.x,
+//       y: startRect.y,
+//       width: endRect.x + endRect.width - startRect.x,
+//       height: endRect.y + endRect.height - startRect.y,
+//     },
+//     elements: elements,
+//   };
+// }
+
 export const getAbsolutePosition = (
   element: HTMLElement,
   iframe: HTMLIFrameElement,

package/src/lib/safelist.tsx

@@ -4,9 +4,11 @@ export function Safelist() {
       <div className="bg-orange-400"></div>
       <div className="bg-purple-400"></div>
       <div className="bg-sky-400"></div>
+      <div className="bg-red-400"></div>
       <div className="border-orange-400"></div>
       <div className="border-purple-400"></div>
       <div className="border-sky-400"></div>
+      <div className="border-red-400"></div>
     </>
   );
 }

package/src/splash-screen/SplashScreen.tsx

@@ -80,7 +80,6 @@ export function SplashScreen() {
                     key={index}
                     onMouseOver={() => setSelectedPage(page)}
                     onClick={() => {
-                      editContext?.switchView("page-editor");
                       editContext?.loadItem({
                         id: page.id,
                         language: page.language ?? "en",

package/src/types.ts

@@ -93,7 +93,7 @@ export type RenameItemOperation = EditOperation & {
 
 export type EditFieldOperation = EditOperation & {
   type: "edit-field";
-  item: ItemDescriptor;
+  itemId: string;
   fieldName: string;
   fieldId: string;
   fieldType?: string;
@@ -214,7 +214,7 @@ export type InsertOption = {
   isInvalid: boolean;
   message?: string;
   isHidden: any;
-  compatibleTemplates?: string[];
+  compatibleTypeIds?: string[];
 };
 
 export type LanguagesAndVersions = {
@@ -296,7 +296,5 @@ export type SystemStatusMessage = {
 };
 
 export type SystemStatus = {
-
   messages: SystemStatusMessage[];
 };
-

package/styles.css

@@ -15,37 +15,74 @@
   --animate-fadeRight: "fadeRight 0.8s ease-in-out";
   --animate-bounceDots: "bounceDots .6s infinite alternate";
 
- 
   @keyframes sparkle {
-    "0%, 100%": { opacity: 0.8, transform: scale(1) }
-    "50%": { opacity: 1, transform: scale(1.3) }
+    "0%, 100%": {
+      opacity: 0.8;
+      transform: scale(1);
+    }
+    "50%": {
+      opacity: 1;
+      transform: scale(1.3);
+    }
   }
   @keyframes slideUp {
-    "0%": { transform: translateY(70px), opacity: 0 }
-    "100%": { transform: translateY(0), opacity: 1 }
+    "0%": {
+      transform: translateY(70px);
+      opacity: 0;
+    }
+    "100%": {
+      transform: translateY(0);
+      opacity: 1;
+    }
   }
   @keyframes fadeIn {
-    "0%": { opacity: 0 }
-    "100%": { opacity: 1 }
+    "0%": {
+      opacity: 0;
+    }
+    "100%": {
+      opacity: 1;
+    }
   }
   @keyframes fadeLeft {
-    "0%": { transform: translateX(-50%), opacity: 0 }
-    "100%": { transform: translateX(0), opacity: 1 }
+    "0%": {
+      transform: translateX(-50%);
+      opacity: 0;
+    }
+    "100%": {
+      transform: translateX(0);
+      opacity: 1;
+    }
   }
   @keyframes fadeRight {
-    "0%": { transform: translateX(50%), opacity: 0 }
-    "100%": { transform: translateX(0), opacity: 1 }
+    "0%": {
+      transform: translateX(50%);
+      opacity: 0;
+    }
+    "100%": {
+      transform: translateX(0);
+      opacity: 1;
+    }
   }
   @keyframes fadeBottom {
-    "0%": { transform: translateY(50%), opacity: 0 }
-    "100%": { transform: translateY(0), opacity: 1 }
+    "0%": {
+      transform: translateY(50%);
+      opacity: 0;
+    }
+    "100%": {
+      transform: translateY(0);
+      opacity: 1;
+    }
   }
   @keyframes bounceDots {
-    "0%": { opacity: 1, transform: translateY(0) }
-    "100%": { opacity: 0.3, transform: translateY(-2px) }
+    "0%": {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    "100%": {
+      opacity: 0.3;
+      transform: translateY(-2px);
+    }
   }
-
-
 }
 
 :root {
@@ -641,3 +678,7 @@
   width: 15px;
   height: 15px;
 }
+
+button {
+  cursor: pointer;
+}