@alpaca-editor/core 1.0.0 → 1.0.3

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

@@ -49,12 +49,12 @@ export function CommentHighlighting({
             x.fieldId === field?.id &&
             x.item.id === comment.itemId &&
             x.item.language === comment.language &&
-            x.item.version === comment.version
+            x.item.version === comment.version,
         );
 
         const mapping = computeMapping(
           modifiedField?.value || field?.rawValue || "",
-          comment.fieldValue
+          comment.fieldValue,
         );
 
         const mappedRange = [
@@ -78,7 +78,6 @@ export function CommentHighlighting({
   const fieldElement = findFieldElement(iframe, {
     item: {
       id: comment.itemId,
-
       language: comment.language,
       version: comment.version,
     },
@@ -132,11 +131,11 @@ export function CommentHighlighting({
           {index === 0 && (
             <div
               className={classNames(
-                "absolute w-5 h-5  cursor-pointer pointer-events-auto ",
+                "pointer-events-auto absolute h-5 w-5 cursor-pointer",
                 rect.top * scale < 18 ? "top-0" : "top-[-18px]",
                 (rect.left + rect.width) * scale > iframeRect.width - 18
                   ? "right-0"
-                  : "right-[-18px]"
+                  : "right-[-18px]",
               )}
               onClick={() => {
                 editContext.switchView("reviews");
@@ -144,7 +143,7 @@ export function CommentHighlighting({
                 editContext?.setSelectedComment(comment);
               }}
             >
-              <CommentIcon className="text-blue-500 hover:text-blue-600 " />
+              <CommentIcon className="text-blue-500 hover:text-blue-600" />
             </div>
           )}
           <div
@@ -166,7 +165,7 @@ export function CommentHighlighting({
 function getTextNodeAtOffset(
   root: Node,
 
-  offset: number
+  offset: number,
 ): { node: Text; offset: number } | null {
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
   let currentNode: Text | null;
@@ -195,10 +194,10 @@ function computeMapping(s1: string, s2: string): number[] {
   // 1. Aufbau der DP-Matrix und Backpointer-Matrix
   // dp[i][j] enthält die minimale Anzahl von Operationen, um s1[0..i-1] in s2[0..j-1] zu überführen.
   const dp: number[][] = Array.from({ length: n + 1 }, () =>
-    new Array(m + 1).fill(0)
+    new Array(m + 1).fill(0),
   );
   const back: string[][] = Array.from({ length: n + 1 }, () =>
-    new Array(m + 1).fill("")
+    new Array(m + 1).fill(""),
   );
 
   // Initialisierung: leere Präfixe

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

@@ -61,7 +61,7 @@ export function MiniMap({
   const miniMapWidth = useMemo(() => {
     const currentWidth = Math.max(
       30,
-      scale * (pageViewContext.viewport.width || 0)
+      scale * (pageViewContext.viewport.width || 0),
     );
 
     // Only update if change is significant (>1px) to avoid minor oscillations
@@ -91,7 +91,7 @@ export function MiniMap({
     ) {
       const index = Array.prototype.indexOf.call(
         current.parentNode.childNodes,
-        current
+        current,
       );
       path.unshift(index);
       current = current.parentNode;
@@ -148,9 +148,9 @@ export function MiniMap({
             .filter(
               (x) =>
                 x.type === "characterData" ||
-                (x.type === "attributes" && x.target.parentElement)
+                (x.type === "attributes" && x.target.parentElement),
             )
-            .map((m) => m.target.parentElement!)
+            .map((m) => m.target.parentElement!),
         );
 
       const distinctTargetNodes = Array.from(new Set(targetNodes));
@@ -170,7 +170,7 @@ export function MiniMap({
       }
 
       const filteredNodes = distinctTargetNodes.filter(
-        (node) => !nodesToRemove.has(node)
+        (node) => !nodesToRemove.has(node),
       );
 
       filteredNodes.forEach((targetNode) => {
@@ -237,7 +237,7 @@ export function MiniMap({
 
   function mirrorIframeContent(
     sourceIframe: HTMLIFrameElement,
-    targetIframe: HTMLIFrameElement
+    targetIframe: HTMLIFrameElement,
   ) {
     if (sourceIframe.contentDocument && targetIframe.contentDocument) {
       const sourceHtml = sourceIframe.contentDocument.documentElement.innerHTML;
@@ -281,16 +281,16 @@ export function MiniMap({
           behavior: "instant",
           left: 0,
           top: e.deltaY,
-        }
+        },
       );
       e.stopPropagation();
     },
-    [editorIframeRef]
+    [editorIframeRef],
   );
 
   return (
     <div
-      className="bg-white z-50 relative overflow-hidden"
+      className="relative z-50 overflow-hidden bg-white"
       ref={minimapContainerRef}
       style={{
         height: "100%",
@@ -299,7 +299,7 @@ export function MiniMap({
       }}
     >
       <div
-        className="absolute bg-opacity-50 overflow-hidden select-none  inset-0"
+        className="bg-opacity-50 absolute inset-0 overflow-hidden select-none"
         style={{
           boxShadow: "rgb(200, 200, 200) -10px 1px 13px -10px",
         }}
@@ -324,7 +324,7 @@ export function MiniMap({
         scrollHeight !== undefined &&
         minimapReady && (
           <div
-            className="absolute bg-opacity-60 hover:bg-opacity-65 bg-gray-300 w-full pointer-events-none"
+            className="pointer-events-none absolute w-full bg-gray-300 opacity-60 hover:opacity-65"
             style={{
               top: scrollTop * scale + "px",
               height: viewport.height * scale + "px",

package/src/editor/reviews/Comment.tsx

@@ -6,11 +6,12 @@ import {
   deleteComment,
   resolveComment,
 } from "../services/reviewsService";
-import { Button } from "primereact/button";
+import { Button } from "@/components/ui/button";
 import { formatDate } from "../utils";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { OverlayPanel } from "primereact/overlaypanel";
 import { ProgressSpinner } from "primereact/progressspinner";
+import { useDebouncedCallback } from "use-debounce";
 export function Comment({ comment }: { comment: CommentType }) {
   const editContext = useEditContext();
   const [commentText, setCommentText] = useState(comment.text);
@@ -41,17 +42,17 @@ export function Comment({ comment }: { comment: CommentType }) {
     if (!showItemName && !showFieldName) return null;
 
     return (
-      <div className="mt-3 flex items-center border-t pt-3">
+      <div className="mt-3 flex items-center border-t pt-3 text-xs">
         {showItemName && (
-          <div className="text-2xs text-gray-500 ">{comment.itemName}</div>
+          <div className="text-2xs text-gray-500">{comment.itemName}</div>
         )}
 
         {showFieldName && showItemName && (
-          <div className="text-2xs text-gray-500 mx-2">&gt;</div>
+          <div className="text-2xs mx-2 text-gray-500">&gt;</div>
         )}
 
         {showFieldName && (
-          <div className="text-2xs text-gray-500 ">{comment.fieldName}</div>
+          <div className="text-2xs text-gray-500">{comment.fieldName}</div>
         )}
       </div>
     );
@@ -71,10 +72,10 @@ export function Comment({ comment }: { comment: CommentType }) {
     const overlayPanelRef = useRef<OverlayPanel>(null);
     return (
       <>
-        <div className="flex justify-between items-start mb-3">
+        <div className="mb-3 flex items-start justify-between">
           <div>
             <div
-              className="text-xs text-gray-900 font-bold"
+              className="text-xs font-bold text-gray-900"
               title={comment.author}
             >
               {comment.authorDisplayName}
@@ -103,12 +104,13 @@ export function Comment({ comment }: { comment: CommentType }) {
             <OverlayPanel ref={overlayPanelRef}>
               <Button
                 className="m-2"
-                icon="pi pi-trash"
-                label="Delete"
+                variant="outline"
                 onClick={async () => {
                   await deleteComment(comment);
                 }}
-              />
+              >
+                Delete
+              </Button>
             </OverlayPanel>
             {canResolve && !comment.isResolved && (
               <SimpleIconButton
@@ -121,7 +123,7 @@ export function Comment({ comment }: { comment: CommentType }) {
             )}
             {comment.isResolved && (
               <i
-                className="pi pi-check text-green-500 text-xs px-1"
+                className="pi pi-check px-1 text-xs text-green-500"
                 style={{ fontWeight: "bold" }}
                 title={
                   "Resolved by " +
@@ -155,12 +157,17 @@ export function Comment({ comment }: { comment: CommentType }) {
     );
   };
 
+  const setCommentsDebounced = useDebouncedCallback(() => {
+    if (!editContext?.setComments) return;
+    editContext.setComments([...editContext.comments]);
+  }, 300);
+
   return !isEditing ? (
     <div
       ref={ref}
       key={comment.id}
-      className={`bg-white rounded-lg p-3 mb-3 shadow-sm cursor-pointer hover:bg-gray-50 border-2 ${
-        isSelected ? " border-blue-500" : "border-transparent"
+      className={`mb-3 cursor-pointer rounded-lg border-2 bg-white p-3 shadow-sm hover:bg-gray-50 ${
+        isSelected ? "border-blue-500" : "border-transparent"
       }`}
       onClick={() => {
         editContext?.setSelectedComment(comment);
@@ -176,49 +183,44 @@ export function Comment({ comment }: { comment: CommentType }) {
                 version: comment.version,
               },
             },
-            false
+            false,
           );
         }
       }}
     >
       {renderHeader()}
-      <div className="text-gray-700 text-sm whitespace-pre-wrap">
+      <div className="text-sm whitespace-pre-wrap text-gray-700">
         {comment.text}
       </div>
       {renderContextInfo()}
     </div>
   ) : (
-    <div
-      key="new-comment"
-      className="bg-white rounded-lg p-3 mb-3 shadow-sm"
-    >
+    <div key="new-comment" className="mb-3 rounded-lg bg-white p-3 shadow-sm">
       {renderHeader()}
       <textarea
-        className="w-full min-h-[100px] p-2 text-sm border border-gray-200 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 mt-2"
+        className="mt-2 min-h-[100px] w-full rounded border border-gray-200 p-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
         placeholder="Add a comment..."
         value={commentText}
         onChange={async (e) => {
           if (!editContext) return;
           setCommentText(e.target.value);
 
-          if (editContext?.setComments) {
-            editContext.setComments([...editContext.comments]);
-          }
+          setCommentsDebounced();
         }}
         autoFocus
       />
       {isSaving && (
-        <div className="flex justify-end gap-2 mt-1">
-          <div className="text-xs text-gray-500 flex items-center gap-2">
-            <ProgressSpinner className="w-4 h-4" />
+        <div className="mt-1 flex justify-end gap-2">
+          <div className="flex items-center gap-2 text-xs text-gray-500">
+            <ProgressSpinner className="h-4 w-4" />
             Saving...
           </div>
         </div>
       )}
       {!isSaving && (
-        <div className="flex justify-end gap-2 mt-1">
+        <div className="mt-1 flex justify-end gap-2">
           <Button
-            severity="secondary"
+            variant="outline"
             onClick={() => {
               if (comment.isNew) {
                 if (editContext?.setComments) {
@@ -230,11 +232,13 @@ export function Comment({ comment }: { comment: CommentType }) {
                 setIsEditing(false);
               }
             }}
-            label="Cancel"
-          />
+          >
+            Cancel
+          </Button>
 
           <Button
             className="tour-submit-comment-button"
+            variant="outline"
             onClick={async () => {
               comment.text = commentText;
               setIsSaving(true);
@@ -246,7 +250,7 @@ export function Comment({ comment }: { comment: CommentType }) {
 
               if (item) {
                 comment.fieldValue = item.fields.find(
-                  (f) => f.id === comment.fieldId
+                  (f) => f.id === comment.fieldId,
                 )?.rawValue;
               }
 
@@ -255,8 +259,9 @@ export function Comment({ comment }: { comment: CommentType }) {
               setIsSaving(false);
               setIsEditing(false);
             }}
-            label={comment.isNew ? "Comment" : "Save"}
-          />
+          >
+            {comment.isNew ? "Comment" : "Save"}
+          </Button>
         </div>
       )}
       {renderContextInfo()}