Merge pull request #11794 from Turbo87/rendered-html

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

@@ -0,0 +1,63 @@
+import { render, settled } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+
+import { hbs } from 'ember-cli-htmlbars';
+
+import { setupRenderingTest } from 'crates-io/tests/helpers';
+
+module('Component | RenderedHtml', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('renders HTML', async function (assert) {
+    this.htmlContent = '<p>Hello <strong>world</strong>!</p>';
+
+    await render(hbs`<RenderedHtml @html={{this.htmlContent}} />`);
+
+    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) {
+    this.htmlContent = '<pre><code class="language-rust">fn main() {}</code></pre>';
+
+    await render(hbs`<RenderedHtml @html={{this.htmlContent}} />`);
+
+    assert.dom('pre').exists();
+    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) {
+    let mermaidService = this.owner.lookup('service:mermaid');
+    await mermaidService.loadTask.perform();
+
+    this.htmlContent = '<pre><code class="language-mermaid">graph TD\n    A --> B</code></pre>';
+
+    await render(hbs`<RenderedHtml @html={{this.htmlContent}} />`);
+
+    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');
+  });
+});