Merge pull request #35 from johnnyhuy/feature/codepen-medal-tv

Add Medal.TV and CodePen Embedding
ggs-dev · Oct 10, 2020 · d336642 · d336642
2 parents 032f19b + fb35086
commit d336642
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 21 deletions.
diff --git a/packages/ggsmark/__tests__/index.spec.js b/packages/ggsmark/__tests__/index.spec.js
@@ -499,3 +499,103 @@ describe('render code blocks highlighted', () => {
     `)
   })
 })
+
+describe('render medal.tv blocks', () => {
+  test('single line', () => {
+    // Arrange
+    let string = dedent`
+    !(https://medal.tv/clips/33631679/LrG6jg4Y2AUk)
+    `
+
+    // Act
+    let result = ggsmark(string)
+
+    // Assert
+    expect(result).toBe(dedent`
+    <iframe src="https://medal.tv/clips/33631679/LrG6jg4Y2AUk" width="640" height="360" allowfullscreen frameborder="0"></iframe>
+    `)
+  })
+
+  test('should not show iframe inline', () => {
+    // Arrange
+    let string =
+      '**bold text** before text !(https://medal.tv/clips/33631679/LrG6jg4Y2AUk) after text **bold**'
+
+    // Act
+    let result = ggsmark(string)
+
+    // Assert
+    expect(result).toBe(dedent`
+    <p><strong>bold text</strong> before text !(<a href="https://medal.tv/clips/33631679/LrG6jg4Y2AUk">https://medal.tv/clips/33631679/LrG6jg4Y2AUk</a>) after text <strong>bold</strong></p>
+    `)
+  })
+
+  test('multiple occurrences', () => {
+    // Arrange
+    let string = dedent`
+    !(https://medal.tv/clips/33631679/LrG6jg4Y2AUk)
+    !(https://medal.tv/clips/33631679/LrG6jg4Y2AUk)
+    !(https://medal.tv/clips/33631679/LrG6jg4Y2AUk)
+    `
+
+    // Act
+    let result = ggsmark(string)
+
+    // Assert
+    expect(result).toBe(dedent`
+    <iframe src="https://medal.tv/clips/33631679/LrG6jg4Y2AUk" width="640" height="360" allowfullscreen frameborder="0"></iframe>
+    <iframe src="https://medal.tv/clips/33631679/LrG6jg4Y2AUk" width="640" height="360" allowfullscreen frameborder="0"></iframe>
+    <iframe src="https://medal.tv/clips/33631679/LrG6jg4Y2AUk" width="640" height="360" allowfullscreen frameborder="0"></iframe>
+    `)
+  })
+})
+
+describe('render codepen blocks', () => {
+  test('single line', () => {
+    // Arrange
+    let string = dedent`
+    !(https://codepen.io/creativeocean/pen/QWNPxqy)
+    `
+
+    // Act
+    let result = ggsmark(string)
+
+    // Assert
+    expect(result).toBe(dedent`
+    <iframe src="https://codepen.io/creativeocean/pen/QWNPxqy" width="700" height="1000" allowfullscreen frameborder="0"></iframe>
+    `)
+  })
+
+  test('should not show iframe inline', () => {
+    // Arrange
+    let string =
+      '**bold text** before text !(https://codepen.io/creativeocean/pen/QWNPxqy) after text **bold**'
+
+    // Act
+    let result = ggsmark(string)
+
+    // Assert
+    expect(result).toBe(dedent`
+    <p><strong>bold text</strong> before text !(<a href="https://codepen.io/creativeocean/pen/QWNPxqy">https://codepen.io/creativeocean/pen/QWNPxqy</a>) after text <strong>bold</strong></p>
+    `)
+  })
+
+  test('multiple occurrences', () => {
+    // Arrange
+    let string = dedent`
+    !(https://codepen.io/creativeocean/pen/QWNPxqy)
+    !(https://codepen.io/creativeocean/pen/QWNPxqy)
+    !(https://codepen.io/creativeocean/pen/QWNPxqy)
+    `
+
+    // Act
+    let result = ggsmark(string)
+
+    // Assert
+    expect(result).toBe(dedent`
+    <iframe src="https://codepen.io/creativeocean/pen/QWNPxqy" width="700" height="1000" allowfullscreen frameborder="0"></iframe>
+    <iframe src="https://codepen.io/creativeocean/pen/QWNPxqy" width="700" height="1000" allowfullscreen frameborder="0"></iframe>
+    <iframe src="https://codepen.io/creativeocean/pen/QWNPxqy" width="700" height="1000" allowfullscreen frameborder="0"></iframe>
+    `)
+  })
+})
diff --git a/packages/ggsmark/package-lock.json b/packages/ggsmark/package-lock.json
diff --git a/packages/ggsmark/src/index.js b/packages/ggsmark/src/index.js
@@ -179,6 +179,19 @@ export default (text, options = {}) => {
           ],
           ['http://', 'https://']
         ]
+      },
+      'medal.tv': {
+        tag: 'iframe',
+        width: 640,
+        height: 360,
+        disabled: false
+      },
+      'codepen.io': {
+        tag: 'iframe',
+        width: 700,
+        height: 1000,
+        disabled: false,
+        replace: [['http://', 'https://']]
       }
     })
     .use(align)