@quadrats/react 1.1.8 → 1.1.10

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

@@ -0,0 +1,55 @@
+'use strict';
+
+var React = require('react');
+var utils = require('@quadrats/react/utils');
+var core = require('@quadrats/core');
+var react = require('@quadrats/react');
+var components = require('@quadrats/react/components');
+var icons = require('@quadrats/icons');
+var spotify = require('@quadrats/common/embed/strategies/spotify');
+var base = require('@quadrats/react/embed/renderers/base');
+
+/* eslint-disable react/no-unknown-property */
+function Spotify({ attributes, children, data: src, toolbarElement }) {
+    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.createElement("div", Object.assign({}, attributes, { ref: composedRef, className: "qdr-embed-spotify", contentEditable: false }),
+        toolbarElement,
+        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));
+}
+
+const defaultRenderSpotifyEmbedElement = (props) => {
+    const { element } = props;
+    const locale = react.useLocale();
+    return (React.createElement(base.BaseEmbedElement, { element: element, placeholder: locale.editor.spotify.inputPlaceholder, hint: locale.editor.spotify.hint, confirmText: locale.editor.spotify.confirmText, onConfirm: (editor, path, value) => {
+            var _a, _b;
+            core.Transforms.setNodes(editor, Object.assign(Object.assign({}, props.element), { embedType: (_a = spotify.SpotifyEmbedStrategy.serialize(value)) === null || _a === void 0 ? void 0 : _a.embedType, contextId: (_b = spotify.SpotifyEmbedStrategy.serialize(value)) === null || _b === void 0 ? void 0 : _b.contextId }), { at: path });
+        } }, toolbarElement => React.createElement(Spotify, Object.assign({}, props, { toolbarElement: toolbarElement }))));
+};
+const defaultRenderSpotifyEmbedPlaceholderElement = () => {
+    const locale = react.useLocale();
+    return (React.createElement("div", { className: "qdr-embed-spotify__placeholder" },
+        React.createElement("div", { style: { width: 120 }, className: "qdr-embed__placeholder__body qdr-embed__placeholder__body--square" }),
+        React.createElement("div", { className: "qdr-embed-spotify__placeholder__title-wrapper" },
+            React.createElement("p", { className: "qdr-embed__placeholder__title" }, locale.editor.spotify.blockPlaceholder),
+            React.createElement("div", { className: "qdr-embed__placeholder__line" }),
+            React.createElement("div", { className: "qdr-embed__placeholder__line", style: { marginRight: 'var(--qdr-spacing-21)' } })),
+        React.createElement("div", { className: "qdr-embed-spotify__placeholder__icon-wrapper" },
+            React.createElement(components.Icon, { className: "qdr-embed__placeholder__icon", icon: icons.Spotify, width: 36, height: 36 }),
+            React.createElement("div", { className: "qdr-embed__placeholder__dot", style: { width: 30, height: 30 } }))));
+};
+const defaultRenderSpotifyEmbedJsxSerializer = (props) => {
+    const { element } = props;
+    return (React.createElement(base.BaseEmbedElementWithoutToolbar, { element: element },
+        React.createElement(Spotify, Object.assign({}, props))));
+};
+
+exports.Spotify = Spotify;
+exports.defaultRenderSpotifyEmbedElement = defaultRenderSpotifyEmbedElement;
+exports.defaultRenderSpotifyEmbedJsxSerializer = defaultRenderSpotifyEmbedJsxSerializer;
+exports.defaultRenderSpotifyEmbedPlaceholderElement = defaultRenderSpotifyEmbedPlaceholderElement;

package/embed/renderers/spotify/index.js

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

package/embed/renderers/spotify/package.json

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

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

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { TwitterEmbedElement } from '@quadrats/common/embed/strategies/twitter';
+import { RenderElementProps } from '@quadrats/react';
+export interface TwitterProps {
+    attributes?: RenderElementProps['attributes'];
+    children?: any;
+    data: string;
+    element: TwitterEmbedElement;
+    toolbarElement: ReactNode;
+}
+declare function Twitter({ attributes, children, data: tweetId, element: { align }, toolbarElement }: TwitterProps): React.JSX.Element;
+export default Twitter;

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

@@ -0,0 +1,24 @@
+import React, { useRef } from 'react';
+import clsx from 'clsx';
+import { composeRefs } from '@quadrats/react/utils';
+import { useLoadTwitterEmbedApi } from '../hooks/useLoadTwitterEmbedApi.js';
+
+function Twitter({ attributes, children, data: tweetId, element: { align }, toolbarElement }) {
+    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, { className: clsx('qdr-embed-twitter', {
+            'qdr-embed-twitter--left': align === 'left' || !align,
+            'qdr-embed-twitter--center': align === 'center',
+            'qdr-embed-twitter--right': align === 'right',
+        }), contentEditable: false }),
+        React.createElement("div", { className: "qdr-embed__inline-toolbar-wrapper", style: {
+                width: '100%',
+                maxWidth: 550,
+            } },
+            toolbarElement,
+            React.createElement("div", { ref: composedRef, className: "qdr-embed-twitter__container" }),
+            attributes ? children : undefined)));
+}
+
+export { Twitter as default };

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TwitterProps } from './components/Twitter';
+export declare const defaultRenderTwitterEmbedElement: (props: TwitterProps) => React.JSX.Element;
+export declare const defaultRenderTwitterEmbedPlaceholderElement: () => React.JSX.Element;
+export declare const defaultRenderTwitterEmbedJsxSerializer: (props: TwitterProps) => React.JSX.Element;

package/embed/renderers/twitter/defaultRenderTwitterEmbedElement.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Transforms } from '@quadrats/core';
+import { useLocale } from '@quadrats/react';
+import { Icon } from '@quadrats/react/components';
+import { Twitter as Twitter$1 } from '@quadrats/icons';
+import { TwitterEmbedStrategy } from '@quadrats/common/embed/strategies/twitter';
+import Twitter from './components/Twitter.js';
+import { BaseEmbedElement, BaseEmbedElementWithoutToolbar } from '@quadrats/react/embed/renderers/base';
+
+const defaultRenderTwitterEmbedElement = (props) => {
+    const { element } = props;
+    const locale = useLocale();
+    return (React.createElement(BaseEmbedElement, { element: element, placeholder: locale.editor.twitter.tweet.inputPlaceholder, hint: locale.editor.twitter.tweet.hint, confirmText: locale.editor.twitter.tweet.confirmText, onConfirm: (editor, path, value) => {
+            var _a, _b;
+            Transforms.setNodes(editor, Object.assign(Object.assign({}, props.element), { embedType: (_a = TwitterEmbedStrategy.serialize(value)) === null || _a === void 0 ? void 0 : _a.embedType, tweetId: (_b = TwitterEmbedStrategy.serialize(value)) === null || _b === void 0 ? void 0 : _b.tweetId }), { at: path });
+        } }, toolbarElement => React.createElement(Twitter, Object.assign({}, props, { toolbarElement: toolbarElement }))));
+};
+const defaultRenderTwitterEmbedPlaceholderElement = () => {
+    const locale = useLocale();
+    return (React.createElement("div", { className: "qdr-embed-twitter__placeholder" },
+        React.createElement("div", { className: "qdr-embed-twitter__placeholder__title-wrapper" },
+            React.createElement(Icon, { className: "qdr-embed__placeholder__icon", icon: Twitter$1, width: 48, height: 48 }),
+            React.createElement("p", { className: "qdr-embed__placeholder__title" }, locale.editor.twitter.tweet.blockPlaceholder)),
+        React.createElement("div", { className: "qdr-embed-twitter__placeholder__line-wrapper" },
+            React.createElement("div", { className: "qdr-embed__placeholder__line", style: { marginRight: 'var(--qdr-spacing-28)' } }),
+            React.createElement("div", { className: "qdr-embed__placeholder__line" }),
+            React.createElement("div", { className: "qdr-embed__placeholder__line", style: { marginRight: 'var(--qdr-spacing-21)' } })),
+        React.createElement("div", { className: "qdr-embed__placeholder__body" }),
+        React.createElement("div", { className: "qdr-embed-twitter__placeholder__set-wrapper" },
+            React.createElement("div", { className: "qdr-embed-twitter__placeholder__tools-set" },
+                React.createElement("div", { className: "qdr-embed__placeholder__dot" }),
+                React.createElement("div", { className: "qdr-embed__placeholder__line qdr-embed__placeholder__line--shortest" })),
+            React.createElement("div", { className: "qdr-embed-twitter__placeholder__tools-set" },
+                React.createElement("div", { className: "qdr-embed__placeholder__dot" }),
+                React.createElement("div", { className: "qdr-embed__placeholder__line qdr-embed__placeholder__line--shortest" })),
+            React.createElement("div", { className: "qdr-embed-twitter__placeholder__tools-set" },
+                React.createElement("div", { className: "qdr-embed__placeholder__dot" }),
+                React.createElement("div", { className: "qdr-embed__placeholder__line qdr-embed__placeholder__line--shortest" })))));
+};
+const defaultRenderTwitterEmbedJsxSerializer = (props) => {
+    const { element } = props;
+    return (React.createElement(BaseEmbedElementWithoutToolbar, { element: element },
+        React.createElement(Twitter, Object.assign({}, props))));
+};
+
+export { defaultRenderTwitterEmbedElement, defaultRenderTwitterEmbedJsxSerializer, defaultRenderTwitterEmbedPlaceholderElement };

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

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

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

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+
+function getTwitterEmbedApi() {
+    return window.twttr;
+}
+function createTweet(tweetId, containerEl) {
+    const twttr = getTwitterEmbedApi();
+    if (twttr) {
+        twttr.widgets.createTweet(tweetId, containerEl);
+        return true;
+    }
+    return false;
+}
+function useLoadTwitterEmbedApi(tweetId, tweetContainerRef) {
+    useEffect(() => {
+        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);
+            }
+        }
+    }, [tweetId, tweetContainerRef]);
+}
+
+export { useLoadTwitterEmbedApi };

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

@@ -0,0 +1,101 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var utils = require('@quadrats/react/utils');
+var core = require('@quadrats/core');
+var react = require('@quadrats/react');
+var components = require('@quadrats/react/components');
+var icons = require('@quadrats/icons');
+var twitter = require('@quadrats/common/embed/strategies/twitter');
+var base = require('@quadrats/react/embed/renderers/base');
+
+function getTwitterEmbedApi() {
+    return window.twttr;
+}
+function createTweet(tweetId, containerEl) {
+    const twttr = getTwitterEmbedApi();
+    if (twttr) {
+        twttr.widgets.createTweet(tweetId, containerEl);
+        return true;
+    }
+    return false;
+}
+function useLoadTwitterEmbedApi(tweetId, tweetContainerRef) {
+    React.useEffect(() => {
+        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);
+            }
+        }
+    }, [tweetId, tweetContainerRef]);
+}
+
+function Twitter({ attributes, children, data: tweetId, element: { align }, toolbarElement }) {
+    const tweetContainerRef = React.useRef(null);
+    const composedRef = utils.composeRefs([attributes === null || attributes === void 0 ? void 0 : attributes.ref, tweetContainerRef]);
+    useLoadTwitterEmbedApi(tweetId, tweetContainerRef);
+    return (React.createElement("div", Object.assign({}, attributes, { className: clsx('qdr-embed-twitter', {
+            'qdr-embed-twitter--left': align === 'left' || !align,
+            'qdr-embed-twitter--center': align === 'center',
+            'qdr-embed-twitter--right': align === 'right',
+        }), contentEditable: false }),
+        React.createElement("div", { className: "qdr-embed__inline-toolbar-wrapper", style: {
+                width: '100%',
+                maxWidth: 550,
+            } },
+            toolbarElement,
+            React.createElement("div", { ref: composedRef, className: "qdr-embed-twitter__container" }),
+            attributes ? children : undefined)));
+}
+
+const defaultRenderTwitterEmbedElement = (props) => {
+    const { element } = props;
+    const locale = react.useLocale();
+    return (React.createElement(base.BaseEmbedElement, { element: element, placeholder: locale.editor.twitter.tweet.inputPlaceholder, hint: locale.editor.twitter.tweet.hint, confirmText: locale.editor.twitter.tweet.confirmText, onConfirm: (editor, path, value) => {
+            var _a, _b;
+            core.Transforms.setNodes(editor, Object.assign(Object.assign({}, props.element), { embedType: (_a = twitter.TwitterEmbedStrategy.serialize(value)) === null || _a === void 0 ? void 0 : _a.embedType, tweetId: (_b = twitter.TwitterEmbedStrategy.serialize(value)) === null || _b === void 0 ? void 0 : _b.tweetId }), { at: path });
+        } }, toolbarElement => React.createElement(Twitter, Object.assign({}, props, { toolbarElement: toolbarElement }))));
+};
+const defaultRenderTwitterEmbedPlaceholderElement = () => {
+    const locale = react.useLocale();
+    return (React.createElement("div", { className: "qdr-embed-twitter__placeholder" },
+        React.createElement("div", { className: "qdr-embed-twitter__placeholder__title-wrapper" },
+            React.createElement(components.Icon, { className: "qdr-embed__placeholder__icon", icon: icons.Twitter, width: 48, height: 48 }),
+            React.createElement("p", { className: "qdr-embed__placeholder__title" }, locale.editor.twitter.tweet.blockPlaceholder)),
+        React.createElement("div", { className: "qdr-embed-twitter__placeholder__line-wrapper" },
+            React.createElement("div", { className: "qdr-embed__placeholder__line", style: { marginRight: 'var(--qdr-spacing-28)' } }),
+            React.createElement("div", { className: "qdr-embed__placeholder__line" }),
+            React.createElement("div", { className: "qdr-embed__placeholder__line", style: { marginRight: 'var(--qdr-spacing-21)' } })),
+        React.createElement("div", { className: "qdr-embed__placeholder__body" }),
+        React.createElement("div", { className: "qdr-embed-twitter__placeholder__set-wrapper" },
+            React.createElement("div", { className: "qdr-embed-twitter__placeholder__tools-set" },
+                React.createElement("div", { className: "qdr-embed__placeholder__dot" }),
+                React.createElement("div", { className: "qdr-embed__placeholder__line qdr-embed__placeholder__line--shortest" })),
+            React.createElement("div", { className: "qdr-embed-twitter__placeholder__tools-set" },
+                React.createElement("div", { className: "qdr-embed__placeholder__dot" }),
+                React.createElement("div", { className: "qdr-embed__placeholder__line qdr-embed__placeholder__line--shortest" })),
+            React.createElement("div", { className: "qdr-embed-twitter__placeholder__tools-set" },
+                React.createElement("div", { className: "qdr-embed__placeholder__dot" }),
+                React.createElement("div", { className: "qdr-embed__placeholder__line qdr-embed__placeholder__line--shortest" })))));
+};
+const defaultRenderTwitterEmbedJsxSerializer = (props) => {
+    const { element } = props;
+    return (React.createElement(base.BaseEmbedElementWithoutToolbar, { element: element },
+        React.createElement(Twitter, Object.assign({}, props))));
+};
+
+exports.Twitter = Twitter;
+exports.defaultRenderTwitterEmbedElement = defaultRenderTwitterEmbedElement;
+exports.defaultRenderTwitterEmbedJsxSerializer = defaultRenderTwitterEmbedJsxSerializer;
+exports.defaultRenderTwitterEmbedPlaceholderElement = defaultRenderTwitterEmbedPlaceholderElement;
+exports.useLoadTwitterEmbedApi = useLoadTwitterEmbedApi;

package/embed/renderers/twitter/index.js

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

package/embed/renderers/twitter/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@quadrats/react/embed/renderers/twitter",
   "sideEffects": false,
-  "quadratsConfig": {
-    "deps": [
-      "embed/renderers/base",
-      "embed"
-    ]
-  }
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
 }

package/embed/renderers/vimeo/defaultRenderVimeoEmbedElement.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { VimeoEmbedElement } from '@quadrats/common/embed/strategies/vimeo';
+import { VideoIframeProps } from '@quadrats/react/embed';
+export declare const defaultRenderVimeoEmbedElement: (props: VideoIframeProps<VimeoEmbedElement>) => React.JSX.Element;
+export declare const defaultRenderVimeoEmbedPlaceholderElement: () => React.JSX.Element;
+export declare const defaultRenderVimeoEmbedJsxSerializer: (props: VideoIframeProps<VimeoEmbedElement>) => React.JSX.Element;

package/embed/renderers/vimeo/defaultRenderVimeoEmbedElement.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Transforms } from '@quadrats/core';
+import { useLocale } from '@quadrats/react';
+import { Icon } from '@quadrats/react/components';
+import { Vimeo } from '@quadrats/icons';
+import { VimeoEmbedStrategy } from '@quadrats/common/embed/strategies/vimeo';
+import { VideoIframe } from '@quadrats/react/embed';
+import { BaseEmbedElement, BaseEmbedElementWithoutToolbar } from '@quadrats/react/embed/renderers/base';
+
+const defaultRenderVimeoEmbedElement = (props) => {
+    const { element } = props;
+    const locale = useLocale();
+    return (React.createElement(BaseEmbedElement, { element: element, placeholder: locale.editor.vimeo.inputPlaceholder, hint: locale.editor.vimeo.hint, confirmText: locale.editor.vimeo.confirmText, onConfirm: (editor, path, value) => {
+            var _a;
+            Transforms.setNodes(editor, Object.assign(Object.assign({}, props.element), { videoId: (_a = VimeoEmbedStrategy.serialize(value)) === null || _a === void 0 ? void 0 : _a.videoId }), { at: path });
+        } }, toolbarElement => React.createElement(VideoIframe, Object.assign({}, props, { toolbarElement: toolbarElement }))));
+};
+const defaultRenderVimeoEmbedPlaceholderElement = () => {
+    const locale = useLocale();
+    return (React.createElement("div", { className: "qdr-embed-vimeo__placeholder" },
+        React.createElement(Icon, { className: "qdr-embed__placeholder__icon", icon: Vimeo, width: 48, height: 48 }),
+        React.createElement("p", { className: "qdr-embed__placeholder__title" }, locale.editor.vimeo.blockPlaceholder)));
+};
+const defaultRenderVimeoEmbedJsxSerializer = (props) => {
+    const { element } = props;
+    return (React.createElement(BaseEmbedElementWithoutToolbar, { element: element },
+        React.createElement(VideoIframe, Object.assign({}, props))));
+};
+
+export { defaultRenderVimeoEmbedElement, defaultRenderVimeoEmbedJsxSerializer, defaultRenderVimeoEmbedPlaceholderElement };

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

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+var core = require('@quadrats/core');
+var react = require('@quadrats/react');
+var components = require('@quadrats/react/components');
+var icons = require('@quadrats/icons');
+var vimeo = require('@quadrats/common/embed/strategies/vimeo');
+var embed = require('@quadrats/react/embed');
+var base = require('@quadrats/react/embed/renderers/base');
+
+const defaultRenderVimeoEmbedElement = (props) => {
+    const { element } = props;
+    const locale = react.useLocale();
+    return (React.createElement(base.BaseEmbedElement, { element: element, placeholder: locale.editor.vimeo.inputPlaceholder, hint: locale.editor.vimeo.hint, confirmText: locale.editor.vimeo.confirmText, onConfirm: (editor, path, value) => {
+            var _a;
+            core.Transforms.setNodes(editor, Object.assign(Object.assign({}, props.element), { videoId: (_a = vimeo.VimeoEmbedStrategy.serialize(value)) === null || _a === void 0 ? void 0 : _a.videoId }), { at: path });
+        } }, toolbarElement => React.createElement(embed.VideoIframe, Object.assign({}, props, { toolbarElement: toolbarElement }))));
+};
+const defaultRenderVimeoEmbedPlaceholderElement = () => {
+    const locale = react.useLocale();
+    return (React.createElement("div", { className: "qdr-embed-vimeo__placeholder" },
+        React.createElement(components.Icon, { className: "qdr-embed__placeholder__icon", icon: icons.Vimeo, width: 48, height: 48 }),
+        React.createElement("p", { className: "qdr-embed__placeholder__title" }, locale.editor.vimeo.blockPlaceholder)));
+};
+const defaultRenderVimeoEmbedJsxSerializer = (props) => {
+    const { element } = props;
+    return (React.createElement(base.BaseEmbedElementWithoutToolbar, { element: element },
+        React.createElement(embed.VideoIframe, Object.assign({}, props))));
+};
+
+exports.defaultRenderVimeoEmbedElement = defaultRenderVimeoEmbedElement;
+exports.defaultRenderVimeoEmbedJsxSerializer = defaultRenderVimeoEmbedJsxSerializer;
+exports.defaultRenderVimeoEmbedPlaceholderElement = defaultRenderVimeoEmbedPlaceholderElement;

package/embed/renderers/vimeo/index.js

@@ -0,0 +1 @@
+export { defaultRenderVimeoEmbedElement, defaultRenderVimeoEmbedJsxSerializer, defaultRenderVimeoEmbedPlaceholderElement } from './defaultRenderVimeoEmbedElement.js';

package/embed/renderers/vimeo/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@quadrats/react/embed/renderers/vimeo",
   "sideEffects": false,
-  "quadratsConfig": {
-    "deps": [
-      "embed/renderers/base",
-      "embed"
-    ]
-  }
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
 }

package/embed/renderers/youtube/defaultRenderYoutubeEmbedElement.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { YoutubeEmbedElement } from '@quadrats/common/embed/strategies/youtube';
+import { VideoIframeProps } from '@quadrats/react/embed';
+export declare const defaultRenderYoutubeEmbedElement: (props: VideoIframeProps<YoutubeEmbedElement>) => React.JSX.Element;
+export declare const defaultRenderYoutubeEmbedPlaceholderElement: () => React.JSX.Element;
+export declare const defaultRenderYoutubeEmbedJsxSerializer: (props: VideoIframeProps<YoutubeEmbedElement>) => React.JSX.Element;

package/embed/renderers/youtube/defaultRenderYoutubeEmbedElement.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Transforms } from '@quadrats/core';
+import { useLocale } from '@quadrats/react';
+import { Icon } from '@quadrats/react/components';
+import { Youtube } from '@quadrats/icons';
+import { YoutubeEmbedStrategy } from '@quadrats/common/embed/strategies/youtube';
+import { VideoIframe } from '@quadrats/react/embed';
+import { BaseEmbedElement, BaseEmbedElementWithoutToolbar } from '@quadrats/react/embed/renderers/base';
+
+const defaultRenderYoutubeEmbedElement = (props) => {
+    const { element } = props;
+    const locale = useLocale();
+    return (React.createElement(BaseEmbedElement, { element: element, placeholder: locale.editor.youtube.inputPlaceholder, hint: locale.editor.youtube.hint, confirmText: locale.editor.youtube.confirmText, onConfirm: (editor, path, value) => {
+            var _a;
+            Transforms.setNodes(editor, Object.assign(Object.assign({}, props.element), { videoId: (_a = YoutubeEmbedStrategy.serialize(value)) === null || _a === void 0 ? void 0 : _a.videoId }), { at: path });
+        } }, toolbarElement => React.createElement(VideoIframe, Object.assign({}, props, { toolbarElement: toolbarElement }))));
+};
+const defaultRenderYoutubeEmbedPlaceholderElement = () => {
+    const locale = useLocale();
+    return (React.createElement("div", { className: "qdr-embed-youtube__placeholder" },
+        React.createElement(Icon, { className: "qdr-embed__placeholder__icon", icon: Youtube, width: 48, height: 48 }),
+        React.createElement("p", { className: "qdr-embed__placeholder__title" }, locale.editor.youtube.blockPlaceholder)));
+};
+const defaultRenderYoutubeEmbedJsxSerializer = (props) => {
+    const { element } = props;
+    return (React.createElement(BaseEmbedElementWithoutToolbar, { element: element },
+        React.createElement(VideoIframe, Object.assign({}, props))));
+};
+
+export { defaultRenderYoutubeEmbedElement, defaultRenderYoutubeEmbedJsxSerializer, defaultRenderYoutubeEmbedPlaceholderElement };

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

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+var core = require('@quadrats/core');
+var react = require('@quadrats/react');
+var components = require('@quadrats/react/components');
+var icons = require('@quadrats/icons');
+var youtube = require('@quadrats/common/embed/strategies/youtube');
+var embed = require('@quadrats/react/embed');
+var base = require('@quadrats/react/embed/renderers/base');
+
+const defaultRenderYoutubeEmbedElement = (props) => {
+    const { element } = props;
+    const locale = react.useLocale();
+    return (React.createElement(base.BaseEmbedElement, { element: element, placeholder: locale.editor.youtube.inputPlaceholder, hint: locale.editor.youtube.hint, confirmText: locale.editor.youtube.confirmText, onConfirm: (editor, path, value) => {
+            var _a;
+            core.Transforms.setNodes(editor, Object.assign(Object.assign({}, props.element), { videoId: (_a = youtube.YoutubeEmbedStrategy.serialize(value)) === null || _a === void 0 ? void 0 : _a.videoId }), { at: path });
+        } }, toolbarElement => React.createElement(embed.VideoIframe, Object.assign({}, props, { toolbarElement: toolbarElement }))));
+};
+const defaultRenderYoutubeEmbedPlaceholderElement = () => {
+    const locale = react.useLocale();
+    return (React.createElement("div", { className: "qdr-embed-youtube__placeholder" },
+        React.createElement(components.Icon, { className: "qdr-embed__placeholder__icon", icon: icons.Youtube, width: 48, height: 48 }),
+        React.createElement("p", { className: "qdr-embed__placeholder__title" }, locale.editor.youtube.blockPlaceholder)));
+};
+const defaultRenderYoutubeEmbedJsxSerializer = (props) => {
+    const { element } = props;
+    return (React.createElement(base.BaseEmbedElementWithoutToolbar, { element: element },
+        React.createElement(embed.VideoIframe, Object.assign({}, props))));
+};
+
+exports.defaultRenderYoutubeEmbedElement = defaultRenderYoutubeEmbedElement;
+exports.defaultRenderYoutubeEmbedJsxSerializer = defaultRenderYoutubeEmbedJsxSerializer;
+exports.defaultRenderYoutubeEmbedPlaceholderElement = defaultRenderYoutubeEmbedPlaceholderElement;

package/embed/renderers/youtube/index.js

@@ -0,0 +1 @@
+export { defaultRenderYoutubeEmbedElement, defaultRenderYoutubeEmbedJsxSerializer, defaultRenderYoutubeEmbedPlaceholderElement } from './defaultRenderYoutubeEmbedElement.js';

package/embed/renderers/youtube/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@quadrats/react/embed/renderers/youtube",
   "sideEffects": false,
-  "quadratsConfig": {
-    "deps": [
-      "embed/renderers/base",
-      "embed"
-    ]
-  }
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
 }

package/embed/toolbar/EmbedToolbarIcon.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ReactEmbed } from '@quadrats/react/embed';
+import { ToolbarIconProps } from '@quadrats/react/toolbar';
+export interface EmbedToolbarIconProps<Provider extends string> extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
+    controller: ReactEmbed<Provider>;
+    /**
+     * The provider supported by this icon.
+     */
+    provider: Provider;
+}
+declare function EmbedToolbarIcon<Provider extends string>(props: EmbedToolbarIconProps<Provider>): React.JSX.Element;
+export default EmbedToolbarIcon;

package/embed/toolbar/EmbedToolbarIcon.js

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