diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx index 82d1d65b1..5561b1b99 100644 --- a/apps/app/components/issues/description-form.tsx +++ b/apps/app/components/issues/description-form.tsx @@ -75,6 +75,8 @@ export const IssueDescriptionForm: FC = ({ setTimeout(async () => { setIsSubmitting("saved"); }, 2000); + } else if (isSubmitting === "submitting") { + setShowAlert(true); } }, [isSubmitting, setShowAlert]); diff --git a/apps/app/components/tiptap/extensions/index.tsx b/apps/app/components/tiptap/extensions/index.tsx index fadba0c62..2c5ffd10a 100644 --- a/apps/app/components/tiptap/extensions/index.tsx +++ b/apps/app/components/tiptap/extensions/index.tsx @@ -23,7 +23,7 @@ import isValidHttpUrl from "../bubble-menu/utils/link-validator"; lowlight.registerLanguage("ts", ts); -export const TiptapExtensions = (workspaceSlug: string) => [ +export const TiptapExtensions = (workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void) => [ StarterKit.configure({ bulletList: { HTMLAttributes: { @@ -112,7 +112,7 @@ export const TiptapExtensions = (workspaceSlug: string) => [ UniqueID.configure({ types: ["image"], }), - SlashCommand(workspaceSlug), + SlashCommand(workspaceSlug, setIsSubmitting), TiptapUnderline, TextStyle, Color, diff --git a/apps/app/components/tiptap/index.tsx b/apps/app/components/tiptap/index.tsx index a96b9c971..418449c08 100644 --- a/apps/app/components/tiptap/index.tsx +++ b/apps/app/components/tiptap/index.tsx @@ -39,8 +39,8 @@ const Tiptap = (props: ITiptapRichTextEditor) => { const editor = useEditor({ editable: editable ?? true, - editorProps: TiptapEditorProps(workspaceSlug), - extensions: TiptapExtensions(workspaceSlug), + editorProps: TiptapEditorProps(workspaceSlug, setIsSubmitting), + extensions: TiptapExtensions(workspaceSlug, setIsSubmitting), content: value, onUpdate: async ({ editor }) => { // for instant feedback loop diff --git a/apps/app/components/tiptap/plugins/delete-image.tsx b/apps/app/components/tiptap/plugins/delete-image.tsx index df189ee3a..57ab65c63 100644 --- a/apps/app/components/tiptap/plugins/delete-image.tsx +++ b/apps/app/components/tiptap/plugins/delete-image.tsx @@ -14,7 +14,6 @@ const TrackImageDeletionPlugin = () => const removedImages: ProseMirrorNode[] = []; oldState.doc.descendants((oldNode, oldPos) => { - console.log(oldNode.type.name) if (oldNode.type.name !== 'image') return; if (!newState.doc.resolve(oldPos).parent) return; diff --git a/apps/app/components/tiptap/plugins/upload-image.tsx b/apps/app/components/tiptap/plugins/upload-image.tsx index 5897e9ffb..0657bc82b 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, workspaceSlug: string) { +export async function startImageUpload(file: File, view: EditorView, pos: number, workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void) { if (!file.type.includes("image/")) { return; } else if (file.size / 1024 / 1024 > 20) { @@ -85,6 +85,7 @@ export async function startImageUpload(file: File, view: EditorView, pos: number if (!workspaceSlug) { return; } + setIsSubmitting?.("submitting") const src = await UploadImageHandler(file, workspaceSlug); const { schema } = view.state; pos = findPlaceholder(view.state, id); @@ -104,7 +105,6 @@ const UploadImageHandler = (file: File, workspaceSlug: string): Promise 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({})); @@ -116,7 +116,6 @@ const UploadImageHandler = (file: File, workspaceSlug: string): Promise 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 2912614a0..d50fc29b0 100644 --- a/apps/app/components/tiptap/props.tsx +++ b/apps/app/components/tiptap/props.tsx @@ -1,7 +1,7 @@ import { EditorProps } from "@tiptap/pm/view"; import { startImageUpload } from "./plugins/upload-image"; -export function TiptapEditorProps(workspaceSlug: string): EditorProps { +export function TiptapEditorProps(workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void): EditorProps { return { attributes: { class: `prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none`, @@ -26,8 +26,7 @@ export function TiptapEditorProps(workspaceSlug: string): EditorProps { event.preventDefault(); const file = event.clipboardData.files[0]; const pos = view.state.selection.from; - - startImageUpload(file, view, pos, workspaceSlug); + startImageUpload(file, view, pos, workspaceSlug, setIsSubmitting); return true; } return false; @@ -47,7 +46,7 @@ export function TiptapEditorProps(workspaceSlug: string): EditorProps { }); // 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); + startImageUpload(file, view, coordinates.pos - 1, workspaceSlug, setIsSubmitting); } return true; } diff --git a/apps/app/components/tiptap/slash-command/index.tsx b/apps/app/components/tiptap/slash-command/index.tsx index 1ccb25db6..38f5c9c0a 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 = (workspaceSlug: string) => ({ query }: { query: string }) => +const getSuggestionItems = (workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void) => ({ query }: { query: string }) => [ { title: "Text", @@ -163,7 +163,7 @@ const getSuggestionItems = (workspaceSlug: string) => ({ query }: { query: strin if (input.files?.length) { const file = input.files[0]; const pos = editor.view.state.selection.from; - startImageUpload(file, editor.view, pos, workspaceSlug); + startImageUpload(file, editor.view, pos, workspaceSlug, setIsSubmitting); } }; input.click(); @@ -328,10 +328,10 @@ const renderItems = () => { }; }; -export const SlashCommand = (workspaceSlug: string) => +export const SlashCommand = (workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void) => Command.configure({ suggestion: { - items: getSuggestionItems(workspaceSlug), + items: getSuggestionItems(workspaceSlug, setIsSubmitting), render: renderItems, }, }); diff --git a/apps/app/styles/editor.css b/apps/app/styles/editor.css index 65e947eeb..57c23c911 100644 --- a/apps/app/styles/editor.css +++ b/apps/app/styles/editor.css @@ -135,7 +135,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p { box-sizing: border-box; position: absolute; top: 50%; - left: 50%; + left: 45%; width: 20px; height: 20px; border-radius: 50%;