From 29d40fd4ab3c1d65163680a619d0ecc2fffeb938 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 19 Jun 2021 16:26:30 +0200
Subject: [PATCH 1/2] Make Color Pickers also format with colors

---
 ts/editor/ColorButtons.svelte    | 28 ++++++++++++++++++++++------
 ts/editor/WithColorHelper.svelte |  8 ++++----
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/ts/editor/ColorButtons.svelte b/ts/editor/ColorButtons.svelte
index eac0cad46..cdb8f72f7 100644
--- a/ts/editor/ColorButtons.svelte
+++ b/ts/editor/ColorButtons.svelte
@@ -25,10 +25,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const wrapWithBackcolor = (color: string) => () => {
         document.execCommand("backcolor", false, color);
     };
+
+    const initialColor = "black";
+
+    let forecolorWrap = wrapWithForecolor(initialColor);
+    let backcolorWrap = wrapWithForecolor(initialColor);
 </script>
 
 <ButtonGroup {api}>
-    <WithColorHelper let:colorHelperIcon let:color let:setColor>
+    <WithColorHelper color={initialColor} let:colorHelperIcon let:setColor>
         <OnlyEditable let:disabled>
             <ButtonGroupItem>
                 <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
@@ -38,7 +43,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             shortcutLabel
                         )}
                         {disabled}
-                        on:click={wrapWithForecolor(color)}
+                        on:click={forecolorWrap}
                         on:mount={createShortcut}
                     >
                         {@html textColorIcon}
@@ -58,17 +63,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         widthMultiplier={0.5}
                     >
                         {@html arrowIcon}
-                        <ColorPicker on:change={setColor} on:mount={createShortcut} />
+                        <ColorPicker
+                            on:change={(event) => {
+                                forecolorWrap = wrapWithForecolor(setColor(event));
+                                forecolorWrap();
+                            }}
+                            on:mount={createShortcut}
+                        />
                     </IconButton>
                 </WithShortcut>
             </ButtonGroupItem>
         </OnlyEditable>
     </WithColorHelper>
 
-    <WithColorHelper let:colorHelperIcon let:color let:setColor>
+    <WithColorHelper color={initialColor} let:colorHelperIcon let:setColor>
         <OnlyEditable let:disabled>
             <ButtonGroupItem>
-                <IconButton on:click={wrapWithBackcolor(color)} {disabled}>
+                <IconButton on:click={backcolorWrap} {disabled}>
                     {@html highlightColorIcon}
                     {@html colorHelperIcon}
                 </IconButton>
@@ -81,7 +92,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     {disabled}
                 >
                     {@html arrowIcon}
-                    <ColorPicker on:change={setColor} />
+                    <ColorPicker
+                        on:change={(event) => {
+                            backcolorWrap = wrapWithBackcolor(setColor(event));
+                            backcolorWrap();
+                        }}
+                    />
                 </IconButton>
             </ButtonGroupItem>
         </OnlyEditable>
diff --git a/ts/editor/WithColorHelper.svelte b/ts/editor/WithColorHelper.svelte
index 77c5ee9e6..f991978ab 100644
--- a/ts/editor/WithColorHelper.svelte
+++ b/ts/editor/WithColorHelper.svelte
@@ -5,15 +5,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import { colorHelperIcon } from "./icons";
 
-    export let color = "black";
+    export let color;
 
-    function setColor({ currentTarget }: Event): void {
-        color = (currentTarget! as HTMLInputElement).value;
+    function setColor({ currentTarget }: Event): string {
+        return (color = (currentTarget! as HTMLInputElement).value);
     }
 </script>
 
 <div style={`--color-helper-color: ${color}`}>
-    <slot {colorHelperIcon} {color} {setColor} />
+    <slot {colorHelperIcon} {setColor} />
 </div>
 
 <style lang="scss">

From 05fa7daa97db9ffb14409cf6b385f447e38c16fe Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 19 Jun 2021 16:31:35 +0200
Subject: [PATCH 2/2] Add type hint in WithColorHelper

---
 ts/editor/WithColorHelper.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ts/editor/WithColorHelper.svelte b/ts/editor/WithColorHelper.svelte
index f991978ab..74612bf9d 100644
--- a/ts/editor/WithColorHelper.svelte
+++ b/ts/editor/WithColorHelper.svelte
@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import { colorHelperIcon } from "./icons";
 
-    export let color;
+    export let color: string;
 
     function setColor({ currentTarget }: Event): string {
         return (color = (currentTarget! as HTMLInputElement).value);