feat: add the new @mention functionality to display recall values based on dummy options

2026-04-18 19:41:17 -05:00 · 2023-11-22 18:05:28 +05:30
parent 3f8bf4c34c
commit f4f55481d6
3 changed files with 112 additions and 9 deletions
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionFormInput.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionFormInput.tsx
@@ -2,10 +2,11 @@

 import { TSurveyQuestion } from "@formbricks/types/surveys";
 import FileInput from "@formbricks/ui/FileInput";
-import { Input } from "@formbricks/ui/Input";
+// import { Input } from "@formbricks/ui/Input";
 import { Label } from "@formbricks/ui/Label";
 import { ImagePlusIcon } from "lucide-react";
 import { RefObject, useState } from "react";
+import { MentionsInput, Mention } from "react-mentions";

 interface QuestionFormInputProps {
  question: TSurveyQuestion;
@@ -26,6 +27,14 @@ const QuestionFormInput = ({
 }: QuestionFormInputProps) => {
  const [showImageUploader, setShowImageUploader] = useState<boolean>(!!question.imageUrl);

+  const data = [
+    { id: "question 1", display: "question 1" },
+    { id: "question 2", display: "question 2" },
+    { id: "question 3", display: "question 3" },
+    { id: "question 4", display: "question 4" },
+    { id: "question 5", display: "question 5" },
+  ];
+
  return (
    <div className="mt-3">
      <Label htmlFor="headline">Question</Label>
@@ -42,7 +51,7 @@ const QuestionFormInput = ({
          />
        )}
        <div className="flex items-center space-x-2">
-          <Input
+          {/* <Input
            autoFocus
            ref={ref}
            id="headline"
@@ -50,7 +59,52 @@ const QuestionFormInput = ({
            value={question.headline}
            onChange={(e) => updateQuestion(questionIdx, { headline: e.target.value })}
            isInvalid={isInValid && question.headline.trim() === ""}
-          />
+          /> */}
+          <MentionsInput
+            autoFocus
+            // ref={ref}
+            id="headline"
+            name="headline"
+            value={question.headline}
+            onChange={(event) => {
+              updateQuestion(questionIdx, {
+                headline: event.target.value,
+              });
+            }}
+            style={{
+              width: "100%",
+              border: "1px rgb(203 213 225) solid",
+              borderRadius: "4px",
+              textArea: {
+                border: "none",
+                marginBottom: "1rem",
+              },
+              suggestions: {
+                list: {
+                  backgroundColor: "white",
+                  fontSize: 14,
+                },
+                item: {
+                  padding: "5px 15px",
+                  "&focused": {
+                    backgroundColor: "#cee4e5",
+                  },
+                },
+              },
+            }}>
+            <Mention
+              data={data}
+              trigger="@"
+              appendSpaceOnAdd
+              markup="[__display__]"
+              displayTransform={(_, display: string) => display}
+              style={{
+                backgroundColor: "#cee4e5",
+                padding: "0.2rem",
+                marginLeft: "0.5rem",
+              }}
+            />
+          </MentionsInput>
          <ImagePlusIcon
            aria-label="Toggle image uploader"
            className="ml-2 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -52,6 +52,7 @@
    "react-hook-form": "^7.48.2",
    "react-hot-toast": "^2.4.1",
    "react-icons": "^4.12.0",
+    "react-mentions": "^4.4.10",
    "ua-parser-js": "^1.0.37",
    "webpack": "^5.89.0",
    "xlsx": "^0.18.5"
@@ -62,6 +63,7 @@
    "@types/lodash": "^4.14.201",
    "@types/markdown-it": "^13.0.6",
    "@types/qrcode": "^1.5.5",
+    "@types/react-mentions": "^4.1.13",
    "eslint-config-formbricks": "workspace:*"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -404,6 +404,9 @@ importers:
      react-icons:
        specifier: ^4.12.0
        version: 4.12.0(react@18.2.0)
+      react-mentions:
+        specifier: ^4.4.10
+        version: 4.4.10(react-dom@18.2.0)(react@18.2.0)
      ua-parser-js:
        specifier: ^1.0.37
        version: 1.0.37
@@ -429,6 +432,9 @@ importers:
      '@types/qrcode':
        specifier: ^1.5.5
        version: 1.5.5
+      '@types/react-mentions':
+        specifier: ^4.1.13
+        version: 4.1.13
      eslint-config-formbricks:
        specifier: workspace:*
        version: link:../../packages/eslint-config-formbricks
@@ -526,7 +532,7 @@ importers:
        version: 9.0.0(eslint@8.53.0)
      eslint-config-turbo:
        specifier: latest
-        version: 1.8.8(eslint@8.53.0)
+        version: 1.10.15(eslint@8.53.0)
      eslint-plugin-react:
        specifier: 7.33.2
        version: 7.33.2(eslint@8.53.0)
@@ -3027,6 +3033,12 @@ packages:
    dependencies:
      regenerator-runtime: 0.14.0

+  /@babel/runtime@7.4.5:
+    resolution: {integrity: sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==}
+    dependencies:
+      regenerator-runtime: 0.13.11
+    dev: false
+
  /@babel/template@7.22.15:
    resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==}
    engines: {node: '>=6.9.0'}
@@ -9201,6 +9213,12 @@ packages:
      '@types/react': 18.2.28
    dev: false

+  /@types/react-mentions@4.1.13:
+    resolution: {integrity: sha512-kRulAAjlmhCtsJ9bapO0foocknaE/rEuFKpmFEU81fBfnXZmZNBaJ9J/DBjwigT3WDHjQVUmYoi5sxEXrcdzAw==}
+    dependencies:
+      '@types/react': 18.2.37
+    dev: true
+
  /@types/react-redux@7.1.28:
    resolution: {integrity: sha512-EQr7cChVzVUuqbA+J8ArWK1H0hLAHKOs21SIMrskKZ3nHNeE+LFYA+IsoZGhVOT8Ktjn3M20v4rnZKN3fLbypw==}
    dependencies:
@@ -12930,13 +12948,13 @@ packages:
    resolution: {integrity: sha512-NB/L/1Y30qyJcG5xZxCJKW/+bqyj+llbcCwo9DEz8bESIP0SLTOQ8T1DWCCFc+wJ61AMEstj4511PSScqMMfCw==}
    dev: true

-  /eslint-config-turbo@1.8.8(eslint@8.53.0):
-    resolution: {integrity: sha512-+yT22sHOT5iC1sbBXfLIdXfbZuiv9bAyOXsxTxFCWelTeFFnANqmuKB3x274CFvf7WRuZ/vYP/VMjzU9xnFnxA==}
+  /eslint-config-turbo@1.10.15(eslint@8.53.0):
+    resolution: {integrity: sha512-76mpx2x818JZE26euen14utYcFDxOahZ9NaWA+6Xa4pY2ezVKVschuOxS96EQz3o3ZRSmcgBOapw/gHbN+EKxQ==}
    peerDependencies:
      eslint: '>6.6.0'
    dependencies:
      eslint: 8.53.0
-      eslint-plugin-turbo: 1.8.8(eslint@8.53.0)
+      eslint-plugin-turbo: 1.10.15(eslint@8.53.0)
    dev: true

  /eslint-import-resolver-node@0.3.9:
@@ -13138,11 +13156,12 @@ packages:
      - typescript
    dev: true

-  /eslint-plugin-turbo@1.8.8(eslint@8.53.0):
-    resolution: {integrity: sha512-zqyTIvveOY4YU5jviDWw9GXHd4RiKmfEgwsjBrV/a965w0PpDwJgEUoSMB/C/dU310Sv9mF3DSdEjxjJLaw6rA==}
+  /eslint-plugin-turbo@1.10.15(eslint@8.53.0):
+    resolution: {integrity: sha512-Tv4QSKV/U56qGcTqS/UgOvb9HcKFmWOQcVh3HEaj7of94lfaENgfrtK48E2CckQf7amhKs1i+imhCsNCKjkQyA==}
    peerDependencies:
      eslint: '>6.6.0'
    dependencies:
+      dotenv: 16.0.3
      eslint: 8.53.0
    dev: true

@@ -19911,6 +19930,20 @@ packages:
      - supports-color
    dev: false

+  /react-mentions@4.4.10(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-JHiQlgF1oSZR7VYPjq32wy97z1w1oE4x10EuhKjPr4WUKhVzG1uFQhQjKqjQkbVqJrmahf+ldgBTv36NrkpKpA==}
+    peerDependencies:
+      react: '>=16.8.3'
+      react-dom: '>=16.8.3'
+    dependencies:
+      '@babel/runtime': 7.4.5
+      invariant: 2.2.4
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      substyle: 9.4.1(react@18.2.0)
+    dev: false
+
  /react-radio-group@3.0.3(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-MUNRRjZqQ2y+1K6rBuH0zO+gLVmCnWIcc5GnNwr9WNoUwZ9FUAKJ1UfsKXwYS93whR6/qrZKoVgiOltRkbzezw==}
    peerDependencies:
@@ -20235,6 +20268,10 @@ packages:
  /regenerate@1.4.2:
    resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==}

+  /regenerator-runtime@0.13.11:
+    resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
+    dev: false
+
  /regenerator-runtime@0.14.0:
    resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}

@@ -21653,6 +21690,16 @@ packages:
    resolution: {integrity: sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==}
    dev: false

+  /substyle@9.4.1(react@18.2.0):
+    resolution: {integrity: sha512-VOngeq/W1/UkxiGzeqVvDbGDPM8XgUyJVWjrqeh+GgKqspEPiLYndK+XRcsKUHM5Muz/++1ctJ1QCF/OqRiKWA==}
+    peerDependencies:
+      react: '>=16.8.3'
+    dependencies:
+      '@babel/runtime': 7.23.2
+      invariant: 2.2.4
+      react: 18.2.0
+    dev: false
+
  /sucrase@3.34.0:
    resolution: {integrity: sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==}
    engines: {node: '>=8'}