feat(template-builder): add cspNonce support

packages/superdoc/src/core/types/index.js

@@ -192,6 +192,7 @@
  * @property {string} [markdown] Markdown content to initialize the editor with
  * @property {boolean} [isDebug=false] Whether to enable debug mode
  * @property {ViewOptions} [viewOptions] Document view options (OOXML ST_View compatible)
+ * @property {string} [cspNonce] Content Security Policy nonce for dynamically injected styles
  */
 
 export {};

packages/template-builder/src/index.tsx

@@ -9,7 +9,7 @@
 type Editor = NonNullable<SuperDoc['activeEditor']>;
 
 const getTemplateFieldsFromEditor = (editor: Editor): Types.TemplateField[] => {
   const structuredContentHelpers = (editor.helpers as any)?.structuredContentCommands;
 
   if (!structuredContentHelpers?.getStructuredContentTags) {
     return [];
@@ -17,7 +17,7 @@
 
   const tags = structuredContentHelpers.getStructuredContentTags(editor.state) || [];
 
   return tags.map((entry: any) => {
     const node = entry?.node ?? entry;
     const attrs = node?.attrs ?? {};
     const nodeType = node?.type?.name || '';
@@ -112,6 +112,7 @@
       menu = {},
       list = {},
       toolbar,
+      cspNonce,
       onReady,
       onTrigger,
       onFieldInsert,
@@ -391,7 +392,7 @@
           if (instance?.activeEditor) {
             const editor = instance.activeEditor;
 
             editor.on('update', ({ editor: e }: any) => {
               const { state } = e;
               const { from } = state.selection;
 
@@ -408,7 +409,7 @@
                     if (!editor) return;
                     const currentPos = editor.state.selection.from;
                     const tr = editor.state.tr.delete(triggerStart, currentPos);
                     (editor as any).view.dispatch(tr);
                   };
 
                   triggerCleanupRef.current = cleanup;
@@ -468,6 +469,7 @@
           documentMode: document?.mode || 'editing',
           modules,
           toolbar: toolbarSettings?.selector,
+          cspNonce,
           onReady: handleReady,
         });
 
@@ -489,7 +491,7 @@
 
         superdocRef.current = null;
       };
-    }, [document?.source, document?.mode, trigger, discoverFields, onReady, onTrigger, toolbarSettings]);
+    }, [document?.source, document?.mode, trigger, discoverFields, onReady, onTrigger, toolbarSettings, cspNonce]);
 
     const handleMenuSelect = useCallback(
       async (field: Types.FieldDefinition) => {
@@ -539,7 +541,7 @@
         const editor = superdocRef.current?.activeEditor;
         if (!editor) return;
 
         const structuredContentHelpers = (editor.helpers as any)?.structuredContentCommands;
 
         if (!structuredContentHelpers) return;
 

packages/template-builder/src/types.ts

@@ -4,7 +4,7 @@
   id: string;
   label: string;
   defaultValue?: string;
   metadata?: Record<string, any>;
   mode?: 'inline' | 'block';
   group?: string;
 }
@@ -82,7 +82,7 @@
   responsiveToContainer?: boolean;
   excludeItems?: string[];
   texts?: Record<string, string>;
   icons?: Record<string, any>;
 }
 
 /**
@@ -110,6 +110,9 @@
   list?: ListConfig;
   toolbar?: boolean | string | ToolbarConfig;
 
+  /** Content Security Policy nonce for dynamically injected styles */
+  cspNonce?: string;
+
   // Events
   onReady?: () => void;
   onTrigger?: (event: TriggerEvent) => void;