INT-3307: Add controls to storybooks

src/stories/Editor.stories.svelte

@@ -1,16 +1,15 @@
 <script>
-  //
   import Editor from '../main/component/Editor.svelte';
   import { Meta, Story } from '@storybook/addon-svelte-csf';
 
   const apiKey = 'b1g4d59rwwqxx1vj7mci23rjj8ubgb46i4xsio6ieig6fkps';
   const content = `
-    <h2 style="text-align: center;">
-    TinyMCE provides a <span style="text-decoration: underline;">full-featured</span> rich text editing experience, and a featherweight download.
-  </h2>
-  <p style="text-align: center;">
-    <strong><span style="font-size: 14pt;"><span style="color: #7e8c8d; font-weight: 600;">No matter what you're building, TinyMCE has got you covered.</span></span></strong>
-  </p>`;
+<h2 style="text-align: center;">
+TinyMCE provides a <span style="text-decoration: underline;">full-featured</span> rich text editing experience, and a featherweight download.
+</h2>
+<p style="text-align: center;">
+<strong><span style="font-size: 14pt;"><span style="color: #7e8c8d; font-weight: 600;">No matter what you're building, TinyMCE has got you covered.</span></span></strong>
+</p>`.trim();
 
   let value = content;
   let disabled = true;
@@ -19,48 +18,49 @@
   const toggleDisabled = () => {
     disabled = !disabled;
   }
+  const controls = { channel: '7', conf: { plugins: 'help' } }
 </script>
 
 <Meta title="Editor" component={Editor}/>
 
-<Story name="Iframe">
-  <Editor {apiKey} value={content}/>
+<Story name="Iframe" args={{ ...controls, inline: false }} let:args >
+  <Editor {apiKey} {value} {...args}/>
 </Story>
 
-<Story name="Inline">
+<Story name="Inline" args={{ ...controls, inline: true }} let:args>
   <div style="padding-top:100px;">
-    <Editor {apiKey} inline={true} value={content} />
+    <Editor {apiKey} {value} {...args} />
   </div>
 </Story>
 
-<Story name="Value binding">
+<Story name="Value binding" args={controls} let:args>
   <div>
-    <Editor {apiKey} bind:value={value} />
+    <Editor {apiKey} bind:value {...args}/>
     <div>
       {@html value}
     </div>
   </div>
 </Story>
 
-<Story name="Input binding">
+<Story name="Input binding" args={controls} let:args>
   <div>
-    <Editor {apiKey} bind:value={value} />
-    <textarea style="width:100%;height:200px" bind:value={value}></textarea>
+    <Editor {apiKey} bind:value {...args}/>
+    <textarea style="width:100%;height:200px" bind:value></textarea>
   </div>
 </Story>
 
-<Story name="Text binding">
+<Story name="Text binding" args={controls} let:args>
   <div>
-    <Editor {apiKey} bind:value={value} bind:text={text} />
+    <Editor {apiKey} bind:value bind:text {...args}/>
     <div>{text}</div>
     <div>{@html value}</div>
     <textarea style="width:100%;height:200px" bind:value={text}></textarea>
   </div>
 </Story>
 
-<Story name="Disabling">
+<Story name="Disabling" args={controls} let:args>
   <div>
     <button on:click={toggleDisabled}>{#if disabled}Enable{:else}Disable{/if}</button>
-    <Editor {disabled} />
+    <Editor {apiKey} {disabled} {value} {...args}/>
   </div>
 </Story>

vite.config.mjs

@@ -1,12 +1,10 @@
-import { defineConfig } from 'vite'
-import { svelte } from '@sveltejs/vite-plugin-svelte'
-
-// svelte.config.js
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
-// https://vitejs.dev/config/
+// As of right now, this is just used for building the storybook.
 export default defineConfig({
   plugins: [svelte({
     preprocess: [vitePreprocess()]
   })]
-})
+});