# Having some issues with inserting iframes using Discourse's Ember API

**URL:** https://meta.discourse.org/t/having-some-issues-with-inserting-iframes-using-discourses-ember-api/300572
**Category:** Development
**Tags:** ember
**Created:** [March 22, 2024, 6:15pm UTC](https://meta.discourse.org/t/having-some-issues-with-inserting-iframes-using-discourses-ember-api/300572 "2024-03-22T18:15:33Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [March 22, 2024, 6:15pm UTC](https://meta.discourse.org/t/having-some-issues-with-inserting-iframes-using-discourses-ember-api/300572/1 "2024-03-22T18:15:33Z")

</div>

The plugin puts an i-frame into Discourse and [you can find it here](https://github.com/focallocal/dcs-discourse-plugin)

I keep it more or less updated to the latest version so the breaking change came recently. We’re currently running 3.3.0.beta1-dev.

In console i get 3 error messages which look like this:

```
docuss.js:225 Uncaught (in promise) ReferenceError: Ember is not defined
at docuss.js:225:1

```

Most probably this Ember object has been removed from the Discourse API in a recent version of Discourse, so this error comes after a Discourse upgrade effecting those objects.

Here’s all the fixes i made:

Change 1

assets\javascripts\discourse\initializers\docuss.js.es6  
line 232

old:

```plaintext
const afterRender = res =>
  new Promise(resolve => {
    // @ts-ignore
    Ember.run.schedule('afterRender', null, () => resolve(res))

```

new:

```plaintext
import { schedule } from '@ember/runloop'

const afterRender = res =>
  new Promise(resolve => {
     schedule('afterRender', null, () => resolve(res))
  })

```

Change 2

assets\javascripts\discourse\lib\DcsIFrame.js.es6  
line 858

old:

```plaintext
  const afterRender = res =>
	new Promise(resolve => {
		Ember.run.schedule('afterRender', null, () => resolve(res))
	})

```

new:

```plaintext
	import { schedule } from '@ember/runloop'

	const afterRender = res =>
	  new Promise(resolve => {
		schedule('afterRender', null, () => resolve(res))
	  })

```

Change 3

assets\javascripts\discourse\lib\onDidTransition.js.es6  
line 239

old:

```plaintext
const afterRender = res =>
  new Promise(resolve => {
    Ember.run.schedule('afterRender', null, () => resolve(res))

```

new:

```plaintext
import { schedule } from '@ember/runloop'

const afterRender = res =>
  new Promise(resolve => {
      schedule('afterRender', null, () => resolve(res))

```

That cleared up all the error messages in console but created a series of new ones:

```plaintext
 Discourse v3.3.0.beta1-dev — https://github.com/discourse/discourse/commits/4c7d58a883 — Ember v5.5.0
app.js:197 Uncaught ReferenceError: Ember is not defined
    at s.callback (docuss.js:210:1)
    at s.exports (loader.js:106:1)
    at requireModule (loader.js:27:1)
    at y (app.js:171:18)
    at w (app.js:194:19)
    at app.js:157:29
    at e.start (app.js:51:5)
    at HTMLDocument.<anonymous> (start-app.js:5:7)
    at discourse-boot.js:20:12
    at discourse-boot.js:1:1

```

[Here’s a live platform with the plugin turned on incase its helpful](https://publichappinessmovement.com/)

Is that issue familiar to anyone ran into issues with Ember APIs objects changing. Any suggestions on how to fix them would be greatly appreciated.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 23, 2024, 12:52am UTC](https://meta.discourse.org/t/having-some-issues-with-inserting-iframes-using-discourses-ember-api/300572/2 "2024-03-23T00:52:40Z")

</div>

Hello!

You forget this one:

> <https://github.com/focallocal/dcs-discourse-plugin/blob/master/assets/javascripts/discourse/initializers/docuss.js.es6#L217>

I believe you could do something like that. This still should work.

```js
import { observes } from "discourse-common/utils/decorators";

@observes("model.tags")
tagsChanged() {

}

```

On a side note, the composer controller has been [moved to a service](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/services/composer.js) now.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [March 23, 2024, 1:47am UTC](https://meta.discourse.org/t/having-some-issues-with-inserting-iframes-using-discourses-ember-api/300572/3 "2024-03-23T01:47:13Z")

</div>

Have you checked out the recommended alternative from the GitHub page?

[https://github.com/sylque/discpage](https://github.com/sylque/discpage)

The Author I believe is active here.

> [@DiscPage: a plugin to create static pages and insert discussion balloons in the text](https://meta.discourse.org/t/discpage-a-plugin-to-create-static-pages-and-insert-discussion-balloons-in-the-text/136841):
>
> warning Deprecated This plugin is no longer maintained and does not work with current versions of Discourse. We recommend removing it from production sites to avoid upgrade issues. Thank you to everyone who used and contributed to this plugin over the years. folded_hands With DiscPage, you create static pages by adding the “Page” category to any topic. You can then insert balloon icons, to allow users to discuss subsections of the page. See [the old demo](http://www.docuss.org/t/discpage-demo/209) [the new demo](https://www.castafiore.org/t/discpage-demo/79) and [the …](https://github.com/sylque/discpage)

---

<div class="post-metadata">

### Author: ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [March 23, 2024, 3:58pm UTC](https://meta.discourse.org/t/having-some-issues-with-inserting-iframes-using-discourses-ember-api/300572/4 "2024-03-23T15:58:06Z")

</div>

Thanks for the suggestion @Heliosurge. We’ve baked the old one in pretty deep to our project though, so with the authors blessing we’ve taken over maintaining it.

A bit short on devs with the relevant skills in our Open Source community at the moment though.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [March 23, 2024, 11:38pm UTC](https://meta.discourse.org/t/having-some-issues-with-inserting-iframes-using-discourses-ember-api/300572/5 "2024-03-23T23:38:12Z")

</div>

Yeah makes perfect sense.

---

<div class="post-metadata">

### Author: ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [March 29, 2024, 8:38pm UTC](https://meta.discourse.org/t/having-some-issues-with-inserting-iframes-using-discourses-ember-api/300572/6 "2024-03-29T20:38:03Z")

</div>

Thanks for that @Arkshine. My laptop died when a replacement charger fried the charging circuit, so i wasn’t able to test it out until i was able to repair the laptop yesterday.

I put the import statement at the top of the page and your code underneath but seem to be hitting syntax errors when i try to add that or similar variations of it:

Visual Basic Studio finds these errors:

1. 

```plaintext
// New tagsChanged function with @observes decorator
@observes("model.tags")
tagsChanged() {
  // See if it is a balloon tag

```

The open bracket at the end of this line: tagsChanged() {

has this error message:  
‘;’ expected.ts(1005)

1. The last bracket in the code also has an error flag with this message:

‘}’ expected.ts(1005)  
docuss.js.es6(219, 54): The parser expected to find a ‘}’ to match the ‘{’ token here.

This is line 219:  
`tagsChanged: Ember.observer('model.tags', function() {`

My server says this when i try to build:

```plaintext
  251 | }, 0);
  252 | }
> 253 | }.observes("model.tags"),
      | ^
        in /tmp/broccoli-6523ExbXtskE5c0h/out-1067-funnel
        at Babel (Babel: discourse-plugins)
  - name: Error
  - nodeAnnotation: Babel: discourse-plugins
  - nodeName: Babel
  - originalErrorMessage: /var/www/discourse/app/assets/javascripts/discourse/discourse/plugins/docuss/discourse/initializers/docuss.js: Unexpected token (253:25)

```

---

<div class="post-metadata">

### Author: ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [September 4, 2024, 10:10pm UTC](https://meta.discourse.org/t/having-some-issues-with-inserting-iframes-using-discourses-ember-api/300572/7 "2024-09-04T22:10:29Z")

</div>

I can’t see why, but i was never able to get this fix to work, or a number of variations on it which is odd as it worked on the other files just fine. My focused shifted for a while but its been bugging me.

Looking back at it now and can’t see what’s causing the issue. I’ve reverted it back to the orginal. Can anyone see what needs to be changed here to update to the new Ember API?

> <https://github.com/focallocal/dcs-discourse-plugin/blob/c2cd9507c40bb7c6f8d33d9616d9d291d60dcd1f/assets/javascripts/discourse/initializers/docuss.js.es6>

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [September 5, 2024, 2:16am UTC](https://meta.discourse.org/t/having-some-issues-with-inserting-iframes-using-discourses-ember-api/300572/8 "2024-09-05T02:16:49Z")

</div>

Here are a few pointers:

- The site settings have been moved to a service:

- `location:discourse-location` → `location:history`

- `afterRender().then(() => onAfterRender(container));`  
`afterRender` is a decorator you put above a method in a component class; you are not supposed to use it directly as a function.  
I think you want (it doesn’t seem to be needed), possibly:

- You have a large piece of code out of the `composeStateChanged` function, it seems.  
Also, you can use the router service here: `container.lookup('router:main').transitionTo(path);` → `this.router.transitionTo(path);`

- The header has been modernized. Customization in `home-logo` widget is deprecated in your context. More information here: [Upcoming Header Changes - Preparing Themes and Plugins](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544).  
In your case, you will need `glimmer header mode` setting to `auto` or `enabled`. Then, you can use a plugin outlet to replace the content:

With that, it kind of works somehow. There are still no working pieces like the composer. I did not look too deeply into this. At the very least, there is no more blocking error. 🙂

I hope that helps.

---

<div class="post-metadata">

### Author: ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [September 5, 2024, 1:23pm UTC](https://meta.discourse.org/t/having-some-issues-with-inserting-iframes-using-discourses-ember-api/300572/9 "2024-09-05T13:23:12Z")

</div>

That’s really helpful, thanks 🙂
