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

fix: tiptap editor export fixes (#2001)

Browse Source
This commit is contained in:
sriram veeraghanta 2023-08-28 15:54:49 +05:30 committed by GitHub
parent b2e5760391
commit c65bbf865d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 77 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,5 @@
import React, { useEffect, useState, forwardRef, useRef } from "react";
import { useRouter } from "next/router";
// react-hook-form
import { useForm } from "react-hook-form";
// services
@ -12,9 +10,10 @@ 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";
// types
import { IIssue, IPageBlock } from "types";
import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
type Props = {
isOpen: boolean;
handleClose: () => void;
@ -32,12 +31,6 @@ type FormData = {
task: string;
};
const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
(props, ref) => <Tiptap {...props} forwardedRef={ref} />
);
TiptapEditor.displayName = "TiptapEditor";
export const GptAssistantModal: React.FC<Props> = ({
isOpen,
handleClose,
@ -140,13 +133,14 @@ export const GptAssistantModal: React.FC<Props> = ({
return (
<div
className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${isOpen ? "block" : "hidden"
className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${
isOpen ? "block" : "hidden"
}`}
>
{((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
<div className="text-sm">
Content:
<TiptapEditor
<TipTapEditor
workspaceSlug={workspaceSlug as string}
value={htmlContent ?? `<p>${content}</p>`}
customClassName="-m-3"
@ -160,7 +154,7 @@ export const GptAssistantModal: React.FC<Props> = ({
{response !== "" && (
<div className="page-block-section text-sm">
Response:
<Tiptap
<TipTapEditor
workspaceSlug={workspaceSlug as string}
value={`<p>${response}</p>`}
customClassName="-mx-3 -my-3"
@ -180,7 +174,8 @@ export const GptAssistantModal: React.FC<Props> = ({
type="text"
name="task"
register={register}
placeholder={`${content && content !== ""
placeholder={`${
content && content !== ""
? "Tell AI what action to perform on this content..."
: "Ask AI anything..."
}`}

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

@ -1,21 +1,12 @@
import React from "react";
import { useRouter } from "next/router";
// react-hook-form
import { useForm, Controller } from "react-hook-form";
// ui
// components
import { SecondaryButton } from "components/ui";
import { TipTapEditor } from "components/tiptap";
// types
import type { IIssueComment } from "types";
// fetch-keys
import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
(props, ref) => <Tiptap {...props} forwardedRef={ref} />
);
TiptapEditor.displayName = "TiptapEditor";
const defaultValues: Partial<IIssueComment> = {
comment_json: "",
@ -59,7 +50,7 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
name="comment_html"
control={control}
render={({ field: { value, onChange } }) => (
<TiptapEditor
<TipTapEditor
workspaceSlug={workspaceSlug as string}
ref={editorRef}
value={

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

@ -9,17 +9,11 @@ import useUser from "hooks/use-user";
// ui
import { CustomMenu } from "components/ui";
import { CommentReaction } from "components/issues";
import { TipTapEditor } from "components/tiptap";
// helpers
import { timeAgo } from "helpers/date-time.helper";
// types
import type { IIssueComment } from "types";
import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
(props, ref) => <Tiptap {...props} forwardedRef={ref} />
);
TiptapEditor.displayName = "TiptapEditor";
type Props = {
workspaceSlug: string;
@ -28,7 +22,12 @@ type Props = {
handleCommentDeletion: (comment: string) => void;
};
export const CommentCard: React.FC<Props> = ({ comment, workspaceSlug, onSubmit, handleCommentDeletion }) => {
export const CommentCard: React.FC<Props> = ({
comment,
workspaceSlug,
onSubmit,
handleCommentDeletion,
}) => {
const { user } = useUser();
const editorRef = React.useRef<any>(null);
@ -109,7 +108,7 @@ export const CommentCard: React.FC<Props> = ({ comment, workspaceSlug, onSubmit,
onSubmit={handleSubmit(onEnter)}
>
<div>
<TiptapEditor
<TipTapEditor
workspaceSlug={workspaceSlug as string}
ref={editorRef}
value={watch("comment_html")}
@ -139,7 +138,7 @@ export const CommentCard: React.FC<Props> = ({ comment, workspaceSlug, onSubmit,
</div>
</form>
<div className={`${isEditing ? "hidden" : ""}`}>
<TiptapEditor
<TipTapEditor
workspaceSlug={workspaceSlug as string}
ref={showEditorRef}
value={comment.comment_html}

4
apps/app/components/issues/description-form.tsx
View File

@ -7,7 +7,7 @@ import useReloadConfirmations from "hooks/use-reload-confirmation";
import { useDebouncedCallback } from "use-debounce";
// components
import { TextArea } from "components/ui";
import Tiptap from "components/tiptap";
import { TipTapEditor } from "components/tiptap";
// types
import { IIssue } from "types";
@ -134,7 +134,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
if (!value) return <></>;
return (
<Tiptap
<TipTapEditor
value={
!value ||
value === "" ||

11
apps/app/components/issues/form.tsx
View File

@ -31,18 +31,11 @@ import {
SecondaryButton,
ToggleSwitch,
} from "components/ui";
import { TipTapEditor } from "components/tiptap";
// icons
import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
// types
import type { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
// rich-text-editor
const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
(props, ref) => <Tiptap {...props} forwardedRef={ref} />
);
TiptapEditor.displayName = "TiptapEditor";
const defaultValues: Partial<IIssue> = {
project: "",
@ -369,7 +362,7 @@ export const IssueForm: FC<IssueFormProps> = ({
if (!value && !watch("description_html")) return <></>;
return (
<TiptapEditor
<TipTapEditor
workspaceSlug={workspaceSlug as string}
ref={editorRef}
debouncedUpdatesEnabled={false}

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

@ -1,12 +1,7 @@
import React, { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
import { SparklesIcon } from "@heroicons/react/24/outline";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
// services
import pagesService from "services/pages.service";
@ -16,13 +11,12 @@ import aiService from "services/ai.service";
import useToast from "hooks/use-toast";
// components
import { GptAssistantModal } from "components/core";
// ui
import { TipTapEditor } from "components/tiptap";
import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
// types
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;
@ -39,12 +33,6 @@ const defaultValues = {
description_html: null,
};
const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
(props, ref) => <Tiptap {...props} forwardedRef={ref} />
);
TiptapEditor.displayName = "TiptapEditor";
export const CreateUpdateBlockInline: React.FC<Props> = ({
handleClose,
data,
@ -291,7 +279,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
render={({ field: { value, onChange } }) => {
if (!data)
return (
<TiptapEditor
<TipTapEditor
workspaceSlug={workspaceSlug as string}
ref={editorRef}
value={"<p></p>"}
@ -311,7 +299,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
);
return (
<TiptapEditor
<TipTapEditor
workspaceSlug={workspaceSlug as string}
ref={editorRef}
value={
@ -334,7 +322,8 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
<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}

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

@ -19,6 +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";
// ui
import { CustomMenu, TextArea } from "components/ui";
// icons
@ -38,7 +39,6 @@ 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;
@ -48,13 +48,6 @@ type Props = {
user: ICurrentUserResponse | undefined;
};
const TiptapEditor = React.forwardRef<
ITiptapRichTextEditor,
ITiptapRichTextEditor
>((props, ref) => <Tiptap {...props} forwardedRef={ref} />);
TiptapEditor.displayName = "TiptapEditor";
export const SinglePageBlock: React.FC<Props> = ({
block,
projectDetails,
@ -328,7 +321,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}
@ -343,7 +337,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 && (
@ -358,7 +353,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}
@ -455,14 +451,15 @@ export const SinglePageBlock: React.FC<Props> = ({
{showBlockDetails
? block.description_html.length > 7 && (
<TiptapEditor
<TipTapEditor
workspaceSlug={workspaceSlug as string}
value={block.description_html}
customClassName="text-sm min-h-[150px]"
noBorder
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">
{block.description_stripped}
</p>

14
apps/app/components/tiptap/index.tsx
View File

@ -3,10 +3,10 @@ import { useDebouncedCallback } from "use-debounce";
import { EditorBubbleMenu } from "./bubble-menu";
import { TiptapExtensions } from "./extensions";
import { TiptapEditorProps } from "./props";
import { useImperativeHandle, useRef } from "react";
import { useImperativeHandle, useRef, forwardRef } from "react";
import { ImageResizer } from "./extensions/image-resize";
export interface ITiptapRichTextEditor {
export interface ITipTapRichTextEditor {
value: string;
noBorder?: boolean;
borderOnFocus?: boolean;
@ -21,7 +21,7 @@ export interface ITiptapRichTextEditor {
debouncedUpdatesEnabled?: boolean;
}
const Tiptap = (props: ITiptapRichTextEditor) => {
const Tiptap = (props: ITipTapRichTextEditor) => {
const {
onChange,
debouncedUpdatesEnabled,
@ -98,4 +98,10 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
);
};
export default Tiptap;
const TipTapEditor = forwardRef<ITipTapRichTextEditor, ITipTapRichTextEditor>((props, ref) => (
<Tiptap {...props} forwardedRef={ref} />
));
TipTapEditor.displayName = "TipTapEditor";
export { TipTapEditor };

4
apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
View File

@ -10,7 +10,7 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
import SettingsNavbar from "layouts/settings-navbar";
// components
import { ActivityIcon, ActivityMessage } from "components/core";
import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
import { TipTapEditor } from "components/tiptap";
// icons
import { ArrowTopRightOnSquareIcon, ChatBubbleLeftEllipsisIcon } from "@heroicons/react/24/outline";
// ui
@ -97,7 +97,7 @@ const ProfileActivity = () => {
</p>
</div>
<div className="issue-comments-section p-0">
<Tiptap
<TipTapEditor
workspaceSlug={workspaceSlug as string}
value={
activityItem?.new_value !== ""