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

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";
// fetch-keys
import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
type Props = {
handleClose: () => void;
@ -56,6 +57,13 @@ const defaultValues = {
//
// WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
const TiptapEditor = React.forwardRef<
ITiptapRichTextEditor,
ITiptapRichTextEditor
>((props, ref) => <Tiptap {...props} forwardedRef={ref} />);
TiptapEditor.displayName = "TiptapEditor";
export const CreateUpdateBlockInline: React.FC<Props> = ({
handleClose,
data,
@ -242,9 +250,9 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
description:
!data.description || data.description === ""
? {
type: "doc",
content: [{ type: "paragraph" }],
}
type: "doc",
content: [{ type: "paragraph" }],
}
: data.description,
description_html: data.description_html ?? "<p></p>",
});
@ -296,57 +304,86 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
/>
</div>
<div className="page-block-section relative -mt-2 text-custom-text-200">
{/* <Controller */}
{/* name="description" */}
{/* control={control} */}
{/* render={({ field: { value } }) => { */}
{/* if (!data) */}
{/* return ( */}
{/* <WrappedRemirrorRichTextEditor */}
{/* value={{ */}
{/* 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} */}
{/* /> */}
{/* ); */}
{/* else if (!value || !watch("description_html")) */}
{/* return ( */}
{/* <div className="h-32 w-full flex items-center justify-center text-custom-text-200 text-sm" /> */}
{/* ); */}
{/**/}
{/* return ( */}
{/* <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} */}
{/* /> */}
{/* ); */}
{/* }} */}
{/* /> */}
<Controller
name="description_html"
control={control}
render={({ field: { value, onChange } }) => {
if (!data)
return (
<TiptapEditor
ref={editorRef}
value={"<p></p>"}
debouncedUpdatesEnabled={false}
customClassName="text-sm"
noBorder
borderOnFocus={false}
onChange={(description: Object, description_html: string) => {
onChange(description_html);
setValue("description", description);
}}
/>
// <WrappedRemirrorRichTextEditor
// value={{
// 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}
// />
);
else if (!value || !watch("description_html"))
return (
<div className="h-32 w-full flex items-center justify-center text-custom-text-200 text-sm" />
);
return (
<TiptapEditor
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">
<button
type="button"
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" : ""
}`}
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" : ""
}`}
onClick={handleAutoGenerateDescription}
disabled={iAmFeelingLucky}
>
@ -378,8 +415,8 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
? "Updating..."
: "Update block"
: isSubmitting
? "Adding..."
: "Add block"}
? "Adding..."
: "Add block"}
</PrimaryButton>
</div>
</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";
// fetch-keys
import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
type Props = {
block: IPageBlock;
@ -54,6 +55,12 @@ type Props = {
// >((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
// WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
const TiptapEditor = React.forwardRef<
ITiptapRichTextEditor,
ITiptapRichTextEditor
>((props, ref) => <Tiptap {...props} forwardedRef={ref} />);
TiptapEditor.displayName = "TiptapEditor";
export const SinglePageBlock: React.FC<Props> = ({
block,
@ -328,9 +335,8 @@ export const SinglePageBlock: React.FC<Props> = ({
</div>
) : (
<div
className={`group relative w-full rounded bg-custom-background-80 text-custom-text-200 ${
snapshot.isDragging ? "bg-custom-background-100 p-4 shadow" : ""
}`}
className={`group relative w-full rounded bg-custom-background-80 text-custom-text-200 ${snapshot.isDragging ? "bg-custom-background-100 p-4 shadow" : ""
}`}
ref={provided.innerRef}
{...provided.draggableProps}
>
@ -344,9 +350,8 @@ export const SinglePageBlock: React.FC<Props> = ({
</button>
<div
ref={actionSectionRef}
className={`absolute top-4 right-2 hidden items-center gap-2 bg-custom-background-80 pl-4 group-hover:!flex ${
isMenuActive ? "!flex" : ""
}`}
className={`absolute top-4 right-2 hidden items-center gap-2 bg-custom-background-80 pl-4 group-hover:!flex ${isMenuActive ? "!flex" : ""
}`}
>
{block.issue && block.sync && (
<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
type="button"
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${
iAmFeelingLucky ? "cursor-wait" : ""
}`}
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${iAmFeelingLucky ? "cursor-wait" : ""
}`}
onClick={handleAutoGenerateDescription}
disabled={iAmFeelingLucky}
>
@ -456,20 +460,19 @@ export const SinglePageBlock: React.FC<Props> = ({
/>
</div>
{/* {showBlockDetails */}
{/* ? block.description_html.length > 7 && ( */}
{/* <WrappedRemirrorRichTextEditor */}
{/* value={block.description_html} */}
{/* customClassName="text-sm" */}
{/* noBorder */}
{/* borderOnFocus={false} */}
{/* /> */}
{/* ) */}
{/* : block.description_stripped.length > 0 && ( */}
{/* <p className="mt-3 text-sm font-normal text-custom-text-200 h-5 truncate"> */}
{/* {block.description_stripped} */}
{/* </p> */}
{/* )} */}
{showBlockDetails
? block.description_html.length > 7 && (
<TiptapEditor
value={block.description_html}
customClassName="text-sm min-h-[150px]"
noBorder
borderOnFocus={false}
/>
) : block.description_stripped.length > 0 && (
<p className="mt-3 text-sm font-normal text-custom-text-200 h-5 truncate">
{block.description_stripped}
</p>
)}
</div>
</div>
<GptAssistantModal