Merge branch 'master' into fix_example_code

packages/slack/src/utils/reshape-contents-body.test.ts

@@ -0,0 +1,114 @@
+import { reshapeContentsBody } from './reshape-contents-body';
+
+describe('reshapeContentsBody', () => {
+
+  describe('Markdown only', () => {
+    test('Return the same input', () => {
+      const input = `
+      # Title\u0020\u0020
+      ## Section\u0020\u0020
+      I tested this code at 12:00 AM.\u0020\u0020
+      **bold** text
+      some texts`;
+
+      expect(reshapeContentsBody(input)).toBe(input);
+    });
+  });
+
+  describe('Contains time but no headers', () => {
+    test('Return the same input', () => {
+      const input = `
+12:23
+some messages...
+12:23
+some messages...
+12:23`;
+
+      expect(reshapeContentsBody(input)).toBe(input);
+    });
+  });
+
+  describe('Copied from Slack only', () => {
+    test('Reshape', () => {
+      const input = `
+taichi-m  12:23 PM
+some messages...
+some messages...
+some messages...
+12:23
+some messages...
+12:23
+some messages...`;
+
+      const output = `
+<div class="grw-togetter">
+
+## **taichi-m**<span class="grw-togetter-time">  12:23 PM</span>
+\u0020\u0020
+some messages...\u0020\u0020
+some messages...\u0020\u0020
+some messages...\u0020\u0020
+--12:23--\u0020\u0020
+some messages...\u0020\u0020
+--12:23--\u0020\u0020
+some messages...\u0020\u0020
+</div>\u0020\u0020
+`;
+
+      expect(reshapeContentsBody(input)).toBe(output);
+    });
+  });
+
+  describe('Copied from Slack only (24 hours format)', () => {
+    test('Reshape', () => {
+      const input = `
+taichi-m  12:23
+some messages...
+some messages...
+some messages...
+12:23
+some messages...
+12:23
+some messages...`;
+
+      const output = `
+<div class="grw-togetter">
+
+## **taichi-m**<span class="grw-togetter-time">  12:23</span>
+\u0020\u0020
+some messages...\u0020\u0020
+some messages...\u0020\u0020
+some messages...\u0020\u0020
+--12:23--\u0020\u0020
+some messages...\u0020\u0020
+--12:23--\u0020\u0020
+some messages...\u0020\u0020
+</div>\u0020\u0020
+`;
+
+      expect(reshapeContentsBody(input)).toBe(output);
+    });
+  });
+
+  describe('Markdown and copied from Slack', () => {
+    test('Reshape only after the first header', () => {
+      const input = `
+some messages...
+
+taichi-m  12:23 PM
+some messages...`;
+
+      const output = `some messages...
+<div class="grw-togetter">
+
+## **taichi-m**<span class="grw-togetter-time">  12:23 PM</span>
+\u0020\u0020
+some messages...\u0020\u0020
+</div>\u0020\u0020
+`;
+
+      expect(reshapeContentsBody(input)).toBe(output);
+    });
+  });
+
+});

packages/slack/src/utils/reshape-contents-body.ts

@@ -42,7 +42,7 @@ export const reshapeContentsBody = (str: string): string => {
   const splitted = str.split('\n');
   const { linesBeforeFirstHeader, linesAfterFirstHeader } = devideLinesBeforeAfterFirstHeader(splitted);
   if (linesAfterFirstHeader.length === 0) {
-    return linesBeforeFirstHeader.join('');
+    return linesBeforeFirstHeader.join('\n');
   }
 
   let didReactionRemoved = false;
@@ -64,7 +64,7 @@ export const reshapeContentsBody = (str: string): string => {
       }
       // ##*username*  HH:mm AM
       copyline = '\n## **'.concat(copyline);
-      copyline = copyline.replace(regexpTime, '**'.concat(time));
+      copyline = copyline.replace(regexpTime, '**<span class="grw-togetter-time">'.concat(time, '</span>\n'));
     }
     // Check 3: Is this line a short time(HH:mm)?
     else if (regexpShortTime.test(copyline)) {

src/client/styles/scss/_wiki.scss

@@ -225,6 +225,12 @@ div.body {
     margin: 0 7%;
     background-color: rgba(200, 200, 200, 0.2);
     border-radius: 10px;
+
+    .grw-togetter-time {
+      float: right;
+      font-size: 0.8em;
+      font-weight: normal;
+    }
   }
 }