@alpaca-editor/core 1.0.3780 → 1.0.3787

package/src/editor/utils.ts

@@ -18,7 +18,7 @@ export function useEventListenerExt(
   eventName: string,
   handler: any,
   element: HTMLElement | Window,
-  capture = false
+  capture = false,
 ) {
   // Create a ref that stores handler
   const savedHandler = useRef<any>(undefined);
@@ -49,20 +49,20 @@ export function useEventListenerExt(
         element.removeEventListener(eventName, eventListener);
       };
     },
-    [eventName, element] // Re-run if eventName or element changes
+    [eventName, element], // Re-run if eventName or element changes
   );
 }
 
 export const useLocalStorage = <T>(
   storageKey: string,
-  fallbackState: T
+  fallbackState: T,
 ): [T, React.Dispatch<React.SetStateAction<T>>] => {
   const [value, setValue] = useState<T>(
     JSON.parse(
       typeof window !== "undefined"
-        ? localStorage.getItem(storageKey) ?? JSON.stringify(fallbackState)
-        : JSON.stringify(fallbackState)
-    )
+        ? (localStorage.getItem(storageKey) ?? JSON.stringify(fallbackState))
+        : JSON.stringify(fallbackState),
+    ),
   );
 
   useEffect(() => {
@@ -75,7 +75,7 @@ export const useLocalStorage = <T>(
 
 export function isFieldActionExecuting(
   field: Field,
-  editContext: EditContextType
+  editContext: EditContextType,
 ) {
   const fieldItem = field.descriptor.item;
 
@@ -88,14 +88,14 @@ export function isFieldActionExecuting(
       x.field.fieldId == field.id &&
       x.field.item?.id == fieldItem.id &&
       x.field.item?.language == fieldItem.language &&
-      x.field.item?.version == fieldItem.version
+      x.field.item?.version == fieldItem.version,
   );
 
   return action?.state == "running";
 }
 
 export function getItemDescriptor(
-  item: FullItem | ItemDescriptor
+  item: FullItem | ItemDescriptor,
 ): ItemDescriptor {
   if (!item) throw new Error("Item is null");
 
@@ -118,7 +118,7 @@ export function getAbsoluteIconUrl(url: string) {
 
 export function findParentWithAttribute(
   element: HTMLElement,
-  attr: string
+  attr: string,
 ): HTMLElement | null {
   while (element && element !== document.documentElement) {
     if (element.hasAttribute(attr)) {
@@ -207,7 +207,7 @@ export function parsePlaceholderKey(key: string) {
 
 export function hasFieldLock(
   field: FieldDescriptor,
-  editContext: EditContextType
+  editContext: EditContextType,
 ) {
   if (!editContext.lockedField) {
     return false;
@@ -222,7 +222,7 @@ export function hasFieldLock(
 
 export function getSessionWithFieldLock(
   field: FieldDescriptor,
-  editContext: EditContextType
+  editContext: EditContextType,
 ) {
   return editContext.activeSessions.find(
     (s) =>
@@ -230,12 +230,12 @@ export function getSessionWithFieldLock(
       s.fieldLock?.fieldId === field.fieldId &&
       s.fieldLock?.item.id === field.item.id &&
       s.fieldLock?.item.language === field.item.language &&
-      s.fieldLock?.item.version === field.item.version
+      s.fieldLock?.item.version === field.item.version,
   );
 }
 
 export function getFieldDescriptorFromElement(
-  element: Element
+  element: Element,
 ): FieldDescriptor {
   return {
     item: {
@@ -263,20 +263,20 @@ export function findNearestComponentId(startElement: Element) {
 
 export function findFieldElement(
   iframe: HTMLIFrameElement,
-  fieldDescriptor: FieldDescriptor
+  fieldDescriptor: FieldDescriptor,
 ) {
   if (!iframe.contentWindow?.document.body) return undefined;
 
   const fieldElement = iframe.contentWindow?.document.body.querySelector(
     "[data-itemid='" +
-    fieldDescriptor.item.id +
+      fieldDescriptor.item.id +
       "'][data-language='" +
       fieldDescriptor.item.language +
       "'][data-version='" +
       fieldDescriptor.item.version +
       "'][data-fieldid='" +
       fieldDescriptor.fieldId +
-      "']"
+      "']",
   );
 
   return fieldElement;
@@ -285,16 +285,16 @@ export function findFieldElement(
 export function findComponentRect(
   iframe: HTMLIFrameElement,
   componentId: string,
-  takeScrollPositionIntoAccount = false
+  takeScrollPositionIntoAccount = false,
 ) {
   if (!iframe.contentWindow?.document.body) return undefined;
 
   const componentStart = iframe.contentWindow?.document.body.querySelector(
-    "[data-component-start='" + componentId + "']"
+    "[data-component-start='" + componentId + "']",
   );
 
   const componentEnd = iframe?.contentWindow?.document.body.querySelector(
-    "[data-component-end='" + componentId + "']"
+    "[data-component-end='" + componentId + "']",
   );
 
   if (!componentStart || !componentEnd) {
@@ -316,7 +316,7 @@ export function findComponentRect(
     ? getAbsolutePosition(startElement as HTMLElement, iframe)
     : startElement.getBoundingClientRect();
 
-  let endElement = componentEnd.previousElementSibling;  
+  let endElement = componentEnd.previousElementSibling;
 
   while (endElement && endElement.tagName === "SCRIPT") {
     endElement = endElement.previousElementSibling;
@@ -352,17 +352,17 @@ export function findComponentRect(
 
 export const getAbsolutePosition = (
   element: HTMLElement,
-  iframe: HTMLIFrameElement
+  iframe: HTMLIFrameElement,
 ) => {
   const rect = element.getBoundingClientRect();
   const scrollLeft =
     iframe.contentWindow?.scrollX ||
-    iframe.contentDocument?.documentElement.scrollLeft || 0;
+    iframe.contentDocument?.documentElement.scrollLeft ||
+    0;
   const scrollTop =
     iframe.contentWindow?.scrollY ||
-    iframe.contentDocument?.documentElement.scrollTop || 0;
-
-  
+    iframe.contentDocument?.documentElement.scrollTop ||
+    0;
 
   return {
     x: rect.left + scrollLeft,
@@ -412,7 +412,10 @@ const dateOptions: Intl.DateTimeFormatOptions = {
   hour12: false,
 };
 
-const dateFormat = Intl.DateTimeFormat(typeof navigator !== 'undefined' ? navigator.language : 'en', dateOptions);
+const dateFormat = Intl.DateTimeFormat(
+  typeof navigator !== "undefined" ? navigator.language : "en",
+  dateOptions,
+);
 
 export function formatDate(date: Date) {
   return dateFormat.format(date);
@@ -421,7 +424,7 @@ export function formatDate(date: Date) {
 export function findClosestFieldElement(node: Node | null): HTMLElement | null {
   let current: Node | null = node;
 
-  while (current) {        
+  while (current) {
     if (current.nodeType === Node.ELEMENT_NODE) {
       const element = current as Element;
       if (element.hasAttribute("data-fieldid")) {
@@ -432,4 +435,4 @@ export function findClosestFieldElement(node: Node | null): HTMLElement | null {
   }
 
   return null;
-}
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/styles.css

@@ -3,6 +3,125 @@
   --font-geist-mono: "GeistMono";
 }
 
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
 @layer alpaca-editor {
   .bg-shape-black {
     background-color: black;
@@ -472,3 +591,8 @@
   overflow: auto;
   resize: vertical;
 }
+
+.p-checkbox-box {
+  width: 15px;
+  height: 15px;
+}

package/tsconfig.build.json

@@ -1,5 +1,8 @@
 {
   "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    },
     "target": "es2022",
     "module": "esnext",
     "moduleResolution": "bundler",

package/tsconfig.json

@@ -1,6 +1,9 @@
 {
   "extends": "@repo/typescript-config/react-library.json",
   "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    },
     "outDir": "dist",
     "module": "ES2020",
     "moduleResolution": "bundler",