Custom selection for leaf type node

1

I have a custom nodeView which leaf type node:

toDOM(node) {
      return [
        'span',
        {
          'data-type': 'fn_widget_container'
        },
        ['span', { 'data-type': 'example', label: node.attrs.label }],
        ['span', { 'data-type': 'outputContent' }, `${node.attrs.label}`]
      ];
    },
    parseDOM: [
      {
        tag: 'span[data-type=fn_widget_container]',
        getAttrs(dom) {
          const label = (dom as HTMLElement)
            ?.querySelector('span[data-type=example]')
            ?.getAttribute('label');
          return { label: label };
        }
      }
    ]

Also, I use angular elements to rerender span to my custom angular component. However prosemirror state is keep the original schema from toDOM function (I’m ok with it).

bold, italic, etc marks work well, but marks text_color and text_background_color are not applicable for these leaf nodes. So I would like to make some custom handler for selection and select the second span (with attribute outputContent) to apply colors also. Is it possible to do? Or any other way to apply colors and bg-colors for leaf nodes?