fix: prevent cursor jump during IME composition in colored text

.changeset/fix-ime-cursor-jump.md

@@ -0,0 +1,6 @@
+---
+'@tiptap/extension-text-style': patch
+'@tiptap/core': patch
+---
+
+fix: prevent cursor jump during IME composition in colored text

packages/core/src/helpers/injectExtensionAttributesToParseRule.ts

@@ -31,7 +31,7 @@ export function injectExtensionAttributesToParseRule(
           ? item.attribute.parseHTML(node)
           : fromString(node.getAttribute(item.name))
 
-        if (value === null || value === undefined) {
+        if (value === null || value === undefined || value === '') {
           return items
         }
 

packages/extension-text-style/src/background-color/background-color.ts

@@ -82,7 +82,7 @@ export const BackgroundColor = Extension.create<BackgroundColorOptions>({
                 }
               }
 
-              return element.style.backgroundColor?.replace(/['"]+/g, '')
+              return element.style.backgroundColor?.replace(/['"]+/g, '') || null
             },
             renderHTML: attributes => {
               if (!attributes.backgroundColor) {

packages/extension-text-style/src/color/color.ts

@@ -82,7 +82,7 @@ export const Color = Extension.create<ColorOptions>({
                 }
               }
 
-              return element.style.color?.replace(/['"]+/g, '')
+              return element.style.color?.replace(/['"]+/g, '') || null
             },
             renderHTML: attributes => {
               if (!attributes.color) {

packages/extension-text-style/src/font-family/font-family.ts

@@ -56,7 +56,7 @@ export const FontFamily = Extension.create<FontFamilyOptions>({
         attributes: {
           fontFamily: {
             default: null,
-            parseHTML: element => element.style.fontFamily,
+            parseHTML: element => element.style.fontFamily || null,
             renderHTML: attributes => {
               if (!attributes.fontFamily) {
                 return {}

packages/extension-text-style/src/font-size/font-size.ts

@@ -56,7 +56,7 @@ export const FontSize = Extension.create<FontSizeOptions>({
         attributes: {
           fontSize: {
             default: null,
-            parseHTML: element => element.style.fontSize,
+            parseHTML: element => element.style.fontSize || null,
             renderHTML: attributes => {
               if (!attributes.fontSize) {
                 return {}

packages/extension-text-style/src/line-height/line-height.ts

@@ -56,7 +56,7 @@ export const LineHeight = Extension.create<LineHeightOptions>({
         attributes: {
           lineHeight: {
             default: null,
-            parseHTML: element => element.style.lineHeight,
+            parseHTML: element => element.style.lineHeight || null,
             renderHTML: attributes => {
               if (!attributes.lineHeight) {
                 return {}

packages/extension-text-style/src/text-style/index.ts

@@ -123,6 +123,26 @@ export const TextStyle = Mark.create<TextStyleOptions>({
     return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
   },
 
+  addMarkView() {
+    return ({ HTMLAttributes }) => {
+      const span = document.createElement('span')
+
+      // Use setAttribute instead of style.cssText to preserve original
+      // color format (e.g. hex #FF0000) and prevent browser normalization
+      // to rgb() which causes mark attribute mismatches during IME composition.
+      Object.entries(HTMLAttributes).forEach(([attr, value]) => {
+        if (value != null && value !== false) {
+          span.setAttribute(attr, String(value))
+        }
+      })
+
+      return {
+        dom: span,
+        contentDOM: span,
+      }
+    }
+  },
+
   addCommands() {
     return {
       toggleTextStyle: