RDMD CSS theming and style adjustments.

packages/markdown/__tests__/__snapshots__/components.test.js.snap

@@ -2,6 +2,12 @@
 
 exports[`Components Callout 1`] = `"<blockquote class=\\"callout callout_error\\" theme=\\"❗️\\"><h3 class=\\"callout-heading false\\"><span class=\\"callout-icon\\">❗️</span><p>Error Callout</p></h3><p>Lorem ipsum dolor.</p></blockquote>"`;
 
-exports[`Components Embed 1`] = `"<div class=\\"embed\\"><a href=\\"https://gist.github.com/chaddy81/f852004d6d1510eec1f6\\" rel=\\"noopener noreferrer\\" style=\\"display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none;\\" target=\\"_blank\\"><b style=\\"color: rgb(51, 51, 51);\\">View Embed:</b> <span style=\\"opacity: 0.75;\\">https://gist.github.com/chaddy81/f852004d6d1510eec1f6</span></a></div>"`;
+exports[`Components Embed 1`] = `"<div class=\\"embed embed_hasImg\\"><div class=\\"embed-media\\"><iframe class=\\"embedly-embed\\" src=\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.google.com%2Fmaps%2Fembed%2Fv1%2Fplace%3Fcenter%3D37.829698%252C-122.258166%26key%3DAIzaSyD9HrlRuI1Ani0-MTZ7pvzxwxi4pgW0BCY%26zoom%3D16%26q%3D4126%2BOpal%2BSt%2C%2BOakland%2C%2BCA%2B94609&amp;display_name=Google+Maps&amp;url=https%3A%2F%2Fwww.google.com%2Fmaps%2Fplace%2F4126%2BOpal%2BSt%2C%2BOakland%2C%2BCA%2B94609%2F%4037.829698%2C-122.258166%2C16z%2Fdata%3D%214m5%213m4%211s0x80857dfb145a04ff%3A0x96b17d967421636f%218m2%213d37.8296978%214d-122.2581661%3Fhl%3Den&amp;image=http%3A%2F%2Fmaps-api-ssl.google.com%2Fmaps%2Fapi%2Fstaticmap%3Fcenter%3D37.829698%2C-122.258166%26zoom%3D15%26size%3D250x250%26sensor%3Dfalse&amp;key=02466f963b9b4bb8845a05b53d3235d7&amp;type=text%2Fhtml&amp;schema=google\\" width=\\"600\\" height=\\"450\\" scrolling=\\"no\\" title=\\"Google Maps embed\\" frameborder=\\"0\\" allow=\\"autoplay; fullscreen\\" allowfullscreen=\\"true\\"></iframe></div></div>"`;
 
-exports[`Components Image 1`] = `"<p><div><img src=\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\" alt=\\"Bro eats pizza and makes an OK gesture.\\" title=\\"Pizza Face\\" align=\\"\\" caption=\\"\\" height=\\"auto\\" width=\\"auto\\" loading=\\"lazy\\"><span class=\\"lightbox\\" role=\\"dialog\\"><span class=\\"lightbox-inner\\"><img src=\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\" alt=\\"Bro eats pizza and makes an OK gesture.\\" title=\\"Click to close...\\" align=\\"\\" caption=\\"\\" height=\\"auto\\" width=\\"auto\\" loading=\\"lazy\\"></span></span></div></p>"`;
+exports[`Components Embed 2`] = `"<iframe height=\\"550\\" href=\\"https://consent-manager.metomic.io/placeholder-demo.html?example=reddit\\" width=\\"100%\\" border=\\"none\\" src=\\"https://consent-manager.metomic.io/placeholder-demo.html?example=reddit\\"><a href=\\"https://consent-manager.metomic.io/placeholder-demo.html?example=reddit\\" target=\\"_self\\" title=\\"consent-manager.metomic.io\\">null</a></iframe>"`;
+
+exports[`Components Embed 3`] = `"<div class=\\"embed embed_hasImg\\"><a class=\\"embed-link\\" href=\\"https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\"><img alt=\\"George W. Bush Calls for End to Pandemic Partisanship\\" class=\\"embed-img\\" loading=\\"lazy\\" src=\\"https://static01.nyt.com/images/2020/05/02/world/02dc-virus-bush-2/merlin_171999921_e857a690-fb9b-462d-a20c-28c8161107c9-facebookJumbo.jpg\\"><div class=\\"embed-body\\"><img class=\\"embed-favicon\\" loading=\\"lazy\\" style=\\"float: left;\\" alt=\\"nytimes.com\\" height=\\"14\\" src=\\"https://www.nytimes.com/vi-assets/static-assets/favicon-4bf96cb6a1093748bf5b3c429accb9b4.ico\\" width=\\"14\\"><small class=\\"embed-provider\\">nytimes.com</small><div class=\\"embed-title\\">George W. Bush Calls for End to Pandemic Partisanship</div></div></a></div>"`;
+
+exports[`Components Embed 4`] = `"<div class=\\"embed \\"><a class=\\"embed-link\\" href=\\"https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\"><div class=\\"embed-body\\"><b>View embed</b>: <span class=\\"embed-body-url\\">https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html</span></div></a></div>"`;
+
+exports[`Components Image 1`] = `"<p><span class=\\"img\\" role=\\"button\\" tabindex=\\"0\\"><img src=\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\" alt=\\"Bro eats pizza and makes an OK gesture.\\" title=\\"Pizza Face\\" align=\\"\\" caption=\\"\\" height=\\"auto\\" width=\\"auto\\"><span class=\\"lightbox\\" role=\\"dialog\\" tabindex=\\"0\\"><span class=\\"lightbox-inner\\"><img src=\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\" title=\\"Click to close...\\" align=\\"\\" caption=\\"\\" height=\\"auto\\" width=\\"auto\\" alt=\\"Bro eats pizza and makes an OK gesture.\\" class=\\"lightbox-img\\" loading=\\"lazy\\"></span></span></span></p>"`;

packages/markdown/__tests__/__snapshots__/flavored-compilers.test.js.snap

@@ -22,6 +22,6 @@ console.log('an unnamed sample snippet');
 `;
 
 exports[`ReadMe Magic Blocks Embed 1`] = `
-"[Embed](https://youtu.be/J3-uKv1DShQ \\"@youtube\\")
+"[undefined](undefined \\"undefined\\")
 "
 `;

packages/markdown/__tests__/__snapshots__/index.test.js.snap

@@ -30,7 +30,7 @@ exports[`check list items 1`] = `
 `;
 
 exports[`emojis 1`] = `
-"<p><div><img src=\\"/img/emojis/joy.png\\" alt=\\":joy:\\" title=\\":joy:\\" class=\\"emoji\\" align=\\"absmiddle\\" height=\\"20\\" width=\\"20\\" caption=\\"\\" loading=\\"lazy\\"></div><br>
+"<p><img src=\\"/img/emojis/joy.png\\" alt=\\":joy:\\" title=\\":joy:\\" class=\\"emoji\\" align=\\"absmiddle\\" height=\\"20\\" width=\\"20\\" caption=\\"\\" loading=\\"lazy\\"><br>
 <i class=\\"fa fa-lock\\"></i><br>
 :unknown-emoji:</p>"
 `;
@@ -992,15 +992,15 @@ exports[`export multiple Markdown renderers renders plain markdown as React 1`]
 </React.Fragment>
 `;
 
-exports[`image 1`] = `"<p><div><img src=\\"http://example.com/image.png\\" alt=\\"Image\\" align=\\"\\" caption=\\"\\" height=\\"auto\\" title=\\"\\" width=\\"auto\\" loading=\\"lazy\\"><span class=\\"lightbox\\" role=\\"dialog\\"><span class=\\"lightbox-inner\\"><img src=\\"http://example.com/image.png\\" alt=\\"Image\\" align=\\"\\" caption=\\"\\" height=\\"auto\\" title=\\"Click to close...\\" width=\\"auto\\" loading=\\"lazy\\"></span></span></div></p>"`;
+exports[`image 1`] = `"<p><span class=\\"img\\" role=\\"button\\" tabindex=\\"0\\"><img src=\\"http://example.com/image.png\\" alt=\\"Image\\" align=\\"\\" caption=\\"\\" height=\\"auto\\" title=\\"\\" width=\\"auto\\"><span class=\\"lightbox\\" role=\\"dialog\\" tabindex=\\"0\\"><span class=\\"lightbox-inner\\"><img src=\\"http://example.com/image.png\\" align=\\"\\" caption=\\"\\" height=\\"auto\\" title=\\"Click to close...\\" width=\\"auto\\" alt=\\"Image\\" class=\\"lightbox-img\\" loading=\\"lazy\\"></span></span></span></p>"`;
 
 exports[`list items 1`] = `
 "<ul>
 <li>listitem1</li>
 </ul>"
 `;
 
-exports[`magic image 1`] = `"<figure><div><img src=\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\" title=\\"man-eating-pizza-and-making-an-ok-gesture.jpg\\" class=\\"\\" width=\\"100%\\" align=\\"\\" alt=\\"\\" caption=\\"\\" height=\\"auto\\" loading=\\"lazy\\"><span class=\\"lightbox\\" role=\\"dialog\\"><span class=\\"lightbox-inner\\"><img src=\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\" title=\\"Click to close...\\" class=\\"\\" width=\\"100%\\" align=\\"\\" alt=\\"\\" caption=\\"\\" height=\\"auto\\" loading=\\"lazy\\"></span></span></div><figcaption><p>A guy. Eating pizza. And making an OK gesture.</p></figcaption></figure>"`;
+exports[`magic image 1`] = `"<figure><span class=\\"img\\" role=\\"button\\" tabindex=\\"0\\"><img src=\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\" title=\\"man-eating-pizza-and-making-an-ok-gesture.jpg\\" class=\\"\\" width=\\"100%\\" align=\\"\\" alt=\\"\\" caption=\\"\\" height=\\"auto\\"><span class=\\"lightbox\\" role=\\"dialog\\" tabindex=\\"0\\"><span class=\\"lightbox-inner\\"><img src=\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\" title=\\"Click to close...\\" class=\\"lightbox-img\\" width=\\"100%\\" align=\\"\\" caption=\\"\\" height=\\"auto\\" alt=\\"\\" loading=\\"lazy\\"></span></span></span><figcaption><p>A guy. Eating pizza. And making an OK gesture.</p></figcaption></figure>"`;
 
 exports[`prefix anchors with section- should add a section- prefix to heading anchors 1`] = `"<h1 id=\\"heading\\">heading</h1>"`;
 

packages/markdown/__tests__/__snapshots__/magic-block-parser.test.js.snap

@@ -244,41 +244,25 @@ Object {
           "children": Array [
             Object {
               "type": "text",
-              "value": "Embed",
+              "value": null,
             },
           ],
-          "title": "@youtube",
+          "title": "youtu.be",
           "type": "link",
           "url": "https://youtu.be/J3-uKv1DShQ",
         },
       ],
       "data": Object {
         "hName": "rdme-embed",
         "hProperties": Object {
-          "height": undefined,
-          "href": "https://youtu.be/J3-uKv1DShQ",
-          "html": false,
-          "iframe": false,
-          "provider": "@youtube",
-          "title": "Embed",
-          "url": "https://youtu.be/J3-uKv1DShQ",
-          "width": undefined,
-        },
-        "height": undefined,
-        "html": false,
-        "iframe": false,
-        "json": Object {
           "favicon": "https://youtu.be/favicon.ico",
+          "href": "https://youtu.be/J3-uKv1DShQ",
           "html": false,
           "iframe": false,
-          "provider": "@youtube",
-          "title": "Embed",
+          "provider": "youtu.be",
+          "title": null,
           "url": "https://youtu.be/J3-uKv1DShQ",
         },
-        "provider": "@youtube",
-        "title": "Embed",
-        "url": "https://youtu.be/J3-uKv1DShQ",
-        "width": undefined,
       },
       "type": "embed",
     },

packages/markdown/__tests__/components.test.js

@@ -92,10 +92,41 @@ describe('Components', () => {
   });
 
   it('Embed', () => {
-    const wrap = mount(
-      markdown.react('[Embed Title](https://gist.github.com/chaddy81/f852004d6d1510eec1f6 "@jsfiddle")')
-    );
-    expect(wrap.html()).toMatchSnapshot();
+    const fixtures = {
+      html: `[block:embed]
+      {
+        "html": "<iframe class=\\"embedly-embed\\" src=\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.google.com%2Fmaps%2Fembed%2Fv1%2Fplace%3Fcenter%3D37.829698%252C-122.258166%26key%3DAIzaSyD9HrlRuI1Ani0-MTZ7pvzxwxi4pgW0BCY%26zoom%3D16%26q%3D4126%2BOpal%2BSt%2C%2BOakland%2C%2BCA%2B94609&display_name=Google+Maps&url=https%3A%2F%2Fwww.google.com%2Fmaps%2Fplace%2F4126%2BOpal%2BSt%2C%2BOakland%2C%2BCA%2B94609%2F%4037.829698%2C-122.258166%2C16z%2Fdata%3D%214m5%213m4%211s0x80857dfb145a04ff%3A0x96b17d967421636f%218m2%213d37.8296978%214d-122.2581661%3Fhl%3Den&image=http%3A%2F%2Fmaps-api-ssl.google.com%2Fmaps%2Fapi%2Fstaticmap%3Fcenter%3D37.829698%2C-122.258166%26zoom%3D15%26size%3D250x250%26sensor%3Dfalse&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=google\\" width=\\"600\\" height=\\"450\\" scrolling=\\"no\\" title=\\"Google Maps embed\\" frameborder=\\"0\\" allow=\\"autoplay; fullscreen\\" allowfullscreen=\\"true\\"></iframe>",
+        "url": "https://www.google.com/maps/place/4126+Opal+St,+Oakland,+CA+94609/@37.829698,-122.258166,16z/data=!4m5!3m4!1s0x80857dfb145a04ff:0x96b17d967421636f!8m2!3d37.8296978!4d-122.2581661?hl=en",
+        "title": "4126 Opal St, Oakland, CA 94609",
+        "favicon": "https://www.google.com/images/branding/product/ico/maps15_bnuw3a_32dp.ico",
+        "image": "http://maps-api-ssl.google.com/maps/api/staticmap?center=37.829698,-122.258166&zoom=15&size=250x250&sensor=false"
+      }
+      [/block]`,
+      iframe: `[block:embed]
+      {
+        "html": false,
+        "url": "https://consent-manager.metomic.io/placeholder-demo.html?example=reddit",
+        "title": null,
+        "favicon": null,
+        "iframe": true,
+        "height": "550"
+      }
+      [/block]`,
+      meta: `[block:embed]
+      {
+        "html": false,
+        "url": "https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html",
+        "title": "George W. Bush Calls for End to Pandemic Partisanship",
+        "favicon": "https://www.nytimes.com/vi-assets/static-assets/favicon-4bf96cb6a1093748bf5b3c429accb9b4.ico",
+        "image": "https://static01.nyt.com/images/2020/05/02/world/02dc-virus-bush-2/merlin_171999921_e857a690-fb9b-462d-a20c-28c8161107c9-facebookJumbo.jpg"
+      }
+      [/block]`,
+      rdmd: `[](https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html "@embed")`,
+    };
+    Object.values(fixtures).map(fx => {
+      const wrap = mount(markdown.react(fx));
+      return expect(wrap.html()).toMatchSnapshot();
+    });
   });
 
   it('Image', () => {
@@ -110,6 +141,21 @@ describe('Components', () => {
 
     img.simulate('click');
     expect(box.getDOMNode(0).hasAttribute('open')).toBe(true);
+
+    box.simulate('scroll');
+    expect(box.getDOMNode(0).hasAttribute('open')).toBe(false);
+
+    img.simulate('keydown', { key: 'Enter' });
+    expect(box.getDOMNode(0).hasAttribute('open')).toBe(true);
+
+    img.simulate('keydown', { key: 'Escape' });
+    expect(box.getDOMNode(0).hasAttribute('open')).toBe(false);
+
+    img.simulate('keydown', { key: ' ' });
+    expect(box.getDOMNode(0).hasAttribute('open')).toBe(true);
+
+    img.simulate('keydown', { key: '.', metaKey: true });
+    expect(box.getDOMNode(0).hasAttribute('open')).toBe(false);
   });
 
   it('Heading', () => {

packages/markdown/__tests__/index.test.js

@@ -46,6 +46,11 @@ test('check list items', () => {
   expect(mount(markdown.default('- [ ] checklistitem1\n- [x] checklistitem1')).html()).toMatchSnapshot();
 });
 
+test('gemoji generation', () => {
+  const gemoji = mount(markdown.default(':sparkles:'));
+  expect(gemoji.find('.lightbox').exists()).toBe(false);
+});
+
 test('should strip out inputs', () => {
   const wrap = mount(markdown.default('<input type="text" value="value" />'));
   expect(wrap.exists()).toBe(false);
@@ -189,7 +194,7 @@ test('should strip dangerous iframe tag', () => {
 
 test('should strip dangerous img attributes', () => {
   expect(mount(markdown.default('<img src="x" onerror="alert(\'charlie\')">')).html()).toBe(
-    '<div><img src="x" align="" alt="" caption="" height="auto" title="" width="auto" loading="lazy"><span class="lightbox" role="dialog"><span class="lightbox-inner"><img src="x" align="" alt="" caption="" height="auto" title="Click to close..." width="auto" loading="lazy"></span></span></div>'
+    '<span class="img" role="button" tabindex="0"><img src="x" align="" alt="" caption="" height="auto" title="" width="auto"><span class="lightbox" role="dialog" tabindex="0"><span class="lightbox-inner"><img src="x" align="" caption="" height="auto" title="Click to close..." width="auto" alt="" class="lightbox-img" loading="lazy"></span></span></span>'
   );
 });
 

packages/markdown/components/Callout/style.scss

@@ -2,10 +2,12 @@
   --background: #{lighten(#dfe2e5, 8.75%)};
   --border: #{lighten(#6a737d, 12.5%)};
 
-  background: var(--background);
-  border-color: var(--border);
-  color: var(--text);
-  padding: $l-offset;
+  & {
+    background: var(--background);
+    border-color: var(--border);
+    color: var(--text);
+    padding: $l-offset;
+  }
 
   &_info {
     $color: #46b8da;
@@ -46,6 +48,15 @@
   a {
     color: inherit;
   }
+  hr {
+    border-color: var(--border, var(--markdown-edge, #eee));
+  }
+  blockquote {
+    color: var(--text);
+    border-color: var(--border);
+    border-width: 3px;
+    padding: 0 0 0 .8em;
+  }
 
   .callout-heading {
     color: var(--title, --text);

packages/markdown/components/Code/style.scss

@@ -2,13 +2,12 @@
   code,
   kbd,
   pre {
-    font-family: monospace, monospace;
+    font-family: var(--md-code-font, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace);
     font-size: 1em
   }
 
   code,
   pre {
-    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
     font-size: 12px
   }
 
@@ -74,7 +73,7 @@
     box-shadow: inset 0 -1px 0 #c6cbd1;
     color: #444d56;
     display: inline-block;
-    font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
+    font-size: 11px;
     line-height: 10px;
     padding: 3px 5px;
     vertical-align: middle
@@ -87,18 +86,18 @@
 
     & {
       -webkit-appearance: unset;
+      margin: .5em .6em 0 0;
+      padding: .25em .7em;
+      cursor: copy;
+      font: inherit;
       color: var(--md-code-text, inherit);
-      background: transparent;
-      backdrop-filter: blur(6px);
       border: none;
-      margin: .75em .6em 0 0;
-      padding: .33em .6em;
-      font: inherit;
-      border-radius: 2px;
+      border-radius: 3px;
       outline: none !important;
-      box-shadow: inset 0 0 0 1px rgba(#8B8B8B, 0.33);
-      background: var(--md-code-background, rgba(white, .1));
-      cursor: copy;
+      background: var(--md-code-background, inherit);
+      box-shadow:
+        inset 0 0 0 1px rgba(#aaa, .66),
+        -1px 2px 6px -3px rgba(black, .1);
       transition: .15s ease-out;
     }
 
@@ -109,11 +108,17 @@
     }
 
     &:hover {
-      background: rgba(white, .125);
+      &:not(:active) {
+        box-shadow:
+          inset 0 0 0 1px rgba(#8B8B8B, .75),
+          -1px 2px 6px -3px rgba(black, .2);
+      }
     }
 
     &:active {
-      background: rgba(black, .088);
+      box-shadow:
+        inset 0 0 0 1px rgba(#8B8B8B, .5),
+        inset 1px 4px 6px -2px rgba(0, 0, 0, .175);
       &:before, &:after {
         opacity: .75;
       }
@@ -124,19 +129,27 @@
       font: normal normal normal 1em/1 "Font Awesome 5 Free", "FontAwesome";
       text-rendering: auto;
       -webkit-font-smoothing: antialiased;
+
+      line-height: 2;
+      font-family: 'ReadMe-Icons';
+      font-variant-ligatures: discretionary-ligatures;
+      font-feature-settings: "liga";
     }
     &:before {
+      content: "\e6c9";
+      font-weight: 800;
       transition: .3s .15s ease;
-      content: "\f0c5"
     }
     &:after {
-      transition: .3s 0s ease;
-      content: "\f00c" !important;
+      // @todo why are these !important @rafe, you dumbell?
+      content: "\e942" !important;
+      font-weight: 900 !important;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%) scale(.33);
       opacity: 0 !important;
+      transition: .3s 0s ease;
     }
 
     &_copied {
@@ -158,19 +171,22 @@
     }
   }
 
-
   pre {
     position: relative;
 
+    > code {
+      background: inherit;
+    }
+
     button.rdmd-code-copy {
       display: inline-block !important;
       position: absolute;
       right: 0;
       top: 0;
     }
 
+    // manage overflow scrolling
     & {
-      // manage overflow scrolling
       overflow: hidden;
       padding: 0;
       > code {
@@ -180,8 +196,15 @@
         max-height: 90vh;
       }
     }
-    &:not(:hover) button.rdmd-code-copy {
-      opacity: 0 !important;
+
+    // manage copied state style
+    & {
+      &:hover button.rdmd-code-copy:not(:hover) {
+        transition-delay: .4s;
+      }
+      &:not(:hover) button.rdmd-code-copy:not(.rdmd-code-copy_copied) {
+        opacity: 0 !important;
+      }
     }
   }
 }