Merge pull request #1790 from merico-dev/rich-text

rich text

Author: ZeekoZhu

dashboard/package.json

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

dashboard/src/components/plugins/viz-components/rich-text/index.tsx

@@ -5,6 +5,7 @@ import { DEFAULT_CONFIG, IRichTextConf } from './type';
 import { VizRichText } from './viz-rich-text';
 import { VizRichTextEditor } from './viz-rich-text-editor';
 import { translation } from './translation';
+import { ClickRichTextBlock } from './triggers';
 
 class VizRichTextMigrator extends VersionBasedMigrator {
   readonly VERSION = 1;
@@ -36,5 +37,6 @@ export const RichTextVizComponent: VizComponent = {
       config: cloneDeep(DEFAULT_CONFIG) as IRichTextConf,
     };
   },
+  triggers: [ClickRichTextBlock],
   translation,
 };

dashboard/src/components/plugins/viz-components/rich-text/translation.ts

@@ -3,12 +3,26 @@ import { TranslationPatch } from '~/types/plugin';
 const en = {
   rich_text: {
     viz_name: 'Rich Text',
+    click: {
+      label: 'Click Rich Text Block',
+      block_id_label: 'Block ID',
+      block_id_description: 'Optional identifier for the clicked block',
+      block_id_placeholder: 'Enter block ID',
+      click_block_with_id: 'Click Rich Text Block: {{blockId}}',
+    },
   },
 };
 
 const zh = {
   rich_text: {
     viz_name: '富文本',
+    click: {
+      label: '点击富文本块',
+      block_id_label: '块ID',
+      block_id_description: '被点击块的可选标识符',
+      block_id_placeholder: '输入块ID',
+      click_block_with_id: '点击富文本块: {{blockId}}',
+    },
   },
 };
 

dashboard/src/components/plugins/viz-components/rich-text/triggers/click-rich-text-block.tsx

@@ -0,0 +1,62 @@
+import { Text, TextInput } from '@mantine/core';
+import { defaults } from 'lodash';
+import { useTranslation } from 'react-i18next';
+import { useStorageData } from '~/components/plugins';
+import { ITriggerConfigProps, ITriggerSchema } from '~/types/plugin';
+
+export const ClickRichTextBlock: ITriggerSchema = {
+  id: 'builtin:rich-text:click-rich-text-block',
+  displayName: 'viz.rich_text.click.label',
+  nameRender: ClickRichTextBlockName,
+  configRender: ClickRichTextBlockSettings,
+  payload: [
+    {
+      name: 'variables',
+      description: 'Panel variables',
+      valueType: 'object',
+    },
+  ],
+};
+
+export interface IClickRichTextBlockConfig {
+  blockId: string;
+}
+
+const DEFAULT_CONFIG: IClickRichTextBlockConfig = {
+  blockId: '',
+};
+
+export function ClickRichTextBlockSettings(props: ITriggerConfigProps) {
+  const { t } = useTranslation();
+  const { value: config, set: setConfig } = useStorageData<IClickRichTextBlockConfig>(
+    props.trigger.triggerData,
+    'config',
+  );
+  const { blockId } = defaults({}, config, DEFAULT_CONFIG);
+
+  const handleBlockIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    void setConfig({ blockId: e.currentTarget.value });
+  };
+
+  return (
+    <TextInput
+      label={t('viz.rich_text.click.block_id_label')}
+      description={t('viz.rich_text.click.block_id_description')}
+      value={blockId}
+      onChange={handleBlockIdChange}
+      placeholder={t('viz.rich_text.click.block_id_placeholder')}
+    />
+  );
+}
+
+function ClickRichTextBlockName(props: Omit<ITriggerConfigProps, 'sampleData'>) {
+  const { t } = useTranslation();
+  const { value: config } = useStorageData<IClickRichTextBlockConfig>(props.trigger.triggerData, 'config');
+  const { blockId } = defaults({}, config, DEFAULT_CONFIG);
+
+  if (blockId) {
+    return <Text size="sm">{t('viz.rich_text.click.click_block_with_id', { blockId })}</Text>;
+  }
+
+  return <Text size="sm">{t('viz.rich_text.click.label')}</Text>;
+}

dashboard/src/components/plugins/viz-components/rich-text/triggers/index.ts

@@ -0,0 +1 @@
+export * from './click-rich-text-block';

dashboard/src/components/plugins/viz-components/rich-text/viz-rich-text.tsx

@@ -4,11 +4,22 @@ import { useMemo } from 'react';
 import { useStorageData } from '~/components/plugins/hooks';
 import { ReadonlyRichText } from '~/components/widgets/rich-text-editor/readonly-rich-text-editor';
 import { useRenderContentModelContext, useRenderPanelContext } from '~/contexts';
+import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
 import { VizViewProps } from '~/types/plugin';
 import { parseRichTextContent } from '~/utils';
+import { ClickRichTextBlock } from './triggers';
+import { IClickRichTextBlockConfig } from './triggers/click-rich-text-block';
 import { DEFAULT_CONFIG, IRichTextConf } from './type';
 
-export const VizRichText = observer(({ context }: VizViewProps) => {
+export const VizRichText = observer(({ context, instance }: VizViewProps) => {
+  const interactionManager = useCurrentInteractionManager({
+    vizManager: context.vizManager,
+    instance,
+  });
+  const triggers = useTriggerSnapshotList<IClickRichTextBlockConfig>(
+    interactionManager.triggerManager,
+    ClickRichTextBlock.id,
+  );
   const contentModel = useRenderContentModelContext();
   const { panel } = useRenderPanelContext();
   const { value: confValue } = useStorageData<IRichTextConf>(context.instanceData, 'config');
@@ -26,20 +37,59 @@ export const VizRichText = observer(({ context }: VizViewProps) => {
     return null;
   }
 
+  function handleClick(ev: React.MouseEvent) {
+    // implement the interaction block click handler with event delegation
+    const target = ev.target as HTMLElement;
+    const interactionBlock = target.closest('[data-interaction-block-id]') as HTMLElement;
+
+    const payload = { variables: panel.variableValueMap };
+
+    if (interactionBlock) {
+      const blockId = interactionBlock.getAttribute('data-interaction-block-id');
+
+      // Find triggers that match this blockId
+      const matchingTriggers = triggers.filter((t) => {
+        return t.config?.blockId === blockId;
+      });
+
+      // Run matching triggers
+      matchingTriggers.forEach((t) => {
+        void interactionManager.runInteraction(t.id, payload);
+      });
+
+      // If there are matching triggers, prevent default and stop propagation
+      if (matchingTriggers.length > 0) {
+        ev.preventDefault();
+        ev.stopPropagation();
+      }
+    } else {
+      // Run triggers without blockId (global click handlers)
+      const globalTriggers = triggers.filter((t) => {
+        return !t.config?.blockId;
+      });
+
+      globalTriggers.forEach((t) => {
+        void interactionManager.runInteraction(t.id, payload);
+      });
+    }
+  }
+
   return (
-    <ReadonlyRichText
-      value={content}
-      styles={{
-        root: {
-          border: 'none',
-          height: '100%',
-        },
-        content: {
-          padding: 0,
-        },
-      }}
-      dashboardStateValues={contentModel.dashboardStateValues}
-      variableAggValueMap={panel.variableAggValueMap}
-    />
+    <div onClick={handleClick}>
+      <ReadonlyRichText
+        value={content}
+        styles={{
+          root: {
+            border: 'none',
+            height: '100%',
+          },
+          content: {
+            padding: 0,
+          },
+        }}
+        dashboardStateValues={contentModel.dashboardStateValues}
+        variableAggValueMap={panel.variableAggValueMap}
+      />
+    </div>
   );
 });

dashboard/src/components/widgets/rich-text-editor/custom-rich-text-editor.tsx

@@ -25,6 +25,11 @@ import { ColorMappingControl, ColorMappingMark } from './color-mapping-mark';
 import { ColorPickerControl } from './color-picker-control';
 import { DynamicColorControl, DynamicColorMark } from './dynamic-color-mark';
 import { ChooseFontSize, FontSize } from './font-size-extension';
+import { InteractionBlock } from './interaction-block-node';
+import {
+  ClearInteractionBlockControl,
+  InteractionBlockControl,
+} from './interaction-block-node/interaction-block-control';
 
 const RTEContentStyle: EmotionSx = {
   'dynamic-color': {
@@ -78,7 +83,7 @@ interface ICustomRichTextEditor {
 }
 
 export const CustomRichTextEditor = forwardRef(
-  ({ value, onChange, styles = {}, label, onSubmit, onCancel }: ICustomRichTextEditor, ref: any) => {
+  ({ value, onChange, styles = {}, label, onSubmit, onCancel }: ICustomRichTextEditor) => {
     const { t } = useTranslation();
     const inPanelContext = useIsInEditPanelContext();
     const extensions: Extensions = useMemo(() => {
@@ -104,6 +109,7 @@ export const CustomRichTextEditor = forwardRef(
         Color,
         FontSize,
         DynamicColorMark,
+        InteractionBlock,
       ];
       if (inPanelContext) {
         ret.push(ColorMappingMark);
@@ -177,6 +183,10 @@ export const CustomRichTextEditor = forwardRef(
             <RichTextEditor.ControlsGroup>
               <DynamicColorControl editor={editor} />
             </RichTextEditor.ControlsGroup>
+            <RichTextEditor.ControlsGroup>
+              <InteractionBlockControl />
+              <ClearInteractionBlockControl />
+            </RichTextEditor.ControlsGroup>
             <RichTextEditor.ControlsGroup>
               <RichTextEditor.Bold />
               <RichTextEditor.Italic />

dashboard/src/components/widgets/rich-text-editor/interaction-block-node/index.ts

@@ -0,0 +1,98 @@
+// create custom block node for tiptap editor
+// it will wrap its content with a div[data-interaction-block-id=xxxx]
+
+import { Node, mergeAttributes } from '@tiptap/core';
+
+export interface InteractionBlockOptions {
+  HTMLAttributes: Record<string, any>;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    interactionBlock: {
+      /**
+       * Set an interaction block with a specific ID
+       */
+      setInteractionBlock: (blockId: string) => ReturnType;
+      /**
+       * Toggle an interaction block
+       */
+      toggleInteractionBlock: (blockId: string) => ReturnType;
+      /**
+       * Unset an interaction block
+       */
+      unsetInteractionBlock: () => ReturnType;
+    };
+  }
+}
+
+export const InteractionBlock = Node.create<InteractionBlockOptions>({
+  name: 'interactionBlock',
+
+  group: 'block',
+
+  content: 'block+',
+
+  defining: true,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  addAttributes() {
+    return {
+      blockId: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('data-interaction-block-id'),
+        renderHTML: (attributes) => {
+          if (!attributes.blockId) {
+            return {};
+          }
+          return {
+            'data-interaction-block-id': attributes.blockId,
+          };
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-interaction-block-id]',
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+
+  addCommands() {
+    return {
+      setInteractionBlock:
+        (blockId: string) =>
+        ({ commands }) => {
+          return commands.wrapIn(this.name, { blockId });
+        },
+      toggleInteractionBlock:
+        (blockId: string) =>
+        ({ commands }) => {
+          return commands.toggleWrap(this.name, { blockId });
+        },
+      unsetInteractionBlock:
+        () =>
+        ({ commands }) => {
+          return commands.lift(this.name);
+        },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      'Mod-Alt-i': () => this.editor.commands.toggleInteractionBlock(''),
+    };
+  },
+});