From 9bca3ac48d443c5023d280a547aaa0ee51e01b6b Mon Sep 17 00:00:00 2001 From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com> Date: Fri, 18 Aug 2023 12:04:28 +0530 Subject: [PATCH] added workspace slug to all tiptap instances --- .../core/modals/gpt-assistant-modal.tsx | 16 +-- .../components/inbox/inbox-main-content.tsx | 1 + apps/app/components/issues/activity.tsx | 1 + .../components/issues/comment/add-comment.tsx | 5 +- .../issues/comment/comment-card.tsx | 5 +- .../components/issues/description-form.tsx | 3 + apps/app/components/issues/form.tsx | 1 + apps/app/components/issues/main-content.tsx | 1 + .../pages/create-update-block-inline.tsx | 21 ++-- .../components/pages/single-page-block.tsx | 1 + .../components/tiptap/extensions/index.tsx | 4 +- apps/app/components/tiptap/index.tsx | 6 +- .../tiptap/plugins/upload-image.tsx | 16 ++- apps/app/components/tiptap/props.tsx | 101 +++++++++--------- .../components/tiptap/slash-command/index.tsx | 17 +-- .../[workspaceSlug]/me/profile/activity.tsx | 1 + 16 files changed, 113 insertions(+), 87 deletions(-) diff --git a/apps/app/components/core/modals/gpt-assistant-modal.tsx b/apps/app/components/core/modals/gpt-assistant-modal.tsx index a3b748d66..35f282040 100644 --- a/apps/app/components/core/modals/gpt-assistant-modal.tsx +++ b/apps/app/components/core/modals/gpt-assistant-modal.tsx @@ -140,14 +140,14 @@ export const GptAssistantModal: React.FC = ({ return (
{((content && content !== "") || (htmlContent && htmlContent !== "

")) && (
Content: ${content}

`} customClassName="-m-3" noBorder @@ -161,6 +161,7 @@ export const GptAssistantModal: React.FC = ({
Response: ${response}

`} customClassName="-mx-3 -my-3" noBorder @@ -179,11 +180,10 @@ export const GptAssistantModal: React.FC = ({ type="text" name="task" register={register} - placeholder={`${ - content && content !== "" + placeholder={`${content && content !== "" ? "Tell AI what action to perform on this content..." : "Ask AI anything..." - }`} + }`} autoComplete="off" />
@@ -219,8 +219,8 @@ export const GptAssistantModal: React.FC = ({ {isSubmitting ? "Generating response..." : response === "" - ? "Generate response" - : "Generate again"} + ? "Generate response" + : "Generate again"}
diff --git a/apps/app/components/inbox/inbox-main-content.tsx b/apps/app/components/inbox/inbox-main-content.tsx index af1234859..bd4f0ab01 100644 --- a/apps/app/components/inbox/inbox-main-content.tsx +++ b/apps/app/components/inbox/inbox-main-content.tsx @@ -293,6 +293,7 @@ export const InboxMainContent: React.FC = () => {
= ({ issueId, user }) => { return (
= ({ issueId, user, disabled = false }) control={control} render={({ field: { value, onChange } }) => ( void; handleCommentDeletion: (comment: string) => void; }; -export const CommentCard: React.FC = ({ comment, onSubmit, handleCommentDeletion }) => { +export const CommentCard: React.FC = ({ comment, workspaceSlug, onSubmit, handleCommentDeletion }) => { const { user } = useUser(); const editorRef = React.useRef(null); @@ -103,6 +104,7 @@ export const CommentCard: React.FC = ({ comment, onSubmit, handleCommentD >
= ({ comment, onSubmit, handleCommentD
Promise; isAllowed: boolean; } @@ -31,6 +32,7 @@ export interface IssueDetailsProps { export const IssueDescriptionForm: FC = ({ issue, handleFormSubmit, + workspaceSlug, isAllowed, }) => { const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved"); @@ -140,6 +142,7 @@ export const IssueDescriptionForm: FC = ({ ? watch("description_html") : value } + workspaceSlug={workspaceSlug} debouncedUpdatesEnabled={true} setShouldShowAlert={setShowAlert} setIsSubmitting={setIsSubmitting} diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx index 0e73ca349..c15c61d57 100644 --- a/apps/app/components/issues/form.tsx +++ b/apps/app/components/issues/form.tsx @@ -370,6 +370,7 @@ export const IssueForm: FC = ({ return ( = ({
) : null} = ({ description: !data.description || data.description === "" ? { - type: "doc", - content: [{ type: "paragraph" }], - } + type: "doc", + content: [{ type: "paragraph" }], + } : data.description, description_html: data.description_html ?? "

", }); @@ -292,6 +292,7 @@ export const CreateUpdateBlockInline: React.FC = ({ if (!data) return (

"} debouncedUpdatesEnabled={false} @@ -311,13 +312,14 @@ export const CreateUpdateBlockInline: React.FC = ({ return ( 0 ? value : watch("description_html") && watch("description_html") !== "" - ? watch("description_html") - : { type: "doc", content: [{ type: "paragraph" }] } + ? watch("description_html") + : { type: "doc", content: [{ type: "paragraph" }] } } debouncedUpdatesEnabled={false} customClassName="text-sm" @@ -334,9 +336,8 @@ export const CreateUpdateBlockInline: React.FC = ({
diff --git a/apps/app/components/pages/single-page-block.tsx b/apps/app/components/pages/single-page-block.tsx index 8a13e3ea1..0c192990a 100644 --- a/apps/app/components/pages/single-page-block.tsx +++ b/apps/app/components/pages/single-page-block.tsx @@ -456,6 +456,7 @@ export const SinglePageBlock: React.FC = ({ {showBlockDetails ? block.description_html.length > 7 && ( [ StarterKit.configure({ bulletList: { HTMLAttributes: { @@ -112,7 +112,7 @@ export const TiptapExtensions = [ UniqueID.configure({ types: ["image"], }), - SlashCommand, + SlashCommand(workspaceSlug), TiptapUnderline, TextStyle, Color, diff --git a/apps/app/components/tiptap/index.tsx b/apps/app/components/tiptap/index.tsx index c89a41989..3f1c3be0e 100644 --- a/apps/app/components/tiptap/index.tsx +++ b/apps/app/components/tiptap/index.tsx @@ -20,6 +20,7 @@ export interface ITiptapRichTextEditor { onChange?: (json: any, html: string) => void; setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void; setShouldShowAlert?: (showAlert: boolean) => void; + workspaceSlug: string; editable?: boolean; forwardedRef?: any; debouncedUpdatesEnabled?: boolean; @@ -36,14 +37,15 @@ const Tiptap = (props: ITiptapRichTextEditor) => { editorContentCustomClassNames, value, noBorder, + workspaceSlug, borderOnFocus, customClassName, } = props; const editor = useEditor({ editable: editable ?? true, - editorProps: TiptapEditorProps, - extensions: TiptapExtensions, + editorProps: TiptapEditorProps(workspaceSlug), + extensions: TiptapExtensions(workspaceSlug), content: value, onUpdate: async ({ editor }) => { // for instant feedback loop diff --git a/apps/app/components/tiptap/plugins/upload-image.tsx b/apps/app/components/tiptap/plugins/upload-image.tsx index c10bc16a5..32cdd6731 100644 --- a/apps/app/components/tiptap/plugins/upload-image.tsx +++ b/apps/app/components/tiptap/plugins/upload-image.tsx @@ -57,7 +57,7 @@ function findPlaceholder(state: EditorState, id: {}) { return found.length ? found[0].from : null; } -export async function startImageUpload(file: File, view: EditorView, pos: number) { +export async function startImageUpload(file: File, view: EditorView, pos: number, workspaceSlug: string) { if (!file.type.includes("image/")) { return; } else if (file.size / 1024 / 1024 > 20) { @@ -82,7 +82,10 @@ export async function startImageUpload(file: File, view: EditorView, pos: number view.dispatch(tr); }; - const src = await UploadImageHandler(file); + if (!workspaceSlug) { + return; + } + const src = await UploadImageHandler(file, workspaceSlug); const { schema } = view.state; pos = findPlaceholder(view.state, id); @@ -96,19 +99,24 @@ export async function startImageUpload(file: File, view: EditorView, pos: number view.dispatch(transaction); } -const UploadImageHandler = (file: File): Promise => { +const UploadImageHandler = (file: File, workspaceSlug: string): Promise => { + if (!workspaceSlug) { + return Promise.reject("Workspace slug is missing"); + } try { + console.log("in here",workspaceSlug) const formData = new FormData(); formData.append("asset", file); formData.append("attributes", JSON.stringify({})); return new Promise(async (resolve, reject) => { const imageUrl = await fileService - .uploadFile("plane", formData) + .uploadFile(workspaceSlug, formData) .then((response) => response.asset); const image = new Image(); image.src = imageUrl; + console.log("image uploaded", imageUrl) image.onload = () => { resolve(imageUrl); }; diff --git a/apps/app/components/tiptap/props.tsx b/apps/app/components/tiptap/props.tsx index 1ffbebe6d..2912614a0 100644 --- a/apps/app/components/tiptap/props.tsx +++ b/apps/app/components/tiptap/props.tsx @@ -1,56 +1,57 @@ import { EditorProps } from "@tiptap/pm/view"; import { startImageUpload } from "./plugins/upload-image"; -export const TiptapEditorProps: EditorProps = { - attributes: { - class: `prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none`, - }, - handleDOMEvents: { - keydown: (_view, event) => { - // prevent default event listeners from firing when slash command is active - if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) { - const slashCommand = document.querySelector("#slash-command"); - if (slashCommand) { - return true; - } - } +export function TiptapEditorProps(workspaceSlug: string): EditorProps { + return { + attributes: { + class: `prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none`, }, - }, - handlePaste: (view, event) => { - if ( - event.clipboardData && - event.clipboardData.files && - event.clipboardData.files[0] - ) { - event.preventDefault(); - const file = event.clipboardData.files[0]; - const pos = view.state.selection.from; + handleDOMEvents: { + keydown: (_view, event) => { + // prevent default event listeners from firing when slash command is active + if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) { + const slashCommand = document.querySelector("#slash-command"); + if (slashCommand) { + return true; + } + } + }, + }, + handlePaste: (view, event) => { + if ( + event.clipboardData && + event.clipboardData.files && + event.clipboardData.files[0] + ) { + event.preventDefault(); + const file = event.clipboardData.files[0]; + const pos = view.state.selection.from; - startImageUpload(file, view, pos); - return true; - } - return false; - }, - handleDrop: (view, event, _slice, moved) => { - if ( - !moved && - event.dataTransfer && - event.dataTransfer.files && - event.dataTransfer.files[0] - ) { - event.preventDefault(); - const file = event.dataTransfer.files[0]; - const coordinates = view.posAtCoords({ - left: event.clientX, - top: event.clientY, - }); - // here we deduct 1 from the pos or else the image will create an extra node - if (coordinates) { - startImageUpload(file, view, coordinates.pos - 1); + startImageUpload(file, view, pos, workspaceSlug); + return true; } - return true; - } - return false; - }, -}; - + return false; + }, + handleDrop: (view, event, _slice, moved) => { + if ( + !moved && + event.dataTransfer && + event.dataTransfer.files && + event.dataTransfer.files[0] + ) { + event.preventDefault(); + const file = event.dataTransfer.files[0]; + const coordinates = view.posAtCoords({ + left: event.clientX, + top: event.clientY, + }); + // here we deduct 1 from the pos or else the image will create an extra node + if (coordinates) { + startImageUpload(file, view, coordinates.pos - 1, workspaceSlug); + } + return true; + } + return false; + }, + }; +} diff --git a/apps/app/components/tiptap/slash-command/index.tsx b/apps/app/components/tiptap/slash-command/index.tsx index 7c686e06b..1ccb25db6 100644 --- a/apps/app/components/tiptap/slash-command/index.tsx +++ b/apps/app/components/tiptap/slash-command/index.tsx @@ -52,7 +52,7 @@ const Command = Extension.create({ }, }); -const getSuggestionItems = ({ query }: { query: string }) => +const getSuggestionItems = (workspaceSlug: string) => ({ query }: { query: string }) => [ { title: "Text", @@ -163,7 +163,7 @@ const getSuggestionItems = ({ query }: { query: string }) => if (input.files?.length) { const file = input.files[0]; const pos = editor.view.state.selection.from; - startImageUpload(file, editor.view, pos); + startImageUpload(file, editor.view, pos, workspaceSlug); } }; input.click(); @@ -328,11 +328,12 @@ const renderItems = () => { }; }; -const SlashCommand = Command.configure({ - suggestion: { - items: getSuggestionItems, - render: renderItems, - }, -}); +export const SlashCommand = (workspaceSlug: string) => + Command.configure({ + suggestion: { + items: getSuggestionItems(workspaceSlug), + render: renderItems, + }, + }); export default SlashCommand; diff --git a/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx b/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx index 67f3a77ee..148d738c0 100644 --- a/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx +++ b/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx @@ -106,6 +106,7 @@ const ProfileActivity = () => {