1062

client/package.json

@@ -72,8 +72,13 @@
     "@tanstack/react-table": "^8.20.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/user-event": "^14.5.2",
+    "@tiptap/extension-mention": "^2.10.4",
+    "@tiptap/extension-placeholder": "^2.10.4",
+    "@tiptap/pm": "^2.10.4",
+    "@tiptap/react": "^2.10.4",
+    "@tiptap/starter-kit": "^2.10.4",
+    "@tiptap/suggestion": "^2.10.4",
     "@types/d3": "^7.4.3",
-    "@types/quill": "^2.0.14",
     "@uidotdev/usehooks": "^2.4.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -89,8 +94,6 @@
     "monaco-editor": "^0.52.0",
     "monaco-yaml": "^5.2.3",
     "posthog-js": "^1.194.5",
-    "quill-mention": "^4.1.0",
-    "quill-paste-smart": "^1.4.12",
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
@@ -99,7 +102,6 @@
     "react-i18next": "^15.1.3",
     "react-inlinesvg": "^4.1.5",
     "react-json-view": "^1.21.3",
-    "react-quill": "^2.0.0",
     "react-resizable-panels": "^2.1.7",
     "react-router-dom": "^7.0.2",
     "react-select": "^5.8.3",
@@ -108,6 +110,7 @@
     "requireindex": "^1.2.0",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
+    "tippy.js": "^6.3.7",
     "use-debounce": "^10.0.4",
     "vite-plugin-svgr": "^4.3.0",
     "whatwg-fetch": "^3.6.20",
@@ -129,6 +132,7 @@
     "@storybook/test": "^8.4.7",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/line-clamp": "^0.4.4",
+    "@tailwindcss/typography": "^0.5.15",
     "@tanstack/eslint-plugin-query": "^5.62.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",

client/src/pages/platform/workflow-editor/components/DataPill.tsx

@@ -2,6 +2,7 @@ import useWorkflowNodeDetailsPanelStore from '@/pages/platform/workflow-editor/s
 import getNestedObject from '@/pages/platform/workflow-editor/utils/getNestedObject';
 import {TYPE_ICONS} from '@/shared/typeIcons';
 import {PropertyAllType} from '@/shared/types';
+import {Editor} from '@tiptap/react';
 import resolvePath from 'object-resolve-path';
 import {MouseEvent} from 'react';
 import {twMerge} from 'tailwind-merge';
@@ -27,7 +28,7 @@ const DataPill = ({
 }) => {
     const {currentComponent, focusedInput} = useWorkflowNodeDetailsPanelStore();
 
-    const mentionInput = focusedInput?.getEditor().getModule('mention');
+    const mentionInput: Editor | null = focusedInput;
 
     const subProperties = property?.properties || property?.items;
 
@@ -50,29 +51,31 @@ const DataPill = ({
             : `${propertyName || workflowNodeName}`;
 
         const value = propertyName
-            ? `${workflowNodeName}.${(path || dataPillName).replaceAll('/', '.').replaceAll('.[index]', '[index]')}`
+            ? `${workflowNodeName}.${(path || dataPillName).replaceAll('/', '.').replaceAll('.[index]', '[0]')}`
             : workflowNodeName;
 
         const parameters = currentComponent?.parameters || {};
 
         if (Object.keys(parameters).length) {
-            const paramValue = resolvePath(parameters, mentionInput.options.path);
+            const attributes = mentionInput.view.props.attributes as {[name: string]: string};
 
-            if (mentionInput.options.singleMention && paramValue) {
+            const paramValue = resolvePath(parameters, attributes.path);
+
+            if (attributes.type !== 'STRING' && paramValue) {
                 return;
             }
         }
 
-        mentionInput.insertItem(
-            {
-                componentIcon,
-                id: propertyName || workflowNodeName,
-                nodeName: workflowNodeName,
-                value,
-            },
-            true,
-            {blotName: 'property-mention'}
-        );
+        mentionInput
+            .chain()
+            .focus()
+            .insertContent({
+                attrs: {
+                    id: value,
+                },
+                type: 'mention',
+            })
+            .run();
     };
 
     const getSubPropertyPath = (subPropertyName = '[index]') =>