When calling serializeHtml (from @udecode/plate-serializer-html), output will strip with color

[tomdyqin]

Description

When calling serializeHtml (from @udecode/plate-serializer-html), output will strip with color

Steps to Reproduce

it.only('serialize nested with color', () => {
  const editor = createPlateUIEditor({
    plugins: [
      createFontColorPlugin(),
      createParagraphPlugin({
        props: {
          className: 'slate-test',
        },
      }),
    ],
  });

  expect(
    serializeHtml(editor, {
      nodes: [
        {
          type: ELEMENT_PARAGRAPH,
          children: [
            { text: 'I am blue', color: 'blue' },
            { text: ' text!' },
          ],
        },
      ],
      preserveClassNames: ['slate-'],
    })
  ).toBe(
    '<div class="slate-test"><span style="color: blue">I am</span> text!</div>'
  );
});

Expected Behavior

output will with color

Expected: "<div class=\"slate-p slate-test\"><span style=\"color: blue\">I am blue</span> text!</div>"
Received: "<div class=\"slate-p slate-test\">I am blue text!</div>"

Environment

• slate: 25.0.0
• slate-react: 0.100.0
• browser: chrome

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[tomdyqin]

and if text has like bold or italic attribute ， the color will not strip

[tomdyqin]

@zbeyens can u help this?

[seanbruce]

I've run into this bug too. After view the source code, I find the code of @udecode/plate-font plugin may cause the issue. Comparing code of @udecode/plate-basic-marks:

export const createBoldPlugin = createPluginFactory<ToggleMarkPlugin>({
  key: MARK_BOLD,
  isLeaf: true,
  ...

export const createItalicPlugin = createPluginFactory<ToggleMarkPlugin>({
  key: MARK_ITALIC,
  isLeaf: true,
  ...

and

export const createFontColorPlugin = createPluginFactory({
  key: MARK_COLOR,
  inject: {
    props: {
      nodeKey: MARK_COLOR,
      defaultNodeValue: 'black',
    },
  },

It seems that the createFontColorPlugin function doesn't treat font color as a leaf element

[adelsagemilang]

Same issue here