Alignment

[tszulc]

Allows for the alignment of selected nodes or nodes under cursor. Works only on paragraph, heading, blockquote, list item, and table cell types

Possible solution to #180

[Alecyrus]

@tszulc I do not think alignment feature is necessary for tiptap core library, just like font-family, font-color....Uh,,,,but you did nice work.

[connecteev]

@tszulc I do not think alignment feature is necessary for tiptap core library, just like font-family, font-color....Uh,,,,but you did nice work.

Would this be an extension then? Regardless, would love to see this feature implemented so we can use it with TipTap.

[Alecyrus]

@tszulc I do not think alignment feature is necessary for tiptap core library, just like font-family, font-color....Uh,,,,but you did nice work.

Would this be an extension then? Regardless, would love to see this feature implemented so we can use it with TipTap.

If so, there will be endless features, like Microsoft Word? The code for implementing font-family ( or font-color orhighlight-color....) is nearly the same with that for implementing alignment.

In my opinion, the key purpose of tiptap is to maintain some basic core features which make prosemirror easier to use.

[arthurmcgregor]

I agree with @connecteev - I would totally use this and don't want to have to write my own extension. I realise that I could, but if someone else has done it for me that's even better! Going to get better uptake of TipTap in my opinion if basic functionality is easy to achieve. I agree though that it doesn't have to be part of the core package, but please don't let code/effort like this go to waste.

[mareksotak]

@Alecyrus understand why you are against having this in the core, but wouldn't it make sense from the tiptap API point of view to allow node attributes as implemented by @tszulc? All the examples can be as minimal as possible (meaning they can stay as they are), any examples/extensions (even those extending tables/headings/etc...) can be outside of the core, created by community, these extensions that can extend attributes of nodes. If there is general support for attributes, as you have said, anyone can then build and support their font-family, font-color, etc... extensions without making changes to the core and maintaining their own version of tiptap core.

[waaronking]

I do not think alignment feature is necessary for tiptap core library, just like font-family, font-color....Uh,,,,but you did nice work.

@Alecyrus I respectfully disagree. I understand your desire to keep the core clean, but text-alignment is a basic tenant of modern rich text editors. Tiptap currently supports todo-lists and text input suggestions which feel extra fluffy compared to something basic like text alignment.

[JerryKusenberger]

Would love to see this merged. Been using tiptap and just had a need for alignment come up. I was surprised that alignment wasn't possible.

[nbst84]

Just spent a few hours implementing a text editor component using tiptap just to find out now that it can't do text alignment. I did not even think of checking before because it is such a basic feature of any text editor imho that I just assumed it was there. Now I'm considering swapping tiptap for something else because I don't have time to look at how to write extensions just to align text. Disappointed.

[waaronking]

@nicolasbrigodiot here's a working example: https://gist.github.com/waaronking/0e1712e1c1aea1d73b0cc2cb4129edde?ts=2

[nbst84]

@nicolasbrigodiot here's a working example: https://gist.github.com/waaronking/0e1712e1c1aea1d73b0cc2cb4129edde?ts=2

Pasted it as is and it works - thank you very much!

[JerryKusenberger]

@hanspagel this is a must have feature for us. The only reason we were able to implement tiptap is because of the comments in this thread. I've seen many other threads related to alignment and it seems that the official answer is 'No', alignment will not be implemented into the core product. As a compromise would it be possible to have a "Community Extensions" repo? If you go through the open and closed issues you will find absolute gems that other users have created. Many of the most commonly requested features related to images / font / coloring / alignment exist in one way or another in closed pull requests like this one.

Big thanks to @waaronking and @tszulc for their contributions.

[hanspagel]

We updated the default branch to main and deleted the master branch, that led to the close of this PR. Sorry, that was not intended.

[harrisjose]

Honestly surprised that alignment isn't possible/not included in extensions. I've been looking at the issues and there seems to be a lot of demand for this. Could we please get this PR merged?

[hanspagel]

We’re pretty thankful for all pull requests, including this one. ✨ That said, all recently merged pull requests led to bugs that we had to debug and fix. This PR introduces not only additional commands, but also changes to many default extensions (e. g. Paragraph, Headline), so it’s complex to review, debug, fix and maintain.

Please understand that merging this is a lot more than hitting a button and besides that we’re doing this for free, this kind of work distracts us from the (also unpaid) work on tiptap 2. Thanks for your understanding!

If you think (like I do) that we should put a lot more time into tiptap, consider to sponsor us. 💖 Thank you!

[JerryKusenberger]

@hanspagel can you please look at the solution provided by @waaronking ?

Here is the working example he attached: https://gist.github.com/waaronking/0e1712e1c1aea1d73b0cc2cb4129edde?ts=2

[harrisjose]

@hanspagel Sorry for commenting on this without taking a look at the entire PR first. Totally get what you mean by the maintenance overhead.

[hanspagel]

@hanspagel can you please look at the solution provided by @waaronking ?

Here is the working example he attached: https://gist.github.com/waaronking/0e1712e1c1aea1d73b0cc2cb4129edde?ts=2

Sure! It looks way simpler than the PR here, so I tried to implement the Gist (see the branch feature/alignment). This plugin wraps text in <span>s with display: block; (that’s needed to get the full width). But if you’re using another mark in the text (italic, bold, link) it will break to a new line.

I think this PR here is a better way to solve this.

[gregveres]

Well apparently a proper extension can be written given the current state of tiptap. Here is a component for Quasar (a vue based UI framework) that provides all the necessary extensions that I would expect from a good wysiwyg editor:

https://donotebase.github.io/quasar-tiptap/

I think I will be borrowing the extensions that these guys have written.

[hanspagel]

Thanks @tszulc for your work on this! Just wanted to let you know that this PR (and a handful of other PRs and Gists) made us consider text alignment early on for the development of tiptap 2 and I think we’ve found a pretty good solution to integrate this in the upcoming version. 👍

We try to focus our energy and time on tiptap 2 and won’t merge new features in tiptap 1, but I’ll leave this open in case someone is on the look out for such an extension for tiptap 1. Thanks!