@blocklet/pages-kit 0.4.120 → 0.4.122

package/lib/cjs/builtin/color-picker.js

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfigColorDialog = void 0;
+exports.BlockletThemeProvider = BlockletThemeProvider;
 exports.ColorItem = ColorItem;
 exports.ColorPicker = ColorPicker;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -41,39 +42,38 @@ const style_1 = require("../utils/style");
 const ColorPickerLib = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('react-best-gradient-color-picker'))));
 const HEIGHT = 400;
 const WIDTH = 270;
+const blockletTheme = (0, style_1.getBlockletTheme)();
+function BlockletThemeProvider({ children }) {
+    return (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: blockletTheme, children: children });
+}
 function ColorItem({ color, sx = {}, ...props }) {
     (0, style_1.isColorString)(color);
     const styleMap = {};
     if ((0, style_1.isGradient)(color)) {
         styleMap.backgroundImage = color;
     }
+    else if (color === 'transparent') {
+        styleMap.background = (0, style_1.getTransparentBackground)();
+    }
     else {
         styleMap.backgroundColor = color;
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-            ...sx,
-            width: '100%',
-            paddingBottom: '100%',
-            cursor: 'pointer',
-            transition: 'opacity 0.2s',
-            border: '1px solid #ccc',
-            borderRadius: 0.5,
-            '&:hover': {
-                opacity: 0.75,
-            },
-            ...styleMap,
-        }, ...props }));
-}
-function ColorPicker({ value, onChange, style = {}, sx = {} }) {
-    const refDialog = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorItem, { color: value, style: { width: '1rem', height: '1rem', padding: 0, marginRight: '0.25rem', ...style }, sx: { ...sx }, onClick: () => {
-                    refDialog.current?.open({ value });
-                } }), (0, jsx_runtime_1.jsx)(exports.ConfigColorDialog, { ref: refDialog, onSave: ({ value }, close) => {
-                    onChange(value);
-                    close();
-                } })] }));
+    return (
+    // @FIXME：临时方案，等 theme 功能定下来之后去掉
+    (0, jsx_runtime_1.jsx)(BlockletThemeProvider, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                width: '100%',
+                height: '100%',
+                cursor: 'pointer',
+                transition: 'opacity 0.2s',
+                border: '1px solid #ccc',
+                borderRadius: 0.5,
+                '&:hover': {
+                    opacity: 0.75,
+                },
+                ...sx,
+                ...styleMap,
+            }, ...props }) }));
 }
-exports.default = ColorPicker;
 exports.ConfigColorDialog = (0, react_1.forwardRef)(function ConfigColorDialog({ onSave, enableMuiPalette = true }, ref) {
     const state = (0, ahooks_1.useReactive)({
         value: '',
@@ -187,7 +187,7 @@ exports.ConfigColorDialog = (0, react_1.forwardRef)(function ConfigColorDialog({
                                                     selectedColor = 'rgba(0,0,0,0.7)';
                                                 }
                                             }
-                                            return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: item.colorKey, children: (0, jsx_runtime_1.jsx)(material_1.Box, { onClick: () => {
+                                            return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: item.colorKey, children: (0, jsx_runtime_1.jsx)(ColorItem, { color: item.colorValue, onClick: () => {
                                                         state.value = item.colorValue;
                                                         state.originalMuiKey = item.colorKey;
                                                     }, sx: {
@@ -206,7 +206,7 @@ exports.ConfigColorDialog = (0, react_1.forwardRef)(function ConfigColorDialog({
                                                         // 透明色时显示棋盘背景
                                                         ...(item.colorValue === 'transparent'
                                                             ? {
-                                                                background: 'repeating-conic-gradient(#CCCCCC 0% 25%, #FFFFFF 0% 50%) 50% / 10px 10px',
+                                                                background: (0, style_1.getTransparentBackground)(),
                                                             }
                                                             : {}),
                                                     }, children: state.originalMuiKey === item.colorKey && ((0, jsx_runtime_1.jsx)("i", { className: "i-mdi:check", style: {
@@ -222,3 +222,13 @@ exports.ConfigColorDialog = (0, react_1.forwardRef)(function ConfigColorDialog({
                                         state.originalMuiKey = null;
                                     }, hidePresets: true, hideAdvancedSliders: true, hideColorGuide: true, hideInputType: true }) }) })) })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: handleClose, children: t('common.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", size: "small", onClick: handleSave, children: t('maker.save') })] })] }));
 });
+function ColorPicker({ value, onChange, style = {}, sx = {} }) {
+    const refDialog = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorItem, { color: value || '', style: { width: '1rem', height: '1rem', padding: 0, marginRight: '0.25rem', ...style }, sx: { ...sx }, onClick: () => {
+                    refDialog.current?.open({ value });
+                } }), (0, jsx_runtime_1.jsx)(exports.ConfigColorDialog, { ref: refDialog, onSave: ({ value }, close) => {
+                    onChange(value);
+                    close();
+                } })] }));
+}
+exports.default = ColorPicker;

package/lib/cjs/builtin/markdown/markdown-renderer.js

@@ -74,7 +74,16 @@ function MarkdownRenderer(props) {
     const options = {
         codeOptions,
     };
-    return ((0, jsx_runtime_1.jsx)(StyledBox, { children: (0, jsx_runtime_1.jsx)(markdown_context_1.MarkdownProvider, { options: options, children: (0, jsx_runtime_1.jsx)(react_markdown_1.MarkdownHooks, { ...rest, remarkPlugins: [remark_gfm_1.default], rehypePlugins: [rehype_mermaid_1.default], components: {
+    return ((0, jsx_runtime_1.jsx)(StyledBox, { sx: {
+            '& h1': (theme) => ({ ...theme.typography.h1, marginBottom: '0.35em' }),
+            '& h2': (theme) => ({ ...theme.typography.h2, marginBottom: '0.35em' }),
+            '& h3': (theme) => ({ ...theme.typography.h3, marginBottom: '0.35em' }),
+            '& h4': (theme) => ({ ...theme.typography.h4, marginBottom: '0.35em' }),
+            '& h5': (theme) => ({ ...theme.typography.h5, marginBottom: '0.35em' }),
+            '& h6': (theme) => ({ ...theme.typography.h6, marginBottom: '0.35em' }),
+            '& p': (theme) => ({ ...theme.typography.body1, marginBottom: '0.35em' }),
+            '& li': (theme) => ({ ...theme.typography.body1, marginBottom: '0.35em' }),
+        }, children: (0, jsx_runtime_1.jsx)(markdown_context_1.MarkdownProvider, { options: options, children: (0, jsx_runtime_1.jsx)(react_markdown_1.MarkdownHooks, { ...rest, remarkPlugins: [remark_gfm_1.default], rehypePlugins: [rehype_mermaid_1.default], components: {
                     pre: MarkdownPre,
                     code: MarkdownCode,
                     table: MarkdownTable,
@@ -99,14 +108,14 @@ const StyledBox = (0, material_1.styled)(material_1.Box) `
   }
 
   li {
-    margin: 0;
+    margin: 0 0 0.35em 0;
     padding: 0;
   }
 
   li p {
     display: inline-block;
     vertical-align: top;
-    margin: 0;
+    margin: 0 0 0.35em 0;
     padding: 0;
   }
 

package/lib/cjs/contexts/color.js

@@ -2,14 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMuiColorPalette = useMuiColorPalette;
 exports.useColorConvert = useColorConvert;
-const styles_1 = require("@mui/material/styles");
+// import { useTheme } from '@mui/material/styles';
 const react_1 = require("react");
 const style_1 = require("../utils/style");
 /**
  * Hook 用于获取和操作 MUI 主题色
  */
 function useMuiColorPalette() {
-    const theme = (0, styles_1.useTheme)();
+    // @FIXME：临时方案，等 theme 功能定下来之后去掉
+    const theme = (0, style_1.getBlockletTheme)();
+    // const theme = useTheme();
     // 创建 MUI 色板预设及映射关系
     const muiPaletteColors = (0, react_1.useMemo)(() => {
         const colors = [];