@blocklet/editor 2.4.88 → 2.4.90

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/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));
+}

package/lib/main/index.js

@@ -7,7 +7,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  */
 import { cx } from '@emotion/css';
-import styled from '@emotion/styled';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useCallback, useEffect, useRef } from 'react';
@@ -17,6 +16,7 @@ import { SettingsContext } from './context/SettingsContext';
 import { SharedAutocompleteContext } from './context/SharedAutocompleteContext';
 import { SharedHistoryContext } from './context/SharedHistoryContext';
 import Editor from './editor';
+import { EditorRoot } from './editor-root';
 import PlaygroundNodes from './nodes/PlaygroundNodes';
 import { TableContext } from './plugins/TablePlugin';
 import { useCustomTheme } from './themes/customTheme';
@@ -34,9 +34,10 @@ export default function BlockletEditor({ editorState, nodes = PlaygroundNodes, e
         },
         theme,
     };
-    return (_jsx(SettingsContext, { children: _jsx(SharedHistoryContext, { children: _jsx(SharedAutocompleteContext, { children: _jsx(TableContext, { children: _jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsx(EditorShell, { ...props, editable: editable }) }, muiTheme.palette.mode) }) }) }) }));
+    return (_jsx(SettingsContext, { children: _jsx(SharedHistoryContext, { children: _jsx(SharedAutocompleteContext, { children: _jsx(TableContext, { children: _jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsx(EditorShell, { ...props, editable: editable }) }) }) }) }) }));
 }
 function EditorShell({ placeholder, children, prepend, editable, onChange, autoFocus, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, ...props }) {
+    const muiTheme = useTheme();
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
         editor.setEditable(editable ?? true);
@@ -47,14 +48,5 @@ function EditorShell({ placeholder, children, prepend, editable, onChange, autoF
             editor.focus();
         }
     }, []);
-    return (_jsx(EditorRoot, { ...props, className: cx(props.className, 'be-shell'), ref: shellRef, onClick: onShellClick, children: _jsx(Editor, { onChange: onChange, placeholder: placeholder, autoFocus: autoFocus, showToolbar: showToolbar, editorRef: editorRef, onReady: onReady, enableHeadingsIdPlugin: enableHeadingsIdPlugin, prepend: prepend, children: children }) }));
+    return (_jsx(EditorRoot, { ...props, className: cx(props.className, 'be-shell'), ref: shellRef, "data-mode": muiTheme.palette.mode, onClick: onShellClick, children: _jsx(Editor, { onChange: onChange, placeholder: placeholder, autoFocus: autoFocus, showToolbar: showToolbar, editorRef: editorRef, onReady: onReady, enableHeadingsIdPlugin: enableHeadingsIdPlugin, prepend: prepend, children: children }) }));
 }
-const EditorRoot = styled.div `
-  container: blocklet-editor / inline-size;
-  margin: 0 auto;
-  border-radius: 4px;
-  position: relative;
-  line-height: 1.7;
-  font-weight: 400;
-  text-align: left;
-`;

package/lib/main/markdown-editor/index.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '@emotion/css';
-import styled from '@emotion/styled';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useCallback, useEffect, useRef } from 'react';
 import { $convertFromMarkdownString } from '@lexical/markdown';
 import Editor from './editor';
+import { EditorRoot } from '../editor-root';
 import nodes from './nodes';
 import { useCustomTheme } from '../themes/customTheme';
 import { MarkdownEditorThemeProvider } from './theme';
@@ -40,11 +40,3 @@ function EditorShell({ placeholder, children, editable, onChange, autoFocus, sho
     }, []);
     return (_jsx(EditorRoot, { ...props, className: cx(props.className, 'be-shell'), ref: shellRef, onClick: onShellClick, children: _jsx(Editor, { onChange: onChange, placeholder: placeholder, autoFocus: autoFocus, showToolbar: showToolbar, editorRef: editorRef, onReady: onReady, enableHeadingsIdPlugin: enableHeadingsIdPlugin, mediaUrlPrefix: mediaUrlPrefix, children: children }) }));
 }
-const EditorRoot = styled.div `
-  margin: 0 auto;
-  border-radius: 4px;
-  position: relative;
-  line-height: 1.7;
-  font-weight: 400;
-  text-align: left;
-`;

package/lib/main/themes/code-highlight/index.d.ts

@@ -1,35 +1,4 @@
-export declare const codeHighlightDark: {
-    atrule: string;
-    attr: string;
-    boolean: string;
-    builtin: string;
-    cdata: string;
-    char: string;
-    class: string;
-    comment: string;
-    constant: string;
-    deleted: string;
-    doctype: string;
-    entity: string;
-    function: string;
-    important: string;
-    inserted: string;
-    keyword: string;
-    namespace: string;
-    number: string;
-    operator: string;
-    prolog: string;
-    property: string;
-    punctuation: string;
-    regex: string;
-    selector: string;
-    string: string;
-    symbol: string;
-    tag: string;
-    url: string;
-    variable: string;
-};
-export declare const codeHighlightLight: {
+declare const codeHighlight: {
     atrule: string;
     attr: string;
     boolean: string;
@@ -60,3 +29,4 @@ export declare const codeHighlightLight: {
     url: string;
     variable: string;
 };
+export default codeHighlight;

package/lib/main/themes/code-highlight/index.js

@@ -1,55 +1,30 @@
 import { css } from '@emotion/css';
 // Dark theme tokens
 const tokenComment = css `
-  color: #6a9955;
+  color: var(--lexical-code-comment);
 `;
 const tokenPunctuation = css `
-  color: #d4d4d4;
+  color: var(--lexical-code-punctuation);
 `;
 const tokenProperty = css `
-  color: #9cdcfe;
+  color: var(--lexical-code-property);
 `;
 const tokenSelector = css `
-  color: #d7ba7d;
+  color: var(--lexical-code-selector);
 `;
 const tokenOperator = css `
-  color: #d4d4d4;
+  color: var(--lexical-code-operator);
 `;
 const tokenAttr = css `
-  color: #9cdcfe;
+  color: var(--lexical-code-attr);
 `;
 const tokenVariable = css `
-  color: #9cdcfe;
+  color: var(--lexical-code-variable);
 `;
 const tokenFunction = css `
-  color: #dcdcaa;
+  color: var(--lexical-code-function);
 `;
-// Light theme tokens - 更有活力和年轻化的配色，优化对比度
-const tokenCommentLight = css `
-  color: #1e8449;
-`;
-const tokenPunctuationLight = css `
-  color: #2c3e50;
-`;
-const tokenPropertyLight = css `
-  color: #e67e22;
-`;
-const tokenSelectorLight = css `
-  color: #c0392b;
-`;
-const tokenOperatorLight = css `
-  color: #8e44ad;
-`;
-const tokenAttrLight = css `
-  color: #2980b9;
-`;
-const tokenVariableLight = css `
-  color: #27ae60;
-`;
-const tokenFunctionLight = css `
-  color: #f39c12;
-`;
-export const codeHighlightDark = {
+const codeHighlight = {
     atrule: tokenAttr,
     attr: tokenAttr,
     boolean: tokenProperty,
@@ -80,34 +55,4 @@ export const codeHighlightDark = {
     url: tokenOperator,
     variable: tokenVariable,
 };
-export const codeHighlightLight = {
-    atrule: tokenAttrLight,
-    attr: tokenAttrLight,
-    boolean: tokenPropertyLight,
-    builtin: tokenSelectorLight,
-    cdata: tokenCommentLight,
-    char: tokenSelectorLight,
-    class: tokenFunctionLight,
-    comment: tokenCommentLight,
-    constant: tokenPropertyLight,
-    deleted: tokenPropertyLight,
-    doctype: tokenCommentLight,
-    entity: tokenOperatorLight,
-    function: tokenFunctionLight,
-    important: tokenVariableLight,
-    inserted: tokenSelectorLight,
-    keyword: tokenAttrLight,
-    namespace: tokenVariableLight,
-    number: tokenPropertyLight,
-    operator: tokenOperatorLight,
-    prolog: tokenCommentLight,
-    property: tokenPropertyLight,
-    punctuation: tokenPunctuationLight,
-    regex: tokenVariableLight,
-    selector: tokenSelectorLight,
-    string: tokenSelectorLight,
-    symbol: tokenPropertyLight,
-    tag: tokenPropertyLight,
-    url: tokenOperatorLight,
-    variable: tokenVariableLight,
-};
+export default codeHighlight;

package/lib/main/themes/customTheme.js

@@ -1,9 +1,8 @@
 import { css } from '@emotion/css';
 import { useTheme } from '@mui/material';
 import defaultTheme from './defaultTheme';
-import { codeHighlightLight, codeHighlightDark } from './code-highlight';
+import codeHighlight from './code-highlight';
 const createCustomTheme = (theme) => {
-    const { palette } = theme;
     const noMarginTopStyle = css(`
       // 首个元素的 margin-top 设置为 0
       .be-editable &:first-child {
@@ -30,7 +29,7 @@ const createCustomTheme = (theme) => {
     `, theme.typography.body1, noMarginTopStyle);
     const quote = css(`
       margin: 1.6em 0;
-      border-left-color: ${palette.grey[200]};
+      border-left-color: var(--mui-palette-grey-200);
       border-left-width: 2px;
       border-left-style: solid;
       padding-left: 1.5rem;
@@ -76,7 +75,7 @@ const createCustomTheme = (theme) => {
     const link = css(`
       color: inherit;
       text-decoration: none;
-      border-bottom: 1px solid ${palette.primary.main};
+      border-bottom: 1px solid var(--mui-palette-primary-main);
       &:hover {
         border-bottom-width: 2px;
       }
@@ -108,12 +107,12 @@ const createCustomTheme = (theme) => {
         fontSize: '.875em',
         fontWeight: 500,
         borderRadius: '.25rem',
-        border: `1px solid ${palette.grey[200]}`,
+        border: '1px solid var(--mui-palette-grey-200)',
         padding: '1px .375rem',
         fontFamily: 'Menlo, Consolas, Monaco, monospace',
         fontVariantLigatures: 'none',
-        backgroundColor: palette.grey[50],
-        ...(palette.mode === 'dark' && { color: palette.grey[800] }),
+        backgroundColor: 'var(--mui-palette-grey-50)',
+        color: 'var(--lexical-text-code)',
     });
     const olCommon = {
         margin: 0,
@@ -156,15 +155,15 @@ const createCustomTheme = (theme) => {
     padding-left: 24px;
     padding-right: 24px;
     &:before {
-      border: 1px solid ${palette.primary.main};
-      background-color: ${palette.primary.main};
+      border: 1px solid var(--mui-palette-primary-main);
+      background-color: var(--mui-palette-primary-main);
       top: 4px;
     }
     &:after {
       top: 7px;
     }
     &:focus:before {
-      box-shadow: 0 0 0 1px ${palette.primary.light};
+      box-shadow: 0 0 0 1px var(--mui-palette-primary-light);
     }
   `;
     const listItemUnchecked = css `
@@ -177,7 +176,7 @@ const createCustomTheme = (theme) => {
       left: 1px;
     }
     &:focus:before {
-      box-shadow: 0 0 0 1px ${palette.primary.light};
+      box-shadow: 0 0 0 1px var(--mui-palette-primary-light);
     }
   `;
     const nestedListItem = css `
@@ -193,14 +192,14 @@ const createCustomTheme = (theme) => {
     padding: 8px 0;
   `;
     const embedBlockFocus = css `
-    outline: 2px solid ${palette.primary.light};
+    outline: 2px solid var(--mui-palette-primary-light);
   `;
     const alert = css `
     // user-select: none;
     padding: 8px 0;
   `;
     const alertFocus = css `
-    outline: 2px solid ${palette.primary.light};
+    outline: 2px solid var(--mui-palette-primary-light);
   `;
     const image = css `
     .image-caption-container {
@@ -220,7 +219,7 @@ const createCustomTheme = (theme) => {
         .ImageNode__contentEditable {
           padding: 0;
           p {
-            color: ${palette.text.secondary};
+            color: var(--mui-palette-text-secondary);
             font-size: 12px;
           }
         }
@@ -228,8 +227,8 @@ const createCustomTheme = (theme) => {
     }
   `;
     const code = css `
-    background-color: ${palette.background.paper};
-    color: ${palette.text.primary};
+    background-color: var(--mui-palette-background-paper);
+    color: var(--mui-palette-text-primary);
     font-family: Menlo, Consolas, Monaco, monospace;
     display: block;
     // padding: 16px;
@@ -244,7 +243,7 @@ const createCustomTheme = (theme) => {
     overflow-x: auto;
     position: relative;
     border-radius: ${theme.shape.borderRadius}px;
-    border: 1px solid ${palette.divider};
+    border: 1px solid var(--mui-palette-divider);
 
     &:before {
       content: attr(data-gutter);
@@ -294,7 +293,7 @@ const createCustomTheme = (theme) => {
             olDepth: [ol1, ol2, ol3, ol4, ol5],
             ul,
         },
-        codeHighlight: palette.mode === 'dark' ? codeHighlightDark : codeHighlightLight,
+        codeHighlight,
         embedBlock: {
             base: embedBlock,
             focus: embedBlockFocus,

package/package.json

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