@blocklet/editor 2.4.93 → 2.4.95

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

@@ -4,7 +4,7 @@ export declare const LANGUAGE_ICON: Record<string, string | {
     light: string;
     dark: string;
 }>;
-export declare const XCODE_TRANSLATIONS: {
+export declare const X_CODE_TRANSLATIONS: {
     en: {
         seeAllLines: string;
         collapseCode: string;

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

@@ -82,7 +82,7 @@ export const LANGUAGE_ICON = {
     },
     awk: 'vscode-icons:file-type-awk',
     ballerina: 'material-icon-theme:ballerina',
-    bash: 'material-icon-theme:console',
+    bash: 'catppuccin:powershell',
     bat: 'catppuccin:batch',
     batch: 'catppuccin:batch',
     beancount: '',
@@ -141,7 +141,7 @@ export const LANGUAGE_ICON = {
     fennel: '',
     fish: '',
     fluent: '',
-    fsharp: 'vscode-icons:file-type-fsharp2',
+    fsharp: 'logos:fsharp',
     gdresource: '',
     gdscript: 'vscode-icons:file-type-gdscript',
     gdshader: '',
@@ -198,7 +198,7 @@ export const LANGUAGE_ICON = {
     less: 'catppuccin:less',
     liquid: 'logos:shopify',
     lit: 'logos:lit',
-    log: 'material-icon-theme:console',
+    log: 'catppuccin:powershell',
     logo: '',
     lua: 'logos:lua',
     luau: 'vscode-icons:file-type-luau',
@@ -263,11 +263,11 @@ export const LANGUAGE_ICON = {
     scala: 'logos:scala',
     scheme: '',
     scss: 'logos:sass',
-    sh: 'material-icon-theme:console',
+    sh: 'catppuccin:powershell',
     shaderlab: 'catppuccin:shader',
-    shell: 'material-icon-theme:console',
-    shellscript: 'material-icon-theme:console',
-    shellsession: 'material-icon-theme:console',
+    shell: 'catppuccin:powershell',
+    shellscript: 'catppuccin:powershell',
+    shellsession: 'catppuccin:powershell',
     smalltalk: '',
     solidity: {
         light: 'vscode-icons:file-type-light-solidity',
@@ -330,14 +330,14 @@ export const LANGUAGE_ICON = {
         dark: 'vscode-icons:file-type-yaml-official',
     },
     zenscript: '',
-    zig: 'vscode-icons:file-type-zig',
+    zig: 'devicon:zig',
     zsh: {
         light: 'devicon:zsh',
         dark: 'devicon-plain:zsh',
     },
 };
 // 多语言翻译
-export const XCODE_TRANSLATIONS = {
+export const X_CODE_TRANSLATIONS = {
     en: {
         seeAllLines: 'See all {lines} lines',
         collapseCode: 'Collapse code',
@@ -361,9 +361,9 @@ function CodeHeader({ title, icon, actions }) {
             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',
-                            height: '24px',
-                            lineHeight: '24px',
+                            fontSize: '16px',
+                            height: '16px',
+                            lineHeight: '16px',
                             color: 'text.secondary',
                             fill: ({ palette }) => palette.text.secondary,
                         } })), title && (_jsx(Typography, { variant: "body2", sx: { color: 'text.secondary', fontWeight: 500 }, children: title }))] }), actions && _jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: actions })] }));
@@ -407,7 +407,7 @@ function FoldButton({ isCollapsed, onToggle, sx = {} }) {
 /** 折叠 Footer */
 function FoldFooter({ remainingLines, isCollapsed, onToggle, }) {
     const { locale = 'en' } = useLocaleContext();
-    const t = useMemoizedFn((key, data = {}) => translate(XCODE_TRANSLATIONS, key, locale, 'en', data));
+    const t = useMemoizedFn((key, data = {}) => translate(X_CODE_TRANSLATIONS, key, locale, 'en', data));
     return (_jsx(Box, { sx: {
             display: 'flex',
             alignItems: 'center',

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

@@ -1,9 +1,24 @@
+export declare const X_FIELD_TRANSLATIONS: {
+    en: {
+        required: string;
+        deprecated: string;
+        subfields: string;
+    };
+    zh: {
+        required: string;
+        deprecated: string;
+        subfields: string;
+    };
+};
 export interface FieldProps {
     name: string;
     type: string;
     default?: string;
     required?: 'false' | 'true';
     deprecated?: 'false' | 'true';
-    body?: string;
+    desc?: string;
+    children?: {
+        properties: FieldProps;
+    }[];
 }
-export default function Field({ name, type, default: defaultVal, required, deprecated, body }: FieldProps): import("react/jsx-runtime").JSX.Element;
+export default function Field({ name, type, default: defaultVal, required, deprecated, desc, children }: FieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,57 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Stack, Box, styled, alpha } from '@mui/material';
+import { Stack, Box, styled, alpha, Collapse } from '@mui/material';
+import { Add } from '@mui/icons-material';
+import { useState, useEffect } from 'react';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useMemoizedFn } from 'ahooks';
 import useMobile from '../../../main/hooks/use-mobile';
+// 多语言翻译
+export const X_FIELD_TRANSLATIONS = {
+    en: {
+        required: 'required',
+        deprecated: 'deprecated',
+        subfields: '{num} subfields',
+    },
+    zh: {
+        required: '必填',
+        deprecated: '废弃',
+        subfields: '{num} 个子属性',
+    },
+};
+// 利用栈管理高亮的 Field
+const highlightManager = (() => {
+    const highlightStack = [];
+    const listeners = new Set();
+    const removeFromStack = (fieldId) => {
+        const index = highlightStack.indexOf(fieldId);
+        if (index > -1) {
+            highlightStack.splice(index, 1);
+        }
+    };
+    const notifyListeners = () => {
+        const currentHighlight = highlightStack.length > 0 ? highlightStack[highlightStack.length - 1] : null;
+        listeners.forEach((listener) => listener(currentHighlight));
+    };
+    return {
+        enterField(fieldId) {
+            removeFromStack(fieldId);
+            highlightStack.push(fieldId);
+            notifyListeners();
+        },
+        leaveField(fieldId) {
+            removeFromStack(fieldId);
+            notifyListeners();
+        },
+        getHighlightedFieldId() {
+            return highlightStack.length > 0 ? highlightStack[highlightStack.length - 1] : null;
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+    };
+})();
 const Tag = styled(Box)(({ theme }) => ({
     borderRadius: theme.shape.borderRadius * 0.75,
     padding: theme.spacing(0.25, 1),
@@ -13,20 +64,71 @@ const Bar = styled(Box)(({ theme }) => ({
     flexWrap: 'wrap',
     gap: theme.spacing(1.25),
 }));
-export default function Field({ name, type, default: defaultVal, required, deprecated, body }) {
+export default function Field({ name, type, default: defaultVal, required, deprecated, desc, children }) {
+    const { locale = 'en' } = useLocaleContext();
+    const t = useMemoizedFn((key, data = {}) => translate(X_FIELD_TRANSLATIONS, key, locale, 'en', data));
     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: {
+    const [expanded, setExpanded] = useState(false);
+    const [highlightedFieldId, setHighlightedFieldId] = useState(null);
+    // 使用 name 作为 fieldId
+    const fieldId = name;
+    // 订阅全局高亮状态变化
+    useEffect(() => {
+        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: {
                     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] }))] }));
+                }, children: t('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] }))] }));
+    // 渲染子 Field
+    const renderChildren = () => {
+        if (!children || children.length === 0)
+            return null;
+        return (_jsxs(Box, { sx: { mt: 1 }, children: [_jsxs(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        cursor: 'pointer',
+                        mb: 1,
+                        p: 0.5,
+                        borderRadius: 1,
+                        '&:hover': {
+                            backgroundColor: ({ palette }) => alpha(palette.action.hover, 0.04),
+                        },
+                    }, onClick: () => setExpanded(!expanded), children: [_jsx(Box, { sx: {
+                                color: 'text.secondary',
+                                fontSize: '16px',
+                                mr: 0.5,
+                                transform: expanded ? 'rotate(45deg)' : 'rotate(0deg)',
+                                transition: 'transform 0.2s ease-in-out',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }, children: _jsx(Add, {}) }), _jsx(Box, { sx: { color: 'text.secondary', fontSize: '14px', flex: 1 }, children: t('subfields', { num: children.length }) })] }), _jsx(Collapse, { in: expanded, timeout: "auto", unmountOnExit: true, children: _jsx(Box, { sx: {
+                            pl: 1.5,
+                            borderLeft: '1px dashed',
+                            borderColor: highlightedFieldId === fieldId ? 'primary.main' : 'divider',
+                            transition: 'border-color 0.2s ease-in-out',
+                        }, onMouseEnter: () => {
+                            highlightManager.enterField(fieldId);
+                        }, onMouseLeave: () => {
+                            highlightManager.leaveField(fieldId);
+                        }, children: _jsx(Stack, { spacing: 1, children: children.map((child) => {
+                                const fullname = `${name}.${child.properties.name}`;
+                                return _jsx(Field, { ...child.properties, name: fullname }, fullname);
+                            }) }) }) })] }));
+    };
     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 })] }));
+            '&: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()] }));
 }

package/lib/libs/utm.d.ts

@@ -0,0 +1,9 @@
+/**
+ *
+ * 为外部 URL 添加 UTM 追踪参数
+ * @param url - 原始 URL 地址
+ * @returns 添加 UTM 参数后的 URL
+ * @see https://team.arcblock.io/comment/discussions/7504c5ce-7453-4223-a539-27620efcf38e#6fd5adb6-49ab-4ead-9233-240aa53d1058
+ *
+ */
+export declare function getUTMUrl(url: string): string;

package/lib/libs/utm.js

@@ -0,0 +1,43 @@
+import { withQuery, getQuery } from 'ufo';
+function isExternal(url) {
+    try {
+        const u = new URL(url);
+        return u.origin !== window.location.origin;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ *
+ * 为外部 URL 添加 UTM 追踪参数
+ * @param url - 原始 URL 地址
+ * @returns 添加 UTM 参数后的 URL
+ * @see https://team.arcblock.io/comment/discussions/7504c5ce-7453-4223-a539-27620efcf38e#6fd5adb6-49ab-4ead-9233-240aa53d1058
+ *
+ */
+export function getUTMUrl(url) {
+    try {
+        if (!isExternal(url)) {
+            return url;
+        }
+        const type = window.__discussKitPostType__ ?? 'discussion';
+        const existsQueryParams = getQuery(url);
+        const queryParams = {
+            // 自身站点的 hostname
+            utm_source: window.location.hostname,
+            // 标记导航点击
+            utm_medium: `${type}_link`,
+            // 全局导航统一标签
+            utm_campaign: 'default',
+            // 目标站点标识
+            utm_content: new URL(url).hostname,
+            ...existsQueryParams,
+        };
+        return withQuery(url, queryParams);
+    }
+    catch (error) {
+        console.error('Failed to generate UTM URL:', error);
+        return url;
+    }
+}

package/lib/libs/utm.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/libs/utm.spec.js

@@ -0,0 +1,153 @@
+import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
+import { getUTMUrl } from './utm';
+// Mock window 对象
+const mockWindow = {
+    location: {
+        origin: 'https://example.com',
+        hostname: 'example.com',
+    },
+    __discussKitPostType__: 'discussion',
+};
+describe('getUTMUrl', () => {
+    beforeEach(() => {
+        // @ts-ignore
+        global.window = mockWindow;
+        vi.clearAllMocks();
+    });
+    afterEach(() => {
+        // @ts-ignore
+        delete global.window;
+    });
+    describe('Internal Link Handling', () => {
+        it('should return original URL when URL is internal link', () => {
+            const internalUrl = 'https://example.com/path';
+            expect(getUTMUrl(internalUrl)).toBe(internalUrl);
+        });
+        it('should return original URL when URL is relative path', () => {
+            const relativeUrl = '/path/to/page';
+            expect(getUTMUrl(relativeUrl)).toBe(relativeUrl);
+        });
+        it('should return original URL when URL format is invalid', () => {
+            const invalidUrl = 'not-a-valid-url';
+            expect(getUTMUrl(invalidUrl)).toBe(invalidUrl);
+        });
+    });
+    describe('External Link UTM Parameter Addition', () => {
+        it('should add UTM parameters to external URL', () => {
+            const externalUrl = 'https://external.com/path';
+            const result = getUTMUrl(externalUrl);
+            expect(result).toContain('utm_source=example.com');
+            expect(result).toContain('utm_medium=discussion_link');
+            expect(result).toContain('utm_campaign=default');
+            expect(result).toContain('utm_content=external.com');
+        });
+        it('should preserve existing query parameters', () => {
+            const urlWithParams = 'https://external.com/path?existing=param&another=value';
+            const result = getUTMUrl(urlWithParams);
+            expect(result).toContain('existing=param');
+            expect(result).toContain('another=value');
+            expect(result).toContain('utm_source=example.com');
+        });
+        it('should handle different port numbers', () => {
+            const urlWithPort = 'https://external.com:8080/path';
+            const result = getUTMUrl(urlWithPort);
+            // URL constructor treats port as part of hostname, but ufo library may only take hostname
+            expect(result).toContain('utm_content=external.com');
+        });
+    });
+    describe('Different Post Type Handling', () => {
+        it('should use default value when __discussKitPostType__ is undefined', () => {
+            // @ts-ignore
+            delete global.window.__discussKitPostType__;
+            const externalUrl = 'https://external.com/path';
+            const result = getUTMUrl(externalUrl);
+            expect(result).toContain('utm_medium=discussion_link');
+        });
+        it('should use specified post type', () => {
+            // @ts-ignore
+            global.window.__discussKitPostType__ = 'blog';
+            const externalUrl = 'https://external.com/path';
+            const result = getUTMUrl(externalUrl);
+            expect(result).toContain('utm_medium=blog_link');
+        });
+    });
+    describe('Error Handling', () => {
+        it('should return original URL when error occurs', () => {
+            const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+            // Mock scenario that causes error - break window.location.hostname access
+            const originalWindow = global.window;
+            // @ts-ignore
+            global.window = {
+                location: {
+                    origin: 'https://example.com',
+                    get hostname() {
+                        throw new Error('Hostname access error');
+                    },
+                },
+                __discussKitPostType__: 'discussion',
+            };
+            const url = 'https://external.com/path';
+            const result = getUTMUrl(url);
+            expect(result).toBe(url);
+            expect(consoleSpy).toHaveBeenCalledWith('Failed to generate UTM URL:', expect.any(Error));
+            // @ts-ignore
+            global.window = originalWindow;
+            consoleSpy.mockRestore();
+        });
+        it('should handle empty string URL', () => {
+            const result = getUTMUrl('');
+            expect(result).toBe('');
+        });
+    });
+    describe('URL Construction Validation', () => {
+        beforeEach(() => {
+            // Reset window object state
+            // @ts-ignore
+            global.window = {
+                location: {
+                    origin: 'https://example.com',
+                    hostname: 'example.com',
+                },
+                __discussKitPostType__: 'discussion',
+            };
+        });
+        it('should generate valid URL format', () => {
+            const externalUrl = 'https://external.com/path';
+            const result = getUTMUrl(externalUrl);
+            // Verify result is a valid URL
+            expect(() => new URL(result)).not.toThrow();
+            const parsedUrl = new URL(result);
+            expect(parsedUrl.searchParams.get('utm_source')).toBe('example.com');
+            expect(parsedUrl.searchParams.get('utm_medium')).toBe('discussion_link');
+            expect(parsedUrl.searchParams.get('utm_campaign')).toBe('default');
+            expect(parsedUrl.searchParams.get('utm_content')).toBe('external.com');
+        });
+        it('should correctly handle URLs with existing UTM parameters', () => {
+            const urlWithUTM = 'https://external.com/path?utm_source=existing&other=param';
+            const result = getUTMUrl(urlWithUTM);
+            const parsedUrl = new URL(result);
+            // According to code logic, existsQueryParams comes last, overriding new UTM parameters
+            expect(parsedUrl.searchParams.get('utm_source')).toBe('existing');
+            expect(parsedUrl.searchParams.get('other')).toBe('param');
+            // Verify other UTM parameters are correctly added
+            expect(result).toContain('utm_medium=discussion_link');
+            expect(result).toContain('utm_campaign=default');
+            expect(result).toContain('utm_content=external.com');
+        });
+    });
+    describe('Special Character and Encoding Handling', () => {
+        it('should correctly handle hostname with special characters', () => {
+            // @ts-ignore
+            global.window.location.hostname = 'test-site.co.uk';
+            const externalUrl = 'https://external.com/path';
+            const result = getUTMUrl(externalUrl);
+            expect(result).toContain('utm_source=test-site.co.uk');
+        });
+        it('should correctly handle Chinese domain names', () => {
+            const externalUrl = 'https://测试.com/path';
+            const result = getUTMUrl(externalUrl);
+            // Verify result contains encoded content
+            expect(result).toContain('utm_content=xn--');
+        });
+    });
+});

package/lib/main/plugins/ClickableLinkPlugin/index.js

@@ -5,6 +5,7 @@ import { $getNearestNodeFromDOMNode, $getSelection, $isElementNode, $isRangeSele
 import { useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useEditorConfig } from '../../../config';
+import { getUTMUrl } from '../../../libs/utm';
 function findMatchingDOM(startNode, predicate) {
     let node = startNode;
     while (node != null) {
@@ -93,7 +94,7 @@ export default function LexicalClickableLinkPlugin({ newTab = true }) {
                 }
             }
             else {
-                window.open(url, newTab || isMiddle || event.metaKey || event.ctrlKey || urlTarget === '_blank' ? '_blank' : '_self');
+                window.open(getUTMUrl(url), newTab || isMiddle || event.metaKey || event.ctrlKey || urlTarget === '_blank' ? '_blank' : '_self');
             }
             event.preventDefault();
         };

package/lib/main/viewer/index.js

@@ -22,5 +22,5 @@ export function BlockletEditorViewer({ editorState, markdown, ...props }) {
         },
         theme,
     };
-    return (_jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsx(EditorRoot, { className: cx(props.className, 'be-shell'), "data-mode": muiTheme.palette.mode, children: _jsx(EditorViewer, { ...props }) }) }, muiTheme.palette.mode));
+    return (_jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsx(EditorRoot, { className: cx(props.className, 'be-shell'), "data-mode": muiTheme.palette.mode, children: _jsx(EditorViewer, { ...props }) }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.4.93",
+  "version": "2.4.95",
   "main": "lib/index.js",
   "sideEffects": false,
   "publishConfig": {
@@ -73,7 +73,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "2.4.93"
+    "@blocklet/pdf": "2.4.95"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",