diff --git a/README.md b/README.md
index 80491f8..0378771 100644
--- a/README.md
+++ b/README.md
@@ -304,6 +304,18 @@ remark()
> Take a look at [how it would look](test/outputs/async-img-all.png) before executing the script, and the unchanged [HTML output](test/outputs/async-img-all.html).
+### `jsx`
+
+To use with [@mdx-js/mdx](https://mdxjs.com/advanced/api), set `jsx` as true.
+
+```javascript
+const mdx = require('@mdx-js/mdx');
+
+await mdx(src, {
+ remarkPlugins: [[require('@sergioramos/remark-oembed'), { jsx: true }],
+});
+```
+
## license
BSD-3-Clause
diff --git a/index.js b/index.js
index 69c00eb..34faf0f 100644
--- a/index.js
+++ b/index.js
@@ -3,7 +3,6 @@ const h = require('hastscript');
const Intercept = require('apr-intercept');
const { getType } = require('mime');
const toHtml = require('hast-util-to-html');
-const { selectAll, matches } = require('hast-util-select');
const { format, parse } = require('url');
const OEMBED_PROVIDERS_URL = 'https://oembed.com/providers.json';
@@ -29,7 +28,7 @@ const ATTRS = {
};
const Script = () => {
- return `
+ const script = `
document.querySelectorAll('div[data-oembed]').forEach((el) => {
const template = el.querySelector('[data-oembed-template]').content.cloneNode(true);
el.innerHTML = '';
@@ -45,10 +44,8 @@ const Script = () => {
el.removeAttribute('data-oembed');
});
`;
-};
-const RequestAnimationFrame = ({ script }) => {
- const __html = `
+ return `
const isDocumentReady = () => {
if (document.readyState !== 'complete') {
document.addEventListener('readystatechange', isDocumentReady);
@@ -66,10 +63,16 @@ const RequestAnimationFrame = ({ script }) => {
document.addEventListener('readystatechange', isDocumentReady);
}
`;
+};
+const RequestAnimationFrame = ({ script: __html }) => {
return h('script', { async: true, defer: true }, [__html]);
};
+const JsxScript = ({ script: __html }) => {
+ return ``;
+};
+
const Img = ({ id, url, title, width, height, dataSrc }) => {
return h('img', {
id,
@@ -96,18 +99,26 @@ const Anchor = (props, children = []) => {
);
};
-const StaticPhotoOembed = ({ emptyUrl, url, href, ...rest }) => {
+const StaticPhotoOembed = ({ emptyUrl, url, href, jsx = false, ...rest }) => {
const src = emptyUrl || url;
const isImage = /^image\//.test(getType(href) || '');
const img = Img({ ...rest, url: src, dataSrc: url });
const anchor = isImage ? img : Anchor({ href }, [img]);
- if (!emptyUrl) {
+ if (!jsx) {
return anchor;
}
- return anchor;
+ const html = toHtml(anchor, {
+ allowDangerousHtml: true,
+ });
+
+ return {
+ type: 'jsx',
+ properties: { dataOembed: true },
+ value: `