Trix: Text align justify

[consti]

I would like to be able to add three buttons (text align left, text align justify, text align right).

Is this possible with the current version of trix?

Is there anyway to pass a class to a blockAttribute?

All I was able to do, was add a new textAttribute that has a custom tagName, which I can then style through CSS (display: block; text-align: justify;).

Trix.config.textAttributes.textAlignJustify = { tagName: 'div-text-align-justify' }

The problem with custom HTML tags is browser support. Because although it's defined in HTML 5, only Chrome (and Opera) provide support.

Thanks!

[alexeckermann]

I've just had a dabble at implementing text alignment for our implementation of trix. I've managed to make a shim to give the same functionality.

The idea is roughly the same, blockAttributes can have a className option. However, I realised that we'd only want one alignment attribute per block which is where I implemented a role option that will remove any other role matching attributes before adding a new one.

Note: This is a proof-of-concept shim. We'll want to fork and implement this properly.

alignments =
  alignRight: 'align-right'
  alignLeft: 'align-left'
  alignCenter: 'align-center'
  alignJustified: 'align-justified'

for name, className of alignments
  Trix.config.blockAttributes[name] =
    tagName: 'div'
    className: className
    role: 'alignment'
    test: (element) -> element.className?.indexOf(className) != -1

_createContainerElement = Trix.BlockView::createContainerElement

Trix.BlockView::createContainerElement = (depth) ->
  element = _createContainerElement.apply(@, [depth])
  classNames = []
  for attribute in @attributes
    classNames.push(className) if className = Trix.getBlockConfig(attribute)?.className
  element.className = classNames.join(' ')
  element

_addAttributes = Trix.Block::addAttribute

Trix.Block::addAttribute = (newAttribute) ->
  {role} = Trix.getBlockConfig(newAttribute)
  if role?
    filteredAttributes = []
    for attribute in @attributes
      filteredAttributes.push(attribute) unless Trix.getBlockConfig(attribute).role is role
    @attributes = filteredAttributes
  _addAttributes.apply(@, [newAttribute])

Thats rough but has some potential for a fork. I'm going to wear in the shim a little more to see if there is any simplifications to be made.

[consti]

Thanks @alexeckermann - this looks promising!

[javan]

Cool, @alexeckermann. I think support for className (or better yet, classList) and role would be a nice addition to both Trix.config.blockAttributes and Trix.config.textAttributes. https://github.com/basecamp/trix/issues/368#issuecomment-279180937 is another case where role would be useful.

Keep in mind that the document needs to round trip losslessly through Trix.HTMLParser. Parsing / loading serialized HTML should always produce an identical Trix.Document. Happy to review a PR if you want to put something together.

[alexeckermann]

@javan awesome. Yeah, I've been diving into the trix source to build up a mental context of how it all works. I do concur with the care needed around Trix.HTMLParser when making changes like this — and has been my primary hesitation on #202.

I'll branch out and build some tests to ensure that the HTML parser generates a document object consistently. Any quick pointers on this matter would be appreciated, ill base it on existing tests as a starting point.

I did consider classList but alas my habit for browser compatibility kicked in. It looks like we'll have no problems with the browser versions trix targets (ref: http://caniuse.com/#search=classList)

[javan]

I'll branch out and build some tests to ensure that the HTML parser generates a document object consistently. Any quick pointers on this matter would be appreciated, ill base it on existing tests as a starting point.

Adding new test fixtures is a good way to get started. Rendering and parsing tests are automatically created for each one. For example, this change:

--- a/test/src/test_helpers/fixtures/fixtures.coffee
+++ b/test/src/test_helpers/fixtures/fixtures.coffee
@@ -531,6 +531,10 @@ removeWhitespace = (string) ->
     document: createDocument(["a", { bold: true }, ["heading1"]], ["b", { italic: true, bold: true }, ["heading1"]])
     html: "<h1>#{blockComment}<strong>a</strong></h1><h1>#{blockComment}<strong><em>b</em></strong></h1>"

+  "alignRight block":
+    document: createDocument(["a", {}, ["alignRight"]])
+    html: """<div class="align-right">#{blockComment}a</div>"""
+

Causes these test failures:

[samvandamme]

Any progress on right aligned text?

[oskarolsson-jimdo]

The biggest blocker for doing this in a somewhat clean fashion is the reliance on position in the block attributes array. There are also seemingly a lot of assumptions on the fact that a block should not have multiple block attributes: e.g. with the usage of block.removeLastAttribute().

This clashes with the fact that block attributes have very different characteristics when one introduces alignment — since in comparison to all the other existing block attributes it shouldn't actually create an element, it should just attach to an existing one. It's like a "lesser" attribute, but the existing code has no concept of something like that.

Perhaps it would make sense to have some concept of "block types", which would be singular for a block, and then block attributes which would blocks could have multiple of.

[stale[bot]]

This issue has been automatically marked as stale after 90 days of inactivity. It will be closed if no further activity occurs.

[CrackerakiUA]

@oskarolsson-jimdo this is useful feature, how can this move on?

[MartinMcDermid]

Would love to see this implemented!

[jeissler]

Unfortunately text alignment is a very standard option which is missing from trix entirely—I see this is now a pretty old issue, but is what will keep us from using trix for our editor capability.