@pdfme/ui 0.0.0

package/src/components/Designer/PluginIcon.tsx

@@ -0,0 +1,87 @@
+import React, { useContext, useMemo } from 'react';
+import { Plugin, Schema } from '@pdfme/common';
+import { OptionsContext } from '../../contexts.js';
+import { theme } from 'antd';
+import DOMPurify from 'dompurify';
+
+interface PluginIconProps {
+  plugin: Plugin<Schema>;
+  label: string;
+  size?: number;
+  styles?: React.CSSProperties;
+}
+
+const SVGIcon = ({ svgString, size, styles, label }: { 
+  svgString: string; 
+  size?: number; 
+  styles?: React.CSSProperties; 
+  label: string;
+}) => {
+  const processedSVG = useMemo(() => {
+    // First sanitize the SVG string using DOMPurify with SVG profile
+    const sanitizedSVG = DOMPurify.sanitize(svgString, {
+      USE_PROFILES: { svg: true, svgFilters: true },
+      ALLOWED_TAGS: ['svg', 'path', 'circle', 'rect', 'line', 'polygon', 'polyline', 'ellipse', 'g', 'defs', 'title', 'desc', 'metadata'],
+      ALLOWED_ATTR: ['class', 'id', 'fill', 'stroke', 'stroke-width', 'viewBox', 'width', 'height', 'd', 'cx', 'cy', 'r', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'points', 'rx', 'ry', 'transform'],
+      FORBID_TAGS: ['script', 'foreignObject', 'use', 'embed', 'iframe', 'object', 'link', 'style'],
+      FORBID_ATTR: ['onload', 'onerror', 'onclick', 'onmouseover', 'onfocus', 'onblur', 'href', 'xlink:href', 'src', 'action', 'formaction'],
+      KEEP_CONTENT: false
+    });
+
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(sanitizedSVG, 'image/svg+xml');
+    
+    const svgElement = doc.querySelector('svg');
+    if (!svgElement) {
+      return null;
+    }
+
+    // Apply size attributes if specified
+    if (size) {
+      svgElement.setAttribute('width', size.toString());
+      svgElement.setAttribute('height', size.toString());
+    }
+
+    return svgElement.outerHTML;
+  }, [svgString, size]);
+
+  if (!processedSVG) {
+    return null;
+  }
+
+  return (
+    <div 
+      style={styles} 
+      title={label}
+      dangerouslySetInnerHTML={{ __html: processedSVG }}
+    />
+  );
+};
+
+const PluginIcon = (props: PluginIconProps) => {
+  const { plugin, label, size, styles } = props;
+  const { token } = theme.useToken();
+  const options = useContext(OptionsContext);
+
+  const schemaType = plugin.propPanel.defaultSchema?.type ?? '';
+
+  const icon = options.icons?.[schemaType] ?? plugin.icon;
+  const iconStyles = {
+    ...styles,
+    color: token.colorText,
+    display: 'flex',
+    justifyContent: 'center',
+  };
+
+  if (icon) {
+    return <SVGIcon svgString={icon} size={size} styles={iconStyles} label={label} />;
+  }
+
+  return (
+    <div style={{ ...styles, overflow: 'hidden', fontSize: 10 }} title={label}>
+      {label}
+    </div>
+  );
+};
+
+export default PluginIcon;

package/src/components/Designer/RightSidebar/DetailView/AlignWidget.tsx

@@ -0,0 +1,229 @@
+import { Space, Button, Form } from 'antd';
+import React from 'react';
+import type { PropPanelWidgetProps } from '@pdfme/common';
+import { DESIGNER_CLASSNAME } from '../../../../constants.js';
+import {
+  AlignStartVertical,
+  AlignStartHorizontal,
+  AlignCenterVertical,
+  AlignCenterHorizontal,
+  AlignEndVertical,
+  AlignEndHorizontal,
+  AlignVerticalSpaceAround,
+  AlignHorizontalSpaceAround,
+} from 'lucide-react';
+import { round } from '../../../../helper.js';
+
+const AlignWidget = (props: PropPanelWidgetProps) => {
+  const { activeElements, changeSchemas, schemas, pageSize, schema } = props;
+  const align = (type: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') => {
+    const ids = activeElements.map((ae) => ae.id);
+    const ass = schemas.filter((s) => ids.includes(s.id));
+
+    const isVertical = ['left', 'center', 'right'].includes(type);
+    const tgtPos = isVertical ? 'x' : 'y';
+    const tgtSize = isVertical ? 'width' : 'height';
+    const isSingle = ass.length === 1;
+    // Access pageSize property safely with proper type assertion
+    const root =
+      pageSize && typeof pageSize === 'object'
+        ? tgtSize === 'width'
+          ? (pageSize as unknown as { width: number }).width
+          : (pageSize as unknown as { height: number }).height
+        : 0;
+
+    // Access position properties safely with proper type assertion
+    const min = isSingle
+      ? 0
+      : Math.min(
+          ...ass.map((as) => {
+            // Safely access position property with proper type assertion
+            const position =
+              as.position && typeof as.position === 'object'
+                ? (as.position as unknown as { x: number; y: number })
+                : { x: 0, y: 0 };
+            return tgtPos === 'x' ? position.x : position.y;
+          }),
+        );
+    const max = isSingle
+      ? root
+      : Math.max(
+          ...ass.map((as) => {
+            // Safely access position and size properties with proper type assertion
+            const position =
+              as.position && typeof as.position === 'object'
+                ? (as.position as unknown as { x: number; y: number })
+                : { x: 0, y: 0 };
+            const posValue = tgtPos === 'x' ? position.x : position.y;
+
+            // Safely access width/height with proper type assertion
+            const asWithSize = as as unknown as { width?: number; height?: number };
+            const sizeValue = tgtSize === 'width' ? asWithSize.width || 0 : asWithSize.height || 0;
+
+            return posValue + sizeValue;
+          }),
+        );
+
+    let basePos = min;
+    // Define adjust function with consistent parameter usage
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    let adjust = (_size: number): number => 0;
+
+    if (['center', 'middle'].includes(type)) {
+      basePos = (min + max) / 2;
+      adjust = (size: number): number => size / 2;
+    } else if (['right', 'bottom'].includes(type)) {
+      basePos = max;
+      adjust = (size: number): number => size;
+    }
+
+    changeSchemas(
+      ass.map((as) => {
+        // Safely access size property with proper type assertion
+        const asWithSize = as as unknown as { width?: number; height?: number; id: string };
+        const sizeValue = tgtSize === 'width' ? asWithSize.width || 0 : asWithSize.height || 0;
+
+        return {
+          key: `position.${tgtPos}`,
+          value: round(basePos - adjust(sizeValue), 2),
+          schemaId: asWithSize.id,
+        };
+      }),
+    );
+  };
+
+  const distribute = (type: 'vertical' | 'horizontal') => {
+    const ids = activeElements.map((ae) => ae.id);
+    const ass = schemas.filter((s) => ids.includes(s.id));
+
+    const isVertical = type === 'vertical';
+    const tgtPos = isVertical ? 'y' : 'x';
+    const tgtSize = isVertical ? 'height' : 'width';
+
+    // Safely access position property with proper type assertion
+    const min = Math.min(
+      ...ass.map((as) => {
+        const position =
+          as.position && typeof as.position === 'object'
+            ? (as.position as unknown as { x: number; y: number })
+            : { x: 0, y: 0 };
+        return tgtPos === 'x' ? position.x : position.y;
+      }),
+    );
+
+    // Safely access position and size properties with proper type assertion
+    const max = Math.max(
+      ...ass.map((as) => {
+        const position =
+          as.position && typeof as.position === 'object'
+            ? (as.position as unknown as { x: number; y: number })
+            : { x: 0, y: 0 };
+        const posValue = tgtPos === 'x' ? position.x : position.y;
+
+        // Safely access width/height with proper type assertion
+        const asWithSize = as as unknown as { width?: number; height?: number };
+        const sizeValue = tgtSize === 'width' ? asWithSize.width || 0 : asWithSize.height || 0;
+
+        return posValue + sizeValue;
+      }),
+    );
+
+    if (ass.length < 3) return;
+
+    const boxPos = min;
+    const boxSize = max - min;
+    // Safely access size property with proper type assertion
+    const sum = ass.reduce((acc, cur) => {
+      const curWithSize = cur as unknown as { width?: number; height?: number };
+      const sizeValue = tgtSize === 'width' ? curWithSize.width || 0 : curWithSize.height || 0;
+      return acc + sizeValue;
+    }, 0);
+    const remain = boxSize - sum;
+    const unit = remain / (ass.length - 1);
+
+    let prev = 0;
+    changeSchemas(
+      ass.map((as, index) => {
+        // Safely access size property of previous element with proper type assertion
+        const prevSize =
+          index === 0
+            ? 0
+            : (() => {
+                const prevAs = ass[index - 1] as unknown as { width?: number; height?: number };
+                return tgtSize === 'width' ? prevAs.width || 0 : prevAs.height || 0;
+              })();
+
+        prev += index === 0 ? 0 : prevSize + unit;
+        const value = round(boxPos + prev, 2);
+
+        // Safely access id with proper type assertion
+        const asWithId = as as unknown as { id: string };
+        return { key: `position.${tgtPos}`, value, schemaId: asWithId.id };
+      }),
+    );
+  };
+  const layoutBtns: {
+    id: string;
+    icon: React.JSX.Element;
+    onClick: () => void;
+  }[] = [
+    {
+      id: 'left',
+      icon: <AlignStartVertical size={15} />,
+      onClick: () => align('left'),
+    },
+    {
+      id: 'center',
+      icon: <AlignCenterVertical size={15} />,
+      onClick: () => align('center'),
+    },
+    {
+      id: 'right',
+      icon: <AlignEndVertical size={15} />,
+      onClick: () => align('right'),
+    },
+    {
+      id: 'top',
+      icon: <AlignStartHorizontal size={15} />,
+      onClick: () => align('top'),
+    },
+    {
+      id: 'middle',
+      icon: <AlignCenterHorizontal size={15} />,
+      onClick: () => align('middle'),
+    },
+    {
+      id: 'bottom',
+      icon: <AlignEndHorizontal size={15} />,
+      onClick: () => align('bottom'),
+    },
+    {
+      id: 'vertical',
+      icon: <AlignVerticalSpaceAround size={15} />,
+      onClick: () => distribute('vertical'),
+    },
+    {
+      id: 'horizontal',
+      icon: <AlignHorizontalSpaceAround size={15} />,
+      onClick: () => distribute('horizontal'),
+    },
+  ];
+
+  return (
+    <Form.Item label={schema.title}>
+      <Space.Compact>
+        {layoutBtns.map((btn) => (
+          <Button
+            className={DESIGNER_CLASSNAME + 'align-' + btn.id}
+            key={btn.id}
+            style={{ padding: 7 }}
+            disabled={activeElements.length <= 2 && ['vertical', 'horizontal'].includes(btn.id)}
+            {...btn}
+          />
+        ))}
+      </Space.Compact>
+    </Form.Item>
+  );
+};
+
+export default AlignWidget;

package/src/components/Designer/RightSidebar/DetailView/ButtonGroupWidget.tsx

@@ -0,0 +1,78 @@
+import { Space, Button, Form, theme } from 'antd';
+import React from 'react';
+import type { PropPanelWidgetProps, SchemaForUI } from '@pdfme/common';
+interface ButtonConfig {
+  key: string;
+  icon: string;
+  type: 'boolean' | 'select';
+  value?: string;
+}
+
+const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
+  const { activeElements, changeSchemas, schemas, schema } = props;
+  const { token } = theme.useToken();
+
+  const apply = (btn: ButtonConfig) => {
+    const key = btn.key;
+    const type = btn.type;
+    const ids = activeElements.map((ae) => ae.id);
+    const ass = schemas.filter((s) => ids.includes(s.id));
+    changeSchemas(
+      ass.map((s: SchemaForUI) => {
+        const oldValue = Boolean((s as Record<string, unknown>)[key] ?? false);
+        const newValue = type === 'boolean' ? !oldValue : btn.value;
+        return { key, value: newValue, schemaId: s.id };
+      }),
+    );
+  };
+
+  const isActive = (btn: ButtonConfig) => {
+    const key = btn.key;
+    const type = btn.type;
+    let active = false;
+    const ids = activeElements.map((ae) => ae.id);
+    const ass = schemas.filter((s) => ids.includes(s.id));
+    ass.forEach((s: SchemaForUI) => {
+      // Cast schema to Record to safely access dynamic properties
+      const schemaRecord = s as Record<string, unknown>;
+      active =
+        type === 'boolean' ? Boolean(schemaRecord[key] ?? false) : schemaRecord[key] === btn.value;
+    });
+    return active;
+  };
+
+  const replaceCurrentColor = (svgString: string, color?: string) =>
+    color ? svgString.replace(/="currentColor"/g, `="${color}"`) : svgString;
+
+  const svgIcon = (svgString: string) => {
+    const svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(
+      replaceCurrentColor(svgString, token.colorText),
+    )}`;
+    return <img width={17} height={17} src={svgDataUrl} alt="" />;
+  };
+
+  return (
+    <Form.Item>
+      <Space.Compact>
+        {(schema.buttons as ButtonConfig[]).map((btn: ButtonConfig, index: number) => {
+          const active = isActive(btn);
+          return (
+            <Button
+              type={active ? 'primary' : undefined}
+              ghost={active}
+              onClick={() => apply(btn)}
+              style={{
+                padding: 7,
+                zIndex: active ? 2 : 0,
+              }}
+              key={index}
+              icon={svgIcon(btn.icon)}
+            />
+          );
+        })}
+      </Space.Compact>
+    </Form.Item>
+  );
+};
+
+export default ButtonGroupWidget;

package/src/components/Designer/RightSidebar/DetailView/WidgetRenderer.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useRef } from 'react';
+import type { PropPanelWidgetProps } from '@pdfme/common';
+
+type Props = PropPanelWidgetProps & {
+  widget: (props: PropPanelWidgetProps) => void;
+};
+
+const WidgetRenderer = (props: Props) => {
+  const { widget, ...otherProps } = props;
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.innerHTML = '';
+      widget({ ...otherProps, rootElement: ref.current });
+    }
+
+    return () => {
+      if (ref.current) {
+        ref.current.innerHTML = '';
+      }
+    };
+  }, [props.activeSchema]);
+
+  return <div ref={ref} />;
+};
+
+export default WidgetRenderer;