@quadrats/react 0.7.8 → 1.1.0

package/embed/createReactEmbed.js

@@ -1,4 +1,4 @@
-import { createEmbed } from '@quadrats/common/embed';
+import { createEmbed, EMBED_PLACEHOLDER_TYPE } from '@quadrats/common/embed';
 import { createRenderElement } from '@quadrats/react';
 import { createRenderEmbedElementBase } from './createRenderEmbedElementBase.js';
 
@@ -8,6 +8,9 @@ function createReactEmbed(options) {
     return Object.assign(Object.assign({}, core), { createRenderElement: options => createRenderElement({
             type,
             render: createRenderEmbedElementBase({ strategies, renderers: options }),
+        }), createRenderPlaceholderElement: options => createRenderElement({
+            type: EMBED_PLACEHOLDER_TYPE,
+            render: createRenderEmbedElementBase({ strategies, renderers: options }),
         }) });
 }
 

package/embed/createRenderEmbedElementBase.js

@@ -6,7 +6,9 @@ function createRenderEmbedElementBase({ strategies, renderers, }) {
         if (result) {
             const [provider, data] = result;
             const render = renderers[provider];
-            return render(Object.assign(Object.assign({}, props), { data }));
+            if (render) {
+                return render(Object.assign(Object.assign({}, props), { data }));
+            }
         }
     };
 }

package/embed/embed.css

@@ -0,0 +1 @@
+.qdr-embed{position:relative;margin:var(--qdr-spacing-14) 0}.qdr-embed:hover .qdr-embed__inline-toolbar{opacity:1;pointer-events:auto}.qdr-embed__inline-toolbar-wrapper{position:relative}.qdr-embed__placeholder__icon{color:var(--qdr-action-inactive)}.qdr-embed__placeholder__title{margin:0;color:var(--qdr-text-secondary);font-size:var(--qdr-typography-basic-h5-font-size);line-height:var(--qdr-typography-basic-h5-line-height);letter-spacing:var(--qdr-typography-basic-h5-letter-spacing);font-weight:var(--qdr-typography-basic-h5-font-weight)}.qdr-embed__placeholder__line{align-self:stretch;height:16px;border-radius:var(--qdr-radius-6);opacity:.2;background:linear-gradient(90deg, var(--qdr-action-inactive) 0%, var(--qdr-divider) 100%)}.qdr-embed__placeholder__line--shortest{align-self:auto;width:32px}.qdr-embed__placeholder__block{width:120px;height:32px;border-radius:var(--qdr-radius-3);opacity:.2;background:linear-gradient(90deg, var(--qdr-action-inactive) 0%, var(--qdr-divider) 100%)}.qdr-embed__placeholder__body{width:100%;aspect-ratio:16/9;border-radius:var(--qdr-radius-6);opacity:.2;background:linear-gradient(90deg, var(--qdr-action-inactive) 0%, var(--qdr-divider) 100%)}.qdr-embed__placeholder__body--square{aspect-ratio:1/1}.qdr-embed__placeholder__dot{width:24px;height:24px;border-radius:50%;opacity:.2;background:linear-gradient(90deg, var(--qdr-action-inactive) 0%, var(--qdr-divider) 100%)}.qdr-embed-youtube__placeholder,.qdr-embed-vimeo__placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--qdr-spacing-4);width:100%;aspect-ratio:16/9;border-radius:var(--qdr-radius-3);border:1px solid var(--qdr-divider);background-color:var(--qdr-block)}.qdr-embed-podcast-apple__placeholder{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;border-radius:var(--qdr-radius-5);border:1px solid var(--qdr-divider);background-color:var(--qdr-block);padding:var(--qdr-spacing-4) var(--qdr-spacing-7) var(--qdr-spacing-7);gap:var(--qdr-spacing-4)}.qdr-embed-podcast-apple__placeholder__wrapper{align-self:stretch;display:flex;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-7)}.qdr-embed-podcast-apple__placeholder__content-wrapper{flex:1;align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between}.qdr-embed-podcast-apple__placeholder__title-wrapper{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-4)}.qdr-embed-podcast-apple__placeholder__blocks-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:var(--qdr-spacing-4)}.qdr-embed-spotify__placeholder{display:flex;align-items:flex-start;justify-content:flex-start;border-radius:var(--qdr-radius-5);border:1px solid var(--qdr-divider);background-color:var(--qdr-block);padding:var(--qdr-spacing-7)}.qdr-embed-spotify__placeholder__title-wrapper{flex:1;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--qdr-spacing-4);margin-left:var(--qdr-spacing-7)}.qdr-embed-spotify__placeholder__icon-wrapper{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;align-items:center;margin-left:var(--qdr-spacing-12)}.qdr-embed-twitter__container>*{margin:0 !important}.qdr-embed-instagram,.qdr-embed-facebook,.qdr-embed-twitter{display:flex;align-items:flex-start}.qdr-embed-instagram--left,.qdr-embed-facebook--left,.qdr-embed-twitter--left{justify-content:flex-start}.qdr-embed-instagram--center,.qdr-embed-facebook--center,.qdr-embed-twitter--center{justify-content:center}.qdr-embed-instagram--right,.qdr-embed-facebook--right,.qdr-embed-twitter--right{justify-content:flex-end}.qdr-embed-instagram__placeholder,.qdr-embed-facebook__placeholder,.qdr-embed-twitter__placeholder{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--qdr-spacing-7);border-radius:var(--qdr-radius-3);border:1px solid var(--qdr-divider);background-color:var(--qdr-block);padding:var(--qdr-spacing-9)}.qdr-embed-instagram__placeholder__title-wrapper,.qdr-embed-facebook__placeholder__title-wrapper,.qdr-embed-twitter__placeholder__title-wrapper{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:var(--qdr-spacing-6)}.qdr-embed-instagram__placeholder__line-wrapper,.qdr-embed-facebook__placeholder__line-wrapper,.qdr-embed-twitter__placeholder__line-wrapper{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-4)}.qdr-embed-instagram__placeholder__set-wrapper,.qdr-embed-facebook__placeholder__set-wrapper,.qdr-embed-twitter__placeholder__set-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:var(--qdr-spacing-11)}.qdr-embed-instagram__placeholder__tools-set,.qdr-embed-facebook__placeholder__tools-set,.qdr-embed-twitter__placeholder__tools-set{display:flex;align-items:center;justify-content:flex-start;gap:var(--qdr-spacing-3)}

package/embed/embed.scss

@@ -0,0 +1,234 @@
+.qdr-embed {
+  position: relative;
+  margin: var(--qdr-spacing-14) 0;
+
+  &:hover {
+    .qdr-embed__inline-toolbar {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  &__inline-toolbar-wrapper {
+    position: relative;
+  }
+
+  &__placeholder {
+    &__icon {
+      color: var(--qdr-action-inactive);
+    }
+
+    &__title {
+      margin: 0;
+      color: var(--qdr-text-secondary);
+      font-size: var(--qdr-typography-basic-h5-font-size);
+      line-height: var(--qdr-typography-basic-h5-line-height);
+      letter-spacing: var(--qdr-typography-basic-h5-letter-spacing);
+      font-weight: var(--qdr-typography-basic-h5-font-weight);
+    }
+
+    &__line {
+      align-self: stretch;
+      height: 16px;
+      border-radius: var(--qdr-radius-6);
+      opacity: 0.2;
+      background: linear-gradient(90deg, var(--qdr-action-inactive) 0%, var(--qdr-divider) 100%);
+
+      &--shortest {
+        align-self: auto;
+        width: 32px;
+      }
+    }
+
+    &__block {
+      width: 120px;
+      height: 32px;
+      border-radius: var(--qdr-radius-3);
+      opacity: 0.2;
+      background: linear-gradient(90deg, var(--qdr-action-inactive) 0%, var(--qdr-divider) 100%);
+    }
+
+    &__body {
+      width: 100%;
+      aspect-ratio: 16 / 9;
+      border-radius: var(--qdr-radius-6);
+      opacity: 0.2;
+      background: linear-gradient(90deg, var(--qdr-action-inactive) 0%, var(--qdr-divider) 100%);
+
+      &--square {
+        aspect-ratio: 1 / 1;
+      }
+    }
+
+    &__dot {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      opacity: 0.2;
+      background: linear-gradient(90deg, var(--qdr-action-inactive) 0%, var(--qdr-divider) 100%);
+    }
+  }
+
+  &-youtube,
+  &-vimeo {
+    &__placeholder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--qdr-spacing-4);
+      width: 100%;
+      aspect-ratio: 16 / 9;
+      border-radius: var(--qdr-radius-3);
+      border: 1px solid var(--qdr-divider);
+      background-color: var(--qdr-block);
+    }
+  }
+
+  &-podcast-apple {
+    &__placeholder {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: flex-start;
+      border-radius: var(--qdr-radius-5);
+      border: 1px solid var(--qdr-divider);
+      background-color: var(--qdr-block);
+      padding: var(--qdr-spacing-4) var(--qdr-spacing-7) var(--qdr-spacing-7);
+      gap: var(--qdr-spacing-4);
+
+      &__wrapper {
+        align-self: stretch;
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+        gap: var(--qdr-spacing-7);
+      }
+
+      &__content-wrapper {
+        flex: 1;
+        align-self: stretch;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: space-between;
+      }
+
+      &__title-wrapper {
+        align-self: stretch;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        gap: var(--qdr-spacing-4);
+      }
+
+      &__blocks-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: var(--qdr-spacing-4);
+      }
+    }
+  }
+
+  &-spotify {
+    &__placeholder {
+      display: flex;
+      align-items: flex-start;
+      justify-content: flex-start;
+      border-radius: var(--qdr-radius-5);
+      border: 1px solid var(--qdr-divider);
+      background-color: var(--qdr-block);
+      padding: var(--qdr-spacing-7);
+
+      &__title-wrapper {
+        flex: 1;
+        align-self: stretch;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: var(--qdr-spacing-4);
+        margin-left: var(--qdr-spacing-7);
+      }
+
+      &__icon-wrapper {
+        align-self: stretch;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        margin-left: var(--qdr-spacing-12);
+      }
+    }
+  }
+
+  &-twitter__container {
+    > * {
+      margin: 0 !important;
+    }
+  }
+
+  &-instagram,
+  &-facebook,
+  &-twitter {
+    display: flex;
+    align-items: flex-start;
+
+    &--left {
+      justify-content: flex-start;
+    }
+
+    &--center {
+      justify-content: center;
+    }
+
+    &--right {
+      justify-content: flex-end;
+    }
+
+    &__placeholder {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      gap: var(--qdr-spacing-7);
+      border-radius: var(--qdr-radius-3);
+      border: 1px solid var(--qdr-divider);
+      background-color: var(--qdr-block);
+      padding: var(--qdr-spacing-9);
+
+      &__title-wrapper {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: var(--qdr-spacing-6);
+      }
+
+      &__line-wrapper {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        gap: var(--qdr-spacing-4);
+      }
+
+      &__set-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: var(--qdr-spacing-11);
+      }
+
+      &__tools-set {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: var(--qdr-spacing-3);
+      }
+    }
+  }
+}

package/embed/index.cjs.js

@@ -26,11 +26,12 @@ function useVideoIframeSize() {
     };
 }
 
-function VideoIframe({ attributes, children, data: src, }) {
+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));
@@ -42,7 +43,9 @@ function createRenderEmbedElementBase({ strategies, renderers, }) {
         if (result) {
             const [provider, data] = result;
             const render = renderers[provider];
-            return render(Object.assign(Object.assign({}, props), { data }));
+            if (render) {
+                return render(Object.assign(Object.assign({}, props), { data }));
+            }
         }
     };
 }
@@ -53,6 +56,9 @@ function createReactEmbed(options) {
     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 }),
         }) });
 }
 

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

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

package/embed/jsx-serializer/youtube/index.d.ts

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

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

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

package/embed/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@quadrats/react/embed",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
   "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

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { FacebookDeserializedEmbedData, FacebookEmbedElement } from '@quadrats/common/embed/strategies/facebook';
 import { RenderElementProps } from '@quadrats/react';
 export interface FacebookProps {
@@ -6,6 +6,7 @@ export interface FacebookProps {
     children?: any;
     data: FacebookDeserializedEmbedData;
     element: FacebookEmbedElement;
+    toolbarElement: ReactNode;
 }
-declare function Facebook({ attributes, children, data: { url, width, height } }: FacebookProps): React.JSX.Element;
+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

@@ -1,16 +1,23 @@
 import React from 'react';
+import clsx from 'clsx';
 
-function Facebook({ attributes, children, data: { url, width, height } }) {
-    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-embed-facebook", contentEditable: false }),
-        React.createElement("iframe", { title: url, src: url, width: width, height: height, style: {
-                border: 0,
-                overflow: 'hidden',
-            }, scrolling: "no", frameBorder: "0", 
-            //  eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            //  @ts-ignore
-            //  eslint-disable-next-line react/no-unknown-property
-            allowtransparency: "true", allow: "encrypted-media" }),
-        attributes ? children : undefined));
+function Facebook({ attributes, children, data: { url, width, height }, element: { align }, toolbarElement, }) {
+    return (React.createElement("div", Object.assign({}, attributes, { className: clsx('qdr-embed-facebook', {
+            'qdr-embed-facebook--left': align === 'left' || !align,
+            'qdr-embed-facebook--center': align === 'center',
+            'qdr-embed-facebook--right': align === 'right',
+        }), contentEditable: false }),
+        React.createElement("div", { className: "qdr-embed__inline-toolbar-wrapper", style: { width, height } },
+            toolbarElement,
+            React.createElement("iframe", { title: url, src: url, width: width, height: height, style: {
+                    border: 0,
+                    overflow: 'hidden',
+                }, scrolling: "no", frameBorder: "0", 
+                //  eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                //  @ts-ignore
+                //  eslint-disable-next-line react/no-unknown-property
+                allowtransparency: "true", allow: "encrypted-media" }),
+            attributes ? children : undefined)));
 }
 
 export { Facebook as default };

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

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

@@ -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 { 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) => React.createElement(Facebook, Object.assign({}, props));
+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 };
+export { defaultRenderFacebookEmbedElement, defaultRenderFacebookEmbedJsxSerializer, defaultRenderFacebookEmbedPlaceholderElement };