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;