Excalidraw

app/components/excalidraw.hbs

@@ -0,0 +1,2 @@
+<div class="container" {{did-insert this.load.perform}}>
+</div>

app/components/excalidraw.ts

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency';
+import RSVP from 'rsvp';
+
+export default class ExcalidrawComponent extends Component {
+    @tracked isLoaded = false;
+    deferredIframeLoad = RSVP.defer();
+
+    load = task({ enqueue: true }, async (element: HTMLElement) => {
+        const iframe = document.createElement('iframe');
+        iframe.src = 'https://excalidraw.com';
+        iframe.width = '100%';
+        iframe.height = '400px';
+        iframe.style.border = 'none';
+        iframe.onload = () => {
+            this.isLoaded = true;
+            this.deferredIframeLoad.resolve();
+        };
+        element.appendChild(iframe);
+        await this.deferredIframeLoad.promise;
+        console.log('Iframe has loaded.');
+    });
+}

app/templates/application.hbs

@@ -3,4 +3,5 @@
 <OpenModalButton />
 <br/><br/>
 <UserInfo />
+<Excalidraw />
 {{outlet}}

ember-cli-build.js

@@ -4,7 +4,11 @@ const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
 module.exports = function (defaults) {
   const app = new EmberApp(defaults, {
-    // Add options here
+    babel: {
+      plugins: [
+        require.resolve('ember-concurrency/async-arrow-task-transform'),
+      ],
+    },
   });
 
   return app.toTree();

package.json

@@ -29,6 +29,7 @@
     "@babel/eslint-parser": "^7.23.3",
     "@babel/plugin-proposal-decorators": "^7.23.6",
     "@ember/optional-features": "^2.0.0",
+    "@ember/render-modifiers": "^2.1.0",
     "@ember/string": "^3.1.1",
     "@ember/test-helpers": "^3.2.1",
     "@glimmer/component": "^1.1.2",
@@ -76,6 +77,7 @@
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
     "ember-cli-typescript": "^5.3.0",
+    "ember-concurrency": "^4.0.2",
     "ember-data": "~5.3.0",
     "ember-fetch": "^8.1.2",
     "ember-load-initializers": "^2.1.2",

tests/integration/components/excalidraw-test.ts

@@ -0,0 +1,36 @@
+// tests/integration/components/input-modal-test.ts
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { click, find, render, settled, triggerKeyEvent, waitFor, waitUntil } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | excalidraw', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders iframe with excalidraw', async function (assert) {
+    await render(hbs`<Excalidraw />`);
+    await settled();
+    assert.dom('iframe').exists();
+    assert.dom('iframe').hasAttribute('src', 'https://excalidraw.com');
+
+  });
+
+  test('it renders an iframe and selects rectangle tool', async function (assert) {
+    await render(hbs`<Excalidraw />`);
+
+    const iframe = find('iframe') as HTMLIFrameElement;
+
+    await new Promise((resolve) => {
+      iframe.onload = resolve;
+    });
+
+    const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document;
+    const label = iframeDocument?.querySelector('label[title="Rectangle — R or 2"]');
+
+    console.log('iframe', label, iframeDocument);
+
+    await click(label as Element);
+
+
+  });
+});