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

added tiptap support for plane pages

Browse Source
This commit is contained in:
Palanikannan1437 2023-08-10 01:21:36 +05:30
parent 95358503ed
commit c2a4cdfebb
2 changed files with 116 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
apps/app/components/pages/create-update-block-inline.tsx
View File

@ -23,6 +23,7 @@ import { Loader, PrimaryButton, SecondaryButton, TextArea } from "components/ui"
import { ICurrentUserResponse, IPageBlock } from "types"; import { ICurrentUserResponse, IPageBlock } from "types";
// fetch-keys // fetch-keys
import { PAGE_BLOCKS_LIST } from "constants/fetch-keys"; import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
type Props = { type Props = {
handleClose: () => void; handleClose: () => void;
@ -56,6 +57,13 @@ const defaultValues = {
// //
// WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor"; // WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
const TiptapEditor = React.forwardRef<
ITiptapRichTextEditor,
ITiptapRichTextEditor
>((props, ref) => <Tiptap {...props} forwardedRef={ref} />);
TiptapEditor.displayName = "TiptapEditor";
export const CreateUpdateBlockInline: React.FC<Props> = ({ export const CreateUpdateBlockInline: React.FC<Props> = ({
handleClose, handleClose,
data, data,
@ -242,9 +250,9 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
description: description:
!data.description || data.description === "" !data.description || data.description === ""
? { ? {
type: "doc", type: "doc",
content: [{ type: "paragraph" }], content: [{ type: "paragraph" }],
} }
: data.description, : data.description,
description_html: data.description_html ?? "<p></p>", description_html: data.description_html ?? "<p></p>",
}); });
@ -296,57 +304,86 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
/> />
</div> </div>
<div className="page-block-section relative -mt-2 text-custom-text-200"> <div className="page-block-section relative -mt-2 text-custom-text-200">
{/* <Controller */} <Controller
{/* name="description" */} name="description_html"
{/* control={control} */} control={control}
{/* render={({ field: { value } }) => { */} render={({ field: { value, onChange } }) => {
{/* if (!data) */} if (!data)
{/* return ( */} return (
{/* <WrappedRemirrorRichTextEditor */} <TiptapEditor
{/* value={{ */} ref={editorRef}
{/* type: "doc", */} value={"<p></p>"}
{/* content: [{ type: "paragraph" }], */} debouncedUpdatesEnabled={false}
{/* }} */} customClassName="text-sm"
{/* onJSONChange={(jsonValue) => setValue("description", jsonValue)} */} noBorder
{/* onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)} */} borderOnFocus={false}
{/* placeholder="Write something..." */} onChange={(description: Object, description_html: string) => {
{/* customClassName="text-sm" */} onChange(description_html);
{/* noBorder */} setValue("description", description);
{/* borderOnFocus={false} */} }}
{/* ref={editorRef} */} />
{/* /> */} // <WrappedRemirrorRichTextEditor
{/* ); */} // value={{
{/* else if (!value || !watch("description_html")) */} // type: "doc",
{/* return ( */} // content: [{ type: "paragraph" }],
{/* <div className="h-32 w-full flex items-center justify-center text-custom-text-200 text-sm" /> */} // }}
{/* ); */} // onJSONChange={(jsonValue) => setValue("description", jsonValue)}
{/**/} // onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
{/* return ( */} // placeholder="Write something..."
{/* <WrappedRemirrorRichTextEditor */} // customClassName="text-sm"
{/* value={ */} // noBorder
{/* value && value !== "" && Object.keys(value).length > 0 */} // borderOnFocus={false}
{/* ? value */} // ref={editorRef}
{/* : watch("description_html") && watch("description_html") !== "" */} // />
{/* ? watch("description_html") */} );
{/* : { type: "doc", content: [{ type: "paragraph" }] } */} else if (!value || !watch("description_html"))
{/* } */} return (
{/* onJSONChange={(jsonValue) => setValue("description", jsonValue)} */} <div className="h-32 w-full flex items-center justify-center text-custom-text-200 text-sm" />
{/* onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)} */} );
{/* placeholder="Write something..." */}
{/* customClassName="text-sm" */} return (
{/* noBorder */} <TiptapEditor
{/* borderOnFocus={false} */} ref={editorRef}
{/* ref={editorRef} */} value={
{/* /> */} value && value !== "" && Object.keys(value).length > 0
{/* ); */} ? value
{/* }} */} : watch("description_html") && watch("description_html") !== ""
{/* /> */} ? watch("description_html")
: { type: "doc", content: [{ type: "paragraph" }] }
}
debouncedUpdatesEnabled={false}
customClassName="text-sm"
noBorder
borderOnFocus={false}
onChange={(description: Object, description_html: string) => {
onChange(description_html);
setValue("description", description);
}}
/>
// <WrappedRemirrorRichTextEditor
// value={
// value && value !== "" && Object.keys(value).length > 0
// ? value
// : watch("description_html") && watch("description_html") !== ""
// ? watch("description_html")
// : { type: "doc", content: [{ type: "paragraph" }] }
// }
// onJSONChange={(jsonValue) => setValue("description", jsonValue)}
// onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
// placeholder="Write something..."
// customClassName="text-sm"
// noBorder
// borderOnFocus={false}
// ref={editorRef}
// />
);
}}
/>
<div className="m-2 mt-6 flex"> <div className="m-2 mt-6 flex">
<button <button
type="button" type="button"
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-80 ${ className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-80 ${iAmFeelingLucky ? "cursor-wait bg-custom-background-90" : ""
iAmFeelingLucky ? "cursor-wait bg-custom-background-90" : "" }`}
}`}
onClick={handleAutoGenerateDescription} onClick={handleAutoGenerateDescription}
disabled={iAmFeelingLucky} disabled={iAmFeelingLucky}
> >
@ -378,8 +415,8 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
? "Updating..." ? "Updating..."
: "Update block" : "Update block"
: isSubmitting : isSubmitting
? "Adding..." ? "Adding..."
: "Add block"} : "Add block"}
</PrimaryButton> </PrimaryButton>
</div> </div>
</form> </form>

49
apps/app/components/pages/single-page-block.tsx
View File

@ -39,6 +39,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
import { ICurrentUserResponse, IIssue, IPageBlock, IProject } from "types"; import { ICurrentUserResponse, IIssue, IPageBlock, IProject } from "types";
// fetch-keys // fetch-keys
import { PAGE_BLOCKS_LIST } from "constants/fetch-keys"; import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
type Props = { type Props = {
block: IPageBlock; block: IPageBlock;
@ -54,6 +55,12 @@ type Props = {
// >((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />); // >((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
// WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor"; // WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
const TiptapEditor = React.forwardRef<
ITiptapRichTextEditor,
ITiptapRichTextEditor
>((props, ref) => <Tiptap {...props} forwardedRef={ref} />);
TiptapEditor.displayName = "TiptapEditor";
export const SinglePageBlock: React.FC<Props> = ({ export const SinglePageBlock: React.FC<Props> = ({
block, block,
@ -328,9 +335,8 @@ export const SinglePageBlock: React.FC<Props> = ({
</div> </div>
) : ( ) : (
<div <div
className={`group relative w-full rounded bg-custom-background-80 text-custom-text-200 ${ className={`group relative w-full rounded bg-custom-background-80 text-custom-text-200 ${snapshot.isDragging ? "bg-custom-background-100 p-4 shadow" : ""
snapshot.isDragging ? "bg-custom-background-100 p-4 shadow" : "" }`}
}`}
ref={provided.innerRef} ref={provided.innerRef}
{...provided.draggableProps} {...provided.draggableProps}
> >
@ -344,9 +350,8 @@ export const SinglePageBlock: React.FC<Props> = ({
</button> </button>
<div <div
ref={actionSectionRef} ref={actionSectionRef}
className={`absolute top-4 right-2 hidden items-center gap-2 bg-custom-background-80 pl-4 group-hover:!flex ${ className={`absolute top-4 right-2 hidden items-center gap-2 bg-custom-background-80 pl-4 group-hover:!flex ${isMenuActive ? "!flex" : ""
isMenuActive ? "!flex" : "" }`}
}`}
> >
{block.issue && block.sync && ( {block.issue && block.sync && (
<div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded py-1 px-1.5 text-xs"> <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded py-1 px-1.5 text-xs">
@ -360,9 +365,8 @@ export const SinglePageBlock: React.FC<Props> = ({
)} )}
<button <button
type="button" type="button"
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${ className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${iAmFeelingLucky ? "cursor-wait" : ""
iAmFeelingLucky ? "cursor-wait" : "" }`}
}`}
onClick={handleAutoGenerateDescription} onClick={handleAutoGenerateDescription}
disabled={iAmFeelingLucky} disabled={iAmFeelingLucky}
> >
@ -456,20 +460,19 @@ export const SinglePageBlock: React.FC<Props> = ({
/> />
</div> </div>
{/* {showBlockDetails */} {showBlockDetails
{/* ? block.description_html.length > 7 && ( */} ? block.description_html.length > 7 && (
{/* <WrappedRemirrorRichTextEditor */} <TiptapEditor
{/* value={block.description_html} */} value={block.description_html}
{/* customClassName="text-sm" */} customClassName="text-sm min-h-[150px]"
{/* noBorder */} noBorder
{/* borderOnFocus={false} */} borderOnFocus={false}
{/* /> */} />
{/* ) */} ) : block.description_stripped.length > 0 && (
{/* : block.description_stripped.length > 0 && ( */} <p className="mt-3 text-sm font-normal text-custom-text-200 h-5 truncate">
{/* <p className="mt-3 text-sm font-normal text-custom-text-200 h-5 truncate"> */} {block.description_stripped}
{/* {block.description_stripped} */} </p>
{/* </p> */} )}
{/* )} */}
</div> </div>
</div> </div>
<GptAssistantModal <GptAssistantModal