Implement WithColorHelper.svelte

ts/editor/ColorButtons.svelte

@@ -8,10 +8,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ButtonGroup from "components/ButtonGroup.svelte";
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
     import IconButton from "components/IconButton.svelte";
-    import ColorPicker from "components/ColorPicker.svelte";
     import WithShortcut from "components/WithShortcut.svelte";
+    import WithColorHelper from "./WithColorHelper.svelte";
 
-    import { squareFillIcon } from "./icons";
+    import { textColorIcon, highlightColorIcon } from "./icons";
     import { appendInParentheses } from "./helpers";
 
     import "./color.css";
@@ -25,16 +25,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         document.documentElement.style.setProperty(foregroundColorKeyword, color);
     }
 
-    function wrapWithForecolor(): void {
+    const wrapWithForecolor = (color: string) => () => {
         document.execCommand("forecolor", false, color);
     }
 
+    const wrapWithBackcolor = (color: string) => () => {
+        document.execCommand("backcolor", false, color);
+    }
+
     function setWithCurrentColor({ currentTarget }: Event): void {
         color = (currentTarget as HTMLInputElement).value;
     }
 </script>
 
 <ButtonGroup {api}>
+    <!--
     <ButtonGroupItem>
         <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
             <IconButton
@@ -60,4 +65,41 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             />
         </WithShortcut>
     </ButtonGroupItem>
+    -->
+
+    <WithColorHelper let:colorHelperIcon let:color>
+        <ButtonGroupItem>
+            <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
+                <IconButton
+                    tooltip={appendInParentheses(
+                        tr.editingSetForegroundColor(),
+                        shortcutLabel
+                    )}
+                    on:click={wrapWithForecolor(color)}
+                    on:mount={createShortcut}
+                >
+                    {@html textColorIcon}
+                    {@html colorHelperIcon}
+                </IconButton>
+            </WithShortcut>
+        </ButtonGroupItem>
+    </WithColorHelper>
+
+    <WithColorHelper let:colorHelperIcon let:color>
+        <ButtonGroupItem>
+            <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
+                <IconButton
+                    tooltip={appendInParentheses(
+                        tr.editingSetForegroundColor(),
+                        shortcutLabel
+                    )}
+                    on:click={wrapWithBackcolor(color)}
+                    on:mount={createShortcut}
+                >
+                    {@html highlightColorIcon}
+                    {@html colorHelperIcon}
+                </IconButton>
+            </WithShortcut>
+        </ButtonGroupItem>
+    </WithColorHelper>
 </ButtonGroup>

ts/editor/TemplateButtons.svelte

@@ -42,6 +42,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     tr.editingAttachPicturesaudiovideo(),
                     shortcutLabel
                 )}
+                iconSize={70}
                 on:click={onAttachment}
                 on:mount={createShortcut}
             >
@@ -54,6 +55,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithShortcut shortcut={"F5"} let:createShortcut let:shortcutLabel>
             <IconButton
                 tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)}
+                iconSize={70}
                 on:click={onRecord}
                 on:mount={createShortcut}
             >
@@ -164,6 +166,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithShortcut shortcut={"Control+Shift+X"} let:createShortcut let:shortcutLabel>
             <IconButton
                 tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)}
+                iconSize={70}
                 on:click={onHtmlEdit}
                 on:mount={createShortcut}
             >

ts/editor/WithColorHelper.svelte

@@ -0,0 +1,23 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+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";
+
+    function setColor(newColor: string): void {
+        color = newColor;
+    }
+</script>
+
+<div style={`--color-helper-color: ${color}`}>
+    <slot {colorHelperIcon} {color} {setColor} />
+</div>
+
+<style lang="scss">
+    div :global(#mdi-color-helper) {
+        fill: var(--color-helper-color);
+    }
+</style>

ts/editor/icons.ts

@@ -23,7 +23,7 @@ export { default as outdentIcon } from "./text-indent-right.svg";
 export { default as squareFillIcon } from "./square-fill.svg";
 export { default as textColorIcon } from "./format-color-text.svg";
 export { default as highlightColorIcon } from "./format-color-highlight.svg";
-export { default as colorHelper } from "./color-helper.svg";
+export { default as colorHelperIcon } from "./color-helper.svg";
 
 export { default as paperclipIcon } from "./paperclip.svg";
 export { default as micIcon } from "./mic.svg";