@quadrats/react 0.7.8 → 1.1.0

package/image/image.scss

@@ -1,9 +1,56 @@
 $qdr-image-resizer-size: 6px;
 
 .qdr-image {
+  display: flex;
+  justify-content: var(--qdr-image-align);
   position: relative;
   user-select: none;
 
+  &--with-inline-toolbar {
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: transparent;
+      transition: background-color var(--qdr-duration-short) var(--qdr-easing-standard);
+    }
+
+    &:hover {
+      &::after {
+        background-color: var(--qdr-overlay-dark);
+      }
+    }
+  }
+
+  &__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;
+
+    &__icon {
+      color: var(--qdr-action-inactive);
+    }
+  }
+
+  &__figure {
+    position: relative;
+    margin: var(--qdr-spacing-14) 0;
+
+    &:hover {
+      .qdr-image__inline-toolbar {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+  }
+
   &__spacer {
     position: absolute;
     top: 0;
@@ -16,7 +63,8 @@ $qdr-image-resizer-size: 6px;
 
   img {
     display: block;
-    width: 100%;
+    min-width: 240px;
+    max-width: 100%;
     user-select: none;
   }
 
@@ -42,13 +90,20 @@ $qdr-image-resizer-size: 6px;
   }
 
   &__caption {
-    margin-top: 6px;
+    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);
 
     &-placeholder {
-      display: inline-block;
-      color: var(--qdr-placeholder);
-      width: 0;
-      max-width: 100%;
+      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;

package/image/index.cjs.js

@@ -4,6 +4,9 @@ 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');
@@ -20,6 +23,90 @@ function ImageFigure(props) {
         }), style: style }), children));
 }
 
+// import { useImageResizer } from '../hooks/useImageResizer';
+function Image(props) {
+    const { attributes, children, element, 
+    // 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 === 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: () => 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);
@@ -111,40 +198,12 @@ function useImageResizer(element, resizeImage) {
     };
 }
 
-function Image(props) {
-    const { attributes, children, element, resizeImage, src, } = props;
-    const editor = react.useSlateStatic();
-    const { focusedAndSelected, imageRef, onResizeStart } = useImageResizer(element, resizeImage);
-    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-image", 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 },
-            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 }))));
+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 ImageCaption(props) {
-    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;
-    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)),
-        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 createReactImage(options = {}, getUploadOptions) {
     const core$1 = image.createImage(options);
     const uploadOptions = getUploadOptions === null || getUploadOptions === void 0 ? void 0 : getUploadOptions(core$1);
@@ -239,7 +298,7 @@ function createReactImage(options = {}, getUploadOptions) {
                     })
                         .reduce((prev, imageFile) => tslib.__awaiter(this, void 0, void 0, function* () {
                         yield prev;
-                        return utils.readFileAsDataURL(imageFile).then(dataURL => core$1.insertImage(editor, dataURL));
+                        return utils.readFileAsDataURL(imageFile).then((dataURL) => core$1.insertImage(editor, dataURL));
                     }), Promise.resolve());
                     return;
                 }
@@ -259,6 +318,7 @@ function createReactImage(options = {}, getUploadOptions) {
 exports.Image = Image;
 exports.ImageCaption = ImageCaption;
 exports.ImageFigure = ImageFigure;
+exports.ImagePlaceholder = ImagePlaceholder;
 exports.createReactImage = createReactImage;
 exports.defaultRenderImageElements = defaultRenderImageElements;
 exports.useImageResizer = useImageResizer;

package/image/index.d.ts

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

package/image/index.js

@@ -1,5 +1,6 @@
 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';

package/image/jsx-serializer/defaultRenderImageElements.js

@@ -2,7 +2,8 @@ import React from 'react';
 
 const defaultRenderImageElements = {
     figure: ({ children, style }) => (React.createElement("figure", { className: "qdr-image__figure", style: style }, children)),
-    image: ({ caption, src }) => React.createElement("img", { src: src, alt: caption, style: { width: '100%' } }),
+    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)),
 };
 

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

@@ -7,7 +7,8 @@ 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("img", { src: src, alt: caption, style: { width: '100%' } }),
+    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)),
 };
 

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

@@ -3,6 +3,8 @@ import { ImageCaptionElement, ImageCaptionTypeKey, ImageElement, ImageFigureElem
 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;
     };
 }

package/image/typings.d.ts

@@ -3,6 +3,8 @@ import { Image, ImageCaptionElement, ImageCaptionTypeKey, ImageElement, ImageFig
 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;
     };
 }