@quadrats/react 1.1.7 → 1.1.8

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

@@ -1,124 +0,0 @@
-'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;
-}
-function useLoadInstagramEmbedApi(permalink) {
-    React.useEffect(() => {
-        if (permalink) {
-            let instgrm = getInstagramEmbedApi();
-            if (instgrm) {
-                instgrm.Embeds.process();
-                return;
-            }
-            const script = document.createElement('script');
-            script.src = '//www.instagram.com/embed.js';
-            script.onload = () => {
-                instgrm = getInstagramEmbedApi();
-                instgrm === null || instgrm === void 0 ? void 0 : instgrm.Embeds.process();
-                script.remove();
-            };
-            script.async = true;
-            document.body.appendChild(script);
-        }
-    }, [permalink]);
-}
-
-function Instagram({ attributes, children, data: permalink, element: { align }, toolbarElement }) {
-    useLoadInstagramEmbedApi(permalink);
-    React.useEffect(() => {
-        const observer = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                mutation.addedNodes.forEach((node) => {
-                    if (node.tagName === 'IFRAME') {
-                        const iframeNode = node;
-                        if (iframeNode.src.includes('instagram.com')) {
-                            iframeNode.setAttribute('title', 'Instagram 貼文');
-                        }
-                    }
-                });
-            });
-        });
-        observer.observe(document.body, { childList: true, subtree: true });
-        return () => {
-            observer.disconnect();
-        };
-    }, []);
-    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("div", { className: "qdr-embed__inline-toolbar-wrapper", style: {
-                maxWidth: 540,
-                minWidth: 326,
-                width: 'calc(100% - 2px)',
-            } },
-            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) => {
-    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.js

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

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

@@ -1,11 +0,0 @@
-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, toolbarElement }: PropsWithChildren<PodcastAppleProps>): React.JSX.Element;
-export default PodcastApple;

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

@@ -1,13 +0,0 @@
-import React, { useRef } from 'react';
-import { composeRefs } from '@quadrats/react/utils';
-
-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));
-}
-
-export { PodcastApple as default };

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

@@ -1,5 +0,0 @@
-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,39 +0,0 @@
-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) => {
-    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, defaultRenderPodcastAppleEmbedJsxSerializer, defaultRenderPodcastAppleEmbedPlaceholderElement };

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

@@ -1,53 +0,0 @@
-'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 podcastApple = require('@quadrats/common/embed/strategies/podcast-apple');
-var base = require('@quadrats/react/embed/renderers/base');
-
-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) => {
-    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.js

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

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

@@ -1,12 +0,0 @@
-import React, { ReactNode } from '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;
-    toolbarElement: ReactNode;
-}
-declare function Spotify({ attributes, children, data: src, toolbarElement }: SpotifyProps): React.JSX.Element;
-export default Spotify;

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

@@ -1,18 +0,0 @@
-import React, { useRef, useMemo } from 'react';
-import { composeRefs } from '@quadrats/react/utils';
-
-/* 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',
-            } }),
-        attributes ? children : undefined));
-}
-
-export { Spotify as default };

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

@@ -1,5 +0,0 @@
-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,36 +0,0 @@
-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) => {
-    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, defaultRenderSpotifyEmbedJsxSerializer, defaultRenderSpotifyEmbedPlaceholderElement };

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

@@ -1,55 +0,0 @@
-'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

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

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

@@ -1,12 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

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

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

@@ -1,33 +0,0 @@
-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 };