Add Text Alignment Support to WYSIWYG editor

[eliwilliamson]

- Do you want to request a feature or report a bug?
feature
- What is the current behavior?
there is no text alignment support in the WYSIWYG editor
- If the current behavior is a bug, please provide the steps to reproduce.
n/a
- What is the expected behavior?
a user should be able to center, justify, right, and left align text using the WYSIWYG editor

[erquhart]

It's not that there isn't alignment support in the editor, it's that there isn't alignment support in markdown. I'm not aware of any CMS working with static site generators that supports this.

I'm not saying it's impossible, just clarifying that it's far from a simple feature add. Worth discussing.

[dur41d]

This feature is important especially for other languages (like Arabic). I suggest implementing it as an optional extension to the markdown syntax. Maybe using the colon (:) suffix similar to right-aligned table columns.

[tech4him1]

@dur41d It can't be something that just the CMS supports, because then the static site generator couldn't parse it.

[tomrutgers]

IMHO only way this could work is rendering styled html with a text-align property, but that feels rather dirty. I feel this kinda thing should be fixed in the styling of the front-end, not in the actual data. That being said, from an editors point of view it feels weird not to have pretty basic text styling options.

[dur41d]

@dur41d It can't be something that just the CMS supports, because then the static site generator couldn't parse it.

I see. I think then the way to extend markdown is through the static site generator being used which is outside the control of netlifyCMS. For example Hugo provides shortcodes to generate custom html.

Now I don't know how NetlifyCMS will support these customizations (for example in the preview panel). Maybe it can allow the admin panel to be extended to by site admin so that these customizations can be supported on a case-by-case basis depending on the site generator.

[erquhart]

Funny, I came to the same conclusion as @tomrutgers over the last few days before reading this thread - for some things we may need to start outputting raw HTML that just works everywhere. Not being able to align text and images is pretty silly.

_{Sent with GitHawk}

[tech4him1]

@erquhart I would go for that, as long as there was an option to disable those alignment controls either specifically or CMS-wide. There are a lot of times I wouldn't want editors to control that -- but there are times I would.

[tomrutgers]

@tech4him1 isn’t that already the case with the buttons option of the markdown widget? Just need to add a couple of align options in there. Unless you mean disabling html input altogether.

[tech4him1]

Yup, the buttons attribute would be fine for that.

[speexy]

Color is another one of those things that are weird not to have. I'd love to be able to have a button for textcolor that adds styled html. I don't know how to tell our users of the cms that in 2019 they cannot mark text and make it purple or whatever they fancy.

[eclectic-coding]

Just noticed ButterCMS supports image alignment.

[erquhart]

Looks like they're doing something similar to my last comment, wrapping the aligned content in html, and they're adding a butter-cms specific class that you can target with css.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[erquhart]

We've gone back and forward on this over time. It really feels like editor components are the right tool for the job, but perhaps editor components should be able to exist outside of the editor component dropdown. For example, a default alignment component would have right, left, and center, and surface as three buttons readily available on the editor. The component itself would read and write HTML with inline styles as we've discussed above. A custom component could be provided if need be that does something different, maybe a shortcode for a specific CMS.

At the moment, I think we can handle multi-line HTML shortcodes, but I'm not positive. If so, this issue could be resolved by creating the component.

It's also becoming apparent to me that, whether through the dropdown or surfaced with the standard buttons, a single editor component should maybe be able to output more than one usable component.

[chris1000]

Wanted to see if there has been any progress?

[erezrokah]

Hi all, it's better to upvote the issue by clicking the 👍 button. That way we can sort issues by upvotes.

[doostinharrell]

I've used https://github.com/arve0/markdown-it-attrs on other projects to add classes to elements in markdown. Maybe we can look at incorporating it.

The next time I start a new Netlify CMS project for a client I'll see if I can work up a proof of concept.