diff --git a/src/components/rgb/Input.tsx b/src/components/rgb/Input.tsx
index 63ecd8ce..1c59255d 100644
--- a/src/components/rgb/Input.tsx
+++ b/src/components/rgb/Input.tsx
@@ -136,7 +136,10 @@ export default component$(({ readOnly }: {
         'font-mc-bold-italic': rgbStore.bold && rgbStore.italic,
         [`${rgbStore.format.class}`]: rgbStore.format.class,
       }}>
-        <p class="lum-bg-lum-input-bg/50 rounded-lum lum-btn-p-2 w-full h-full pointer-events-none whitespace-pre-wrap!">
+        <p contentEditable={readOnly ? 'false' : 'true'} class="lum-bg-lum-input-bg/50 rounded-lum lum-btn-p-2 w-full h-full whitespace-pre-wrap!"
+          onInput$={(e, el) => {
+            rgbStore.text = el.textContent || '';
+          }}>
           <Slot />
         </p>
         <textarea readOnly={readOnly} class="absolute top-0 lum-input lum-btn-p-2 resize-none w-full h-full whitespace-pre-wrap! caret-white text-transparent lum-bg-transparent hover:text-transparent hover:lum-bg-transparent hover:backdrop-brightness-150" id="input"