@blocklet/editor 2.4.104 → 2.4.105

package/lib/ext/CustomComponent/CustomComponent.js

@@ -1,9 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ErrorBoundary } from 'react-error-boundary';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import components from './components';
+const translations = {
+    en: 'Editing not available',
+    zh: '此组件暂不支持编辑',
+};
 export function CustomComponent({ component, properties, editorTheme }) {
     const Component = components[component];
+    const { locale } = useLocaleContext();
     if (!Component) {
         return null;
     }
@@ -11,5 +17,24 @@ export function CustomComponent({ component, properties, editorTheme }) {
         console.error('CustomComponent error', component, properties, error);
         return null;
     };
-    return (_jsx(Box, { sx: { py: 1 }, children: _jsx(ErrorBoundary, { fallbackRender: fallbackRender, children: _jsx(Component, { ...properties, editorTheme: editorTheme }) }) }));
+    return (_jsx(Box, { sx: {
+            position: 'relative',
+            '.editable &:hover': {
+                '&::before': {
+                    content: `"${translations[locale] || translations.en}"`,
+                    display: 'inline-block',
+                    position: 'absolute',
+                    top: -4,
+                    left: 0,
+                    zIndex: 1,
+                    px: 1,
+                    py: 0.25,
+                    typography: 'body2',
+                    color: '#fff',
+                    bgcolor: 'grey.400',
+                    transform: 'translateY(-100%)',
+                    borderRadius: 0.5,
+                },
+            },
+        }, children: _jsx(ErrorBoundary, { fallbackRender: fallbackRender, children: _jsx(Component, { ...properties, editorTheme: editorTheme }) }) }));
 }

package/lib/ext/CustomComponent/CustomComponentNode.js

@@ -98,10 +98,10 @@ export class CustomComponentNode extends DecoratorBlockNode {
         return false;
     }
     decorate(editor, config) {
-        const customComponentTheme = config.theme.customComponent || {};
+        const xComponentTheme = config.theme.xComponent || {};
         const className = {
-            base: customComponentTheme.base || '',
-            focus: customComponentTheme.focus || '',
+            base: xComponentTheme.base || '',
+            focus: xComponentTheme.focus || '',
         };
         return (_jsx(BlockWithAlignableContents, { className: className, format: this.__format, nodeKey: this.__key, children: _jsx(CustomComponent, { component: this.__data.component, properties: this.__data.properties, editorTheme: config.theme }) }));
     }

package/lib/main/themes/customTheme.js

@@ -200,6 +200,12 @@ const createCustomTheme = (theme) => {
   `;
     const alertFocus = css `
     outline: 2px solid var(--mui-palette-primary-light);
+  `;
+    const xComponent = css `
+    padding: 8px 0;
+  `;
+    const xComponentFocus = css `
+    outline: 2px solid var(--mui-palette-primary-light);
   `;
     const image = css `
     .image-caption-container {
@@ -302,6 +308,10 @@ const createCustomTheme = (theme) => {
             base: alert,
             focus: alertFocus,
         },
+        xComponent: {
+            base: xComponent,
+            focus: xComponentFocus,
+        },
         image: `${defaultTheme.image} ${image}`,
         code,
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.4.104",
+  "version": "2.4.105",
   "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.104"
+    "@blocklet/pdf": "2.4.105"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",