@blocklet/editor 2.4.14 → 2.4.15

package/lib/ext/SubpageListingPlugin/SubpageListingComponent.js

@@ -8,6 +8,7 @@ import { useRequest } from 'ahooks';
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
 import { getBlockletMountPointInfo } from '../utils';
 const discussKitMountPoint = getBlockletMountPointInfo('did-comments')?.mountPoint;
+const { enableDocFullWidthMode = true } = window.blocklet.preferences;
 const fetchSubpages = async ({ id, mode, locale }) => {
     try {
         const result = await fetch(joinURL(discussKitMountPoint, `/api/docs/${id}/subpages?${new URLSearchParams({ mode, locale })}`)).then((res) => res.json());
@@ -26,7 +27,7 @@ function Icon({ icon, sx }) {
     const mergedSx = [
         {
             flex: '0 0 auto',
-            fontSize: 44,
+            fontSize: 24,
             lineHeight: 1,
         },
         ...(Array.isArray(sx) ? sx : [sx]),
@@ -63,33 +64,38 @@ export default function SubpageListingComponent({ docPostId, mode, onModeChange,
                 const link = window.blocklet.pageGroup === 'doc'
                     ? joinURL(window.blocklet.prefix || '/', x.boardId, locale, x.slug)
                     : joinURL(discussKitMountPoint, '/docs', x.boardId, locale, x.slug);
-                return (_jsx(Box, { sx: { width: { xs: 1, lg: 1 / 2, xl: 1 / 3 }, p: 1 }, children: _jsxs(Box, { component: "a", href: link, sx: {
+                return (_jsx(Box, { sx: {
+                        boxSizing: 'border-box',
+                        width: { xs: 1, lg: 1 / 2, xl: enableDocFullWidthMode ? 1 / 3 : 1 / 2 },
+                        height: 120,
+                        p: 1,
+                    }, children: _jsxs(Box, { component: "a", href: link, sx: {
                             display: 'flex',
-                            flexDirection: 'column',
+                            alignItems: 'center',
                             gap: 1,
                             height: 1,
-                            p: 2,
+                            px: 3,
+                            py: 2.5,
                             color: 'inherit',
                             textDecoration: 'none',
                             border: 1,
-                            borderColor: 'grey.300',
-                            borderRadius: '4px',
-                            boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+                            borderColor: 'divider',
+                            borderRadius: 2,
                             cursor: 'pointer',
                             ':hover': {
-                                borderColor: 'grey.400',
-                                // boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+                                borderColor: 'primary.main',
                                 boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
                             },
-                        }, children: [_jsxs(Box, { sx: {}, children: [_jsx(Icon, { icon: x.icon }), _jsxs(Box, { sx: { mt: 1.5 }, children: [_jsx(Typography, { variant: "h4", children: x.title }), _jsx(Typography, { variant: "body2", sx: {
-                                                    mt: 1,
-                                                    color: 'text.secondary',
-                                                    overflow: 'hidden',
-                                                    textOverflow: 'ellipsis',
-                                                    wordBreak: 'break-word',
-                                                    display: '-webkit-box',
-                                                    WebkitLineClamp: 3,
-                                                    WebkitBoxOrient: 'vertical',
-                                                }, children: x.excerpt })] })] }), _jsx(Box, { sx: { mt: 'auto' }, children: _jsx(Typography, { variant: "body2", sx: { mt: 2, fontSize: 13, color: 'text.secondary' }, children: new Date(x.updatedAt).toLocaleDateString() }) })] }) }, x.id));
+                        }, children: [_jsx(Icon, { icon: x.icon }), _jsxs(Box, { sx: { ml: 1 }, children: [_jsx(Typography, { variant: "body2", component: "h2", sx: { fontWeight: 'bold' }, children: x.title }), x.excerpt && (_jsx(Typography, { variant: "body2", sx: {
+                                            mt: 1,
+                                            fontSize: 14,
+                                            color: 'text.secondary',
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis',
+                                            wordBreak: 'break-word',
+                                            display: '-webkit-box',
+                                            WebkitLineClamp: 2,
+                                            WebkitBoxOrient: 'vertical',
+                                        }, children: x.excerpt }))] })] }) }, x.id));
             })] }));
 }

package/lib/main/themes/customTheme.js

@@ -11,7 +11,18 @@ const createCustomTheme = (theme) => {
     `);
     const paragraph = css(
     // use default theme's paragraph style
-    defaultTheme.paragraph, 
+    defaultTheme.paragraph, `
+      margin-bottom: 20px;
+      &:has(img) {
+        display: flex;
+        margin: 32px 0;
+        line-height: 1;
+        div {
+          display: flex;
+        }
+      }
+      line-height: 1.75;
+    `, 
     // 兼容旧 table 水平滚动条问题 (与 useResponsiveTable 配合使用)
     `
       &:has(table) {
@@ -68,7 +79,7 @@ const createCustomTheme = (theme) => {
     const link = css(`
       color: inherit;
       text-decoration: none;
-      border-bottom: 1px solid ${palette.primary.light};
+      border-bottom: 1px solid ${palette.primary.main};
       &:hover {
         border-bottom-width: 2px;
       }
@@ -99,12 +110,12 @@ const createCustomTheme = (theme) => {
     const textCode = css(theme.typography.body1, {
         fontSize: '.875em',
         fontWeight: 500,
-        borderRadius: '.375rem',
-        border: `1px solid ${palette.grey[300]}`,
+        borderRadius: '.25rem',
+        border: `1px solid ${palette.grey[200]}`,
         padding: '1px .375rem',
         fontFamily: 'Menlo, Consolas, Monaco, monospace',
         fontVariantLigatures: 'none',
-        backgroundColor: palette.grey[100],
+        backgroundColor: palette.grey[50],
         ...(palette.mode === 'dark' && { color: palette.grey[800] }),
     });
     const olCommon = {
@@ -228,7 +239,8 @@ const createCustomTheme = (theme) => {
     color: #fff;
     font-family: Menlo, Consolas, Monaco, monospace;
     display: block;
-    padding: 16px;
+    // padding: 16px;
+    padding: 16px 16px 16px 52px;
     line-height: 1.53;
     font-size: 13px;
     margin: 0;
@@ -242,7 +254,17 @@ const createCustomTheme = (theme) => {
     border: 1px solid #27272;
 
     &:before {
-      display: none;
+      content: attr(data-gutter);
+      position: absolute;
+      background-color: #18181b;
+      left: 0;
+      top: 0;
+      // border-right: 1px solid #ccc;
+      padding: 16px 8px;
+      color: #777;
+      white-space: pre-wrap;
+      text-align: right;
+      min-width: 25px;
     }
   `;
     /**

package/package.json

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