@quadrats/react 0.0.1 → 0.4.3

package/divider/index.cjs.js

@@ -6,7 +6,7 @@ var React = require('react');
 var divider = require('@quadrats/common/divider');
 var react = require('@quadrats/react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/divider/jsx-serializer/createJsxSerializeDivider.js

@@ -1,6 +1,6 @@
-import { defaultRenderDividerElement } from './defaultRenderDividerElement.js';
 import { DIVIDER_TYPE } from '@quadrats/common/divider';
 import { createJsxSerializeElement } from '@quadrats/react/jsx-serializer';
+import { defaultRenderDividerElement } from './defaultRenderDividerElement.js';
 
 function createJsxSerializeDivider(options = {}) {
     const { type = DIVIDER_TYPE, render = defaultRenderDividerElement } = options;

package/divider/jsx-serializer/index.cjs.js

@@ -6,7 +6,7 @@ var React = require('react');
 var divider = require('@quadrats/common/divider');
 var jsxSerializer = require('@quadrats/react/jsx-serializer');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/divider/toolbar/DividerToolbarIcon.js

@@ -1,7 +1,7 @@
-import { useDividerTool } from './useDividerTool.js';
 import { __rest } from 'tslib';
 import React from 'react';
 import { ToolbarIcon } from '@quadrats/react/toolbar';
+import { useDividerTool } from './useDividerTool.js';
 
 function DividerToolbarIcon(props) {
     const { controller } = props, rest = __rest(props, ["controller"]);
@@ -9,4 +9,4 @@ function DividerToolbarIcon(props) {
     return React.createElement(ToolbarIcon, Object.assign({}, rest, { onClick: onClick }));
 }
 
-export default DividerToolbarIcon;
+export { DividerToolbarIcon as default };

package/divider/toolbar/index.cjs.js

@@ -7,7 +7,7 @@ var tslib = require('tslib');
 var React = require('react');
 var toolbar = require('@quadrats/react/toolbar');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/editable.css

@@ -0,0 +1 @@
+.qdr-editable{background-color:var(--qdr-background);border:solid 1px var(--qdr-border);color:var(--qdr-text);caret-color:var(--qdr-primary);transition:background-color 300ms ease-in-out,border-color 300ms ease-in-out,color 300ms ease-in-out;will-change:background-color,border-color,color}.qdr-editable ::selection{background-color:var(--qdr-primary-light)}.qdr-editable__placeholder{display:inline-block;top:0;left:0;color:var(--qdr-placeholder);font:inherit;padding:inherit;width:0;max-width:100%;opacity:.333;white-space:nowrap;text-decoration:none;pointer-events:none;user-select:none}

package/editable.scss

@@ -0,0 +1,28 @@
+.qdr-editable {
+  background-color: var(--qdr-background);
+  border: solid 1px var(--qdr-border);
+  color: var(--qdr-text);
+  caret-color: var(--qdr-primary);
+  transition: background-color 300ms ease-in-out, border-color 300ms ease-in-out, color 300ms ease-in-out;
+  will-change: background-color, border-color, color;
+
+  ::selection {
+    background-color: var(--qdr-primary-light);
+  }
+
+  &__placeholder {
+    display: inline-block;
+    top: 0;
+    left: 0;
+    color: var(--qdr-placeholder);
+    font: inherit;
+    padding: inherit;
+    width: 0;
+    max-width: 100%;
+    opacity: 0.333;
+    white-space: nowrap;
+    text-decoration: none;
+    pointer-events: none;
+    user-select: none;
+  }
+}

package/embed/components/VideoIframe.js

@@ -12,4 +12,4 @@ function VideoIframe({ attributes, children, data: src }) {
         attributes ? children : undefined));
 }
 
-export default VideoIframe;
+export { VideoIframe as default };

package/embed/createReactEmbed.js

@@ -1,6 +1,6 @@
 import { createEmbed } from '@quadrats/common/embed';
-import { createRenderEmbedElementBase } from './createRenderEmbedElementBase.js';
 import { createRenderElement } from '@quadrats/react';
+import { createRenderEmbedElementBase } from './createRenderEmbedElementBase.js';
 
 function createReactEmbed(options) {
     const core = createEmbed(options);

package/embed/index.cjs.js

@@ -7,7 +7,7 @@ var utils = require('@quadrats/react/utils');
 var embed = require('@quadrats/common/embed');
 var react = require('@quadrats/react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/embed/index.js

@@ -1,4 +1,4 @@
-export { useVideoIframeSize } from './hooks/useVideoIframeSize.js';
 export { default as VideoIframe } from './components/VideoIframe.js';
+export { useVideoIframeSize } from './hooks/useVideoIframeSize.js';
 export { createRenderEmbedElementBase } from './createRenderEmbedElementBase.js';
 export { createReactEmbed } from './createReactEmbed.js';

package/embed/jsx-serializer/facebook/index.cjs.js

@@ -6,6 +6,6 @@ var facebook = require('@quadrats/react/embed/renderers/facebook');
 
 
 
-Object.keys(facebook).forEach(function (k) {
-	if (k !== 'default') exports[k] = facebook[k];
-});
+for (var k in facebook) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = facebook[k];
+}

package/embed/jsx-serializer/instagram/index.cjs.js

@@ -6,6 +6,6 @@ var instagram = require('@quadrats/react/embed/renderers/instagram');
 
 
 
-Object.keys(instagram).forEach(function (k) {
-	if (k !== 'default') exports[k] = instagram[k];
-});
+for (var k in instagram) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = instagram[k];
+}

package/embed/jsx-serializer/twitter/index.cjs.js

@@ -6,6 +6,6 @@ var twitter = require('@quadrats/react/embed/renderers/twitter');
 
 
 
-Object.keys(twitter).forEach(function (k) {
-	if (k !== 'default') exports[k] = twitter[k];
-});
+for (var k in twitter) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = twitter[k];
+}

package/embed/jsx-serializer/vimeo/index.cjs.js

@@ -6,6 +6,6 @@ var vimeo = require('@quadrats/react/embed/renderers/vimeo');
 
 
 
-Object.keys(vimeo).forEach(function (k) {
-	if (k !== 'default') exports[k] = vimeo[k];
-});
+for (var k in vimeo) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = vimeo[k];
+}

package/embed/jsx-serializer/youtube/index.cjs.js

@@ -6,6 +6,6 @@ var youtube = require('@quadrats/react/embed/renderers/youtube');
 
 
 
-Object.keys(youtube).forEach(function (k) {
-	if (k !== 'default') exports[k] = youtube[k];
-});
+for (var k in youtube) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = youtube[k];
+}

package/embed/renderers/facebook/components/Facebook.js

@@ -13,4 +13,4 @@ function Facebook({ attributes, children, data: { url, width, height } }) {
         attributes ? children : undefined));
 }
 
-export default Facebook;
+export { Facebook as default };

package/embed/renderers/facebook/index.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/embed/renderers/instagram/components/Instagram.js

@@ -21,4 +21,4 @@ function Instagram({ attributes, children, data: permalink }) {
         attributes ? children : undefined));
 }
 
-export default Instagram;
+export { Instagram as default };

package/embed/renderers/instagram/index.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/embed/renderers/podcast-apple/components/PodcastApple.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { PodcastAppleEmbedElement } from '@quadrats/common/embed/strategies/podcast-apple';
+import { RenderElementProps } from '@quadrats/react';
+export interface PodcastAppleProps {
+    attributes?: RenderElementProps['attributes'];
+    children?: any;
+    data: string;
+    element: PodcastAppleEmbedElement;
+}
+declare function PodcastApple({ attributes, children, data: src }: PodcastAppleProps): JSX.Element;
+export default PodcastApple;

package/embed/renderers/podcast-apple/components/PodcastApple.js

@@ -0,0 +1,12 @@
+import React, { useRef } from 'react';
+import { composeRefs } from '@quadrats/react/utils';
+
+function PodcastApple({ attributes, children, data: src }) {
+    const containerRef = useRef(null);
+    const composedRef = composeRefs([attributes === null || attributes === void 0 ? void 0 : attributes.ref, containerRef]);
+    return (React.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }),
+        React.createElement("iframe", { title: src, src: src, frameBorder: "0", width: "100%", height: "450px" }),
+        attributes ? children : undefined));
+}
+
+export { PodcastApple as default };

package/embed/renderers/podcast-apple/defaultRenderPodcastAppleEmbedElement.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PodcastAppleProps } from './components/PodcastApple';
+export declare const defaultRenderPodcastAppleEmbedElement: (props: PodcastAppleProps) => JSX.Element;

package/embed/renderers/podcast-apple/defaultRenderPodcastAppleEmbedElement.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import PodcastApple from './components/PodcastApple.js';
+
+const defaultRenderPodcastAppleEmbedElement = (props) => React.createElement(PodcastApple, Object.assign({}, props));
+
+export { defaultRenderPodcastAppleEmbedElement };

package/embed/renderers/podcast-apple/index.cjs.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var utils = require('@quadrats/react/utils');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function PodcastApple({ attributes, children, data: src }) {
+    const containerRef = React.useRef(null);
+    const composedRef = utils.composeRefs([attributes === null || attributes === void 0 ? void 0 : attributes.ref, containerRef]);
+    return (React__default.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }),
+        React__default.createElement("iframe", { title: src, src: src, frameBorder: "0", width: "100%", height: "450px" }),
+        attributes ? children : undefined));
+}
+
+const defaultRenderPodcastAppleEmbedElement = (props) => React__default.createElement(PodcastApple, Object.assign({}, props));
+
+exports.PodcastApple = PodcastApple;
+exports.defaultRenderPodcastAppleEmbedElement = defaultRenderPodcastAppleEmbedElement;

package/embed/renderers/podcast-apple/index.d.ts

@@ -0,0 +1,2 @@
+export { PodcastAppleProps, default as PodcastApple } from './components/PodcastApple';
+export { defaultRenderPodcastAppleEmbedElement } from './defaultRenderPodcastAppleEmbedElement';

package/embed/renderers/podcast-apple/index.js

@@ -0,0 +1,2 @@
+export { default as PodcastApple } from './components/PodcastApple.js';
+export { defaultRenderPodcastAppleEmbedElement } from './defaultRenderPodcastAppleEmbedElement.js';

package/embed/renderers/podcast-apple/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@quadrats/react/embed/renderers/podcast-apple",
+  "sideEffects": false,
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/embed/renderers/spotify/components/Spotify.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { SpotifyEmbedElement } from '@quadrats/common/embed/strategies/spotify';
+import { RenderElementProps } from '@quadrats/react';
+export interface SpotifyProps {
+    attributes?: RenderElementProps['attributes'];
+    children?: any;
+    data: string;
+    element: SpotifyEmbedElement;
+}
+declare function Spotify({ attributes, children, data: src }: SpotifyProps): JSX.Element;
+export default Spotify;

package/embed/renderers/spotify/components/Spotify.js

@@ -0,0 +1,16 @@
+import React, { useRef, useMemo } from 'react';
+import { composeRefs } from '@quadrats/react/utils';
+
+function Spotify({ attributes, children, data: src }) {
+    const containerRef = useRef(null);
+    const composedRef = composeRefs([attributes === null || attributes === void 0 ? void 0 : attributes.ref, containerRef]);
+    const higher = useMemo(() => (!!src.match(/\/playlist/)), [src]);
+    return (React.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }),
+        React.createElement("iframe", { title: src, src: src, frameBorder: "0", width: "100%", allow: "autoplay", "clipboard-write": "true", "encrypted-media": "true", "picture-in-picture": "true", height: higher ? '400px' : '152px', style: {
+                maxHeight: '100%',
+                height: higher ? '400px' : '152px',
+            } }),
+        attributes ? children : undefined));
+}
+
+export { Spotify as default };

package/embed/renderers/spotify/defaultRenderSpotifyEmbedElement.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SpotifyProps } from './components/Spotify';
+export declare const defaultRenderSpotifyEmbedElement: (props: SpotifyProps) => JSX.Element;

package/embed/renderers/spotify/defaultRenderSpotifyEmbedElement.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import Spotify from './components/Spotify.js';
+
+const defaultRenderSpotifyEmbedElement = (props) => React.createElement(Spotify, Object.assign({}, props));
+
+export { defaultRenderSpotifyEmbedElement };

package/embed/renderers/spotify/index.cjs.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var utils = require('@quadrats/react/utils');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function Spotify({ attributes, children, data: src }) {
+    const containerRef = React.useRef(null);
+    const composedRef = utils.composeRefs([attributes === null || attributes === void 0 ? void 0 : attributes.ref, containerRef]);
+    const higher = React.useMemo(() => (!!src.match(/\/playlist/)), [src]);
+    return (React__default.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }),
+        React__default.createElement("iframe", { title: src, src: src, frameBorder: "0", width: "100%", allow: "autoplay", "clipboard-write": "true", "encrypted-media": "true", "picture-in-picture": "true", height: higher ? '400px' : '152px', style: {
+                maxHeight: '100%',
+                height: higher ? '400px' : '152px',
+            } }),
+        attributes ? children : undefined));
+}
+
+const defaultRenderSpotifyEmbedElement = (props) => React__default.createElement(Spotify, Object.assign({}, props));
+
+exports.Spotify = Spotify;
+exports.defaultRenderSpotifyEmbedElement = defaultRenderSpotifyEmbedElement;

package/embed/renderers/spotify/index.d.ts

@@ -0,0 +1,2 @@
+export { SpotifyProps, default as Spotify } from './components/Spotify';
+export { defaultRenderSpotifyEmbedElement } from './defaultRenderSpotifyEmbedElement';

package/embed/renderers/spotify/index.js

@@ -0,0 +1,2 @@
+export { default as Spotify } from './components/Spotify.js';
+export { defaultRenderSpotifyEmbedElement } from './defaultRenderSpotifyEmbedElement.js';

package/embed/renderers/spotify/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@quadrats/react/embed/renderers/spotify",
+  "sideEffects": false,
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/embed/renderers/twitter/components/Twitter.d.ts

@@ -7,5 +7,5 @@ export interface TwitterProps {
     data: string;
     element: TwitterEmbedElement;
 }
-declare function Twitter({ attributes, children, data: url }: TwitterProps): JSX.Element;
+declare function Twitter({ attributes, children, data: tweetId }: TwitterProps): JSX.Element;
 export default Twitter;

package/embed/renderers/twitter/components/Twitter.js

@@ -1,21 +1,12 @@
-import React from 'react';
+import React, { useRef } from 'react';
+import { composeRefs } from '@quadrats/react/utils';
 import { useLoadTwitterEmbedApi } from '../hooks/useLoadTwitterEmbedApi.js';
-import { useLoadTwitterEmbedHtml } from '../hooks/useLoadTwitterEmbedHtml.js';
 
-function Twitter({ attributes, children, data: url }) {
-    const html = useLoadTwitterEmbedHtml(url);
-    useLoadTwitterEmbedApi(html);
-    return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false }),
-        html && (React.createElement("div", { style: {
-                display: 'flex',
-                marginTop: -10,
-                marginBottom: -10,
-            }, 
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML: {
-                __html: html,
-            } })),
-        attributes ? children : undefined));
+function Twitter({ attributes, children, data: tweetId }) {
+    const tweetContainerRef = useRef(null);
+    const composedRef = composeRefs([attributes === null || attributes === void 0 ? void 0 : attributes.ref, tweetContainerRef]);
+    useLoadTwitterEmbedApi(tweetId, tweetContainerRef);
+    return (React.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }), attributes ? children : undefined));
 }
 
-export default Twitter;
+export { Twitter as default };

package/embed/renderers/twitter/hooks/useLoadTwitterEmbedApi.d.ts

@@ -1 +1,2 @@
-export declare function useLoadTwitterEmbedApi(html: string | undefined): void;
+import { RefObject } from 'react';
+export declare function useLoadTwitterEmbedApi(tweetId: string, tweetContainerRef: RefObject<HTMLElement | null>): void;

package/embed/renderers/twitter/hooks/useLoadTwitterEmbedApi.js

@@ -3,25 +3,31 @@ import { useEffect } from 'react';
 function getTwitterEmbedApi() {
     return window.twttr;
 }
-function useLoadTwitterEmbedApi(html) {
+function createTweet(tweetId, containerEl) {
+    const twttr = getTwitterEmbedApi();
+    if (twttr) {
+        twttr.widgets.createTweet(tweetId, containerEl);
+        return true;
+    }
+    return false;
+}
+function useLoadTwitterEmbedApi(tweetId, tweetContainerRef) {
     useEffect(() => {
-        if (html) {
-            let twttr = getTwitterEmbedApi();
-            if (twttr) {
-                twttr.widgets.load();
-                return;
+        const { current: containerEl } = tweetContainerRef;
+        if (tweetId && containerEl) {
+            const created = createTweet(tweetId, containerEl);
+            if (!created) {
+                const script = document.createElement('script');
+                script.src = 'https://platform.twitter.com/widgets.js';
+                script.async = true;
+                script.onload = () => {
+                    createTweet(tweetId, containerEl);
+                    script.remove();
+                };
+                document.body.appendChild(script);
             }
-            const script = document.createElement('script');
-            script.src = 'https://platform.twitter.com/widgets.js';
-            script.onload = () => {
-                twttr = getTwitterEmbedApi();
-                twttr === null || twttr === void 0 ? void 0 : twttr.widgets.load();
-                script.remove();
-            };
-            script.async = true;
-            document.body.appendChild(script);
         }
-    }, [html]);
+    }, [tweetId, tweetContainerRef]);
 }
 
 export { useLoadTwitterEmbedApi };

package/embed/renderers/twitter/index.cjs.js

@@ -3,69 +3,47 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var utils = require('@quadrats/react/utils');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function getTwitterEmbedApi() {
     return window.twttr;
 }
-function useLoadTwitterEmbedApi(html) {
+function createTweet(tweetId, containerEl) {
+    const twttr = getTwitterEmbedApi();
+    if (twttr) {
+        twttr.widgets.createTweet(tweetId, containerEl);
+        return true;
+    }
+    return false;
+}
+function useLoadTwitterEmbedApi(tweetId, tweetContainerRef) {
     React.useEffect(() => {
-        if (html) {
-            let twttr = getTwitterEmbedApi();
-            if (twttr) {
-                twttr.widgets.load();
-                return;
+        const { current: containerEl } = tweetContainerRef;
+        if (tweetId && containerEl) {
+            const created = createTweet(tweetId, containerEl);
+            if (!created) {
+                const script = document.createElement('script');
+                script.src = 'https://platform.twitter.com/widgets.js';
+                script.async = true;
+                script.onload = () => {
+                    createTweet(tweetId, containerEl);
+                    script.remove();
+                };
+                document.body.appendChild(script);
             }
-            const script = document.createElement('script');
-            script.src = 'https://platform.twitter.com/widgets.js';
-            script.onload = () => {
-                twttr = getTwitterEmbedApi();
-                twttr === null || twttr === void 0 ? void 0 : twttr.widgets.load();
-                script.remove();
-            };
-            script.async = true;
-            document.body.appendChild(script);
-        }
-    }, [html]);
-}
-
-function useLoadTwitterEmbedHtml(url) {
-    const [html, setHtml] = React.useState();
-    React.useEffect(() => {
-        if (url) {
-            let mounted = true;
-            fetch(`https://publish.twitter.com/oembed?url=${url}&omit_script=true`)
-                .then((res) => res.json())
-                .then(({ html }) => {
-                if (mounted) {
-                    setHtml(html);
-                }
-            });
-            return () => {
-                mounted = false;
-            };
         }
-    }, [url]);
-    return html;
+    }, [tweetId, tweetContainerRef]);
 }
 
-function Twitter({ attributes, children, data: url }) {
-    const html = useLoadTwitterEmbedHtml(url);
-    useLoadTwitterEmbedApi(html);
-    return (React__default.createElement("div", Object.assign({}, attributes, { contentEditable: false }),
-        html && (React__default.createElement("div", { style: {
-                display: 'flex',
-                marginTop: -10,
-                marginBottom: -10,
-            }, 
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML: {
-                __html: html,
-            } })),
-        attributes ? children : undefined));
+function Twitter({ attributes, children, data: tweetId }) {
+    const tweetContainerRef = React.useRef(null);
+    const composedRef = utils.composeRefs([attributes === null || attributes === void 0 ? void 0 : attributes.ref, tweetContainerRef]);
+    useLoadTwitterEmbedApi(tweetId, tweetContainerRef);
+    return (React__default.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }), attributes ? children : undefined));
 }
 
 const defaultRenderTwitterEmbedElement = (props) => React__default.createElement(Twitter, Object.assign({}, props));
@@ -73,4 +51,3 @@ const defaultRenderTwitterEmbedElement = (props) => React__default.createElement
 exports.Twitter = Twitter;
 exports.defaultRenderTwitterEmbedElement = defaultRenderTwitterEmbedElement;
 exports.useLoadTwitterEmbedApi = useLoadTwitterEmbedApi;
-exports.useLoadTwitterEmbedHtml = useLoadTwitterEmbedHtml;

package/embed/renderers/twitter/index.d.ts

@@ -1,4 +1,3 @@
 export { useLoadTwitterEmbedApi } from './hooks/useLoadTwitterEmbedApi';
-export { useLoadTwitterEmbedHtml } from './hooks/useLoadTwitterEmbedHtml';
 export { TwitterProps, default as Twitter } from './components/Twitter';
 export { defaultRenderTwitterEmbedElement } from './defaultRenderTwitterEmbedElement';

package/embed/renderers/twitter/index.js

@@ -1,4 +1,3 @@
 export { useLoadTwitterEmbedApi } from './hooks/useLoadTwitterEmbedApi.js';
-export { useLoadTwitterEmbedHtml } from './hooks/useLoadTwitterEmbedHtml.js';
 export { default as Twitter } from './components/Twitter.js';
 export { defaultRenderTwitterEmbedElement } from './defaultRenderTwitterEmbedElement.js';

package/embed/renderers/vimeo/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var embed = require('@quadrats/react/embed');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/embed/renderers/youtube/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var embed = require('@quadrats/react/embed');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);