Suggestions for allowing content editors to center justify a tags content.

Do you have any suggestions for how mobildoc could allow users to center text?

or

Is there any way text-align: center; can be placed on elements?

[internalfx]

I have solved this for my users with the following ugly hack…

  toggleAlign: function (type) {
      if (!this.editor.hasCursor()) {
        return
      }

      let activeType = null
      let marker = this.editor.range.head.marker
      let parent = marker.parent
      let head = parent.headPosition()
      let tail = parent.tailPosition()
      let range = head.toRange(tail)
      this.editor.selectRange(range)

      let alignments = ['div-left', 'div-center', 'div-right', 'div-justify']
      for (let alignment of alignments) {
        if (this.activeMarkupTags.includes(alignment)) {
          activeType = alignment.split('-')[1]
        }
      }

      if (activeType != null) {
        this.editor.run((editor) => {
          editor.toggleMarkup('div')
        })
      }

      if (activeType !== type) {
        this.editor.run((editor) => {
          let markup = editor.builder.createMarkup('div', {style: `text-align: ${type};`})
          editor.toggleMarkup(markup)
        })
      }

      this.editor.selectRange(tail.toRange())
    }
  }

Which also required these modifications…

import * as tagNames from 'mobiledoc-dom-renderer/dist/commonjs/mobiledoc-dom-renderer/utils/tag-names'
import { VALID_ATTRIBUTES, VALID_MARKUP_TAGNAMES } from 'mobiledoc-kit/dist/commonjs/mobiledoc-kit/models/markup'

tagNames.isValidMarkerType = function () {
  return true
}

VALID_ATTRIBUTES.push('style')
VALID_ATTRIBUTES.push('target')
VALID_ATTRIBUTES.push('class')
VALID_ATTRIBUTES.push('alt')

VALID_MARKUP_TAGNAMES.push('small')
VALID_MARKUP_TAGNAMES.push('div')

I realize this totally breaks compatibility and portability of mobiledoc, but those were never my reasons for using it.

Thank you for the taking the time to respond.

[sdhull]

I finally figured it out! I’ll add it here for posterity (and any other ember.js devs who happen upon this issue): For some reason, ember-mobiledoc-dom-renderer namespaces the mobiledoc-dom-renderer, so the following works to override the isValidMarkerType method:

import * as tagNames from 'ember-mobiledoc-dom-renderer/mobiledoc-dom-renderer/utils/tag-names';

tagNames.isValidMarkerType = function() { return true; }; // for renderer