@quadrats/react 0.7.8 → 1.0.0

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,82 @@ 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", leftIcons: [
+                    {
+                        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',
+                    },
+                ], rightIcons: [
+                    {
+                        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 +190,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 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));
+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 })));
 }
 
-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);
@@ -259,6 +310,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;
     };
 }