@quadrats/react 0.7.8 → 1.0.0

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

@@ -1,21 +1,70 @@
 'use strict';
 
 var React = require('react');
+var clsx = require('clsx');
+var core = require('@quadrats/core');
+var react = require('@quadrats/react');
+var components = require('@quadrats/react/components');
+var icons = require('@quadrats/icons');
+var facebook = require('@quadrats/common/embed/strategies/facebook');
+var base = require('@quadrats/react/embed/renderers/base');
 
-function Facebook({ attributes, children, data: { url, width, height } }) {
-    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-embed-facebook", contentEditable: false }),
-        React.createElement("iframe", { title: url, src: url, width: width, height: height, style: {
-                border: 0,
-                overflow: 'hidden',
-            }, scrolling: "no", frameBorder: "0", 
-            //  eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            //  @ts-ignore
-            //  eslint-disable-next-line react/no-unknown-property
-            allowtransparency: "true", allow: "encrypted-media" }),
-        attributes ? children : undefined));
+function Facebook({ attributes, children, data: { url, width, height }, element: { align }, toolbarElement, }) {
+    return (React.createElement("div", Object.assign({}, attributes, { className: clsx('qdr-embed-facebook', {
+            'qdr-embed-facebook--left': align === 'left' || !align,
+            'qdr-embed-facebook--center': align === 'center',
+            'qdr-embed-facebook--right': align === 'right',
+        }), contentEditable: false }),
+        React.createElement("div", { className: "qdr-embed__inline-toolbar-wrapper", style: { width, height } },
+            toolbarElement,
+            React.createElement("iframe", { title: url, src: url, width: width, height: height, style: {
+                    border: 0,
+                    overflow: 'hidden',
+                }, scrolling: "no", frameBorder: "0", 
+                //  eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                //  @ts-ignore
+                //  eslint-disable-next-line react/no-unknown-property
+                allowtransparency: "true", allow: "encrypted-media" }),
+            attributes ? children : undefined)));
 }
 
-const defaultRenderFacebookEmbedElement = (props) => React.createElement(Facebook, Object.assign({}, props));
+const defaultRenderFacebookEmbedElement = (props) => {
+    const { element } = props;
+    const locale = react.useLocale();
+    return (React.createElement(base.BaseEmbedElement, { element: element, placeholder: locale.editor.facebook.inputPlaceholder, hint: locale.editor.facebook.hint, confirmText: locale.editor.facebook.confirmText, type: "textarea", onConfirm: (editor, path, value) => {
+            var _a, _b, _c, _d;
+            core.Transforms.setNodes(editor, Object.assign(Object.assign({}, props.element), { url: (_a = facebook.FacebookEmbedStrategy.serialize(value)) === null || _a === void 0 ? void 0 : _a.url, width: (_b = facebook.FacebookEmbedStrategy.serialize(value)) === null || _b === void 0 ? void 0 : _b.width, height: (_c = facebook.FacebookEmbedStrategy.serialize(value)) === null || _c === void 0 ? void 0 : _c.height, embedType: (_d = facebook.FacebookEmbedStrategy.serialize(value)) === null || _d === void 0 ? void 0 : _d.embedType }), { at: path });
+        } }, toolbarElement => React.createElement(Facebook, Object.assign({}, props, { toolbarElement: toolbarElement }))));
+};
+const defaultRenderFacebookEmbedPlaceholderElement = () => {
+    const locale = react.useLocale();
+    return (React.createElement("div", { className: "qdr-embed-facebook__placeholder" },
+        React.createElement("div", { className: "qdr-embed-facebook__placeholder__title-wrapper" },
+            React.createElement(components.Icon, { className: "qdr-embed__placeholder__icon", icon: icons.Facebook, width: 48, height: 48 }),
+            React.createElement("p", { className: "qdr-embed__placeholder__title" }, locale.editor.facebook.blockPlaceholder)),
+        React.createElement("div", { className: "qdr-embed-facebook__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-facebook__placeholder__set-wrapper" },
+            React.createElement("div", { className: "qdr-embed-facebook__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-facebook__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-facebook__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 defaultRenderFacebookEmbedJsxSerializer = (props) => {
+    const { element } = props;
+    return (React.createElement(base.BaseEmbedElementWithoutToolbar, { element: element },
+        React.createElement(Facebook, Object.assign({}, props))));
+};
 
 exports.Facebook = Facebook;
 exports.defaultRenderFacebookEmbedElement = defaultRenderFacebookEmbedElement;
+exports.defaultRenderFacebookEmbedJsxSerializer = defaultRenderFacebookEmbedJsxSerializer;
+exports.defaultRenderFacebookEmbedPlaceholderElement = defaultRenderFacebookEmbedPlaceholderElement;

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

@@ -1,2 +1,2 @@
 export { FacebookProps, default as Facebook } from './components/Facebook';
-export { defaultRenderFacebookEmbedElement } from './defaultRenderFacebookEmbedElement';
+export * from './defaultRenderFacebookEmbedElement';

package/embed/renderers/facebook/index.js

@@ -1,2 +1,2 @@
 export { default as Facebook } from './components/Facebook.js';
-export { defaultRenderFacebookEmbedElement } from './defaultRenderFacebookEmbedElement.js';
+export { defaultRenderFacebookEmbedElement, defaultRenderFacebookEmbedJsxSerializer, defaultRenderFacebookEmbedPlaceholderElement } from './defaultRenderFacebookEmbedElement.js';

package/embed/renderers/instagram/components/Instagram.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { InstagramEmbedElement } from '@quadrats/common/embed/strategies/instagram';
 import { RenderElementProps } from '@quadrats/react';
 export interface InstagramProps {
@@ -6,6 +6,7 @@ export interface InstagramProps {
     children?: any;
     data: string;
     element: InstagramEmbedElement;
+    toolbarElement: ReactNode;
 }
-declare function Instagram({ attributes, children, data: permalink }: InstagramProps): React.JSX.Element;
+declare function Instagram({ attributes, children, data: permalink, element: { align }, toolbarElement }: InstagramProps): React.JSX.Element;
 export default Instagram;

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

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
+import clsx from 'clsx';
 import { useLoadInstagramEmbedApi } from '../hooks/useLoadInstagramEmbedApi.js';
 
-function Instagram({ attributes, children, data: permalink }) {
+function Instagram({ attributes, children, data: permalink, element: { align }, toolbarElement }) {
     useLoadInstagramEmbedApi(permalink);
     useEffect(() => {
         const observer = new MutationObserver((mutations) => {
@@ -21,22 +22,32 @@ function Instagram({ attributes, children, data: permalink }) {
             observer.disconnect();
         };
     }, []);
-    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-embed-instagram", contentEditable: false, style: {
+    return (React.createElement("div", Object.assign({}, attributes, { className: clsx('qdr-embed-instagram', {
+            'qdr-embed-instagram--left': align === 'left' || !align,
+            'qdr-embed-instagram--center': align === 'center',
+            'qdr-embed-instagram--right': align === 'right',
+        }), contentEditable: false, style: {
             display: 'flex',
             marginBottom: -12,
         } }),
-        React.createElement("blockquote", { className: "instagram-media", "data-instgrm-captioned": true, "data-instgrm-permalink": permalink, "data-instgrm-version": "13", style: {
-                background: '#FFF',
-                border: 0,
-                borderRadius: 3,
-                boxShadow: '0 0 1px 0 rgba(0,0,0,0.5), 0 1px 10px 0 rgba(0,0,0,0.15)',
-                margin: 1,
+        React.createElement("div", { className: "qdr-embed__inline-toolbar-wrapper", style: {
                 maxWidth: 540,
                 minWidth: 326,
-                padding: 0,
                 width: 'calc(100% - 2px)',
-            } }),
-        attributes ? children : undefined));
+            } },
+            toolbarElement,
+            React.createElement("blockquote", { className: "instagram-media", "data-instgrm-captioned": true, "data-instgrm-permalink": permalink, "data-instgrm-version": "13", style: {
+                    background: '#FFF',
+                    border: 0,
+                    borderRadius: 3,
+                    boxShadow: '0 0 1px 0 rgba(0,0,0,0.5), 0 1px 10px 0 rgba(0,0,0,0.15)',
+                    margin: 1,
+                    maxWidth: 540,
+                    minWidth: 326,
+                    padding: 0,
+                    width: 'calc(100% - 2px)',
+                } }),
+            attributes ? children : undefined)));
 }
 
 export { Instagram as default };

package/embed/renderers/instagram/defaultRenderInstagramEmbedElement.d.ts

@@ -1,3 +1,5 @@
 import React from 'react';
 import { InstagramProps } from './components/Instagram';
 export declare const defaultRenderInstagramEmbedElement: (props: InstagramProps) => React.JSX.Element;
+export declare const defaultRenderInstagramEmbedPlaceholderElement: () => React.JSX.Element;
+export declare const defaultRenderInstagramEmbedJsxSerializer: (props: InstagramProps) => React.JSX.Element;

package/embed/renderers/instagram/defaultRenderInstagramEmbedElement.js

@@ -1,6 +1,46 @@
 import React from 'react';
+import { Transforms } from '@quadrats/core';
+import { useLocale } from '@quadrats/react';
+import { Icon } from '@quadrats/react/components';
+import { Instagram as Instagram$1 } from '@quadrats/icons';
+import { InstagramEmbedStrategy } from '@quadrats/common/embed/strategies/instagram';
 import Instagram from './components/Instagram.js';
+import { BaseEmbedElement, BaseEmbedElementWithoutToolbar } from '@quadrats/react/embed/renderers/base';
 
-const defaultRenderInstagramEmbedElement = (props) => React.createElement(Instagram, Object.assign({}, props));
+const defaultRenderInstagramEmbedElement = (props) => {
+    const { element } = props;
+    const locale = useLocale();
+    return (React.createElement(BaseEmbedElement, { element: element, placeholder: locale.editor.instagram.inputPlaceholder, hint: locale.editor.instagram.hint, confirmText: locale.editor.instagram.confirmText, onConfirm: (editor, path, value) => {
+            var _a;
+            Transforms.setNodes(editor, Object.assign(Object.assign({}, props.element), { url: (_a = InstagramEmbedStrategy.serialize(value)) === null || _a === void 0 ? void 0 : _a.url }), { at: path });
+        } }, toolbarElement => React.createElement(Instagram, Object.assign({}, props, { toolbarElement: toolbarElement }))));
+};
+const defaultRenderInstagramEmbedPlaceholderElement = () => {
+    const locale = useLocale();
+    return (React.createElement("div", { className: "qdr-embed-instagram__placeholder" },
+        React.createElement("div", { className: "qdr-embed-instagram__placeholder__title-wrapper" },
+            React.createElement(Icon, { className: "qdr-embed__placeholder__icon", icon: Instagram$1, width: 48, height: 48 }),
+            React.createElement("p", { className: "qdr-embed__placeholder__title" }, locale.editor.instagram.blockPlaceholder)),
+        React.createElement("div", { className: "qdr-embed__placeholder__body qdr-embed__placeholder__body--square" }),
+        React.createElement("div", { className: "qdr-embed-instagram__placeholder__set-wrapper" },
+            React.createElement("div", { className: "qdr-embed-instagram__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-instagram__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-instagram__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-instagram__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)' } }))));
+};
+const defaultRenderInstagramEmbedJsxSerializer = (props) => {
+    const { element } = props;
+    return (React.createElement(BaseEmbedElementWithoutToolbar, { element: element },
+        React.createElement(Instagram, Object.assign({}, props))));
+};
 
-export { defaultRenderInstagramEmbedElement };
+export { defaultRenderInstagramEmbedElement, defaultRenderInstagramEmbedJsxSerializer, defaultRenderInstagramEmbedPlaceholderElement };

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

@@ -1,6 +1,13 @@
 'use strict';
 
 var React = require('react');
+var clsx = require('clsx');
+var core = require('@quadrats/core');
+var react = require('@quadrats/react');
+var components = require('@quadrats/react/components');
+var icons = require('@quadrats/icons');
+var instagram = require('@quadrats/common/embed/strategies/instagram');
+var base = require('@quadrats/react/embed/renderers/base');
 
 function getInstagramEmbedApi() {
     return window.instgrm;
@@ -26,7 +33,7 @@ function useLoadInstagramEmbedApi(permalink) {
     }, [permalink]);
 }
 
-function Instagram({ attributes, children, data: permalink }) {
+function Instagram({ attributes, children, data: permalink, element: { align }, toolbarElement }) {
     useLoadInstagramEmbedApi(permalink);
     React.useEffect(() => {
         const observer = new MutationObserver((mutations) => {
@@ -46,26 +53,72 @@ function Instagram({ attributes, children, data: permalink }) {
             observer.disconnect();
         };
     }, []);
-    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-embed-instagram", contentEditable: false, style: {
+    return (React.createElement("div", Object.assign({}, attributes, { className: clsx('qdr-embed-instagram', {
+            'qdr-embed-instagram--left': align === 'left' || !align,
+            'qdr-embed-instagram--center': align === 'center',
+            'qdr-embed-instagram--right': align === 'right',
+        }), contentEditable: false, style: {
             display: 'flex',
             marginBottom: -12,
         } }),
-        React.createElement("blockquote", { className: "instagram-media", "data-instgrm-captioned": true, "data-instgrm-permalink": permalink, "data-instgrm-version": "13", style: {
-                background: '#FFF',
-                border: 0,
-                borderRadius: 3,
-                boxShadow: '0 0 1px 0 rgba(0,0,0,0.5), 0 1px 10px 0 rgba(0,0,0,0.15)',
-                margin: 1,
+        React.createElement("div", { className: "qdr-embed__inline-toolbar-wrapper", style: {
                 maxWidth: 540,
                 minWidth: 326,
-                padding: 0,
                 width: 'calc(100% - 2px)',
-            } }),
-        attributes ? children : undefined));
+            } },
+            toolbarElement,
+            React.createElement("blockquote", { className: "instagram-media", "data-instgrm-captioned": true, "data-instgrm-permalink": permalink, "data-instgrm-version": "13", style: {
+                    background: '#FFF',
+                    border: 0,
+                    borderRadius: 3,
+                    boxShadow: '0 0 1px 0 rgba(0,0,0,0.5), 0 1px 10px 0 rgba(0,0,0,0.15)',
+                    margin: 1,
+                    maxWidth: 540,
+                    minWidth: 326,
+                    padding: 0,
+                    width: 'calc(100% - 2px)',
+                } }),
+            attributes ? children : undefined)));
 }
 
-const defaultRenderInstagramEmbedElement = (props) => React.createElement(Instagram, Object.assign({}, props));
+const defaultRenderInstagramEmbedElement = (props) => {
+    const { element } = props;
+    const locale = react.useLocale();
+    return (React.createElement(base.BaseEmbedElement, { element: element, placeholder: locale.editor.instagram.inputPlaceholder, hint: locale.editor.instagram.hint, confirmText: locale.editor.instagram.confirmText, onConfirm: (editor, path, value) => {
+            var _a;
+            core.Transforms.setNodes(editor, Object.assign(Object.assign({}, props.element), { url: (_a = instagram.InstagramEmbedStrategy.serialize(value)) === null || _a === void 0 ? void 0 : _a.url }), { at: path });
+        } }, toolbarElement => React.createElement(Instagram, Object.assign({}, props, { toolbarElement: toolbarElement }))));
+};
+const defaultRenderInstagramEmbedPlaceholderElement = () => {
+    const locale = react.useLocale();
+    return (React.createElement("div", { className: "qdr-embed-instagram__placeholder" },
+        React.createElement("div", { className: "qdr-embed-instagram__placeholder__title-wrapper" },
+            React.createElement(components.Icon, { className: "qdr-embed__placeholder__icon", icon: icons.Instagram, width: 48, height: 48 }),
+            React.createElement("p", { className: "qdr-embed__placeholder__title" }, locale.editor.instagram.blockPlaceholder)),
+        React.createElement("div", { className: "qdr-embed__placeholder__body qdr-embed__placeholder__body--square" }),
+        React.createElement("div", { className: "qdr-embed-instagram__placeholder__set-wrapper" },
+            React.createElement("div", { className: "qdr-embed-instagram__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-instagram__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-instagram__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-instagram__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)' } }))));
+};
+const defaultRenderInstagramEmbedJsxSerializer = (props) => {
+    const { element } = props;
+    return (React.createElement(base.BaseEmbedElementWithoutToolbar, { element: element },
+        React.createElement(Instagram, Object.assign({}, props))));
+};
 
 exports.Instagram = Instagram;
 exports.defaultRenderInstagramEmbedElement = defaultRenderInstagramEmbedElement;
+exports.defaultRenderInstagramEmbedJsxSerializer = defaultRenderInstagramEmbedJsxSerializer;
+exports.defaultRenderInstagramEmbedPlaceholderElement = defaultRenderInstagramEmbedPlaceholderElement;
 exports.useLoadInstagramEmbedApi = useLoadInstagramEmbedApi;

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

@@ -1,3 +1,3 @@
 export { useLoadInstagramEmbedApi } from './hooks/useLoadInstagramEmbedApi';
 export { InstagramProps, default as Instagram } from './components/Instagram';
-export { defaultRenderInstagramEmbedElement } from './defaultRenderInstagramEmbedElement';
+export * from './defaultRenderInstagramEmbedElement';

package/embed/renderers/instagram/index.js

@@ -1,3 +1,3 @@
 export { useLoadInstagramEmbedApi } from './hooks/useLoadInstagramEmbedApi.js';
 export { default as Instagram } from './components/Instagram.js';
-export { defaultRenderInstagramEmbedElement } from './defaultRenderInstagramEmbedElement.js';
+export { defaultRenderInstagramEmbedElement, defaultRenderInstagramEmbedJsxSerializer, defaultRenderInstagramEmbedPlaceholderElement } from './defaultRenderInstagramEmbedElement.js';

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

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

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

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

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

@@ -1,3 +1,5 @@
 import React from 'react';
 import { PodcastAppleProps } from './components/PodcastApple';
 export declare const defaultRenderPodcastAppleEmbedElement: (props: PodcastAppleProps) => React.JSX.Element;
+export declare const defaultRenderPodcastAppleEmbedPlaceholderElement: () => React.JSX.Element;
+export declare const defaultRenderPodcastAppleEmbedJsxSerializer: (props: PodcastAppleProps) => React.JSX.Element;

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

@@ -1,6 +1,39 @@
 import React from 'react';
+import { Transforms } from '@quadrats/core';
+import { useLocale } from '@quadrats/react';
+import { Icon } from '@quadrats/react/components';
+import { PodcastApple as PodcastApple$1 } from '@quadrats/icons';
+import { PodcastAppleEmbedStrategy } from '@quadrats/common/embed/strategies/podcast-apple';
 import PodcastApple from './components/PodcastApple.js';
+import { BaseEmbedElement, BaseEmbedElementWithoutToolbar } from '@quadrats/react/embed/renderers/base';
 
-const defaultRenderPodcastAppleEmbedElement = (props) => React.createElement(PodcastApple, Object.assign({}, props));
+const defaultRenderPodcastAppleEmbedElement = (props) => {
+    const { element } = props;
+    const locale = useLocale();
+    return (React.createElement(BaseEmbedElement, { element: element, placeholder: locale.editor.podcastApple.inputPlaceholder, hint: locale.editor.podcastApple.hint, confirmText: locale.editor.podcastApple.confirmText, onConfirm: (editor, path, value) => {
+            var _a, _b, _c;
+            Transforms.setNodes(editor, Object.assign(Object.assign({}, props.element), { embedType: (_a = PodcastAppleEmbedStrategy.serialize(value)) === null || _a === void 0 ? void 0 : _a.embedType, language: (_b = PodcastAppleEmbedStrategy.serialize(value)) === null || _b === void 0 ? void 0 : _b.language, contextId: (_c = PodcastAppleEmbedStrategy.serialize(value)) === null || _c === void 0 ? void 0 : _c.contextId }), { at: path });
+        } }, toolbarElement => React.createElement(PodcastApple, Object.assign({}, props, { toolbarElement: toolbarElement }))));
+};
+const defaultRenderPodcastAppleEmbedPlaceholderElement = () => {
+    const locale = useLocale();
+    return (React.createElement("div", { className: "qdr-embed-podcast-apple__placeholder" },
+        React.createElement(Icon, { className: "qdr-embed__placeholder__icon", icon: PodcastApple$1, width: 24, height: 24 }),
+        React.createElement("div", { className: "qdr-embed-podcast-apple__placeholder__wrapper" },
+            React.createElement("div", { style: { width: 120 }, className: "qdr-embed__placeholder__body qdr-embed__placeholder__body--square" }),
+            React.createElement("div", { className: "qdr-embed-podcast-apple__placeholder__content-wrapper" },
+                React.createElement("div", { className: "qdr-embed-podcast-apple__placeholder__title-wrapper" },
+                    React.createElement("p", { className: "qdr-embed__placeholder__title" }, locale.editor.podcastApple.blockPlaceholder),
+                    React.createElement("div", { className: "qdr-embed__placeholder__line", style: { marginRight: 'var(--qdr-spacing-18)' } }),
+                    React.createElement("div", { className: "qdr-embed__placeholder__line", style: { marginRight: 'var(--qdr-spacing-24)' } })),
+                React.createElement("div", { className: "qdr-embed-podcast-apple__placeholder__blocks-wrapper" },
+                    React.createElement("div", { className: "qdr-embed__placeholder__block" }),
+                    React.createElement("div", { className: "qdr-embed__placeholder__block" }))))));
+};
+const defaultRenderPodcastAppleEmbedJsxSerializer = (props) => {
+    const { element } = props;
+    return (React.createElement(BaseEmbedElementWithoutToolbar, { element: element },
+        React.createElement(PodcastApple, Object.assign({}, props))));
+};
 
-export { defaultRenderPodcastAppleEmbedElement };
+export { defaultRenderPodcastAppleEmbedElement, defaultRenderPodcastAppleEmbedJsxSerializer, defaultRenderPodcastAppleEmbedPlaceholderElement };

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

@@ -2,16 +2,52 @@
 
 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 podcastApple = require('@quadrats/common/embed/strategies/podcast-apple');
+var base = require('@quadrats/react/embed/renderers/base');
 
-function PodcastApple({ attributes, children, data: src }) {
+function PodcastApple({ attributes, children, data: src, toolbarElement }) {
     const containerRef = React.useRef(null);
     const composedRef = utils.composeRefs([attributes === null || attributes === void 0 ? void 0 : attributes.ref, containerRef]);
     return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-embed-podcast-apple", ref: composedRef, contentEditable: false }),
+        toolbarElement,
         React.createElement("iframe", { title: src, src: src, frameBorder: "0", width: "100%", height: "450px" }),
         attributes ? children : undefined));
 }
 
-const defaultRenderPodcastAppleEmbedElement = (props) => React.createElement(PodcastApple, Object.assign({}, props));
+const defaultRenderPodcastAppleEmbedElement = (props) => {
+    const { element } = props;
+    const locale = react.useLocale();
+    return (React.createElement(base.BaseEmbedElement, { element: element, placeholder: locale.editor.podcastApple.inputPlaceholder, hint: locale.editor.podcastApple.hint, confirmText: locale.editor.podcastApple.confirmText, onConfirm: (editor, path, value) => {
+            var _a, _b, _c;
+            core.Transforms.setNodes(editor, Object.assign(Object.assign({}, props.element), { embedType: (_a = podcastApple.PodcastAppleEmbedStrategy.serialize(value)) === null || _a === void 0 ? void 0 : _a.embedType, language: (_b = podcastApple.PodcastAppleEmbedStrategy.serialize(value)) === null || _b === void 0 ? void 0 : _b.language, contextId: (_c = podcastApple.PodcastAppleEmbedStrategy.serialize(value)) === null || _c === void 0 ? void 0 : _c.contextId }), { at: path });
+        } }, toolbarElement => React.createElement(PodcastApple, Object.assign({}, props, { toolbarElement: toolbarElement }))));
+};
+const defaultRenderPodcastAppleEmbedPlaceholderElement = () => {
+    const locale = react.useLocale();
+    return (React.createElement("div", { className: "qdr-embed-podcast-apple__placeholder" },
+        React.createElement(components.Icon, { className: "qdr-embed__placeholder__icon", icon: icons.PodcastApple, width: 24, height: 24 }),
+        React.createElement("div", { className: "qdr-embed-podcast-apple__placeholder__wrapper" },
+            React.createElement("div", { style: { width: 120 }, className: "qdr-embed__placeholder__body qdr-embed__placeholder__body--square" }),
+            React.createElement("div", { className: "qdr-embed-podcast-apple__placeholder__content-wrapper" },
+                React.createElement("div", { className: "qdr-embed-podcast-apple__placeholder__title-wrapper" },
+                    React.createElement("p", { className: "qdr-embed__placeholder__title" }, locale.editor.podcastApple.blockPlaceholder),
+                    React.createElement("div", { className: "qdr-embed__placeholder__line", style: { marginRight: 'var(--qdr-spacing-18)' } }),
+                    React.createElement("div", { className: "qdr-embed__placeholder__line", style: { marginRight: 'var(--qdr-spacing-24)' } })),
+                React.createElement("div", { className: "qdr-embed-podcast-apple__placeholder__blocks-wrapper" },
+                    React.createElement("div", { className: "qdr-embed__placeholder__block" }),
+                    React.createElement("div", { className: "qdr-embed__placeholder__block" }))))));
+};
+const defaultRenderPodcastAppleEmbedJsxSerializer = (props) => {
+    const { element } = props;
+    return (React.createElement(base.BaseEmbedElementWithoutToolbar, { element: element },
+        React.createElement(PodcastApple, Object.assign({}, props))));
+};
 
 exports.PodcastApple = PodcastApple;
 exports.defaultRenderPodcastAppleEmbedElement = defaultRenderPodcastAppleEmbedElement;
+exports.defaultRenderPodcastAppleEmbedJsxSerializer = defaultRenderPodcastAppleEmbedJsxSerializer;
+exports.defaultRenderPodcastAppleEmbedPlaceholderElement = defaultRenderPodcastAppleEmbedPlaceholderElement;

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

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

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

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { SpotifyEmbedElement } from '@quadrats/common/embed/strategies/spotify';
 import { RenderElementProps } from '@quadrats/react';
 export interface SpotifyProps {
@@ -6,6 +6,7 @@ export interface SpotifyProps {
     children?: any;
     data: string;
     element: SpotifyEmbedElement;
+    toolbarElement: ReactNode;
 }
-declare function Spotify({ attributes, children, data: src }: SpotifyProps): React.JSX.Element;
+declare function Spotify({ attributes, children, data: src, toolbarElement }: SpotifyProps): React.JSX.Element;
 export default Spotify;

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

@@ -1,11 +1,13 @@
 import React, { useRef, useMemo } from 'react';
 import { composeRefs } from '@quadrats/react/utils';
 
-function Spotify({ attributes, children, data: src }) {
+/* eslint-disable react/no-unknown-property */
+function Spotify({ attributes, children, data: src, toolbarElement }) {
     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, 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',

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

@@ -1,3 +1,5 @@
 import React from 'react';
 import { SpotifyProps } from './components/Spotify';
 export declare const defaultRenderSpotifyEmbedElement: (props: SpotifyProps) => React.JSX.Element;
+export declare const defaultRenderSpotifyEmbedPlaceholderElement: () => React.JSX.Element;
+export declare const defaultRenderSpotifyEmbedJsxSerializer: (props: SpotifyProps) => React.JSX.Element;

package/embed/renderers/spotify/defaultRenderSpotifyEmbedElement.js

@@ -1,6 +1,36 @@
 import React from 'react';
+import { Transforms } from '@quadrats/core';
+import { useLocale } from '@quadrats/react';
+import { Icon } from '@quadrats/react/components';
+import { Spotify as Spotify$1 } from '@quadrats/icons';
+import { SpotifyEmbedStrategy } from '@quadrats/common/embed/strategies/spotify';
 import Spotify from './components/Spotify.js';
+import { BaseEmbedElement, BaseEmbedElementWithoutToolbar } from '@quadrats/react/embed/renderers/base';
 
-const defaultRenderSpotifyEmbedElement = (props) => React.createElement(Spotify, Object.assign({}, props));
+const defaultRenderSpotifyEmbedElement = (props) => {
+    const { element } = props;
+    const locale = useLocale();
+    return (React.createElement(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;
+            Transforms.setNodes(editor, Object.assign(Object.assign({}, props.element), { embedType: (_a = SpotifyEmbedStrategy.serialize(value)) === null || _a === void 0 ? void 0 : _a.embedType, contextId: (_b = 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 = 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(Icon, { className: "qdr-embed__placeholder__icon", icon: Spotify$1, 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(BaseEmbedElementWithoutToolbar, { element: element },
+        React.createElement(Spotify, Object.assign({}, props))));
+};
 
-export { defaultRenderSpotifyEmbedElement };
+export { defaultRenderSpotifyEmbedElement, defaultRenderSpotifyEmbedJsxSerializer, defaultRenderSpotifyEmbedPlaceholderElement };