github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

migrated all components to use the common package

Browse Source
This commit is contained in:
Palanikannan1437 2023-09-22 16:45:09 +05:30
parent f0e246ccfd
commit fa01dfc652
19 changed files with 112 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
space/components/issues/peek-overview/comment/add-comment.tsx
View File

@ -11,7 +11,9 @@ import { SecondaryButton } from "components/ui";
// types
import { Comment } from "types/issue";
// components
import { TipTapEditor } from "components/tiptap";
import { TiptapEditorWithRef } from "@plane/editor";
// service
import fileService from "@/services/file.service";
const defaultValues: Partial<Comment> = {
comment_html: "",
@ -69,7 +71,9 @@ export const AddComment: React.FC<Props> = observer((props) => {
name="comment_html"
control={control}
render={({ field: { value, onChange } }) => (
<TipTapEditor
<TiptapEditorWithRef
uploadFile={fileService.uploadFile}
deleteFile={fileService.deleteImage}
workspaceSlug={workspace_slug as string}
ref={editorRef}
value={

13
space/components/issues/peek-overview/comment/comment-detail-card.tsx
View File

@ -9,7 +9,8 @@ import { Menu, Transition } from "@headlessui/react";
// lib
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { TipTapEditor } from "components/tiptap";
import { TiptapEditorWithRef } from "@plane/editor";
import { CommentReactions } from "components/issues/peek-overview";
// icons
import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon, EllipsisVerticalIcon } from "@heroicons/react/24/outline";
@ -17,6 +18,8 @@ import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon, EllipsisVerticalIcon
import { timeAgo } from "helpers/date-time.helper";
// types
import { Comment } from "types/issue";
// services
import fileService from "@/services/file.service";
type Props = {
workspaceSlug: string;
@ -100,7 +103,9 @@ export const CommentCard: React.FC<Props> = observer((props) => {
control={control}
name="comment_html"
render={({ field: { onChange, value } }) => (
<TipTapEditor
<TiptapEditorWithRef
uploadFile={fileService.uploadFile}
deleteFile={fileService.deleteImage}
workspaceSlug={workspaceSlug as string}
ref={editorRef}
value={value}
@ -131,7 +136,9 @@ export const CommentCard: React.FC<Props> = observer((props) => {
</div>
</form>
<div className={`${isEditing ? "hidden" : ""}`}>
<TipTapEditor
<TiptapEditorWithRef
uploadFile={fileService.uploadFile}
deleteFile={fileService.deleteImage}
workspaceSlug={workspaceSlug as string}
ref={showEditorRef}
value={comment.comment_html}

8
space/components/issues/peek-overview/issue-details.tsx
View File

@ -1,8 +1,10 @@
import { IssueReactions } from "components/issues/peek-overview";
import { TipTapEditor } from "components/tiptap";
import { TiptapEditor } from "@plane/editor";
import { useRouter } from "next/router";
// types
import { IIssue } from "types/issue";
// services
import fileService from "@/services/file.service";
type Props = {
issueDetails: IIssue;
@ -19,7 +21,9 @@ export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
</h6>
<h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4>
{issueDetails.description_html !== "" && issueDetails.description_html !== "<p></p>" && (
<TipTapEditor
<TiptapEditor
uploadFile={fileService.uploadFile}
deleteFile={fileService.deleteImage}
workspaceSlug={workspace_slug as string}
value={
!issueDetails.description_html ||

3
space/package.json
View File

@ -57,7 +57,8 @@
"tiptap-markdown": "^0.8.2",
"typescript": "4.9.5",
"use-debounce": "^9.0.4",
"uuid": "^9.0.0"
"uuid": "^9.0.0",
"@plane/editor": "*"
},
"devDependencies": {
"@types/js-cookie": "^3.0.3",

8
space/services/file.service.ts
View File

@ -25,9 +25,11 @@ interface UnSplashImageUrls {
small_s3: string;
}
class FileServices extends APIService {
class FileService extends APIService {
constructor() {
super(API_BASE_URL);
this.uploadFile = this.uploadFile.bind(this);
this.deleteImage = this.deleteImage.bind(this);
}
async uploadFile(workspaceSlug: string, file: FormData): Promise<any> {
@ -94,6 +96,6 @@ class FileServices extends APIService {
}
}
const fileServices = new FileServices();
const fileService = new FileService();
export default fileServices;
export default fileService;

15
web/components/core/modals/gpt-assistant-modal.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState, forwardRef, useRef } from "react";
import React, { useEffect, useState, useRef } from "react";
import { useRouter } from "next/router";
// react-hook-form
import { useForm } from "react-hook-form";
@ -10,9 +10,12 @@ import useToast from "hooks/use-toast";
import useUserAuth from "hooks/use-user-auth";
// ui
import { Input, PrimaryButton, SecondaryButton } from "components/ui";
import { TipTapEditor } from "components/tiptap";
// components
import { TiptapEditor, TiptapEditorWithRef } from "@plane/editor";
// types
import { IIssue, IPageBlock } from "types";
// services
import fileService from "@/services/file.service";
type Props = {
isOpen: boolean;
@ -140,7 +143,9 @@ export const GptAssistantModal: React.FC<Props> = ({
{((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
<div className="text-sm">
Content:
<TipTapEditor
<TiptapEditorWithRef
uploadFile={fileService.uploadFile}
deleteFile={fileService.deleteImage}
workspaceSlug={workspaceSlug as string}
value={htmlContent ?? `<p>${content}</p>`}
customClassName="-m-3"
@ -154,7 +159,9 @@ export const GptAssistantModal: React.FC<Props> = ({
{response !== "" && (
<div className="page-block-section text-sm">
Response:
<TipTapEditor
<TiptapEditor
uploadFile={fileService.uploadFile}
deleteFile={fileService.deleteImage}
workspaceSlug={workspaceSlug as string}
value={`<p>${response}</p>`}
customClassName="-mx-3 -my-3"

10
web/components/core/modals/image-upload-modal.tsx
View File

@ -7,7 +7,7 @@ import { useDropzone } from "react-dropzone";
// headless ui
import { Transition, Dialog } from "@headlessui/react";
// services
import fileServices from "services/file.service";
import fileService from "services/file.service";
// hooks
import useWorkspaceDetails from "hooks/use-workspace-details";
// ui
@ -64,7 +64,7 @@ export const ImageUploadModal: React.FC<Props> = ({
formData.append("attributes", JSON.stringify({}));
if (userImage) {
fileServices
fileService
.uploadUserFile(formData)
.then((res) => {
const imageUrl = res.asset;
@ -73,13 +73,13 @@ export const ImageUploadModal: React.FC<Props> = ({
setIsImageUploading(false);
setImage(null);
if (value) fileServices.deleteUserFile(value);
if (value) fileService.deleteUserFile(value);
})
.catch((err) => {
console.error(err);
});
} else
fileServices
fileService
.uploadFile(workspaceSlug as string, formData)
.then((res) => {
const imageUrl = res.asset;
@ -87,7 +87,7 @@ export const ImageUploadModal: React.FC<Props> = ({
setIsImageUploading(false);
setImage(null);
if (value && workspaceDetails) fileServices.deleteFile(workspaceDetails.id, value);
if (value && workspaceDetails) fileService.deleteFile(workspaceDetails.id, value);
})
.catch((err) => {
console.error(err);

8
web/components/issues/comment/add-comment.tsx
View File

@ -3,11 +3,13 @@ import { useRouter } from "next/router";
// react-hook-form
import { useForm, Controller } from "react-hook-form";
// components
import { TipTapEditor } from "components/tiptap";
import { TiptapEditorWithRef } from "@plane/editor";
// ui
import { Icon, SecondaryButton, Tooltip } from "components/ui";
// types
import type { IIssueComment } from "types";
// services
import fileService from "@/services/file.service";
const defaultValues: Partial<IIssueComment> = {
access: "INTERNAL",
@ -100,7 +102,9 @@ export const AddComment: React.FC<Props> = ({
name="comment_html"
control={control}
render={({ field: { value, onChange } }) => (
<TipTapEditor
<TiptapEditorWithRef
uploadFile={fileService.uploadFile}
deleteFile={fileService.deleteImage}
workspaceSlug={workspaceSlug as string}
ref={editorRef}
value={!value || value === "" ? "<p></p>" : value}

12
web/components/issues/comment/comment-card.tsx
View File

@ -9,11 +9,13 @@ import useUser from "hooks/use-user";
// ui
import { CustomMenu, Icon } from "components/ui";
import { CommentReaction } from "components/issues";
import { TipTapEditor } from "components/tiptap";
import { TiptapEditorWithRef } from "@plane/editor";
// helpers
import { timeAgo } from "helpers/date-time.helper";
// types
import type { IIssueComment } from "types";
// services
import fileService from "@/services/file.service";
type Props = {
comment: IIssueComment;
@ -110,7 +112,9 @@ export const CommentCard: React.FC<Props> = ({
onSubmit={handleSubmit(onEnter)}
>
<div>
<TipTapEditor
<TiptapEditorWithRef
uploadFile={fileService.uploadFile}
deleteFile={fileService.deleteImage}
workspaceSlug={workspaceSlug as string}
ref={editorRef}
value={watch("comment_html")}
@ -148,7 +152,9 @@ export const CommentCard: React.FC<Props> = ({
/>
</div>
)}
<TipTapEditor
<TiptapEditorWithRef
uploadFile={fileService.uploadFile}
deleteFile={fileService.deleteImage}
workspaceSlug={workspaceSlug as string}
ref={showEditorRef}
value={comment.comment_html}

9
web/components/issues/draft-issue-form.tsx
View File

@ -24,11 +24,14 @@ import { CreateStateModal } from "components/states";
import { CreateLabelModal } from "components/labels";
// ui
import { CustomMenu, Input, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
import { TipTapEditor } from "components/tiptap";
// components
import { TiptapEditorWithRef } from "@plane/editor";
// icons
import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
// types
import type { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
// services
import fileService from "@/services/file.service";
const defaultValues: Partial<IIssue> = {
project: "",
@ -381,7 +384,9 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
if (!value && !watch("description_html")) return <></>;
return (
<TipTapEditor
<TiptapEditorWithRef
uploadFile={fileService.uploadFile}
deleteFile={fileService.deleteImage}
workspaceSlug={workspaceSlug as string}
ref={editorRef}
debouncedUpdatesEnabled={false}

10
web/components/issues/form.tsx
View File

@ -24,11 +24,15 @@ import { CreateStateModal } from "components/states";
import { CreateLabelModal } from "components/labels";
// ui
import { CustomMenu, Input, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
import { TipTapEditor } from "components/tiptap";
// components
import { TiptapEditorWithRef } from "@plane/editor";
// icons
import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
// types
import type { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
// services
import fileService from "@/services/file.service";
const defaultValues: Partial<IIssue> = {
project: "",
@ -380,7 +384,9 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
if (!value && !watch("description_html")) return <></>;
return (
<TipTapEditor
<TiptapEditorWithRef
uploadFile={fileService.uploadFile}
deleteFile={fileService.deleteImage}
workspaceSlug={workspaceSlug as string}
ref={editorRef}
debouncedUpdatesEnabled={false}

12
web/components/pages/create-update-block-inline.tsx
View File

@ -11,12 +11,14 @@ import aiService from "services/ai.service";
import useToast from "hooks/use-toast";
// components
import { GptAssistantModal } from "components/core";
import { TipTapEditor } from "components/tiptap";
import { TiptapEditorWithRef } from "@plane/editor";
import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
// types
import { ICurrentUserResponse, IPageBlock } from "types";
// fetch-keys
import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
// services
import fileService from "@/services/file.service";
type Props = {
handleClose: () => void;
@ -279,7 +281,9 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
render={({ field: { value, onChange } }) => {
if (!data)
return (
<TipTapEditor
<TiptapEditorWithRef
uploadFile={fileService.uploadFile}
deleteFile={fileService.deleteImage}
workspaceSlug={workspaceSlug as string}
ref={editorRef}
value={"<p></p>"}
@ -299,7 +303,9 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
);
return (
<TipTapEditor
<TiptapEditorWithRef
uploadFile={fileService.uploadFile}
deleteFile={fileService.deleteImage}
workspaceSlug={workspaceSlug as string}
ref={editorRef}
value={

7
web/components/pages/single-page-block.tsx
View File

@ -19,7 +19,7 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
// components
import { GptAssistantModal } from "components/core";
import { CreateUpdateBlockInline } from "components/pages";
import { TipTapEditor } from "components/tiptap";
import { TiptapEditor } from "@plane/editor";
// ui
import { CustomMenu, TextArea } from "components/ui";
// icons
@ -39,6 +39,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
import { ICurrentUserResponse, IIssue, IPageBlock, IProject } from "types";
// fetch-keys
import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
import fileService from "@/services/file.service";
type Props = {
block: IPageBlock;
@ -451,7 +452,9 @@ export const SinglePageBlock: React.FC<Props> = ({
{showBlockDetails
? block.description_html.length > 7 && (
<TipTapEditor
<TiptapEditor
uploadFile={fileService.uploadFile}
deleteFile={fileService.deleteImage}
workspaceSlug={workspaceSlug as string}
value={block.description_html}
customClassName="text-sm min-h-[150px]"

2
web/components/tiptap/index.tsx
View File

@ -1,4 +1,4 @@
import { useImperativeHandle, useRef, forwardRef, useEffect } from "react";
import { useImperativeHandle, useRef, forwardRef } from "react";
import { useEditor, EditorContent, Editor } from "@tiptap/react";
import { useDebouncedCallback } from "use-debounce";
// components

8
web/components/web-view/issue-web-view-form.tsx
View File

@ -16,11 +16,13 @@ import useReloadConfirmations from "hooks/use-reload-confirmation";
import { TextArea } from "components/ui";
// components
import { TipTapEditor } from "components/tiptap";
import { TiptapEditor } from "@plane/editor";
import { Label } from "components/web-view";
// types
import type { IIssue } from "types";
// services
import fileService from "@/services/file.service";
type Props = {
isAllowed: boolean;
@ -121,7 +123,9 @@ export const IssueWebViewForm: React.FC<Props> = (props) => {
if (!value) return <></>;
return (
<TipTapEditor
<TiptapEditor
uploadFile={fileService.uploadFile}
deleteFile={fileService.deleteImage}
value={
!value ||
value === "" ||

7
web/pages/[workspaceSlug]/editor.tsx
View File

@ -1,4 +1,4 @@
import { TipTapEditor } from "components/tiptap";
import { TiptapEditor } from "@plane/editor";
import type { NextPage } from "next";
import { useCallback, useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
@ -11,6 +11,7 @@ import DefaultLayout from "layouts/default-layout";
import Image from "next/image";
import userService from "services/user.service";
import { useRouter } from "next/router";
import fileService from "@/services/file.service";
const Editor: NextPage = () => {
const [user, setUser] = useState<ICurrentUserResponse | undefined>();
@ -134,7 +135,9 @@ const Editor: NextPage = () => {
name="description_html"
control={control}
render={({ field: { value, onChange } }) => (
<TipTapEditor
<TiptapEditor
uploadFile={fileService.uploadFile}
deleteFile={fileService.deleteImage}
borderOnFocus={false}
value={
!value ||

2
web/pages/[workspaceSlug]/me/profile/activity.tsx
View File

@ -10,7 +10,6 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
// components
import { ActivityIcon, ActivityMessage } from "components/core";
import { TiptapEditor } from "@plane/editor";
// import { TipTapEditor } from "components/tiptap";
// icons
import { ArrowTopRightOnSquareIcon, ChatBubbleLeftEllipsisIcon } from "@heroicons/react/24/outline";
// ui
@ -21,6 +20,7 @@ import { USER_ACTIVITY } from "constants/fetch-keys";
// helper
import { timeAgo } from "helpers/date-time.helper";
import { SettingsSidebar } from "components/project";
// services
import fileService from "@/services/file.service";
const ProfileActivity = () => {

8
web/pages/m/[workspaceSlug]/editor.tsx
View File

@ -14,8 +14,10 @@ import { Controller, useForm } from "react-hook-form";
import WebViewLayout from "layouts/web-view-layout";
// components
import { TipTapEditor } from "components/tiptap";
import { TiptapEditor } from "@plane/editor";
import { PrimaryButton, Spinner } from "components/ui";
// services
import fileService from "@/services/file.service";
const Editor: NextPage = () => {
const [isLoading, setIsLoading] = useState(false);
@ -52,7 +54,9 @@ const Editor: NextPage = () => {
name="data_html"
control={control}
render={({ field: { value, onChange } }) => (
<TipTapEditor
<TiptapEditor
uploadFile={fileService.uploadFile}
deleteFile={fileService.deleteImage}
borderOnFocus={false}
value={
!value ||

6
web/services/file.service.ts
View File

@ -26,7 +26,7 @@ interface UnSplashImageUrls {
small_s3: string;
}
class FileServices extends APIService {
class FileService extends APIService {
constructor() {
super(API_BASE_URL);
this.uploadFile = this.uploadFile.bind(this);
@ -97,4 +97,6 @@ class FileServices extends APIService {
}
}
export default new FileServices();
const fileService = new FileService();
export default fileService;