@quadrats/react 1.1.7 → 1.1.8

package/core/contexts/modal/modal.d.ts

@@ -1,24 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { EmbedModalProps } from './EmbedModal/EmbedModal';
-import { CarouselModalProps } from './CarouselModal/CarouselModal';
-import { CardModalProps } from './CardModal/CardModal';
-import { ConfirmModalProps } from './ConfirmModal/ConfirmModal';
-export type ModalName = 'embed-modal' | 'carousel-modal' | 'card-modal' | 'confirm-modal' | '';
-export interface EmbedModalConfig extends Omit<EmbedModalProps, 'isOpen' | 'close'> {
-}
-export interface CarouselModalConfig extends Omit<CarouselModalProps, 'isOpen' | 'close'> {
-}
-export interface CardModalConfig extends Omit<CardModalProps, 'isOpen' | 'close'> {
-}
-export interface ConfirmModalConfig extends Omit<ConfirmModalProps, 'isOpen' | 'close'> {
-}
-export interface ModalContextValue {
-    isModalClosed: boolean;
-    setIsModalClosed: Dispatch<SetStateAction<boolean>>;
-    setEmbedModalConfig: (config: EmbedModalConfig) => void;
-    setCarouselModalConfig: (config: CarouselModalConfig) => void;
-    setCardModalConfig: (config: CardModalConfig) => void;
-    setConfirmModalConfig: (config: ConfirmModalConfig) => void;
-}
-export declare const ModalContext: import("react").Context<ModalContextValue>;
-export declare function useModal(): ModalContextValue;

package/core/contexts/modal/modal.js

@@ -1,15 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const ModalContext = createContext({
-    isModalClosed: false,
-    setIsModalClosed: () => { },
-    setEmbedModalConfig: () => { },
-    setCarouselModalConfig: () => { },
-    setCardModalConfig: () => { },
-    setConfirmModalConfig: () => { },
-});
-function useModal() {
-    return useContext(ModalContext);
-}
-
-export { ModalContext, useModal };

package/core/createReactEditor.d.ts

@@ -1,2 +0,0 @@
-import { QuadratsReactEditor } from '..';
-export declare function createReactEditor(): QuadratsReactEditor;

package/core/createReactEditor.js

@@ -1,8 +0,0 @@
-import { withReact } from 'slate-react';
-import { createEditor } from '@quadrats/core';
-
-function createReactEditor() {
-    return withReact(createEditor());
-}
-
-export { createReactEditor };

package/core/createRenderElement.d.ts

@@ -1,2 +0,0 @@
-import { CreateRenderElementOptions, RenderElementProps } from './typings/renderer';
-export declare function createRenderElement<P extends RenderElementProps>(options: CreateRenderElementOptions<P>): (props: RenderElementProps) => import("react").JSX.Element | null | undefined;

package/core/createRenderElement.js

@@ -1,7 +0,0 @@
-import { createRenderElementBase } from '@quadrats/react/_internal';
-
-function createRenderElement(options) {
-    return createRenderElementBase(options);
-}
-
-export { createRenderElement };

package/core/createRenderElements.d.ts

@@ -1,2 +0,0 @@
-import { CreateRenderElementOptions, RenderElementProps } from './typings/renderer';
-export declare function createRenderElements<P extends RenderElementProps>(options: CreateRenderElementOptions<P>[]): (props: RenderElementProps) => import("react").JSX.Element | null | undefined;

package/core/createRenderElements.js

@@ -1,7 +0,0 @@
-import { createRenderElementsBase } from '@quadrats/react/_internal';
-
-function createRenderElements(options) {
-    return createRenderElementsBase(options);
-}
-
-export { createRenderElements };

package/core/createRenderMark.d.ts

@@ -1,2 +0,0 @@
-import { CreateRenderMarkOptions } from './typings/renderer';
-export declare function createRenderMark<M>(options: CreateRenderMarkOptions<M>): (props: Omit<import("./typings/renderer").RenderMarkProps<M>, "mark">) => import("react").JSX.Element;

package/core/createRenderMark.js

@@ -1,7 +0,0 @@
-import { createRenderMarkBase } from '@quadrats/react/_internal';
-
-function createRenderMark(options) {
-    return createRenderMarkBase(options);
-}
-
-export { createRenderMark };

package/core/index.d.ts

@@ -1,37 +0,0 @@
-import { QuadratsEditor, QuadratsElement, QuadratsText } from '@quadrats/core';
-import { ReactEditor } from 'slate-react';
-import { PLACEHOLDER_KEY } from './constants';
-export { useSlateStatic, useFocused, useReadOnly, useSelected, useSlate as useQuadrats, ReactEditor, } from 'slate-react';
-export * from './typings/handler';
-export * from './typings/renderer';
-export * from './typings/with';
-export * from './typings/descendant';
-export { Editor } from '@quadrats/core';
-export { default as Editable, EditableProps } from './components/Editable';
-export { default as DefaultElement } from './components/DefaultElement';
-export { default as DefaultLeaf } from './components/DefaultLeaf';
-export { default as Quadrats, QuadratsProps } from './components/Quadrats';
-export * from './contexts/modal/modal';
-export * from './contexts/modal/ModalProvider';
-export * from './contexts/message/message';
-export * from './contexts/message/MessageProvider';
-export * from './contexts/composition/composition';
-export * from './contexts/composition/CompositionProvider';
-export { composeHandlers } from './composeHandlers';
-export { composeRenderElements } from './composeRenderElements';
-export { composeRenderLeafs } from './composeRenderLeafs';
-export { createReactEditor } from './createReactEditor';
-export { createRenderElement } from './createRenderElement';
-export { createRenderElements } from './createRenderElements';
-export { createRenderMark } from './createRenderMark';
-export { PLACEHOLDER_KEY };
-export type QuadratsReactEditor = QuadratsEditor & ReactEditor;
-declare module '@quadrats/core' {
-    interface CustomTypes {
-        Editor: QuadratsReactEditor;
-        Element: QuadratsElement;
-        Text: QuadratsText & {
-            [PLACEHOLDER_KEY]?: boolean;
-        };
-    }
-}

package/core/typings/descendant.d.ts

@@ -1,2 +0,0 @@
-import { QuadratsElement, QuadratsText } from '@quadrats/core';
-export type Descendant = QuadratsElement | QuadratsText;

package/core/typings/handler.d.ts

@@ -1,15 +0,0 @@
-import { Editor } from 'slate';
-import { DOMAttributes, EventHandler } from 'react';
-export type EventHandlerName = {
-    [K in keyof Required<DOMAttributes<HTMLElement>>]: NonNullable<DOMAttributes<HTMLElement>[K]> extends EventHandler<any> ? K : never;
-}[keyof DOMAttributes<HTMLElement>];
-export type EventHandlers = Pick<DOMAttributes<HTMLElement>, EventHandlerName>;
-export type GetEventHandlerByName<H extends EventHandlerName> = NonNullable<EventHandlers[H]>;
-export type GetEventByName<H extends EventHandlerName> = GetEventHandlerByName<H> extends (event: infer E) => void ? E : never;
-export type Handler<H extends EventHandlerName> = (event: GetEventByName<H>, editor: Editor, next: VoidFunction) => void;
-export type Handlers = {
-    [H in EventHandlerName]?: Handler<H>;
-};
-export interface WithCreateHandlers<P extends any[] = []> {
-    createHandlers: (...params: P) => Handlers;
-}

package/core/typings/renderer.d.ts

@@ -1,15 +0,0 @@
-import { JSX } from 'react';
-import { RenderElementProps as SlateReactRenderElementProps, RenderLeafProps as SlateRenderLeafProps } from 'slate-react';
-import { QuadratsElement } from '@quadrats/core';
-import { CreateRenderElementOptionsBase, CreateRenderMarkOptionsBase, RenderElementPropsBase, RenderLeafPropsBase, RenderMarkPropsBase } from '@quadrats/react/_internal';
-export type RenderLeafProps = RenderLeafPropsBase & Pick<SlateRenderLeafProps, 'attributes'>;
-export type RenderMarkProps<M> = RenderMarkPropsBase<M>;
-export type RenderElementProps<E extends QuadratsElement = QuadratsElement> = RenderElementPropsBase<E> & Pick<SlateReactRenderElementProps, 'attributes'>;
-export type CreateRenderMarkOptions<M> = CreateRenderMarkOptionsBase<M, RenderMarkProps<M>>;
-export type CreateRenderElementOptions<P extends RenderElementProps<QuadratsElement>> = CreateRenderElementOptionsBase<P>;
-export interface WithCreateRenderLeaf<P extends any[] = []> {
-    createRenderLeaf: (...params: P) => (props: RenderLeafProps) => JSX.Element;
-}
-export interface WithCreateRenderElement<P extends any[] = []> {
-    createRenderElement: (...params: P) => (props: RenderElementProps) => JSX.Element | null | undefined;
-}

package/core/typings/with.d.ts

@@ -1,4 +0,0 @@
-import { Editor } from 'slate';
-export interface ReactWithable<R = undefined> {
-    with: <T extends Editor>(editor: T) => R extends undefined ? T : T & R;
-}

package/divider/createReactDivider.d.ts

@@ -1,4 +0,0 @@
-import { CreateDividerOptions } from '@quadrats/common/divider';
-import { ReactDivider } from './typings';
-export type CreateReactDividerOptions = CreateDividerOptions;
-export declare function createReactDivider(options?: CreateReactDividerOptions): ReactDivider;

package/divider/createReactDivider.js

@@ -1,11 +0,0 @@
-import { createDivider } from '@quadrats/common/divider';
-import { createRenderElement } from '@quadrats/react';
-import { defaultRenderDividerElement } from './defaultRenderDividerElement.js';
-
-function createReactDivider(options = {}) {
-    const core = createDivider(options);
-    const { type } = core;
-    return Object.assign(Object.assign({}, core), { createRenderElement: ({ render = defaultRenderDividerElement } = {}) => createRenderElement({ type, render }) });
-}
-
-export { createReactDivider };

package/divider/defaultRenderDividerElement.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { RenderDividerElementProps } from './typings';
-export declare const defaultRenderDividerElement: ({ attributes }: RenderDividerElementProps) => React.JSX.Element;

package/divider/defaultRenderDividerElement.js

@@ -1,6 +0,0 @@
-import React from 'react';
-
-const defaultRenderDividerElement = ({ attributes }) => (React.createElement("div", Object.assign({}, attributes, { className: "qdr-divider", contentEditable: false }),
-    React.createElement("hr", null)));
-
-export { defaultRenderDividerElement };

package/divider/divider.css

@@ -1 +0,0 @@
-.qdr-divider{width:100%;margin:var(--qdr-spacing-14) 0 !important}.qdr-divider hr{border-color:var(--qdr-divider);margin:0}

package/divider/index.cjs.js

@@ -1,17 +0,0 @@
-'use strict';
-
-var React = require('react');
-var divider = require('@quadrats/common/divider');
-var react = require('@quadrats/react');
-
-const defaultRenderDividerElement = ({ attributes }) => (React.createElement("div", Object.assign({}, attributes, { className: "qdr-divider", contentEditable: false }),
-    React.createElement("hr", null)));
-
-function createReactDivider(options = {}) {
-    const core = divider.createDivider(options);
-    const { type } = core;
-    return Object.assign(Object.assign({}, core), { createRenderElement: ({ render = defaultRenderDividerElement } = {}) => react.createRenderElement({ type, render }) });
-}
-
-exports.createReactDivider = createReactDivider;
-exports.defaultRenderDividerElement = defaultRenderDividerElement;

package/divider/index.js

@@ -1,2 +0,0 @@
-export { defaultRenderDividerElement } from './defaultRenderDividerElement.js';
-export { createReactDivider } from './createReactDivider.js';

package/divider/jsx-serializer/createJsxSerializeDivider.d.ts

@@ -1,4 +0,0 @@
-import { CreateJsxSerializeElementOptions } from '@quadrats/react/jsx-serializer';
-import { JsxSerializeDividerProps } from './typings';
-export type CreateJsxSerializeDividerOptions = Partial<CreateJsxSerializeElementOptions<JsxSerializeDividerProps>>;
-export declare function createJsxSerializeDivider(options?: CreateJsxSerializeDividerOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps) => import("react").JSX.Element | null | undefined;

package/divider/jsx-serializer/createJsxSerializeDivider.js

@@ -1,10 +0,0 @@
-import { DIVIDER_TYPE } from '@quadrats/common/divider';
-import { createJsxSerializeElement } from '@quadrats/react/jsx-serializer';
-import { defaultRenderDividerElement } from './defaultRenderDividerElement.js';
-
-function createJsxSerializeDivider(options = {}) {
-    const { type = DIVIDER_TYPE, render = defaultRenderDividerElement } = options;
-    return createJsxSerializeElement({ type, render });
-}
-
-export { createJsxSerializeDivider };

package/divider/jsx-serializer/defaultRenderDividerElement.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const defaultRenderDividerElement: () => React.JSX.Element;

package/divider/jsx-serializer/defaultRenderDividerElement.js

@@ -1,6 +0,0 @@
-import React from 'react';
-
-const defaultRenderDividerElement = () => React.createElement("div", { className: "qdr-divider", contentEditable: false },
-    React.createElement("hr", null));
-
-export { defaultRenderDividerElement };

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

@@ -1,16 +0,0 @@
-'use strict';
-
-var React = require('react');
-var divider = require('@quadrats/common/divider');
-var jsxSerializer = require('@quadrats/react/jsx-serializer');
-
-const defaultRenderDividerElement = () => React.createElement("div", { className: "qdr-divider", contentEditable: false },
-    React.createElement("hr", null));
-
-function createJsxSerializeDivider(options = {}) {
-    const { type = divider.DIVIDER_TYPE, render = defaultRenderDividerElement } = options;
-    return jsxSerializer.createJsxSerializeElement({ type, render });
-}
-
-exports.createJsxSerializeDivider = createJsxSerializeDivider;
-exports.defaultRenderDividerElement = defaultRenderDividerElement;

package/divider/jsx-serializer/index.js

@@ -1,2 +0,0 @@
-export { defaultRenderDividerElement } from './defaultRenderDividerElement.js';
-export { createJsxSerializeDivider } from './createJsxSerializeDivider.js';

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

@@ -1,3 +0,0 @@
-import { DividerElement } from '@quadrats/common/divider';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-export type JsxSerializeDividerProps = JsxSerializeElementProps<DividerElement>;

package/divider/toolbar/DividerToolbarIcon.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { ToolbarIconProps } from '@quadrats/react/toolbar';
-import { ReactDivider } from '@quadrats/react/divider';
-export interface DividerToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
-    controller: ReactDivider;
-}
-declare function DividerToolbarIcon(props: DividerToolbarIconProps): React.JSX.Element;
-export default DividerToolbarIcon;

package/divider/toolbar/DividerToolbarIcon.js

@@ -1,12 +0,0 @@
-import { __rest } from 'tslib';
-import React from 'react';
-import { ToolbarIcon } from '@quadrats/react/toolbar';
-import { useDividerTool } from './useDividerTool.js';
-
-function DividerToolbarIcon(props) {
-    const { controller } = props, rest = __rest(props, ["controller"]);
-    const { onClick } = useDividerTool(controller);
-    return React.createElement(ToolbarIcon, Object.assign({}, rest, { onClick: onClick }));
-}
-
-export { DividerToolbarIcon as default };

package/divider/toolbar/index.cjs.js

@@ -1,22 +0,0 @@
-'use strict';
-
-var react = require('@quadrats/react');
-var tslib = require('tslib');
-var React = require('react');
-var toolbar = require('@quadrats/react/toolbar');
-
-function useDividerTool(controller) {
-    const editor = react.useSlateStatic();
-    return {
-        onClick: () => controller.insertDivider(editor),
-    };
-}
-
-function DividerToolbarIcon(props) {
-    const { controller } = props, rest = tslib.__rest(props, ["controller"]);
-    const { onClick } = useDividerTool(controller);
-    return React.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { onClick: onClick }));
-}
-
-exports.DividerToolbarIcon = DividerToolbarIcon;
-exports.useDividerTool = useDividerTool;

package/divider/toolbar/index.d.ts

@@ -1,2 +0,0 @@
-export * from './useDividerTool';
-export { DividerToolbarIconProps, default as DividerToolbarIcon } from './DividerToolbarIcon';

package/divider/toolbar/index.js

@@ -1,2 +0,0 @@
-export { useDividerTool } from './useDividerTool.js';
-export { default as DividerToolbarIcon } from './DividerToolbarIcon.js';

package/divider/toolbar/useDividerTool.d.ts

@@ -1,4 +0,0 @@
-import { ReactDivider } from '@quadrats/react/divider';
-export declare function useDividerTool(controller: ReactDivider): {
-    onClick: () => void;
-};

package/divider/toolbar/useDividerTool.js

@@ -1,10 +0,0 @@
-import { useSlateStatic } from '@quadrats/react';
-
-function useDividerTool(controller) {
-    const editor = useSlateStatic();
-    return {
-        onClick: () => controller.insertDivider(editor),
-    };
-}
-
-export { useDividerTool };

package/divider/typings.d.ts

@@ -1,10 +0,0 @@
-import { JSX } from 'react';
-import { Divider, DividerElement } from '@quadrats/common/divider';
-import { Editor } from '@quadrats/core';
-import { WithCreateRenderElement, RenderElementProps } from '@quadrats/react';
-export type RenderDividerElementProps = RenderElementProps<DividerElement>;
-export interface ReactDividerCreateRenderElementOptions {
-    render?: (props: RenderDividerElementProps) => JSX.Element | null | undefined;
-}
-export interface ReactDivider extends Divider<Editor>, WithCreateRenderElement<[ReactDividerCreateRenderElementOptions?]> {
-}

package/editable.css

@@ -1 +0,0 @@
-.qdr-editable{background-color:var(--qdr-surface);border:solid 1px var(--qdr-border);color:var(--qdr-text-primary);caret-color:var(--qdr-primary);transition:background-color var(--qdr-duration-short) var(--qdr-easing-standard),border-color var(--qdr-duration-short) var(--qdr-easing-standard),color var(--qdr-duration-short) var(--qdr-easing-standard);will-change:background-color,border-color,color}.qdr-editable ::selection{background-color:var(--qdr-primary-active-bg)}.qdr-editable__placeholder{display:inline-block;top:0;left:0;color:var(--qdr-text-secondary);font:inherit;padding:inherit;width:0;max-width:100%;white-space:nowrap;text-decoration:none;pointer-events:none;user-select:none}

package/embed/components/VideoIframe.d.ts

@@ -1,12 +0,0 @@
-import React, { ReactNode } from 'react';
-import { EmbedElement } from '@quadrats/common/embed';
-import { RenderElementProps } from '@quadrats/react';
-export interface VideoIframeProps<E extends EmbedElement> {
-    attributes?: RenderElementProps['attributes'];
-    children?: any;
-    data: string;
-    element: E;
-    toolbarElement: ReactNode;
-}
-declare function VideoIframe<E extends EmbedElement>({ attributes, children, data: src, toolbarElement, }: VideoIframeProps<E>): React.JSX.Element;
-export default VideoIframe;

package/embed/components/VideoIframe.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { composeRefs } from '@quadrats/react/utils';
-import { useVideoIframeSize } from '../hooks/useVideoIframeSize.js';
-
-function VideoIframe({ attributes, children, data: src, toolbarElement, }) {
-    const { ref } = attributes || {};
-    const { ref: containerRef, size } = useVideoIframeSize();
-    const composedRef = ref ? 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));
-}
-
-export { VideoIframe as default };

package/embed/createReactEmbed.d.ts

@@ -1,4 +0,0 @@
-import { CreateEmbedOptions } from '@quadrats/common/embed';
-import { ReactEmbed } from './typings';
-export type CreateReactEmbedOptions<P extends string> = CreateEmbedOptions<P>;
-export declare function createReactEmbed<P extends string>(options: CreateReactEmbedOptions<P>): ReactEmbed<P>;

package/embed/createReactEmbed.js

@@ -1,17 +0,0 @@
-import { createEmbed, EMBED_PLACEHOLDER_TYPE } from '@quadrats/common/embed';
-import { createRenderElement } from '@quadrats/react';
-import { createRenderEmbedElementBase } from './createRenderEmbedElementBase.js';
-
-function createReactEmbed(options) {
-    const core = createEmbed(options);
-    const { type, strategies } = core;
-    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 }),
-        }) });
-}
-
-export { createReactEmbed };

package/embed/createRenderEmbedElementBase.d.ts

@@ -1,10 +0,0 @@
-import { JSX } from 'react';
-import { EmbedElement, EmbedStrategies } from '@quadrats/common/embed';
-import { RenderElementPropsBase } from '@quadrats/react/_internal';
-import { WithEmbedRenderData } from './typings';
-export declare function createRenderEmbedElementBase<P extends string, RP extends RenderElementPropsBase<EmbedElement> & WithEmbedRenderData<any>>({ strategies, renderers, }: {
-    strategies: EmbedStrategies<P>;
-    renderers: {
-        [K in P]: (props: RP) => JSX.Element | null | undefined;
-    };
-}): (props: RP) => JSX.Element | null | undefined;

package/embed/createRenderEmbedElementBase.js

@@ -1,16 +0,0 @@
-import { deserializeEmbedElementToData } from '@quadrats/common/embed';
-
-function createRenderEmbedElementBase({ strategies, renderers, }) {
-    return (props) => {
-        const result = deserializeEmbedElementToData(props.element, strategies);
-        if (result) {
-            const [provider, data] = result;
-            const render = renderers[provider];
-            if (render) {
-                return render(Object.assign(Object.assign({}, props), { data }));
-            }
-        }
-    };
-}
-
-export { createRenderEmbedElementBase };

package/embed/embed.css

@@ -1 +0,0 @@
-.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/hooks/useVideoIframeSize.d.ts

@@ -1,7 +0,0 @@
-export declare function useVideoIframeSize<E extends HTMLElement>(): {
-    ref: import("react").RefObject<E | null>;
-    size: {
-        width: number;
-        height: number;
-    };
-};

package/embed/hooks/useVideoIframeSize.js

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

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

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

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

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