[WIKI-539] refactor: remove lite text read only editor (#7481)

* refactor: remove lite text read only editor

* chore: update types
This commit is contained in:
Aaryan Khandelwal 2025-07-29 18:09:39 +05:30 committed by GitHub
parent 55f06cf546
commit e0fa6553ae
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
45 changed files with 280 additions and 758 deletions

View file

@ -1,5 +1,4 @@
export * from "./embeds";
export * from "./lite-text-editor";
export * from "./lite-text-read-only-editor";
export * from "./rich-text-editor";
export * from "./toolbar";

View file

@ -1,7 +1,7 @@
import React from "react";
// plane imports
import { EditorRefApi, ILiteTextEditorProps, LiteTextEditorWithRef, TFileHandler } from "@plane/editor";
import { MakeOptional } from "@plane/types";
import { type EditorRefApi, type ILiteTextEditorProps, LiteTextEditorWithRef, type TFileHandler } from "@plane/editor";
import type { MakeOptional } from "@plane/types";
import { cn } from "@plane/utils";
// components
import { EditorMentionsRoot, IssueCommentToolbar } from "@/components/editor";
@ -9,28 +9,34 @@ import { EditorMentionsRoot, IssueCommentToolbar } from "@/components/editor";
import { getEditorFileHandlers } from "@/helpers/editor.helper";
import { isCommentEmpty } from "@/helpers/string.helper";
interface LiteTextEditorWrapperProps
extends MakeOptional<
Omit<ILiteTextEditorProps, "fileHandler" | "mentionHandler">,
"disabledExtensions" | "flaggedExtensions"
> {
type LiteTextEditorWrapperProps = MakeOptional<
Omit<ILiteTextEditorProps, "fileHandler" | "mentionHandler">,
"disabledExtensions" | "flaggedExtensions"
> & {
anchor: string;
workspaceId: string;
isSubmitting?: boolean;
showSubmitButton?: boolean;
uploadFile: TFileHandler["upload"];
}
workspaceId: string;
} & (
| {
editable: false;
}
| {
editable: true;
uploadFile: TFileHandler["upload"];
}
);
export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapperProps>((props, ref) => {
const {
anchor,
containerClassName,
workspaceId,
disabledExtensions,
editable,
flaggedExtensions,
isSubmitting = false,
showSubmitButton = true,
uploadFile,
disabledExtensions,
flaggedExtensions,
workspaceId,
...rest
} = props;
function isMutableRefObject<T>(ref: React.ForwardedRef<T>): ref is React.MutableRefObject<T | null> {
@ -46,9 +52,10 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
ref={ref}
disabledExtensions={disabledExtensions ?? []}
flaggedExtensions={flaggedExtensions ?? []}
editable={editable}
fileHandler={getEditorFileHandlers({
anchor,
uploadFile,
uploadFile: editable ? props.uploadFile : async () => "",
workspaceId,
})}
mentionHandler={{

View file

@ -1,48 +0,0 @@
import React from "react";
// plane imports
import { EditorReadOnlyRefApi, ILiteTextReadOnlyEditorProps, LiteTextReadOnlyEditorWithRef } from "@plane/editor";
import { MakeOptional } from "@plane/types";
import { cn } from "@plane/utils";
// components
import { EditorMentionsRoot } from "@/components/editor";
// helpers
import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
// store hooks
import { useMember } from "@/hooks/store";
type LiteTextReadOnlyEditorWrapperProps = MakeOptional<
Omit<ILiteTextReadOnlyEditorProps, "fileHandler" | "mentionHandler">,
"disabledExtensions" | "flaggedExtensions"
> & {
anchor: string;
workspaceId: string;
};
export const LiteTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, LiteTextReadOnlyEditorWrapperProps>(
({ anchor, workspaceId, disabledExtensions, flaggedExtensions, ...props }, ref) => {
const { getMemberById } = useMember();
return (
<LiteTextReadOnlyEditorWithRef
ref={ref}
disabledExtensions={disabledExtensions ?? []}
flaggedExtensions={flaggedExtensions ?? []}
fileHandler={getReadOnlyEditorFileHandlers({
anchor,
workspaceId,
})}
mentionHandler={{
renderComponent: (props) => <EditorMentionsRoot {...props} />,
getMentionedEntityDetails: (id: string) => ({
display_name: getMemberById(id)?.member__display_name ?? "",
}),
}}
{...props}
// overriding the customClassName to add relative class passed
containerClassName={cn(props.containerClassName, "relative p-2")}
/>
);
}
);
LiteTextReadOnlyEditor.displayName = "LiteTextReadOnlyEditor";

View file

@ -75,6 +75,7 @@ export const AddComment: React.FC<Props> = observer((props) => {
control={control}
render={({ field: { value, onChange } }) => (
<LiteTextEditor
editable
onEnterKeyPress={(e) => {
if (currentUser) handleSubmit(onSubmit)(e);
}}

View file

@ -8,7 +8,7 @@ import { EditorRefApi } from "@plane/editor";
import { TIssuePublicComment } from "@plane/types";
import { getFileURL } from "@plane/utils";
// components
import { LiteTextEditor, LiteTextReadOnlyEditor } from "@/components/editor";
import { LiteTextEditor } from "@/components/editor";
import { CommentReactions } from "@/components/issues/peek-overview";
// helpers
import { timeAgo } from "@/helpers/date-time.helper";
@ -102,6 +102,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
name="comment_html"
render={({ field: { onChange, value } }) => (
<LiteTextEditor
editable
anchor={anchor}
workspaceId={workspaceID?.toString() ?? ""}
onEnterKeyPress={handleSubmit(handleCommentUpdate)}
@ -138,7 +139,8 @@ export const CommentCard: React.FC<Props> = observer((props) => {
</div>
</form>
<div className={`${isEditing ? "hidden" : ""}`}>
<LiteTextReadOnlyEditor
<LiteTextEditor
editable={false}
anchor={anchor}
workspaceId={workspaceID?.toString() ?? ""}
ref={showEditorRef}