diff --git a/client/src/pages/platform/workflow-editor/components/properties/components/property-mentions-input/PropertyMentionsInputEditor.tsx b/client/src/pages/platform/workflow-editor/components/properties/components/property-mentions-input/PropertyMentionsInputEditor.tsx
index b1eba4282f9..73a3f5999ab 100644
--- a/client/src/pages/platform/workflow-editor/components/properties/components/property-mentions-input/PropertyMentionsInputEditor.tsx
+++ b/client/src/pages/platform/workflow-editor/components/properties/components/property-mentions-input/PropertyMentionsInputEditor.tsx
@@ -28,16 +28,8 @@ import {Editor, EditorContent, Extension, mergeAttributes, useEditor} from '@tip
import {StarterKit} from '@tiptap/starter-kit';
import {decode} from 'html-entities';
import resolvePath from 'object-resolve-path';
-import {
- ForwardedRef,
- MutableRefObject,
- ReactElement,
- forwardRef,
- useCallback,
- useEffect,
- useMemo,
- useState,
-} from 'react';
+import {ForwardedRef, MutableRefObject, forwardRef, useCallback, useEffect, useMemo, useState} from 'react';
+import {renderToStaticMarkup} from 'react-dom/server';
import sanitizeHtml from 'sanitize-html';
import {twMerge} from 'tailwind-merge';
import {useDebouncedCallback} from 'use-debounce';
@@ -46,9 +38,6 @@ import {useShallow} from 'zustand/shallow';
import {FormulaMode} from './FormulaMode.extension';
import {MentionStorage} from './MentionStorage.extension';
-const defaultIcon =
- '';
-
interface PropertyMentionsInputEditorProps {
className?: string;
componentDefinitions: ComponentDefinitionBasic[];
@@ -91,9 +80,6 @@ const PropertyMentionsInputEditor = forwardRef(value);
const [isLocalUpdate, setIsLocalUpdate] = useState(false);
const [mentionOccurences, setMentionOccurences] = useState(0);
- const [renderToStaticMarkup, setRenderToStaticMarkup] = useState<((element: ReactElement) => string) | null>(
- null
- );
const currentNode = useWorkflowNodeDetailsPanelStore((state) => state.currentNode);
@@ -105,31 +91,21 @@ const PropertyMentionsInputEditor = forwardRef component.name === componentName)?.icon;
+ }
- const svgString = renderToStaticMarkup ? renderToStaticMarkup(reactIcon) : '';
+ const componentIcon = componentDefinitions.find((component) => component.name === componentName)?.icon;
- return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
+ if (componentIcon) {
+ return componentIcon;
}
- if (TASK_DISPATCHER_NAMES.includes(componentName)) {
- return (
- taskDispatcherDefinitions.find((component) => component.name === componentName)?.icon ||
- defaultIcon
- );
- }
+ const svgString = renderToStaticMarkup(TYPE_ICONS.STRING);
- return componentDefinitions.find((component) => component.name === componentName)?.icon || defaultIcon;
+ return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
},
- [
- componentDefinitions,
- renderToStaticMarkup,
- taskDispatcherDefinitions,
- workflow.workflowTriggerComponentNames,
- ]
+ [componentDefinitions, taskDispatcherDefinitions, workflow.workflowTriggerComponentNames]
);
const {updateClusterElementParameterMutation, updateWorkflowNodeParameterMutation} = useWorkflowEditor();
@@ -430,13 +406,6 @@ const PropertyMentionsInputEditor = forwardRef).current = editor;
}
- // Load the function when component mounts
- useEffect(() => {
- import('react-dom/server').then(({renderToStaticMarkup}) => {
- setRenderToStaticMarkup(() => renderToStaticMarkup);
- });
- }, []);
-
useEffect(() => {
if (editor) {
editor.storage.MentionStorage.dataPills = dataPills;