Merge pull request #1812 from merico-dev/rich-text-interaction-block-text-align

rich text interaction block text align

Author: ZeekoZhu

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "14.58.2",
+  "version": "14.58.3",
   "license": "Apache-2.0",
   "repository": {
     "url": "https://github.com/merico-dev/table"

dashboard/src/components/widgets/rich-text-editor/interaction-block-node/interaction-block-control.tsx

@@ -52,17 +52,12 @@ function InteractionBlockModal({ opened, onClose, editor }: InteractionBlockModa
   }, [opened]);
 
   return (
-    <Modal
-      opened={opened}
-      zIndex={1200}
-      onClose={handleCancel}
-      title={t('rich_text_editor.interaction_block.modal_title')}
-    >
+    <Modal opened={opened} zIndex={1200} onClose={handleCancel} title={t('rich_text.interaction_block.modal_title')}>
       <Stack gap="md">
         <TextInput
-          label={t('rich_text_editor.interaction_block.block_id_label')}
-          description={t('rich_text_editor.interaction_block.block_id_description')}
-          placeholder={t('rich_text_editor.interaction_block.block_id_placeholder')}
+          label={t('rich_text.interaction_block.block_id_label')}
+          description={t('rich_text.interaction_block.block_id_description')}
+          placeholder={t('rich_text.interaction_block.block_id_placeholder')}
           value={blockId}
           onChange={(e) => setBlockId(e.currentTarget.value)}
           onKeyDown={(e) => {
@@ -103,8 +98,8 @@ export function InteractionBlockControl() {
       <RichTextEditor.Control
         onClick={handleControlClick}
         active={isActive}
-        aria-label={t('rich_text_editor.interaction_block.toggle_tooltip')}
-        title={t('rich_text_editor.interaction_block.toggle_tooltip')}
+        aria-label={t('rich_text.interaction_block.toggle_tooltip')}
+        title={t('rich_text.interaction_block.toggle_tooltip')}
       >
         <IconHandClick stroke={1.5} size={16} />
       </RichTextEditor.Control>
@@ -131,8 +126,8 @@ export function ClearInteractionBlockControl() {
     <RichTextEditor.Control
       onClick={handleClearClick}
       disabled={!isActive}
-      aria-label={t('rich_text_editor.interaction_block.clear_tooltip')}
-      title={t('rich_text_editor.interaction_block.clear_tooltip')}
+      aria-label={t('rich_text.interaction_block.clear_tooltip')}
+      title={t('rich_text.interaction_block.clear_tooltip')}
     >
       <IconHandOff stroke={1.5} size={16} />
     </RichTextEditor.Control>

dashboard/src/i18n/en.ts

@@ -659,6 +659,14 @@ export const en = {
           var: 'Max value variable',
         },
       },
+      interaction_block: {
+        modal_title: 'Configure Interaction Block',
+        block_id_label: 'Block ID',
+        block_id_description: 'Unique identifier for this interaction block',
+        block_id_placeholder: 'Enter block ID',
+        toggle_tooltip: 'Toggle interaction block settings',
+        clear_tooltip: 'Clear interaction block',
+      },
     },
     chart: {
       chart_config: 'Chart Config',

dashboard/src/i18n/zh.ts

@@ -659,6 +659,14 @@ export const zh = {
           var: '动态最大值（优先）',
         },
       },
+      interaction_block: {
+        modal_title: '配置交互块',
+        block_id_label: '块ID',
+        block_id_description: '此交互块的唯一标识符',
+        block_id_placeholder: '输入块ID',
+        toggle_tooltip: '切换交互块设置',
+        clear_tooltip: '清除交互块',
+      },
     },
     chart: {
       chart_config: '图表设置',

dashboard/src/styles/common-html-content-style.ts

@@ -72,17 +72,16 @@ export const CommonHTMLContentStyle: EmotionSx = {
     color: '#3D3E45',
     margin: '0 0 14px',
   },
-  'div[data-interaction-block-id]': {
+  '[data-interaction-block-id]': {
     position: 'relative',
     padding: '4px 8px',
     borderRadius: '4px',
     transition: 'all 0.2s ease',
-    width: 'fit-content',
   },
-  'div[data-interaction-block-id]:hover': {
+  '[data-interaction-block-id]:hover': {
     backgroundColor: 'rgba(59, 130, 246, 0.08)',
   },
-  '[contenteditable=false] div[data-interaction-block-id]:hover': {
+  '[contenteditable=false] [data-interaction-block-id]:hover': {
     cursor: 'pointer',
   },
 };

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "14.58.2",
+  "version": "14.58.3",
   "license": "Apache-2.0",
   "repository": {
     "url": "https://github.com/merico-dev/table"