Multiple level heading

[Dallas62]

The interface of the editor is cool, but there is restricting feature in it. Such as not been able to select a specific heading as a user. (from h1 to h6).

We can select only 1 heading-level, default h1.

Something like: https://github.com/basecamp/trix/pull/861 would be great !

If there is multiple heading level by default or a way to add custom tags / buttons in the menu without rebuilding the whole library or template, that would be awesome.

Details

• Trix version: v1 and v2

[sajaddp]

@Dallas62 Did you find a way to fix this problem?

[Dallas62]

Not yet, since it's integrated with https://github.com/EasyCorp/EasyAdminBundle I keep this editor. But I limit the content to one level (h2), by using:

Trix.config.blockAttributes.heading1.tagName = 'h2';

Most of the times, my text are split into small part of text with an heading fields (structured content for mobile).

For blog article, h3 are remplaced by bold text... for user not SEO.

The new version of Trix might help with this issue.

[Merovex]

It looks like multi-level headings are OOB available with a bit of configuration in 2.0. I know that's not exactly what you're asking for, but you can't make a tool that covers all use cases OOB without bloat. Better to be lean and allow customization.

  document.addEventListener("trix-before-initialize", () => { /* Change Trix.config if you need */ 
    Trix.config.blockAttributes.heading2 = { 
      tagName: "h2", 
      terminal: true, 
      breakOnReturn: true 
    };
    Trix.config.blockAttributes.heading3 = { 
      tagName: "h3", 
      terminal: true, 
      breakOnReturn: true 
    };
  })

You may need a custom toolbar, which I did so I could use my own icons:

<button class="border" data-trix-attribute='heading2' data-trix-key='2'>
 SVG H2
</button>

The data-trix-key='2' allows the user to use CTRL+2 (or CMD+2 on Mac).