# JavaScript Hook for Composer
**URL:** https://meta.discourse.org/t/javascript-hook-for-composer/137967
**Category:** Development
**Created:** [January 7, 2020, 1:31pm UTC](https://meta.discourse.org/t/javascript-hook-for-composer/137967 "2020-01-07T13:31:33Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@AlexanderFillbrunn](https://meta.discourse.org/u/AlexanderFillbrunn)
#### Post date: [January 7, 2020, 1:31pm UTC](https://meta.discourse.org/t/javascript-hook-for-composer/137967/1 "2020-01-07T13:31:33Z")
Hi,
I had a [previous post](https://meta.discourse.org/t/plugin-example-for-pop-up-auto-completion/128998) that did not get any response, maybe because the request was too narrow. So here I try again: I would like to hook into the compose editor so that when the user types a certain sequence of characters (e.g. --) followed by a query, I can show a popup with search results. Once the user clicks one of those, a normal link is inserted where the query was typed. What is best practise to access the composer element and have my plugin notified once the user composes a post? I had a look at the plugin API and some plugins on GitHub, but could not find any good example.
Kind regards
Alexander
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [January 7, 2020, 2:20pm UTC](https://meta.discourse.org/t/javascript-hook-for-composer/137967/2 "2020-01-07T14:20:56Z")
I suspect you want to follow an existing example.
The place to look, I suspect, is [discourse/app/assets/javascripts/discourse/components/d-editor.js.es6 at f62b8990acb9ce4af8bfc67fc80dc0847177e458 · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/f62b8990acb9ce4af8bfc67fc80dc0847177e458/app/assets/javascripts/discourse/components/d-editor.js.es6)
Specifically:
```plaintext
didInsertElement() {
this._super(...arguments);
const $editorInput = $(this.element.querySelector(".d-editor-input"));
this._applyEmojiAutocomplete($editorInput);
this._applyCategoryHashtagAutocomplete($editorInput);
```
And maybe take a look at:
```plaintext
_applyCategoryHashtagAutocomplete() {
const siteSettings = this.siteSettings;
$(this.element.querySelector(".d-editor-input")).autocomplete({
template: findRawTemplate("category-tag-autocomplete"),
key: "#",
afterComplete: () => this._focusTextArea(),
transformComplete: obj => {
return obj.text;
},
dataSource: term => {
if (term.match(/\s/)) {
return null;
}
return searchCategoryTag(term, siteSettings);
},
triggerRule: (textarea, opts) => {
return categoryHashtagTriggerRule(textarea, opts);
}
});
},
```
NB I’ve not exploited this myself, but that’s my guess.
---
### Author:  [@AlexanderFillbrunn](https://meta.discourse.org/u/AlexanderFillbrunn)
#### Post date: [January 7, 2020, 2:35pm UTC](https://meta.discourse.org/t/javascript-hook-for-composer/137967/3 "2020-01-07T14:35:06Z")
Hi @merefield,
thanks a lot, this is already quite helpful. Just where is the best place to initialize this? Should I check in my plugin’s initializer function whether .d-editor-input element exists and hook it up accordingly, or is there a place to register the plugin as an extension to the compose view, so that it only gets loaded when the user actually opens the composer.
Kind regards
Alexander
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [January 7, 2020, 2:49pm UTC](https://meta.discourse.org/t/javascript-hook-for-composer/137967/4 "2020-01-07T14:49:51Z")
This is a Component, handilly, so you would want to override this method `didInsertElement()` in your initializer.
Example:
```plaintext
withPluginApi('0.8.12', (api) => {
api.modifyClass('component:load-more'
```
from here [https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/initializers/preview-edits.js.es6](https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/initializers/preview-edits.js.es6)
If you are lucky you can just call `this._super();` and append your additional logic at the end.
---
### Author:  [@AlexanderFillbrunn](https://meta.discourse.org/u/AlexanderFillbrunn)
#### Post date: [January 7, 2020, 3:51pm UTC](https://meta.discourse.org/t/javascript-hook-for-composer/137967/5 "2020-01-07T15:51:30Z")
Perfect! Thanks a lot. I think this will do the trick.