Add color.ts for foreground color and color picker

ts/editor-toolbar/BUILD.bazel

@@ -3,6 +3,7 @@ load("//ts/svelte:svelte.bzl", "compile_svelte", "svelte_check")
 load("//ts:prettier.bzl", "prettier_test")
 load("//ts:eslint.bzl", "eslint_test")
 load("//ts:esbuild.bzl", "esbuild")
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 load("//ts:vendor.bzl", "copy_bootstrap_icons", "copy_mdi_icons")
 
 svelte_files = glob(["*.svelte"])
@@ -14,6 +15,12 @@ compile_svelte(
     srcs = svelte_files,
 )
 
+sass_binary(
+    name = "color_css",
+    src = "color.scss",
+    visibility = ["//visibility:public"],
+)
+
 ts_library(
     name = "index",
     srcs = ["index.ts"],
@@ -35,6 +42,7 @@ ts_library(
     deps = [
         "//ts/lib",
         "//ts/lib:backend_proto",
+        "//ts:image_module_support",
         "@npm//svelte",
     ],
 )
@@ -86,6 +94,7 @@ esbuild(
         "//ts:image_module_support",
         "bootstrap-icons",
         "mdi-icons",
+        ":color_css",
     ] + svelte_names,
 )
 

ts/editor-toolbar/ButtonBar.svelte

@@ -5,4 +5,6 @@
     }
 </style>
 
-<ul><slot/></ul>
+<ul>
+    <slot />
+</ul>

ts/editor-toolbar/ButtonBarOuter.svelte

@@ -14,4 +14,6 @@
     }
 </style>
 
-<div><slot /></div>
+<div>
+    <slot />
+</div>

ts/editor-toolbar/ButtonItem.svelte

@@ -4,4 +4,6 @@
     }
 </style>
 
-<li><slot/></li>
+<li>
+    <slot />
+</li>

ts/editor-toolbar/ColorPicker.svelte

@@ -0,0 +1,25 @@
+<script lang="typescript">
+    import ButtonItem from "./ButtonItem.svelte";
+
+    export let className: string;
+    export let onChange: (event: ChangeEvent) => void;
+</script>
+
+<style lang="scss">
+    span {
+        display: inline-block;
+        width: 28px;
+        height: 28px;
+        vertical-align: -webkit-baseline-middle;
+    }
+
+    input {
+        opacity: 0;
+        width: 100%;
+        height: 100%;
+    }
+</style>
+
+<ButtonItem>
+    <span class={className}> <input type="color" on:change={onChange} /> </span>
+</ButtonItem>

ts/editor-toolbar/EditorToolbar.svelte

@@ -14,11 +14,12 @@
     import bracketsIcon from "./code-brackets.svg";
 
     import eraserIcon from "./eraser.svg";
-    import squareFillIcon from "./square-fill.svg";
     import paperclipIcon from "./paperclip.svg";
     import micIcon from "./mic.svg";
     import threeDotsIcon from "./three-dots.svg";
 
+    import { forecolorButton, colorpickerButton } from "./color";
+
     export let leftButtons = [
         { component: LabelButton, label: "Fields..." },
         { component: LabelButton, label: "Cards..." },
@@ -33,8 +34,9 @@
         { component: IconButton, icon: subscriptIcon },
 
         { component: IconButton, icon: eraserIcon },
-        { component: IconButton, icon: squareFillIcon },
+
-        { component: IconButton, icon: squareFillIcon },
+        forecolorButton,
+        colorpickerButton,
 
         { component: IconButton, icon: bracketsIcon },
         { component: IconButton, icon: paperclipIcon },

ts/editor-toolbar/IconButton.svelte

@@ -3,6 +3,7 @@
 
     export let className: string;
     export let icon: string;
+    export let onClick: (event: ClickEvent) => void;
 </script>
 
 <style lang="scss">
@@ -12,7 +13,9 @@
         height: 28px;
         vertical-align: -webkit-baseline-middle;
 
-        & > :global(svg) {
+        & > :global(svg),
+        & > :global(img) {
+            vertical-align: unset;
             width: 100%;
             height: 100%;
         }
@@ -20,5 +23,9 @@
 </style>
 
 <ButtonItem>
-    <span class={className}>{@html icon}</span>
+    <span class={className} on:click={onClick} on:mousedown|preventDefault>
+        {#if icon}
+            {@html icon}
+        {/if}
+    </span>
 </ButtonItem>

ts/editor-toolbar/LabelButton.svelte

@@ -7,17 +7,15 @@
 <style lang="scss">
     button {
         padding: 3px 10px;
-        vertical-align: -.425em;
+        vertical-align: -0.425em;
         margin-right: 3px;
 
         &:focus {
-            box-shadow: 0 0 0 .05rem rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 0 0.05rem rgba(255, 255, 255, 0.5);
         }
     }
 </style>
 
 <ButtonItem>
-    <button type="button" class="btn btn-secondary" on:click>
+    <button type="button" class="btn btn-secondary" on:click> {label} </button>
-        {label}
-    </button>
 </ButtonItem>

ts/editor-toolbar/_buttons.scss

@@ -1,14 +1,3 @@
-.rainbow {
-    background-image: -webkit-gradient(
-        linear,
-        left top,
-        left bottom,
-        color-stop(0, #f77),
-        color-stop(50%, #7f7),
-        color-stop(100%, #77f)
-    );
-}
-
 button.linkb {
     -webkit-appearance: none;
     margin-bottom: -3px;

ts/editor-toolbar/color.scss

@@ -0,0 +1,17 @@
+:root {
+    --foreground-color: black;
+}
+
+.forecolor {
+    color: var(--foreground-color);
+}
+
+.rainbow {
+    background: linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
+        linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
+        linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
+
+    background-clip: content-box;
+    /* Boostrap .rounded has .25rem */
+    border-radius: 0.375rem;
+}

ts/editor-toolbar/color.ts

@@ -0,0 +1,31 @@
+import IconButton from "./IconButton.svelte";
+import ColorPicker from "./ColorPicker.svelte";
+import squareFillIcon from "./square-fill.svg";
+import "./color.css";
+
+const foregroundColorKeyword = "--foreground-color";
+
+function setForegroundColor(color: string): void {
+    document.documentElement.style.setProperty(foregroundColorKeyword, color);
+}
+
+function getForecolor(): string {
+    return document.documentElement.style.getPropertyValue(foregroundColorKeyword);
+}
+
+function wrapWithForecolor(color: string): void {
+    document.execCommand("forecolor", false, color);
+}
+
+export const forecolorButton = {
+    component: IconButton,
+    icon: squareFillIcon,
+    className: "forecolor p-1",
+    onClick: () => wrapWithForecolor(getForecolor()),
+};
+
+export const colorpickerButton = {
+    component: ColorPicker,
+    className: "rainbow p-1",
+    onChange: ({ currentTarget }) => setForegroundColor(currentTarget.value),
+};