How to have an ordered list with lowercase letters(<ol type="a">)?

[bunufi]

Currently, it seems that Trix only supports ordered lists with numbers, but the use-case in our app requires an ordered list with lowercase letters.

As far as I know, such feature is not supported in Trix.

Is it possible to expand Trix/ActionText in app to include such feature? And if yes, I would really be interested to learn how.

Thanks in advance.

[krisnaw]

Any solution for this?

[haroldus-]

The issue is with the createContainerElement function, which (to my mind) inexplicably recreates an object for use with the makeElement function instead of just using the object from config.

In recreating the object, any className or attributes or style etc. values you set for your custom list provided to Trix.config.blockAttributes is lost. For example, the following will not work (even though you would expect it to):

const { blockAttributes } = Trix.config
const tagName = (element) => element?.tagName?.toLowerCase()
blockAttributes.lowerAlphaList = {
  attributes: {
    type: "a"
  },
  tagName: "ol",
  parse: false,
}
blockAttributes.lowerAlpha = {
  tagName: "li",
  listAttribute: "lowerAlphaList",
  group: false,
  nestable: true,
  test(element) {
    return tagName(element.parentNode) === blockAttributes[this.listAttribute].tagName
  },
}

However, one can work around this by replacing the createContainerElement function with something that just uses the object from config:

Trix.views.BlockView.prototype.createContainerElement = function(depth) {
  const attributeName = this.attributes[depth]
  const blockConfig = getBlockConfig(attributeName)

  if (depth === 0 && this.block.isRTL()) {
    blockConfig.attributes = { ...{ dir: "rtl" }, ...blockConfig.attributes }
  }
  if (attributeName === "attachmentGallery") {
    const size = this.block.getBlockBreakPosition()
    className = `${css.attachmentGallery} ${css.attachmentGallery}--${size}`
    blockConfig.className = [className, blockConfig.className].join(" ").trim()
  }
  return makeElement(blockConfig)
}

Note that in your patch file, you will need to copy the getBlockConfig function and the makeElement function since these are not available via Trix.

Now you can add a lower alpha button to your toolbar, for example:

const customToolbarHTML = `
  <div class="trix-button-row">
    <span class="trix-button-group trix-button-group--block-tools" data-trix-button-group="block-tools">
      <button type="button" class="trix-button trix-button--icon trix-button--icon-lower-alpha-list" data-trix-attribute="lowerAlpha" title="Lower Alpha List" tabindex="-1">Lower Alpha List</button>
    </span>
  </div>
`
Trix.config.toolbar.getDefaultHTML = () => customToolbarHTML