@quadrats/react 1.1.8 → 1.1.10

package/heading/typings.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'react';
+import { Heading, HeadingElement, HeadingLevel } from '@quadrats/common/heading';
+import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, Editor } from '@quadrats/react';
+export type RenderHeadingElementProps = RenderElementProps<HeadingElement>;
+export interface ReactHeadingCreateHandlersOptions {
+    /**
+     * The hotkey to toggle heading w/ specific level.
+     */
+    hotkey?: string;
+}
+export interface ReactHeadingCreateRenderElementOptions {
+    render?: (props: RenderHeadingElementProps) => JSX.Element | null | undefined;
+}
+export interface ReactHeading<Level extends HeadingLevel> extends Heading<Level, Editor>, WithCreateHandlers<[ReactHeadingCreateHandlersOptions?]>, WithCreateRenderElement<[ReactHeadingCreateRenderElementOptions?]> {
+}

package/highlight/constants.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Default hotkey for toggling highlight.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
+export declare const HIGHLIGHT_HOTKEY = "mod+h";

package/highlight/constants.js

@@ -0,0 +1,8 @@
+/**
+ * Default hotkey for toggling highlight.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
+const HIGHLIGHT_HOTKEY = 'mod+h';
+
+export { HIGHLIGHT_HOTKEY };

package/highlight/createReactHighlight.d.ts

@@ -0,0 +1 @@
+export declare const createReactHighlight: (variant?: string) => import("@quadrats/react/toggle-mark").ReactToggleMark;

package/highlight/createReactHighlight.js

@@ -0,0 +1,11 @@
+import { createHighlight } from '@quadrats/common/highlight';
+import { createReactToggleMarkCreator } from '@quadrats/react/toggle-mark';
+import { defaultRenderHighlight } from './defaultRenderHighlight.js';
+import { HIGHLIGHT_HOTKEY } from './constants.js';
+
+const createReactHighlight = (variant) => createReactToggleMarkCreator(createHighlight(variant), {
+    hotkey: HIGHLIGHT_HOTKEY,
+    render: defaultRenderHighlight(variant),
+})();
+
+export { createReactHighlight };

package/highlight/defaultRenderHighlight.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { RenderMarkPropsBase } from '@quadrats/react/_internal';
+export declare const defaultRenderHighlight: (variant?: string) => ({ children, leaf }: RenderMarkPropsBase<boolean>) => React.JSX.Element;

package/highlight/defaultRenderHighlight.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { HIGHLIGHT_TYPE } from '@quadrats/common/highlight';
+
+const defaultRenderHighlight = (variant) => ({ children, leaf }) => (React.createElement("mark", { "data-type": variant !== null && variant !== void 0 ? variant : undefined, className: leaf.highlightVariant
+        ? `${HIGHLIGHT_TYPE}.${leaf.highlightVariant}` : `${HIGHLIGHT_TYPE}` }, children));
+
+export { defaultRenderHighlight };

package/highlight/index.cjs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var highlight = require('@quadrats/common/highlight');
+var toggleMark = require('@quadrats/react/toggle-mark');
+
+/**
+ * Default hotkey for toggling highlight.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
+const HIGHLIGHT_HOTKEY = 'mod+h';
+
+const defaultRenderHighlight = (variant) => ({ children, leaf }) => (React.createElement("mark", { "data-type": variant !== null && variant !== void 0 ? variant : undefined, className: leaf.highlightVariant
+        ? `${highlight.HIGHLIGHT_TYPE}.${leaf.highlightVariant}` : `${highlight.HIGHLIGHT_TYPE}` }, children));
+
+const createReactHighlight = (variant) => toggleMark.createReactToggleMarkCreator(highlight.createHighlight(variant), {
+    hotkey: HIGHLIGHT_HOTKEY,
+    render: defaultRenderHighlight(variant),
+})();
+
+exports.HIGHLIGHT_HOTKEY = HIGHLIGHT_HOTKEY;
+exports.createReactHighlight = createReactHighlight;
+exports.defaultRenderHighlight = defaultRenderHighlight;

package/highlight/index.js

@@ -0,0 +1,3 @@
+export { HIGHLIGHT_HOTKEY } from './constants.js';
+export { defaultRenderHighlight } from './defaultRenderHighlight.js';
+export { createReactHighlight } from './createReactHighlight.js';

package/highlight/jsx-serializer/createJsxSerializeHighlight.d.ts

@@ -0,0 +1 @@
+export declare const createJsxSerializeHighlight: (variant?: string) => (props: Omit<import("@quadrats/react/jsx-serializer").JsxSerializeMarkProps<boolean>, "mark">) => import("react").JSX.Element;

package/highlight/jsx-serializer/createJsxSerializeHighlight.js

@@ -0,0 +1,10 @@
+import { HIGHLIGHT_TYPE } from '@quadrats/common/highlight';
+import { createJsxSerializeToggleMarkCreator } from '@quadrats/react/toggle-mark/jsx-serializer';
+import { defaultRenderHighlight } from '@quadrats/react/highlight';
+
+const createJsxSerializeHighlight = (variant) => createJsxSerializeToggleMarkCreator({
+    type: HIGHLIGHT_TYPE,
+    render: defaultRenderHighlight(variant),
+})();
+
+export { createJsxSerializeHighlight };

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var highlight = require('@quadrats/react/highlight');
+var highlight$1 = require('@quadrats/common/highlight');
+var jsxSerializer = require('@quadrats/react/toggle-mark/jsx-serializer');
+
+const createJsxSerializeHighlight = (variant) => jsxSerializer.createJsxSerializeToggleMarkCreator({
+    type: highlight$1.HIGHLIGHT_TYPE,
+    render: highlight.defaultRenderHighlight(variant),
+})();
+
+exports.defaultRenderHighlight = highlight.defaultRenderHighlight;
+exports.createJsxSerializeHighlight = createJsxSerializeHighlight;

package/highlight/jsx-serializer/index.js

@@ -0,0 +1,2 @@
+export { defaultRenderHighlight } from '@quadrats/react/highlight';
+export { createJsxSerializeHighlight } from './createJsxSerializeHighlight.js';

package/highlight/jsx-serializer/package.json

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

package/highlight/package.json

@@ -1,9 +1,7 @@
 {
   "name": "@quadrats/react/highlight",
   "sideEffects": false,
-  "quadratsConfig": {
-    "deps": [
-      "toggle-mark"
-    ]
-  }
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
 }

package/highlight/typings.d.ts

@@ -0,0 +1,5 @@
+import { Text } from 'slate';
+export interface HighlightLeaf extends Text {
+    highlight: boolean;
+    highlightVariant?: string;
+}

package/image/components/Image.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RenderImageElementProps } from '../typings';
+declare function Image(props: RenderImageElementProps): React.JSX.Element;
+export default Image;

package/image/components/Image.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Editor, Element, Transforms } from '@quadrats/core';
+import { AlignLeft, AlignCenter, AlignRight, Trash } from '@quadrats/icons';
+import { useSlateStatic, ReactEditor } from '@quadrats/react';
+import { InlineToolbar } from '@quadrats/react/toolbar';
+
+// import { useImageResizer } from '../hooks/useImageResizer';
+function Image(props) {
+    const { attributes, children, element, parentType, 
+    // resizeImage,
+    src, } = props;
+    const editor = useSlateStatic();
+    const path = ReactEditor.findPath(editor, element);
+    const parentEntry = Editor.above(editor, {
+        at: path,
+        match: (node) => 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: () => Transforms.select(editor, 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(InlineToolbar, { className: "qdr-image__inline-toolbar", iconGroups: [
+                    {
+                        enabledBgColor: true,
+                        icons: [
+                            {
+                                icon: AlignLeft,
+                                onClick: () => {
+                                    Transforms.setNodes(editor, { align: 'start' }, { at: parentPath });
+                                },
+                                active: parentNode.align === 'start' || !parentNode.align,
+                            },
+                            {
+                                icon: AlignCenter,
+                                onClick: () => {
+                                    Transforms.setNodes(editor, { align: 'center' }, { at: parentPath });
+                                },
+                                active: parentNode.align === 'center',
+                            },
+                            {
+                                icon: AlignRight,
+                                onClick: () => {
+                                    Transforms.setNodes(editor, { align: 'end' }, { at: parentPath });
+                                },
+                                active: parentNode.align === 'end',
+                            },
+                        ],
+                    },
+                    {
+                        icons: [
+                            {
+                                icon: Trash,
+                                onClick: () => {
+                                    Transforms.removeNodes(editor, { at: parentPath });
+                                },
+                            },
+                        ],
+                    },
+                ] }),
+            React.createElement("img", { 
+                // ref={imageRef}
+                src: src, alt: src }))));
+}
+
+export { Image as default };

package/image/components/ImageCaption.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RenderImageCaptionElementProps } from '../typings';
+declare function ImageCaption(props: RenderImageCaptionElementProps): React.JSX.Element;
+export default ImageCaption;

package/image/components/ImageCaption.js

@@ -0,0 +1,23 @@
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import { Editor, Path } from '@quadrats/core';
+import { useComposition, useSlateStatic, ReactEditor, useLocale } from '@quadrats/react';
+
+function ImageCaption(props) {
+    const { compositionPath } = useComposition();
+    const { attributes, children, element } = props;
+    const editor = useSlateStatic();
+    const path = ReactEditor.findPath(editor, element);
+    const text = Editor.string(editor, path);
+    const isEmpty = !text;
+    const locale = useLocale();
+    const placeholder = locale.editor.image.captionInputPlaceholder;
+    const composing = useMemo(() => 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));
+}
+
+export { ImageCaption as default };

package/image/components/ImageFigure.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RenderImageFigureElementProps } from '../typings';
+declare function ImageFigure(props: RenderImageFigureElementProps): React.JSX.Element;
+export default ImageFigure;

package/image/components/ImageFigure.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import clsx from 'clsx';
+import { useFocused, useSelected } from '@quadrats/react';
+
+function ImageFigure(props) {
+    const { attributes, children, style } = props;
+    const focused = useFocused();
+    const selected = 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));
+}
+
+export { ImageFigure as default };

package/image/components/ImagePlaceholder.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+declare function ImagePlaceholder(props: RenderElementProps): React.JSX.Element;
+export default ImagePlaceholder;

package/image/components/ImagePlaceholder.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Icon } from '@quadrats/react/components';
+import { Image } from '@quadrats/icons';
+
+function ImagePlaceholder(props) {
+    const { attributes } = props;
+    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-image__placeholder", contentEditable: false }),
+        React.createElement(Icon, { className: "qdr-image__placeholder__icon", icon: Image, width: 48, height: 48 })));
+}
+
+export { ImagePlaceholder as default };

package/image/createReactImage.d.ts

@@ -0,0 +1,9 @@
+import { CreateImageOptions, Image } from '@quadrats/common/image';
+import { FileUploaderUploadOptions } from '@quadrats/common/file-uploader';
+import { QuadratsReactEditor } from '@quadrats/react';
+import { ReactImage } from './typings';
+export type CreateReactImageOptions<Hosting extends string> = CreateImageOptions<Hosting>;
+export declare function createReactImage<Hosting extends string>(options?: CreateReactImageOptions<Hosting>, getUploadOptions?: (image: Image<Hosting, QuadratsReactEditor>) => FileUploaderUploadOptions & {
+    type?: string;
+    onError?: VoidFunction;
+}): ReactImage<Hosting>;

package/image/createReactImage.js

@@ -0,0 +1,132 @@
+import { __awaiter } from 'tslib';
+import isHotkey from 'is-hotkey';
+import { readFileAsDataURL } from '@quadrats/utils';
+import { Transforms } from '@quadrats/core';
+import { createImage, getImageFigureElementCommonProps, getImageElementCommonProps } from '@quadrats/common/image';
+import { createFileUploaderElementByType, FILE_UPLOADER_TYPE, insertFileUploaderElement } from '@quadrats/common/file-uploader';
+import { createRenderElements } from '@quadrats/react';
+import { removePreviousElement } from '@quadrats/react/utils';
+import { defaultRenderImageElements } from './defaultRenderImageElements.js';
+
+function createReactImage(options = {}, getUploadOptions) {
+    const core = createImage(options);
+    const uploadOptions = getUploadOptions === null || getUploadOptions === void 0 ? void 0 : getUploadOptions(core);
+    const { types } = core;
+    return Object.assign(Object.assign({}, core), { createHandlers: () => ({
+            onKeyDown(event, editor, next) {
+                if (event.key === 'Backspace' || event.key === 'Delete') {
+                    if (core.isCollapsedOnImage(editor)) {
+                        const [, figurePath] = core.getAboveImageFigure(editor) || [];
+                        if (figurePath) {
+                            Transforms.removeNodes(editor, { at: figurePath });
+                            return;
+                        }
+                    }
+                    else {
+                        removePreviousElement({
+                            event,
+                            editor,
+                            type: types.figure,
+                            confirmModal: false,
+                        });
+                    }
+                }
+                const [, captionPath] = core.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();
+                        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 createRenderElements([
+                {
+                    type: types.figure,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderFigure(Object.assign(Object.assign({}, getImageFigureElementCommonProps(element)), { attributes,
+                            element,
+                            children }));
+                    },
+                },
+                {
+                    type: types.image,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderImage(Object.assign(Object.assign({}, getImageElementCommonProps(element, core.hostingResolvers)), { attributes,
+                            element,
+                            children, parentType: core.types.figure, resizeImage: core.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.isImageUrl(text)) {
+                        core.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 = createFileUploaderElementByType((_a = uploadOptions.type) !== null && _a !== void 0 ? _a : FILE_UPLOADER_TYPE, { onError: uploadOptions.onError });
+                        Array.from(files).reduce((prev, file) => __awaiter(this, void 0, void 0, function* () {
+                            yield prev;
+                            return createFileUploaderElement(editor, file, uploadOptions).then((fileUploaderElement) => {
+                                insertFileUploaderElement(editor, fileUploaderElement);
+                            });
+                        }), Promise.resolve());
+                        return;
+                    }
+                    [...files]
+                        .filter((file) => {
+                        const [mime] = file.type.split('/');
+                        return mime === 'image';
+                    })
+                        .reduce((prev, imageFile) => __awaiter(this, void 0, void 0, function* () {
+                        yield prev;
+                        return readFileAsDataURL(imageFile).then((dataURL) => core.insertImage(editor, dataURL));
+                    }), Promise.resolve());
+                    return;
+                }
+                const inCaption = core.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.with(editor);
+        } });
+}
+
+export { createReactImage };

package/image/defaultRenderImageElements.d.ts

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

package/image/defaultRenderImageElements.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ImageFigure from './components/ImageFigure.js';
+import Image from './components/Image.js';
+import ImageCaption from './components/ImageCaption.js';
+
+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)),
+};
+
+export { defaultRenderImageElements };

package/image/hooks/useImageResizer.d.ts

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

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

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