Different text colour for each user in collaborative-editing editor

[fadiquader]

I’ve been trying for a while trying to add different text colour for each user is typing dow, I’ve tried couple possible solutions to implement a plugin, but all in vain? May I ask if you have any clue how to implement that?

Many thanks

[fadiquader]

for who is interested, I was able to implement that as following

const MARK_TEXT_HIGHLIGHT = 'mark-text-highlight';
const schema = {
  nodes: [...],
  marks: [
   ...,
   [MARK_TEXT_HIGHLIGHT]: {
    attrs: {
      highlightColor: '',
      ychange: { default: null }
    },
    inline: true,
    group: 'inline',
    parseDOM: [
      {
        tag: 'span[style*=background-color]',
        getAttrs: (dom) => {
          const { backgroundColor } = dom.style;
          return {
            highlightColor: backgroundColor,
          };
        },
      },
    ],

    toDOM(node) {
      const {highlightColor} = node.attrs;
      let style = '';
      if (highlightColor) {
        style += `background-color: ${highlightColor};`;
      }
      return ['span', {style}, 0];
    },
  }
 ]
}

const highlightPlugin = highlightColor => {
  return new Plugin({
    props: {
      handleKeyDown(view, e) {
        const { state, dispatch } = view;
        let { schema, selection, storedMarks } = state;
        let { $cursor } = selection;
        if (!$cursor) return false;
         dispatch(state.tr.addStoredMark(markType.create({
              highlightColor
            })))
        return false
      },
    },
  });
};

Enjoy!