@pdfme/ui 4.2.3 → 4.2.4-dev.10

package/dist/types/class.d.ts

@@ -21,7 +21,6 @@ export declare abstract class BaseUIClass {
     getTemplate(): import("zod").objectOutputType<{
         schemas: import("zod").ZodArray<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodObject<{
             type: import("zod").ZodString;
-            icon: import("zod").ZodOptional<import("zod").ZodString>;
             content: import("zod").ZodOptional<import("zod").ZodString>;
             position: import("zod").ZodObject<{
                 x: import("zod").ZodNumber;
@@ -38,9 +37,9 @@ export declare abstract class BaseUIClass {
             rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
             opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
             readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
+            required: import("zod").ZodOptional<import("zod").ZodBoolean>;
         }, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{
             type: import("zod").ZodString;
-            icon: import("zod").ZodOptional<import("zod").ZodString>;
             content: import("zod").ZodOptional<import("zod").ZodString>;
             position: import("zod").ZodObject<{
                 x: import("zod").ZodNumber;
@@ -57,9 +56,9 @@ export declare abstract class BaseUIClass {
             rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
             opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
             readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
+            required: import("zod").ZodOptional<import("zod").ZodBoolean>;
         }, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{
             type: import("zod").ZodString;
-            icon: import("zod").ZodOptional<import("zod").ZodString>;
             content: import("zod").ZodOptional<import("zod").ZodString>;
             position: import("zod").ZodObject<{
                 x: import("zod").ZodNumber;
@@ -76,6 +75,7 @@ export declare abstract class BaseUIClass {
             rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
             opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
             readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
+            required: import("zod").ZodOptional<import("zod").ZodBoolean>;
         }, import("zod").ZodTypeAny, "passthrough">>>, "many">;
         basePdf: import("zod").ZodUnion<[import("zod").ZodUnion<[import("zod").ZodString, import("zod").ZodType<ArrayBuffer, import("zod").ZodTypeDef, ArrayBuffer>, import("zod").ZodType<Uint8Array, import("zod").ZodTypeDef, Uint8Array>]>, import("zod").ZodObject<{
             width: import("zod").ZodNumber;

package/dist/types/components/Designer/PluginIcon.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Plugin } from "@pdfme/common";
+interface PluginIconProps {
+    plugin: Plugin<any>;
+    label: string;
+    size?: number;
+    styles?: React.CSSProperties;
+}
+declare const PluginIcon: (props: PluginIconProps) => React.JSX.Element;
+export default PluginIcon;

package/dist/types/components/Designer/RightSidebar/DetailView/index.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { SchemaForUI } from '@pdfme/common';
 import type { SidebarProps } from '../../../../types';
-declare const DetailView: (props: Pick<SidebarProps, 'size' | 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'> & {
+type DetailViewProps = Pick<SidebarProps, 'size' | 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'> & {
     activeSchema: SchemaForUI;
-}) => React.JSX.Element;
-export default DetailView;
+};
+declare const _default: React.MemoExoticComponent<(props: DetailViewProps) => React.JSX.Element>;
+export default _default;

package/dist/types/components/Designer/RightSidebar/ListView/Item.d.ts

@@ -2,9 +2,11 @@ import React from 'react';
 import { DraggableSyntheticListeners } from '@dnd-kit/core';
 interface Props {
     value: React.ReactNode;
+    icon?: React.ReactNode;
     style?: React.CSSProperties;
     status?: 'is-warning' | 'is-danger';
     title?: string;
+    required?: boolean;
     dragOverlay?: boolean;
     onClick?: () => void;
     onMouseEnter?: () => void;

package/dist/types/contexts.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Plugins, UIOptions } from '@pdfme/common';
-export declare const I18nContext: import("react").Context<(key: "type" | "width" | "height" | "rotate" | "opacity" | "cancel" | "field" | "fieldName" | "align" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "addPageAfter" | "removePage" | "removePageConfirm" | "hexColorPrompt" | "schemas.color" | "schemas.borderWidth" | "schemas.borderColor" | "schemas.backgroundColor" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.padding" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.text.format" | "schemas.mvt.typingInstructions" | "schemas.mvt.sampleField" | "schemas.mvt.variablesSampleData" | "schemas.barcodes.barColor" | "schemas.barcodes.includetext" | "schemas.table.alternateBackgroundColor" | "schemas.table.tableStyle" | "schemas.table.headStyle" | "schemas.table.bodyStyle" | "schemas.table.columnStyle", dict?: {
+export declare const I18nContext: import("react").Context<(key: "type" | "width" | "height" | "rotate" | "opacity" | "required" | "cancel" | "field" | "fieldName" | "align" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "addPageAfter" | "removePage" | "removePageConfirm" | "hexColorPrompt" | "schemas.color" | "schemas.borderWidth" | "schemas.borderColor" | "schemas.backgroundColor" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.padding" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.text.format" | "schemas.mvt.typingInstructions" | "schemas.mvt.sampleField" | "schemas.mvt.variablesSampleData" | "schemas.barcodes.barColor" | "schemas.barcodes.includetext" | "schemas.table.alternateBackgroundColor" | "schemas.table.tableStyle" | "schemas.table.headStyle" | "schemas.table.bodyStyle" | "schemas.table.columnStyle", dict?: {
     cancel: string;
     field: string;
     fieldName: string;
@@ -10,6 +10,7 @@ export declare const I18nContext: import("react").Context<(key: "type" | "width"
     height: string;
     rotate: string;
     edit: string;
+    required: string;
     plsInputName: string;
     fieldMustUniq: string;
     notUniq: string;

package/dist/types/helper.d.ts

@@ -36,7 +36,7 @@ export declare const template2SchemasList: (_template: Template) => Promise<{
     key: string;
     opacity?: number | undefined;
     rotate?: number | undefined;
-    icon?: string | undefined;
+    required?: boolean | undefined;
     content?: string | undefined;
     readOnly?: boolean | undefined;
 }[][]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "4.2.3",
+  "version": "4.2.4-dev.10",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/components/Designer/LeftSidebar.tsx

@@ -9,6 +9,7 @@ import { useDraggable } from '@dnd-kit/core';
 import { CSS } from "@dnd-kit/utilities";
 import Renderer from '../Renderer';
 import { PluginsRegistry } from '../../contexts';
+import PluginIcon from "./PluginIcon";
 
 const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf, children: React.ReactNode }) => {
   const { scale, basePdf, plugin } = props;
@@ -44,7 +45,6 @@ const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf
 const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number, basePdf: BasePdf }) => {
   const { token } = theme.useToken();
   const pluginsRegistry = useContext(PluginsRegistry);
-
   const [isDragging, setIsDragging] = useState(false);
 
   useEffect(() => {
@@ -76,22 +76,17 @@ const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number
   >
     {Object.entries(pluginsRegistry).map(([label, plugin]) => {
       if (!plugin?.propPanel.defaultSchema) return null;
+
       return <Draggable
         key={label}
         scale={scale}
         basePdf={basePdf}
         plugin={plugin}>
         <Button
-          title={label}
-          onMouseDown={() => {
-            setIsDragging(true);
-          }}
-          style={{ width: 35, height: 35, marginTop: '0.25rem', padding: '0.25rem' }}>
-          {plugin.propPanel.defaultSchema.icon ?
-            <div dangerouslySetInnerHTML={{ __html: plugin.propPanel.defaultSchema.icon }} />
-            :
-            <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{label}</div>
-          }
+          onMouseDown={() => setIsDragging(true)}
+          style={{ width: 35, height: 35, marginTop: '0.25rem', padding: '0.25rem' }}
+        >
+          <PluginIcon plugin={plugin} label={label} />
         </Button>
       </Draggable>
     })}

package/src/components/Designer/PluginIcon.tsx

@@ -0,0 +1,47 @@
+import React, { useContext } from 'react';
+import { Plugin } from "@pdfme/common";
+import { OptionsContext } from '../../contexts';
+
+interface PluginIconProps {
+  plugin: Plugin<any>;
+  label: string;
+  size?: number;
+  styles?: React.CSSProperties;
+}
+
+const getWithModifiedSize = (htmlString: string, label: string, size: number, styles?: React.CSSProperties) => {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(htmlString, 'text/html');
+
+  const modifyNode = (node: HTMLElement) => {
+    if (node.tagName === 'SVG' || node.tagName === 'svg') {
+      node.setAttribute('width', size.toString());
+      node.setAttribute('height', size.toString());
+    }
+    Array.from(node.children).forEach(child => modifyNode(child as HTMLElement));
+  };
+
+  Array.from(doc.body.children).forEach(child => modifyNode(child as HTMLElement));
+
+  return (
+    <div style={styles} title={label} dangerouslySetInnerHTML={{ __html: doc.body.innerHTML }} />
+  );
+};
+
+const PluginIcon = (props: PluginIconProps) => {
+  const { plugin, label, size, styles } = props;
+  const options = useContext(OptionsContext);
+  const icon = options.icons?.[plugin.propPanel.defaultSchema.type] ?? plugin.icon;
+  const iconStyles = { ...styles, display: 'flex', justifyContent: 'center' };
+
+  if (icon) {
+    if (size) {
+      return getWithModifiedSize(icon, label, size, iconStyles);
+    }
+    return <div style={iconStyles} title={label}  dangerouslySetInnerHTML={{__html: icon}} />
+  }
+
+  return <div style={{...styles, overflow: 'hidden', fontSize: 10, }}>{label}</div>
+};
+
+export default PluginIcon;

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

@@ -6,7 +6,7 @@ interface ButtonConfig {
   key: string;
   icon: string;
   type: 'boolean' | 'select';
-  value?: String;
+  value?: string;
 }
 
 const ButtonGroupWidget = (props: PropPanelWidgetProps) => {

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

@@ -1,5 +1,5 @@
 import FormRender, { useForm } from 'form-render';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import type { ChangeSchemaItem, Dict, SchemaForUI, PropPanelWidgetProps, PropPanelSchema } from '@pdfme/common';
 import type { SidebarProps } from '../../../../types';
 import { MenuOutlined } from '@ant-design/icons';
@@ -13,17 +13,16 @@ import { InternalNamePath, ValidateErrorEntity } from "rc-field-form/es/interfac
 
 const { Text } = Typography;
 
-const DetailView = (
-  props: Pick<
-    SidebarProps,
-    'size' | 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'
-  > & {
-    activeSchema: SchemaForUI;
-  }
-) => {
+type DetailViewProps = Pick<SidebarProps,
+  'size' | 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'
+> & {
+  activeSchema: SchemaForUI;
+};
+
+const DetailView = (props: DetailViewProps) => {
   const { token } = theme.useToken();
 
-  const { size, changeSchemas, deselectSchema, activeSchema, activeElements } = props;
+  const { size, changeSchemas, deselectSchema, activeSchema } = props;
   const form = useForm();
 
   const i18n = useContext(I18nContext);
@@ -58,11 +57,10 @@ const DetailView = (
       });
     }
     setWidgets(newWidgets);
-  }, [activeSchema, activeElements, pluginsRegistry, JSON.stringify(options)]);
+  }, [activeSchema, pluginsRegistry, JSON.stringify(options)]);
 
   useEffect(() => {
     const values: any = { ...activeSchema };
-
     // [position] Change the nested position object into a flat, as a three-column layout is difficult to implement
     values.x = values.position.x;
     values.y = values.position.y;
@@ -73,7 +71,8 @@ const DetailView = (
     }
 
     form.setValues(values);
-  }, [form, activeSchema]);
+
+  }, [activeSchema, form]);
 
   const handleWatch = (formSchema: any) => {
     const formAndSchemaValuesDiffer = (formValue: any, schemaValue: any): boolean => {
@@ -102,7 +101,7 @@ const DetailView = (
         // FIXME memo: https://github.com/pdfme/pdfme/pull/367#issuecomment-1857468274
         if (value === null && ['rotate', 'opacity'].includes(key)) value = undefined;
 
-        changes.push({key, value, schemaId: activeSchema.id});
+        changes.push({ key, value, schemaId: activeSchema.id });
       }
     }
 
@@ -111,11 +110,11 @@ const DetailView = (
       form.validateFields()
         .then(() => changeSchemas(changes))
         .catch((reason: ValidateErrorEntity) => {
-          if (reason.errorFields.length)  {
+          if (reason.errorFields.length) {
             changes = changes.filter((change: ChangeSchemaItem) => !reason.errorFields.find((field: {
-                name: InternalNamePath;
-                errors: string[];
-              }) => field.name.includes(change.key)
+              name: InternalNamePath;
+              errors: string[];
+            }) => field.name.includes(change.key)
             ));
           }
           if (changes.length) {
@@ -153,7 +152,8 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         required: true,
         span: 12,
       },
-      key: { title: i18n('fieldName'), type: 'string', required: true, span: 12 },
+      key: { title: i18n('fieldName'), type: 'string', required: true, span: 12, props: { autocomplete: "off"} },
+      required: { title: i18n('required'), type: 'boolean', span: 8, hidden: defaultSchema?.readOnly },
       '-': { type: 'void', widget: 'Divider' },
       align: { title: i18n('align'), type: 'void', widget: 'AlignWidget' },
       x: { title: 'X', type: 'number', widget: 'inputNumber', required: true, span: 8, min: 0 },
@@ -254,4 +254,8 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
   );
 };
 
-export default DetailView;
+const propsAreUnchanged = (prevProps: DetailViewProps, nextProps: DetailViewProps) => {
+  return JSON.stringify(prevProps.activeSchema) == JSON.stringify(nextProps.activeSchema)
+};
+
+export default React.memo(DetailView, propsAreUnchanged);

package/src/components/Designer/RightSidebar/ListView/Item.tsx

@@ -8,9 +8,11 @@ const { Text } = Typography;
 
 interface Props {
   value: React.ReactNode;
+  icon?: React.ReactNode;
   style?: React.CSSProperties;
   status?: 'is-warning' | 'is-danger';
   title?: string;
+  required?: boolean;
   dragOverlay?: boolean;
   onClick?: () => void;
   onMouseEnter?: () => void;
@@ -26,9 +28,11 @@ const Item = React.memo(
   React.forwardRef<HTMLLIElement, Props>(
     (
       {
+        icon,
         value,
         status,
         title,
+        required,
         style,
         dragOverlay,
         onClick,
@@ -93,6 +97,7 @@ const Item = React.memo(
               }}
               icon={<HolderOutlined style={{ cursor: 'grab' }} />}
             />
+            {icon}
             <Text
               style={{
                 overflow: 'hidden',
@@ -105,12 +110,13 @@ const Item = React.memo(
               {status === undefined ? (
                 value
               ) : (
-                <span style={{ display: 'flex', alignItems: 'center' }}>
+                <span>
                   <ExclamationCircleOutlined width={15} style={{ marginRight: '0.5rem' }} />
                   {status === 'is-warning' ? i18n('noKeyName') : value}
                   {status === 'is-danger' ? i18n('notUniq') : ''}
                 </span>
               )}
+              {required && <span style={{ color: 'red', marginLeft: '0.5rem' }}>*</span>}
             </Text>
           </div>
         </li>

package/src/components/Designer/RightSidebar/ListView/SelectableSortableContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useContext, ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import {
   closestCorners,
@@ -17,9 +17,11 @@ import {
 } from '@dnd-kit/sortable';
 import { SchemaForUI } from '@pdfme/common';
 import type { SidebarProps } from '../../../../types';
+import { PluginsRegistry } from '../../../../contexts';
 import Item from './Item';
 import SelectableSortableItem from './SelectableSortableItem';
 import { theme } from 'antd';
+import PluginIcon from "../../PluginIcon";
 
 const SelectableSortableContainer = (
   props: Pick<
@@ -28,11 +30,11 @@ const SelectableSortableContainer = (
   >
 ) => {
   const { token } = theme.useToken();
-
   const { schemas, onEdit, onSortEnd, hoveringSchemaId, onChangeHoveringSchemaId } = props;
   const [selectedSchemas, setSelectedSchemas] = useState<SchemaForUI[]>([]);
-  const [dragOverlaydItems, setClonedItems] = useState<SchemaForUI[] | null>(null);
+  const [dragOverlaidItems, setClonedItems] = useState<SchemaForUI[] | null>(null);
   const [activeId, setActiveId] = useState<string | null>(null);
+  const pluginsRegistry = useContext(PluginsRegistry);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 15 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
@@ -56,6 +58,20 @@ const SelectableSortableContainer = (
     }
   };
 
+  const getPluginIcon = (inSchema: string|SchemaForUI): ReactNode => {
+    const thisSchema = (typeof inSchema === 'string') ? schemas.find((schema) => schema.id === inSchema) : inSchema;
+
+    const [pluginLabel, activePlugin] = Object.entries(pluginsRegistry).find(
+      ([label, plugin]) => plugin?.propPanel.defaultSchema.type === thisSchema?.type
+    )!;
+
+    if (!activePlugin) {
+      return <></>
+    }
+
+    return <PluginIcon plugin={activePlugin} label={pluginLabel} size={20} styles={{marginRight: '0.5rem'}}/>
+  };
+
   return (
     <DndContext
       sensors={sensors}
@@ -101,8 +117,8 @@ const SelectableSortableContainer = (
         setActiveId(null);
       }}
       onDragCancel={() => {
-        if (dragOverlaydItems) {
-          onSortEnd(dragOverlaydItems);
+        if (dragOverlaidItems) {
+          onSortEnd(dragOverlaidItems);
         }
 
         setActiveId(null);
@@ -139,7 +155,9 @@ const SelectableSortableContainer = (
               <>
                 <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
                   <Item
+                    icon={getPluginIcon(activeId)}
                     value={schemas.find((schema) => schema.id === activeId)!.key}
+                    required={schemas.find((schema) => schema.id === activeId)!.required}
                     style={{ background: token.colorPrimary }}
                     dragOverlay
                   />
@@ -149,8 +167,10 @@ const SelectableSortableContainer = (
                     .filter((item) => item.id !== activeId)
                     .map((item) => (
                       <Item
+                        icon={getPluginIcon(item)}
                         key={item.id}
                         value={item.key}
+                        required={item.required}
                         style={{ background: token.colorPrimary }}
                         dragOverlay
                       />

package/src/components/Designer/RightSidebar/ListView/SelectableSortableItem.tsx

@@ -1,10 +1,11 @@
 import React, { useContext } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { SchemaForUI } from '@pdfme/common';
-import { I18nContext } from '../../../../contexts';
+import { PluginsRegistry, I18nContext } from '../../../../contexts';
 import Item from './Item';
 import { useMountStatus } from '../../../../hooks';
 import { theme } from 'antd';
+import PluginIcon from "../../PluginIcon";
 
 interface Props {
   isSelected: boolean;
@@ -29,6 +30,7 @@ const SelectableSortableItem = ({
   const { token } = theme.useToken();
 
   const i18n = useContext(I18nContext);
+  const pluginsRegistry = useContext(PluginsRegistry);
   const { setNodeRef, listeners, isDragging, isSorting, transform, transition } = useSortable({
     id: schema.id,
   });
@@ -40,6 +42,12 @@ const SelectableSortableItem = ({
     onClick: (event: any) => onSelect(schema.id, event.shiftKey),
   };
 
+  const [pluginLabel, thisPlugin] = Object.entries(pluginsRegistry).find(
+    ([label, plugin]) => plugin?.propPanel.defaultSchema.type === schema.type
+  )!;
+
+  const iconStyles = { width: 20, marginRight: '0.5rem' };
+
   let status: undefined | 'is-warning' | 'is-danger';
   if (!schema.key) {
     status = 'is-warning';
@@ -64,9 +72,11 @@ const SelectableSortableItem = ({
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       onClick={() => onEdit(schema.id)}
+      icon={thisPlugin && <PluginIcon plugin={thisPlugin} label={pluginLabel} size={20} styles={iconStyles}/>}
       value={schema.key}
       status={status}
       title={title}
+      required={schema.required}
       style={{ ...selectedStyle, ...style }}
       dragging={isDragging}
       sorting={isSorting}

package/src/components/Designer/index.tsx

@@ -15,10 +15,11 @@ import RightSidebar from './RightSidebar/index';
 import LeftSidebar from './LeftSidebar';
 import Canvas from './Canvas/index';
 import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../constants';
-import { I18nContext, PluginsRegistry } from '../../contexts';
+import { I18nContext, OptionsContext, PluginsRegistry } from '../../contexts';
 import {
   schemasList2template,
   uuid,
+  round,
   cloneDeep,
   template2SchemasList,
   getPagesScrollTopByIndex,
@@ -51,7 +52,7 @@ const TemplateEditor = ({
   onSaveTemplate: (t: Template) => void;
   onChangeTemplate: (t: Template) => void;
 } & {
-  onChangeTemplate: (t: Template) => void 
+  onChangeTemplate: (t: Template) => void
   onPageCursorChange: (newPageCursor: number) => void
 }) => {
   const past = useRef<SchemaForUI[][]>([]);
@@ -61,6 +62,7 @@ const TemplateEditor = ({
 
   const i18n = useContext(I18nContext);
   const pluginsRegistry = useContext(PluginsRegistry);
+  const options = useContext(OptionsContext);
 
   const [hoveringSchemaId, setHoveringSchemaId] = useState<string | null>(null);
   const [activeElements, setActiveElements] = useState<HTMLElement[]>([]);
@@ -170,6 +172,7 @@ const TemplateEditor = ({
         x: ensureMiddleValue(paddingLeft, defaultSchema.position.x, pageSize.width - paddingRight - defaultSchema.width),
         y: ensureMiddleValue(paddingTop, defaultSchema.position.y, pageSize.height - paddingBottom - defaultSchema.height),
       },
+      required: defaultSchema.readOnly ? false : options.requiredByDefault || defaultSchema.required || false,
     } as SchemaForUI;
 
     if (defaultSchema.position.y === 0) {
@@ -253,7 +256,7 @@ const TemplateEditor = ({
           const moveY = (event.delta.y - canvasTopOffsetFromPageCorner) / scale;
           const moveX = (event.delta.x - canvasLeftOffsetFromPageCorner) / scale;
 
-          const position = { x: px2mm(Math.max(0, moveX)), y: px2mm(Math.max(0, moveY)) }
+          const position = { x: round(px2mm(Math.max(0, moveX)), 2), y: round(px2mm(Math.max(0, moveY)), 2) }
 
           addSchema({ ...(active.data.current as Schema), position });
         }}

package/src/components/Renderer.tsx

@@ -62,6 +62,16 @@ const Wrapper = ({
       outline,
     }}
   >
+    {schema.required &&
+      <span style={{
+        color: 'red',
+        position: 'absolute',
+        top: -12,
+        left: -12,
+        fontSize: 18,
+        fontWeight: 700,
+      }}>*</span>
+    }
     {children}
   </div>
 );

package/src/helper.ts

@@ -448,7 +448,7 @@ const handleTypeChange = (
   pluginsRegistry: Plugins
 ) => {
   if (key !== 'type') return;
-  const keysToKeep = ['id', 'key', 'type', 'position'];
+  const keysToKeep = ['id', 'key', 'type', 'position', 'required'];
   Object.keys(schema).forEach((key) => {
     if (!keysToKeep.includes(key)) {
       delete schema[key as keyof typeof schema];
@@ -463,6 +463,9 @@ const handleTypeChange = (
       (schema as any)[key] = propPanel?.defaultSchema[key];
     }
   });
+  if (schema.readOnly) {
+    schema.required = false;
+  }
 };
 
 export const changeSchemas = (args: {
@@ -489,4 +492,4 @@ export const changeSchemas = (args: {
     return acc;
   }, cloneDeep(schemas));
   commitSchemas(newSchemas);
-};
+};