@blocklet/editor 2.4.89 → 2.4.91

package/lib/blocklet-editor-viewer.d.ts

@@ -0,0 +1,4 @@
+import { EditorViewerProps } from './main/viewer/types';
+export declare const BlockletEditorViewer: import("react-lazy-with-preload").PreloadableComponent<typeof import("./main/viewer").BlockletEditorViewer>;
+export declare const useBlockletEditorViewerLoaded: () => boolean;
+export type { EditorViewerProps };

package/lib/blocklet-editor-viewer.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+import { lazyWithPreload } from 'react-lazy-with-preload';
+export const BlockletEditorViewer = lazyWithPreload(() => import('./main/viewer').then((m) => ({ default: m.BlockletEditorViewer })));
+export const useBlockletEditorViewerLoaded = () => {
+    const [loaded, setLoaded] = useState(false);
+    useEffect(() => {
+        BlockletEditorViewer.preload().then(() => {
+            setLoaded(true);
+        });
+    }, []);
+    return loaded;
+};

package/lib/blocklet-editor.d.ts

@@ -0,0 +1,2 @@
+export declare const BlockletEditor: import("react-lazy-with-preload").PreloadableComponent<typeof import("./main").default>;
+export declare const useBlockletEditorLoaded: () => boolean;

package/lib/blocklet-editor.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+import { lazyWithPreload } from 'react-lazy-with-preload';
+export const BlockletEditor = lazyWithPreload(() => import('./main'));
+export const useBlockletEditorLoaded = () => {
+    const [loaded, setLoaded] = useState(false);
+    useEffect(() => {
+        BlockletEditor.preload().then(() => {
+            setLoaded(true);
+        });
+    }, []);
+    return loaded;
+};

package/lib/ext/CustomComponent/CustomComponentNode.js

@@ -70,6 +70,7 @@ export class CustomComponentNode extends DecoratorBlockNode {
             'x-cards': () => ({ conversion: convertCustomComponentElement, priority: 1 }),
             'x-code-group': () => ({ conversion: convertCustomComponentElement, priority: 1 }),
             'x-steps': () => ({ conversion: convertCustomComponentElement, priority: 1 }),
+            'x-field': () => ({ conversion: convertCustomComponentElement, priority: 1 }),
         };
     }
     static importJSON(serializedNode) {

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

@@ -358,7 +358,7 @@ function CodeHeader({ title, icon, actions }) {
             p: 1.5,
             borderBottom: 1,
             borderColor: 'divider',
-            bgcolor: 'background.paper',
+            bgcolor: 'grey.50',
             borderRadius: '8px 8px 0 0',
         }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flex: 1 }, children: [icon && (_jsx(Box, { component: Icon, icon: icon, sx: {
                             fontSize: '24px',
@@ -432,6 +432,7 @@ const XCode = styled('div')(({ theme }) => ({
     pre: {
         margin: 0,
         borderRadius: 0,
+        background: 'transparent !important',
         code: {
             margin: 0,
             border: 0,

package/lib/ext/CustomComponent/components/Field.d.ts

@@ -0,0 +1,9 @@
+export interface FieldProps {
+    name: string;
+    type: string;
+    default?: string;
+    required?: 'false' | 'true';
+    deprecated?: 'false' | 'true';
+    body?: string;
+}
+export default function Field({ name, type, default: defaultVal, required, deprecated, body }: FieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Stack, Box, styled, alpha } from '@mui/material';
+import useMobile from '../../../main/hooks/use-mobile';
+const Tag = styled(Box)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadius * 0.75,
+    padding: theme.spacing(0.25, 1),
+    fontSize: '14px',
+}));
+const Bar = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    lineHeight: '1.25em',
+    flexWrap: 'wrap',
+    gap: theme.spacing(1.25),
+}));
+export default function Field({ name, type, default: defaultVal, required, deprecated, body }) {
+    const isMobile = useMobile();
+    const isRequired = required === 'true';
+    const isDeprecated = deprecated === 'true';
+    const metaInfo = (_jsxs(_Fragment, { children: [_jsx(Tag, { sx: { backgroundColor: ({ palette }) => alpha(palette.grey[100], 0.6) }, children: type }), isRequired && (_jsx(Tag, { sx: { color: 'error.main', background: ({ palette }) => alpha(palette.error.main, 0.1), fontWeight: 500 }, children: "required" })), isDeprecated && (_jsx(Tag, { sx: {
+                    color: 'warning.light',
+                    background: ({ palette }) => alpha(palette.warning.light, 0.1),
+                    fontWeight: 500,
+                }, children: "deprecated" })), defaultVal && (_jsxs(Tag, { sx: { backgroundColor: ({ palette }) => alpha(palette.grey[100], 0.6) }, children: [_jsx(Box, { component: "span", sx: { color: 'text.secondary', mr: 0.5 }, children: "default:" }), defaultVal] }))] }));
+    return (_jsxs(Stack, { className: "x-param-field", sx: {
+            borderBottom: '1px solid',
+            borderColor: 'divider',
+            pt: 1.25,
+            pb: 2.5,
+            my: 1.25,
+        }, children: [_jsxs(Bar, { children: [_jsx(Box, { sx: { color: 'primary.main', fontWeight: 500 }, children: name }), !isMobile && metaInfo] }), isMobile && _jsx(Bar, { sx: { mt: 1.25 }, children: metaInfo }), body && _jsx(Box, { sx: { color: 'text.secondary', mt: 2 }, children: body })] }));
+}

package/lib/ext/CustomComponent/components/index.d.ts

@@ -1,9 +1,11 @@
 import Card from './Card';
 import Cards from './Cards';
 import Code from './Code';
+import Field from './Field';
 declare const components: {
     code: typeof Code;
     card: typeof Card;
     cards: typeof Cards;
+    field: typeof Field;
 };
 export default components;

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

@@ -1,9 +1,11 @@
 import Card from './Card';
 import Cards from './Cards';
 import Code from './Code';
+import Field from './Field';
 const components = {
     code: Code,
     card: Card,
     cards: Cards,
+    field: Field,
 };
 export default components;

package/lib/ext/PagesKitComponent/PagesKitComponentRenderer.js

@@ -7,14 +7,14 @@ import { useEffect, useMemo, useState, lazy, Suspense } from 'react';
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
 import SplitPane, { Pane } from 'split-pane-react';
 import 'split-pane-react/esm/themes/default.css';
-import { CustomComponentRenderer, customComponentStates } from '@blocklet/pages-kit/components';
-// @ts-ignore
+import { customComponentStates } from '@blocklet/pages-kit/components';
 import { translations } from '@blocklet/pages-kit-runtime/locales';
 import { LocaleProvider } from '@arcblock/ux/lib/Locale/context';
 import mapValues from 'lodash/mapValues';
 import { isBlockletRunning } from '../utils';
 import { mode, getLocalizedValue } from './utils';
 import { useContentLocale } from '../ContentLocale';
+const CustomComponentRenderer = lazy(() => import('@blocklet/pages-kit/components').then((mod) => ({ default: mod.CustomComponentRenderer })));
 const ParametersConfigLazy = lazy(() => import('@blocklet/pages-kit-runtime/components').then((mod) => ({
     // @ts-ignore
     default: mod.ParametersConfig,

package/lib/index.d.ts

@@ -1,8 +1,5 @@
-import '@iconify/iconify';
-import './main/index.css';
 import BlockletEditor from './main';
 export default BlockletEditor;
 export type { BlockletEditorProps } from './main';
 export * from './config';
 export * from './main/markdown-to-lexical';
-export type { EditorState } from 'lexical';

package/lib/index.js

@@ -1,6 +1,6 @@
-import '@iconify/iconify';
-import './main/index.css';
 import BlockletEditor from './main';
+// @deprecated
+// 建议使用 src/blocklet-editor.ts 代替
 export default BlockletEditor;
 export * from './config';
 export * from './main/markdown-to-lexical';

package/lib/main/editor-root.d.ts

@@ -0,0 +1,2 @@
+import { Box } from '@mui/material';
+export declare const EditorRoot: typeof Box;

package/lib/main/editor-root.js

@@ -0,0 +1,46 @@
+import { Box, styled } from '@mui/material';
+export const EditorRoot = styled(Box)(({ theme }) => {
+    const { palette } = theme;
+    return {
+        container: 'blocklet-editor / inline-size',
+        margin: '0 auto',
+        borderRadius: '4px',
+        position: 'relative',
+        lineHeight: '1.7',
+        fontWeight: '400',
+        textAlign: 'left',
+        // mui-*
+        '--mui-palette-grey-50': palette.grey[50],
+        '--mui-palette-grey-200': palette.grey[200],
+        '--mui-palette-background-paper': palette.background.paper,
+        '--mui-palette-divider': palette.divider,
+        '--mui-palette-primary-main': palette.primary.main,
+        '--mui-palette-primary-light': palette.primary.light,
+        '--mui-palette-text-primary': palette.text.primary,
+        '--mui-palette-text-secondary': palette.text.secondary,
+        // lexical-*
+        '--lexical-text-code': 'inherit',
+        // lexical-code-*
+        '--lexical-code-comment': '#1e8449',
+        '--lexical-code-punctuation': '#2c3e50',
+        '--lexical-code-property': '#e67e22',
+        '--lexical-code-selector': '#c0392b',
+        '--lexical-code-operator': '#8e44ad',
+        '--lexical-code-attr': '#2980b9',
+        '--lexical-code-variable': '#27ae60',
+        '--lexical-code-function': '#f39c12',
+        // dark mode
+        '&[data-mode="dark"]': {
+            '--lexical-text-code': palette.grey[800],
+            // lexical-code-*
+            '--lexical-code-comment': '#6a9955',
+            '--lexical-code-punctuation': '#d4d4d4',
+            '--lexical-code-property': '#9cdcfe',
+            '--lexical-code-selector': '#d7ba7d',
+            '--lexical-code-operator': '#d4d4d4',
+            '--lexical-code-attr': '#9cdcfe',
+            '--lexical-code-variable': '#9cdcfe',
+            '--lexical-code-function': '#dcdcaa',
+        },
+    };
+});

package/lib/main/hooks/use-mobile.d.ts

@@ -0,0 +1,4 @@
+import { type Breakpoint } from '@mui/material/styles';
+export default function useMobile({ key }?: {
+    key: Breakpoint | number;
+}): boolean;

package/lib/main/hooks/use-mobile.js

@@ -0,0 +1,6 @@
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+export default function useMobile({ key } = { key: 'md' }) {
+    const theme = useTheme();
+    return useMediaQuery(theme.breakpoints.down(key));
+}