@quadrats/react 0.7.7 → 1.0.0

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

@@ -2,12 +2,20 @@
 
 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');
 
-function Spotify({ attributes, children, data: src }) {
+/* 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',
@@ -15,7 +23,33 @@ function Spotify({ attributes, children, data: src }) {
         attributes ? children : undefined));
 }
 
-const defaultRenderSpotifyEmbedElement = (props) => React.createElement(Spotify, Object.assign({}, props));
+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.d.ts

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

package/embed/renderers/spotify/index.js

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { TwitterEmbedElement } from '@quadrats/common/embed/strategies/twitter';
 import { RenderElementProps } from '@quadrats/react';
 export interface TwitterProps {
@@ -6,6 +6,7 @@ export interface TwitterProps {
     children?: any;
     data: string;
     element: TwitterEmbedElement;
+    toolbarElement: ReactNode;
 }
-declare function Twitter({ attributes, children, data: tweetId }: TwitterProps): React.JSX.Element;
+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,12 +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 }) {
+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, { ref: composedRef, className: "qdr-embed-twitter", contentEditable: false }), attributes ? children : undefined));
+    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,3 +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

@@ -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 { 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) => React.createElement(Twitter, Object.assign({}, props));
+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 };
+export { defaultRenderTwitterEmbedElement, defaultRenderTwitterEmbedJsxSerializer, defaultRenderTwitterEmbedPlaceholderElement };

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

@@ -1,7 +1,14 @@
 '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;
@@ -33,15 +40,62 @@ function useLoadTwitterEmbedApi(tweetId, tweetContainerRef) {
     }, [tweetId, tweetContainerRef]);
 }
 
-function Twitter({ attributes, children, data: tweetId }) {
+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, { ref: composedRef, className: "qdr-embed-twitter", contentEditable: false }), attributes ? children : undefined));
+    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) => React.createElement(Twitter, Object.assign({}, props));
+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.d.ts

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

package/embed/renderers/twitter/index.js

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

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

@@ -2,3 +2,5 @@ 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

@@ -1,6 +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) => (React.createElement(VideoIframe, Object.assign({}, props)));
+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 };
+export { defaultRenderVimeoEmbedElement, defaultRenderVimeoEmbedJsxSerializer, defaultRenderVimeoEmbedPlaceholderElement };

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

@@ -1,8 +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) => (React.createElement(embed.VideoIframe, Object.assign({}, props)));
+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.d.ts

@@ -1 +1 @@
-export { defaultRenderVimeoEmbedElement } from './defaultRenderVimeoEmbedElement';
+export * from './defaultRenderVimeoEmbedElement';

package/embed/renderers/vimeo/index.js

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

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

@@ -2,3 +2,5 @@ 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

@@ -1,6 +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) => (React.createElement(VideoIframe, Object.assign({}, props)));
+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 };
+export { defaultRenderYoutubeEmbedElement, defaultRenderYoutubeEmbedJsxSerializer, defaultRenderYoutubeEmbedPlaceholderElement };

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

@@ -1,8 +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) => (React.createElement(embed.VideoIframe, Object.assign({}, props)));
+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.d.ts

@@ -1 +1 @@
-export { defaultRenderYoutubeEmbedElement } from './defaultRenderYoutubeEmbedElement';
+export * from './defaultRenderYoutubeEmbedElement';

package/embed/renderers/youtube/index.js

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

package/embed/toolbar/EmbedToolbarIcon.d.ts

@@ -1,15 +1,12 @@
 import React from 'react';
-import { Editor } from '@quadrats/react';
-import { InputWidgetConfig } from '@quadrats/common/input-widget';
 import { ReactEmbed } from '@quadrats/react/embed';
 import { ToolbarIconProps } from '@quadrats/react/toolbar';
-export interface EmbedToolbarIconProps<Provider extends string> extends Omit<ToolbarIconProps, 'active' | 'onClick'>, Pick<InputWidgetConfig, 'getPlaceholder'> {
+export interface EmbedToolbarIconProps<Provider extends string> extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
     controller: ReactEmbed<Provider>;
     /**
-     * The providers supported by this icon.
+     * The provider supported by this icon.
      */
-    providers: Provider[];
-    startToolInput?: (editor: Editor, inputConfig: InputWidgetConfig) => void;
+    provider: Provider;
 }
 declare function EmbedToolbarIcon<Provider extends string>(props: EmbedToolbarIconProps<Provider>): React.JSX.Element;
 export default EmbedToolbarIcon;

package/embed/toolbar/EmbedToolbarIcon.js

@@ -4,8 +4,8 @@ import { ToolbarIcon } from '@quadrats/react/toolbar';
 import { useEmbedTool } from './useEmbedTool.js';
 
 function EmbedToolbarIcon(props) {
-    const { controller, providers, getPlaceholder, startToolInput } = props, rest = __rest(props, ["controller", "providers", "getPlaceholder", "startToolInput"]);
-    const { onClick } = useEmbedTool(controller, providers, getPlaceholder, startToolInput);
+    const { controller, provider } = props, rest = __rest(props, ["controller", "provider"]);
+    const { onClick } = useEmbedTool(controller, provider);
     return React.createElement(ToolbarIcon, Object.assign({}, rest, { onClick: onClick }));
 }
 

package/embed/toolbar/index.cjs.js

@@ -1,27 +1,112 @@
 'use strict';
 
+var React = require('react');
+var core = require('@quadrats/core');
 var react = require('@quadrats/react');
-var toolbar = require('@quadrats/react/toolbar');
+var embed = require('@quadrats/common/embed');
 var tslib = require('tslib');
-var React = require('react');
+var toolbar = require('@quadrats/react/toolbar');
 
-function useEmbedTool(controller, providers, getPlaceholder, startToolInput) {
+function useEmbedTool(controller, provider) {
+    const locale = react.useLocale();
     const editor = react.useSlateStatic();
-    const defaultStartToolInput = toolbar.useStartToolInput();
-    const start = startToolInput
-        ? inputConfig => startToolInput(editor, inputConfig)
-        : defaultStartToolInput;
+    const { setEmbedModalConfig, isModalClosed, setIsModalClosed } = react.useModal();
+    const config = React.useMemo(() => {
+        switch (provider) {
+            case 'youtube':
+                return {
+                    type: 'input',
+                    placeholder: locale.editor.youtube.inputPlaceholder,
+                    confirmText: locale.editor.youtube.confirmText,
+                    hint: locale.editor.youtube.hint,
+                };
+            case 'vimeo':
+                return {
+                    type: 'input',
+                    placeholder: locale.editor.vimeo.inputPlaceholder,
+                    confirmText: locale.editor.vimeo.confirmText,
+                    hint: locale.editor.vimeo.hint,
+                };
+            case 'instagram':
+                return {
+                    type: 'input',
+                    placeholder: locale.editor.instagram.inputPlaceholder,
+                    confirmText: locale.editor.instagram.confirmText,
+                    hint: locale.editor.instagram.hint,
+                };
+            case 'facebook':
+                return {
+                    type: 'textarea',
+                    placeholder: locale.editor.facebook.inputPlaceholder,
+                    confirmText: locale.editor.facebook.confirmText,
+                    hint: locale.editor.facebook.hint,
+                };
+            case 'twitter':
+                return {
+                    type: 'input',
+                    placeholder: locale.editor.twitter.tweet.inputPlaceholder,
+                    confirmText: locale.editor.twitter.tweet.confirmText,
+                    hint: locale.editor.twitter.tweet.hint,
+                };
+            case 'podcastApple':
+                return {
+                    type: 'input',
+                    placeholder: locale.editor.podcastApple.inputPlaceholder,
+                    confirmText: locale.editor.podcastApple.confirmText,
+                    hint: locale.editor.podcastApple.hint,
+                };
+            case 'spotify':
+                return {
+                    type: 'input',
+                    placeholder: locale.editor.spotify.inputPlaceholder,
+                    confirmText: locale.editor.spotify.confirmText,
+                    hint: locale.editor.spotify.hint,
+                };
+            default:
+                return {
+                    type: 'input',
+                    placeholder: '',
+                    confirmText: '',
+                    hint: '',
+                };
+        }
+    }, [locale, provider]);
+    React.useEffect(() => {
+        const [match] = core.Editor.nodes(editor, {
+            at: [],
+            match: (node) => {
+                const placeholderElement = node;
+                return (core.Element.isElement(placeholderElement) &&
+                    placeholderElement.type === embed.EMBED_PLACEHOLDER_TYPE &&
+                    placeholderElement.provider === provider);
+            },
+        });
+        if (match) {
+            setEmbedModalConfig(Object.assign({ onConfirm: (value) => {
+                    controller.removeEmbedPlaceholder(editor);
+                    controller.insertEmbed(editor, provider, value);
+                } }, config));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [config, controller, editor, provider]);
+    React.useEffect(() => {
+        if (isModalClosed) {
+            setTimeout(() => {
+                controller.removeEmbedPlaceholder(editor);
+                setIsModalClosed(false);
+            }, 250);
+        }
+    }, [controller, editor, isModalClosed, setIsModalClosed]);
     return {
-        onClick: () => start({
-            getPlaceholder,
-            confirm: embedCode => controller.insertEmbed(editor, providers, embedCode),
-        }),
+        onClick: () => {
+            controller.insertEmbedPlaceholder(editor, provider);
+        },
     };
 }
 
 function EmbedToolbarIcon(props) {
-    const { controller, providers, getPlaceholder, startToolInput } = props, rest = tslib.__rest(props, ["controller", "providers", "getPlaceholder", "startToolInput"]);
-    const { onClick } = useEmbedTool(controller, providers, getPlaceholder, startToolInput);
+    const { controller, provider } = props, rest = tslib.__rest(props, ["controller", "provider"]);
+    const { onClick } = useEmbedTool(controller, provider);
     return React.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { onClick: onClick }));
 }
 

package/embed/toolbar/useEmbedTool.d.ts

@@ -1,6 +1,4 @@
-import { InputWidgetConfig } from '@quadrats/common/input-widget';
-import { Editor } from '@quadrats/react';
 import { ReactEmbed } from '@quadrats/react/embed';
-export declare function useEmbedTool<P extends string>(controller: ReactEmbed<P>, providers: P[], getPlaceholder: InputWidgetConfig['getPlaceholder'], startToolInput?: (editor: Editor, inputConfig: InputWidgetConfig) => void): {
+export declare function useEmbedTool<P extends string>(controller: ReactEmbed<P>, provider: P): {
     onClick: () => void;
 };