fix: update field ID type and improve field handling

This commit modifies the TemplateField interface to allow the ID to be either a string or a number. It also updates the SuperDocTemplateBuilder component to handle the new ID type, ensuring that field insertion, deletion, and selection functions correctly accommodate both types. This change enhances flexibility in managing template fields.

Author: caio-pizzol

src/index.tsx

@@ -143,7 +143,9 @@ const SuperDocTemplateBuilder = forwardRef<
   const [templateFields, setTemplateFields] = useState<Types.TemplateField[]>(
     fields.initial || [],
   );
-  const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null);
+  const [selectedFieldId, setSelectedFieldId] = useState<string | number | null>(
+    null,
+  );
   const [menuVisible, setMenuVisible] = useState(false);
   const [menuPosition, setMenuPosition] = useState<DOMRect | undefined>();
   const [menuQuery, setMenuQuery] = useState<string>("");
@@ -202,13 +204,12 @@ const SuperDocTemplateBuilder = forwardRef<
       if (!superdocRef.current?.activeEditor) return false;
 
       const editor = superdocRef.current.activeEditor;
-      const fieldId = `field_${Date.now()}`;
+      const previousFields = templateFields;
 
       const success =
         mode === "inline"
           ? editor.commands.insertStructuredContentInline?.({
             attrs: {
-              id: fieldId,
               alias: field.alias,
               tag: field.metadata
                 ? JSON.stringify(field.metadata)
@@ -218,7 +219,6 @@ const SuperDocTemplateBuilder = forwardRef<
           })
           : editor.commands.insertStructuredContentBlock?.({
             attrs: {
-              id: fieldId,
               alias: field.alias,
               tag: field.metadata
                 ? JSON.stringify(field.metadata)
@@ -228,28 +228,28 @@ const SuperDocTemplateBuilder = forwardRef<
           });
 
       if (success) {
-        const newField: Types.TemplateField = {
-          id: fieldId,
-          alias: field.alias,
-          tag: field.category,
-        };
+        const updatedFields = getTemplateFieldsFromEditor(editor);
 
-        setTemplateFields((prev) => {
-          const updated = [...prev, newField];
-          onFieldsChange?.(updated);
-          return updated;
-        });
+        setTemplateFields(updatedFields);
+        onFieldsChange?.(updatedFields);
+
+        const insertedField = updatedFields.find(
+          (candidate) =>
+            !previousFields.some((existing) => existing.id === candidate.id),
+        );
 
-        onFieldInsert?.(newField);
+        if (insertedField) {
+          onFieldInsert?.(insertedField);
+        }
       }
 
       return success;
     },
-    [onFieldInsert, onFieldsChange],
+    [onFieldInsert, onFieldsChange, templateFields],
   );
 
   const updateField = useCallback(
-    (id: string, updates: Partial<Types.TemplateField>): boolean => {
+    (id: string | number, updates: Partial<Types.TemplateField>): boolean => {
       if (!superdocRef.current?.activeEditor) return false;
 
       const editor = superdocRef.current.activeEditor;
@@ -275,7 +275,7 @@ const SuperDocTemplateBuilder = forwardRef<
   );
 
   const deleteField = useCallback(
-    (id: string): boolean => {
+    (id: string | number): boolean => {
       const editor = superdocRef.current?.activeEditor;
 
       if (!editor) {
@@ -348,7 +348,7 @@ const SuperDocTemplateBuilder = forwardRef<
   );
 
   const selectField = useCallback(
-    (id: string) => {
+    (id: string | number) => {
       if (!superdocRef.current?.activeEditor) return;
 
       const editor = superdocRef.current.activeEditor;

src/types.ts

@@ -9,7 +9,7 @@ export interface FieldDefinition {
 }
 
 export interface TemplateField {
-  id: string;
+  id: string | number;
   alias: string;
   tag?: string;
   position?: number;
@@ -38,8 +38,8 @@ export interface FieldMenuProps {
 export interface FieldListProps {
   fields: TemplateField[];
   onSelect: (field: TemplateField) => void;
-  onDelete: (fieldId: string) => void;
-  selectedFieldId?: string;
+  onDelete: (fieldId: string | number) => void;
+  selectedFieldId?: string | number;
 }
 
 export interface DocumentConfig {
@@ -87,7 +87,7 @@ export interface SuperDocTemplateBuilderProps {
   onTrigger?: (event: TriggerEvent) => void;
   onFieldInsert?: (field: TemplateField) => void;
   onFieldUpdate?: (field: TemplateField) => void;
-  onFieldDelete?: (fieldId: string) => void;
+  onFieldDelete?: (fieldId: string | number) => void;
   onFieldsChange?: (fields: TemplateField[]) => void;
   onFieldSelect?: (field: TemplateField | null) => void;
   onFieldCreate?: (
@@ -105,9 +105,12 @@ export interface SuperDocTemplateBuilderHandle {
   insertBlockField: (
     field: Partial<FieldDefinition> & { alias: string },
   ) => boolean;
-  updateField: (id: string, updates: Partial<TemplateField>) => boolean;
-  deleteField: (id: string) => boolean;
-  selectField: (id: string) => void;
+  updateField: (
+    id: string | number,
+    updates: Partial<TemplateField>,
+  ) => boolean;
+  deleteField: (id: string | number) => boolean;
+  selectField: (id: string | number) => void;
   nextField: () => void;
   previousField: () => void;
   getFields: () => TemplateField[];