diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx index c0c6157a2..1e4285f7d 100644 --- a/apps/app/components/issues/description-form.tsx +++ b/apps/app/components/issues/description-form.tsx @@ -69,11 +69,13 @@ export const IssueDescriptionForm: FC = ({ useEffect(() => { if (isSubmitting === "submitted") { + setShowAlert(false); setTimeout(async () => { setIsSubmitting("saved"); }, 2000); } - }, [isSubmitting]); + }, [isSubmitting, setShowAlert]); + // reset form values useEffect(() => { @@ -112,9 +114,8 @@ export const IssueDescriptionForm: FC = ({ {characterLimit && (
255 ? "text-red-500" : "" - }`} + className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : "" + }`} > {watch("name").length} @@ -134,16 +135,18 @@ export const IssueDescriptionForm: FC = ({ { + setShowAlert(true); setIsSubmitting("submitting"); onChange(description_html); setValue("description", description); @@ -156,9 +159,8 @@ export const IssueDescriptionForm: FC = ({ }} />
{isSubmitting === "submitting" ? "Saving..." : "Saved"}
diff --git a/apps/app/components/tiptap/extensions/image-resize.tsx b/apps/app/components/tiptap/extensions/image-resize.tsx index eba453af3..7b2d1a2d3 100644 --- a/apps/app/components/tiptap/extensions/image-resize.tsx +++ b/apps/app/components/tiptap/extensions/image-resize.tsx @@ -12,7 +12,7 @@ export const ImageResizer = ({ editor }: { editor: Editor }) => { src: imageInfo.src, width: Number(imageInfo.style.width.replace("px", "")), height: Number(imageInfo.style.height.replace("px", "")), - }); + } as any); editor.commands.setNodeSelection(selection.from); } }; @@ -23,46 +23,30 @@ export const ImageResizer = ({ editor }: { editor: Editor }) => { target={document.querySelector(".ProseMirror-selectednode") as any} container={null} origin={false} - /* Resize event edges */ edge={false} throttleDrag={0} - /* When resize or scale, keeps a ratio of the width, height. */ keepRatio={true} - /* resizable*/ - /* Only one of resizable, scalable, warpable can be used. */ resizable={true} throttleResize={0} onResize={({ target, width, height, - // dist, delta, - }: // direction, - // clientX, - // clientY, + }: any) => { delta[0] && (target!.style.width = `${width}px`); delta[1] && (target!.style.height = `${height}px`); }} - // { target, isDrag, clientX, clientY }: any onResizeEnd={() => { updateMediaSize(); }} - /* scalable */ - /* Only one of resizable, scalable, warpable can be used. */ scalable={true} - throttleScale={0} - /* Set the direction of resizable */ renderDirections={["w", "e"]} onScale={({ target, - // scale, - // dist, - // delta, transform, - }: // clientX, - // clientY, + }: any) => { target!.style.transform = transform; }} diff --git a/apps/app/components/tiptap/index.tsx b/apps/app/components/tiptap/index.tsx index 6d63a7208..c89a41989 100644 --- a/apps/app/components/tiptap/index.tsx +++ b/apps/app/components/tiptap/index.tsx @@ -19,6 +19,7 @@ export interface ITiptapRichTextEditor { editorContentCustomClassNames?: string; onChange?: (json: any, html: string) => void; setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void; + setShouldShowAlert?: (showAlert: boolean) => void; editable?: boolean; forwardedRef?: any; debouncedUpdatesEnabled?: boolean; @@ -31,6 +32,7 @@ const Tiptap = (props: ITiptapRichTextEditor) => { forwardedRef, editable, setIsSubmitting, + setShouldShowAlert, editorContentCustomClassNames, value, noBorder, @@ -46,6 +48,7 @@ const Tiptap = (props: ITiptapRichTextEditor) => { onUpdate: async ({ editor }) => { // for instant feedback loop setIsSubmitting?.("submitting"); + setShouldShowAlert?.(true); checkForNodeDeletions(editor); if (debouncedUpdatesEnabled) { debouncedUpdates({ onChange, editor }); @@ -113,7 +116,7 @@ const Tiptap = (props: ITiptapRichTextEditor) => { }, 500); }, 1000); - const editorClassNames = `relative w-full max-w-screen-lg sm:rounded-lg sm:shadow-lg mt-2 p-3 relative focus:outline-none rounded-md + const editorClassNames = `relative w-full max-w-screen-lg sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md ${noBorder ? "" : "border border-custom-border-200"} ${borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0" } ${customClassName}`;