@soul-refiner/design-system 1.7.19 → 1.7.21

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/navigation/inner/inner.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { DrawerProps } from '../../../components/surfaces/drawer';
 /*************************************************************************************************************************
  * Inner Navigation
  */
@@ -21,7 +22,7 @@ declare const InnerNav: {
         displayName: string;
     };
     Drawer: {
-        ({ children, label }: InnerNavDrawerProps): React.JSX.Element;
+        ({ children, label, controlledOpen, onOpenChange, }: InnerNavDrawerProps): React.JSX.Element;
         displayName: string;
     };
     DrawerHeader: {
@@ -85,7 +86,7 @@ export type InnerNavHeaderProps = React.PropsWithChildren;
 /*************************************************************************************************************************
  * Create Button
  */
-export interface InnerNavDrawerProps extends React.PropsWithChildren {
+export interface InnerNavDrawerProps extends DrawerProps, React.PropsWithChildren {
     label: React.ReactNode;
 }
 export { InnerNav };

package/dist/components/navigation/inner/inner.js

@@ -170,10 +170,12 @@ const InnerNavHeader = ({ children }) => {
 const HeaderWrapper = styled.div ``;
 InnerNav.Header = InnerNavHeader;
 InnerNavHeader.displayName = 'InnerNav.Header';
-const InnerNavDrawer = ({ children, label }) => {
-    return (React.createElement(Drawer, null,
+const InnerNavDrawer = ({ children, label, controlledOpen, onOpenChange, }) => {
+    return (React.createElement(Drawer, { controlledOpen: controlledOpen, onOpenChange: onOpenChange },
         React.createElement(Drawer.Trigger, null,
-            React.createElement(Button, { icon: React.createElement(Plus, { color: "white" }), size: "small", sx: "width: 100%; margin-bottom: 24px;", type: "primary" }, label)),
+            React.createElement(Button, { icon: React.createElement(Plus, { color: "white" }), size: "small", sx: "width: 100%; margin-bottom: 24px;", type: "primary", onClick: () => {
+                    onOpenChange?.();
+                } }, label)),
         children));
 };
 InnerNav.Drawer = InnerNavDrawer;

package/package.json

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