@quadrats/react 0.7.8 → 1.1.0

package/embed/toolbar/useEmbedTool.js

@@ -1,17 +1,102 @@
-import { useSlateStatic } from '@quadrats/react';
-import { useStartToolInput } from '@quadrats/react/toolbar';
+import { useMemo, useEffect } from 'react';
+import { Editor, Element } from '@quadrats/core';
+import { useLocale, useSlateStatic, useModal } from '@quadrats/react';
+import { EMBED_PLACEHOLDER_TYPE } from '@quadrats/common/embed';
 
-function useEmbedTool(controller, providers, getPlaceholder, startToolInput) {
+function useEmbedTool(controller, provider) {
+    const locale = useLocale();
     const editor = useSlateStatic();
-    const defaultStartToolInput = useStartToolInput();
-    const start = startToolInput
-        ? inputConfig => startToolInput(editor, inputConfig)
-        : defaultStartToolInput;
+    const { setEmbedModalConfig, isModalClosed, setIsModalClosed } = useModal();
+    const config = useMemo(() => {
+        switch (provider) {
+            case 'youtube':
+                return {
+                    type: 'input',
+                    placeholder: locale.editor.youtube.inputPlaceholder,
+                    confirmText: locale.editor.youtube.confirmText,
+                    hint: locale.editor.youtube.hint,
+                };
+            case 'vimeo':
+                return {
+                    type: 'input',
+                    placeholder: locale.editor.vimeo.inputPlaceholder,
+                    confirmText: locale.editor.vimeo.confirmText,
+                    hint: locale.editor.vimeo.hint,
+                };
+            case 'instagram':
+                return {
+                    type: 'input',
+                    placeholder: locale.editor.instagram.inputPlaceholder,
+                    confirmText: locale.editor.instagram.confirmText,
+                    hint: locale.editor.instagram.hint,
+                };
+            case 'facebook':
+                return {
+                    type: 'textarea',
+                    placeholder: locale.editor.facebook.inputPlaceholder,
+                    confirmText: locale.editor.facebook.confirmText,
+                    hint: locale.editor.facebook.hint,
+                };
+            case 'twitter':
+                return {
+                    type: 'input',
+                    placeholder: locale.editor.twitter.tweet.inputPlaceholder,
+                    confirmText: locale.editor.twitter.tweet.confirmText,
+                    hint: locale.editor.twitter.tweet.hint,
+                };
+            case 'podcastApple':
+                return {
+                    type: 'input',
+                    placeholder: locale.editor.podcastApple.inputPlaceholder,
+                    confirmText: locale.editor.podcastApple.confirmText,
+                    hint: locale.editor.podcastApple.hint,
+                };
+            case 'spotify':
+                return {
+                    type: 'input',
+                    placeholder: locale.editor.spotify.inputPlaceholder,
+                    confirmText: locale.editor.spotify.confirmText,
+                    hint: locale.editor.spotify.hint,
+                };
+            default:
+                return {
+                    type: 'input',
+                    placeholder: '',
+                    confirmText: '',
+                    hint: '',
+                };
+        }
+    }, [locale, provider]);
+    useEffect(() => {
+        const [match] = Editor.nodes(editor, {
+            at: [],
+            match: (node) => {
+                const placeholderElement = node;
+                return (Element.isElement(placeholderElement) &&
+                    placeholderElement.type === EMBED_PLACEHOLDER_TYPE &&
+                    placeholderElement.provider === provider);
+            },
+        });
+        if (match) {
+            setEmbedModalConfig(Object.assign({ onConfirm: (value) => {
+                    controller.removeEmbedPlaceholder(editor);
+                    controller.insertEmbed(editor, provider, value);
+                } }, config));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [config, controller, editor, provider]);
+    useEffect(() => {
+        if (isModalClosed) {
+            setTimeout(() => {
+                controller.removeEmbedPlaceholder(editor);
+                setIsModalClosed(false);
+            }, 250);
+        }
+    }, [controller, editor, isModalClosed, setIsModalClosed]);
     return {
-        onClick: () => start({
-            getPlaceholder,
-            confirm: embedCode => controller.insertEmbed(editor, providers, embedCode),
-        }),
+        onClick: () => {
+            controller.insertEmbedPlaceholder(editor, provider);
+        },
     };
 }
 

package/embed/typings.d.ts

@@ -11,4 +11,5 @@ export interface RenderEmbedElementProps<EmbedData extends Record<string, unknow
 }
 export type ReactEmbedCreateRenderElementOptions<Provider extends string> = Record<Provider, (props: RenderEmbedElementProps<any, any>) => JSX.Element | null | undefined>;
 export interface ReactEmbed<Provider extends string> extends Embed<Provider, Editor>, WithCreateRenderElement<[ReactEmbedCreateRenderElementOptions<Provider>]> {
+    createRenderPlaceholderElement: (...params: [ReactEmbedCreateRenderElementOptions<Provider>]) => (props: RenderElementProps) => JSX.Element | null | undefined;
 }

package/file-uploader/components/FileUploader.js

@@ -6,8 +6,7 @@ function FileUploader(props) {
     const { attributes, children, element } = props;
     const { percentage } = useFileUploader(element);
     return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-file-uploader", contentEditable: false }),
-        React.createElement("div", { className: "qdr-file-uploader__backdrop" },
-            React.createElement(Progress, { className: "qdr-file-uploader__progress", percentage: percentage })),
+        React.createElement(Progress, { percentage: percentage }),
         children));
 }
 

package/file-uploader/createReactFileUploader.js

@@ -1,4 +1,4 @@
-import { createFileUploader } from '@quadrats/common/file-uploader';
+import { createFileUploader, FILE_UPLOADER_PLACEHOLDER_TYPE } from '@quadrats/common/file-uploader';
 import { createRenderElement } from '@quadrats/react';
 import { defaultRenderFileUploaderElement } from './defaultRenderFileUploaderElement.js';
 
@@ -8,6 +8,9 @@ function createReactFileUploader(options = {}) {
     return Object.assign(Object.assign({}, core), { createRenderElement: ({ render = defaultRenderFileUploaderElement } = {}) => createRenderElement({
             type,
             render,
+        }), createRenderPlaceholderElement: ({ render }) => createRenderElement({
+            type: FILE_UPLOADER_PLACEHOLDER_TYPE,
+            render,
         }) });
 }
 

package/file-uploader/defaultRenderFileUploaderElement.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import FileUploader from './components/FileUploader.js';
 
-const defaultRenderFileUploaderElement = (props) => React.createElement(FileUploader, Object.assign({}, props));
+const defaultRenderFileUploaderElement = props => React.createElement(FileUploader, Object.assign({}, props));
 
 export { defaultRenderFileUploaderElement };

package/file-uploader/file-uploader.css

@@ -1 +1 @@
-.qdr-file-uploader{position:relative}.qdr-file-uploader__backdrop{display:flex;justify-content:center;align-items:center;position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--qdr-text);transition:background-color 300ms ease-in-out;will-change:background-color;opacity:.65;z-index:1}.qdr-file-uploader__progress{width:50%}
+.qdr-file-uploader{position:relative}

package/file-uploader/file-uploader.scss

@@ -1,23 +1,3 @@
 .qdr-file-uploader {
   position: relative;
-
-  &__backdrop {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: var(--qdr-text);
-    transition: background-color 300ms ease-in-out;
-    will-change: background-color;
-    opacity: 0.65;
-    z-index: 1;
-  }
-
-  &__progress {
-    width: 50%;
-  }
 }

package/file-uploader/index.cjs.js

@@ -18,12 +18,11 @@ function FileUploader(props) {
     const { attributes, children, element } = props;
     const { percentage } = useFileUploader(element);
     return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-file-uploader", contentEditable: false }),
-        React.createElement("div", { className: "qdr-file-uploader__backdrop" },
-            React.createElement(components.Progress, { className: "qdr-file-uploader__progress", percentage: percentage })),
+        React.createElement(components.Progress, { percentage: percentage }),
         children));
 }
 
-const defaultRenderFileUploaderElement = (props) => React.createElement(FileUploader, Object.assign({}, props));
+const defaultRenderFileUploaderElement = props => React.createElement(FileUploader, Object.assign({}, props));
 
 function createReactFileUploader(options = {}) {
     const core = fileUploader.createFileUploader(options);
@@ -31,6 +30,9 @@ function createReactFileUploader(options = {}) {
     return Object.assign(Object.assign({}, core), { createRenderElement: ({ render = defaultRenderFileUploaderElement } = {}) => react.createRenderElement({
             type,
             render,
+        }), createRenderPlaceholderElement: ({ render }) => react.createRenderElement({
+            type: fileUploader.FILE_UPLOADER_PLACEHOLDER_TYPE,
+            render,
         }) });
 }
 

package/file-uploader/toolbar/index.cjs.js

@@ -8,7 +8,10 @@ var toolbar = require('@quadrats/react/toolbar');
 function useFileUploaderTool(controller, options) {
     const editor = react.useSlateStatic();
     return {
-        onClick: () => controller.upload(editor, options),
+        onClick: () => {
+            controller.insertUploaderPlaceholder(editor);
+            controller.upload(editor, options);
+        },
     };
 }
 

package/file-uploader/toolbar/useFileUploaderTool.d.ts

@@ -1,5 +1,5 @@
 import { FileUploaderUploadOptions } from '@quadrats/common/file-uploader';
 import { ReactFileUploader } from '@quadrats/react/file-uploader';
 export declare function useFileUploaderTool(controller: ReactFileUploader, options: FileUploaderUploadOptions): {
-    onClick: () => Promise<void>;
+    onClick: () => void;
 };

package/file-uploader/toolbar/useFileUploaderTool.js

@@ -3,7 +3,10 @@ import { useSlateStatic } from '@quadrats/react';
 function useFileUploaderTool(controller, options) {
     const editor = useSlateStatic();
     return {
-        onClick: () => controller.upload(editor, options),
+        onClick: () => {
+            controller.insertUploaderPlaceholder(editor);
+            controller.upload(editor, options);
+        },
     };
 }
 

package/file-uploader/typings.d.ts

@@ -3,7 +3,12 @@ import { FileUploader, FileUploaderElement } from '@quadrats/common/file-uploade
 import { Editor, RenderElementProps, WithCreateRenderElement } from '@quadrats/react';
 export type RenderFileUploaderElementProps = RenderElementProps<FileUploaderElement>;
 export type RenderFileUploaderElement = (props: RenderFileUploaderElementProps) => JSX.Element | null | undefined;
+export type RenderFileUploaderPlaceholderElement = (props: RenderElementProps) => JSX.Element | null | undefined;
 export interface FileUploaderCreateRenderElementOptions {
     render?: RenderFileUploaderElement;
 }
-export type ReactFileUploader = FileUploader<Editor> & WithCreateRenderElement<[FileUploaderCreateRenderElementOptions?]>;
+export type ReactFileUploader = FileUploader<Editor> & WithCreateRenderElement<[FileUploaderCreateRenderElementOptions?]> & {
+    createRenderPlaceholderElement: (params_0: {
+        render: RenderFileUploaderPlaceholderElement;
+    }) => (props: RenderElementProps) => JSX.Element | null | undefined;
+};

package/footnote/defaultRenderFootnoteElement.js

@@ -9,7 +9,7 @@ const defaultRenderFootnoteElement = ({ attributes, children, element, placement
     return (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { placement: placement, popup: footnote },
             React.createElement("span", Object.assign({ style: { textDecoration: 'underline' } }, attributes, { className: "qdr-footnote-text" }), children)),
-        React.createElement("sup", Object.assign({}, attributes, { className: "qdr-footnote-sup", style: { color: 'var(--qdr-sup)', userSelect: 'none' }, contentEditable: false }), `[${index !== null && index !== void 0 ? index : 1}]`)));
+        React.createElement("sup", Object.assign({}, attributes, { className: "qdr-footnote-sup", style: { color: 'var(--qdr-error-light)', userSelect: 'none' }, contentEditable: false }), `[${index !== null && index !== void 0 ? index : 1}]`)));
 };
 
 export { defaultRenderFootnoteElement };

package/footnote/index.cjs.js

@@ -14,7 +14,7 @@ const defaultRenderFootnoteElement = ({ attributes, children, element, placement
     return (React.createElement(React.Fragment, null,
         React.createElement(components.Tooltip, { placement: placement, popup: footnote },
             React.createElement("span", Object.assign({ style: { textDecoration: 'underline' } }, attributes, { className: "qdr-footnote-text" }), children)),
-        React.createElement("sup", Object.assign({}, attributes, { className: "qdr-footnote-sup", style: { color: 'var(--qdr-sup)', userSelect: 'none' }, contentEditable: false }), `[${index !== null && index !== void 0 ? index : 1}]`)));
+        React.createElement("sup", Object.assign({}, attributes, { className: "qdr-footnote-sup", style: { color: 'var(--qdr-error-light)', userSelect: 'none' }, contentEditable: false }), `[${index !== null && index !== void 0 ? index : 1}]`)));
 };
 
 function createReactFootnote(options = {}) {

package/footnote/jsx-serializer/defaultRenderFootnoteElement.js

@@ -6,7 +6,7 @@ const defaultRenderFootnoteElement = ({ children, element, placement = 'bottom'
     return (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { placement: placement, popup: element.footnote },
             React.createElement("span", { className: "qdr-footnote-text", style: { textDecoration: 'underline' } }, children)),
-        React.createElement("sup", { className: "qdr-footnote-sup", style: { color: 'var(--qdr-sup)' } }, `[${(_a = element.index) !== null && _a !== void 0 ? _a : 1}]`)));
+        React.createElement("sup", { className: "qdr-footnote-sup", style: { color: 'var(--qdr-error-light)' } }, `[${(_a = element.index) !== null && _a !== void 0 ? _a : 1}]`)));
 };
 
 export { defaultRenderFootnoteElement };

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

@@ -10,7 +10,7 @@ const defaultRenderFootnoteElement = ({ children, element, placement = 'bottom'
     return (React.createElement(React.Fragment, null,
         React.createElement(components.Tooltip, { placement: placement, popup: element.footnote },
             React.createElement("span", { className: "qdr-footnote-text", style: { textDecoration: 'underline' } }, children)),
-        React.createElement("sup", { className: "qdr-footnote-sup", style: { color: 'var(--qdr-sup)' } }, `[${(_a = element.index) !== null && _a !== void 0 ? _a : 1}]`)));
+        React.createElement("sup", { className: "qdr-footnote-sup", style: { color: 'var(--qdr-error-light)' } }, `[${(_a = element.index) !== null && _a !== void 0 ? _a : 1}]`)));
 };
 
 /* eslint-disable max-len */

package/footnote/toolbar/index.cjs.js

@@ -11,7 +11,7 @@ function useFootnoteTool(controller, options = {}) {
     return {
         active: controller.isSelectionInFootnote(editor),
         onClick: () => startToolInput({
-            getPlaceholder: (locale) => locale.editor.footnote.inputPlaceholder,
+            getPlaceholder: locale => locale.editor.footnote.inputPlaceholder,
             confirm: (footnoteText) => {
                 controller.upsertFootnoteAndUpdateIndex(editor, footnoteText, options);
             },

package/footnote/toolbar/useFootnoteTool.js

@@ -7,7 +7,7 @@ function useFootnoteTool(controller, options = {}) {
     return {
         active: controller.isSelectionInFootnote(editor),
         onClick: () => startToolInput({
-            getPlaceholder: (locale) => locale.editor.footnote.inputPlaceholder,
+            getPlaceholder: locale => locale.editor.footnote.inputPlaceholder,
             confirm: (footnoteText) => {
                 controller.upsertFootnoteAndUpdateIndex(editor, footnoteText, options);
             },

package/heading/defaultRenderHeadingElement.js

@@ -13,7 +13,8 @@ const defaultRenderHeadingElement = ({ attributes, children, element, }) => {
     if (!Component) {
         return null;
     }
-    return React.createElement(Component, Object.assign({}, attributes, { className: `qdr-${Component}` }), children);
+    const style = element.align ? { textAlign: element.align } : undefined;
+    return (React.createElement(Component, Object.assign({}, attributes, { className: `qdr-${Component}`, style: style }), children));
 };
 
 export { HEADING_COMPONENTS, defaultRenderHeadingElement };

package/heading/heading.css

@@ -0,0 +1 @@
+.qdr-h1{margin:var(--qdr-spacing-14) 0 var(--qdr-spacing-9);color:var(--qdr-text-primary);font-size:var(--qdr-typography-article-h1-font-size);line-height:var(--qdr-typography-article-h1-line-height);letter-spacing:var(--qdr-typography-article-h1-letter-spacing);font-weight:var(--qdr-typography-article-h1-font-weight)}.qdr-h2{margin:var(--qdr-spacing-11) 0 var(--qdr-spacing-9);color:var(--qdr-text-primary);font-size:var(--qdr-typography-article-h2-font-size);line-height:var(--qdr-typography-article-h2-line-height);letter-spacing:var(--qdr-typography-article-h2-letter-spacing);font-weight:var(--qdr-typography-article-h2-font-weight)}.qdr-h3{margin:var(--qdr-spacing-10) 0 var(--qdr-spacing-6);color:var(--qdr-text-primary);font-size:var(--qdr-typography-article-h3-font-size);line-height:var(--qdr-typography-article-h3-line-height);letter-spacing:var(--qdr-typography-article-h3-letter-spacing);font-weight:var(--qdr-typography-article-h3-font-weight)}.qdr-h4{margin:var(--qdr-spacing-9) 0 var(--qdr-spacing-6);color:var(--qdr-text-primary);font-size:var(--qdr-typography-article-h4-font-size);line-height:var(--qdr-typography-article-h4-line-height);letter-spacing:var(--qdr-typography-article-h4-letter-spacing);font-weight:var(--qdr-typography-article-h4-font-weight)}.qdr-h5{margin:var(--qdr-spacing-9) 0 var(--qdr-spacing-6);color:var(--qdr-text-primary);font-size:var(--qdr-typography-article-h5-font-size);line-height:var(--qdr-typography-article-h5-line-height);letter-spacing:var(--qdr-typography-article-h5-letter-spacing);font-weight:var(--qdr-typography-article-h5-font-weight)}.qdr-h6{margin:var(--qdr-spacing-8) 0 var(--qdr-spacing-4);color:var(--qdr-text-primary);font-size:var(--qdr-typography-article-h6-font-size);line-height:var(--qdr-typography-article-h6-line-height);letter-spacing:var(--qdr-typography-article-h6-letter-spacing);font-weight:var(--qdr-typography-article-h6-font-weight)}

package/heading/heading.scss

@@ -0,0 +1,53 @@
+.qdr-h1 {
+  margin: var(--qdr-spacing-14) 0 var(--qdr-spacing-9);
+  color: var(--qdr-text-primary);
+  font-size: var(--qdr-typography-article-h1-font-size);
+  line-height: var(--qdr-typography-article-h1-line-height);
+  letter-spacing: var(--qdr-typography-article-h1-letter-spacing);
+  font-weight: var(--qdr-typography-article-h1-font-weight);
+}
+
+.qdr-h2 {
+  margin: var(--qdr-spacing-11) 0 var(--qdr-spacing-9);
+  color: var(--qdr-text-primary);
+  font-size: var(--qdr-typography-article-h2-font-size);
+  line-height: var(--qdr-typography-article-h2-line-height);
+  letter-spacing: var(--qdr-typography-article-h2-letter-spacing);
+  font-weight: var(--qdr-typography-article-h2-font-weight);
+}
+
+.qdr-h3 {
+  margin: var(--qdr-spacing-10) 0 var(--qdr-spacing-6);
+  color: var(--qdr-text-primary);
+  font-size: var(--qdr-typography-article-h3-font-size);
+  line-height: var(--qdr-typography-article-h3-line-height);
+  letter-spacing: var(--qdr-typography-article-h3-letter-spacing);
+  font-weight: var(--qdr-typography-article-h3-font-weight);
+}
+
+.qdr-h4 {
+  margin: var(--qdr-spacing-9) 0 var(--qdr-spacing-6);
+  color: var(--qdr-text-primary);
+  font-size: var(--qdr-typography-article-h4-font-size);
+  line-height: var(--qdr-typography-article-h4-line-height);
+  letter-spacing: var(--qdr-typography-article-h4-letter-spacing);
+  font-weight: var(--qdr-typography-article-h4-font-weight);
+}
+
+.qdr-h5 {
+  margin: var(--qdr-spacing-9) 0 var(--qdr-spacing-6);
+  color: var(--qdr-text-primary);
+  font-size: var(--qdr-typography-article-h5-font-size);
+  line-height: var(--qdr-typography-article-h5-line-height);
+  letter-spacing: var(--qdr-typography-article-h5-letter-spacing);
+  font-weight: var(--qdr-typography-article-h5-font-weight);
+}
+
+.qdr-h6 {
+  margin: var(--qdr-spacing-8) 0 var(--qdr-spacing-4);
+  color: var(--qdr-text-primary);
+  font-size: var(--qdr-typography-article-h6-font-size);
+  line-height: var(--qdr-typography-article-h6-line-height);
+  letter-spacing: var(--qdr-typography-article-h6-letter-spacing);
+  font-weight: var(--qdr-typography-article-h6-font-weight);
+}

package/heading/index.cjs.js

@@ -29,7 +29,8 @@ const defaultRenderHeadingElement = ({ attributes, children, element, }) => {
     if (!Component) {
         return null;
     }
-    return React.createElement(Component, Object.assign({}, attributes, { className: `qdr-${Component}` }), children);
+    const style = element.align ? { textAlign: element.align } : undefined;
+    return (React.createElement(Component, Object.assign({}, attributes, { className: `qdr-${Component}`, style: style }), children));
 };
 
 function createReactHeading(options = {}) {

package/heading/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@quadrats/react/heading",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
   "main": "./index.cjs.js",
   "module": "./index.js",
   "typings": "./index.d.ts"

package/image/components/Image.js

@@ -1,19 +1,68 @@
 import React from 'react';
-import { Transforms } from '@quadrats/core';
+import { Editor, Element, Transforms } from '@quadrats/core';
+import { AlignLeft, AlignCenter, AlignRight, Trash } from '@quadrats/icons';
 import { useSlateStatic, ReactEditor } from '@quadrats/react';
-import { useImageResizer } from '../hooks/useImageResizer.js';
+import { InlineToolbar } from '@quadrats/react/toolbar';
 
+// import { useImageResizer } from '../hooks/useImageResizer';
 function Image(props) {
-    const { attributes, children, element, resizeImage, src, } = props;
+    const { attributes, children, element, 
+    // resizeImage,
+    src, } = props;
     const editor = useSlateStatic();
-    const { focusedAndSelected, imageRef, onResizeStart } = useImageResizer(element, resizeImage);
-    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-image", onClick: () => Transforms.select(editor, ReactEditor.findPath(editor, element)), onMouseDown: event => event.preventDefault(), role: "img" }),
+    const path = ReactEditor.findPath(editor, element);
+    const parentEntry = Editor.above(editor, {
+        at: path,
+        match: (node) => Element.isElement(node) && node.type === element.figureType,
+        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 },
-            focusedAndSelected && (React.createElement(React.Fragment, null,
-                React.createElement("span", { className: "qdr-image__boundary" }),
-                React.createElement("span", { "aria-label": "resize image", className: "qdr-image__resizer", onMouseDown: onResizeStart, onTouchStart: onResizeStart, role: "button", tabIndex: -1 }))),
-            React.createElement("img", { ref: imageRef, src: src, alt: src }))));
+        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.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import clsx from 'clsx';
-import { Editor } from '@quadrats/core';
-import { useSlateStatic, ReactEditor, useLocale } from '@quadrats/react';
+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);
@@ -11,10 +12,11 @@ function ImageCaption(props) {
     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 && (React.createElement("span", { className: "qdr-image__caption-placeholder", contentEditable: false }, placeholder)),
+        isEmpty && !composing && (React.createElement("span", { className: "qdr-image__caption-placeholder", contentEditable: false }, placeholder)),
         children));
 }
 

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.js

@@ -101,7 +101,7 @@ function createReactImage(options = {}, getUploadOptions) {
                     })
                         .reduce((prev, imageFile) => __awaiter(this, void 0, void 0, function* () {
                         yield prev;
-                        return readFileAsDataURL(imageFile).then(dataURL => core.insertImage(editor, dataURL));
+                        return readFileAsDataURL(imageFile).then((dataURL) => core.insertImage(editor, dataURL));
                     }), Promise.resolve());
                     return;
                 }

package/image/image.css

@@ -1 +1 @@
-.qdr-image{position:relative;user-select:none}.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;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{margin-top:6px}.qdr-image__caption-placeholder{display:inline-block;color:var(--qdr-placeholder);width:0;max-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}
+.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}