Set text color default value

[Harsisis]

Hello, is it possible to set the text editor color to default value like blue instead of black ?

[gitgregoryfuntera]

I hope this helps.

I am able to set a default color on my editor by extending the Color. Reading this documentation helps https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing

See below my approach

// custom-extended-color.ts
import Color from "@tiptap/extension-color";

const CustomExtendedColor = Color.extend({
    addGlobalAttributes() {
        return [
            {
                types: ["heading", "paragraph"],
                attributes: {
                    color: {
                        default: "#00ff12", // custom default color
                        parseHTML: (element) => element.style.color?.replace(/['"]+/g, ""),
                        renderHTML: (attributes) => {
                            if (!attributes.color) {
                                return {};
                            }

                            return {
                                style: `color: ${attributes.color}`,
                            };
                        },
                    },
                },
            },
        ];
    },
});

export default CustomExtendedColor;

Attaching in useEditor hook.

  const editor = useEditor({
    extensions: [
      StarterKit,
      TextStyle,
      Color,
      CustomExtendedColor, // custom extended for having default color
    ],
    content: "",
    immediatelyRender: false,
  });

[DhaniAM]

The simplest way is to do it in your css and select tiptap class:

.tiptap {
    color: "red";
}