feat(renderer): support textStyle color and backgroundColor\n\n- Map attrs.color and attrs.backgroundColor to inline styles\n- Add tests for color and background color rendering\n\nCloses # if applicable

Author: leo91000

src/components/JsonRenderer.ts

@@ -15,6 +15,14 @@ function stylesFromAttrs(attrs?: JSONContent['attrs']) {
       case 'textAlign':
         style.textAlign = value
         break
+      case 'color':
+        if (value)
+          style.color = value
+        break
+      case 'backgroundColor':
+        if (value)
+          style.backgroundColor = value
+        break
       case 'fontFamily':
         if (value)
           style.fontFamily = value

tests/components/JsonRenderer.background.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import type { JSONContent } from '../../src'
+import { JsonRenderer } from '../../src'
+
+const WrappedJsonRenderer = defineComponent({
+  components: { JsonRenderer },
+  props: {
+    content: {
+      type: Object as () => JSONContent,
+      required: true,
+    },
+  },
+  template: '<JsonRenderer v-bind="$props" />',
+})
+
+describe('jsonRenderer background color support', () => {
+  it('renders text with inline background color from textStyle mark', () => {
+    const wrapper = mount(WrappedJsonRenderer, {
+      props: {
+        content: {
+          type: 'doc',
+          content: [
+            {
+              type: 'paragraph',
+              content: [
+                {
+                  type: 'text',
+                  text: 'highlighted',
+                  marks: [
+                    {
+                      type: 'textStyle',
+                      attrs: { backgroundColor: '#ffee99' },
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      },
+    })
+
+    const el = wrapper.find('span').element as HTMLElement
+    const styleAttr = el.getAttribute('style') || ''
+    expect(styleAttr).toMatch(/background-color:\s*(#ffee99|rgb\()/)
+  })
+})

tests/components/JsonRenderer.color.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import type { JSONContent } from '../../src'
+import { JsonRenderer } from '../../src'
+
+const WrappedJsonRenderer = defineComponent({
+  components: { JsonRenderer },
+  props: {
+    content: {
+      type: Object as () => JSONContent,
+      required: true,
+    },
+  },
+  template: '<JsonRenderer v-bind="$props" />',
+})
+
+describe('jsonRenderer color support', () => {
+  it('renders text with inline color from textStyle mark', () => {
+    const wrapper = mount(WrappedJsonRenderer, {
+      props: {
+        content: {
+          type: 'doc',
+          content: [
+            {
+              type: 'paragraph',
+              content: [
+                {
+                  type: 'text',
+                  text: 'colored',
+                  marks: [
+                    {
+                      type: 'textStyle',
+                      attrs: { color: '#5dc2da' },
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      },
+    })
+
+    const el = wrapper.find('span').element as HTMLElement
+    // Check that color style is applied (jsdom may normalize to rgb)
+    const styleAttr = el.getAttribute('style') || ''
+    expect(styleAttr).toMatch(/color:\s*(#5dc2da|rgb\()/)
+  })
+})