feat: lexical integrated

apps/app/components/project/issues/CreateUpdateIssueModal/SelectParentIssue.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+// react hook form
+import { Controller, Control } from "react-hook-form";
+// hooks
+import useUser from "lib/hooks/useUser";
+// types
+import type { IIssue } from "types";
+// icons
+import { UserIcon } from "@heroicons/react/24/outline";
+// components
+import IssuesListModal from "components/project/issues/IssuesListModal";
+
+type Props = {
+  control: Control<IIssue, any>;
+};
+
+const SelectParent: React.FC<Props> = ({ control }) => {
+  const [isIssueListModalOpen, setIsIssueListModalOpen] = useState(false);
+
+  const { issues } = useUser();
+
+  return (
+    <Controller
+      control={control}
+      name="parent"
+      render={({ field: { value, onChange } }) => (
+        <>
+          <IssuesListModal
+            isOpen={isIssueListModalOpen}
+            handleClose={() => setIsIssueListModalOpen(false)}
+            onChange={onChange}
+            issues={issues}
+          />
+          <button
+            type="button"
+            className="p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
+            onClick={() => setIsIssueListModalOpen(true)}
+          >
+            {value ? issues?.results.find((i) => i.id === value)?.name : "Select Parent Issue"}
+          </button>
+        </>
+      )}
+    />
+  );
+};
+
+export default SelectParent;