@blocklet/editor 2.4.41 → 2.4.42

package/lib/main/nodes/ImageComponent.js

@@ -246,7 +246,7 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
         }
     }, [src, file, confirmText]);
     const skeleton = sizeMode === 'original' ? null : (_jsx(Skeleton, { variant: "rectangular", animation: "wave", sx: { width: 300, height: 200, borderRadius: 1 } }));
-    const placeholder = objectUrl ? (_jsx(ImageContainer, { draggable: draggable, success: !!src, loading: loading, error: error, confirmText: confirmText, uploadImage: uploadImage, placeholder: objectUrl, placeholderProps: { style: { width, height, maxWidth } } })) : (skeleton);
+    const placeholder = objectUrl ? (_jsx(ImageContainer, { draggable: draggable, success: !!src, loading: loading, error: error, confirmText: confirmText, uploadImage: uploadImage, placeholder: objectUrl, placeholderProps: { style: { width, height, maxWidth } }, showBorder: !frame })) : (skeleton);
     const imageDisplayWidth = useImageDisplayWidth({ src: src || objectUrl, sizeMode, width });
     const { zoomOpened, openedImageRef } = useMediumZoom(imageRef, { enabled: !frame });
     const renderImageAnnotationView = () => {
@@ -304,7 +304,7 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
         }
         return (_jsxs(_Fragment, { children: [_jsx(LazyImage, { className: isFocused && editor.isEditable() ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}` : null, src: imgSrc, altText: altText, imageRef: imageRef, width: imageDisplayWidth, height: height }), renderImageAnnotationView()] }));
     };
-    return (_jsx(Suspense, { fallback: placeholder, children: _jsxs(_Fragment, { children: [src ? (_jsxs(ImageContainer, { draggable: draggable, children: [renderImage(src), editor.isEditable() && (_jsx(ImageAnnotation, { editing: markerEditing, setEditing: setMarkerEditing, imageRef: imageRef, markerState: markerState, onChange: setMarkerState }))] })) : (placeholder), showCaption && (_jsx("div", { className: "image-caption-container", children: _jsxs(LexicalNestedComposer, { initialEditor: caption, children: [_jsx(AutoFocusPlugin, {}), _jsx(LinkPlugin, {}), _jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "ImageNode__contentEditable" }), placeholder: editor.isEditable() ? (_jsx(Placeholder, { className: "ImageNode__placeholder", children: "Enter a caption..." })) : null, ErrorBoundary: LexicalErrorBoundary })] }) })), resizable && $isNodeSelection(selection) && isFocused && (_jsxs(_Fragment, { children: [_jsx(ImageResizer, { showCaption: showCaption, setShowCaption: setShowCaption, editor: editor, buttonRef: buttonRef, imageRef: imageFrameRef.current ? imageFrameRef : imageRef, 
+    return (_jsx(Suspense, { fallback: placeholder, children: _jsxs(_Fragment, { children: [src ? (_jsxs(ImageContainer, { draggable: draggable, showBorder: !frame, children: [renderImage(src), editor.isEditable() && (_jsx(ImageAnnotation, { editing: markerEditing, setEditing: setMarkerEditing, imageRef: imageRef, markerState: markerState, onChange: setMarkerState }))] })) : (placeholder), showCaption && (_jsx("div", { className: "image-caption-container", children: _jsxs(LexicalNestedComposer, { initialEditor: caption, children: [_jsx(AutoFocusPlugin, {}), _jsx(LinkPlugin, {}), _jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "ImageNode__contentEditable" }), placeholder: editor.isEditable() ? (_jsx(Placeholder, { className: "ImageNode__placeholder", children: "Enter a caption..." })) : null, ErrorBoundary: LexicalErrorBoundary })] }) })), resizable && $isNodeSelection(selection) && isFocused && (_jsxs(_Fragment, { children: [_jsx(ImageResizer, { showCaption: showCaption, setShowCaption: setShowCaption, editor: editor, buttonRef: buttonRef, imageRef: imageFrameRef.current ? imageFrameRef : imageRef, 
                             // maxWidth={maxWidth}
                             onResizeStart: onResizeStart, onResizeEnd: onResizeEnd, captionsEnabled: false }), _jsxs(ImageEnhancer, { frame: frame, sizeMode: width === 'inherit' ? sizeMode || 'best-fit' : undefined, onSizeModeChange: setSizeMode, onFrameChange: setFrame, children: [_jsx(Button, { disabled: !!isDeviceFrameUsed, onClick: () => setMarkerEditing(true), variant: "outlined", size: "small", sx: {
                                         minWidth: 36,
@@ -322,14 +322,19 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
                                         '.MuiButton-icon': { m: 0 },
                                     }, startIcon: showCaption ? (_jsx("i", { className: "iconify", "data-icon": "tabler:heading-off" })) : (_jsx("i", { className: "iconify", "data-icon": "tabler:text-caption" })), title: showCaption ? 'Remove Caption' : 'Add Caption' }))] })] }))] }) }));
 }
-const ImageContainer = ({ success, loading, error, confirmText, uploadImage, placeholder, placeholderProps, ...props }) => {
+const ImageContainer = ({ success, loading, error, confirmText, uploadImage, placeholder, placeholderProps, showBorder = true, ...props }) => {
     const [showMask, setShowMask] = useState(false);
-    return (_jsxs(ImageContainerRoot, { ...props, children: [props.children ||
+    return (_jsxs(Box, { sx: {
+            position: 'relative',
+            ...(showBorder && {
+                p: 2,
+                border: 1,
+                borderColor: 'divider',
+                borderRadius: 1,
+            }),
+        }, children: [props.children ||
                 (!!placeholder && _jsx("img", { alt: "", ...placeholderProps, onLoad: () => setShowMask(true), src: placeholder })), !showMask || success ? null : loading ? (_jsx(Mask, { children: _jsx(LinearProgress, {}) })) : error ? (_jsx(Mask, { children: _jsx(Alert, { severity: "error", action: _jsx(Button, { size: "small", onClick: uploadImage, children: "Retry" }), children: error }) })) : confirmText ? (_jsx(Mask, { children: _jsx(Alert, { severity: "warning", action: _jsx(Button, { size: "small", onClick: uploadImage, children: "Upload" }), children: confirmText }) })) : null] }));
 };
-const ImageContainerRoot = styled.div `
-  position: relative;
-`;
 const Mask = styled.div `
   position: absolute;
   left: 0;

package/lib/main/plugins/CollapsiblePlugin/Collapsible.css

@@ -16,7 +16,7 @@
 
 .Collapsible__title {
   cursor: pointer;
-  padding: 5px 5px 5px 20px;
+  padding: 5px 5px 5px 24px;
   position: relative;
   font-weight: bold;
   list-style: none;
@@ -40,7 +40,7 @@
   display: block;
   content: '';
   position: absolute;
-  left: 7px;
+  left: 12px;
   top: 50%;
   transform: translateY(-50%);
 }
@@ -51,8 +51,8 @@
   border-top-color: #000;
 }
 
-.Collapsible__content {
-  padding: 0 5px 5px 20px;
+.Collapsible__container[open] > .Collapsible__content {
+  padding: 0 5px 5px 24px;
 }
 
 .Collapsible__collapsed .Collapsible__content {

package/lib/main/styled-editor-content.js

@@ -43,6 +43,21 @@ const StyledEditorWrapper = styled(Box) `
     > ul > li {
       margin-left: 32px;
     }
+
+    // collapsible dark-mode
+    summary.Collapsible__title:before {
+      border-left-color: ${({ theme }) => theme.palette.text.primary} !important;
+    }
+    .Collapsible__container[open] > .Collapsible__title:before {
+      border-left-color: transparent !important;
+      border-width: 6px 4px 0 4px;
+      border-top-color: ${({ theme }) => theme.palette.text.primary} !important;
+    }
+    .Collapsible__container {
+      background: ${({ theme }) => theme.palette.grey[50]};
+      border: 1px solid ${({ theme }) => theme.palette.divider};
+      border-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    }
   }
 
   /* fix: 自定义样式引起的 cell 高度偏大的问题 */
@@ -53,6 +68,13 @@ const StyledEditorWrapper = styled(Box) `
   .PlaygroundEditorTheme__tableRowStriping tr:nth-child(even) {
     background-color: ${({ theme }) => theme.palette.grey[100]} !important;
   }
+
+  .PlaygroundEditorTheme__tableCell {
+    border: 1px solid ${({ theme }) => theme.palette.divider} !important;
+  }
+  .PlaygroundEditorTheme__tableCellHeader {
+    background-color: ${({ theme }) => theme.palette.grey[50]} !important;
+  }
 `;
 export function StyledEditorContent({ ref = undefined, children, ...rest }) {
     return (_jsxs(StyledEditorWrapper, { ref: ref, ...rest, children: [_jsx(EditorGlobalStyle, {}), children] }));

package/lib/main/themes/customTheme.js

@@ -30,8 +30,8 @@ const createCustomTheme = (theme) => {
     `, theme.typography.body1, noMarginTopStyle);
     const quote = css(`
       margin: 1.6em 0;
-      border-left-color: rgb(206, 208, 212);
-      border-left-width: 4px;
+      border-left-color: ${palette.grey[200]};
+      border-left-width: 2px;
       border-left-style: solid;
       padding-left: 1.5rem;
       font-style: italic;
@@ -262,6 +262,12 @@ const createCustomTheme = (theme) => {
       text-align: right;
       min-width: 25px;
     }
+    &[data-gutter='1'] {
+      padding: 12px 16px !important;
+    }
+    &[data-gutter='1']:before {
+      display: none;
+    }
   `;
     /**
      * 基于 mui theme 的自定义主题

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.4.41",
+  "version": "2.4.42",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -69,7 +69,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "2.4.41"
+    "@blocklet/pdf": "2.4.42"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",