@blocklet/editor 2.4.61 → 2.4.63

package/lib/ext/CustomComponent/components/Card.js

@@ -37,11 +37,12 @@ export default function Card({ title, body, image, icon, href, horizontal = fals
                 }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', flex: 1, gap: 1 }, children: [_jsxs(Box, { sx: {
                                 display: 'flex',
                                 flexDirection: 'column',
-                                gap: 1,
+                                gap: horizontal ? 1 : 2,
                                 ...(horizontal && { flexDirection: 'row', alignItems: 'center' }),
                             }, children: [renderIcon(), _jsx(Typography, { variant: "h5", component: "h4", sx: {
                                         fontWeight: 600,
                                         color: 'text.primary',
+                                        lineHeight: 1,
                                     }, children: title })] }), body && (_jsx(Typography, { variant: "body2", sx: {
                                 color: 'text.secondary',
                             }, children: body })), isLink && cta && (_jsx(Box, { sx: { display: 'flex', alignItems: 'center', marginTop: 'auto' }, children: _jsxs(Typography, { variant: "body2", sx: {

package/lib/main/nodes/ImageComponent.js

@@ -330,7 +330,7 @@ const ImageContainer = ({ success, loading, error, confirmText, uploadImage, pla
                 p: 1,
                 border: 1,
                 borderColor: 'divider',
-                borderRadius: 1,
+                borderRadius: 2,
             }),
         }, 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] }));

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

@@ -1,5 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, alpha, styled, GlobalStyles, useTheme } from '@mui/material';
+const getShapeRadiusValue = (theme) => {
+    if (typeof theme.shape.borderRadius === 'number') {
+        return theme.shape.borderRadius;
+    }
+    return parseInt(theme.shape.borderRadius, 10);
+};
 const StyledEditorWrapper = styled(Box) `
   position: relative;
   color: ${({ theme }) => alpha(theme.palette.text.primary, 0.8)};
@@ -41,7 +47,7 @@ const StyledEditorWrapper = styled(Box) `
     // 增大最外层 list item 的 marginLeft, https://github.com/blocklet/discuss-kit/issues/2123
     > ol > li,
     > ul > li {
-      margin-left: 32px;
+      margin-left: 24px;
     }
 
     // collapsible dark-mode
@@ -71,21 +77,41 @@ const StyledEditorWrapper = styled(Box) `
     border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
     border-left: 0;
   }
-  .PlaygroundEditorTheme__table tr:nth-of-type(1) th {
-    border-top: 1px solid ${({ theme }) => theme.palette.divider};
+  .PlaygroundEditorTheme__table tr:nth-of-type(1) {
+    th,
+    td {
+      border-top: 1px solid ${({ theme }) => theme.palette.divider};
+    }
   }
-  .PlaygroundEditorTheme__table tr th:first-child {
-    border-left: 1px solid ${({ theme }) => theme.palette.divider};
+  .PlaygroundEditorTheme__table tr {
+    th:first-child,
+    td:first-child {
+      border-left: 1px solid ${({ theme }) => theme.palette.divider};
+    }
   }
-
-  .PlaygroundEditorTheme__table tr:nth-of-type(1) th:first-child {
-    border-top-left-radius: ${({ theme }) => theme.shape.borderRadius}px;
+  .PlaygroundEditorTheme__table tr:nth-of-type(1) {
+    th:first-child,
+    td:first-child {
+      border-top-left-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    }
   }
-  .PlaygroundEditorTheme__table tr:nth-of-type(1) th:last-child {
-    border-top-right-radius: ${({ theme }) => theme.shape.borderRadius}px;
+  .PlaygroundEditorTheme__table tr:nth-of-type(1) {
+    th:last-child,
+    td:last-child {
+      border-top-right-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    }
   }
-  .PlaygroundEditorTheme__table tr:last-child th:first-child {
-    border-bottom-left-radius: ${({ theme }) => theme.shape.borderRadius}px;
+  .PlaygroundEditorTheme__table tr:last-child {
+    th:first-child,
+    td:first-child {
+      border-bottom-left-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    }
+  }
+  .PlaygroundEditorTheme__table tr:last-child {
+    th:first-child,
+    td:first-child {
+      border-bottom-left-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    }
   }
   .PlaygroundEditorTheme__table tr:last-child td:last-child {
     border-bottom-right-radius: ${({ theme }) => theme.shape.borderRadius}px;
@@ -103,23 +129,29 @@ const StyledEditorWrapper = styled(Box) `
     background-color: ${({ theme }) => theme.palette.grey[50]} !important;
   }
 
-  @container blocklet-editor (max-width: 700px) {
+  @container blocklet-editor (max-width: 1000px) {
     .be-editable img,
     .be-editable *:has(img) {
       width: 100% !important;
     }
   }
 
+  /* img/video 圆角样式 */
   .be-editable div:has(> video) {
     padding: 8px;
     border: 1px solid ${({ theme }) => theme.palette.divider};
-    border-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    border-radius: ${({ theme }) => getShapeRadiusValue(theme) * 2}px;
     overflow: hidden;
     line-height: 1;
   }
 
-  .be-editable video {
-    border-radius: 4px;
+  .be-editable video,
+  .be-editable img {
+    border-radius: 8px;
+  }
+
+  .be-editable p > table {
+    margin: 0;
   }
 `;
 export function StyledEditorContent({ ref = undefined, children, ...rest }) {

package/lib/main/themes/customTheme.js

@@ -147,7 +147,9 @@ const createCustomTheme = (theme) => {
       margin-top: 0.5em;
       margin-bottom: 0.5em;
       padding-left: 0.25em;
-    `, theme.typography.body1, { lineHeight: 1.5 });
+    `, theme.typography.body1
+    // { lineHeight: 1.5 }
+    );
     const listItemChecked = css `
     margin-left: 0 !important;
     margin-right: 8px;
@@ -201,12 +203,6 @@ const createCustomTheme = (theme) => {
     outline: 2px solid ${palette.primary.light};
   `;
     const image = css `
-    img {
-      .be-content:not(.editable) & {
-        border-radius: 0.375rem;
-      }
-    }
-
     .image-caption-container {
       // fix #924
       .ImageNode__contentEditable {
@@ -241,8 +237,8 @@ const createCustomTheme = (theme) => {
     line-height: 1.53;
     font-size: 13px;
     margin: 0;
-    margin-top: 8px;
-    margin-bottom: 8px;
+    margin-top: 20px;
+    margin-bottom: 32px;
     tab-size: 2;
     /* white-space: pre; */
     overflow-x: auto;

package/package.json

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