@soul-refiner/design-system 1.7.18 → 1.7.20

package/dist/components/editor/navbar/navbar.js

@@ -109,7 +109,7 @@ export const EditorBar = () => {
                         React.createElement(Link, { size: 24, color: "grey-5" }))),
                 React.createElement(Tooltip, { content: "Image", place: "top" },
                     React.createElement(MenuButton, { "$active": false, as: "label" },
-                        React.createElement("div", { onClick: () => imageRef.current?.click() },
+                        React.createElement("div", null,
                             React.createElement("input", { accept: "image/*", ref: imageRef, style: { display: 'none' }, type: "file" }),
                             React.createElement(Image, { size: 24, color: "grey-5" })))),
                 React.createElement(Tooltip, { content: "Video", place: "top" },

package/dist/components/editor/plugins/blocks/image.js

@@ -20,6 +20,21 @@ export const ImageElement = withHOC(ResizableProvider, withRef(({ className, chi
                 setSrc(source);
         })();
     }, [id, imageSrcLoader]);
+    if (!src && !!url) {
+        return (React.createElement(MediaPopover, { pluginKey: ELEMENT_IMAGE },
+            React.createElement(PlateElement, { ref: ref, element: element, className: cn('py-2.5', className), ...props },
+                React.createElement("figure", { className: "group relative m-0", contentEditable: false },
+                    React.createElement(Resizable, { align: align, options: {
+                            align,
+                            readOnly,
+                        } },
+                        React.createElement(ResizeHandle, { options: { direction: 'left' }, className: mediaResizeHandleVariants({ direction: 'left' }) }),
+                        React.createElement(Image, { className: cn('block w-full max-w-full cursor-pointer object-cover px-0', 'rounded-sm', focused && selected && 'ring-2 ring-ring ring-offset-2'), alt: "", ...nodeProps }),
+                        React.createElement(ResizeHandle, { options: { direction: 'right' }, className: mediaResizeHandleVariants({
+                                direction: 'right',
+                            }) }))),
+                children)));
+    }
     return (React.createElement(MediaPopover, { pluginKey: ELEMENT_IMAGE },
         React.createElement(PlateElement, { ref: ref, className: cn('py-2.5', className), element: restElement, ...props },
             !src ? null : (React.createElement("figure", { className: "group relative m-0", contentEditable: false },

package/dist/components/editor/simple_editor/navbar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { insertImage, useLinkToolbarButton, useLinkToolbarButtonState, useListToolbarButton, useListToolbarButtonState, useMarkToolbarButton, useMarkToolbarButtonState, useEditorRef, } from '@udecode/plate';
+import { insertImage, insertNode, useLinkToolbarButton, useLinkToolbarButtonState, useListToolbarButton, useListToolbarButtonState, useMarkToolbarButton, useMarkToolbarButtonState, useEditorRef, ELEMENT_PARAGRAPH, } from '@udecode/plate';
 import { Tooltip } from '../../';
 import { AlignmentDropdown } from '../navbar/alignment_dropdown';
 import { StyleDropdown } from '../navbar/style_dropdown';
@@ -32,6 +32,10 @@ export const EditorBar = ({ handleUploadImage }) => {
         const imageurl = await handleUploadImage(files);
         if (imageurl) {
             insertImage(editorRef, imageurl);
+            insertNode(editorRef, {
+                type: ELEMENT_PARAGRAPH,
+                children: [{ text: ' ' }],
+            });
         }
     };
     const handleRedo = () => editorRef.redo();
@@ -69,7 +73,7 @@ export const EditorBar = ({ handleUploadImage }) => {
                     React.createElement(Link, { size: 24, color: "grey-5" }))),
             React.createElement(Tooltip, { content: "Image", place: "top" },
                 React.createElement(MenuButton, { "$active": false, as: "label", onChange: handleImageChange },
-                    React.createElement("div", { onClick: () => imageRef.current?.click() },
+                    React.createElement("div", null,
                         React.createElement("input", { accept: "image/*", ref: imageRef, style: { display: 'none' }, type: "file" }),
                         React.createElement(Image, { size: 24, color: "grey-5" }))))),
         React.createElement(Divider, null),

package/dist/components/input/calendar/calendar.js

@@ -219,6 +219,7 @@ const BottomWrapper = styled.div `
   gap: 18px;
 `;
 const Input = styled.input `
+  max-width: 140px;
   padding: 0px;
   flex: 1;
   font-family: var(--font-inter);
@@ -234,6 +235,7 @@ const Input = styled.input `
   }
 `;
 const InputWrapper = styled.div `
+  width: fit-content;
   display: flex;
   gap: 8px;
   align-items: center;

package/dist/components/input/time/time.js

@@ -34,6 +34,7 @@ export const Time = ({ selectedTime, setTime, selectedPeriod, setPeriod, }) => {
         }, additionalOnChange: setPeriod, defaultValue: selectedTime, defaultAdditionalValue: selectedPeriod }));
 };
 const InputWrapper = styled.div `
+  width: fit-content;
   display: flex;
   gap: 8px;
   align-items: center;
@@ -52,6 +53,7 @@ const InputWrapper = styled.div `
   }
 `;
 const Input = styled.input `
+  max-width: 120px;
   padding: 0px;
   flex: 1;
   font-family: var(--font-inter);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "1.7.18",
+  "version": "1.7.20",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {