Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
caio-pizzol merged 3 commits into from
Nov 13, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4bc3c9f
feat: enhance field handling with mode support in template builder
caio-pizzol Nov 13, 2025
0f7bdeb
fix: reset field mode to inline on escape and click events in FieldMenu
caio-pizzol Nov 13, 2025
a16fe1c
fix: update stylesheet import path in App component for consistency
caio-pizzol Nov 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,4 @@ examples/**/yarn.lock

# Dev
dev/**
CLAUDE.md
37 changes: 27 additions & 10 deletions src/defaults/FieldList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
))}
Expand Down
33 changes: 33 additions & 0 deletions src/defaults/FieldMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]);

Expand Down Expand Up @@ -103,6 +105,7 @@ export const FieldMenu: React.FC<FieldMenuProps> = ({
id: `custom_${Date.now()}`,
label: trimmedName,
category: "Custom",
metadata: { mode: fieldMode },
};

try {
Expand All @@ -115,6 +118,7 @@ export const FieldMenu: React.FC<FieldMenuProps> = ({
} finally {
setIsCreating(false);
setNewFieldName("");
setFieldMode("inline");
}
};

Expand Down Expand Up @@ -166,6 +170,7 @@ export const FieldMenu: React.FC<FieldMenuProps> = ({
if (event.key === "Escape") {
setIsCreating(false);
setNewFieldName("");
setFieldMode("inline");
}
}}
autoFocus
Expand All @@ -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",
Expand All @@ -201,6 +233,7 @@ export const FieldMenu: React.FC<FieldMenuProps> = ({
onClick={() => {
setIsCreating(false);
setNewFieldName("");
setFieldMode("inline");
}}
style={{
padding: "4px 12px",
Expand Down
13 changes: 10 additions & 3 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
type Editor = NonNullable<SuperDoc["activeEditor"]>;

const getTemplateFieldsFromEditor = (editor: Editor): Types.TemplateField[] => {
const structuredContentHelpers = (editor.helpers as any)

Check warning on line 19 in src/index.tsx

View workflow job for this annotation

GitHub Actions / validate 

Unexpected any. Specify a different type
?.structuredContentCommands;

if (!structuredContentHelpers?.getStructuredContentTags) {
Expand All @@ -26,14 +26,17 @@
const tags =
structuredContentHelpers.getStructuredContentTags(editor.state) || [];

return tags.map((entry: any) => {

Check warning on line 29 in src/index.tsx

View workflow job for this annotation

GitHub Actions / validate 

Unexpected any. Specify a different type
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;
});
};
Expand All @@ -55,7 +58,8 @@
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;
}
Expand Down Expand Up @@ -163,7 +167,7 @@

const trigger = menu.trigger || "{{"; // Default trigger

const availableFields = fieldsRef.current.available || [];

Check warning on line 170 in src/index.tsx

View workflow job for this annotation

GitHub Actions / validate 

The 'availableFields' logical expression could make the dependencies of useCallback Hook (at line 183) change on every render. Move it inside the useCallback callback. Alternatively, wrap the initialization of 'availableFields' in its own useMemo() Hook

const computeFilteredFields = useCallback(
(query: string) => {
Expand Down Expand Up @@ -391,7 +395,7 @@
const editor = instance.activeEditor;

// Setup trigger detection
editor.on("update", ({ editor: e }: any) => {

Check warning on line 398 in src/index.tsx

View workflow job for this annotation

GitHub Actions / validate 

Unexpected any. Specify a different type
const { state } = e;
const { from } = state.selection;

Expand Down Expand Up @@ -503,7 +507,7 @@

superdocRef.current = null;
};
}, [

Check warning on line 510 in src/index.tsx

View workflow job for this annotation

GitHub Actions / validate 

React Hook useEffect has missing dependencies: 'resetMenuFilter', 'toolbarSettings', and 'updateMenuFilter'. Either include them or remove the dependency array
document?.source,
document?.mode,
trigger,
Expand All @@ -522,12 +526,15 @@
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,
Expand All @@ -541,7 +548,7 @@
}
}

insertFieldInternal("inline", {
insertFieldInternal(mode, {
alias: field.label,
category: field.category,
metadata: field.metadata,
Expand Down
1 change: 1 addition & 0 deletions src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
label: string;
category?: string;
defaultValue?: string;
metadata?: Record<string, any>;

Check warning on line 8 in src/types.ts

View workflow job for this annotation

GitHub Actions / validate 

Unexpected any. Specify a different type
}

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

export interface TriggerEvent {
Expand Down Expand Up @@ -73,7 +74,7 @@
responsiveToContainer?: boolean;
excludeItems?: string[];
texts?: Record<string, string>;
icons?: Record<string, any>;

Check warning on line 77 in src/types.ts

View workflow job for this annotation

GitHub Actions / validate 

Unexpected any. Specify a different type
}

export interface SuperDocTemplateBuilderProps {
Expand Down