Make wraps a passable prop to EditorToolbar

Can be set to nowrap via document.getElementByID("editorToolbar").component.$set({ wraps: false })

ts/editor-toolbar/ButtonGroup.svelte

@@ -6,13 +6,12 @@
     export let props: Record<string, string> = {};
 
     export let buttons: Buttons;
+    export let wraps: boolean;
 </script>
 
 <style lang="scss">
     ul {
         display: flex;
-        /* flex-flow: nowrap for a scrollable toolbar */
-        flex-flow: wrap;
         overflow-y: auto;
 
         padding-inline-start: 0;
@@ -24,6 +23,10 @@
         }
     }
 
+    .wraps {
+        flex-flow: wrap;
+    }
+
     li {
         display: inline-block;
         margin-bottom: calc(var(--toolbar-size) / 15);
@@ -51,11 +54,11 @@
     }
 </style>
 
-<ul {id} class={className} {...props}>
+<ul {id} class={className} {...props} class:wraps>
     {#each buttons as button}
         <li>
             {#if Array.isArray(button)}
-                <svelte:self buttons={button} />
+                <svelte:self buttons={button} {wraps} />
             {:else}
                 <svelte:component this={button.component} {...button} />
             {/if}

ts/editor-toolbar/EditorToolbar.svelte

@@ -29,6 +29,7 @@
 
     export let nightMode: boolean;
     export let size: number = 30;
+    export let wraps: boolean = true;
 
     setContext(nightModeKey, nightMode);
     setContext(disabledKey, disabled);
@@ -65,6 +66,6 @@
     </div>
 
     <nav>
-        <ButtonGroup buttons={_buttons} />
+        <ButtonGroup buttons={_buttons} {wraps} />
     </nav>
 </div>

ts/sveltelib/dynamicComponent.ts

@@ -6,12 +6,16 @@ export interface DynamicSvelteComponent<
     component: T;
 }
 
-export const dynamicComponent = <Comp extends typeof SvelteComponentDev>(component: Comp) => <
+export const dynamicComponent = <Comp extends typeof SvelteComponentDev>(
+    component: Comp
+) => <
     Props extends NonNullable<ConstructorParameters<Comp>[0]["props"]>,
     Lazy extends string = never
 >(
     props: Omit<Props, Lazy>,
-    lazyProps: { [Property in keyof Pick<Props, Lazy>]: () => Pick<Props, Lazy>[Property] }
+    lazyProps: {
+        [Property in keyof Pick<Props, Lazy>]: () => Pick<Props, Lazy>[Property];
+    }
 ): DynamicSvelteComponent<Comp> & Props => {
     const dynamicComponent = { component, ...props };