Merge pull request #23 from hbogdanov/hristo

optimalcharb · web-flow · commit f2eadc282e83 · 2025-11-12T22:15:34.000-05:00
feat: Undo/Redo Buttons and draft callback for ctrl+z, ctrl+y
diff --git a/components/pdf-container/plugin-annotation-2/components/index.ts b/components/pdf-container/plugin-annotation-2/components/index.ts
@@ -1 +1 @@
-export * from './annotation-layer';
+export * from "./annotation-layer"
diff --git a/components/pdf-container/plugin-annotation-2/components/text-markup/highlight.tsx b/components/pdf-container/plugin-annotation-2/components/text-markup/highlight.tsx
@@ -1,18 +1,18 @@
-import { CSSProperties, MouseEvent, TouchEvent } from 'react';
-import { Rect } from '@embedpdf/models';
+import { CSSProperties, MouseEvent, TouchEvent } from "react"
+import { Rect } from "@embedpdf/models"
 
 type HighlightProps = {
-  color?: string;
-  opacity?: number;
-  segmentRects: Rect[];
-  rect?: Rect;
-  scale: number;
-  onClick?: (e: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;
-  style?: CSSProperties;
-};
+  color?: string
+  opacity?: number
+  segmentRects: Rect[]
+  rect?: Rect
+  scale: number
+  onClick?: (e: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void
+  style?: CSSProperties
+}
 
 export function Highlight({
-  color = '#FFFF00',
+  color = "#FFFF00",
   opacity = 0.5,
   segmentRects,
   rect,
@@ -28,20 +28,20 @@ export function Highlight({
           onPointerDown={onClick}
           onTouchStart={onClick}
           style={{
-            position: 'absolute',
+            position: "absolute",
             left: (rect ? b.origin.x - rect.origin.x : b.origin.x) * scale,
             top: (rect ? b.origin.y - rect.origin.y : b.origin.y) * scale,
             width: b.size.width * scale,
             height: b.size.height * scale,
             background: color,
             opacity: opacity,
-            pointerEvents: onClick ? 'auto' : 'none',
-            cursor: onClick ? 'pointer' : 'default',
+            pointerEvents: onClick ? "auto" : "none",
+            cursor: onClick ? "pointer" : "default",
             zIndex: onClick ? 1 : undefined,
             ...style,
           }}
         />
       ))}
     </>
-  );
+  )
 }
diff --git a/components/pdf-container/plugin-annotation-2/components/text-markup/squiggly.tsx b/components/pdf-container/plugin-annotation-2/components/text-markup/squiggly.tsx
@@ -1,35 +1,35 @@
-import { CSSProperties, MouseEvent, TouchEvent } from 'react';
-import { Rect } from '@embedpdf/models';
+import { CSSProperties, MouseEvent, TouchEvent } from "react"
+import { Rect } from "@embedpdf/models"
 
 type SquigglyProps = {
-  color?: string;
-  opacity?: number;
-  segmentRects: Rect[];
-  rect?: Rect;
-  scale: number;
-  onClick?: (e: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;
-  style?: CSSProperties;
-};
+  color?: string
+  opacity?: number
+  segmentRects: Rect[]
+  rect?: Rect
+  scale: number
+  onClick?: (e: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void
+  style?: CSSProperties
+}
 
 export function Squiggly({
-  color = '#FFFF00',
+  color = "#FFFF00",
   opacity = 0.5,
   segmentRects,
   rect,
   scale,
   onClick,
   style,
 }: SquigglyProps) {
-  const amplitude = 2 * scale; // wave height
-  const period = 6 * scale; // wave length
+  const amplitude = 2 * scale // wave height
+  const period = 6 * scale // wave length
 
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${period}" height="${amplitude * 2}" viewBox="0 0 ${period} ${amplitude * 2}">
       <path d="M0 ${amplitude} Q ${period / 4} 0 ${period / 2} ${amplitude} T ${period} ${amplitude}"
             fill="none" stroke="${color}" stroke-width="${amplitude}" stroke-linecap="round"/>
-    </svg>`;
+    </svg>`
 
   // Completely escape the SVG markup
-  const svgDataUri = `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
+  const svgDataUri = `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`
 
   return (
     <>
@@ -39,35 +39,35 @@ export function Squiggly({
           onPointerDown={onClick}
           onTouchStart={onClick}
           style={{
-            position: 'absolute',
+            position: "absolute",
             left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
             top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
             width: r.size.width * scale,
             height: r.size.height * scale,
-            background: 'transparent',
-            pointerEvents: onClick ? 'auto' : 'none',
-            cursor: onClick ? 'pointer' : 'default',
+            background: "transparent",
+            pointerEvents: onClick ? "auto" : "none",
+            cursor: onClick ? "pointer" : "default",
             zIndex: onClick ? 1 : 0,
             ...style,
           }}
         >
           {/* Visual squiggly line */}
           <div
             style={{
-              position: 'absolute',
+              position: "absolute",
               left: 0,
               bottom: 0,
-              width: '100%',
+              width: "100%",
               height: amplitude * 2,
               backgroundImage: svgDataUri,
-              backgroundRepeat: 'repeat-x',
+              backgroundRepeat: "repeat-x",
               backgroundSize: `${period}px ${amplitude * 2}px`,
               opacity: opacity,
-              pointerEvents: 'none',
+              pointerEvents: "none",
             }}
           />
         </div>
       ))}
     </>
-  );
+  )
 }
diff --git a/components/pdf-container/plugin-annotation-2/components/text-markup/strikeout.tsx b/components/pdf-container/plugin-annotation-2/components/text-markup/strikeout.tsx
@@ -1,26 +1,26 @@
-import { CSSProperties, MouseEvent, TouchEvent } from 'react';
-import { Rect } from '@embedpdf/models';
+import { CSSProperties, MouseEvent, TouchEvent } from "react"
+import { Rect } from "@embedpdf/models"
 
 type StrikeoutProps = {
-  color?: string;
-  opacity?: number;
-  segmentRects: Rect[];
-  rect?: Rect;
-  scale: number;
-  onClick?: (e: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;
-  style?: CSSProperties;
-};
+  color?: string
+  opacity?: number
+  segmentRects: Rect[]
+  rect?: Rect
+  scale: number
+  onClick?: (e: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void
+  style?: CSSProperties
+}
 
 export function Strikeout({
-  color = '#FFFF00',
+  color = "#FFFF00",
   opacity = 0.5,
   segmentRects,
   rect,
   scale,
   onClick,
   style,
 }: StrikeoutProps) {
-  const thickness = 2 * scale;
+  const thickness = 2 * scale
 
   return (
     <>
@@ -30,34 +30,34 @@ export function Strikeout({
           onPointerDown={onClick}
           onTouchStart={onClick}
           style={{
-            position: 'absolute',
+            position: "absolute",
             left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
             top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
             width: r.size.width * scale,
             height: r.size.height * scale,
-            background: 'transparent',
-            pointerEvents: onClick ? 'auto' : 'none',
-            cursor: onClick ? 'pointer' : 'default',
+            background: "transparent",
+            pointerEvents: onClick ? "auto" : "none",
+            cursor: onClick ? "pointer" : "default",
             zIndex: onClick ? 1 : 0,
             ...style,
           }}
         >
           {/* Visual strikeout line */}
           <div
             style={{
-              position: 'absolute',
+              position: "absolute",
               left: 0,
-              top: '50%',
-              width: '100%',
+              top: "50%",
+              width: "100%",
               height: thickness,
               background: color,
               opacity: opacity,
-              transform: 'translateY(-50%)',
-              pointerEvents: 'none',
+              transform: "translateY(-50%)",
+              pointerEvents: "none",
             }}
           />
         </div>
       ))}
     </>
-  );
+  )
 }
diff --git a/components/pdf-container/plugin-annotation-2/components/text-markup/underline.tsx b/components/pdf-container/plugin-annotation-2/components/text-markup/underline.tsx
@@ -1,26 +1,26 @@
-import { CSSProperties, MouseEvent, TouchEvent } from 'react';
-import { Rect } from '@embedpdf/models';
+import { CSSProperties, MouseEvent, TouchEvent } from "react"
+import { Rect } from "@embedpdf/models"
 
 type UnderlineProps = {
-  color?: string;
-  opacity?: number;
-  segmentRects: Rect[];
-  rect?: Rect;
-  scale: number;
-  onClick?: (e: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;
-  style?: CSSProperties;
-};
+  color?: string
+  opacity?: number
+  segmentRects: Rect[]
+  rect?: Rect
+  scale: number
+  onClick?: (e: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void
+  style?: CSSProperties
+}
 
 export function Underline({
-  color = '#FFFF00',
+  color = "#FFFF00",
   opacity = 0.5,
   segmentRects,
   rect,
   scale,
   onClick,
   style,
 }: UnderlineProps) {
-  const thickness = 2 * scale; // 2 CSS px at 100 % zoom
+  const thickness = 2 * scale // 2 CSS px at 100 % zoom
 
   return (
     <>
@@ -30,33 +30,33 @@ export function Underline({
           onPointerDown={onClick}
           onTouchStart={onClick}
           style={{
-            position: 'absolute',
+            position: "absolute",
             left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
             top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
             width: r.size.width * scale,
             height: r.size.height * scale,
-            background: 'transparent',
-            pointerEvents: onClick ? 'auto' : 'none',
-            cursor: onClick ? 'pointer' : 'default',
+            background: "transparent",
+            pointerEvents: onClick ? "auto" : "none",
+            cursor: onClick ? "pointer" : "default",
             zIndex: onClick ? 1 : 0,
             ...style,
           }}
         >
           {/* Visual underline */}
           <div
             style={{
-              position: 'absolute',
+              position: "absolute",
               left: 0,
               bottom: 0,
-              width: '100%',
+              width: "100%",
               height: thickness,
               background: color,
               opacity: opacity,
-              pointerEvents: 'none',
+              pointerEvents: "none",
             }}
           />
         </div>
       ))}
     </>
-  );
+  )
 }
diff --git a/components/pdf-container/plugin-annotation-2/hooks/index.ts b/components/pdf-container/plugin-annotation-2/hooks/index.ts
@@ -1 +1 @@
-export * from './use-annotation';
+export * from "./use-annotation"
diff --git a/components/pdf-container/plugin-annotation-2/index.ts b/components/pdf-container/plugin-annotation-2/index.ts
@@ -1,3 +1,3 @@
-export * from './components';
-export * from './hooks';
-export * from './lib';
+export * from "./components"
+export * from "./hooks"
+export * from "./lib"
diff --git a/components/pdf-container/plugin-annotation-2/lib/selectors.ts b/components/pdf-container/plugin-annotation-2/lib/selectors.ts
@@ -18,9 +18,12 @@ export const getAnnotations = (s: AnnotationState): Record<number, TrackedAnnota
 
 /** The full `TrackedAnnotation` for the current selection. */
 export const getSelectedAnnotation = (s: AnnotationState): TrackedAnnotation | null =>
-  s.selectedUid ? s.byUid[s.selectedUid] ?? null : null
+  s.selectedUid ? (s.byUid[s.selectedUid] ?? null) : null
 
-export const getSelectedAnnotationByPageIndex = (s: AnnotationState, pageIndex: number): TrackedAnnotation | null => {
+export const getSelectedAnnotationByPageIndex = (
+  s: AnnotationState,
+  pageIndex: number,
+): TrackedAnnotation | null => {
   if (!s.selectedUid) return null
 
   const pageUids = s.pages[pageIndex] ?? []
diff --git a/components/pdf-container/toolbar.tsx b/components/pdf-container/toolbar.tsx
diff --git a/package-lock.json b/package-lock.json

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-export * from './annotation-layer';`
	`1`	`+export * from "./annotation-layer"`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-export * from './use-annotation';`
	`1`	`+export * from "./use-annotation"`