Custom color text cannot receive both bold/italic/underline/ss + inline link at the same time

[andyyvo]

Steps to reproduce:

1. Add custom color to any text
2. Add an inline link and see that the custom color persists
3. Apply any one of bold/italic/underline/strikethrough/super/sub

Expected: Custom color should persist on the inline link with extra styles.

Actual: Default <a> blue color is being shown.

Reasoning: The bold/italic/underline/strikethrough/super/sub styles apply HTML tags to apply styles. Custom color uses the style attribute. However, custom color is applied to the outer most HTML tag. This is not WYSIWYG. This is a customer issue we're facing for our rich text editor.

[alexander-goncharuk]

Upvoting this. Facing the same issue in our app.

[bhatmand]

I was able to fix this for my use-case by changing the order of the link tag.

const InlineBlot = Quill.import('blots/inline');
InlineBlot.order = [
  'cursor',
  'inline',
  'underline',
  'strike',
  'italic',
  'bold',
  'script',
  'link', // Must be higher to allow color application
  'code',
];