Replace the old color with the picked color

.changes/color-picker.md

@@ -0,0 +1,5 @@
+---
+"obsidian-css-inlay-colors": major:feat
+---
+
+Add a color picker in live preview mode

README.md

@@ -10,13 +10,7 @@ To use, just put any valid CSS color syntax in a code block like so: \`#8A5CF5\`
 
 <img src="example.jpg" alt="Example of the extension running for all CSS color formats" width="200">
 
-## Todo
-
-This plugin is still in alpha. Before v1.0.0 is released I want to finish the following features:
-
-- [x] Show colors in reading mode
-- [x] Show colors in live preview mode
-- [ ] Edit colors with a color picker in live preview mode
+Enable the color picker setting to change a color using a color picker in live preview mode. Note that the color picker does not support opacity, and will only let you select from sRGB colors. It will attempt to preserve the existing format you have written, as well as any existing opacity.
 
 ## Development
 

src/live.ts

@@ -41,6 +41,7 @@ class CSSColorInlayWidget extends WidgetType {
     readonly text: string,
     readonly color: Color,
     readonly colorPickerEnabled: boolean,
+    readonly view: EditorView,
   ) {
     super()
   }
@@ -60,10 +61,14 @@ class CSSColorInlayWidget extends WidgetType {
       input.value = formatHex(this.color)
       input.addEventListener('change', (e) => {
         if (!(e.currentTarget instanceof HTMLInputElement)) return
-        console.log(
-          'result',
-          formatColor(this.text, this.color, e.currentTarget.value),
-        )
+        const pos = this.view.posAtDOM(wrapper)
+        this.view.dispatch({
+          changes: {
+            from: pos,
+            to: pos + this.text.length,
+            insert: formatColor(this.text, this.color, e.currentTarget.value),
+          },
+        })
       })
       inlay.append(input)
     }
@@ -102,7 +107,12 @@ const createColorWidgets = (view: EditorView, colorPickerEnabled: boolean) => {
 
           const deco = Decoration.widget({
             side: 1,
-            widget: new CSSColorInlayWidget(text, color, colorPickerEnabled),
+            widget: new CSSColorInlayWidget(
+              text,
+              color,
+              colorPickerEnabled,
+              view,
+            ),
           })
 
           widgets.push(deco.range(node.from))