Extract first image url into more.image.url on post save

package.json

@@ -66,6 +66,7 @@
     "gm": "^1.23.0",
     "grapheme-breaker": "^0.3.2",
     "grapheme-utils": "^0.1.0",
+    "htmlparser2": "^3.9.2",
     "immutable": "^3.7.5",
     "isomorphic-fetch": "^2.2.1",
     "kcors": "~2.2.0",

src/api/db/index.js

@@ -33,6 +33,7 @@ import Checkit from 'checkit';
 import MarkdownIt from 'markdown-it';
 import sanitizeHtml from 'sanitize-html';
 import slug from 'slug';
+import htmlparser2 from 'htmlparser2';
 
 import { uploadAttachment, downloadAttachment, generateName } from '../../utils/attachments';
 import { ProfilePost as ProfilePostValidations } from './validators';
@@ -214,12 +215,30 @@ export function initBookshelfFromKnex(knex) {
         stripped = source;
       }
 
+      const more = this.get('more') || {};
+      // shortText
       const firstParagraphs = stripped.split(/\n{2,}/)[0];
-      this.set('text', text);
-      this.set('more', {
-        ...this.get('more'),
-        shortText: firstParagraphs
+      more.shortText = firstParagraphs;
+
+      // Try to take the first image
+      let firstImgUrl;
+      // htmlparser2 is already used in sanitizeHtml
+      const parser = new htmlparser2.Parser({
+        onopentag: function (name, attribs) {
+          if (name === 'img' && attribs.src) {
+            firstImgUrl = attribs.src;
+          }
+        }
       });
+      parser.write(text);
+      parser.end();
+
+      if (firstImgUrl) {
+        more.image = { url: firstImgUrl };
+      }
+
+      this.set('text', text);
+      this.set('more', more);
     },
     /**
      * Common logic for creating and updating. Must only be used for posts with text.

test/integration/api/post.js

@@ -163,7 +163,6 @@ describe('Post', () => {
       await otherUser.destroy();
     });
 
-
     describe('POST /api/v1/posts', () => {
       it('creates a post and copies text_source into text without processing', async () => {
         await expect(
@@ -212,6 +211,27 @@ describe('Post', () => {
           );
         });
 
+        it('extracts first image url into more.image.url', async () => {
+          await expect(
+            {
+              session: sessionId,
+              url: `/api/v1/posts`,
+              method: 'POST',
+              body: {
+                type: 'story',
+                text_source: '<div>Test</div><img src="http://test.com/test.png" />',
+                text_type: 'html',
+                title: 'Title'
+              }
+            },
+            'body to satisfy',
+            {
+              text: expect.it('to contain', '<div>Test</div><img src="http://test.com/test.png" />'),
+              more: { image: { url: 'http://test.com/test.png' } }
+            }
+          );
+        });
+
         describe('when text_type is not supported or not specified', () => {
           it('returns error', async () => {
             await expect(
@@ -272,24 +292,23 @@ describe('Post', () => {
           );
         });
 
-
-        it('updates post and re-renders text', async () => {
+        it('extracts first image url into more.image.url', async () => {
           await expect(
             {
               session: sessionId,
               url: `/api/v1/post/${post.id}`,
               method: 'POST',
               body: {
                 type: 'story',
-                text_source: '# new header 2',
-                text_type: 'markdown',
+                text_source: '<div>Test</div><img src="http://test.com/test.png" />',
+                text_type: 'html',
                 title: 'Title'
               }
             },
             'body to satisfy',
             {
-              text_source: '# new header 2',
-              text: expect.it('to contain', '<h1>new header 2</h1>')
+              text: expect.it('to contain', '<div>Test</div><img src="http://test.com/test.png" />'),
+              more: { image: { url: 'http://test.com/test.png' } }
             }
           );
         });