@builder.io/sdk-svelte 3.0.7 → 4.0.0

package/src/helpers/subscribe-to-editor.ts

@@ -50,19 +50,24 @@ export const createEditorListener = ({
     }
   };
 };
-type SubscribeToEditor = (
-/**
- * The Builder `model` to subscribe to
- */
-model: string,
-/**
- * The callback function to call when the content is updated.
- */
-callback: (updatedContent: BuilderContent) => void,
-/**
- * Extra options for the listener.
- */
-options?: {
+type SubscribeToEditor = ({
+  model,
+  apiKey,
+  callback,
+  trustedHosts
+}: {
+  /**
+   * The Builder `model` to subscribe to
+   */
+  model: string;
+  /**
+   * Builder API Key to use for the editor.
+   */
+  apiKey: string;
+  /**
+   * The callback function to call when the content is updated.
+   */
+  callback: (updatedContent: BuilderContent) => void;
   /**
    * List of hosts to allow editing content from.
    */
@@ -73,12 +78,20 @@ options?: {
  * Subscribes to the Builder editor and listens to `content` updates of a certain `model`.
  * Sends the updated `content` to the `callback` function.
  */
-export const subscribeToEditor: SubscribeToEditor = (model, callback, options) => {
+export const subscribeToEditor: SubscribeToEditor = ({
+  model,
+  apiKey,
+  callback,
+  trustedHosts
+}) => {
   if (!isBrowser) {
     logger.warn('`subscribeToEditor` only works in the browser. It currently seems to be running on the server.');
     return () => {};
   }
-  setupBrowserForEditing();
+  setupBrowserForEditing({
+    modelName: model,
+    apiKey
+  });
   const listener = createEditorListener({
     callbacks: {
       contentUpdate: callback,
@@ -86,7 +99,7 @@ export const subscribeToEditor: SubscribeToEditor = (model, callback, options) =
       configureSdk: () => {}
     },
     model,
-    trustedHosts: options?.trustedHosts
+    trustedHosts
   });
   window.addEventListener('message', listener);
   return () => {

package/src/scripts/init-editing.ts

@@ -28,11 +28,13 @@ export const registerInsertMenu = () => {
 };
 let isSetupForEditing = false;
 export const setupBrowserForEditing = (options: {
+  modelName: string;
+  apiKey: string;
   enrich?: boolean;
   includeRefs?: boolean;
   locale?: string;
   trustedHosts?: string[];
-} = {}) => {
+}) => {
   if (isSetupForEditing) {
     return;
   }
@@ -48,6 +50,8 @@ export const setupBrowserForEditing = (options: {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        modelName: options.modelName,
+        apiKey: options.apiKey,
         supportsXSmallBreakpoint: TARGET === 'reactNative' ? false : true,
         blockLevelPersonalization: true
       }