Skip to content

fix: Tiptap comment card fix for space #2129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sriramveeraghanta merged 5 commits into from
Sep 11, 2023
Merged

fix: Tiptap comment card fix for space #2129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ad888f9
fix:(space) fixed comment card's editor integration
Palanikannan1437 Sep 8, 2023
1af3e34
regression: removed content being set twice
Palanikannan1437 Sep 8, 2023
8cf76d4
Merge branch 'develop' of https://github.com/makeplane/plane into tip…
aaryan610 Sep 11, 2023
6c24dd6
chore: added controller to manage tiptap editor
aaryan610 Sep 11, 2023
1d0cbcd
chore: remove unused functions
aaryan610 Sep 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions space/components/issues/peek-overview/comment/comment-detail-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, { useState } from "react";
// mobx
import { observer } from "mobx-react-lite";
// react-hook-form
import { useForm, Controller } from "react-hook-form";
import { Controller, useForm } from "react-hook-form";
// headless ui
import { Menu, Transition } from "@headlessui/react";
// lib
Expand All @@ -30,10 +30,13 @@ export const CommentCard: React.FC<Props> = observer((props) => {
// states
const [isEditing, setIsEditing] = useState(false);

const editorRef = React.useRef<any>(null);

const showEditorRef = React.useRef<any>(null);
const {
control,
formState: { isSubmitting },
handleSubmit,
control,
} = useForm<any>({
defaultValues: { comment_html: comment.comment_html },
});
Expand All @@ -47,6 +50,9 @@ export const CommentCard: React.FC<Props> = observer((props) => {
if (!workspaceSlug || !issueDetailStore.peekId) return;
issueDetailStore.updateIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id, formData);
setIsEditing(false);

editorRef.current?.setEditorValue(formData.comment_html);
showEditorRef.current?.setEditorValue(formData.comment_html);
};

return (
Expand Down Expand Up @@ -96,6 +102,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
render={({ field: { onChange, value } }) => (
<TipTapEditor
workspaceSlug={workspaceSlug as string}
ref={editorRef}
value={value}
debouncedUpdatesEnabled={false}
customClassName="min-h-[50px] p-3 shadow-sm"
Expand Down Expand Up @@ -125,7 +132,8 @@ export const CommentCard: React.FC<Props> = observer((props) => {
</form>
<div className={`${isEditing ? "hidden" : ""}`}>
<TipTapEditor
workspaceSlug={workspaceSlug.toString()}
workspaceSlug={workspaceSlug as string}
ref={showEditorRef}
value={comment.comment_html}
editable={false}
customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
Expand Down
6 changes: 0 additions & 6 deletions space/components/tiptap/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,6 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
},
});

useEffect(() => {
if (editor) {
editor.commands.setContent(value);
}
}, [value]);

const editorRef: React.MutableRefObject<Editor | null> = useRef(null);

useImperativeHandle(forwardedRef, () => ({
Expand Down
6 changes: 0 additions & 6 deletions web/components/tiptap/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,6 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
},
});

useEffect(() => {
if (editor) {
editor.commands.setContent(value);
}
}, [value]);

const editorRef: React.MutableRefObject<Editor | null> = useRef(null);

useImperativeHandle(forwardedRef, () => ({
Expand Down