@blocklet/editor 2.4.100 → 2.4.102

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

@@ -358,7 +358,7 @@ function CodeHeader({ title, icon, actions }) {
             p: 1.5,
             borderBottom: 1,
             borderColor: 'divider',
-            bgcolor: 'grey.50',
+            bgcolor: 'background.paper',
             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: '16px',

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

@@ -79,7 +79,7 @@ export default function Field({ name, type, default: defaultVal, required, depre
         const unsubscribe = highlightManager.subscribe(setHighlightedFieldId);
         return () => unsubscribe();
     }, []);
-    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: t('required') })), isDeprecated && (_jsx(Tag, { sx: {
+    const metaInfo = (_jsxs(_Fragment, { children: [type && _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: t('required') })), isDeprecated && (_jsx(Tag, { sx: {
                     color: 'warning.light',
                     background: ({ palette }) => alpha(palette.warning.light, 0.1),
                     fontWeight: 500,
@@ -130,5 +130,5 @@ export default function Field({ name, type, default: defaultVal, required, depre
             '& &:last-child': {
                 borderBottom: 'none',
             },
-        }, 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 }), desc && _jsx(Box, { sx: { color: 'text.secondary', mt: 2 }, children: desc }), renderChildren()] }));
+        }, children: [_jsxs(Bar, { children: [name && _jsx(Box, { sx: { color: 'primary.main', fontWeight: 500 }, children: name }), !isMobile && metaInfo] }), isMobile && _jsx(Bar, { sx: { mt: 1.25 }, children: metaInfo }), desc && _jsx(Box, { sx: { color: 'text.secondary', mt: 2 }, children: desc }), renderChildren()] }));
 }

package/lib/ext/PagesKitComponent/PagesKitComponentNode.d.ts

@@ -1,6 +1,6 @@
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
 import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
-import type { JSX } from 'react';
+import { type JSX } from 'react';
 import type { Properties } from './utils';
 export interface ComponentData {
     id: string;

package/lib/ext/PagesKitComponent/PagesKitComponentNode.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
 import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
-import { PagesKitComponentRenderer } from './PagesKitComponentRenderer';
+import { lazy, Suspense } from 'react';
+const LazyPagesKitComponentRenderer = lazy(() => import('./PagesKitComponentRenderer').then((mod) => ({ default: mod.PagesKitComponentRenderer })));
 function PagesKitComponent({ className, format, nodeKey, data, onPropertiesChange }) {
-    return (_jsx(BlockWithAlignableContents, { className: className, format: format, nodeKey: nodeKey, children: _jsx(PagesKitComponentRenderer, { id: data.id, name: data.name, properties: data.properties, onPropertiesChange: onPropertiesChange }) }));
+    return (_jsx(BlockWithAlignableContents, { className: className, format: format, nodeKey: nodeKey, children: _jsx(Suspense, { fallback: null, children: _jsx(LazyPagesKitComponentRenderer, { id: data.id, name: data.name, properties: data.properties, onPropertiesChange: onPropertiesChange }) }) }));
 }
 function convertPagesKitComponentElement(domNode) {
     const pagesKitComponentStr = domNode.getAttribute('data-lexical-pages-kit-component');

package/lib/main/nodes/MermaidNode.d.ts

@@ -1,6 +1,6 @@
 import type { DOMConversionMap, DOMExportOutput, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
 import { DecoratorNode } from 'lexical';
-import type { JSX } from 'react';
+import { type JSX } from 'react';
 export interface MermaidPayload {
     code: string;
     theme?: string;

package/lib/main/nodes/MermaidNode.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DecoratorNode } from 'lexical';
-import MermaidComponent from './MermaidComponent';
+import { lazy, Suspense } from 'react';
+const LazyMermaidComponent = lazy(() => import('./MermaidComponent'));
 function convertMermaidElement(domNode) {
     if (domNode && domNode.classList?.contains('mermaid')) {
         const code = domNode.textContent || '';
@@ -84,7 +85,7 @@ export class MermaidNode extends DecoratorNode {
         return false;
     }
     decorate() {
-        return _jsx(MermaidComponent, { code: this.__code, theme: this.__theme, mode: this.__mode });
+        return (_jsx(Suspense, { fallback: null, children: _jsx(LazyMermaidComponent, { code: this.__code, theme: this.__theme, mode: this.__mode }) }));
     }
 }
 export function $createMermaidNode({ code, theme, mode, key }) {

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

@@ -125,7 +125,7 @@ const StyledEditorWrapper = styled(Box) `
     background-color: ${({ theme }) => theme.palette.grey[100]} !important;
   }
   .PlaygroundEditorTheme__tableCellHeader {
-    background-color: ${({ theme }) => theme.palette.grey[50]} !important;
+    background-color: ${({ theme }) => theme.palette.background.paper} !important;
   }
 
   @container blocklet-editor (max-width: 1000px) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.4.100",
+  "version": "2.4.102",
   "main": "lib/index.js",
   "sideEffects": false,
   "publishConfig": {
@@ -25,11 +25,11 @@
     ]
   },
   "dependencies": {
-    "@blocklet/code-editor": "^0.5.16",
+    "@blocklet/code-editor": "^0.5.20",
     "@blocklet/embed": "^0.2.5",
     "@blocklet/js-sdk": "^1.16.51",
-    "@blocklet/pages-kit": "^0.6.66",
-    "@blocklet/pages-kit-runtime": "^0.6.66",
+    "@blocklet/pages-kit": "^0.6.72",
+    "@blocklet/pages-kit-runtime": "^0.6.72",
     "@excalidraw/excalidraw": "^0.18.0",
     "@iconify/iconify": "^3.1.1",
     "@iconify/icons-tabler": "^1.2.95",
@@ -73,7 +73,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "2.4.100"
+    "@blocklet/pdf": "2.4.102"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",