Text Color - Extension

[theZaX]

First off great job on TipTap, I searched far and wide for a good text editor, tried quill for a bit wasn't super extensible, then I tried editorjs and I was looking at a bunch of others, but tip tap has great documentation and its very extensible.

This isn't as much a feature request but more of a suggestion. After a long time searching through the documentation googling and being pretty confused by some old issues that ended up pertaining to v1. I was able to get it to work by cloning the font family extension. I was very surprised when all it took was changing the style in the render function from 'font-family' to 'color' and it worked.

Color seems about on par with the need to change font-family so it would make sense to also have a color extension, its pretty low hanging fruit too, since it would be a direct copy of the font-family logic with just naming changes. If you don't want to add it, could you talk me through making an npm module so other people could use it?

[hanspagel]

Thanks! There are a few reasons why that doesn’t exist yet:

1. We’re in beta and still busy with the core. Adding extensions isn’t our main focus during that phase.

2. It’s not our goal go have every possible extension, for example for font size, font color, line height ... and probably 50-100 other extensions (according to the list of ideas for extensions I keep). tiptap is about customization, that’s the strength.

3. It could have been easier to find all the information you need, you’re right. But you’ve accomplished something great! You’ve built your first tiptap extension and you learned a lot on your way. If you find the need to build something more complex, you’ll already have enough experience to get started.

Regardind community extensions, follow: #819

Keep it up! ✌️

[andon94]

I've tried cloning font-family extension after reading this, so I could add superscript/subscript functionality to the editor. My problem is that the project I'm currently working on is very large, and changing existing file names to .ts and such is not a good idea.

My next idea is making an npm package and importing it that way.

Am I on the right track @hanspagel ? I've tried importing your superscript/subscript extensions but they are not working on v.2. I have a lot of other funcionalities that I should add, so this would be a boilerplate for all the rest of them.

[hanspagel]

There’s no need to use TypeScript (.ts), just name your files .js and remove the TypeScript part (everything that looks to foreign and makes a syntax error).

For the sup/sub extensions the strong extension is a better starting point.

The font-family extension requires the textstyle extension so multiple things can be added on a single span. For sub/sup I’d recommend to use the dedicated HTML tags.

[kongweiying2]

First off great job on TipTap, I searched far and wide for a good text editor, tried quill for a bit wasn't super extensible, then I tried editorjs and I was looking at a bunch of others, but tip tap has great documentation and its very extensible.

This isn't as much a feature request but more of a suggestion. After a long time searching through the documentation googling and being pretty confused by some old issues that ended up pertaining to v1. I was able to get it to work by cloning the font family extension. I was very surprised when all it took was changing the style in the render function from 'font-family' to 'color' and it worked.

Color seems about on par with the need to change font-family so it would make sense to also have a color extension, its pretty low hanging fruit too, since it would be a direct copy of the font-family logic with just naming changes. If you don't want to add it, could you talk me through making an npm module so other people could use it?

@theZaX Could you post the text colour extension you ended up with? I'm having some trouble figuring out how to make the changes.

[theZaX]

So its been a while since I was working on that side of the project so I don't really have that code handy. But here is the process that I used to make it work.

• Grab the source from github of the font family extension. Make a file somewhere in your src and paste in the extension code.
• Remove the typescript stuff (if you're not using typescript)
• Import that file to the component where you are using it and register it on tip tap.
• Test out the font family plugin using the samples here
• Once you've got that working theres only one change to make it do color switch. Change "font-family" to color. And pass in colors, it even works with css variables.
• Now you can refactor so it has intuitive method names.

Let me know if you're able to get it to work.

[kongweiying2]

That helps a lot! I see what you mean now. I tried it out and it works well.

[sabetAI]

This is my working extension: https://gist.github.com/sabetAI/e7ac09da82ea4e1e01929beb836ffa41. Any issues with it? Should I add it as a community extension?

[hanspagel]

Thanks @sabetAI! I added it, chances are we’ll provide it as an official extension soonish.

[domnantas]

I'm working on text color feature right now based on this example, though I used a color picker instead of buttons. Here's a demo. I think that's a more common use case, might be a good way to show off the official extension.

For some reason, in my application editor.getAttributes('textStyle').color is not reactive, but I guess that's an issue on my end haha

[hanspagel]

Great! Try v-model="editor.getAttributes('textStyle').color"!

[kenng]

@hanspagel I have added the logic to make the color input reactive, do you think that will make the example more complete?

https://codesandbox.io/s/tiptap-v2-color-demo-forked-c6vg24?file=/src/App.vue