@quadrats/react 1.1.7 → 1.1.8

package/image/hooks/useImageResizer.d.ts

@@ -1,7 +0,0 @@
-import { ImageElement } from '@quadrats/common/image';
-import { ReactImage } from '../typings';
-export declare function useImageResizer(element: ImageElement, resizeImage: ReactImage<any>['resizeImage']): {
-    imageRef: import("react").RefObject<HTMLImageElement | null>;
-    focusedAndSelected: boolean;
-    onResizeStart: (event: React.MouseEvent | React.TouchEvent) => void;
-};

package/image/hooks/useImageResizer.js

@@ -1,95 +0,0 @@
-import { useRef, useState, useEffect } from 'react';
-import { useSlateStatic, useFocused, useSelected, ReactEditor } from '@quadrats/react';
-
-function isTouchEvent(event) {
-    const { touches } = event;
-    return !!(touches && touches.length);
-}
-function getEditorWidth(editor) {
-    const el = ReactEditor.toDOMNode(editor, editor);
-    const computedStyle = window.getComputedStyle(el);
-    const paddingX = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
-    const borderX = parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
-    return el.clientWidth - paddingX - borderX;
-}
-const moveEvents = ['mousemove', 'touchmove'];
-const endEvents = ['mouseup', 'touchend'];
-function useImageResizer(element, resizeImage) {
-    const editor = useSlateStatic();
-    const focused = useFocused();
-    const selected = useSelected();
-    const focusedAndSelected = focused && selected;
-    const imageRef = useRef(null);
-    const [startPoint, setStartPoint] = useState(undefined);
-    const onResizeStart = (event) => {
-        const imageEl = imageRef.current;
-        if (!imageEl) {
-            return;
-        }
-        const { clientWidth: width, clientHeight: height } = imageEl;
-        let x;
-        let y;
-        if (isTouchEvent(event)) {
-            x = event.touches[0].clientX;
-            y = event.touches[0].clientY;
-        }
-        else {
-            x = event.clientX;
-            y = event.clientY;
-        }
-        setStartPoint({
-            x,
-            y,
-            width,
-            height,
-            ratio: width / height,
-        });
-    };
-    useEffect(() => {
-        if (!focusedAndSelected || !startPoint) {
-            return;
-        }
-        function onResize(event) {
-            if (!startPoint) {
-                return;
-            }
-            const { x, y, width, height, ratio, } = startPoint;
-            let left;
-            let top;
-            if (isTouchEvent(event)) {
-                left = event.touches[0].clientX - x;
-                top = event.touches[0].clientY - y;
-            }
-            else {
-                left = event.clientX - x;
-                top = event.clientY - y;
-            }
-            let newWidth;
-            if (Math.abs(left) >= Math.abs(top)) {
-                newWidth = width + left;
-            }
-            else {
-                const newHeight = height + top;
-                newWidth = newHeight * ratio;
-            }
-            const percentage = Math.round((newWidth / getEditorWidth(editor)) * 100);
-            resizeImage(editor, [element, ReactEditor.findPath(editor, element)], percentage);
-        }
-        function onCancelResize() {
-            setStartPoint(undefined);
-        }
-        moveEvents.forEach(moveEvent => document.addEventListener(moveEvent, onResize));
-        endEvents.forEach(endEvent => document.addEventListener(endEvent, onCancelResize));
-        return () => {
-            moveEvents.forEach(moveEvent => document.removeEventListener(moveEvent, onResize));
-            endEvents.forEach(endEvent => document.removeEventListener(endEvent, onCancelResize));
-        };
-    }, [editor, element, focusedAndSelected, resizeImage, startPoint]);
-    return {
-        imageRef,
-        focusedAndSelected,
-        onResizeStart,
-    };
-}
-
-export { useImageResizer };

package/image/image.css

@@ -1 +0,0 @@
-.qdr-image{display:flex;justify-content:var(--qdr-image-align);position:relative;user-select:none}.qdr-image--with-inline-toolbar::after{content:"";position:absolute;inset:0;background-color:rgba(0,0,0,0);transition:background-color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-image--with-inline-toolbar:hover::after{background-color:var(--qdr-overlay-dark)}.qdr-image__placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;aspect-ratio:3/2;border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-divider);background-color:var(--qdr-block);margin:var(--qdr-spacing-14) 0}.qdr-image__placeholder__icon{color:var(--qdr-action-inactive)}.qdr-image__figure{position:relative;margin:var(--qdr-spacing-14) 0}.qdr-image__figure:hover .qdr-image__inline-toolbar{opacity:1;pointer-events:auto}.qdr-image__spacer{position:absolute;top:0;left:50%;height:0;color:rgba(0,0,0,0);outline:none;caret-color:rgba(0,0,0,0)}.qdr-image img{display:block;min-width:240px;max-width:100%;user-select:none}.qdr-image__boundary,.qdr-image__resizer{position:absolute;border:2px solid var(--qdr-primary);right:0;bottom:0}.qdr-image__boundary{top:0;left:0}.qdr-image__resizer{width:6px;height:6px;background:var(--qdr-surface);transform:translate3d(50%, 50%, 0);cursor:nwse-resize}.qdr-image__caption{position:relative;margin-top:var(--qdr-spacing-6);text-align:var(--qdr-image-caption-align);font-size:var(--qdr-typography-article-body2-font-size);line-height:var(--qdr-typography-article-body2-line-height);letter-spacing:var(--qdr-typography-article-body2-letter-spacing);font-weight:var(--qdr-typography-article-body2-font-weight)}.qdr-image__caption-placeholder{position:absolute;left:0;text-align:var(--qdr-image-caption-align);color:var(--qdr-text-secondary);width:100%;white-space:nowrap;vertical-align:text-top;pointer-events:none}.qdr-image__figure--blurred .qdr-image__caption--empty{height:0;margin:0;opacity:0;user-select:none}

package/image/index.cjs.js

@@ -1,324 +0,0 @@
-'use strict';
-
-var React = require('react');
-var clsx = require('clsx');
-var react = require('@quadrats/react');
-var core = require('@quadrats/core');
-var icons = require('@quadrats/icons');
-var toolbar = require('@quadrats/react/toolbar');
-var components = require('@quadrats/react/components');
-var tslib = require('tslib');
-var isHotkey = require('is-hotkey');
-var utils = require('@quadrats/utils');
-var image = require('@quadrats/common/image');
-var fileUploader = require('@quadrats/common/file-uploader');
-
-function ImageFigure(props) {
-    const { attributes, children, style } = props;
-    const focused = react.useFocused();
-    const selected = react.useSelected();
-    const blurred = !focused || !selected;
-    return (React.createElement("figure", Object.assign({}, attributes, { className: clsx('qdr-image__figure', {
-            'qdr-image__figure--blurred': blurred,
-        }), style: style }), children));
-}
-
-// import { useImageResizer } from '../hooks/useImageResizer';
-function Image(props) {
-    const { attributes, children, element, parentType, 
-    // resizeImage,
-    src, } = props;
-    const editor = react.useSlateStatic();
-    const path = react.ReactEditor.findPath(editor, element);
-    const parentEntry = core.Editor.above(editor, {
-        at: path,
-        match: (node) => core.Element.isElement(node) && node.type === parentType,
-        mode: 'lowest',
-    });
-    const parentNode = parentEntry === null || parentEntry === void 0 ? void 0 : parentEntry[0];
-    const parentPath = parentEntry === null || parentEntry === void 0 ? void 0 : parentEntry[1];
-    // const { focusedAndSelected, imageRef, onResizeStart } = useImageResizer(element, resizeImage);
-    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-image qdr-image--with-inline-toolbar", onClick: () => core.Transforms.select(editor, react.ReactEditor.findPath(editor, element)), onMouseDown: (event) => event.preventDefault(), role: "img" }),
-        React.createElement("div", { className: "qdr-image__spacer" }, children),
-        React.createElement("div", { contentEditable: false, style: { position: 'relative' } },
-            React.createElement(toolbar.InlineToolbar, { className: "qdr-image__inline-toolbar", iconGroups: [
-                    {
-                        enabledBgColor: true,
-                        icons: [
-                            {
-                                icon: icons.AlignLeft,
-                                onClick: () => {
-                                    core.Transforms.setNodes(editor, { align: 'start' }, { at: parentPath });
-                                },
-                                active: parentNode.align === 'start' || !parentNode.align,
-                            },
-                            {
-                                icon: icons.AlignCenter,
-                                onClick: () => {
-                                    core.Transforms.setNodes(editor, { align: 'center' }, { at: parentPath });
-                                },
-                                active: parentNode.align === 'center',
-                            },
-                            {
-                                icon: icons.AlignRight,
-                                onClick: () => {
-                                    core.Transforms.setNodes(editor, { align: 'end' }, { at: parentPath });
-                                },
-                                active: parentNode.align === 'end',
-                            },
-                        ],
-                    },
-                    {
-                        icons: [
-                            {
-                                icon: icons.Trash,
-                                onClick: () => {
-                                    core.Transforms.removeNodes(editor, { at: parentPath });
-                                },
-                            },
-                        ],
-                    },
-                ] }),
-            React.createElement("img", { 
-                // ref={imageRef}
-                src: src, alt: src }))));
-}
-
-function ImageCaption(props) {
-    const { compositionPath } = react.useComposition();
-    const { attributes, children, element } = props;
-    const editor = react.useSlateStatic();
-    const path = react.ReactEditor.findPath(editor, element);
-    const text = core.Editor.string(editor, path);
-    const isEmpty = !text;
-    const locale = react.useLocale();
-    const placeholder = locale.editor.image.captionInputPlaceholder;
-    const composing = React.useMemo(() => core.Path.equals(compositionPath, path), [compositionPath, path]);
-    return (React.createElement("figcaption", Object.assign({}, attributes, { className: clsx('qdr-image__caption', {
-            'qdr-image__caption--empty': isEmpty,
-        }) }),
-        isEmpty && !composing && (React.createElement("span", { className: "qdr-image__caption-placeholder", contentEditable: false }, placeholder)),
-        children));
-}
-
-const defaultRenderImageElements = {
-    figure: props => React.createElement(ImageFigure, Object.assign({}, props)),
-    image: props => React.createElement(Image, Object.assign({}, props)),
-    caption: props => React.createElement(ImageCaption, Object.assign({}, props)),
-};
-
-function isTouchEvent(event) {
-    const { touches } = event;
-    return !!(touches && touches.length);
-}
-function getEditorWidth(editor) {
-    const el = react.ReactEditor.toDOMNode(editor, editor);
-    const computedStyle = window.getComputedStyle(el);
-    const paddingX = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
-    const borderX = parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
-    return el.clientWidth - paddingX - borderX;
-}
-const moveEvents = ['mousemove', 'touchmove'];
-const endEvents = ['mouseup', 'touchend'];
-function useImageResizer(element, resizeImage) {
-    const editor = react.useSlateStatic();
-    const focused = react.useFocused();
-    const selected = react.useSelected();
-    const focusedAndSelected = focused && selected;
-    const imageRef = React.useRef(null);
-    const [startPoint, setStartPoint] = React.useState(undefined);
-    const onResizeStart = (event) => {
-        const imageEl = imageRef.current;
-        if (!imageEl) {
-            return;
-        }
-        const { clientWidth: width, clientHeight: height } = imageEl;
-        let x;
-        let y;
-        if (isTouchEvent(event)) {
-            x = event.touches[0].clientX;
-            y = event.touches[0].clientY;
-        }
-        else {
-            x = event.clientX;
-            y = event.clientY;
-        }
-        setStartPoint({
-            x,
-            y,
-            width,
-            height,
-            ratio: width / height,
-        });
-    };
-    React.useEffect(() => {
-        if (!focusedAndSelected || !startPoint) {
-            return;
-        }
-        function onResize(event) {
-            if (!startPoint) {
-                return;
-            }
-            const { x, y, width, height, ratio, } = startPoint;
-            let left;
-            let top;
-            if (isTouchEvent(event)) {
-                left = event.touches[0].clientX - x;
-                top = event.touches[0].clientY - y;
-            }
-            else {
-                left = event.clientX - x;
-                top = event.clientY - y;
-            }
-            let newWidth;
-            if (Math.abs(left) >= Math.abs(top)) {
-                newWidth = width + left;
-            }
-            else {
-                const newHeight = height + top;
-                newWidth = newHeight * ratio;
-            }
-            const percentage = Math.round((newWidth / getEditorWidth(editor)) * 100);
-            resizeImage(editor, [element, react.ReactEditor.findPath(editor, element)], percentage);
-        }
-        function onCancelResize() {
-            setStartPoint(undefined);
-        }
-        moveEvents.forEach(moveEvent => document.addEventListener(moveEvent, onResize));
-        endEvents.forEach(endEvent => document.addEventListener(endEvent, onCancelResize));
-        return () => {
-            moveEvents.forEach(moveEvent => document.removeEventListener(moveEvent, onResize));
-            endEvents.forEach(endEvent => document.removeEventListener(endEvent, onCancelResize));
-        };
-    }, [editor, element, focusedAndSelected, resizeImage, startPoint]);
-    return {
-        imageRef,
-        focusedAndSelected,
-        onResizeStart,
-    };
-}
-
-function ImagePlaceholder(props) {
-    const { attributes } = props;
-    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-image__placeholder", contentEditable: false }),
-        React.createElement(components.Icon, { className: "qdr-image__placeholder__icon", icon: icons.Image, width: 48, height: 48 })));
-}
-
-function createReactImage(options = {}, getUploadOptions) {
-    const core$1 = image.createImage(options);
-    const uploadOptions = getUploadOptions === null || getUploadOptions === void 0 ? void 0 : getUploadOptions(core$1);
-    const { types } = core$1;
-    return Object.assign(Object.assign({}, core$1), { createHandlers: () => ({
-            onKeyDown(event, editor, next) {
-                if ((event.key === 'Backspace' || event.key === 'Delete') && core$1.isCollapsedOnImage(editor)) {
-                    const [, figurePath] = core$1.getAboveImageFigure(editor) || [];
-                    if (figurePath) {
-                        core.Transforms.removeNodes(editor, { at: figurePath });
-                        return;
-                    }
-                }
-                const [, captionPath] = core$1.getAboveImageCaption(editor) || [];
-                if (captionPath) {
-                    /**
-                     * Override original behavior of select all.
-                     * Only select the text in image caption if current selection is in image caption.
-                     */
-                    if (isHotkey('mod+a', event)) {
-                        event.preventDefault();
-                        core.Transforms.select(editor, captionPath);
-                        return;
-                    }
-                }
-                next();
-            },
-        }), createRenderElement: (options = {}) => {
-            const renderFigure = options.figure || defaultRenderImageElements.figure;
-            const renderImage = options.image || defaultRenderImageElements.image;
-            const renderCaption = options.caption || defaultRenderImageElements.caption;
-            return react.createRenderElements([
-                {
-                    type: types.figure,
-                    render: (props) => {
-                        const { attributes, children, element } = props;
-                        return renderFigure(Object.assign(Object.assign({}, image.getImageFigureElementCommonProps(element)), { attributes,
-                            element,
-                            children }));
-                    },
-                },
-                {
-                    type: types.image,
-                    render: (props) => {
-                        const { attributes, children, element } = props;
-                        return renderImage(Object.assign(Object.assign({}, image.getImageElementCommonProps(element, core$1.hostingResolvers)), { attributes,
-                            element,
-                            children, parentType: core$1.types.figure, resizeImage: core$1.resizeImage }));
-                    },
-                },
-                {
-                    type: types.caption,
-                    render: renderCaption,
-                },
-            ]);
-        }, with(editor) {
-            const { insertData } = editor;
-            editor.insertData = (data) => {
-                var _a;
-                const text = data.getData('text');
-                const { files } = data;
-                /**
-                 * Insert image if inserted text is image url.
-                 */
-                if (text) {
-                    if (core$1.isImageUrl(text)) {
-                        core$1.insertImage(editor, text);
-                        return;
-                    }
-                }
-                /**
-                 * Insert each image which is image.
-                 */
-                if (files.length) {
-                    /**
-                     * Insert each image when upload options are set.
-                     */
-                    if (uploadOptions) {
-                        const createFileUploaderElement = fileUploader.createFileUploaderElementByType((_a = uploadOptions.type) !== null && _a !== void 0 ? _a : fileUploader.FILE_UPLOADER_TYPE);
-                        Array.from(files).reduce((prev, file) => tslib.__awaiter(this, void 0, void 0, function* () {
-                            yield prev;
-                            return createFileUploaderElement(editor, file, uploadOptions).then((fileUploaderElement) => {
-                                fileUploader.insertFileUploaderElement(editor, fileUploaderElement);
-                            });
-                        }), Promise.resolve());
-                        return;
-                    }
-                    [...files]
-                        .filter((file) => {
-                        const [mime] = file.type.split('/');
-                        return mime === 'image';
-                    })
-                        .reduce((prev, imageFile) => tslib.__awaiter(this, void 0, void 0, function* () {
-                        yield prev;
-                        return utils.readFileAsDataURL(imageFile).then((dataURL) => core$1.insertImage(editor, dataURL));
-                    }), Promise.resolve());
-                    return;
-                }
-                const inCaption = core$1.isSelectionInImageCaption(editor);
-                if (inCaption) {
-                    const inlineData = new DataTransfer();
-                    inlineData.setData('text', data.getData('text').replace(/\r?\n/g, ''));
-                    insertData(inlineData);
-                    return;
-                }
-                insertData(data);
-            };
-            return core$1.with(editor);
-        } });
-}
-
-exports.Image = Image;
-exports.ImageCaption = ImageCaption;
-exports.ImageFigure = ImageFigure;
-exports.ImagePlaceholder = ImagePlaceholder;
-exports.createReactImage = createReactImage;
-exports.defaultRenderImageElements = defaultRenderImageElements;
-exports.useImageResizer = useImageResizer;

package/image/index.js

@@ -1,7 +0,0 @@
-export { defaultRenderImageElements } from './defaultRenderImageElements.js';
-export { useImageResizer } from './hooks/useImageResizer.js';
-export { default as ImagePlaceholder } from './components/ImagePlaceholder.js';
-export { default as ImageFigure } from './components/ImageFigure.js';
-export { default as Image } from './components/Image.js';
-export { default as ImageCaption } from './components/ImageCaption.js';
-export { createReactImage } from './createReactImage.js';

package/image/jsx-serializer/createJsxSerializeImage.d.ts

@@ -1,7 +0,0 @@
-import { ImageCaptionTypeKey, ImageFigureTypeKey, ImageHostingResolvers, ImageTypeKey } from '@quadrats/common/image';
-import { CreateJsxSerializeElementOptions } from '@quadrats/react/jsx-serializer';
-import { JsxSerializeImageCaptionElementProps, JsxSerializeImageElementProps, JsxSerializeImageFigureElementProps } from './typings';
-export type CreateJsxSerializeImageOptions<H extends string> = Partial<Record<ImageFigureTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeImageFigureElementProps>>> & Record<ImageTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeImageElementProps>>> & Record<ImageCaptionTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeImageCaptionElementProps>>> & {
-    hostingResolvers?: ImageHostingResolvers<H>;
-}>;
-export declare function createJsxSerializeImage<H extends string>(options?: CreateJsxSerializeImageOptions<H>): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps) => import("react").JSX.Element | null | undefined;

package/image/jsx-serializer/createJsxSerializeImage.js

@@ -1,42 +0,0 @@
-import { getFirstAncestor, getMergedNodeTexts } from '@quadrats/core/serializers';
-import { IMAGE_TYPES, getImageFigureElementCommonProps, getImageElementCommonProps } from '@quadrats/common/image';
-import { createJsxSerializeElements } from '@quadrats/react/jsx-serializer';
-import { defaultRenderImageElements } from './defaultRenderImageElements.js';
-
-function createJsxSerializeImage(options = {}) {
-    const { figure = {}, image = {}, caption = {}, hostingResolvers, } = options;
-    const figureType = figure.type || IMAGE_TYPES.figure;
-    const captionType = caption.type || IMAGE_TYPES.caption;
-    const renderFigure = figure.render || defaultRenderImageElements.figure;
-    const renderImage = image.render || defaultRenderImageElements.image;
-    const renderCaption = caption.render || defaultRenderImageElements.caption;
-    return createJsxSerializeElements([
-        {
-            type: figureType,
-            render: (props) => {
-                const { children } = props;
-                const element = props.element;
-                return renderFigure(Object.assign(Object.assign({}, getImageFigureElementCommonProps(element)), { children,
-                    element }));
-            },
-        },
-        {
-            type: image.type || IMAGE_TYPES.image,
-            render: (props) => {
-                var _a;
-                const { children } = props;
-                const element = props.element;
-                const figure = getFirstAncestor(element, node => node.type === figureType);
-                const caption = (_a = figure === null || figure === void 0 ? void 0 : figure.children) === null || _a === void 0 ? void 0 : _a[1];
-                return renderImage(Object.assign(Object.assign({}, getImageElementCommonProps(element, hostingResolvers)), { caption: (caption === null || caption === void 0 ? void 0 : caption.type) === captionType ? getMergedNodeTexts(caption) : '', children,
-                    element }));
-            },
-        },
-        {
-            type: captionType,
-            render: props => renderCaption(Object.assign(Object.assign({}, props), { isEmpty: !getMergedNodeTexts(props.element) })),
-        },
-    ]);
-}
-
-export { createJsxSerializeImage };

package/image/jsx-serializer/defaultRenderImageElements.d.ts

@@ -1,2 +0,0 @@
-import { ImageJsxSerializeElements } from './typings';
-export declare const defaultRenderImageElements: ImageJsxSerializeElements;

package/image/jsx-serializer/defaultRenderImageElements.js

@@ -1,10 +0,0 @@
-import React from 'react';
-
-const defaultRenderImageElements = {
-    figure: ({ children, style }) => (React.createElement("figure", { className: "qdr-image__figure", style: style }, children)),
-    image: ({ caption, src }) => (React.createElement("div", { className: "qdr-image" },
-        React.createElement("img", { src: src, alt: caption }))),
-    caption: ({ children, isEmpty }) => isEmpty ? (React.createElement("span", { className: "qdr-image__caption-placeholder" })) : (React.createElement("figcaption", { className: "qdr-image__caption" }, children)),
-};
-
-export { defaultRenderImageElements };

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

@@ -1,52 +0,0 @@
-'use strict';
-
-var React = require('react');
-var serializers = require('@quadrats/core/serializers');
-var image = require('@quadrats/common/image');
-var jsxSerializer = require('@quadrats/react/jsx-serializer');
-
-const defaultRenderImageElements = {
-    figure: ({ children, style }) => (React.createElement("figure", { className: "qdr-image__figure", style: style }, children)),
-    image: ({ caption, src }) => (React.createElement("div", { className: "qdr-image" },
-        React.createElement("img", { src: src, alt: caption }))),
-    caption: ({ children, isEmpty }) => isEmpty ? (React.createElement("span", { className: "qdr-image__caption-placeholder" })) : (React.createElement("figcaption", { className: "qdr-image__caption" }, children)),
-};
-
-function createJsxSerializeImage(options = {}) {
-    const { figure = {}, image: image$1 = {}, caption = {}, hostingResolvers, } = options;
-    const figureType = figure.type || image.IMAGE_TYPES.figure;
-    const captionType = caption.type || image.IMAGE_TYPES.caption;
-    const renderFigure = figure.render || defaultRenderImageElements.figure;
-    const renderImage = image$1.render || defaultRenderImageElements.image;
-    const renderCaption = caption.render || defaultRenderImageElements.caption;
-    return jsxSerializer.createJsxSerializeElements([
-        {
-            type: figureType,
-            render: (props) => {
-                const { children } = props;
-                const element = props.element;
-                return renderFigure(Object.assign(Object.assign({}, image.getImageFigureElementCommonProps(element)), { children,
-                    element }));
-            },
-        },
-        {
-            type: image$1.type || image.IMAGE_TYPES.image,
-            render: (props) => {
-                var _a;
-                const { children } = props;
-                const element = props.element;
-                const figure = serializers.getFirstAncestor(element, node => node.type === figureType);
-                const caption = (_a = figure === null || figure === void 0 ? void 0 : figure.children) === null || _a === void 0 ? void 0 : _a[1];
-                return renderImage(Object.assign(Object.assign({}, image.getImageElementCommonProps(element, hostingResolvers)), { caption: (caption === null || caption === void 0 ? void 0 : caption.type) === captionType ? serializers.getMergedNodeTexts(caption) : '', children,
-                    element }));
-            },
-        },
-        {
-            type: captionType,
-            render: props => renderCaption(Object.assign(Object.assign({}, props), { isEmpty: !serializers.getMergedNodeTexts(props.element) })),
-        },
-    ]);
-}
-
-exports.createJsxSerializeImage = createJsxSerializeImage;
-exports.defaultRenderImageElements = defaultRenderImageElements;

package/image/jsx-serializer/index.js

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

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

@@ -1,18 +0,0 @@
-import { JSX } from 'react';
-import { ImageCaptionElement, ImageCaptionTypeKey, ImageElement, ImageFigureElement, ImageFigureTypeKey, ImageTypeKey } from '@quadrats/common/image';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-export interface JsxSerializeImageFigureElementProps extends JsxSerializeElementProps<ImageFigureElement> {
-    style?: {
-        '--qdr-image-align': 'flex-start' | 'center' | 'flex-end';
-        '--qdr-image-caption-align': 'left' | 'center' | 'right';
-        width: string;
-    };
-}
-export interface JsxSerializeImageElementProps extends JsxSerializeElementProps<ImageElement> {
-    src: string;
-    caption?: string;
-}
-export interface JsxSerializeImageCaptionElementProps extends JsxSerializeElementProps<ImageCaptionElement> {
-    isEmpty: boolean;
-}
-export type ImageJsxSerializeElements = Record<ImageFigureTypeKey, (props: JsxSerializeImageFigureElementProps) => JSX.Element | null | undefined> & Record<ImageTypeKey, (props: JsxSerializeImageElementProps) => JSX.Element | null | undefined> & Record<ImageCaptionTypeKey, (props: JsxSerializeImageCaptionElementProps) => JSX.Element | null | undefined>;

package/image/typings.d.ts

@@ -1,22 +0,0 @@
-import { JSX } from 'react';
-import { Image, ImageCaptionElement, ImageCaptionTypeKey, ImageElement, ImageFigureElement, ImageFigureTypeKey, ImageTypeKey } from '@quadrats/common/image';
-import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, ReactWithable, Editor } from '@quadrats/react';
-export interface RenderImageFigureElementProps extends RenderElementProps<ImageFigureElement> {
-    style?: {
-        '--qdr-image-align': 'flex-start' | 'center' | 'flex-end';
-        '--qdr-image-caption-align': 'left' | 'center' | 'right';
-        width: string;
-    };
-}
-export interface RenderImageElementProps extends RenderElementProps<ImageElement> {
-    resizeImage: ReactImage<any>['resizeImage'];
-    parentType: string;
-    src: string;
-}
-export type RenderImageCaptionElementProps = RenderElementProps<ImageCaptionElement>;
-export type ImageRenderElements = Record<ImageFigureTypeKey, (props: RenderImageFigureElementProps) => JSX.Element | null | undefined> & Record<ImageTypeKey, (props: RenderImageElementProps) => JSX.Element | null | undefined> & Record<ImageCaptionTypeKey, (props: RenderImageCaptionElementProps) => JSX.Element | null | undefined>;
-export type ReactImageCreateRenderElementOptions = {
-    [K in ImageFigureTypeKey | ImageTypeKey | ImageCaptionTypeKey]?: ImageRenderElements[K];
-};
-export interface ReactImage<Hosting extends string> extends Omit<Image<Hosting, Editor>, 'with'>, WithCreateHandlers, WithCreateRenderElement<[ReactImageCreateRenderElementOptions?]>, ReactWithable {
-}