{
alias: attrs.alias || attrs.label || "",
tag: attrs.tag,
mode,
+ group: structuredContentHelpers.getGroup?.(attrs.tag) ?? undefined,
} as Types.TemplateField;
});
};
@@ -59,7 +60,8 @@ const areTemplateFieldsEqual = (
left.alias !== right.alias ||
left.tag !== right.tag ||
left.position !== right.position ||
- left.mode !== right.mode
+ left.mode !== right.mode ||
+ left.group !== right.group
) {
return false;
}
@@ -165,7 +167,7 @@ const SuperDocTemplateBuilder = forwardRef<
menuVisibleRef.current = menuVisible;
}, [menuVisible]);
- const trigger = menu.trigger || "{{"; // Default trigger
+ const trigger = menu.trigger || "{{";
const availableFields = fieldsRef.current.available || [];
@@ -176,8 +178,7 @@ const SuperDocTemplateBuilder = forwardRef<
return availableFields.filter((field) => {
const label = field.label.toLowerCase();
- const category = field.category?.toLowerCase() || "";
- return label.includes(normalized) || category.includes(normalized);
+ return label.includes(normalized);
});
},
[availableFields],
@@ -195,7 +196,6 @@ const SuperDocTemplateBuilder = forwardRef<
updateMenuFilter("");
}, [updateMenuFilter]);
- // Field operations
const insertFieldInternal = useCallback(
(
mode: "inline" | "block",
@@ -213,7 +213,7 @@ const SuperDocTemplateBuilder = forwardRef<
alias: field.alias,
tag: field.metadata
? JSON.stringify(field.metadata)
- : field.category,
+ : undefined,
},
text: field.defaultValue || field.alias,
})
@@ -222,7 +222,7 @@ const SuperDocTemplateBuilder = forwardRef<
alias: field.alias,
tag: field.metadata
? JSON.stringify(field.metadata)
- : field.category,
+ : undefined,
},
text: field.defaultValue || field.alias,
});
@@ -279,10 +279,6 @@ const SuperDocTemplateBuilder = forwardRef<
const editor = superdocRef.current?.activeEditor;
if (!editor) {
- console.warn(
- "[SuperDocTemplateBuilder] deleteField called without active editor",
- );
-
let removed = false;
setTemplateFields((prev) => {
if (!prev.some((field) => field.id === id)) return prev;
@@ -301,15 +297,15 @@ const SuperDocTemplateBuilder = forwardRef<
return removed;
}
+ const fieldToDelete = templateFields.find((f) => f.id === id);
+ const groupId = fieldToDelete?.group;
+
let commandResult = false;
try {
commandResult =
editor.commands.deleteStructuredContentById?.(id) ?? false;
- } catch (error) {
- console.error(
- "[SuperDocTemplateBuilder] Delete command failed:",
- error,
- );
+ } catch {
+ commandResult = false;
}
let documentFields = getTemplateFieldsFromEditor(editor);
@@ -319,6 +315,20 @@ const SuperDocTemplateBuilder = forwardRef<
documentFields = documentFields.filter((field) => field.id !== id);
}
+ if (groupId) {
+ const remainingFieldsInGroup = documentFields.filter(
+ (field) => field.group === groupId,
+ );
+
+ if (remainingFieldsInGroup.length === 1) {
+ const lastField = remainingFieldsInGroup[0];
+ editor.commands.updateStructuredContentById?.(lastField.id, {
+ attrs: { tag: undefined },
+ });
+ documentFields = getTemplateFieldsFromEditor(editor);
+ }
+ }
+
let removedFromState = false;
setTemplateFields((prev) => {
@@ -344,7 +354,7 @@ const SuperDocTemplateBuilder = forwardRef<
return commandResult || removedFromState;
},
- [onFieldDelete, onFieldsChange],
+ [onFieldDelete, onFieldsChange, templateFields],
);
const selectField = useCallback(
@@ -379,7 +389,6 @@ const SuperDocTemplateBuilder = forwardRef<
[onFieldsChange],
);
- // Initialize SuperDoc
useEffect(() => {
if (!containerRef.current) return;
@@ -394,7 +403,6 @@ const SuperDocTemplateBuilder = forwardRef<
if (instance.activeEditor) {
const editor = instance.activeEditor;
- // Setup trigger detection
editor.on("update", ({ editor: e }: any) => {
const { state } = e;
const { from } = state.selection;
@@ -414,7 +422,7 @@ const SuperDocTemplateBuilder = forwardRef<
if (!editor) return;
const currentPos = editor.state.selection.from;
const tr = editor.state.tr.delete(triggerStart, currentPos);
- editor.view.dispatch(tr);
+ (editor as any).view.dispatch(tr);
};
triggerCleanupRef.current = cleanup;
@@ -463,7 +471,6 @@ const SuperDocTemplateBuilder = forwardRef<
setMenuPosition(bounds);
});
- // Track field changes
editor.on("update", () => {
discoverFields(editor);
});
@@ -531,29 +538,23 @@ const SuperDocTemplateBuilder = forwardRef<
const mode = (field.metadata?.mode as "inline" | "block") || "inline";
if (field.id.startsWith("custom_") && onFieldCreate) {
- try {
- const createdField = await onFieldCreate(field);
-
- if (createdField) {
- const createdMode =
- (createdField.metadata?.mode as "inline" | "block") || mode;
- insertFieldInternal(createdMode, {
- alias: createdField.label,
- category: createdField.category,
- metadata: createdField.metadata,
- defaultValue: createdField.defaultValue,
- });
- setMenuVisible(false);
- return;
- }
- } catch (error) {
- console.error("Field creation failed:", error);
+ const createdField = await onFieldCreate(field);
+
+ if (createdField) {
+ const createdMode =
+ (createdField.metadata?.mode as "inline" | "block") || mode;
+ insertFieldInternal(createdMode, {
+ alias: createdField.label,
+ metadata: createdField.metadata,
+ defaultValue: createdField.defaultValue,
+ });
+ setMenuVisible(false);
+ return;
}
}
insertFieldInternal(mode, {
alias: field.label,
- category: field.category,
metadata: field.metadata,
defaultValue: field.defaultValue,
});
@@ -562,6 +563,65 @@ const SuperDocTemplateBuilder = forwardRef<
[insertFieldInternal, onFieldCreate, resetMenuFilter],
);
+ const handleSelectExisting = useCallback(
+ (field: Types.TemplateField) => {
+ if (triggerCleanupRef.current) {
+ triggerCleanupRef.current();
+ triggerCleanupRef.current = null;
+ }
+ menuTriggerFromRef.current = null;
+ resetMenuFilter();
+
+ const editor = superdocRef.current?.activeEditor;
+ if (!editor) return;
+
+ const structuredContentHelpers = (editor.helpers as any)
+ ?.structuredContentCommands;
+
+ if (!structuredContentHelpers) return;
+
+ const groupId =
+ field.group ||
+ `group-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+
+ const tagWithGroup = structuredContentHelpers.createTagObject?.({
+ group: groupId,
+ });
+
+ const mode = field.mode || "inline";
+
+ const success =
+ mode === "inline"
+ ? editor.commands.insertStructuredContentInline?.({
+ attrs: {
+ alias: field.alias,
+ tag: tagWithGroup,
+ },
+ text: field.alias,
+ })
+ : editor.commands.insertStructuredContentBlock?.({
+ attrs: {
+ alias: field.alias,
+ tag: tagWithGroup,
+ },
+ text: field.alias,
+ });
+
+ if (success) {
+ if (!field.group) {
+ updateField(field.id, { tag: tagWithGroup });
+ }
+
+ setMenuVisible(false);
+
+ const updatedFields = getTemplateFieldsFromEditor(editor);
+ setTemplateFields(updatedFields);
+ onFieldsChange?.(updatedFields);
+ }
+ },
+ [updateField, resetMenuFilter, onFieldsChange],
+ );
+
const handleMenuClose = useCallback(() => {
setMenuVisible(false);
menuTriggerFromRef.current = null;
@@ -572,7 +632,6 @@ const SuperDocTemplateBuilder = forwardRef<
}
}, [resetMenuFilter]);
- // Navigation methods
const nextField = useCallback(() => {
if (!superdocRef.current?.activeEditor || templateFields.length === 0)
return;
@@ -601,23 +660,17 @@ const SuperDocTemplateBuilder = forwardRef<
async (config?: Types.ExportConfig): Promise
=> {
const { fileName = "document", triggerDownload = true } = config || {};
- try {
- const result = await superdocRef.current?.export({
- exportType: ["docx"],
- exportedName: fileName,
- triggerDownload,
- });
+ const result = await superdocRef.current?.export({
+ exportType: ["docx"],
+ exportedName: fileName,
+ triggerDownload,
+ });
- return result;
- } catch (error) {
- console.error("Failed to export DOCX", error);
- throw error;
- }
+ return result;
},
[],
);
- // Imperative handle
useImperativeHandle(ref, () => ({
insertField: (field) => insertFieldInternal("inline", field),
insertBlockField: (field) => insertFieldInternal("block", field),
@@ -628,9 +681,9 @@ const SuperDocTemplateBuilder = forwardRef<
previousField,
getFields: () => templateFields,
exportTemplate,
+ getSuperDoc: () => superdocRef.current,
}));
- // Components
const MenuComponent = menu.component || FieldMenu;
const ListComponent = list.component || FieldList;
@@ -642,7 +695,6 @@ const SuperDocTemplateBuilder = forwardRef<
style={style}
>
- {/* Field List (if left) */}
{list.position === "left" && (
)}
- {/* Document */}
{toolbarSettings?.renderDefaultContainer && (
- {/* Field Menu */}
);
diff --git a/src/types.ts b/src/types.ts
index d457a52..0fc8d50 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -3,9 +3,9 @@ import type { SuperDoc } from "superdoc"; // eslint-disable-line
export interface FieldDefinition {
id: string;
label: string;
- category?: string;
defaultValue?: string;
metadata?: Record;
+ group?: string;
}
export interface TemplateField {
@@ -14,6 +14,7 @@ export interface TemplateField {
tag?: string;
position?: number;
mode?: "inline" | "block";
+ group?: string;
}
export interface TriggerEvent {
@@ -34,6 +35,8 @@ export interface FieldMenuProps {
onCreateField?: (
field: FieldDefinition,
) => void | Promise;
+ existingFields?: TemplateField[];
+ onSelectExisting?: (field: TemplateField) => void;
}
export interface FieldListProps {
@@ -135,4 +138,14 @@ export interface SuperDocTemplateBuilderHandle {
previousField: () => void;
getFields: () => TemplateField[];
exportTemplate: (config?: ExportConfig) => Promise;
+ /**
+ * Returns the SuperDoc instance.
+ * Use this to access the full SuperDoc API, including:
+ * - The active editor: `getSuperDoc()?.activeEditor`
+ * - Editor commands: `getSuperDoc()?.activeEditor?.commands.*`
+ * - Editor state and helpers: `getSuperDoc()?.activeEditor?.state`
+ *
+ * Note: Full TypeScript types for SuperDoc will be available in a future update.
+ */
+ getSuperDoc: () => SuperDoc | null;
}