From 1db3b33ff2cd94cf8cb3b960a7af48c076c676a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kacper=20=C5=BB=C3=B3=C5=82kiewski?=
 <kacper.zolkiewski@swmansion.com>
Date: Mon, 22 Jun 2026 13:40:33 +0200
Subject: [PATCH 1/6] feat(web): custom style

---
 apps/example-web/src/components/Toolbar.css |  62 ++++++++
 apps/example-web/src/components/Toolbar.tsx | 165 ++++++++++++++++++--
 src/web/EnrichedTextInput.tsx               |  24 ++-
 src/web/formats/EnrichedCustomStyle.ts      |  94 +++++++++++
 src/web/normalization/htmlNormalizer.ts     |  23 ++-
 src/web/useOnChangeState.ts                 |  30 ++--
 6 files changed, 368 insertions(+), 30 deletions(-)
 create mode 100644 src/web/formats/EnrichedCustomStyle.ts

diff --git a/apps/example-web/src/components/Toolbar.css b/apps/example-web/src/components/Toolbar.css
index 7b86fb8d..2186d24d 100644
--- a/apps/example-web/src/components/Toolbar.css
+++ b/apps/example-web/src/components/Toolbar.css
@@ -77,3 +77,65 @@
 .toolbar-btn:focus-visible {
   outline: none;
 }
+
+.toolbar-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.toolbar-color-btn {
+  flex-direction: column;
+  gap: 2px;
+}
+
+.toolbar-color-label {
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1;
+  color: #fff;
+}
+
+.toolbar-color-indicator {
+  display: block;
+  width: 20px;
+  height: 5px;
+  border-radius: 2px;
+  border: 1px solid;
+}
+
+.toolbar-color-picker {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 8px;
+  gap: 6px;
+  background: rgba(0, 26, 114, 0.95);
+}
+
+.toolbar-color-swatch {
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.toolbar-color-swatch--clear {
+  background: transparent;
+  color: #fff;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.toolbar-color-swatch--active {
+  border-color: #fff;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
+}
+
+.toolbar-color-swatch:focus-visible {
+  outline: none;
+}
diff --git a/apps/example-web/src/components/Toolbar.tsx b/apps/example-web/src/components/Toolbar.tsx
index 42241fae..ae8d6a42 100644
--- a/apps/example-web/src/components/Toolbar.tsx
+++ b/apps/example-web/src/components/Toolbar.tsx
@@ -3,9 +3,29 @@ import type {
   EnrichedTextInputInstance,
   OnChangeStateEvent,
 } from 'react-native-enriched-html';
-import type { RefObject } from 'react';
+import { useState, type RefObject } from 'react';
 import { useDragScroll } from '../hooks/useDragScroll';
 
+const COLORS = [
+  'red',
+  '#808080',
+  '#FF0000',
+  '#FF6600',
+  '#FFFF00',
+  '#00FF00',
+  '#008000',
+  '#00FFFF',
+  '#0000FF',
+  '#800080',
+  '#FF00FF',
+  '#FF69B4',
+  '#A52A2A',
+  '#FFA500',
+  '#ADD8E6',
+];
+
+type OpenPicker = 'text-color' | 'bg-color' | null;
+
 interface ToolbarProps {
   editorRef: RefObject<EnrichedTextInputInstance | null>;
   state: OnChangeStateEvent | null;
@@ -61,6 +81,27 @@ export function Toolbar({
 }: ToolbarProps) {
   const s = state;
   const dragScroll = useDragScroll();
+  const [openPicker, setOpenPicker] = useState<OpenPicker>(null);
+
+  const activeFgColor = s?.customStyle.foregroundColor ?? '';
+  const activeBgColor = s?.customStyle.backgroundColor ?? '';
+
+  const handleSelectFgColor = (color: string) => {
+    editorRef.current?.setStyle({ foregroundColor: color });
+    setOpenPicker(null);
+  };
+  const handleClearFgColor = () => {
+    editorRef.current?.setStyle({ foregroundColor: null });
+    setOpenPicker(null);
+  };
+  const handleSelectBgColor = (color: string) => {
+    editorRef.current?.setStyle({ backgroundColor: color });
+    setOpenPicker(null);
+  };
+  const handleClearBgColor = () => {
+    editorRef.current?.setStyle({ backgroundColor: null });
+    setOpenPicker(null);
+  };
 
   const toolbarItems = [
     {
@@ -203,23 +244,115 @@ export function Toolbar({
   }[];
 
   return (
-    <div className="toolbar">
-      <div className="toolbar-controls" {...dragScroll}>
-        {toolbarItems.map((item) => (
-          <ToolbarButton
-            key={item.key}
-            label={item.label}
-            testId={`toolbar-button-${item.key}`}
-            isActive={s?.[item.key].isActive ?? false}
-            isDisabled={s?.[item.key].isBlocking ?? false}
-            variant={item.variant}
-            onPress={() => {
-              item.onPress(editorRef.current);
+    <div className="toolbar-wrapper">
+      <div className="toolbar">
+        <div className="toolbar-controls" {...dragScroll}>
+          {toolbarItems.map((item) => (
+            <ToolbarButton
+              key={item.key}
+              label={item.label}
+              testId={`toolbar-button-${item.key}`}
+              isActive={s?.[item.key].isActive ?? false}
+              isDisabled={s?.[item.key].isBlocking ?? false}
+              variant={item.variant}
+              onPress={() => {
+                item.onPress(editorRef.current);
+              }}
+            />
+          ))}
+          <button
+            type="button"
+            data-testid="toolbar-text-color"
+            className={`toolbar-btn toolbar-color-btn${openPicker === 'text-color' ? ' toolbar-btn--active' : ''}`}
+            onPointerDown={(e) => {
+              if (e.pointerType === 'mouse') e.preventDefault();
+            }}
+            onClick={() => {
+              setOpenPicker((prev) =>
+                prev === 'text-color' ? null : 'text-color'
+              );
             }}
-          />
-        ))}
+          >
+            <span className="toolbar-color-label">A</span>
+            <span
+              className="toolbar-color-indicator"
+              style={{
+                backgroundColor:
+                  activeFgColor.length > 0 ? activeFgColor : 'transparent',
+                borderColor:
+                  activeFgColor.length > 0
+                    ? activeFgColor
+                    : 'rgba(255,255,255,0.4)',
+              }}
+            />
+          </button>
+          <button
+            type="button"
+            data-testid="toolbar-bg-color"
+            className={`toolbar-btn toolbar-color-btn${openPicker === 'bg-color' ? ' toolbar-btn--active' : ''}`}
+            onPointerDown={(e) => {
+              if (e.pointerType === 'mouse') e.preventDefault();
+            }}
+            onClick={() => {
+              setOpenPicker((prev) =>
+                prev === 'bg-color' ? null : 'bg-color'
+              );
+            }}
+          >
+            <span className="toolbar-color-label">BG</span>
+            <span
+              className="toolbar-color-indicator"
+              style={{
+                backgroundColor:
+                  activeBgColor.length > 0 ? activeBgColor : 'transparent',
+                borderColor:
+                  activeBgColor.length > 0
+                    ? activeBgColor
+                    : 'rgba(255,255,255,0.4)',
+              }}
+            />
+          </button>
+        </div>
+        <div className="toolbar-fill" aria-hidden="true" />
       </div>
-      <div className="toolbar-fill" aria-hidden="true" />
+      {openPicker !== null && (
+        <div className="toolbar-color-picker">
+          <button
+            type="button"
+            className="toolbar-color-swatch toolbar-color-swatch--clear"
+            onPointerDown={(e) => {
+              if (e.pointerType === 'mouse') e.preventDefault();
+            }}
+            onClick={() => {
+              if (openPicker === 'text-color') handleClearFgColor();
+              else handleClearBgColor();
+            }}
+          >
+            ✕
+          </button>
+          {COLORS.map((color) => {
+            const isActive =
+              openPicker === 'text-color'
+                ? activeFgColor.toLowerCase() === color.toLowerCase()
+                : activeBgColor.toLowerCase() === color.toLowerCase();
+            return (
+              <button
+                key={color}
+                type="button"
+                className={`toolbar-color-swatch${isActive ? ' toolbar-color-swatch--active' : ''}`}
+                style={{ backgroundColor: color }}
+                onPointerDown={(e) => {
+                  if (e.pointerType === 'mouse') e.preventDefault();
+                }}
+                onClick={() => {
+                  if (openPicker === 'text-color') handleSelectFgColor(color);
+                  else handleSelectBgColor(color);
+                }}
+              />
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/web/EnrichedTextInput.tsx b/src/web/EnrichedTextInput.tsx
index 384459cc..84b65de3 100644
--- a/src/web/EnrichedTextInput.tsx
+++ b/src/web/EnrichedTextInput.tsx
@@ -60,6 +60,7 @@ import { EnrichedUnorderedList } from './formats/EnrichedUnorderedList';
 import { EnrichedOrderedList } from './formats/EnrichedOrderedList';
 import { EnrichedCheckboxItem } from './formats/EnrichedCheckboxItem';
 import { EnrichedCheckboxList } from './formats/EnrichedCheckboxList';
+import { EnrichedCustomStyle } from './formats/EnrichedCustomStyle';
 import { StripBoldInStyledHeadingsPlugin } from './pmPlugins/StripBoldInStyledHeadingsPlugin';
 import { StrictMarksPlugin } from './pmPlugins/StrictMarksPlugin';
 import { MergeAdjacentSameKindBlocksPlugin } from './pmPlugins/MergeAdjacentSameKindBlocksPlugin';
@@ -215,6 +216,7 @@ export const EnrichedTextInput = ({
       EnrichedUnorderedList,
       EnrichedOrderedList,
       EnrichedCheckboxList,
+      EnrichedCustomStyle,
       StripMarksInCodeBlockPlugin,
       StripMarksOnImagePlugin,
       StripBoldInStyledHeadingsPlugin.configure({
@@ -368,7 +370,27 @@ export const EnrichedTextInput = ({
       measureLayout: () => {},
       setNativeProps: () => {},
       setTextAlignment: () => {},
-      setStyle: () => {},
+      setStyle: (customStyle) => {
+        const current = editor.getAttributes('customStyle');
+
+        const resolvedColor =
+          'foregroundColor' in customStyle
+            ? (customStyle.foregroundColor ?? null)
+            : current.foregroundColor;
+        const resolvedBg =
+          'backgroundColor' in customStyle
+            ? (customStyle.backgroundColor ?? null)
+            : (current.backgroundColor ?? null);
+
+        if (!resolvedColor && !resolvedBg) {
+          editor.commands.unsetCustomStyle();
+        } else {
+          editor.commands.setCustomStyle({
+            foregroundColor: resolvedColor,
+            backgroundColor: resolvedBg,
+          });
+        }
+      },
     }),
     [editor]
   );
diff --git a/src/web/formats/EnrichedCustomStyle.ts b/src/web/formats/EnrichedCustomStyle.ts
new file mode 100644
index 00000000..7602111b
--- /dev/null
+++ b/src/web/formats/EnrichedCustomStyle.ts
@@ -0,0 +1,94 @@
+import { Mark } from '@tiptap/core';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    customStyle: {
+      setCustomStyle: (attrs: {
+        foregroundColor?: string | null;
+        backgroundColor?: string | null;
+      }) => ReturnType;
+      unsetCustomStyle: () => ReturnType;
+    };
+  }
+}
+
+export const EnrichedCustomStyle = Mark.create({
+  name: 'customStyle',
+
+  // Priority must be higher than inline marks (code: 1000, mention: 1000) so
+  // the inline marks will override the customStyle.
+  priority: 1001,
+
+  addAttributes() {
+    return {
+      foregroundColor: {
+        default: null,
+        parseHTML: (el: HTMLElement) => el.style.color || null,
+      },
+      backgroundColor: {
+        default: null,
+        parseHTML: (el: HTMLElement) => el.style.backgroundColor || null,
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'span',
+        getAttrs: (el: HTMLElement) => {
+          if (!el.style.color && !el.style.backgroundColor) {
+            return false;
+          }
+          // let addAttributes handle the actual parsing
+          return null;
+        },
+      },
+    ];
+  },
+
+  renderHTML({ mark }) {
+    const parts: string[] = [];
+    if (mark.attrs.foregroundColor) {
+      parts.push(`color: ${mark.attrs.foregroundColor}`);
+    }
+    if (mark.attrs.backgroundColor) {
+      parts.push(`background-color: ${mark.attrs.backgroundColor}`);
+    }
+    return ['span', { style: parts.join('; ') }, 0];
+  },
+
+  addCommands() {
+    return {
+      setCustomStyle:
+        (attrs) =>
+        ({ chain, editor }) => {
+          const current = editor.getAttributes('customStyle');
+          const resolvedColor =
+            'foregroundColor' in attrs
+              ? attrs.foregroundColor
+              : current.foregroundColor;
+          const resolvedBg =
+            'backgroundColor' in attrs
+              ? attrs.backgroundColor
+              : current.backgroundColor;
+
+          if (!resolvedColor && !resolvedBg) {
+            return chain().unsetMark('customStyle').run();
+          }
+
+          return chain()
+            .setMark('customStyle', {
+              foregroundColor: resolvedColor ?? null,
+              backgroundColor: resolvedBg ?? null,
+            })
+            .run();
+        },
+
+      unsetCustomStyle:
+        () =>
+        ({ chain }) =>
+          chain().unsetMark('customStyle').run(),
+    };
+  },
+});
diff --git a/src/web/normalization/htmlNormalizer.ts b/src/web/normalization/htmlNormalizer.ts
index be34e44f..de4d9838 100644
--- a/src/web/normalization/htmlNormalizer.ts
+++ b/src/web/normalization/htmlNormalizer.ts
@@ -500,10 +500,31 @@ function walkNode(node: Node, out: { buf: string }): void {
 
   // <span>: CSS style → inline tags
   if (name === 'span') {
-    const s = parseCssStyle(node.getAttribute('style'));
+    const rawStyle = node.getAttribute('style') || '';
+    const s = parseCssStyle(rawStyle);
+
+    const fg = findCssValue(rawStyle, 'color');
+    const bg = findCssValue(rawStyle, 'background-color');
+
+    // build the preserved span if colors exist
+    let spanOpen = '';
+    let spanClose = '';
+    const styleParts: string[] = [];
+
+    if (fg) styleParts.push(`color: ${fg}`);
+    if (bg) styleParts.push(`background-color: ${bg}`);
+
+    if (styleParts.length > 0) {
+      spanOpen = `<span style="${styleParts.join('; ')}">`;
+      spanClose = '</span>';
+    }
+
+    // output everything in the correct nested order
+    out.buf += spanOpen;
     out.buf += emitStylesOpen(s);
     walkChildren(node, out);
     out.buf += emitStylesClose(s);
+    out.buf += spanClose;
     return;
   }
 
diff --git a/src/web/useOnChangeState.ts b/src/web/useOnChangeState.ts
index 6f4fcb17..08b52eb7 100644
--- a/src/web/useOnChangeState.ts
+++ b/src/web/useOnChangeState.ts
@@ -99,24 +99,30 @@ function buildState(
     },
     alignment: 'left',
     customStyle: {
-      foregroundColor: '',
-      backgroundColor: '',
+      foregroundColor:
+        editor.getAttributes('customStyle').foregroundColor ?? '',
+      backgroundColor:
+        editor.getAttributes('customStyle').backgroundColor ?? '',
     },
   };
 }
 
 function hashState(state: OnChangeStateEvent): string {
-  return Object.values(state)
-    .map((formatState) =>
-      String(
-        getFormatHash(
-          formatState.isActive,
-          formatState.isConflicting,
-          formatState.isBlocking
-        )
-      )
-    )
+  const formatEntries = Object.entries(state).filter(
+    ([key]) => key !== 'alignment' && key !== 'customStyle'
+  );
+  const formatHash = formatEntries
+    .map(([, formatState]) => {
+      const s = formatState as {
+        isActive: boolean;
+        isConflicting: boolean;
+        isBlocking: boolean;
+      };
+      return String(getFormatHash(s.isActive, s.isConflicting, s.isBlocking));
+    })
     .join('');
+
+  return `${formatHash}|${state.alignment}|${state.customStyle.foregroundColor}|${state.customStyle.backgroundColor}`;
 }
 
 function getFormatHash(

From 5d3b8ebd93aabda4caa1013f0d26830a861796b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kacper=20=C5=BB=C3=B3=C5=82kiewski?=
 <kacper.zolkiewski@swmansion.com>
Date: Mon, 22 Jun 2026 16:19:46 +0200
Subject: [PATCH 2/6] test: add tests for custom style

---
 .../custom-style-colors-visual.png            | Bin 0 -> 18821 bytes
 .playwright/tests/customStyleColors.spec.ts   | 287 ++++++++++++++++++
 apps/example-web/src/components/Toolbar.tsx   |   2 +
 3 files changed, 289 insertions(+)
 create mode 100644 .playwright/screenshots/custom-style-colors-visual.png
 create mode 100644 .playwright/tests/customStyleColors.spec.ts

diff --git a/.playwright/screenshots/custom-style-colors-visual.png b/.playwright/screenshots/custom-style-colors-visual.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b55288e73f8363cf8bb2043cfdfafdc2431cc2d
GIT binary patch
literal 18821
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

literal 0
HcmV?d00001

diff --git a/.playwright/tests/customStyleColors.spec.ts b/.playwright/tests/customStyleColors.spec.ts
new file mode 100644
index 00000000..8d2da80a
--- /dev/null
+++ b/.playwright/tests/customStyleColors.spec.ts
@@ -0,0 +1,287 @@
+import { test, expect, type Page } from '@playwright/test';
+
+import {
+  editorLocator,
+  getSerializedHtml,
+  gotoVisualRegression,
+  setEditorHtml,
+} from '../helpers/visual-regression';
+import { toolbarButton } from '../helpers/toolbar';
+
+function textColorButton(page: Page) {
+  return page.locator('[data-testid="toolbar-text-color"]');
+}
+
+function bgColorButton(page: Page) {
+  return page.locator('[data-testid="toolbar-bg-color"]');
+}
+
+function colorSwatch(page: Page, color: string) {
+  return page.locator(
+    `[data-testid="toolbar-color-swatch-${color.replace('#', '')}"]`
+  );
+}
+
+function colorSwatchClear(page: Page) {
+  return page.locator('[data-testid="toolbar-color-swatch-clear"]');
+}
+
+async function applyTextColor(page: Page, color: string) {
+  await textColorButton(page).click();
+  await colorSwatch(page, color).click();
+}
+
+async function clearTextColor(page: Page) {
+  await textColorButton(page).click();
+  await colorSwatchClear(page).click();
+}
+
+async function applyBgColor(page: Page, color: string) {
+  await bgColorButton(page).click();
+  await colorSwatch(page, color).click();
+}
+
+async function clearBgColor(page: Page) {
+  await bgColorButton(page).click();
+  await colorSwatchClear(page).click();
+}
+
+const ROUND_TRIP_CASES: { name: string; input: string; expected: string }[] = [
+  {
+    name: 'foreground color only',
+    input: '<html><p><span style="color: #FF0000">Red text</span></p></html>',
+    expected:
+      '<html><p><span style="color: rgb(255, 0, 0);">Red text</span></p></html>',
+  },
+  {
+    name: 'background color only',
+    input:
+      '<html><p><span style="background-color: #FFFF00">Yellow bg</span></p></html>',
+    expected:
+      '<html><p><span style="background-color: rgb(255, 255, 0);">Yellow bg</span></p></html>',
+  },
+  {
+    name: 'foreground and background color',
+    input:
+      '<html><p><span style="color: #FF0000; background-color: #FFFF00">Both</span></p></html>',
+    expected:
+      '<html><p><span style="color: rgb(255, 0, 0); background-color: rgb(255, 255, 0);">Both</span></p></html>',
+  },
+  {
+    name: '8-digit hex background (transparent)',
+    input:
+      '<html><p><span style="background-color: #00FF0040">25% green bg</span></p></html>',
+    expected:
+      '<html><p><span style="background-color: rgba(0, 255, 0, 0.25);">25% green bg</span></p></html>',
+  },
+  {
+    name: '8-digit hex foreground (transparent)',
+    input:
+      '<html><p><span style="color: #0000FF80">50% blue text</span></p></html>',
+    expected:
+      '<html><p><span style="color: rgba(0, 0, 255, 0.5);">50% blue text</span></p></html>',
+  },
+  {
+    name: 'color inside heading',
+    input:
+      '<html><h6><span style="color: #000000; background-color: #00FF00">Black on green</span></h6></html>',
+    expected:
+      '<html><h6><span style="color: rgb(0, 0, 0); background-color: rgb(0, 255, 0);">Black on green</span></h6></html>',
+  },
+  {
+    name: 'color wraps bold mark',
+    input:
+      '<html><p><span style="color: #FF0000"><b>Bold red</b></span></p></html>',
+    expected:
+      '<html><p><span style="color: rgb(255, 0, 0);"><b>Bold red</b></span></p></html>',
+  },
+  {
+    name: 'multiple colored spans in one paragraph',
+    input:
+      '<html><p><span style="color: #FF0000">Red</span> plain <span style="color: #0000FF">Blue</span></p></html>',
+    expected:
+      '<html><p><span style="color: rgb(255, 0, 0);">Red</span> plain <span style="color: rgb(0, 0, 255);">Blue</span></p></html>',
+  },
+];
+
+test.describe('custom style colors - HTML serialization', () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoVisualRegression(page);
+  });
+
+  for (const { name, input, expected } of ROUND_TRIP_CASES) {
+    test(name, async ({ page }) => {
+      await setEditorHtml(page, input);
+      await expect.poll(async () => getSerializedHtml(page)).toBe(expected);
+    });
+  }
+});
+
+test('custom style colors visual regression', async ({ page }) => {
+  await gotoVisualRegression(page);
+
+  const html = [
+    '<html>',
+    '<p><span style="color: #FF5733">Standard 6-digit hex text</span></p>',
+    '<p><span style="color: #FFFFFF; background-color: #000000">White text on black background</span></p>',
+    '<p><span style="background-color: #00FF0040">25% transparent green background</span></p>',
+    '<p><span style="color: #0000FF80">50% transparent blue text</span></p>',
+    '<p><span style="color: #F00">Red 3-digit shorthand text</span></p>',
+    '<h6><span style="color: #000000; background-color: #00FF00">Black text on green</span></h6>',
+    '</html>',
+  ].join('');
+
+  await setEditorHtml(page, html);
+
+  const editor = editorLocator(page);
+  await expect(editor).toHaveScreenshot('custom-style-colors-visual.png');
+});
+
+test.describe('custom style colors - toolbar interaction', () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoVisualRegression(page);
+  });
+
+  test('apply foreground color then type text', async ({ page }) => {
+    const editor = editorLocator(page);
+    await editor.click();
+
+    await applyTextColor(page, '#FF0000');
+    await editor.pressSequentially('Red text', { delay: 80 });
+
+    await expect
+      .poll(async () => getSerializedHtml(page))
+      .toBe(
+        '<html><p><span style="color: rgb(255, 0, 0);">Red text</span></p></html>'
+      );
+  });
+
+  test('clear foreground color stops coloring new text', async ({ page }) => {
+    const editor = editorLocator(page);
+    await editor.click();
+
+    await applyTextColor(page, '#FF0000');
+    await editor.pressSequentially('Red', { delay: 80 });
+    await clearTextColor(page);
+    await editor.pressSequentially(' plain', { delay: 80 });
+
+    await expect
+      .poll(async () => getSerializedHtml(page))
+      .toBe(
+        '<html><p><span style="color: rgb(255, 0, 0);">Red</span> plain</p></html>'
+      );
+  });
+
+  test('apply background color then type text', async ({ page }) => {
+    const editor = editorLocator(page);
+    await editor.click();
+
+    await applyBgColor(page, '#FFFF00');
+    await editor.pressSequentially('Yellow back', { delay: 80 });
+
+    await expect
+      .poll(async () => getSerializedHtml(page))
+      .toBe(
+        '<html><p><span style="background-color: rgb(255, 255, 0);">Yellow back</span></p></html>'
+      );
+  });
+
+  test('clear background color stops coloring new text', async ({ page }) => {
+    const editor = editorLocator(page);
+    await editor.click();
+
+    await applyBgColor(page, '#FFFF00');
+    await editor.pressSequentially('Yellow', { delay: 80 });
+    await clearBgColor(page);
+    await editor.pressSequentially(' plain', { delay: 80 });
+
+    await expect
+      .poll(async () => getSerializedHtml(page))
+      .toBe(
+        '<html><p><span style="background-color: rgb(255, 255, 0);">Yellow</span> plain</p></html>'
+      );
+  });
+
+  test('apply foreground and background color together', async ({ page }) => {
+    const editor = editorLocator(page);
+    await editor.click();
+
+    await applyTextColor(page, '#FF0000');
+    await applyBgColor(page, '#FFFF00');
+    await editor.pressSequentially('Red+Yellow', { delay: 80 });
+
+    await expect
+      .poll(async () => getSerializedHtml(page))
+      .toBe(
+        '<html><p><span style="color: rgb(255, 0, 0); background-color: rgb(255, 255, 0);">Red+Yellow</span></p></html>'
+      );
+  });
+
+  test('foreground color with bold', async ({ page }) => {
+    const editor = editorLocator(page);
+    const boldBtn = toolbarButton(page, 'bold');
+    await editor.click();
+
+    await boldBtn.click();
+    await applyTextColor(page, '#FF0000');
+    await editor.pressSequentially('Bold red', { delay: 80 });
+
+    await expect
+      .poll(async () => getSerializedHtml(page))
+      .toBe(
+        '<html><p><span style="color: rgb(255, 0, 0);"><b>Bold red</b></span></p></html>'
+      );
+  });
+
+  test('background color with italic', async ({ page }) => {
+    const editor = editorLocator(page);
+    const italicBtn = toolbarButton(page, 'italic');
+    await editor.click();
+
+    await italicBtn.click();
+    await applyBgColor(page, '#FFFF00');
+    await editor.pressSequentially('Italic yellow back', { delay: 80 });
+
+    await expect
+      .poll(async () => getSerializedHtml(page))
+      .toBe(
+        '<html><p><span style="background-color: rgb(255, 255, 0);"><i>Italic yellow back</i></span></p></html>'
+      );
+  });
+
+  test('toolbar text-color button shows active swatch when color is set', async ({
+    page,
+  }) => {
+    const editor = editorLocator(page);
+    await editor.click();
+
+    await applyTextColor(page, '#FF0000');
+
+    // Re-open the picker – the chosen swatch should be marked as active
+    await textColorButton(page).click();
+    await expect(colorSwatch(page, '#FF0000')).toHaveClass(
+      /toolbar-color-swatch--active/
+    );
+
+    // Close the picker
+    await textColorButton(page).click();
+  });
+
+  test('toolbar bg-color button shows active swatch when color is set', async ({
+    page,
+  }) => {
+    const editor = editorLocator(page);
+    await editor.click();
+
+    await applyBgColor(page, '#FFFF00');
+
+    // Re-open the picker – the chosen swatch should be marked as active
+    await bgColorButton(page).click();
+    await expect(colorSwatch(page, '#FFFF00')).toHaveClass(
+      /toolbar-color-swatch--active/
+    );
+
+    // Close the picker
+    await bgColorButton(page).click();
+  });
+});
diff --git a/apps/example-web/src/components/Toolbar.tsx b/apps/example-web/src/components/Toolbar.tsx
index ae8d6a42..c70ef528 100644
--- a/apps/example-web/src/components/Toolbar.tsx
+++ b/apps/example-web/src/components/Toolbar.tsx
@@ -319,6 +319,7 @@ export function Toolbar({
         <div className="toolbar-color-picker">
           <button
             type="button"
+            data-testid="toolbar-color-swatch-clear"
             className="toolbar-color-swatch toolbar-color-swatch--clear"
             onPointerDown={(e) => {
               if (e.pointerType === 'mouse') e.preventDefault();
@@ -339,6 +340,7 @@ export function Toolbar({
               <button
                 key={color}
                 type="button"
+                data-testid={`toolbar-color-swatch-${color.replace('#', '')}`}
                 className={`toolbar-color-swatch${isActive ? ' toolbar-color-swatch--active' : ''}`}
                 style={{ backgroundColor: color }}
                 onPointerDown={(e) => {

From 0f10265069f5aabfef235de0b8d9367609624642 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kacper=20=C5=BB=C3=B3=C5=82kiewski?=
 <kacper.zolkiewski@swmansion.com>
Date: Mon, 22 Jun 2026 16:55:13 +0200
Subject: [PATCH 3/6] fix: span css colors normalization

---
 src/web/normalization/htmlNormalizer.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/web/normalization/htmlNormalizer.ts b/src/web/normalization/htmlNormalizer.ts
index de4d9838..8c88cbad 100644
--- a/src/web/normalization/htmlNormalizer.ts
+++ b/src/web/normalization/htmlNormalizer.ts
@@ -500,11 +500,11 @@ function walkNode(node: Node, out: { buf: string }): void {
 
   // <span>: CSS style → inline tags
   if (name === 'span') {
-    const rawStyle = node.getAttribute('style') || '';
-    const s = parseCssStyle(rawStyle);
+    const htmlNode = node as HTMLElement;
+    const s = parseCssStyle(node.getAttribute('style'));
 
-    const fg = findCssValue(rawStyle, 'color');
-    const bg = findCssValue(rawStyle, 'background-color');
+    const fg = htmlNode.style.color;
+    const bg = htmlNode.style.backgroundColor;
 
     // build the preserved span if colors exist
     let spanOpen = '';

From 92834e85b7ca1e145b27f8f7858be732b622a5e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kacper=20=C5=BB=C3=B3=C5=82kiewski?=
 <kacper.zolkiewski@swmansion.com>
Date: Mon, 22 Jun 2026 17:05:33 +0200
Subject: [PATCH 4/6] fix: allow change colors in codeblock

---
 src/web/pmPlugins/StripMarksInCodeBlockPlugin.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/web/pmPlugins/StripMarksInCodeBlockPlugin.ts b/src/web/pmPlugins/StripMarksInCodeBlockPlugin.ts
index 5eee201f..66836e1a 100644
--- a/src/web/pmPlugins/StripMarksInCodeBlockPlugin.ts
+++ b/src/web/pmPlugins/StripMarksInCodeBlockPlugin.ts
@@ -18,6 +18,9 @@ export const StripMarksInCodeBlockPlugin = Extension.create({
           newState.doc.descendants((node, pos) => {
             if (node.type.name === 'codeBlock') {
               allMarks.forEach((markType) => {
+                if (markType.name === 'customStyle') {
+                  return;
+                }
                 tr.removeMark(pos + 1, pos + node.nodeSize - 1, markType);
               });
               return false;

From 03c7e8900efe243badff820e30aa372178e4589a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kacper=20=C5=BB=C3=B3=C5=82kiewski?=
 <kacper.zolkiewski@swmansion.com>
Date: Tue, 23 Jun 2026 08:45:19 +0200
Subject: [PATCH 5/6] fix: convert colors to hex

---
 .playwright/tests/customStyleColors.spec.ts   |  30 +--
 src/web/normalization/colorNormalizer.ts      | 225 ++++++++++++++++++
 src/web/normalization/tiptapHtmlNormalizer.ts |  26 ++
 3 files changed, 266 insertions(+), 15 deletions(-)
 create mode 100644 src/web/normalization/colorNormalizer.ts

diff --git a/.playwright/tests/customStyleColors.spec.ts b/.playwright/tests/customStyleColors.spec.ts
index 8d2da80a..0c34b78b 100644
--- a/.playwright/tests/customStyleColors.spec.ts
+++ b/.playwright/tests/customStyleColors.spec.ts
@@ -51,56 +51,56 @@ const ROUND_TRIP_CASES: { name: string; input: string; expected: string }[] = [
     name: 'foreground color only',
     input: '<html><p><span style="color: #FF0000">Red text</span></p></html>',
     expected:
-      '<html><p><span style="color: rgb(255, 0, 0);">Red text</span></p></html>',
+      '<html><p><span style="color: #FF0000;">Red text</span></p></html>',
   },
   {
     name: 'background color only',
     input:
       '<html><p><span style="background-color: #FFFF00">Yellow bg</span></p></html>',
     expected:
-      '<html><p><span style="background-color: rgb(255, 255, 0);">Yellow bg</span></p></html>',
+      '<html><p><span style="background-color: #FFFF00;">Yellow bg</span></p></html>',
   },
   {
     name: 'foreground and background color',
     input:
       '<html><p><span style="color: #FF0000; background-color: #FFFF00">Both</span></p></html>',
     expected:
-      '<html><p><span style="color: rgb(255, 0, 0); background-color: rgb(255, 255, 0);">Both</span></p></html>',
+      '<html><p><span style="color: #FF0000; background-color: #FFFF00;">Both</span></p></html>',
   },
   {
     name: '8-digit hex background (transparent)',
     input:
       '<html><p><span style="background-color: #00FF0040">25% green bg</span></p></html>',
     expected:
-      '<html><p><span style="background-color: rgba(0, 255, 0, 0.25);">25% green bg</span></p></html>',
+      '<html><p><span style="background-color: #00FF0040;">25% green bg</span></p></html>',
   },
   {
     name: '8-digit hex foreground (transparent)',
     input:
       '<html><p><span style="color: #0000FF80">50% blue text</span></p></html>',
     expected:
-      '<html><p><span style="color: rgba(0, 0, 255, 0.5);">50% blue text</span></p></html>',
+      '<html><p><span style="color: #0000FF80;">50% blue text</span></p></html>',
   },
   {
     name: 'color inside heading',
     input:
       '<html><h6><span style="color: #000000; background-color: #00FF00">Black on green</span></h6></html>',
     expected:
-      '<html><h6><span style="color: rgb(0, 0, 0); background-color: rgb(0, 255, 0);">Black on green</span></h6></html>',
+      '<html><h6><span style="color: #000000; background-color: #00FF00;">Black on green</span></h6></html>',
   },
   {
     name: 'color wraps bold mark',
     input:
       '<html><p><span style="color: #FF0000"><b>Bold red</b></span></p></html>',
     expected:
-      '<html><p><span style="color: rgb(255, 0, 0);"><b>Bold red</b></span></p></html>',
+      '<html><p><span style="color: #FF0000;"><b>Bold red</b></span></p></html>',
   },
   {
     name: 'multiple colored spans in one paragraph',
     input:
       '<html><p><span style="color: #FF0000">Red</span> plain <span style="color: #0000FF">Blue</span></p></html>',
     expected:
-      '<html><p><span style="color: rgb(255, 0, 0);">Red</span> plain <span style="color: rgb(0, 0, 255);">Blue</span></p></html>',
+      '<html><p><span style="color: #FF0000;">Red</span> plain <span style="color: #0000FF;">Blue</span></p></html>',
   },
 ];
 
@@ -152,7 +152,7 @@ test.describe('custom style colors - toolbar interaction', () => {
     await expect
       .poll(async () => getSerializedHtml(page))
       .toBe(
-        '<html><p><span style="color: rgb(255, 0, 0);">Red text</span></p></html>'
+        '<html><p><span style="color: #FF0000;">Red text</span></p></html>'
       );
   });
 
@@ -168,7 +168,7 @@ test.describe('custom style colors - toolbar interaction', () => {
     await expect
       .poll(async () => getSerializedHtml(page))
       .toBe(
-        '<html><p><span style="color: rgb(255, 0, 0);">Red</span> plain</p></html>'
+        '<html><p><span style="color: #FF0000;">Red</span> plain</p></html>'
       );
   });
 
@@ -182,7 +182,7 @@ test.describe('custom style colors - toolbar interaction', () => {
     await expect
       .poll(async () => getSerializedHtml(page))
       .toBe(
-        '<html><p><span style="background-color: rgb(255, 255, 0);">Yellow back</span></p></html>'
+        '<html><p><span style="background-color: #FFFF00;">Yellow back</span></p></html>'
       );
   });
 
@@ -198,7 +198,7 @@ test.describe('custom style colors - toolbar interaction', () => {
     await expect
       .poll(async () => getSerializedHtml(page))
       .toBe(
-        '<html><p><span style="background-color: rgb(255, 255, 0);">Yellow</span> plain</p></html>'
+        '<html><p><span style="background-color: #FFFF00;">Yellow</span> plain</p></html>'
       );
   });
 
@@ -213,7 +213,7 @@ test.describe('custom style colors - toolbar interaction', () => {
     await expect
       .poll(async () => getSerializedHtml(page))
       .toBe(
-        '<html><p><span style="color: rgb(255, 0, 0); background-color: rgb(255, 255, 0);">Red+Yellow</span></p></html>'
+        '<html><p><span style="color: #FF0000; background-color: #FFFF00;">Red+Yellow</span></p></html>'
       );
   });
 
@@ -229,7 +229,7 @@ test.describe('custom style colors - toolbar interaction', () => {
     await expect
       .poll(async () => getSerializedHtml(page))
       .toBe(
-        '<html><p><span style="color: rgb(255, 0, 0);"><b>Bold red</b></span></p></html>'
+        '<html><p><span style="color: #FF0000;"><b>Bold red</b></span></p></html>'
       );
   });
 
@@ -245,7 +245,7 @@ test.describe('custom style colors - toolbar interaction', () => {
     await expect
       .poll(async () => getSerializedHtml(page))
       .toBe(
-        '<html><p><span style="background-color: rgb(255, 255, 0);"><i>Italic yellow back</i></span></p></html>'
+        '<html><p><span style="background-color: #FFFF00;"><i>Italic yellow back</i></span></p></html>'
       );
   });
 
diff --git a/src/web/normalization/colorNormalizer.ts b/src/web/normalization/colorNormalizer.ts
new file mode 100644
index 00000000..ca043d08
--- /dev/null
+++ b/src/web/normalization/colorNormalizer.ts
@@ -0,0 +1,225 @@
+const CSS_NAMED_COLORS: Record<string, string> = {
+  aliceblue: '#F0F8FFFF',
+  antiquewhite: '#FAEBD7FF',
+  aqua: '#00FFFFFF',
+  aquamarine: '#7FFFD4FF',
+  azure: '#F0FFFFFF',
+  beige: '#F5F5DCFF',
+  bisque: '#FFE4C4FF',
+  black: '#000000FF',
+  blanchedalmond: '#FFEBCDFF',
+  blue: '#0000FFFF',
+  blueviolet: '#8A2BE2FF',
+  brown: '#A52A2AFF',
+  burlywood: '#DEB887FF',
+  cadetblue: '#5F9EA0FF',
+  chartreuse: '#7FFF00FF',
+  chocolate: '#D2691EFF',
+  coral: '#FF7F50FF',
+  cornflowerblue: '#6495EDFF',
+  cornsilk: '#FFF8DCFF',
+  crimson: '#DC143CFF',
+  cyan: '#00FFFFFF',
+  darkblue: '#00008BFF',
+  darkcyan: '#008B8BFF',
+  darkgoldenrod: '#B8860BFF',
+  darkgray: '#A9A9A9FF',
+  darkgrey: '#A9A9A9FF',
+  darkgreen: '#006400FF',
+  darkkhaki: '#BDB76BFF',
+  darkmagenta: '#8B008BFF',
+  darkolivegreen: '#556B2FFF',
+  darkorange: '#FF8C00FF',
+  darkorchid: '#9932CCFF',
+  darkred: '#8B0000FF',
+  darksalmon: '#E9967AFF',
+  darkseagreen: '#8FBC8FFF',
+  darkslateblue: '#483D8BFF',
+  darkslategray: '#2F4F4FFF',
+  darkslategrey: '#2F4F4FFF',
+  darkturquoise: '#00CED1FF',
+  darkviolet: '#9400D3FF',
+  deeppink: '#FF1493FF',
+  deepskyblue: '#00BFFFFF',
+  dimgray: '#696969FF',
+  dimgrey: '#696969FF',
+  dodgerblue: '#1E90FFFF',
+  firebrick: '#B22222FF',
+  floralwhite: '#FFFAF0FF',
+  forestgreen: '#228B22FF',
+  fuchsia: '#FF00FFFF',
+  gainsboro: '#DCDCDCFF',
+  ghostwhite: '#F8F8FFFF',
+  gold: '#FFD700FF',
+  goldenrod: '#DAA520FF',
+  gray: '#808080FF',
+  grey: '#808080FF',
+  green: '#008000FF',
+  greenyellow: '#ADFF2FFF',
+  honeydew: '#F0FFF0FF',
+  hotpink: '#FF69B4FF',
+  indianred: '#CD5C5CFF',
+  indigo: '#4B0082FF',
+  ivory: '#FFFFF0FF',
+  khaki: '#F0E68CFF',
+  lavender: '#E6E6FAFF',
+  lavenderblush: '#FFF0F5FF',
+  lawngreen: '#7CFC00FF',
+  lemonchiffon: '#FFFACDFF',
+  lightblue: '#ADD8E6FF',
+  lightcoral: '#F08080FF',
+  lightcyan: '#E0FFFFFF',
+  lightgoldenrodyellow: '#FAFAD2FF',
+  lightgray: '#D3D3D3FF',
+  lightgrey: '#D3D3D3FF',
+  lightgreen: '#90EE90FF',
+  lightpink: '#FFB6C1FF',
+  lightsalmon: '#FFA07AFF',
+  lightseagreen: '#20B2AAFF',
+  lightskyblue: '#87CEFAFF',
+  lightslategray: '#778899FF',
+  lightslategrey: '#778899FF',
+  lightsteelblue: '#B0C4DEFF',
+  lightyellow: '#FFFFE0FF',
+  lime: '#00FF00FF',
+  limegreen: '#32CD32FF',
+  linen: '#FAF0E6FF',
+  magenta: '#FF00FFFF',
+  maroon: '#800000FF',
+  mediumaquamarine: '#66CDAAFF',
+  mediumblue: '#0000CDFF',
+  mediumorchid: '#BA55D3FF',
+  mediumpurple: '#9370D8FF',
+  mediumseagreen: '#3CB371FF',
+  mediumslateblue: '#7B68EEFF',
+  mediumspringgreen: '#00FA9AFF',
+  mediumturquoise: '#48D1CCFF',
+  mediumvioletred: '#C71585FF',
+  midnightblue: '#191970FF',
+  mintcream: '#F5FFFAFF',
+  mistyrose: '#FFE4E1FF',
+  moccasin: '#FFE4B5FF',
+  navajowhite: '#FFDEADFF',
+  navy: '#000080FF',
+  oldlace: '#FDF5E6FF',
+  olive: '#808000FF',
+  olivedrab: '#6B8E23FF',
+  orange: '#FFA500FF',
+  orangered: '#FF4500FF',
+  orchid: '#DA70D6FF',
+  palegoldenrod: '#EEE8AAFF',
+  palegreen: '#98FB98FF',
+  paleturquoise: '#AFEEEEFF',
+  palevioletred: '#D87093FF',
+  papayawhip: '#FFEFD5FF',
+  peachpuff: '#FFDAB9FF',
+  peru: '#CD853FFF',
+  pink: '#FFC0CBFF',
+  plum: '#DDA0DDFF',
+  powderblue: '#B0E0E6FF',
+  purple: '#800080FF',
+  rebeccapurple: '#663399FF',
+  red: '#FF0000FF',
+  rosybrown: '#BC8F8FFF',
+  royalblue: '#4169E1FF',
+  saddlebrown: '#8B4513FF',
+  salmon: '#FA8072FF',
+  sandybrown: '#F4A460FF',
+  seagreen: '#2E8B57FF',
+  seashell: '#FFF5EEFF',
+  sienna: '#A0522DFF',
+  silver: '#C0C0C0FF',
+  skyblue: '#87CEEBFF',
+  slateblue: '#6A5ACDFF',
+  slategray: '#708090FF',
+  slategrey: '#708090FF',
+  snow: '#FFFAFAFF',
+  springgreen: '#00FF7FFF',
+  steelblue: '#4682B4FF',
+  tan: '#D2B48CFF',
+  teal: '#008080FF',
+  thistle: '#D8BFD8FF',
+  tomato: '#FF6347FF',
+  turquoise: '#40E0D0FF',
+  violet: '#EE82EEFF',
+  wheat: '#F5DEB3FF',
+  white: '#FFFFFFFF',
+  whitesmoke: '#F5F5F5FF',
+  yellow: '#FFFF00FF',
+  yellowgreen: '#9ACD32FF',
+};
+
+export function normalizeColorToHex(
+  value: string | null | undefined
+): string | null {
+  if (!value) return null;
+  let str = value.trim().toLowerCase();
+
+  // Handle Named Colors
+  if (CSS_NAMED_COLORS[str] !== undefined) {
+    str = CSS_NAMED_COLORS[str]!.toLowerCase();
+  }
+
+  // Handle Hex (#FFF, #RGBA, #RRGGBB, #RRGGBBAA)
+  if (str.startsWith('#')) {
+    const hex = str.substring(1);
+    let r,
+      g,
+      b,
+      a = 'ff';
+
+    if (hex.length === 3) {
+      r = hex.charAt(0) + hex.charAt(0);
+      g = hex.charAt(1) + hex.charAt(1);
+      b = hex.charAt(2) + hex.charAt(2);
+    } else if (hex.length === 4) {
+      r = hex.charAt(0) + hex.charAt(0);
+      g = hex.charAt(1) + hex.charAt(1);
+      b = hex.charAt(2) + hex.charAt(2);
+      a = hex.charAt(3) + hex.charAt(3);
+    } else if (hex.length === 6) {
+      r = hex.substring(0, 2);
+      g = hex.substring(2, 4);
+      b = hex.substring(4, 6);
+    } else if (hex.length === 8) {
+      r = hex.substring(0, 2);
+      g = hex.substring(2, 4);
+      b = hex.substring(4, 6);
+      a = hex.substring(6, 8);
+    } else {
+      return null;
+    }
+
+    // drop alpha if it's 255 (FF)
+    if (a === 'ff') {
+      return `#${r}${g}${b}`.toUpperCase();
+    }
+    return `#${r}${g}${b}${a}`.toUpperCase();
+  }
+
+  // Handle rgb() and rgba()
+  if (str.startsWith('rgb')) {
+    const match = str.match(
+      /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)/
+    );
+    if (match && match[1] && match[2] && match[3]) {
+      const r = Math.round(parseFloat(match[1])).toString(16).padStart(2, '0');
+      const g = Math.round(parseFloat(match[2])).toString(16).padStart(2, '0');
+      const b = Math.round(parseFloat(match[3])).toString(16).padStart(2, '0');
+
+      let a = 'ff';
+      if (match[4] !== undefined) {
+        a = Math.round(parseFloat(match[4]) * 255)
+          .toString(16)
+          .padStart(2, '0');
+      }
+
+      if (a === 'ff') {
+        return `#${r}${g}${b}`.toUpperCase();
+      }
+      return `#${r}${g}${b}${a}`.toUpperCase();
+    }
+  }
+
+  return null;
+}
diff --git a/src/web/normalization/tiptapHtmlNormalizer.ts b/src/web/normalization/tiptapHtmlNormalizer.ts
index 9ebd2c65..44c7a669 100644
--- a/src/web/normalization/tiptapHtmlNormalizer.ts
+++ b/src/web/normalization/tiptapHtmlNormalizer.ts
@@ -2,6 +2,7 @@ import {
   checkboxHtmlForTiptap,
   checkboxHtmlFromTiptap,
 } from './checkboxHtmlNormalizer';
+import { normalizeColorToHex } from './colorNormalizer';
 import { normalizeHtml } from './htmlNormalizer';
 
 export function prepareHtmlForTiptap(
@@ -36,5 +37,30 @@ export function normalizeHtmlFromTiptap(html: string): string {
     return `<img${attrs}/>`;
   });
 
+  // Find all style="..." attributes in the HTML
+  html = html.replace(/style="([^"]*)"/gi, (_, styleString: string) => {
+    let updatedStyle = styleString;
+
+    // Convert color: <value> to hex
+    updatedStyle = updatedStyle.replace(
+      /(?:^|;)\s*(?<!-)color\s*:\s*([^;]+)/gi,
+      (match, colorValue) => {
+        const hex = normalizeColorToHex(colorValue);
+        return hex ? match.replace(colorValue, hex) : match;
+      }
+    );
+
+    // Convert background-color: <value> to hex
+    updatedStyle = updatedStyle.replace(
+      /(?:^|;)\s*background-color\s*:\s*([^;]+)/gi,
+      (match, bgColorValue) => {
+        const hex = normalizeColorToHex(bgColorValue);
+        return hex ? match.replace(bgColorValue, hex) : match;
+      }
+    );
+
+    return `style="${updatedStyle}"`;
+  });
+
   return `<html>${html}</html>`;
 }

From 1d890cc218ab8fc552d87fdddbb47d19cd9f32a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kacper=20=C5=BB=C3=B3=C5=82kiewski?=
 <kacper.zolkiewski@swmansion.com>
Date: Tue, 23 Jun 2026 09:31:12 +0200
Subject: [PATCH 6/6] fix: color regex

---
 apps/example-web/src/components/Toolbar.tsx   |  1 -
 src/web/EnrichedTextInput.tsx                 | 12 +++++++-----
 src/web/normalization/tiptapHtmlNormalizer.ts |  2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/apps/example-web/src/components/Toolbar.tsx b/apps/example-web/src/components/Toolbar.tsx
index c70ef528..e68f44a8 100644
--- a/apps/example-web/src/components/Toolbar.tsx
+++ b/apps/example-web/src/components/Toolbar.tsx
@@ -7,7 +7,6 @@ import { useState, type RefObject } from 'react';
 import { useDragScroll } from '../hooks/useDragScroll';
 
 const COLORS = [
-  'red',
   '#808080',
   '#FF0000',
   '#FF6600',
diff --git a/src/web/EnrichedTextInput.tsx b/src/web/EnrichedTextInput.tsx
index 84b65de3..2b810e1c 100644
--- a/src/web/EnrichedTextInput.tsx
+++ b/src/web/EnrichedTextInput.tsx
@@ -382,14 +382,16 @@ export const EnrichedTextInput = ({
             ? (customStyle.backgroundColor ?? null)
             : (current.backgroundColor ?? null);
 
-        if (!resolvedColor && !resolvedBg) {
-          editor.commands.unsetCustomStyle();
-        } else {
-          editor.commands.setCustomStyle({
+        runFocused(editor, (c) => {
+          if (!resolvedColor && !resolvedBg) {
+            return c.unsetCustomStyle();
+          }
+
+          return c.setCustomStyle({
             foregroundColor: resolvedColor,
             backgroundColor: resolvedBg,
           });
-        }
+        });
       },
     }),
     [editor]
diff --git a/src/web/normalization/tiptapHtmlNormalizer.ts b/src/web/normalization/tiptapHtmlNormalizer.ts
index 44c7a669..1af39be3 100644
--- a/src/web/normalization/tiptapHtmlNormalizer.ts
+++ b/src/web/normalization/tiptapHtmlNormalizer.ts
@@ -43,7 +43,7 @@ export function normalizeHtmlFromTiptap(html: string): string {
 
     // Convert color: <value> to hex
     updatedStyle = updatedStyle.replace(
-      /(?:^|;)\s*(?<!-)color\s*:\s*([^;]+)/gi,
+      /(?:^|;)\s*color\s*:\s*([^;]+)/gi,
       (match, colorValue) => {
         const hex = normalizeColorToHex(colorValue);
         return hex ? match.replace(colorValue, hex) : match;