@alpaca-editor/core 1.0.4114 → 1.0.4120

package/src/editor/LinkEditorDialog.tsx

@@ -25,21 +25,25 @@ export type Link = {
   targetItemLongId?: string;
   targetItemName?: string;
   originalHref?: string; // Preserves original Sitecore RTE href format
+  text?: string;
 };
 
 export function LinkEditorDialog({
   linkValue,
   onCancel,
   onOk,
+  showText,
 }: {
   linkValue: Link;
   onOk: (link: Link) => void;
   onCancel: () => void;
+  showText?: boolean;
 }) {
   const [url, setUrl] = useState<string>();
   const [targetWindow, setTargetWindow] = useState<string>();
   const [customTarget, setCustomTarget] = useState<string>();
   const [queryString, setQueryString] = useState<string>();
+  const [text, setText] = useState<string>();
   const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
   const [selectedItemId, setSelectedItemId] = useState<string>("");
   const [hoveredItemId, setHoveredItemId] = useState<string>();
@@ -59,6 +63,7 @@ export function LinkEditorDialog({
 
     if (linkValue.itemId) setSelectedItemId(linkValue.itemId);
     if (linkValue.queryString) setQueryString(linkValue.queryString);
+    if (linkValue.text) setText(linkValue.text);
   }, [linkValue]);
 
   const targetWindows = [
@@ -161,6 +166,20 @@ export function LinkEditorDialog({
             </div>
             <div className="flex h-full w-64 shrink-0 flex-col justify-center border-l border-gray-200 p-3">
               <div className="flex flex-col gap-2">
+                {showText && (
+                  <>
+                    <label className="text-xs">Link description</label>
+                    <Input
+                      value={text || ""}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        setText(e.target.value)
+                      }
+                      className="text-sm"
+                    />
+                  </>
+                )}
+              </div>
+              <div className="mt-2 flex flex-col gap-2">
                 <label className="text-xs">Query String</label>
                 <Input
                   value={queryString || ""}
@@ -208,6 +227,7 @@ export function LinkEditorDialog({
                   customTarget: customTarget,
                   itemId: selectedItemId,
                   queryString: queryString,
+                  text: text,
                   type: isExternal ? "external" : "internal",
                 });
               }}

package/src/editor/MainLayout.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { EditorView } from "../config/types";
-import { classNames } from "primereact/utils";
+import { cn } from "../lib/utils";
 import { useEditContext } from "./client/editContext";
 import { SidebarView } from "./sidebar/SidebarView";
 import { Splitter, SplitterPanel } from "./ui/Splitter";
@@ -76,11 +76,11 @@ export default function MainLayout(props: MainLayoutProps) {
   let className = props.className;
 
   if (!editContext?.configuration.editor.embedded) {
-    className = classNames("fixed inset-0", props.className);
+    className = cn("fixed inset-0", props.className);
   }
 
   return (
-    <div className={classNames("flex font-normal select-none", className)}>
+    <div className={cn("flex font-normal select-none", className)}>
       <div className="flex flex-1">
         {!props.view.hideViewSelector && <LeftToolbar />}
         <div className="flex flex-1 flex-col">

package/src/editor/PictureCropper.tsx

@@ -9,7 +9,7 @@ import { ReactNode, useEffect, useRef, useState } from "react";
 import { Button } from "../components/ui/button";
 import DialogButtons from "./ui/DialogButtons";
 import { Rect } from "./utils";
-import { classNames } from "primereact/utils";
+import { cn } from "../lib/utils";
 import {
   PictureField,
   PictureRawValue,
@@ -952,7 +952,7 @@ export function PictureCropper({
 
                             {/* Crop area border and interaction */}
                             <div
-                              className={classNames(
+                              className={cn(
                                 "absolute cursor-move border-2 border-dashed",
                                 isValid
                                   ? "border-theme-secondary"
@@ -983,7 +983,7 @@ export function PictureCropper({
                               {/* Dimensions text */}
                               {rect.width > 0.05 && (
                                 <div
-                                  className={classNames(
+                                  className={cn(
                                     "absolute right-1 bottom-1 rounded p-2 text-xs text-nowrap",
                                     isValid
                                       ? "bg-black/40 text-white"

package/src/editor/PictureEditor.tsx

@@ -17,12 +17,14 @@ export function PictureEditor({
   style,
   forwardScrollevents,
   isPageEditor,
+  onContextMenu,
 }: {
   field: PictureField;
   variantName: string;
   style?: React.CSSProperties;
   forwardScrollevents?: boolean;
   isPageEditor?: boolean;
+  onContextMenu?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }) {
   const [showCropper, setShowCropper] = useState(false);
   const [fieldButtons, setFieldButtons] = useState<FieldButton[]>([]);
@@ -212,6 +214,7 @@ export function PictureEditor({
         const itemId = field.descriptor.item?.id;
         if (itemId) editContext?.select([itemId]);
       }}
+      onContextMenu={onContextMenu}
       onWheel={(e) => {
         if (forwardScrollevents)
           editContext?.pageView.editorIframe!?.contentWindow?.document.documentElement?.scrollBy(

package/src/editor/PictureEditorDialog.tsx

@@ -1,9 +1,14 @@
-import { Dialog } from "primereact/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "../components/ui/dialog";
 
 import { useEditContext } from "./client/editContext";
 
 import { useCallback, useEffect, useState } from "react";
-import { Button } from "primereact/button";
+import { Button } from "../components/ui/button";
 import DialogButtons from "./ui/DialogButtons";
 
 import { getPictureValue } from "./services/editService";
@@ -68,7 +73,7 @@ export function PictureEditorDialog({
       imageSelected(
         chosenImage,
         variantName ?? selectedVariantName,
-        raw ?? rawValue
+        raw ?? rawValue,
       );
   }
 
@@ -83,7 +88,7 @@ export function PictureEditorDialog({
       (!selectedVariant.aspectRatioLock ||
         Math.abs(
           selectedVariant.aspectRatioLock -
-            selectedVariant.region.width / selectedVariant.region.height
+            selectedVariant.region.width / selectedVariant.region.height,
         ) < 0.1)
     )
       setRect({
@@ -99,7 +104,7 @@ export function PictureEditorDialog({
 
   const getPictureFieldValue = async (
     field: Field,
-    rawValue: PictureRawValue
+    rawValue: PictureRawValue,
   ): Promise<PictureValue | null> => {
     if (!editContext?.pageView.site) return null;
 
@@ -107,7 +112,7 @@ export function PictureEditorDialog({
       field,
       rawValue,
       editContext.pageView.site?.name,
-      editContext.sessionId
+      editContext.sessionId,
     );
   };
 
@@ -115,7 +120,7 @@ export function PictureEditorDialog({
     async (
       imageId: string,
       variantName?: string,
-      rawValue?: PictureRawValue
+      rawValue?: PictureRawValue,
     ) => {
       if (!variantName || !rawValue) return;
 
@@ -135,7 +140,7 @@ export function PictureEditorDialog({
         setPictureValue(newValue);
       }
     },
-    []
+    [],
   );
   const updateRawValue = async (rawValue: PictureRawValue) => {
     setRawValue(rawValue);
@@ -151,7 +156,7 @@ export function PictureEditorDialog({
 
     if (selectedVariant) {
       let selected = rawValue.Variants?.find(
-        (x: PictureRawVariant) => x.Name == selectedVariantName
+        (x: PictureRawVariant) => x.Name == selectedVariantName,
       );
       if (!selected) {
         selected = {
@@ -177,158 +182,175 @@ export function PictureEditorDialog({
   return (
     <>
       <Dialog
-        header={"Edit " + field.name}
-        visible={true}
-        style={{ width: "70vw", height: "70vh" }}
-        onHide={onCancel}
+        open={true}
+        onOpenChange={(open) => {
+          if (!open) {
+            onCancel();
+          }
+        }}
       >
-        <div className="flex gap-1 flex-col justify h-full">
-          <div className="flex-1 flex gap-2">
-            <div className=" h-full border-r pt-3 w-48 relative">
-              <div className="absolute inset-0 overflow-y-auto flex flex-col gap-6">
-                {pictureValue &&
-                  pictureValue.variants?.map((variant) => (
-                    <div
-                      key={variant.name}
-                      onClick={() => setSelectedVariantName(variant.name)}
-                      className="text-xs flex flex-col items-center justify-center gap-1 cursor-pointer"
-                    >
-                      <div
-                        className={
-                          "flex justify-center items-center h-40 w-40 border relative" +
-                          (selectedVariantName == variant.name
-                            ? " shadow-xl "
-                            : "")
-                        }
-                      >
-                        {variant.src && <img src={variant.thumbSrc} />}
-                      </div>
-                      <div className="w-40">
-                        <div>{variant.name}</div>
-                        <div>{variant.aspectRatioLockText}</div>
-                        <div>
-                          <div className="break-all">
-                            Name: {variant.mediaItemName}
+        <DialogContent
+          className="max-w-none"
+          style={{ width: "70vw", height: "70vh" }}
+        >
+          <DialogHeader>
+            <DialogTitle>{"Edit " + field.name}</DialogTitle>
+          </DialogHeader>
+          <div className="flex-1 overflow-auto">
+            <div className="justify flex h-full flex-col gap-1">
+              <div className="flex flex-1 gap-2">
+                <div className="relative h-full w-48 border-r pt-3">
+                  <div className="absolute inset-0 flex flex-col gap-6 overflow-y-auto">
+                    {pictureValue &&
+                      pictureValue.variants?.map((variant) => (
+                        <div
+                          key={variant.name}
+                          onClick={() => setSelectedVariantName(variant.name)}
+                          className="flex cursor-pointer flex-col items-center justify-center gap-1 text-xs"
+                        >
+                          <div
+                            className={
+                              "relative flex h-40 w-40 items-center justify-center border" +
+                              (selectedVariantName == variant.name
+                                ? " shadow-xl"
+                                : "")
+                            }
+                          >
+                            {variant.src && <img src={variant.thumbSrc} />}
                           </div>
-                          <div>
-                            Orig. size: {variant.width} x {variant.height}
+                          <div className="w-40">
+                            <div>{variant.name}</div>
+                            <div>{variant.aspectRatioLockText}</div>
+                            <div>
+                              <div className="break-all">
+                                Name: {variant.mediaItemName}
+                              </div>
+                              <div>
+                                Orig. size: {variant.width} x {variant.height}
+                              </div>
+                              {(variant.width < 1 || variant.height < 1) && (
+                                <span>
+                                  {" "}
+                                  <i className="pi pi-exclamation-triangle text-red-600"></i>
+                                </span>
+                              )}
+                            </div>
                           </div>
-                          {(variant.width < 1 || variant.height < 1) && (
-                            <span>
-                              {" "}
-                              <i className="pi pi-exclamation-triangle text-red-600 "></i>
-                            </span>
-                          )}
                         </div>
-                      </div>
-                    </div>
-                  ))}
-              </div>
-              {usage && <div className="text-xs">{usage}</div>}
-            </div>
-            <div className="flex-1 relative p-3">
-              <div className="absolute inset-0 top-3 overflow-auto select-none flex align-center justify-center">
-                {selectedVariant && (
-                  <div
-                    className="relative"
-                    onDoubleClick={() => selectMedia()}
-                    onMouseDown={(ev) => {
-                      ev.preventDefault();
-                      ev.stopPropagation();
-                      const bounds = ev.currentTarget.getBoundingClientRect();
+                      ))}
+                  </div>
+                  {usage && <div className="text-xs">{usage}</div>}
+                </div>
+                <div className="relative flex-1 p-3">
+                  <div className="align-center absolute inset-0 top-3 flex justify-center overflow-auto select-none">
+                    {selectedVariant && (
+                      <div
+                        className="relative"
+                        onDoubleClick={() => selectMedia()}
+                        onMouseDown={(ev) => {
+                          ev.preventDefault();
+                          ev.stopPropagation();
+                          const bounds =
+                            ev.currentTarget.getBoundingClientRect();
 
-                      setRect({
-                        left: (ev.clientX - bounds.left) / bounds.width,
-                        top: (ev.clientY - bounds.top) / bounds.height,
-                        width: 0,
-                        height: 0,
-                      });
-                    }}
-                    onMouseMoveCapture={(ev) => {
-                      if (ev.buttons === 1) {
-                        const bounds = ev.currentTarget.getBoundingClientRect();
+                          setRect({
+                            left: (ev.clientX - bounds.left) / bounds.width,
+                            top: (ev.clientY - bounds.top) / bounds.height,
+                            width: 0,
+                            height: 0,
+                          });
+                        }}
+                        onMouseMoveCapture={(ev) => {
+                          if (ev.buttons === 1) {
+                            const bounds =
+                              ev.currentTarget.getBoundingClientRect();
 
-                        const width =
-                          (ev.clientX - bounds.left) / bounds.width - rect.left;
+                            const width =
+                              (ev.clientX - bounds.left) / bounds.width -
+                              rect.left;
 
-                        const newRect = {
-                          ...rect,
-                          width,
-                          height: selectedVariant.aspectRatioLock
-                            ? width / selectedVariant.aspectRatioLock
-                            : (ev.clientY - bounds.top) / bounds.height -
-                              rect.top,
-                        };
+                            const newRect = {
+                              ...rect,
+                              width,
+                              height: selectedVariant.aspectRatioLock
+                                ? width / selectedVariant.aspectRatioLock
+                                : (ev.clientY - bounds.top) / bounds.height -
+                                  rect.top,
+                            };
 
-                        setRect(newRect);
-                        ev.preventDefault();
-                        ev.stopPropagation();
-                      }
-                    }}
-                    onMouseUp={() => setVariantCrop()}
-                  >
-                    <img
-                      src={selectedVariant.originalSrc ?? selectedVariant.src}
-                      className="object-contain h-full w-full"
-                    />
-                    <div
-                      className="absolute bg-opacity-70 bg-gray-300"
-                      style={{
-                        left: rect.left * 100 + "%",
-                        top: rect.top * 100 + "%",
-                        width: rect.width * 100 + "%",
-                        height: rect.height * 100 + "%",
-                      }}
-                    />
-                  </div>
-                )}
-                {selectedVariant && (
-                  <div
-                    className="absolute top-0 right-0 cursor-pointer text-sm flex flex-col gap-1 items-center p-2 bg-gray-100 bg-opacity-70"
-                    onClick={() => selectMedia()}
-                  >
-                    <i className="pi pi-pencil text-xl"></i>
-                    Choose
+                            setRect(newRect);
+                            ev.preventDefault();
+                            ev.stopPropagation();
+                          }
+                        }}
+                        onMouseUp={() => setVariantCrop()}
+                      >
+                        <img
+                          src={
+                            selectedVariant.originalSrc ?? selectedVariant.src
+                          }
+                          className="h-full w-full object-contain"
+                        />
+                        <div
+                          className="bg-opacity-70 absolute bg-gray-300"
+                          style={{
+                            left: rect.left * 100 + "%",
+                            top: rect.top * 100 + "%",
+                            width: rect.width * 100 + "%",
+                            height: rect.height * 100 + "%",
+                          }}
+                        />
+                      </div>
+                    )}
+                    {selectedVariant && (
+                      <div
+                        className="bg-opacity-70 absolute top-0 right-0 flex cursor-pointer flex-col items-center gap-1 bg-gray-100 p-2 text-sm"
+                        onClick={() => selectMedia()}
+                      >
+                        <i className="pi pi-pencil text-xl"></i>
+                        Choose
+                      </div>
+                    )}
                   </div>
-                )}
+                </div>
               </div>
+              <DialogButtons>
+                <Button
+                  size="sm"
+                  onClick={() => {
+                    if (pictureValue) {
+                      if (field) {
+                        editContext?.operations.editField({
+                          field: field.descriptor,
+                          rawValue: JSON.stringify(rawValue),
+                          refresh: "immediate",
+                        });
+                      }
+                      onOk(pictureValue);
+                    }
+                  }}
+                >
+                  Ok
+                </Button>
+                <Button
+                  onClick={() => {
+                    onCancel();
+                  }}
+                  size="sm"
+                >
+                  Cancel
+                </Button>
+              </DialogButtons>
             </div>
           </div>
-          <DialogButtons>
-            <Button
-              size="small"
-              onClick={() => {
-                if (pictureValue) {
-                  if (field) {
-                    editContext?.operations.editField({
-                      field: field.descriptor,
-                      rawValue: JSON.stringify(rawValue),
-                      refresh: "immediate",
-                    });
-                  }
-                  onOk(pictureValue);
-                }
-              }}
-            >
-              Ok
-            </Button>
-            <Button
-              onClick={() => {
-                onCancel();
-              }}
-              size="small"
-            >
-              Cancel
-            </Button>
-          </DialogButtons>
-        </div>
+        </DialogContent>
       </Dialog>
     </>
   );
 }
 function getUsage(
   pictureValue: PictureValue | undefined,
-  params: PictureParams | MediaPictureParams | undefined
+  params: PictureParams | MediaPictureParams | undefined,
 ) {
   if (!params) return;
   if (!pictureValue) return;
@@ -343,7 +365,7 @@ function getUsage(
         source,
         variant: getRenderedPictureVariant(
           mediaParams[source],
-          pictureValue.variants
+          pictureValue.variants,
         ),
       }))
       .filter((x) => x.variant);
@@ -371,7 +393,7 @@ function getUsage(
         {
           getRenderedPictureVariant(
             params as PictureParams,
-            pictureValue.variants
+            pictureValue.variants,
           )?.name
         }
         .

package/src/editor/Terminal.tsx

@@ -5,9 +5,8 @@ import React, {
   useState,
   useImperativeHandle,
 } from "react";
-import { Button } from "primereact/button";
-import { InputTextarea } from "primereact/inputtextarea";
-import { classNames } from "primereact/utils";
+import { Textarea } from "../components/ui/textarea";
+import { cn } from "../lib/utils";
 import { SimpleIconButton } from "./ui/SimpleIconButton";
 import { Trash2, Send } from "lucide-react";
 import { TerminalService } from "primereact/terminalservice";
@@ -211,7 +210,7 @@ export const Terminal = forwardRef<
   }));
 
   return (
-    <div className={classNames("flex h-full flex-col", className)}>
+    <div className={cn("flex h-full flex-col", className)}>
       <div className="flex items-center justify-between gap-2 border-b border-gray-200 p-1 text-xs">
         <SimpleIconButton
           onClick={() => {
@@ -246,12 +245,12 @@ export const Terminal = forwardRef<
       </div>
       <div className="flex flex-col p-1 pb-0">
         {infobar}
-        <InputTextarea
+        <Textarea
           ref={inputRef}
           value={prompt}
           className="flex-1 resize-none self-stretch rounded border border-gray-300 text-xs"
           onKeyDown={handleKeyPress}
-          onChange={(e) => {
+          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
             setPrompt(e.target.value);
             // Reset history index when user starts typing
             if (currentHistoryIndex !== -1) {