Adding \data function to attach data attributes to HTML elements#1698
Adding \data function to attach data attributes to HTML elements#1698ghost wants to merge 6 commits intoKaTeX:masterfrom
Conversation
|
Hey @nickgravelyn, Thanks for the PR! Mind signing our Contributor License Agreement? When you've done so, go ahead and comment Yours truly, |
|
[clabot:check] |
|
CLA signature looks good 👍 |
Codecov Report
@@ Coverage Diff @@
## master #1698 +/- ##
==========================================
- Coverage 93.88% 93.74% -0.15%
==========================================
Files 78 79 +1
Lines 4564 4617 +53
Branches 802 818 +16
==========================================
+ Hits 4285 4328 +43
- Misses 246 252 +6
- Partials 33 37 +4
Continue to review full report at Codecov.
|
src/functions/data.js
Outdated
| htmlBuilder: (group, options) => { | ||
| const elements = html.buildExpression( | ||
| group.body, | ||
| options.withDataAttributes(group.dataAttributes), |
There was a problem hiding this comment.
I don't think we should be passing this as options. buildExpression has generated the elements, why not update them here? I worry that passing options will result in descendent elements also getting these data attributes.
There was a problem hiding this comment.
I can definitely take a look at this and see what makes sense. In my basic testing buildExpression was returning SymbolNodes which don’t have attribute support by default so that would still need to be added. I also want to make sure things like fraction bars and other visible elements get the appropriate attributes. But assuming I can get that working it does make sense to have this layer handle all of the data attributes so it’s less tangled into the general code base.
There was a problem hiding this comment.
I've tried this out and it's close, but I end up with two options, neither works for our scenarios:
- We iterate through
elementsand their children, applying the attributes. This gets our attributes applied to all children but also applies them to non-visual DOM elements used for spacing and alignment which is not good for us since it makes those invisible elements considered part of the interactive DOM. - We iterate through
elementswithout looking at children and apply the attributes. This solves the above problem but then naturally means for things like\data{modelid=1}{\frac{3}{4}}we don't get our attribute applied to the 3, 4, or the fraction bar which is something we want so that we can tie all three of those visual elements back to our single model ID.
Without writing a series of special cases in the data function handler (e.g. apply the attribute to elements that have .text or one of a set of special class names), I'm unsure of a way to have it implement this logic without using Options. I can make the Options object have a more generic attributes instead of dataAttributes and wire it through the existing attribute handling code, but that's the only way I've found to get the full behavior we need for interactivity.
|
@nickgravelyn thanks for the PR. |
| <span class="mspace" | ||
| style="margin-right:0.2222222222222222em;" | ||
| > | ||
| </span> |
There was a problem hiding this comment.
Why don't spaces get the data attributes?
There was a problem hiding this comment.
You know, I wasn't totally sure but it wasn't something that we needed (or that really made sense). Our primary use case is attaching a "model ID" to DOM elements so we can do things like selection and interaction, and we didn't need to mark up white space. It also isn't clear which data attributes the space should get, for example in \data{a=1}{3}\data{a=2}{+}\data{a=3}{4} the spaces between the 3, +, and 4 don't really make sense to have any particular value for data-a since the LaTeX doesn't really define the spacing.
997ac60 to
af3af35
Compare
New syntax for \data{attr1=value1, attr2=value2}{1+2} that puts data
attributes on the elements on all children. This is used for enabling
interactivity with KaTeX rendered content.
af3af35 to
ab56f5e
Compare
|
Looks like the CI failed due to a Flow error: I looked at this for a while but I can't figure out what the issue is, probably because I'm just new to Flow. If anyone can provide guidance I'll happily go fix it up. |
|
Has there been any progress on this PR? I'm interested in adding interactivity to KaTeX-rendered documents as well. |
|
I was waiting on #1711 to get merged so I could see about leveraging those changes, and I also need to figure out those flow issues. Just haven’t had the time yet. |
|
I've updated the PR with latest master and switched to the new "raw" arg type implemented in #1711. I still have no idea how to fix the failing Flow issue because, frankly, it's not a very helpful message. I'd love to get this merged but I do need help deciphering the Flow failure. Also looks like the CI test failed due to the repository group being Katex instead of Khan, which looks like it'll get fixed with #1781. |
I'm not sure either. I'll have to check out your branch and have closer look. |
|
Closing in preference of #2082. |
New function for
\data{attr1=value1, attr2=value2}{1+2}that puts data attributes on the elements on all children. This is used for enabling interactivity with KaTeX rendered content. We use this so that we can pass in data model specific IDs through KaTeX which we can then use to enable interactivity with the generated DOM, using data attributes as our method of tying generated DOM elements back to our model of the mathematics.Not sure if this type of function is desired in KaTeX but it seemed fairly generic so might be useful to others. No harm if this isn't something the maintainers want to merge into KaTeX master.
I added a couple simple snapshot tests and tried to do the correct Flow annotations, but I'm not super familiar with Flow so I may have done something in a less than optimal way somewhere in here.