From d3e1bfa841876b6e6f0b766aa226038d3c8965c0 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 18:13:50 +0200
Subject: [PATCH] Pass wraps more similiar to how size is passed via CSS
 variables

---
 ts/editor-toolbar/ButtonGroup.svelte   | 10 +++-------
 ts/editor-toolbar/EditorToolbar.svelte |  4 ++--
 ts/editor-toolbar/index.ts             |  1 -
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index aa2f7f743..a01639fc4 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -6,12 +6,12 @@
     export let props: Record<string, string> = {};
 
     export let buttons: Buttons;
-    export let wraps: boolean;
 </script>
 
 <style lang="scss">
     ul {
         display: flex;
+        flex-wrap: var(--toolbar-wrap);
         overflow-y: auto;
 
         padding-inline-start: 0;
@@ -23,10 +23,6 @@
         }
     }
 
-    .wraps {
-        flex-flow: wrap;
-    }
-
     li {
         display: inline-block;
         margin-bottom: calc(var(--toolbar-size) / 15);
@@ -54,11 +50,11 @@
     }
 </style>
 
-<ul {id} class={className} {...props} class:wraps>
+<ul {id} class={className} {...props}>
     {#each buttons as button}
         <li>
             {#if Array.isArray(button)}
-                <svelte:self buttons={button} {wraps} />
+                <svelte:self buttons={button} />
             {:else}
                 <svelte:component this={button.component} {...button} />
             {/if}
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index e648cd087..ead8912f9 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -58,7 +58,7 @@
     }
 </style>
 
-<div style={`--toolbar-size: ${size}px`}>
+<div style={`--toolbar-size: ${size}px; --toolbar-wrap: ${wraps ? "wrap" : "nowrap"}`}>
     <div>
         {#each _menus as menu}
             <svelte:component this={menu.component} {...menu} />
@@ -66,6 +66,6 @@
     </div>
 
     <nav>
-        <ButtonGroup buttons={_buttons} {wraps} />
+        <ButtonGroup buttons={_buttons} />
     </nav>
 </div>
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 1dfeeba47..8fec39b42 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -26,7 +26,6 @@ class EditorToolbar extends HTMLElement {
 
     connectedCallback(): void {
         setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
-            console.log(this.buttons);
             this.component = new EditorToolbarSvelte({
                 target: this,
                 props: {