diff --git a/packages/markdown/__tests__/__snapshots__/components.test.js.snap b/packages/markdown/__tests__/__snapshots__/components.test.js.snap index 21ca865ff..5e353a0c6 100644 --- a/packages/markdown/__tests__/__snapshots__/components.test.js.snap +++ b/packages/markdown/__tests__/__snapshots__/components.test.js.snap @@ -2,6 +2,12 @@ exports[`Components Callout 1`] = `"

❗️

Error Callout

Lorem ipsum dolor.

"`; -exports[`Components Embed 1`] = `"
View Embed: https://gist.github.com/chaddy81/f852004d6d1510eec1f6
"`; +exports[`Components Embed 1`] = `"
"`; -exports[`Components Image 1`] = `"

\\"Bro\\"Bro

"`; +exports[`Components Embed 2`] = `""`; + +exports[`Components Embed 3`] = `"
\\"George
\\"nytimes.com\\"nytimes.com
George W. Bush Calls for End to Pandemic Partisanship
"`; + +exports[`Components Embed 4`] = `"
View: https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html
"`; + +exports[`Components Image 1`] = `"

\\"Bro\\"Bro

"`; diff --git a/packages/markdown/__tests__/__snapshots__/flavored-compilers.test.js.snap b/packages/markdown/__tests__/__snapshots__/flavored-compilers.test.js.snap index 1ef989f65..0ceeba619 100644 --- a/packages/markdown/__tests__/__snapshots__/flavored-compilers.test.js.snap +++ b/packages/markdown/__tests__/__snapshots__/flavored-compilers.test.js.snap @@ -1,5 +1,10 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`ReadMe Flavored Blocks Embed 1`] = ` +"[Embedded meta links.](https://nyti.me/s/gzoa2xb2v3 \\"@nyt\\") +" +`; + exports[`ReadMe Magic Blocks Callouts 1`] = ` "> Success > @@ -22,6 +27,6 @@ console.log('an unnamed sample snippet'); `; exports[`ReadMe Magic Blocks Embed 1`] = ` -"[Embed](https://youtu.be/J3-uKv1DShQ \\"@youtube\\") +"[](https://youtu.be/J3-uKv1DShQ \\"@youtu.be\\") " `; diff --git a/packages/markdown/__tests__/__snapshots__/index.test.js.snap b/packages/markdown/__tests__/__snapshots__/index.test.js.snap index 2adf1774e..66bdaf739 100644 --- a/packages/markdown/__tests__/__snapshots__/index.test.js.snap +++ b/packages/markdown/__tests__/__snapshots__/index.test.js.snap @@ -30,7 +30,7 @@ exports[`check list items 1`] = ` `; exports[`emojis 1`] = ` -"

\\":joy:\\"

+"

\\":joy:\\"

:unknown-emoji:

" `; @@ -992,7 +992,7 @@ exports[`export multiple Markdown renderers renders plain markdown as React 1`] `; -exports[`image 1`] = `"

\\"Image\\"\\"Image\\"

"`; +exports[`image 1`] = `"

\\"Image\\"\\"Image\\"

"`; exports[`list items 1`] = ` "" `; -exports[`magic image 1`] = `"
\\"\\"\\"\\"

A guy. Eating pizza. And making an OK gesture.

"`; +exports[`magic image 1`] = `"
\\"\\"\\"\\"

A guy. Eating pizza. And making an OK gesture.

"`; exports[`prefix anchors with section- should add a section- prefix to heading anchors 1`] = `"

heading

"`; diff --git a/packages/markdown/__tests__/__snapshots__/magic-block-parser.test.js.snap b/packages/markdown/__tests__/__snapshots__/magic-block-parser.test.js.snap index 8ec96936f..45f8d97f3 100644 --- a/packages/markdown/__tests__/__snapshots__/magic-block-parser.test.js.snap +++ b/packages/markdown/__tests__/__snapshots__/magic-block-parser.test.js.snap @@ -244,10 +244,10 @@ Object { "children": Array [ Object { "type": "text", - "value": "Embed", + "value": null, }, ], - "title": "@youtube", + "title": "youtu.be", "type": "link", "url": "https://youtu.be/J3-uKv1DShQ", }, @@ -255,30 +255,14 @@ Object { "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", }, diff --git a/packages/markdown/__tests__/components.test.js b/packages/markdown/__tests__/components.test.js index e871f848b..6f4ed8a66 100644 --- a/packages/markdown/__tests__/components.test.js +++ b/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": "", + "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', () => { diff --git a/packages/markdown/__tests__/flavored-compilers.test.js b/packages/markdown/__tests__/flavored-compilers.test.js index 208bb8145..6a66c9b70 100644 --- a/packages/markdown/__tests__/flavored-compilers.test.js +++ b/packages/markdown/__tests__/flavored-compilers.test.js @@ -30,6 +30,15 @@ const compile = tree => .use([DivCompiler, CodeTabsCompiler, CalloutCompiler, EmbedCompiler]) .stringify(tree); +describe('ReadMe Flavored Blocks', () => { + it('Embed', () => { + const txt = `[Embedded meta links.](https://nyti.me/s/gzoa2xb2v3 "@nyt")`; + const ast = parse(txt); + const out = compile(ast); + expect(out).toMatchSnapshot(); + }); +}); + describe('ReadMe Magic Blocks', () => { it('Embed', () => { const txt = `[block:embed] diff --git a/packages/markdown/__tests__/index.test.js b/packages/markdown/__tests__/index.test.js index fd14ffbc0..ba1bdf28e 100644 --- a/packages/markdown/__tests__/index.test.js +++ b/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('')); 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('')).html()).toBe( - '
' + '' ); }); diff --git a/packages/markdown/components/Callout/style.scss b/packages/markdown/components/Callout/style.scss index a152b6e9c..9b185d10c 100644 --- a/packages/markdown/components/Callout/style.scss +++ b/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); diff --git a/packages/markdown/components/Code/style.scss b/packages/markdown/components/Code/style.scss index 98bf223a2..73cbd883f 100644 --- a/packages/markdown/components/Code/style.scss +++ b/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,10 +171,13 @@ } } - pre { position: relative; + > code { + background: inherit; + } + button.rdmd-code-copy { display: inline-block !important; position: absolute; @@ -169,8 +185,8 @@ 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; + } } } } diff --git a/packages/markdown/components/Embed.jsx b/packages/markdown/components/Embed.jsx deleted file mode 100644 index 4a8109db0..000000000 --- a/packages/markdown/components/Embed.jsx +++ /dev/null @@ -1,47 +0,0 @@ -/* eslint-disable react/jsx-props-no-spreading, jsx-a11y/iframe-has-title */ -const React = require('react'); -const propTypes = require('prop-types'); - -class Embed extends React.Component { - render() { - const { url, html, iframe, ...attrs } = this.props; - if ('iframe' in this.props) return