# Foque o editor quando o título estiver pré-preenchido

**URL:** https://meta.discourse.org/t/focus-the-editor-when-title-is-pre-filled/311449
**Category:** Development
**Created:** [10 Junho , 2024 21:10 UTC](https://meta.discourse.org/t/focus-the-editor-when-title-is-pre-filled/311449 "2024-06-10T21:10:26Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Onlyanegg](https://avatars.discourse-cdn.com/v4/letter/o/e8c25b/32.png) [@Onlyanegg](https://meta.discourse.org/u/Onlyanegg)
#### Post date: [10 Junho , 2024 21:10 UTC](https://meta.discourse.org/t/focus-the-editor-when-title-is-pre-filled/311449/1 "2024-06-10T21:10:26Z")

</div>

Tenho uma URL parecida com esta:

> [https://forum.example.com/new-message?groupname=moderators&title=Ajude-me+com+uma+tarefa+por+favor](https://forum.example.com/new-message?groupname=moderators&title=Ajude-me+com+uma+tarefa+por+favor)

Que eu linko no meu site, para levar os usuários ao fórum para fazer uma pergunta. Eu uso vários valores para o título para pré-preencher o título com o tópico sobre o qual eles estão pensando, e eu gostaria que o editor fosse o foco.

Eu estava procurando como modificar isso e encontrei o arquivo composer.js com a definição focusTarget, que seria bem fácil de modificar para suportar esse comportamento se o título fosse passado.

O problema que estou encontrando é que não consigo ver onde focusTarget é realmente chamado. Eu programo há muitos anos, mas sou novo no Ember e fiz relativamente pouco em programação javascript.

Qualquer dica sobre como abordar isso seria muito apreciada (um rtfm com um ponteiro para um manual razoável seria ainda mais apreciado)

Abraços

---

<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: [10 Junho , 2024 22:23 UTC](https://meta.discourse.org/t/focus-the-editor-when-title-is-pre-filled/311449/2 "2024-06-10T22:23:15Z")

</div>

Acho que é o que você está procurando:

[https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/composer-editor.js#L159-L164](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/composer-editor.js#L159-L164)

Toda vez que o valor de `focusTarget` muda, esta função `setFocus` é chamada.

---

<div class="post-metadata">

### Author: ![Onlyanegg](https://avatars.discourse-cdn.com/v4/letter/o/e8c25b/32.png) [@Onlyanegg](https://meta.discourse.org/u/Onlyanegg)
#### Post date: [10 Junho , 2024 22:40 UTC](https://meta.discourse.org/t/focus-the-editor-when-title-is-pre-filled/311449/3 "2024-06-10T22:40:59Z")

</div>

Certo, esse código é o que faz funcionar. O que não tenho certeza é qual código preciso modificar para que este método obtenha o título, para que eu possa definir o foco apropriadamente no editor lá…

[https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/services/composer.js#L218-L243](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/services/composer.js#L218-L243)

---

<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: [11 Junho , 2024 00:01 UTC](https://meta.discourse.org/t/focus-the-editor-when-title-is-pre-filled/311449/4 "2024-06-11T00:01:21Z")

</div>

Eu acho que você pode fazer algo assim. Isso deve funcionar.

```js
import putCursorAtEnd from "discourse/lib/put-cursor-at-end";

api.onAppEvent("composer:open", ({ model }) => {
  if (model.title !== "") {
    scheduleOnce("afterRender", () => {
      putCursorAtEnd(document.querySelector("textarea.d-editor-input"));
    });
  }
});

```

---

<div class="post-metadata">

### Author: ![Onlyanegg](https://avatars.discourse-cdn.com/v4/letter/o/e8c25b/32.png) [@Onlyanegg](https://meta.discourse.org/u/Onlyanegg)
#### Post date: [11 Junho , 2024 01:01 UTC](https://meta.discourse.org/t/focus-the-editor-when-title-is-pre-filled/311449/5 "2024-06-11T01:01:22Z")

</div>

Quase consegui fazer funcionar – quando o código está executando, recebo um erro de que `scheduleOnce` não está definido – tentei `api.scheduleOnce`, mas parece que `scheduleOnce` é uma coisa do Ember. Tentei adicionar esta importação ao meu componente, mas recebi um erro de que importações só são permitidas no nível superior.  
`import { scheduleOnce } from \"@ember/runloop\";`

Estou imaginando que há algo pequeno que estou perdendo e vou continuar mexendo nisso, mas pensei em ver se era óbvio para você.

Obrigado novamente 🙂

---

<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: [11 Junho , 2024 04:20 UTC](https://meta.discourse.org/t/focus-the-editor-when-title-is-pre-filled/311449/6 "2024-06-11T04:20:32Z")

</div>

Sim, a importação está correta. Coloque ambas as importações no topo do arquivo e você estará pronto.

---

<div class="post-metadata">

### Author: ![Onlyanegg](https://avatars.discourse-cdn.com/v4/letter/o/e8c25b/32.png) [@Onlyanegg](https://meta.discourse.org/u/Onlyanegg)
#### Post date: [11 Junho , 2024 07:06 UTC](https://meta.discourse.org/t/focus-the-editor-when-title-is-pre-filled/311449/7 "2024-06-11T07:06:42Z")

</div>

Em qual arquivo devo colocá-los? O que eu estava tentando fazer era apenas usá-lo em `<head>` – como um componente – é isso que fiz, o que resulta no log “scheduling afterRender” aparecendo, depois um erro sobre scheduleOnce não existir. Tentei usar o import de algumas maneiras, mas não está funcionando. Suspeito que minha inexperiência com módulos em javascript esteja me causando problemas. Talvez eu não possa fazer isso através de um componente e precise fazer um plugin mais completo. Vou dar uma olhada nisso – obrigado novamente pela sua ajuda 🙂

```plaintext
<script type="text/discourse-plugin" version="1.8.0">
    api.onAppEvent("composer:open", ({ model }) => {
      console.log("composer open happened, model is: ", model);
      if (model.title !== "") {
        console.log("scheduling afterRender");
        scheduleOnce("afterRender", () => {
          console.log("after render happening");
          api.putCursorAtEnd(document.querySelector("textarea.d-editor-input"));
        });
      }
    });
</script>

```

---

<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: [11 Junho , 2024 09:23 UTC](https://meta.discourse.org/t/focus-the-editor-when-title-is-pre-filled/311449/8 "2024-06-11T09:23:12Z")

</div>

Ah, entendi. Eu presumi que você usava JS em [seus arquivos](https://meta.discourse.org/t/split-up-theme-javascript-into-multiple-files/119369).

Da interface de administrador, então, você escreveria:

```js
<script type="text/discourse-plugin" version="1.8.0">
    const putCursorAtEnd = require("discourse/lib/put-cursor-at-end").default;
    const { scheduleOnce } = require("@ember/runloop");

    api.onAppEvent("composer:open", ({ model }) => {
      if (model.title !== "") {
        scheduleOnce("afterRender", () => {
          putCursorAtEnd(document.querySelector("textarea.d-editor-input"));
        });
      }
    });
</script>

```

Em tempo, eu encorajo muito você a usar a [Theme CLI](https://meta.discourse.org/t/install-the-discourse-theme-cli-console-app-to-help-you-build-themes/82950). Você pode criar um componente de tema a partir de um template, sincronizá-lo com um Discourse com atualização ao vivo e atualizar quaisquer alterações usando seu editor. É muito mais fácil do que usar a interface!

---

<div class="post-metadata">

### Author: ![Onlyanegg](https://avatars.discourse-cdn.com/v4/letter/o/e8c25b/32.png) [@Onlyanegg](https://meta.discourse.org/u/Onlyanegg)
#### Post date: [11 Junho , 2024 10:27 UTC](https://meta.discourse.org/t/focus-the-editor-when-title-is-pre-filled/311449/9 "2024-06-11T10:27:57Z")

</div>

Muito obrigado - eu sabia que estava faltando alguma coisa - com certeza vou configurá-lo para usar o tema cli e editá-los dessa forma 🙂 🙂

---

<div class="post-metadata">

### Author: ![Onlyanegg](https://avatars.discourse-cdn.com/v4/letter/o/e8c25b/32.png) [@Onlyanegg](https://meta.discourse.org/u/Onlyanegg)
#### Post date: [19 Junho , 2024 21:41 UTC](https://meta.discourse.org/t/focus-the-editor-when-title-is-pre-filled/311449/10 "2024-06-19T21:41:47Z")

</div>

Obrigado novamente Arkshine, criei meu primeiro componente usando discourse\_theme agora 🙂  
Para quem encontrar este tópico, basicamente tive que executar alguns comandos:

```plaintext
gem install discourse_theme
npm install -g yarn
discourse_theme new <component-name>

```

depois edite o arquivo: javascripts/discourse/api-initializers/.js  
faça o upload para o github, e você pode instalar / compartilhar.  
O meu está [aqui](https://github.com/ihatepasswords-xyz/discourse_focus_editor_component).  
Parece ter um recurso onde você pode atualizar automaticamente a versão em seu servidor também, à medida que você modifica os arquivos. Parece bom e útil à medida que me aprofundo em componentes mais complexos.

Saúde

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [19 Julho , 2024 21:42 UTC](https://meta.discourse.org/t/focus-the-editor-when-title-is-pre-filled/311449/11 "2024-07-19T21:42:21Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.