Fix embed preview bug with inconsistent options (#289)

* Extend embed params with default params for conditionally shown embed preview options to work properly

* add changeset

.changeset/eighty-birds-marry.md

@@ -0,0 +1,5 @@
+---
+'xstate-viz-app': patch
+---
+
+Fix a bug with inconsistent embed previews

src/EmbedPreview.tsx

@@ -19,7 +19,7 @@ import { useMachine } from '@xstate/react';
 import React, { useEffect, useRef, useState } from 'react';
 import { createModel } from 'xstate/lib/model';
 import { EmbedMode, EmbedPanel, ParsedEmbed } from './types';
-import { makeEmbedUrl, paramsToRecord } from './utils';
+import { DEFAULT_EMBED_PARAMS, makeEmbedUrl, paramsToRecord } from './utils';
 import { send, assign, ContextFrom } from 'xstate';
 import { Overlay } from './Overlay';
 import { useRouter } from 'next/router';
@@ -268,7 +268,10 @@ const EmbedPreviewContent: React.FC = () => {
             onChange={() => {
               sendPreviewEvent({
                 type: 'PARAMS_CHANGED',
-                params: extractFormData(form.current),
+                params: {
+                  ...DEFAULT_EMBED_PARAMS,
+                  ...extractFormData(form.current),
+                },
               });
             }}
             ref={form}

src/utils.ts

@@ -206,16 +206,17 @@ export function isDelayedTransitionAction(
  * /?mode=viz|full|panels default:viz
  * /?mode=panels&panel=code|state|events|actors default:code
  */
+export const DEFAULT_EMBED_PARAMS: ParsedEmbed = {
+  mode: EmbedMode.Viz,
+  panel: EmbedPanel.Code,
+  showOriginalLink: true,
+  readOnly: true,
+  pan: false,
+  zoom: false,
+  controls: false,
+};
 export const parseEmbedQuery = (query?: NextRouter['query']): ParsedEmbed => {
-  const parsedEmbed = {
-    mode: EmbedMode.Viz,
-    panel: EmbedPanel.Code,
-    showOriginalLink: true,
-    readOnly: true,
-    pan: false,
-    zoom: false,
-    controls: false,
-  };
+  const parsedEmbed = DEFAULT_EMBED_PARAMS;
 
   const getQueryParamValue = (qParamValue: string | string[]) => {
     return Array.isArray(qParamValue) ? qParamValue[0] : qParamValue;