Set Title, H1 tags independently

I have…

I’m submitting a…

  • [ ] Regression (a behavior that stopped working in a new release)
  • [ ] Bug report
  • [ ] Performance issue
  • [x ] Documentation issue or request

Hi, is there a way of creating a custom H1 tag in squidex so that the Title and H1 tags can be separate? Currently the Title field includes the H1 tag.

Thanks

You mean the rich text editor, right? I don’t think so, it can be customized a lot with custom editors but in the end it is a predefined behavior with the default setup.

Of course you can make a custom field to store the title and then only manage the body in the rich text. I also recommend you to go with markdowns. Then you have the freedom to render the tags independently and as you want. It is relatively straight forward to extend markdown renderers, so that h1 becomes h2, h2 becomes h3 and so on.

Thanks for the reply Seb. I’ll look into this

1 Like

Which programming language do you use? I have already done this myself.

C# aspnet core. Any help is well appreciated

I am using markdig: https://github.com/xoofx/markdig

When you create a renderer you can register custom extensions:

var renderer = new HtmlRenderer(writer);
renderer.ObjectRenderers.RemoveAll(x => x is HeadingRenderer);
renderer.ObjectRenderers.Add(new CustomHeadingRenderer

I think this renderer increases all heading levels by one:

public sealed class CustomHeadingRenderer : HtmlObjectRenderer<HeadingBlock>
{
	private static readonly string[] HeadingTexts =
	{
		"h2",
		"h3",
		"h4",
		"h5",
		"h6",
	};

	protected override void Write(HtmlRenderer renderer, HeadingBlock obj)
	{
		var headingText =
			obj.Level > 0 &&
			obj.Level <= 6
			? HeadingTexts[obj.Level - 1]
			: "<h" + obj.Level.ToString(CultureInfo.InvariantCulture);

		if (renderer.EnableHtmlForBlock)
		{
			renderer.Write("<").Write(headingText).WriteAttributes(obj).Write(">");
		}

		renderer.WriteLeafInline(obj);

		if (renderer.EnableHtmlForBlock)
		{
			renderer.Write("</").Write(headingText).WriteLine(">");
		}
	}
}