feat(external-sources): add externalSourcesEmbedCss config option to set embed css on external sources iframe

blocks/Config/initialConfig.js

@@ -18,6 +18,7 @@ export const initialConfig = {
   imgOnly: false,
   accept: '',
   externalSourcesPreferredTypes: '',
+  externalSourcesEmbedCss: '',
   store: 'auto',
   cameraMirror: false,
   cameraCapture: '',

blocks/Config/normalizeConfigValue.js

@@ -113,6 +113,7 @@ const mapping = {
   imgOnly: asBoolean,
   accept: asString,
   externalSourcesPreferredTypes: asString,
+  externalSourcesEmbedCss: asString,
   store: asStore,
   cameraMirror: asBoolean,
   cameraCapture: asCameraCapture,

blocks/ExternalSource/ExternalSource.js

@@ -87,7 +87,7 @@
         this.mountIframe();
       },
     });
     this.sub('*currentActivityParams', (val) => {
       if (!this.isActivityActive) {
         return;
       }
@@ -103,9 +103,13 @@
       this.$.showSelectionStatus = multiple;
     });
 
     this.subConfigValue('localeName', (val) => {
       this.setupL10n();
     });
+
+    this.subConfigValue('externalSourcesEmbedCss', (embedCss) => {
+      this.applyEmbedCss(embedCss);
+    });
   }
 
   /**
@@ -156,18 +160,30 @@
 
   /** @private */
   handleIframeLoad() {
-    this.applyStyles();
+    this.applyEmbedCss(this.cfg.externalSourcesEmbedCss);
+    this.applyTheme();
     this.setupL10n();
   }
 
   /** @private */
-  applyStyles() {
+  applyTheme() {
     this._messageBridge?.send({
       type: 'set-theme-definition',
       theme: buildThemeDefinition(this),
     });
   }
 
+  /**
+   * @private
+   * @param {string} css
+   */
+  applyEmbedCss(css) {
+    this._messageBridge?.send({
+      type: 'set-embed-css',
+      css,
+    });
+  }
+
   /** @private */
   setupL10n() {
     this._messageBridge?.send({

blocks/ExternalSource/types.js

@@ -122,7 +122,7 @@
  *     }
  *   | {
  *       type: 'set-embed-css';
- *       css: Partial<ThemeDefinition>;
+ *       css: string;
  *     }} OutputMessage
  */
 

types/exported.d.ts

@@ -57,6 +57,10 @@ export type ConfigType = {
    * See [here](https://uploadcare.com/docs/file-uploader/options/#external-sources-preferred-types)
    */
   externalSourcesPreferredTypes: string;
+  /**
+   * Provide custom CSS to the social sources iframe
+   */
+  externalSourcesEmbedCss: string;
   /**
    * Store uploaded files.
    */