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.

Author: caio-pizzol

.gitignore

@@ -25,3 +25,4 @@ examples/**/yarn.lock
 
 # Dev
 dev/**
+CLAUDE.md

demo/src/App.tsx

@@ -5,7 +5,7 @@ import type {
   TemplateField,
   FieldDefinition,
 } from "@superdoc-dev/template-builder";
-import "superdoc/dist/style.css";
+import "superdoc/style.css";
 import "./App.css";
 
 const availableFields: FieldDefinition[] = [

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");
     }
   };
 
@@ -176,6 +180,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",

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 {