@pdfme/ui 5.3.13 → 5.3.14

package/dist/types/src/Viewer.d.ts

@@ -1,5 +1,8 @@
 import { PreviewProps } from '@pdfme/common';
 import { PreviewUI } from './class.js';
+/**
+ * @deprecated This component will be removed in a future version. Consider using an alternative solution.
+ */
 declare class Viewer extends PreviewUI {
     constructor(props: PreviewProps);
     protected render(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.3.13",
+  "version": "5.3.14",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -38,20 +38,22 @@
   "dependencies": {
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^10.0.0",
-    "@pdfme/converter": "file:../converter",
+    "@pdfme/converter": "*",
     "@scena/react-guides": "^0.28.2",
-    "antd": "^5.24.2",
+    "antd": "^5.24.4",
     "form-render": "^2.2.16",
+    "globrex": "^0.1.2",
     "hotkeys-js": "^3.8.7",
-    "lucide-react": "^0.460.0",
+    "lucide-react": "^0.482.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-moveable": "^0.56.0",
+    "react-refresh": "^0.16.0",
     "react-selecto": "^1.12.0"
   },
   "devDependencies": {
-    "@pdfme/common": "file:../common",
-    "@pdfme/schemas": "file:../schemas",
+    "@pdfme/common": "*",
+    "@pdfme/schemas": "*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^29.5.14",
@@ -60,14 +62,16 @@
     "@ungap/structured-clone": "^1.3.0",
     "@vitejs/plugin-react": "^4.2.0",
     "csstype": "^3.1.2",
-    "esbuild": "^0.25.0",
+    "esbuild": "^0.25.1",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.2.0",
     "is-path-inside": "^4.0.0",
     "jest-canvas-mock": "^2.3.1",
     "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.5.3",
     "process": "^0.11.10",
-    "vite": "^6.2.0",
+    "rollup": "^4.36.0",
+    "vite": "^6.2.1",
     "vite-plugin-css-injected-by-js": "^3.3.0",
     "vite-tsconfig-paths": "^5.1.4"
   },

package/src/Viewer.tsx

@@ -6,9 +6,13 @@ import { DESTROYED_ERR_MSG } from './constants.js';
 import Preview from './components/Preview.js';
 import AppContextProvider from './components/AppContextProvider.js';
 
+/**
+ * @deprecated This component will be removed in a future version. Consider using an alternative solution.
+ */
 class Viewer extends PreviewUI {
   constructor(props: PreviewProps) {
     super(props);
+    console.warn('[@pdfme/ui] Viewer component is deprecated and will be removed in a future version.');
   }
 
   protected render() {

package/src/components/Designer/Canvas/Moveable.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, forwardRef, Ref } from 'react';
+import React, { useEffect, forwardRef, Ref, useRef } from 'react';
 import MoveableComponent, {
   OnDrag,
   OnRotate,
@@ -6,6 +6,7 @@ import MoveableComponent, {
   OnClick,
   OnResize,
 } from 'react-moveable';
+import { uuid } from '../../../helper.js'
 import { theme } from 'antd';
 
 type Props = {
@@ -27,26 +28,29 @@ type Props = {
   onClick: (e: OnClick) => void;
 };
 
-const className = 'pdfme-moveable';
+const baseClassName = 'pdfme-moveable';
 
 const Moveable = (props: Props, ref: Ref<MoveableComponent>) => {
   const { token } = theme.useToken();
+  const instanceId = useRef(uuid());
+  const uniqueClassName = `${baseClassName}-${instanceId.current}`;
+
   useEffect(() => {
-    const containerElement = document.querySelector(`.${className}`);
-    const containerElement2 = document.querySelectorAll(`.${className} .moveable-line`);
+    const containerElement = document.querySelector(`.${uniqueClassName}`);
+    const moveableLines = document.querySelectorAll(`.${uniqueClassName} .moveable-line`);
     if (containerElement instanceof HTMLElement) {
       containerElement.style.setProperty('--moveable-color', token.colorPrimary);
-      Array.from(containerElement2).forEach((e) => {
+      moveableLines.forEach((e) => {
         if (e instanceof HTMLElement) {
           e.style.setProperty('--moveable-color', token.colorPrimary);
         }
       });
     }
-  }, [props.target, token.colorPrimary]);
+  }, [props.target, token.colorPrimary, uniqueClassName]);
 
   return (
     <MoveableComponent
-      className={className}
+      className={uniqueClassName}
       rootContainer={document ? document.body : undefined}
       snappable
       draggable