DEV: Convert IframedHtml to gjs (#24836)

* DEV: Convert IframedHtml to gjs
* disable lint
* didUpdate
* no className
This commit is contained in:
Jarek Radosz 2024-03-11 11:55:32 +01:00 committed by GitHub
parent cfd72fa65c
commit b6819fd8c1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 30 additions and 26 deletions

View File

@ -0,0 +1,25 @@
import Component from "@glimmer/component";
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
import didUpdate from "@ember/render-modifiers/modifiers/did-update";
import { bind } from "discourse-common/utils/decorators";
export default class IframedHtml extends Component {
@bind
writeHtml(element) {
const iframeDoc = element.contentWindow.document;
iframeDoc.open("text/html", "replace");
iframeDoc.write(this.args.html);
iframeDoc.close();
}
<template>
{{! template-lint-disable require-iframe-title }}
<iframe
{{didInsert this.writeHtml}}
{{didUpdate this.witeHtml @html}}
sandbox="allow-same-origin"
class={{if @html "iframed-html"}}
...attributes
></iframe>
</template>
}

View File

@ -1,17 +0,0 @@
import Component from "@ember/component";
export default Component.extend({
tagName: "iframe",
html: null,
classNameBindings: ["html:iframed-html"],
sandbox: "allow-same-origin",
attributeBindings: ["sandbox:sandbox"],
didRender() {
this._super(...arguments);
const iframeDoc = this.element.contentWindow.document;
iframeDoc.open("text/html", "replace");
iframeDoc.write(this.html);
iframeDoc.close();
},
});

View File

@ -2,7 +2,6 @@ import { render } from "@ember/test-helpers";
import { hbs } from "ember-cli-htmlbars";
import { module, test } from "qunit";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { queryAll } from "discourse/tests/helpers/qunit-helpers";
module("Integration | Component | iframed-html", function (hooks) {
setupRenderingTest(hooks);
@ -12,16 +11,13 @@ module("Integration | Component | iframed-html", function (hooks) {
hbs`<IframedHtml @html="<h1 id='find-me'>hello</h1>" class="this-is-an-iframe" />`
);
const iframe = queryAll("iframe.this-is-an-iframe");
assert.strictEqual(iframe.length, 1, "inserts an iframe");
assert.ok(
iframe[0].classList.contains("this-is-an-iframe"),
"Adds className to the iframes classList"
);
assert
.dom("iframe.this-is-an-iframe")
.exists({ count: 1 }, "inserts an iframe");
const iframe = document.querySelector(".iframed-html");
assert.strictEqual(
iframe[0].contentWindow.document.body.querySelectorAll("#find-me").length,
iframe.contentWindow.document.body.querySelectorAll("#find-me").length,
1,
"inserts the passed in html into the iframe"
);