UX: pasting a twitter link into composer title will not set the title (#12332)

The title of Twitter oneboxes is always the name of the Twitter user,
which is not a descriptive topic title. Leave the title field blank so
that users must enter their own title.

app/assets/javascripts/discourse/app/components/composer-title.js

@@ -149,20 +149,32 @@ export default Component.extend({
 
   _updatePost(html) {
     if (html) {
+      const frag = document.createRange().createContextualFragment(html),
+        composer = this.composer;
+
       this.set("autoPosted", true);
       this.set("composer.featuredLink", this.get("composer.title"));
 
-      const $h = $(html),
-        heading = $h.find("h3").length > 0 ? $h.find("h3") : $h.find("h4"),
-        composer = this.composer;
-
       composer.appendText(this.get("composer.title"), null, { block: true });
 
-      if (heading.length > 0 && heading.text().length > 0) {
-        this.changeTitle(heading.text());
+      if (frag.querySelector(".twitterstatus")) {
+        this.set("composer.title", "");
+        return;
+      }
+
+      const heading = frag.querySelector("h3, h4");
+
+      if (heading && heading.textContent) {
+        this.changeTitle(heading.textContent);
       } else {
-        const firstTitle = $h.attr("title") || $h.find("[title]").attr("title");
-        if (firstTitle && firstTitle.length > 0) {
+        const firstTitle =
+          (frag.firstChild &&
+            frag.firstChild.attributes &&
+            frag.firstChild.attributes.title) ||
+          (frag.querySelector("[title]") &&
+            frag.querySelector("[title]").attributes.title);
+
+        if (firstTitle) {
           this.changeTitle(firstTitle);
         }
       }

app/assets/javascripts/discourse/tests/acceptance/composer-topic-links-test.js

@@ -135,6 +135,24 @@ acceptance("Composer topic featured links", function (needs) {
       "title is unchanged"
     );
   });
+
+  test("blank title for Twitter link", async function (assert) {
+    await visit("/");
+    await click("#create-topic");
+    await fillIn(
+      "#reply-title",
+      "https://twitter.com/discourse/status/1357664660724482048"
+    );
+    assert.ok(
+      queryAll(".d-editor-preview").html().trim().indexOf("onebox") > 0,
+      "it pastes the link into the body and previews it"
+    );
+    assert.ok(
+      exists(".d-editor-textarea-wrapper .popup-tip.good"),
+      "the body is now good"
+    );
+    assert.blank(queryAll(".title-input input").val(), "title is blank");
+  });
 });
 
 acceptance(

app/assets/javascripts/discourse/tests/helpers/create-pretender.js

@@ -864,6 +864,36 @@ export function applyDefaultHandlers(pretender) {
   `,
       ];
     }
+
+    if (
+      request.queryParams.url ===
+      "https://twitter.com/discourse/status/1357664660724482048"
+    ) {
+      return [
+        200,
+        { "Content-Type": "application/html" },
+        `
+        <aside class="onebox twitterstatus">
+          <header class="source">
+              <a href="https://twitter.com/discourse/status/1357664660724482048" target="_blank" rel="nofollow ugc noopener">twitter.com</a>
+          </header>
+          <article class="onebox-body">
+            <img src="https://pbs.twimg.com/media/EtdhY-ZXYAAKyvo.jpg:large" class="thumbnail onebox-avatar">
+        <h4><a href="https://twitter.com/discourse/status/1357664660724482048" target="_blank" rel="nofollow ugc noopener">Discourse (discourse)</a></h4>
+        <div class="tweet"> Too busy to keep up with release notes? https://t.co/FQtGI5VrMl</div>
+        <div class="date">
+          <a href="https://twitter.com/discourse/status/1357664660724482048" target="_blank" rel="nofollow ugc noopener">4:17 AM - 5 Feb 2021</a>
+            <span class="like">8</span>
+            <span class="retweet">1</span>
+        </div>
+          </article>
+          <div class="onebox-metadata"></div>
+          <div style="clear: both"></div>
+        </aside>
+        `,
+      ];
+    }
+
     return [404, { "Content-Type": "application/html" }, ""];
   });
 }