Support linking to anchored headings in the first post

app/assets/javascripts/discourse/lib/url.js.es6

@@ -16,16 +16,30 @@ const DiscourseURL = Ember.Object.extend({
 
   // Jumps to a particular post in the stream
   jumpToPost(postNumber, opts) {
+    opts = opts || {};
     const holderId = `#post_${postNumber}`;
 
     Em.run.schedule('afterRender', () => {
-      if (postNumber === 1) {
+      let elementId;
+      let holder;
+
+      if (postNumber === 1 && !opts.anchor) {
         $(window).scrollTop(0);
         return;
       }
 
-      const lockon = new LockOn(holderId);
-      const holder = $(holderId);
+      if (opts.anchor) {
+        elementId = opts.anchor;
+        holder = $(elementId);
+        console.log(holder.length);
+      }
+
+      if (!holder || holder.length === 0) {
+        elementId = holderId;
+        holder = $(elementId);
+      }
+
+      const lockon = new LockOn(elementId);
 
       if (holder.length > 0 && opts && opts.skipIfOnScreen){
         const elementTop = lockon.elementTop();

app/assets/javascripts/discourse/routes/topic-from-params.js.es6

@@ -40,7 +40,12 @@ export default Discourse.Route.extend({
       Ember.run.scheduleOnce('afterRender', function() {
         self.appEvents.trigger('post:highlight', closest);
       });
-      DiscourseURL.jumpToPost(closest);
+
+      const opts = {};
+      if (document.location.hash && document.location.hash.length) {
+        opts.anchor = document.location.hash;
+      }
+      DiscourseURL.jumpToPost(closest, opts);
 
       if (!Ember.isEmpty(topic.get('draft'))) {
         composerController.open({

app/assets/javascripts/pretty-text/white-lister.js.es6

@@ -137,12 +137,12 @@ whiteListFeature('default', [
   'img[height]',
   'pre',
   'hr',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
+  'h1[id]',
+  'h2[id]',
+  'h3[id]',
+  'h4[id]',
+  'h5[id]',
+  'h6[id]',
   'iframe',
   'iframe[height]',
   'iframe[width]',

test/javascripts/lib/sanitizer-test.js.es6

@@ -50,7 +50,18 @@ test("sanitize", function() {
   cooked("it has been <strike>1 day</strike> 0 days since our last test failure", "<p>it has been <strike>1 day</strike> 0 days since our last test failure</p>");
 });
 
-test("urlAllowed", function() {
+test("ids on headings", () => {
+  const pt = new PrettyText(buildOptions({ siteSettings: {} }));
+  equal(pt.sanitize("<h3>Test Heading</h3>"), "<h3>Test Heading</h3>");
+  equal(pt.sanitize(`<h1 id="test-heading">Test Heading</h3>`), `<h1 id="test-heading">Test Heading</h3>`);
+  equal(pt.sanitize(`<h2 id="test-heading">Test Heading</h3>`), `<h2 id="test-heading">Test Heading</h3>`);
+  equal(pt.sanitize(`<h3 id="test-heading">Test Heading</h3>`), `<h3 id="test-heading">Test Heading</h3>`);
+  equal(pt.sanitize(`<h4 id="test-heading">Test Heading</h3>`), `<h4 id="test-heading">Test Heading</h3>`);
+  equal(pt.sanitize(`<h5 id="test-heading">Test Heading</h3>`), `<h5 id="test-heading">Test Heading</h3>`);
+  equal(pt.sanitize(`<h6 id="test-heading">Test Heading</h3>`), `<h6 id="test-heading">Test Heading</h3>`);
+});
+
+test("urlAllowed", () => {
   const allowed = (url, msg) => equal(hrefAllowed(url), url, msg);
 
   allowed("/foo/bar.html", "allows relative urls");