feat: enhance field handling with mode support in template builder (#16)

* feat: enhance field handling with mode support in template builder

This commit introduces a new 'mode' property to the TemplateField interface, allowing fields to be categorized as either 'inline' or 'block'. Updates to the FieldMenu and FieldList components enable users to select the mode when creating fields, improving the overall flexibility and usability of the template builder. Additionally, the App component's styling import has been corrected for consistency.

* fix: reset field mode to inline on escape and click events in FieldMenu

* fix: update stylesheet import path in App component for consistency

Author: caio-pizzol

src/defaults/FieldList.tsx

@@ -118,16 +118,33 @@ export const FieldList: React.FC<FieldListProps> = ({
                 >
                   {field.id}
                 </div>
-                {field.alias && field.alias !== field.id && (
-                  <div
-                    style={{
-                      fontSize: "12px",
-                      color: "#4b5563",
-                    }}
-                  >
-                    {field.alias}
-                  </div>
-                )}
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    fontSize: "12px",
+                    color: "#4b5563",
+                  }}
+                >
+                  {field.alias && field.alias !== field.id && (
+                    <span>{field.alias}</span>
+                  )}
+                  {field.mode && (
+                    <span
+                      style={{
+                        fontSize: "10px",
+                        padding: "2px 6px",
+                        borderRadius: "4px",
+                        background: field.mode === "block" ? "#dbeafe" : "#f3f4f6",
+                        color: field.mode === "block" ? "#1e40af" : "#4b5563",
+                        fontWeight: "500",
+                      }}
+                    >
+                      {field.mode}
+                    </span>
+                  )}
+                </div>
               </div>
             </div>
           ))}

src/defaults/FieldMenu.tsx

@@ -14,11 +14,13 @@ export const FieldMenu: React.FC<FieldMenuProps> = ({
 }) => {
   const [isCreating, setIsCreating] = useState(false);
   const [newFieldName, setNewFieldName] = useState("");
+  const [fieldMode, setFieldMode] = useState<"inline" | "block">("inline");
 
   useEffect(() => {
     if (!isVisible) {
       setIsCreating(false);
       setNewFieldName("");
+      setFieldMode("inline");
     }
   }, [isVisible]);
 
@@ -103,6 +105,7 @@ export const FieldMenu: React.FC<FieldMenuProps> = ({
       id: `custom_${Date.now()}`,
       label: trimmedName,
       category: "Custom",
+      metadata: { mode: fieldMode },
     };
 
     try {
@@ -115,6 +118,7 @@ export const FieldMenu: React.FC<FieldMenuProps> = ({
     } finally {
       setIsCreating(false);
       setNewFieldName("");
+      setFieldMode("inline");
     }
   };
 
@@ -166,6 +170,7 @@ export const FieldMenu: React.FC<FieldMenuProps> = ({
               if (event.key === "Escape") {
                 setIsCreating(false);
                 setNewFieldName("");
+                setFieldMode("inline");
               }
             }}
             autoFocus
@@ -176,6 +181,33 @@ export const FieldMenu: React.FC<FieldMenuProps> = ({
               borderRadius: "3px",
             }}
           />
+          <div
+            style={{
+              marginTop: "8px",
+              display: "flex",
+              gap: "12px",
+              fontSize: "13px",
+            }}
+          >
+            <label style={{ display: "flex", alignItems: "center", gap: "4px", cursor: "pointer" }}>
+              <input
+                type="radio"
+                value="inline"
+                checked={fieldMode === "inline"}
+                onChange={() => setFieldMode("inline")}
+              />
+              Inline
+            </label>
+            <label style={{ display: "flex", alignItems: "center", gap: "4px", cursor: "pointer" }}>
+              <input
+                type="radio"
+                value="block"
+                checked={fieldMode === "block"}
+                onChange={() => setFieldMode("block")}
+              />
+              Block
+            </label>
+          </div>
           <div
             style={{
               marginTop: "8px",
@@ -201,6 +233,7 @@ export const FieldMenu: React.FC<FieldMenuProps> = ({
               onClick={() => {
                 setIsCreating(false);
                 setNewFieldName("");
+                setFieldMode("inline");
               }}
               style={{
                 padding: "4px 12px",

src/index.tsx

@@ -29,11 +29,14 @@ const getTemplateFieldsFromEditor = (editor: Editor): Types.TemplateField[] => {
   return tags.map((entry: any) => {
     const node = entry?.node ?? entry;
     const attrs = node?.attrs ?? {};
+    const nodeType = node?.type?.name || "";
+    const mode = nodeType.includes("Block") ? "block" : "inline";
 
     return {
       id: attrs.id,
       alias: attrs.alias || attrs.label || "",
       tag: attrs.tag,
+      mode,
     } as Types.TemplateField;
   });
 };
@@ -55,7 +58,8 @@ const areTemplateFieldsEqual = (
       left.id !== right.id ||
       left.alias !== right.alias ||
       left.tag !== right.tag ||
-      left.position !== right.position
+      left.position !== right.position ||
+      left.mode !== right.mode
     ) {
       return false;
     }
@@ -522,12 +526,15 @@ const SuperDocTemplateBuilder = forwardRef<
       menuTriggerFromRef.current = null;
       resetMenuFilter();
 
+      const mode = (field.metadata?.mode as "inline" | "block") || "inline";
+
       if (field.id.startsWith("custom_") && onFieldCreate) {
         try {
           const createdField = await onFieldCreate(field);
 
           if (createdField) {
-            insertFieldInternal("inline", {
+            const createdMode = (createdField.metadata?.mode as "inline" | "block") || mode;
+            insertFieldInternal(createdMode, {
               alias: createdField.label,
               category: createdField.category,
               metadata: createdField.metadata,
@@ -541,7 +548,7 @@ const SuperDocTemplateBuilder = forwardRef<
         }
       }
 
-      insertFieldInternal("inline", {
+      insertFieldInternal(mode, {
         alias: field.label,
         category: field.category,
         metadata: field.metadata,

src/types.ts

@@ -13,6 +13,7 @@ export interface TemplateField {
   alias: string;
   tag?: string;
   position?: number;
+  mode?: "inline" | "block";
 }
 
 export interface TriggerEvent {