@quadrats/react 1.1.8 → 1.1.9

package/embed/hooks/useVideoIframeSize.js

@@ -0,0 +1,24 @@
+import { useRef, useState, useLayoutEffect } from 'react';
+
+function useVideoIframeSize() {
+    const ref = useRef(null);
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    useLayoutEffect(() => {
+        function handler() {
+            const el = ref.current;
+            if (el) {
+                const width = el.offsetWidth;
+                setSize({ width, height: Math.round(width * 0.75) });
+            }
+        }
+        handler();
+        window.addEventListener('resize', handler);
+        return () => window.removeEventListener('resize', handler);
+    }, [ref]);
+    return {
+        ref,
+        size,
+    };
+}
+
+export { useVideoIframeSize };

package/embed/index.cjs.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var React = require('react');
+var utils = require('@quadrats/react/utils');
+var embed = require('@quadrats/common/embed');
+var react = require('@quadrats/react');
+
+function useVideoIframeSize() {
+    const ref = React.useRef(null);
+    const [size, setSize] = React.useState({ width: 0, height: 0 });
+    React.useLayoutEffect(() => {
+        function handler() {
+            const el = ref.current;
+            if (el) {
+                const width = el.offsetWidth;
+                setSize({ width, height: Math.round(width * 0.75) });
+            }
+        }
+        handler();
+        window.addEventListener('resize', handler);
+        return () => window.removeEventListener('resize', handler);
+    }, [ref]);
+    return {
+        ref,
+        size,
+    };
+}
+
+function VideoIframe({ attributes, children, data: src, toolbarElement, }) {
+    const { ref } = attributes || {};
+    const { ref: containerRef, size } = useVideoIframeSize();
+    const composedRef = ref ? utils.composeRefs([ref, containerRef]) : containerRef;
+    return (React.createElement("div", Object.assign({}, attributes, { ref: composedRef, className: "qdr-embed-video", contentEditable: false }),
+        toolbarElement,
+        React.createElement("div", { style: size },
+            React.createElement("iframe", { title: src, src: src, frameBorder: "0", width: "100%", height: "100%" })),
+        attributes ? children : undefined));
+}
+
+function createRenderEmbedElementBase({ strategies, renderers, }) {
+    return (props) => {
+        const result = embed.deserializeEmbedElementToData(props.element, strategies);
+        if (result) {
+            const [provider, data] = result;
+            const render = renderers[provider];
+            if (render) {
+                return render(Object.assign(Object.assign({}, props), { data }));
+            }
+        }
+    };
+}
+
+function createReactEmbed(options) {
+    const core = embed.createEmbed(options);
+    const { type, strategies } = core;
+    return Object.assign(Object.assign({}, core), { createRenderElement: options => react.createRenderElement({
+            type,
+            render: createRenderEmbedElementBase({ strategies, renderers: options }),
+        }), createRenderPlaceholderElement: options => react.createRenderElement({
+            type: embed.EMBED_PLACEHOLDER_TYPE,
+            render: createRenderEmbedElementBase({ strategies, renderers: options }),
+        }) });
+}
+
+exports.VideoIframe = VideoIframe;
+exports.createReactEmbed = createReactEmbed;
+exports.createRenderEmbedElementBase = createRenderEmbedElementBase;
+exports.useVideoIframeSize = useVideoIframeSize;

package/embed/index.js

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

package/embed/jsx-serializer/createJsxSerializeEmbed.d.ts

@@ -0,0 +1,9 @@
+import { JSX } from 'react';
+import { EmbedStrategies } from '@quadrats/common/embed';
+import { JsxSerializeEmbedElementProps } from './typings';
+export interface CreateJsxSerializeEmbedOptions<Provider extends string> {
+    type?: string;
+    strategies: EmbedStrategies<Provider>;
+    renderers: Record<Provider, (props: JsxSerializeEmbedElementProps<any, any>) => JSX.Element | null | undefined>;
+}
+export declare function createJsxSerializeEmbed<Provider extends string>(options: CreateJsxSerializeEmbedOptions<Provider>): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps) => import("react").JSX.Element | null | undefined;

package/embed/jsx-serializer/createJsxSerializeEmbed.js

@@ -0,0 +1,13 @@
+import { EMBED_TYPE } from '@quadrats/common/embed';
+import { createRenderEmbedElementBase } from '@quadrats/react/embed';
+import { createJsxSerializeElement } from '@quadrats/react/jsx-serializer';
+
+function createJsxSerializeEmbed(options) {
+    const { type = EMBED_TYPE, strategies, renderers } = options;
+    return createJsxSerializeElement({
+        type,
+        render: createRenderEmbedElementBase({ strategies, renderers }),
+    });
+}
+
+export { createJsxSerializeEmbed };

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

@@ -0,0 +1,16 @@
+'use strict';
+
+var facebook = require('@quadrats/react/embed/renderers/facebook');
+
+
+
+Object.prototype.hasOwnProperty.call(facebook, '__proto__') &&
+	!Object.prototype.hasOwnProperty.call(exports, '__proto__') &&
+	Object.defineProperty(exports, '__proto__', {
+		enumerable: true,
+		value: facebook['__proto__']
+	});
+
+Object.keys(facebook).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = facebook[k];
+});

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

@@ -0,0 +1 @@
+export * from '@quadrats/react/embed/renderers/facebook';

package/embed/jsx-serializer/facebook/package.json

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

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

@@ -0,0 +1,15 @@
+'use strict';
+
+var embed = require('@quadrats/common/embed');
+var embed$1 = require('@quadrats/react/embed');
+var jsxSerializer = require('@quadrats/react/jsx-serializer');
+
+function createJsxSerializeEmbed(options) {
+    const { type = embed.EMBED_TYPE, strategies, renderers } = options;
+    return jsxSerializer.createJsxSerializeElement({
+        type,
+        render: embed$1.createRenderEmbedElementBase({ strategies, renderers }),
+    });
+}
+
+exports.createJsxSerializeEmbed = createJsxSerializeEmbed;

package/embed/jsx-serializer/index.js

@@ -0,0 +1 @@
+export { createJsxSerializeEmbed } from './createJsxSerializeEmbed.js';

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

@@ -0,0 +1,16 @@
+'use strict';
+
+var instagram = require('@quadrats/react/embed/renderers/instagram');
+
+
+
+Object.prototype.hasOwnProperty.call(instagram, '__proto__') &&
+	!Object.prototype.hasOwnProperty.call(exports, '__proto__') &&
+	Object.defineProperty(exports, '__proto__', {
+		enumerable: true,
+		value: instagram['__proto__']
+	});
+
+Object.keys(instagram).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = instagram[k];
+});

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

@@ -0,0 +1 @@
+export * from '@quadrats/react/embed/renderers/instagram';

package/embed/jsx-serializer/instagram/package.json

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

package/embed/jsx-serializer/package.json

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

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

@@ -0,0 +1,16 @@
+'use strict';
+
+var twitter = require('@quadrats/react/embed/renderers/twitter');
+
+
+
+Object.prototype.hasOwnProperty.call(twitter, '__proto__') &&
+	!Object.prototype.hasOwnProperty.call(exports, '__proto__') &&
+	Object.defineProperty(exports, '__proto__', {
+		enumerable: true,
+		value: twitter['__proto__']
+	});
+
+Object.keys(twitter).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = twitter[k];
+});

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

@@ -0,0 +1 @@
+export * from '@quadrats/react/embed/renderers/twitter';

package/embed/jsx-serializer/twitter/package.json

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

package/embed/jsx-serializer/typings.d.ts

@@ -0,0 +1,5 @@
+import { EmbedElement } from '@quadrats/common/embed';
+import { WithEmbedRenderData } from '@quadrats/react/embed';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+export interface JsxSerializeEmbedElementProps<EmbedData extends Record<string, unknown>, RenderData> extends JsxSerializeElementProps<EmbedElement & EmbedData>, WithEmbedRenderData<RenderData> {
+}

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

@@ -0,0 +1,16 @@
+'use strict';
+
+var vimeo = require('@quadrats/react/embed/renderers/vimeo');
+
+
+
+Object.prototype.hasOwnProperty.call(vimeo, '__proto__') &&
+	!Object.prototype.hasOwnProperty.call(exports, '__proto__') &&
+	Object.defineProperty(exports, '__proto__', {
+		enumerable: true,
+		value: vimeo['__proto__']
+	});
+
+Object.keys(vimeo).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = vimeo[k];
+});

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

@@ -0,0 +1 @@
+export * from '@quadrats/react/embed/renderers/vimeo';

package/embed/jsx-serializer/vimeo/package.json

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

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

@@ -0,0 +1,7 @@
+'use strict';
+
+var youtube = require('@quadrats/react/embed/renderers/youtube');
+
+
+
+exports.defaultRenderYoutubeEmbedJsxSerializer = youtube.defaultRenderYoutubeEmbedJsxSerializer;

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

@@ -0,0 +1 @@
+export { defaultRenderYoutubeEmbedJsxSerializer } from '@quadrats/react/embed/renderers/youtube';

package/embed/jsx-serializer/youtube/package.json

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

package/embed/package.json

@@ -4,12 +4,7 @@
     "**/*.css",
     "**/*.scss"
   ],
-  "quadratsConfig": {
-    "deps": [
-      "__ROOT__"
-    ],
-    "styles": {
-      "embed": "embed"
-    }
-  }
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
 }

package/embed/renderers/base/components/BaseEmbedElement.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import { Path } from '@quadrats/core';
+import { EmbedElement } from '@quadrats/common/embed';
+import { QuadratsReactEditor } from '@quadrats/react';
+export interface BaseEmbedElementWithoutToolbarProps {
+    element: EmbedElement;
+    children: ReactNode;
+}
+export interface BaseEmbedElementProps {
+    element: EmbedElement;
+    haveAlignConfig?: boolean;
+    type?: 'input' | 'textarea';
+    placeholder?: string;
+    hint?: string;
+    confirmText?: string;
+    onConfirm?: (editor: QuadratsReactEditor, path: Path, value: string) => void;
+    children: (toolbarElement: ReactNode) => ReactNode;
+}
+export declare const BaseEmbedElementWithoutToolbar: ({ children }: BaseEmbedElementWithoutToolbarProps) => React.JSX.Element;
+declare const BaseEmbedElement: ({ element, haveAlignConfig, type, placeholder, hint, confirmText, onConfirm, children, }: BaseEmbedElementProps) => React.JSX.Element;
+export default BaseEmbedElement;

package/embed/renderers/base/components/BaseEmbedElement.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Transforms } from '@quadrats/core';
+import { AlignLeft, AlignCenter, AlignRight, Edit, Trash } from '@quadrats/icons';
+import { useModal, useSlateStatic, ReactEditor } from '@quadrats/react';
+import { InlineToolbar } from '@quadrats/react/toolbar';
+
+const BaseEmbedElementWithoutToolbar = ({ children }) => {
+    return React.createElement("div", { className: "qdr-embed" }, children);
+};
+const BaseEmbedElement = ({ element, haveAlignConfig = true, type = 'input', placeholder, hint, confirmText, onConfirm, children, }) => {
+    const { setEmbedModalConfig } = useModal();
+    const editor = useSlateStatic();
+    const path = ReactEditor.findPath(editor, element);
+    return (React.createElement("div", { className: "qdr-embed" }, children(React.createElement(InlineToolbar, { className: "qdr-embed__inline-toolbar", iconGroups: [
+            haveAlignConfig
+                ? {
+                    enabledBgColor: true,
+                    icons: [
+                        {
+                            icon: AlignLeft,
+                            onClick: () => {
+                                Transforms.setNodes(editor, { align: 'left' }, { at: path });
+                            },
+                            active: element.align === 'left' || !element.align,
+                        },
+                        {
+                            icon: AlignCenter,
+                            onClick: () => {
+                                Transforms.setNodes(editor, { align: 'center' }, { at: path });
+                            },
+                            active: element.align === 'center',
+                        },
+                        {
+                            icon: AlignRight,
+                            onClick: () => {
+                                Transforms.setNodes(editor, { align: 'right' }, { at: path });
+                            },
+                            active: element.align === 'right',
+                        },
+                    ],
+                }
+                : { icons: [] },
+            {
+                icons: [
+                    {
+                        icon: Edit,
+                        onClick: () => {
+                            setEmbedModalConfig({
+                                placeholder: placeholder || '',
+                                confirmText: confirmText || '',
+                                hint: hint || '',
+                                type,
+                                onConfirm: (value) => {
+                                    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(editor, path, value);
+                                },
+                            });
+                        },
+                    },
+                    {
+                        icon: Trash,
+                        onClick: () => {
+                            Transforms.removeNodes(editor, { at: path });
+                        },
+                    },
+                ],
+            },
+        ] }))));
+};
+
+export { BaseEmbedElementWithoutToolbar, BaseEmbedElement as default };

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

@@ -0,0 +1,73 @@
+'use strict';
+
+var React = require('react');
+var core = require('@quadrats/core');
+var icons = require('@quadrats/icons');
+var react = require('@quadrats/react');
+var toolbar = require('@quadrats/react/toolbar');
+
+const BaseEmbedElementWithoutToolbar = ({ children }) => {
+    return React.createElement("div", { className: "qdr-embed" }, children);
+};
+const BaseEmbedElement = ({ element, haveAlignConfig = true, type = 'input', placeholder, hint, confirmText, onConfirm, children, }) => {
+    const { setEmbedModalConfig } = react.useModal();
+    const editor = react.useSlateStatic();
+    const path = react.ReactEditor.findPath(editor, element);
+    return (React.createElement("div", { className: "qdr-embed" }, children(React.createElement(toolbar.InlineToolbar, { className: "qdr-embed__inline-toolbar", iconGroups: [
+            haveAlignConfig
+                ? {
+                    enabledBgColor: true,
+                    icons: [
+                        {
+                            icon: icons.AlignLeft,
+                            onClick: () => {
+                                core.Transforms.setNodes(editor, { align: 'left' }, { at: path });
+                            },
+                            active: element.align === 'left' || !element.align,
+                        },
+                        {
+                            icon: icons.AlignCenter,
+                            onClick: () => {
+                                core.Transforms.setNodes(editor, { align: 'center' }, { at: path });
+                            },
+                            active: element.align === 'center',
+                        },
+                        {
+                            icon: icons.AlignRight,
+                            onClick: () => {
+                                core.Transforms.setNodes(editor, { align: 'right' }, { at: path });
+                            },
+                            active: element.align === 'right',
+                        },
+                    ],
+                }
+                : { icons: [] },
+            {
+                icons: [
+                    {
+                        icon: icons.Edit,
+                        onClick: () => {
+                            setEmbedModalConfig({
+                                placeholder: placeholder || '',
+                                confirmText: confirmText || '',
+                                hint: hint || '',
+                                type,
+                                onConfirm: (value) => {
+                                    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(editor, path, value);
+                                },
+                            });
+                        },
+                    },
+                    {
+                        icon: icons.Trash,
+                        onClick: () => {
+                            core.Transforms.removeNodes(editor, { at: path });
+                        },
+                    },
+                ],
+            },
+        ] }))));
+};
+
+exports.BaseEmbedElement = BaseEmbedElement;
+exports.BaseEmbedElementWithoutToolbar = BaseEmbedElementWithoutToolbar;

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

@@ -0,0 +1 @@
+export { BaseEmbedElementProps, default as BaseEmbedElement, BaseEmbedElementWithoutToolbar, } from './components/BaseEmbedElement';

package/embed/renderers/base/index.js

@@ -0,0 +1 @@
+export { default as BaseEmbedElement, BaseEmbedElementWithoutToolbar } from './components/BaseEmbedElement.js';

package/embed/renderers/base/package.json

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

package/embed/renderers/facebook/components/Facebook.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { FacebookDeserializedEmbedData, FacebookEmbedElement } from '@quadrats/common/embed/strategies/facebook';
+import { RenderElementProps } from '@quadrats/react';
+export interface FacebookProps {
+    attributes?: RenderElementProps['attributes'];
+    children?: any;
+    data: FacebookDeserializedEmbedData;
+    element: FacebookEmbedElement;
+    toolbarElement: ReactNode;
+}
+declare function Facebook({ attributes, children, data: { url, width, height }, element: { align }, toolbarElement, }: FacebookProps): React.JSX.Element;
+export default Facebook;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import clsx from 'clsx';
+
+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)));
+}
+
+export { Facebook as default };

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { FacebookProps } from './components/Facebook';
+export declare const defaultRenderFacebookEmbedElement: (props: FacebookProps) => React.JSX.Element;
+export declare const defaultRenderFacebookEmbedPlaceholderElement: () => React.JSX.Element;
+export declare const defaultRenderFacebookEmbedJsxSerializer: (props: FacebookProps) => React.JSX.Element;

package/embed/renderers/facebook/defaultRenderFacebookEmbedElement.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Transforms } from '@quadrats/core';
+import { useLocale } from '@quadrats/react';
+import { Icon } from '@quadrats/react/components';
+import { Facebook as Facebook$1 } from '@quadrats/icons';
+import Facebook from './components/Facebook.js';
+import { FacebookEmbedStrategy } from '@quadrats/common/embed/strategies/facebook';
+import { BaseEmbedElement, BaseEmbedElementWithoutToolbar } from '@quadrats/react/embed/renderers/base';
+
+const defaultRenderFacebookEmbedElement = (props) => {
+    const { element } = props;
+    const locale = useLocale();
+    return (React.createElement(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;
+            Transforms.setNodes(editor, Object.assign(Object.assign({}, props.element), { url: (_a = FacebookEmbedStrategy.serialize(value)) === null || _a === void 0 ? void 0 : _a.url, width: (_b = FacebookEmbedStrategy.serialize(value)) === null || _b === void 0 ? void 0 : _b.width, height: (_c = FacebookEmbedStrategy.serialize(value)) === null || _c === void 0 ? void 0 : _c.height, embedType: (_d = 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 = useLocale();
+    return (React.createElement("div", { className: "qdr-embed-facebook__placeholder" },
+        React.createElement("div", { className: "qdr-embed-facebook__placeholder__title-wrapper" },
+            React.createElement(Icon, { className: "qdr-embed__placeholder__icon", icon: Facebook$1, 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(BaseEmbedElementWithoutToolbar, { element: element },
+        React.createElement(Facebook, Object.assign({}, props))));
+};
+
+export { defaultRenderFacebookEmbedElement, defaultRenderFacebookEmbedJsxSerializer, defaultRenderFacebookEmbedPlaceholderElement };