components/rendered-html: Fix modifier triggering on @html changes

Author: Turbo87

app/components/rendered-html.hbs

@@ -4,9 +4,9 @@
 --}}
 <TextContent
   ...attributes
-  {{highlight-syntax selector="pre > code:not(.language-mermaid)"}}
-  {{update-source-media this.colorScheme.resolvedScheme}}
-  {{render-mermaids}}
+  {{highlight-syntax @html selector="pre > code:not(.language-mermaid)"}}
+  {{update-source-media this.colorScheme.resolvedScheme @html}}
+  {{render-mermaids @html}}
 >
   {{html-safe @html}}
 </TextContent>

app/modifiers/highlight-syntax.js

@@ -42,7 +42,10 @@ hljs.registerAliases('markup', { languageName: 'xml' });
 // common aliases
 hljs.registerAliases('rs', { languageName: 'rust' });
 
-export default modifier((element, _, { selector }) => {
+export default modifier((element, [input], { selector }) => {
+  // Consume the input argument to ensure the modifier reruns when it changes
+  void input;
+
   let elements = selector ? element.querySelectorAll(selector) : [element];
 
   for (let element of elements) {

app/modifiers/render-mermaids.js

@@ -7,7 +7,10 @@ export default class ScrollPositionModifier extends Modifier {
   @service notifications;
   @service mermaid;
 
-  modify(element) {
+  modify(element, [input]) {
+    // Consume the input argument to ensure the modifier reruns when it changes
+    void input;
+
     // If the `mermaid` library is loaded (which should have happened in the controller)
     let mermaid = this.mermaid.loadTask.lastSuccessful?.value;
     if (mermaid) {

app/modifiers/update-source-media.js

@@ -6,7 +6,10 @@ import { modifier } from 'ember-modifier';
  *
  * The code was adapted from https://larsmagnus.co/blog/how-to-make-images-react-to-light-and-dark-mode.
  */
-export default modifier((element, [colorPreference]) => {
+export default modifier((element, [colorPreference, input]) => {
+  // Consume the input argument to ensure the modifier reruns when it changes
+  void input;
+
   let pictures = element.querySelectorAll('picture');
 
   pictures.forEach(picture => {

tests/components/rendered-html-test.js

@@ -1,4 +1,4 @@
-import { render } from '@ember/test-helpers';
+import { render, settled } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 
 import { hbs } from 'ember-cli-htmlbars';
@@ -15,6 +15,12 @@ module('Component | RenderedHtml', function (hooks) {
 
     assert.dom('p').hasText('Hello world!');
     assert.dom('strong').hasText('world');
+
+    this.set('htmlContent', '<p>Updated <em>content</em></p>');
+    await settled();
+
+    assert.dom('p').hasText('Updated content');
+    assert.dom('em').hasText('content');
   });
 
   test('renders code blocks with syntax highlighting', async function (assert) {
@@ -26,6 +32,14 @@ module('Component | RenderedHtml', function (hooks) {
     assert.dom('code.language-rust').hasText('fn main() {}');
     assert.dom('.hljs-keyword').hasText('fn');
     assert.dom('.hljs-title').hasText('main');
+
+    this.set('htmlContent', '<pre><code class="language-rust">let x = 42;</code></pre>');
+    await settled();
+
+    assert.dom('code.language-rust').hasText('let x = 42;');
+    assert.dom('.hljs-keyword').hasText('let');
+    assert.dom('.hljs-variable').hasText('x');
+    assert.dom('.hljs-number').hasText('42');
   });
 
   test('renders mermaid diagrams', async function (assert) {
@@ -39,5 +53,11 @@ module('Component | RenderedHtml', function (hooks) {
     assert.dom('pre').exists();
     assert.dom('code.language-mermaid svg.flowchart').exists();
     assert.dom('.nodeLabel').hasText('A');
+
+    this.set('htmlContent', '<pre><code class="language-mermaid">graph TD\n    X --> Y</code></pre>');
+    await settled();
+
+    assert.dom('code.language-mermaid svg.flowchart').exists();
+    assert.dom('.nodeLabel').hasText('X');
   });
 });