Trix: Custom blocks of content (like math equations)

[mitar]

It would be great to support custom block of content, where from the perspective of Trix it would be some type of content (like <math>1+1</math>) but in reality it would be rendered into a custom HTML (with for example MathJax). So that there would be some API to wrap that block and talk to it. This would then allow custom HTML tags which are rendered with something else under the hood. (Math equations is just an example.)

[mitar]

Comment? Followup? Feedback?

[javan]

Sorry about that. I think your feature-request-not-issue falls under wanting to configure custom formatting attributes / custom toolbar, which we'd like to get to and is already covered in the Roadmap Questions issue.

Technically, I think what you're asking for is already possible:

Trix.config.textAttributes.math = { tagName: "math" }

element.editor.insertString("1+1")
element.editor.setSelectedRange([0, 3])
element.editor.activateAttribute("math")

element.value
=> "<div><math>1+1</math></div>"

[mitar]

The issue is that <math>1+1</math> would then be converted to something more complicated, like:

<span id="MathJax-Element-16-Frame" tabindex="0" class="mjx-chtml" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;><mn>1</mn><mo>+</mo><mn>1</mn></math>" style="font-size: 116%;"><span id="MJXc-Node-454" class="mjx-math" role="math" aria-hidden="true"><span id="MJXc-Node-455" class="mjx-mrow"><span id="MJXc-Node-456" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.377em; padding-bottom: 0.339em;">1</span></span><span id="MJXc-Node-457" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.294em; padding-bottom: 0.421em;">+</span></span><span id="MJXc-Node-458" class="mjx-mn MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.377em; padding-bottom: 0.339em;">1</span></span></span></span><span class="MJX_Assistive_MathML" aria-readonly="true"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><mn>1</mn><mo>+</mo><mn>1</mn></math></span></span>

That is what MathJax does. What this ticket was about was that I would like that while this is rendered and displayed to the user in this more complicated way, that MathJax understands and knows that user should not be allowed to edit directly the complicated code, but only the original tag and content there (so maybe when you put a cursor on that it converts back to <math>1+1</math>. Also, when this is stored to the server it should also still be stored like <math>1+1</math>.

[mitar]

But math equations are just an example. You can imagine other similar content, like code editor where code is being syntax highlighted.

See also MathQuill for an example of a WYSIWYG editor. It would be great if I could enter inside of the Trix the MathQuill mode of writing an equation.

[javan]

Sounds interesting, but I feel it's outside of Trix's stated description: _A Rich Text Editor for Everyday Writing_. Specifically, the _everyday_ part. You could consider trying to implement something like this using content attachments. Example here: https://github.com/basecamp/trix/issues/120#issuecomment-161064186

[siuying]

@javan Do you mean it would work, if I have implement a custom <math> element with web component? I have some custom elements like <todo> which is essentially an input checkbox with some custom attribute, is it possible to integrate it with Trix at this time?

[federicosan]

Do you know if trixeditor can be used with mathjax?

[idabmat]

I did implement a button for math formulaes using mathjax with a previous version of Trix. I'm not sure how much has changed since then but you can check the code here:
https://github.com/talimhq/shoshin/blob/master/app/assets/javascripts/trix-math.js

Hope this helps