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

remirror instances commented out to avoid prosemirror conflicts

Browse Source
This commit is contained in:
Palanikannan1437 2023-08-02 23:00:47 +05:30
parent 6ea15ced02
commit dd5ff737d1
10 changed files with 214 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/app/components/command-palette/command-pallette.tsx
View File

@ -81,7 +81,8 @@ export const CommandPalette: React.FC = () => {
if ( if (
!(e.target instanceof HTMLTextAreaElement) && !(e.target instanceof HTMLTextAreaElement) &&
!(e.target instanceof HTMLInputElement) && !(e.target instanceof HTMLInputElement) &&
!(e.target as Element).classList?.contains("remirror-editor") // !(e.target as Element).classList?.contains("remirror-editor") &&
!(e.target as Element).closest(".tiptap-editor-container")
) { ) {
if ((ctrlKey || metaKey) && keyPressed === "k") { if ((ctrlKey || metaKey) && keyPressed === "k") {
e.preventDefault(); e.preventDefault();

26
apps/app/components/core/feeds.tsx
View File

@ -16,7 +16,7 @@ import { Icon } from "components/ui";
import { renderShortDateWithYearFormat, timeAgo } from "helpers/date-time.helper"; import { renderShortDateWithYearFormat, timeAgo } from "helpers/date-time.helper";
import { addSpaceIfCamelCase } from "helpers/string.helper"; import { addSpaceIfCamelCase } from "helpers/string.helper";
// types // types
import RemirrorRichTextEditor from "components/rich-text-editor"; // import RemirrorRichTextEditor from "components/rich-text-editor";
const activityDetails: { const activityDetails: {
[key: string]: { [key: string]: {
@ -250,18 +250,18 @@ export const Feeds: React.FC<any> = ({ activities }) => {
Commented {timeAgo(activity.created_at)} Commented {timeAgo(activity.created_at)}
</p> </p>
</div> </div>
<div className="issue-comments-section p-0"> {/* <div className="issue-comments-section p-0"> */}
<RemirrorRichTextEditor {/* <RemirrorRichTextEditor */}
value={ {/* value={ */}
activity.new_value && activity.new_value !== "" {/* activity.new_value && activity.new_value !== "" */}
? activity.new_value {/* ? activity.new_value */}
: activity.old_value {/* : activity.old_value */}
} {/* } */}
editable={false} {/* editable={false} */}
noBorder {/* noBorder */}
customClassName="text-xs border border-custom-border-200 bg-custom-background-100" {/* customClassName="text-xs border border-custom-border-200 bg-custom-background-100" */}
/> {/* /> */}
</div> {/* </div> */}
</div> </div>
</div> </div>
</div> </div>

48
apps/app/components/core/modals/gpt-assistant-modal.tsx
View File

@ -32,17 +32,17 @@ type FormData = {
task: string; task: string;
}; };
const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { // const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
ssr: false, // ssr: false,
}); // });
//
import { IRemirrorRichTextEditor } from "components/rich-text-editor"; // import { IRemirrorRichTextEditor } from "components/rich-text-editor";
//
const WrappedRemirrorRichTextEditor = forwardRef<IRemirrorRichTextEditor, IRemirrorRichTextEditor>( // const WrappedRemirrorRichTextEditor = forwardRef<IRemirrorRichTextEditor, IRemirrorRichTextEditor>(
(props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} /> // (props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />
); // );
//
WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor"; // WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
export const GptAssistantModal: React.FC<Props> = ({ export const GptAssistantModal: React.FC<Props> = ({
isOpen, isOpen,
@ -150,19 +150,19 @@ export const GptAssistantModal: React.FC<Props> = ({
isOpen ? "block" : "hidden" isOpen ? "block" : "hidden"
}`} }`}
> >
{((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && ( {/* {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && ( */}
<div className="remirror-section text-sm"> {/* <div className="remirror-section text-sm"> */}
Content: {/* Content: */}
<WrappedRemirrorRichTextEditor {/* <WrappedRemirrorRichTextEditor */}
value={htmlContent ?? <p>{content}</p>} {/* value={htmlContent ?? <p>{content}</p>} */}
customClassName="-m-3" {/* customClassName="-m-3" */}
noBorder {/* noBorder */}
borderOnFocus={false} {/* borderOnFocus={false} */}
editable={false} {/* editable={false} */}
ref={editorRef} {/* ref={editorRef} */}
/> {/* /> */}
</div> {/* </div> */}
)} {/* )} */}
{response !== "" && ( {response !== "" && (
<div className="page-block-section text-sm"> <div className="page-block-section text-sm">
Response: Response:

60
apps/app/components/issues/comment/add-comment.tsx
View File

@ -18,23 +18,23 @@ import type { ICurrentUserResponse, IIssueComment } from "types";
// fetch-keys // fetch-keys
import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys"; import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { // const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
ssr: false, // ssr: false,
loading: () => ( // loading: () => (
<Loader className="mb-5"> // <Loader className="mb-5">
<Loader.Item height="12rem" width="100%" /> // <Loader.Item height="12rem" width="100%" />
</Loader> // </Loader>
), // ),
}); // });
import { IRemirrorRichTextEditor } from "components/rich-text-editor"; // import { IRemirrorRichTextEditor } from "components/rich-text-editor";
//
const WrappedRemirrorRichTextEditor = React.forwardRef< // const WrappedRemirrorRichTextEditor = React.forwardRef<
IRemirrorRichTextEditor, // IRemirrorRichTextEditor,
IRemirrorRichTextEditor // IRemirrorRichTextEditor
>((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />); // >((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
//
WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor"; // WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
//
const defaultValues: Partial<IIssueComment> = { const defaultValues: Partial<IIssueComment> = {
comment_json: "", comment_json: "",
comment_html: "", comment_html: "",
@ -98,19 +98,19 @@ export const AddComment: React.FC<Props> = ({ issueId, user, disabled = false })
<div> <div>
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="issue-comments-section"> <div className="issue-comments-section">
<Controller {/* <Controller */}
name="comment_json" {/* name="comment_json" */}
control={control} {/* control={control} */}
render={({ field: { value } }) => ( {/* render={({ field: { value } }) => ( */}
<WrappedRemirrorRichTextEditor {/* <WrappedRemirrorRichTextEditor */}
value={value} {/* value={value} */}
onJSONChange={(jsonValue) => setValue("comment_json", jsonValue)} {/* onJSONChange={(jsonValue) => setValue("comment_json", jsonValue)} */}
onHTMLChange={(htmlValue) => setValue("comment_html", htmlValue)} {/* onHTMLChange={(htmlValue) => setValue("comment_html", htmlValue)} */}
placeholder="Enter your comment..." {/* placeholder="Enter your comment..." */}
ref={editorRef} {/* ref={editorRef} */}
/> {/* /> */}
)} {/* )} */}
/> {/* /> */}
<SecondaryButton type="submit" disabled={isSubmitting || disabled} className="mt-2"> <SecondaryButton type="submit" disabled={isSubmitting || disabled} className="mt-2">
{isSubmitting ? "Adding..." : "Comment"} {isSubmitting ? "Adding..." : "Comment"}

36
apps/app/components/issues/comment/comment-card.tsx
View File

@ -16,17 +16,17 @@ import { timeAgo } from "helpers/date-time.helper";
// types // types
import type { IIssueComment } from "types"; import type { IIssueComment } from "types";
const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { ssr: false }); // const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { ssr: false });
//
import { IRemirrorRichTextEditor } from "components/rich-text-editor"; // import { IRemirrorRichTextEditor } from "components/rich-text-editor";
//
const WrappedRemirrorRichTextEditor = React.forwardRef< // const WrappedRemirrorRichTextEditor = React.forwardRef<
IRemirrorRichTextEditor, // IRemirrorRichTextEditor,
IRemirrorRichTextEditor // IRemirrorRichTextEditor
>((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />); // >((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
//
WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor"; // WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
//
type Props = { type Props = {
comment: IIssueComment; comment: IIssueComment;
onSubmit: (comment: IIssueComment) => void; onSubmit: (comment: IIssueComment) => void;
@ -132,13 +132,13 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
</div> </div>
</form> </form>
<div className={`${isEditing ? "hidden" : ""}`}> <div className={`${isEditing ? "hidden" : ""}`}>
<WrappedRemirrorRichTextEditor {/* <WrappedRemirrorRichTextEditor */}
value={comment.comment_html} {/* value={comment.comment_html} */}
editable={false} {/* editable={false} */}
noBorder {/* noBorder */}
customClassName="text-xs border border-custom-border-200 bg-custom-background-100" {/* customClassName="text-xs border border-custom-border-200 bg-custom-background-100" */}
ref={showEditorRef} {/* ref={showEditorRef} */}
/> {/* /> */}
<CommentReaction projectId={comment.project} commentId={comment.id} /> <CommentReaction projectId={comment.project} commentId={comment.id} />
</div> </div>

51
apps/app/components/issues/main-content.tsx
View File

@ -97,8 +97,7 @@ export const IssueMainContent: React.FC<Props> = ({
<CustomMenu.MenuItem <CustomMenu.MenuItem
key={issue.id} key={issue.id}
renderAs="a" renderAs="a"
href={`/${workspaceSlug}/projects/${projectId as string}/issues/${ href={`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id
issue.id
}`} }`}
className="flex items-center gap-2 py-2" className="flex items-center gap-2 py-2"
> >
@ -130,30 +129,30 @@ export const IssueMainContent: React.FC<Props> = ({
isAllowed={memberRole.isMember || memberRole.isOwner || !uneditable} isAllowed={memberRole.isMember || memberRole.isOwner || !uneditable}
/> />
<IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} /> {/* <IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} /> */}
{/**/}
<div className="mt-2 space-y-2"> {/* <div className="mt-2 space-y-2"> */}
<SubIssuesList parentIssue={issueDetails} user={user} disabled={uneditable} /> {/* <SubIssuesList parentIssue={issueDetails} user={user} disabled={uneditable} /> */}
</div> {/* </div> */}
</div> {/* </div> */}
<div className="flex flex-col gap-3 py-3"> {/* <div className="flex flex-col gap-3 py-3"> */}
<h3 className="text-lg">Attachments</h3> {/* <h3 className="text-lg">Attachments</h3> */}
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"> {/* <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"> */}
<IssueAttachmentUpload disabled={uneditable} /> {/* <IssueAttachmentUpload disabled={uneditable} /> */}
<IssueAttachments /> {/* <IssueAttachments /> */}
</div> {/* </div> */}
</div> {/* </div> */}
<div className="space-y-5 pt-3"> {/* <div className="space-y-5 pt-3"> */}
<h3 className="text-lg text-custom-text-100">Comments/Activity</h3> {/* <h3 className="text-lg text-custom-text-100">Comments/Activity</h3> */}
<IssueActivitySection {/* <IssueActivitySection */}
issueId={(archivedIssueId as string) ?? (issueId as string)} {/* issueId={(archivedIssueId as string) ?? (issueId as string)} */}
user={user} {/* user={user} */}
/> {/* /> */}
<AddComment {/* <AddComment */}
issueId={(archivedIssueId as string) ?? (issueId as string)} {/* issueId={(archivedIssueId as string) ?? (issueId as string)} */}
user={user} {/* user={user} */}
disabled={uneditable} {/* disabled={uneditable} */}
/> {/* /> */}
</div> </div>
</> </>
); );

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

@ -39,22 +39,22 @@ const defaultValues = {
description_html: null, description_html: null,
}; };
const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { // const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
ssr: false, // ssr: false,
loading: () => ( // loading: () => (
<Loader className="mx-4 mt-6"> // <Loader className="mx-4 mt-6">
<Loader.Item height="100px" width="100%" /> // <Loader.Item height="100px" width="100%" />
</Loader> // </Loader>
), // ),
}); // });
import { IRemirrorRichTextEditor } from "components/rich-text-editor"; // import { IRemirrorRichTextEditor } from "components/rich-text-editor";
//
const WrappedRemirrorRichTextEditor = React.forwardRef< // const WrappedRemirrorRichTextEditor = React.forwardRef<
IRemirrorRichTextEditor, // IRemirrorRichTextEditor,
IRemirrorRichTextEditor // IRemirrorRichTextEditor
>((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />); // >((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
//
WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor"; // WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
export const CreateUpdateBlockInline: React.FC<Props> = ({ export const CreateUpdateBlockInline: React.FC<Props> = ({
handleClose, handleClose,
@ -296,51 +296,51 @@ 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" */}
control={control} {/* control={control} */}
render={({ field: { value } }) => { {/* render={({ field: { value } }) => { */}
if (!data) {/* if (!data) */}
return ( {/* return ( */}
<WrappedRemirrorRichTextEditor {/* <WrappedRemirrorRichTextEditor */}
value={{ {/* value={{ */}
type: "doc", {/* type: "doc", */}
content: [{ type: "paragraph" }], {/* content: [{ type: "paragraph" }], */}
}} {/* }} */}
onJSONChange={(jsonValue) => setValue("description", jsonValue)} {/* onJSONChange={(jsonValue) => setValue("description", jsonValue)} */}
onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)} {/* onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)} */}
placeholder="Write something..." {/* placeholder="Write something..." */}
customClassName="text-sm" {/* customClassName="text-sm" */}
noBorder {/* noBorder */}
borderOnFocus={false} {/* borderOnFocus={false} */}
ref={editorRef} {/* ref={editorRef} */}
/> {/* /> */}
); {/* ); */}
else if (!value || !watch("description_html")) {/* else if (!value || !watch("description_html")) */}
return ( {/* return ( */}
<div className="h-32 w-full flex items-center justify-center text-custom-text-200 text-sm" /> {/* <div className="h-32 w-full flex items-center justify-center text-custom-text-200 text-sm" /> */}
); {/* ); */}
{/**/}
return ( {/* return ( */}
<WrappedRemirrorRichTextEditor {/* <WrappedRemirrorRichTextEditor */}
value={ {/* value={ */}
value && value !== "" && Object.keys(value).length > 0 {/* value && value !== "" && Object.keys(value).length > 0 */}
? value {/* ? value */}
: watch("description_html") && watch("description_html") !== "" {/* : watch("description_html") && watch("description_html") !== "" */}
? watch("description_html") {/* ? watch("description_html") */}
: { type: "doc", content: [{ type: "paragraph" }] } {/* : { type: "doc", content: [{ type: "paragraph" }] } */}
} {/* } */}
onJSONChange={(jsonValue) => setValue("description", jsonValue)} {/* onJSONChange={(jsonValue) => setValue("description", jsonValue)} */}
onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)} {/* onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)} */}
placeholder="Write something..." {/* placeholder="Write something..." */}
customClassName="text-sm" {/* customClassName="text-sm" */}
noBorder {/* noBorder */}
borderOnFocus={false} {/* borderOnFocus={false} */}
ref={editorRef} {/* ref={editorRef} */}
/> {/* /> */}
); {/* ); */}
}} {/* }} */}
/> {/* /> */}
<div className="m-2 mt-6 flex"> <div className="m-2 mt-6 flex">
<button <button
type="button" type="button"

16
apps/app/components/pages/page-form.tsx
View File

@ -17,14 +17,14 @@ type Props = {
}; };
// rich-text-editor // rich-text-editor
const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { // const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
ssr: false, // ssr: false,
loading: () => ( // loading: () => (
<Loader> // <Loader>
<Loader.Item height="12rem" width="100%" /> // <Loader.Item height="12rem" width="100%" />
</Loader> // </Loader>
), // ),
}); // });
const defaultValues = { const defaultValues = {
name: "", name: "",

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

@ -19,7 +19,7 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
// components // components
import { GptAssistantModal } from "components/core"; import { GptAssistantModal } from "components/core";
import { CreateUpdateBlockInline } from "components/pages"; import { CreateUpdateBlockInline } from "components/pages";
import RemirrorRichTextEditor, { IRemirrorRichTextEditor } from "components/rich-text-editor"; // import RemirrorRichTextEditor, { IRemirrorRichTextEditor } from "components/rich-text-editor";
// ui // ui
import { CustomMenu, TextArea } from "components/ui"; import { CustomMenu, TextArea } from "components/ui";
// icons // icons
@ -48,12 +48,12 @@ type Props = {
user: ICurrentUserResponse | undefined; user: ICurrentUserResponse | undefined;
}; };
const WrappedRemirrorRichTextEditor = React.forwardRef< // const WrappedRemirrorRichTextEditor = React.forwardRef<
IRemirrorRichTextEditor, // IRemirrorRichTextEditor,
IRemirrorRichTextEditor // IRemirrorRichTextEditor
>((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />); // >((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor"; // WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
export const SinglePageBlock: React.FC<Props> = ({ export const SinglePageBlock: React.FC<Props> = ({
block, block,
@ -456,20 +456,20 @@ export const SinglePageBlock: React.FC<Props> = ({
/> />
</div> </div>
{showBlockDetails {/* {showBlockDetails */}
? block.description_html.length > 7 && ( {/* ? block.description_html.length > 7 && ( */}
<WrappedRemirrorRichTextEditor {/* <WrappedRemirrorRichTextEditor */}
value={block.description_html} {/* value={block.description_html} */}
customClassName="text-sm" {/* customClassName="text-sm" */}
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

11
apps/app/package.json
View File

@ -11,6 +11,8 @@
"dependencies": { "dependencies": {
"@blueprintjs/core": "^4.16.3", "@blueprintjs/core": "^4.16.3",
"@blueprintjs/popover2": "^1.13.3", "@blueprintjs/popover2": "^1.13.3",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@headlessui/react": "^1.7.3", "@headlessui/react": "^1.7.3",
"@heroicons/react": "^2.0.12", "@heroicons/react": "^2.0.12",
"@jitsu/nextjs": "^3.1.5", "@jitsu/nextjs": "^3.1.5",
@ -23,12 +25,12 @@
"@nivo/line": "0.80.0", "@nivo/line": "0.80.0",
"@nivo/pie": "0.80.0", "@nivo/pie": "0.80.0",
"@nivo/scatterplot": "0.80.0", "@nivo/scatterplot": "0.80.0",
"@remirror/core": "^2.0.11",
"@remirror/extension-react-tables": "^2.2.11",
"@remirror/pm": "^2.0.3",
"@remirror/react": "^2.0.24",
"@sentry/nextjs": "^7.36.0", "@sentry/nextjs": "^7.36.0",
"@tailwindcss/typography": "^0.5.9", "@tailwindcss/typography": "^0.5.9",
"@tiptap/extension-placeholder": "^2.0.4",
"@tiptap/pm": "^2.0.4",
"@tiptap/react": "^2.0.4",
"@tiptap/starter-kit": "^2.0.4",
"@types/lodash.debounce": "^4.0.7", "@types/lodash.debounce": "^4.0.7",
"@types/react-datepicker": "^4.8.0", "@types/react-datepicker": "^4.8.0",
"axios": "^1.1.3", "axios": "^1.1.3",
@ -48,7 +50,6 @@
"react-dropzone": "^14.2.3", "react-dropzone": "^14.2.3",
"react-hook-form": "^7.38.0", "react-hook-form": "^7.38.0",
"react-markdown": "^8.0.7", "react-markdown": "^8.0.7",
"remirror": "^2.0.23",
"swr": "^2.1.3", "swr": "^2.1.3",
"tlds": "^1.238.0", "tlds": "^1.238.0",
"uuid": "^9.0.0" "uuid": "^9.0.0"