Support Text Align at Block Level

[cdownard]

Have you figured out how to do text align? I've been struggling to implement that. Your repo is the most complete example I've found. Curious how you're solving left right center and justify.

[sstur]

I've thought about this but not implemented anything yet. The problem is two-fold:

1. I need to store the align value on the block but there is not currently any way to attach meta data on blocks (that is being addressed in https://github.com/facebook/draft-js/pull/216)
2. There is not really any semantic equivalent for this in HTML/Markdown. Technically, there's <center> in HTML but it's not wise to use it and there's nothing for left/right

Most similar editors tend to use <p style="text-align: right"> (and similar with h1, etc).

I am OK with this if we can get item 1 solved with the block meta-data. I think I'll wait for that to land first.

[sstur]

The first item above about Metadata for ContentBlock objects has landed in draft-js v0.8 so that unblocks this issue and puts in on my near-term roadmap.

The issue remains: how to represent the alignment in HTML or Markdown. In HTML we can use an inline style for now.

Ultimately, my plan for that is to let you, the implementor, define that behavior when you add react-rte to your project. You should be able to pass some function as a prop (which will then be passed to draft-js-export-html and draft-js-eport-markdown, etc). The default might be to add style="text-align: center" to the HTML but maybe you want to wrap it in a <center> or something. Totally customizable.

[alexxmde-zz]

@sstur could you provide an example or something as a starting point for me on how to do this customization? This feature is crucial in the project i'm working on

[quanvuong]

Is there any update on when text-alignment will be supported?

[quanvuong]

Any chance there's an update on text-alignment? Thanks so much!

[imperio59]

I would love to see this feature too! Happy to help implement if you give me some pointers of where to start...

[andersryanc]

In an effort to try and help push this task forward, I created some code (link above). Let me know if this is the right direction. I'm happy to make any necessary adjustments to get this merged into the project! As @sstur mentioned wanting to save this alignment data as part of the block metadata, I did that. That being said, I'm not sure that piece of it is 100% correct, as I was having a hard time finding out much information about how that's meant to be used in the Draft JS docs.

Here is what it looks like though in the local dev environment:

As you may notice in this GIF, one last piece I need to figure out is how to style the text in the editor itself...

[andersryanc]

I made a few additional improvements (mostly to fix the alignment inside the editor). You should see the compare page for my branch, instead of just the referenced commit above:

https://github.com/sstur/react-rte/compare/master...andersryanc:feature/block-level-text-align

[andersryanc]

A couple more improvements:

• Added react and react-dom to devDependencies (since the project doesn't really work without them being installed and they are only peerDeps right now).

• Changed prepublish script to prepare (so I could install the package directly from GitHub for testing... npm builds it locally during the install if you use that)

• Added my custom blockStyleFns (which are used in the demo) to the main package's exports so I could use them in my own project... if you'd rather, I could just rip those out and copy them to my project, but figured people would probably want a default behavior exposed for this sort of thing. It might be nice to even have it do this automatically without you needing to import those and apply them again as the implementor. This one is somewhat related to your comment above:

  Ultimately, my plan for that is to let you, the implementor, define that behavior when you add react-rte to your project.

[Tellisense]

@sstur the feature Ryan Anderson @andersryanc had build is really usefully, do you think you can take a look at his code and integrate that into your repo? Thanks a bunch, we are using this for a CMS and is working out great for us, thanks so much for all your input!

[andersryanc]

I just submitted a PR for this: https://github.com/sstur/react-rte/pull/356

[alguse]

@andersryanc Hi! I was just wondering if this is also valid for the markdown functionality? I don't see any changes on the markdown and since that's what I'm saving into my DB, every time I load the data the alignments are lost... Could I be missing something? Or this was just an solution for HTML exporting? Thanks

[andersryanc]

Sorry, no, I did not test Markdown.

[KZTN]

I just submitted a PR for this: #356

it helped me A LOT. thanks!