Remove text color and background color in Tiptap/Prosemirror on paste

To remove text color and background color when pasting content into Tiptap (built on ProseMirror), you can use ProseMirror's transformPastedHTML option to customize the behavior of the pasted content. By intercepting the pasted content, you can remove any unwanted attributes, such as text color and background color.

Here's how you can achieve this in your Tiptap editor:

javascriptCopy code
import { EditorContent } from 'tiptap';
import { transformPastedHTML } from 'tiptap-commands';

const removeUnwantedStyles = (fragment) => {
  const filteredFragment = [];
  fragment.forEach((child) => {
    // Remove the attributes for text color and background color
    const withoutStyles = child.mark([], true);
    filteredFragment.push(withoutStyles);
  });
  return fragment.copy(filteredFragment);
};

const editorContent = new EditorContent({
  // other options...
  transformPastedHTML: (html) => {
    const doc = new DOMParser().parseFromString(html, 'text/html');
    const fragment = editorContent.state.schema.nodeFromJSON(doc.body);
    const filteredFragment = removeUnwantedStyles(fragment);
    return filteredFragment;
  },
});

In this code, we define a removeUnwantedStyles function that takes a ProseMirror Fragment as input and returns a new Fragment without the attributes for text color and background color. Then, in the transformPastedHTML option of the EditorContent, we parse the pasted HTML, convert it to a ProseMirror Fragment, and use the removeUnwantedStyles function to filter out the unwanted attributes before returning the new fragment.

This will effectively remove text color and background color when content is pasted into the Tiptap editor. You can extend the removeUnwantedStyles function to handle other unwanted styles or attributes if needed.