@pdfme/ui 4.2.4 → 4.2.5-dev.3

package/dist/types/class.d.ts

@@ -37,6 +37,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>;
         }, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{
             type: import("zod").ZodString;
             content: import("zod").ZodOptional<import("zod").ZodString>;
@@ -55,6 +56,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">, import("zod").objectInputType<{
             type: import("zod").ZodString;
             content: import("zod").ZodOptional<import("zod").ZodString>;
@@ -73,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/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" | "validation.uniqueName" | "validation.hexColor" | "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;
@@ -24,7 +25,8 @@ export declare const I18nContext: import("react").Context<(key: "type" | "width"
     addPageAfter: string;
     removePage: string;
     removePageConfirm: string;
-    hexColorPrompt: string;
+    'validation.uniqueName': string;
+    'validation.hexColor': string;
     'schemas.color': string;
     'schemas.borderWidth': string;
     'schemas.borderColor': string;

package/dist/types/helper.d.ts

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

package/package.json

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

package/src/Designer.tsx

@@ -65,6 +65,7 @@ class Designer extends BaseUIClass {
           template={this.template}
           onSaveTemplate={(template) => {
             this.template = template;
+            this.template.pdfmeVersion = PDFME_VERSION;
             if (this.onSaveTemplateCallback) {
               this.onSaveTemplateCallback(template);
             }

package/src/components/Designer/LeftSidebar.tsx

@@ -8,7 +8,8 @@ import { theme, Button } from 'antd';
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from "@dnd-kit/utilities";
 import Renderer from '../Renderer';
-import { PluginsRegistry, OptionsContext } from '../../contexts';
+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,8 +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 options = useContext(OptionsContext);
-
   const [isDragging, setIsDragging] = useState(false);
 
   useEffect(() => {
@@ -77,7 +76,6 @@ const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number
   >
     {Object.entries(pluginsRegistry).map(([label, plugin]) => {
       if (!plugin?.propPanel.defaultSchema) return null;
-      const icon = options.icons?.[plugin.propPanel.defaultSchema.type] ?? plugin.icon;
 
       return <Draggable
         key={label}
@@ -85,16 +83,10 @@ const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number
         basePdf={basePdf}
         plugin={plugin}>
         <Button
-          title={label}
-          onMouseDown={() => {
-            setIsDragging(true);
-          }}
-          style={{ width: 35, height: 35, marginTop: '0.25rem', padding: '0.25rem' }}>
-          {icon ?
-            <div dangerouslySetInnerHTML={{ __html: 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,10 +1,10 @@
 import FormRender, { useForm } from 'form-render';
-import React, { useContext, useEffect } from 'react';
+import React, { useRef, 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';
 import { I18nContext, PluginsRegistry, OptionsContext } from '../../../../contexts';
-import { getSidebarContentHeight } from '../../../../helper';
+import { getSidebarContentHeight, debounce } from '../../../../helper';
 import { theme, Typography, Button, Divider } from 'antd';
 import AlignWidget from './AlignWidget';
 import WidgetRenderer from './WidgetRenderer';
@@ -22,25 +22,72 @@ type DetailViewProps = Pick<SidebarProps,
 const DetailView = (props: DetailViewProps) => {
   const { token } = theme.useToken();
 
-  const { size, changeSchemas, deselectSchema, activeSchema } = props;
+  const { size, schemas, changeSchemas, deselectSchema, activeSchema } = props;
   const form = useForm();
 
   const i18n = useContext(I18nContext);
   const pluginsRegistry = useContext(PluginsRegistry);
   const options = useContext(OptionsContext);
 
+  const [widgets, setWidgets] = useState<{
+    [key: string]: (props: PropPanelWidgetProps) => React.JSX.Element;
+  }>({});
+
+  useEffect(() => {
+    const newWidgets: typeof widgets = {
+      AlignWidget: (p) => <AlignWidget {...p} {...props} options={options} />,
+      Divider: () => (
+        <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />
+      ),
+      ButtonGroup: (p) => <ButtonGroupWidget {...p} {...props} options={options} />,
+    };
+    for (const plugin of Object.values(pluginsRegistry)) {
+      const widgets = plugin?.propPanel.widgets || {};
+      Object.entries(widgets).forEach(([widgetKey, widgetValue]) => {
+        newWidgets[widgetKey] = (p) => (
+          <WidgetRenderer
+            {...p}
+            {...props}
+            options={options}
+            theme={token}
+            i18n={i18n as (key: keyof Dict | string) => string}
+            widget={widgetValue}
+          />
+        );
+      });
+    }
+    setWidgets(newWidgets);
+  }, [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;
     delete values.position;
+
     form.setValues(values);
 
   }, [activeSchema, form]);
 
+  useEffect(() => form.resetFields(), [activeSchema.id])
+
+  useEffect(() => {
+    uniqueSchemaKey.current = (value: string): boolean => {
+      for (const s of Object.values(schemas)) {
+        if (s.key === value && s.id !== activeSchema.id) {
+          return false;
+        }
+      }
+      return true;
+    };
+  }, [schemas, activeSchema]);
+
+  const uniqueSchemaKey = useRef((value: string): boolean => true);
 
-  const handleWatch = (formSchema: any) => {
+  const validateUniqueSchemaKey = (_: any, value: string): boolean => uniqueSchemaKey.current(value)
+
+  const handleWatch = debounce((formSchema: any) => {
     const formAndSchemaValuesDiffer = (formValue: any, schemaValue: any): boolean => {
       if (typeof formValue === 'object') {
         return JSON.stringify(formValue) !== JSON.stringify(schemaValue);
@@ -88,7 +135,7 @@ const DetailView = (props: DetailViewProps) => {
           }
         });
     }
-  };
+  }, 500);
 
   const activePlugin = Object.values(pluginsRegistry).find(
     (plugin) => plugin?.propPanel.defaultSchema.type === activeSchema.type
@@ -118,7 +165,18 @@ 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,
+        rules: [{
+          validator: validateUniqueSchemaKey,
+          message: i18n('validation.uniqueName'),
+        }],
+        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 },
@@ -181,31 +239,6 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     };
   }
 
-  const allWidgets: {
-    [key: string]: (props: PropPanelWidgetProps) => React.JSX.Element;
-  } = {
-    AlignWidget: (p) => <AlignWidget {...p} {...props} options={options} />,
-    Divider: () => (
-      <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />
-    ),
-    ButtonGroup: (p) => <ButtonGroupWidget {...p} {...props} options={options} />,
-  };
-  for (const plugin of Object.values(pluginsRegistry)) {
-    const widgets = plugin?.propPanel.widgets || {};
-    Object.entries(widgets).forEach(([widgetKey, widgetValue]) => {
-      allWidgets[widgetKey] = (p) => (
-        <WidgetRenderer
-          {...p}
-          {...props}
-          options={options}
-          theme={token}
-          i18n={i18n as (key: keyof Dict | string) => string}
-          widget={widgetValue}
-        />
-      );
-    });
-  }
-
   return (
     <div>
       <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
@@ -235,7 +268,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         <FormRender
           form={form}
           schema={propPanelSchema}
-          widgets={allWidgets}
+          widgets={widgets}
           watch={{ '#': handleWatch }}
           locale="en-US"
         />
@@ -245,7 +278,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
 };
 
 const propsAreUnchanged = (prevProps: DetailViewProps, nextProps: DetailViewProps) => {
-  return JSON.stringify(prevProps.activeSchema) == JSON.stringify(nextProps.activeSchema)
+  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,7 +15,7 @@ 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,
@@ -62,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[]>([]);
@@ -161,16 +162,26 @@ const TemplateEditor = ({
     const [paddingTop, paddingRight, paddingBottom, paddingLeft] = isBlankPdf(template.basePdf) ? template.basePdf.padding : [0, 0, 0, 0];
     const pageSize = pageSizes[pageCursor];
 
+    const newSchemaKey = (prefix: string) => {
+      let keyNum = schemasList[pageCursor].length + 1;
+      let newKey = prefix + keyNum;
+      while (schemasList[pageCursor].find((s) => s.key === newKey)) {
+        keyNum++;
+        newKey = prefix + keyNum;
+      }
+      return newKey;
+    };
     const ensureMiddleValue = (min: number, value: number, max: number) => Math.min(Math.max(min, value), max)
 
     const s = {
       id: uuid(),
-      key: `${i18n('field')}${schemasList[pageCursor].length + 1}`,
+      key: newSchemaKey(i18n('field')),
       ...defaultSchema,
       position: {
         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) {

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: {