thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: issue description placeholder (#4312)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2024-04-30 17:21:52 +05:30 committed by GitHub
parent 87a606446f
commit 4f4f1d92e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 28 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/editor/core/src/hooks/use-editor.tsx
View File

@ -34,7 +34,7 @@ interface CustomEditorProps {
suggestions?: () => Promise<IMentionSuggestion[]>;
};
handleEditorReady?: (value: boolean) => void;
placeholder?: string | ((isFocused: boolean) => string);
placeholder?: string | ((isFocused: boolean, value: string) => string);
tabIndex?: number;
}

4
packages/editor/core/src/ui/extensions/index.tsx
View File

@ -43,7 +43,7 @@ type TArguments = {
cancelUploadImage?: () => void;
uploadFile: UploadImage;
};
placeholder?: string | ((isFocused: boolean) => string);
placeholder?: string | ((isFocused: boolean, value: string) => string);
tabIndex?: number;
};
@ -147,7 +147,7 @@ export const CoreEditorExtensions = ({
if (placeholder) {
if (typeof placeholder === "string") return placeholder;
else return placeholder(editor.isFocused);
else return placeholder(editor.isFocused, editor.getHTML());
}
return "Press '/' for commands...";

2
packages/editor/document-editor/src/ui/index.tsx
View File

@ -31,7 +31,7 @@ interface IDocumentEditor {
suggestions: () => Promise<IMentionSuggestion[]>;
};
tabIndex?: number;
placeholder?: string | ((isFocused: boolean) => string);
placeholder?: string | ((isFocused: boolean, value: string) => string);
}
const DocumentEditor = (props: IDocumentEditor) => {

2
packages/editor/lite-text-editor/src/ui/index.tsx
View File

@ -32,7 +32,7 @@ export interface ILiteTextEditor {
suggestions?: () => Promise<IMentionSuggestion[]>;
};
tabIndex?: number;
placeholder?: string | ((isFocused: boolean) => string);
placeholder?: string | ((isFocused: boolean, value: string) => string);
}
const LiteTextEditor = (props: ILiteTextEditor) => {

2
packages/editor/rich-text-editor/src/ui/index.tsx
View File

@ -35,7 +35,7 @@ export type IRichTextEditor = {
highlights: () => Promise<IMentionHighlight[]>;
suggestions: () => Promise<IMentionSuggestion[]>;
};
placeholder?: string | ((isFocused: boolean) => string);
placeholder?: string | ((isFocused: boolean, value: string) => string);
tabIndex?: number;
};

7
web/components/inbox/modals/create-edit-modal/issue-description.tsx
View File

@ -5,6 +5,8 @@ import { TIssue } from "@plane/types";
import { Loader } from "@plane/ui";
// components
import { RichTextEditor } from "@/components/editor/rich-text-editor/rich-text-editor";
// helpers
import { getDescriptionPlaceholder } from "@/helpers/issue.helper";
// hooks
import { useProjectInbox } from "@/hooks/store";
@ -39,10 +41,7 @@ export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props
projectId={projectId}
dragDropEnabled={false}
onChange={(_description: object, description_html: string) => handleData("description_html", description_html)}
placeholder={(isFocused) => {
if (isFocused) return "Press '/' for commands...";
else return "Click to add description";
}}
placeholder={getDescriptionPlaceholder}
/>
</div>
);

11
web/components/issues/description-input.tsx
View File

@ -9,6 +9,8 @@ import { Loader } from "@plane/ui";
// components
import { RichTextEditor, RichTextReadOnlyEditor } from "@/components/editor";
import { TIssueOperations } from "@/components/issues/issue-detail";
// helpers
import { getDescriptionPlaceholder } from "@/helpers/issue.helper";
// hooks
import { useWorkspace } from "@/hooks/store";
@ -19,7 +21,7 @@ export type IssueDescriptionInputProps = {
initialValue: string | undefined;
disabled?: boolean;
issueOperations: TIssueOperations;
placeholder?: string | ((isFocused: boolean) => string);
placeholder?: string | ((isFocused: boolean, value: string) => string);
setIsSubmitting: (initialValue: "submitting" | "submitted" | "saved") => void;
swrIssueDescription: string | null | undefined;
};
@ -106,12 +108,7 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((p
debouncedFormSave();
}}
placeholder={
placeholder
? placeholder
: (isFocused) => {
if (isFocused) return "Press '/' for commands...";
else return "Click to add description";
}
placeholder ? placeholder : (isFocused, value) => getDescriptionPlaceholder(isFocused, value)
}
/>
) : (

8
web/components/issues/issue-modal/form.tsx
View File

@ -23,7 +23,7 @@ import { ParentIssuesListModal } from "@/components/issues";
import { IssueLabelSelect } from "@/components/issues/select";
import { CreateLabelModal } from "@/components/labels";
import { renderFormattedPayloadDate, getDate } from "@/helpers/date-time.helper";
import { getChangedIssuefields } from "@/helpers/issue.helper";
import { getChangedIssuefields, getDescriptionPlaceholder } from "@/helpers/issue.helper";
import { shouldRenderProject } from "@/helpers/project.helper";
import { useApplication, useEstimate, useIssueDetail, useProject, useWorkspace } from "@/hooks/store";
import { useProjectIssueProperties } from "@/hooks/use-project-issue-properties";
@ -473,17 +473,13 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
workspaceSlug={workspaceSlug?.toString() as string}
workspaceId={workspaceId}
projectId={projectId}
// dragDropEnabled={false}
onChange={(_description: object, description_html: string) => {
onChange(description_html);
handleFormChange();
}}
ref={editorRef}
tabIndex={getTabIndex("description_html")}
placeholder={(isFocused) => {
if (isFocused) return "Press '/' for commands...";
else return "Click to add description";
}}
placeholder={getDescriptionPlaceholder}
/>
)}
/>

20
web/helpers/issue.helper.ts
View File

@ -1,13 +1,6 @@
import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
import { v4 as uuidv4 } from "uuid";
// helpers
import { getDate } from "@/helpers/date-time.helper";
import { orderArrayBy } from "@/helpers/array.helper";
// types
import { IGanttBlock } from "@/components/gantt-chart";
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
import { STATE_GROUPS } from "@/constants/state";
import {
TIssue,
TIssueGroupByOptions,
@ -16,6 +9,13 @@ import {
TIssueParams,
TStateGroups,
} from "@plane/types";
import { IGanttBlock } from "@/components/gantt-chart";
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
import { STATE_GROUPS } from "@/constants/state";
// helpers
import { orderArrayBy } from "@/helpers/array.helper";
import { getDate } from "@/helpers/date-time.helper";
type THandleIssuesMutation = (
formData: Partial<TIssue>,
@ -205,3 +205,9 @@ export const formatTextList = (TextArray: string[]): string => {
return `${TextArray.slice(0, 3).join(", ")}, and +${count - 3} more`;
}
};
export const getDescriptionPlaceholder = (isFocused: boolean, description: string | undefined): string => {
const isDescriptionEmpty = !description || description === "<p></p>" || description.trim() === "";
if (!isDescriptionEmpty || isFocused) return "Press '/' for commands...";
else return "Click to add description";
};