From 59884df70b6022ed0a1701a45a0e458e619e6357 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 17:26:30 +0200
Subject: [PATCH] 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   | 11 +++++++----
 ts/editor-toolbar/EditorToolbar.svelte |  3 ++-
 ts/sveltelib/dynamicComponent.ts       |  8 ++++++--
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 4c242f403..aa2f7f743 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/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}
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 7bc13d7e6..e648cd087 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/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>
diff --git a/ts/sveltelib/dynamicComponent.ts b/ts/sveltelib/dynamicComponent.ts
index 90f21a277..e3ac9c34f 100644
--- a/ts/sveltelib/dynamicComponent.ts
+++ b/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 };