Anki's handling of MathJax and clozes breaks Cloze Overlapper

[zjosua]

Problem description

The changes in https://github.com/ankitects/anki/commit/389bf07b52f3b7d8ba3bb5f4e01732036f49a2a0 break Cloze Overlapper. The cards now look something like this:

Checklist

• [x] I've restarted Anki to see if it helps
• [ ] I've verified that I use the latest version of the add-on by redownloading it from AnkiWeb
• [x] I've built the add-on (9eabb6a9d2a6807595478647fd968e8e4bac86fc) with aab
• [ ] I've verified that I use the latest version of Anki by checking at https://apps.ankiweb.net#download
• [x] I'm running Anki from source from the mentioned commit and https://github.com/ankitects/anki/commit/9bb0348fdd41b1b50fa07b64405c72c3ff263f98 (the most recent commit at the time)
• [x] I've tried to disable other add-ons to see if there are any interactions present
• [ ] My issue disappears when I hold shift while starting Anki.
• [x] I've checked if anyone else reported this problem before by looking through the issue reports. I also checked to see if there is a section about known issues in the add-on description, documentation, or README.

Information about your Anki set-up

If you are using Anki 2.1

Anki 2.1.17 (389bf07b) Python 3.7.6 Qt 5.12.5 PyQt 5.13.2
Platform: Linux
Flags: frz=False ao=True sv=1

Add-ons:

Extended Card Stats During Review (disabled)
Extended Schema Hash (disabled)
Field History (disabled)
Image Occlusion Enhanced for Anki 21 alpha (disabled)
Search and Replace Tags (disabled)
Symbols (disabled)
Anki Habitica for 21 (disabled)
Trigger and actions change one card depending on what occurs on another card (disabled)
Export cards selected in the Browser (disabled)
Progress Bar (disabled)
Highlight Search Results in the Browser (disabled)
Batch Editing (disabled)
Add Hyperlink (disabled)
Let it Snow (disabled)
Frozen Fields (disabled)
Advanced Browser (disabled)
Hierarchical Tags (disabled)
Anki MC (disabled)
Cloze Overlapper
conflate_excess_ease (disabled)
hourly_breakdown (disabled)
Mini Format Pack (disabled)
Pop-up Dictionary (disabled)
print_as_flashcards (disabled)
Puppy Reinforcement (disabled)
Review Heatmap (disabled)
right_hand_reviews (disabled)
tagedit_subtag_completer (disabled)
visual_feedback (disabled)
Night Mode (disabled)

• OS: Debian
• version: bullseye

Error message (if any)

No errors, but I get this on the console. I'm not sure if it's related though, because I got it with previous commits of Anki as well, where the overlapping cloze cards were still displayed correctly.

template rendering didn't match - please report:
'<div class="front">
  <div class="title">the list</div>
  <div class="text">
    <div><span class=cloze>[...]</span></div><div>2. is</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div>

    <div class="hidden">
       <div>1. this<div>2. is</div><div>3. some</div><div>4. list</div><div>5. with</div><div>6. some</div><div>7. items</div></div>
    </div>
  </div>
</div>'
'<div class="front">
  <div class="title">the list</div>
  <div class="text">
    <div><span class=cloze>[...]</span></div><div>2. is</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div>
    <div>1. this</div><div>2. is</div><div>3. some</div><div>...</div><div>...</div><div>...</div><div>...</div>
    <div>...</div><div>2. is</div><div>3. some</div><div>4. list</div><div>...</div><div>...</div><div>...</div>
    <div>...</div><div>...</div><div>3. some</div><div>4. list</div><div>5. with</div><div>...</div><div>...</div>
    <div>...</div><div>...</div><div>...</div><div>4. list</div><div>5. with</div><div>6. some</div><div>...</div>
    <div>...</div><div>...</div><div>...</div><div>...</div><div>5. with</div><div>6. some</div><div>7. items</div>
    <div>...</div><div>...</div><div>...</div><div>...</div><div>...</div><div>6. some</div><div>7. items</div>

    <div class="hidden">
       <div>1. this<div>2. is</div><div>3. some</div><div>4. list</div><div>5. with</div><div>6. some</div><div>7. items</div></div>
    </div>
  </div>
</div>'
template rendering didn't match - please report:
'<div class="back">
  <div class="title">the list</div>
  <div class="text">
    <div><span class=cloze>1. this</span></div><div>2. is</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div>

    <div class="hidden">1. this<div>2. is</div><div>3. some</div><div>4. list</div><div>5. with</div><div>6. some</div><div>7. items</div></div>
  </div>
  <div class="extra"><hr></div>
  <div class="text"><div class="fullhint">
<a class=hint href="#"
onclick="this.style.display='none';document.getElementById('hint2072769696').style.display='block';return false;">
Show Original</a><div id="hint2072769696" class=hint style="display: none">1. this<div>2. is</div><div>3. some</div><div>4. list</div><div>5. with</div><div>6. some</div><div>7. items</div></div>
</div></div>
  <div class="extra">

  </div>
</div>
<script>
  // remove cloze syntax from revealed hint
  var hint = document.querySelector('.fullhint>[id^="hint"]')
  var html = hint.innerHTML.replace(/\[\[oc(\d+)::(.*?)(::(.*?))?\]\]/mg, "$2")
  hint.innerHTML = html
  // scroll to cloze
  document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function(){
      const cloze1 = document.getElementsByClassName("cloze")[0];
      const rect = cloze1.getBoundingClientRect();
      const absTop = rect.top + window.pageYOffset;
      const absBot = rect.bottom + window.pageYOffset;
      if (absBot >= window.innerHeight) {
        const height = rect.top - rect.bottom
        const middle = absTop - (window.innerHeight/2) - (height/2);
        window.scrollTo(0, middle);};
    }, 1);
  }, false);
</script>'
'<div class="back">
  <div class="title">the list</div>
  <div class="text">
    <div><span class=cloze>1. this</span></div><div>2. is</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div>
    <div>1. this</div><div>2. is</div><div>3. some</div><div>...</div><div>...</div><div>...</div><div>...</div>
    <div>...</div><div>2. is</div><div>3. some</div><div>4. list</div><div>...</div><div>...</div><div>...</div>
    <div>...</div><div>...</div><div>3. some</div><div>4. list</div><div>5. with</div><div>...</div><div>...</div>
    <div>...</div><div>...</div><div>...</div><div>4. list</div><div>5. with</div><div>6. some</div><div>...</div>
    <div>...</div><div>...</div><div>...</div><div>...</div><div>5. with</div><div>6. some</div><div>7. items</div>
    <div>...</div><div>...</div><div>...</div><div>...</div><div>...</div><div>6. some</div><div>7. items</div>

    <div class="hidden">1. this<div>2. is</div><div>3. some</div><div>4. list</div><div>5. with</div><div>6. some</div><div>7. items</div></div>
  </div>
  <div class="extra"><hr></div>
  <div class="text"><div class="fullhint">
<a class=hint href="#"
onclick="this.style.display='none';
document.getElementById('hint915aeacba8c04fe6').style.display='block';
return false;">
1. this<div>2. is</div><div>3. some</div><div>4. list</div><div>5. with</div><div>6. some</div><div>7. items</div></a>
<div id="hint915aeacba8c04fe6" class=hint style="display: none">Show Original</div>
</div></div>
  <div class="extra">

  </div>
</div>
<script>
  // remove cloze syntax from revealed hint
  var hint = document.querySelector('.fullhint>[id^="hint"]')
  var html = hint.innerHTML.replace(/\[\[oc(\d+)::(.*?)(::(.*?))?\]\]/mg, "$2")
  hint.innerHTML = html
  // scroll to cloze
  document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function(){
      const cloze1 = document.getElementsByClassName("cloze")[0];
      const rect = cloze1.getBoundingClientRect();
      const absTop = rect.top + window.pageYOffset;
      const absBot = rect.bottom + window.pageYOffset;
      if (absBot >= window.innerHeight) {
        const height = rect.top - rect.bottom
        const middle = absTop - (window.innerHeight/2) - (height/2);
        window.scrollTo(0, middle);};
    }, 1);
  }, false);
</script>'

[dae]

This was an Anki bug and should be fixed in the latest git.

[zjosua]

Yes, it's working for me.