Skip to content

Adding \data function to attach data attributes to HTML elements#1698

Closed
ghost wants to merge 6 commits intoKaTeX:masterfrom
EngagedLearning:data-attributes
Closed

Adding \data function to attach data attributes to HTML elements#1698
ghost wants to merge 6 commits intoKaTeX:masterfrom
EngagedLearning:data-attributes

Conversation

@ghost
Copy link

@ghost ghost commented Sep 4, 2018

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.

@khanbot
Copy link

khanbot commented Sep 4, 2018

Hey @nickgravelyn,

Thanks for the PR! Mind signing our Contributor License Agreement?

When you've done so, go ahead and comment [clabot:check] and I'll check again.

Yours truly,
khanbot

@ghost
Copy link
Author

ghost commented Sep 4, 2018

[clabot:check]

@khanbot
Copy link

khanbot commented Sep 4, 2018

CLA signature looks good 👍

@codecov
Copy link

codecov bot commented Sep 4, 2018

Codecov Report

Merging #1698 into master will decrease coverage by 0.14%.
The diff coverage is 84.31%.

Impacted file tree graph

@@            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
Flag Coverage Δ
#screenshotter 87.91% <19.6%> (-0.83%) ⬇️
#test 85.22% <80.39%> (-0.1%) ⬇️
Impacted Files Coverage Δ
src/functions.js 100% <ø> (ø) ⬆️
src/Options.js 100% <100%> (ø) ⬆️
src/buildCommon.js 98.41% <100%> (ø) ⬆️
src/domTree.js 89.44% <61.11%> (-3.15%) ⬇️
src/functions/data.js 95% <95%> (ø)
src/functions/op.js 96.9% <0%> (-2.03%) ⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f71f469...ab56f5e. Read the comment docs.

htmlBuilder: (group, options) => {
const elements = html.buildExpression(
group.body,
options.withDataAttributes(group.dataAttributes),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've tried this out and it's close, but I end up with two options, neither works for our scenarios:

  1. We iterate through elements and 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.
  2. We iterate through elements without 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.

@k4b7
Copy link
Member

k4b7 commented Sep 5, 2018

@nickgravelyn thanks for the PR.

<span class="mspace"
style="margin-right:0.2222222222222222em;"
>
</span>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why don't spaces get the data attributes?

Copy link
Author

@ghost ghost Sep 5, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

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.
@ghost ghost force-pushed the data-attributes branch from af3af35 to ab56f5e Compare September 6, 2018 13:53
@ghost
Copy link
Author

ghost commented Sep 7, 2018

Looks like the CI failed due to a Flow error:

Error ------------------------------------- src/domTree.js:190:19

`VirtualNode` [1] is incompatible with `ChildType` [1].

   190| export class Span<ChildType: VirtualNode> implements HtmlDomNode {

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.

@MontyThibault
Copy link

Has there been any progress on this PR? I'm interested in adding interactivity to KaTeX-rendered documents as well.

@ghost
Copy link
Author

ghost commented Oct 13, 2018

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.

@ghost
Copy link
Author

ghost commented Nov 11, 2018

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.

@k4b7
Copy link
Member

k4b7 commented Dec 2, 2018

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.

I'm not sure either. I'll have to check out your branch and have closer look.

@ylemkimon ylemkimon mentioned this pull request Aug 20, 2019
@k4b7
Copy link
Member

k4b7 commented Sep 22, 2019

Closing in preference of #2082.

@k4b7 k4b7 closed this Sep 22, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants