Add ability to cache user color choices based on config

src/index.js

@@ -4,6 +4,7 @@
 const Picker = require('./picker');
 const { markerIcon, textIcon } = require('./icons');
 const { getDefaultColorCache, handleCSSVariables } = require('./picker/utils/main');
+const {getColorsFromLocalStorage} = require("./localStorageService");
 require('./index.css').toString();
 
 /**
@@ -110,7 +111,9 @@ class Color {
         },
         hasCustomPicker: this.hasCustomPicker,
         defaultColor: this.config.defaultColor,
-        colorCollections: this.config.colorCollections,
+        allowUserCachedColors: this.config.allowUserCachedColors ?? false,
+        numberOfUserCachedColors: this.config.numberOfUserCachedColors ?? 0,
+        colorCollections: this.config.allowUserCachedColors ? (this.config.colorCollections ?? []).concat(getColorsFromLocalStorage()) : this.config.colorCollections,
         type: this.pluginType
       });
     }

src/localStorageService/index.js

@@ -0,0 +1,36 @@
+const localStorageFontKey = 'editorFontColor';
+
+/**
+ *
+ * @returns {string[]}
+ * Get list of colors stored in local storage
+ */
+export const getColorsFromLocalStorage = () => {
+    const colorsAsString = localStorage.getItem(localStorageFontKey);
+    try {
+        if (colorsAsString) {
+            return JSON.parse(colorsAsString);
+        }
+        return [];
+    } catch (e) {
+        return [];
+    }
+}
+
+/**
+ *
+ * @param color {string}
+ * @param maxCacheSize {number}
+ * Save the color to local storage array of saved colours.
+ * We only store up to 10 entries at a time
+ */
+export const setColorInLocalStorage = (color, maxCacheSize) => {
+    const currentLocalStorageColors = getColorsFromLocalStorage();
+    if (currentLocalStorageColors.length === maxCacheSize) {
+        currentLocalStorageColors.pop();
+    }
+    if (!currentLocalStorageColors.includes(color)) {
+        currentLocalStorageColors.unshift(color);
+    }
+    localStorage.setItem(localStorageFontKey, JSON.stringify(currentLocalStorageColors));
+}

src/picker/index.js

@@ -9,6 +9,7 @@ import {
     CONVERTER_BTN,
     CONVERTER_PANEL,
 } from './utils/main';
+import {setColorInLocalStorage} from "../localStorageService";
 const ColorCollections = ['#ff1300','#EC7878','#9C27B0','#673AB7','#3F51B5','#0070FF','#03A9F4','#00BCD4','#4CAF50','#8BC34A','#CDDC39','#FFE500','#FFBF00','#FF9800','#795548','#9E9E9E','#5A5A5A','#FFF'];
 class ColorPlugin extends HTMLElement {
 
@@ -23,7 +24,8 @@ class ColorPlugin extends HTMLElement {
         this.pluginType = options.type;
         this.hasCustomPicker = options.hasCustomPicker;
         this.customColor = getCustomColorCache(this.pluginType);
-
+        this.allowUserCachedColors = options.allowUserCachedColors
+        this.numberOfUserCachedColors = options.numberOfUserCachedColors
         shadowRoot.innerHTML = `
         <style>
         :host{
@@ -238,6 +240,9 @@ class ColorPlugin extends HTMLElement {
                 isCustomPickerPseudoClick = true;
                 customPicker.click();
             }, 30))
+            pickerInput.addEventListener('change', (ev) => {
+                setColorInLocalStorage(ev.target.value, this.numberOfUserCachedColors)
+            })
             document.body.appendChild(pickerInput);
             setTimeout(() => {
                 pickerInput.focus();