forked from github/plane
76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
import React from "react";
|
|
// editor
|
|
import { EditorRefApi, ILiteTextEditor, LiteTextEditorWithRef } from "@plane/lite-text-editor";
|
|
// components
|
|
import { IssueCommentToolbar } from "@/components/editor";
|
|
// helpers
|
|
import { cn } from "@/helpers/common.helper";
|
|
import { isEmptyHtmlString } from "@/helpers/string.helper";
|
|
// hooks
|
|
import { useMention } from "@/hooks/use-mention";
|
|
// services
|
|
import fileService from "@/services/file.service";
|
|
|
|
interface LiteTextEditorWrapperProps extends Omit<ILiteTextEditor, "fileHandler" | "mentionHandler"> {
|
|
workspaceSlug: string;
|
|
workspaceId: string;
|
|
isSubmitting?: boolean;
|
|
showSubmitButton?: boolean;
|
|
}
|
|
|
|
export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapperProps>((props, ref) => {
|
|
const {
|
|
containerClassName,
|
|
workspaceSlug,
|
|
workspaceId,
|
|
isSubmitting = false,
|
|
showSubmitButton = true,
|
|
...rest
|
|
} = props;
|
|
// use-mention
|
|
const { mentionHighlights } = useMention();
|
|
|
|
function isMutableRefObject<T>(ref: React.ForwardedRef<T>): ref is React.MutableRefObject<T | null> {
|
|
return !!ref && typeof ref === "object" && "current" in ref;
|
|
}
|
|
const isEmpty =
|
|
props.initialValue?.trim() === "" ||
|
|
props.initialValue === "<p></p>" ||
|
|
(isEmptyHtmlString(props.initialValue ?? "") && !props.initialValue?.includes("mention-component"));
|
|
|
|
return (
|
|
<div className="border border-custom-border-200 rounded p-3 space-y-3">
|
|
<LiteTextEditorWithRef
|
|
ref={ref}
|
|
fileHandler={{
|
|
upload: fileService.getUploadFileFunction(workspaceSlug),
|
|
delete: fileService.getDeleteImageFunction(workspaceId),
|
|
restore: fileService.getRestoreImageFunction(workspaceId),
|
|
cancel: fileService.cancelUpload,
|
|
}}
|
|
mentionHandler={{
|
|
highlights: mentionHighlights,
|
|
// suggestions disabled for now
|
|
}}
|
|
{...rest}
|
|
// overriding the containerClassName to add relative class passed
|
|
containerClassName={cn(containerClassName, "relative")}
|
|
/>
|
|
<IssueCommentToolbar
|
|
executeCommand={(key) => {
|
|
if (isMutableRefObject<EditorRefApi>(ref)) {
|
|
ref.current?.executeMenuItemCommand(key);
|
|
}
|
|
}}
|
|
isSubmitting={isSubmitting}
|
|
showSubmitButton={showSubmitButton}
|
|
handleSubmit={(e) => rest.onEnterKeyPress?.(e)}
|
|
isCommentEmpty={isEmpty}
|
|
editorRef={isMutableRefObject<EditorRefApi>(ref) ? ref : null}
|
|
/>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
LiteTextEditor.displayName = "LiteTextEditor";
|