feat: Add RichTextEditorWrapper component for easier global rich text editor changes

This commit adds the `RichTextEditorWrapper` component to the project. The component is responsible for rendering a rich text editor with additional functionalities.

The `RichTextEditorWrapper` component imports the necessary dependencies from `"react"` and `"@plane/rich-text-editor"`. It also utilizes the `useMention` hook from `"hooks/store"`.

The component interfaces include `EditorHandle`, which defines methods like `clearEditor` and `setEditorValue`, and `RichTextEditorWrapperProps`, which extends the `IRichTextEditor` interface with additional properties.

An instance of the `FileService` is created to handle file-related operations.

The `RichTextEditorWrapper` component is exported using `React.forwardRef` to allow access to the underlying editor's ref. It takes the `workspaceSlug` prop and other relevant props, renders the `RichTextEditorWithRef` component, and passes the necessary props like `uploadFile`, `deleteFile`, `restoreFile`, `mentionSuggestions`, and `mentionHighlights`.

The `RichTextEditorWrapper` component's display name is set to "RichTextEditorWrapper".
This commit is contained in:
Palanikannan1437 2024-01-11 12:43:19 +05:30
parent 73eed69aa6
commit 7c0711dc90

View File

@ -0,0 +1,41 @@
import React from "react";
import { RichTextEditorWithRef, IRichTextEditor } from "@plane/rich-text-editor";
import { useMention } from "hooks/store";
import { FileService } from "services/file.service";
interface EditorHandle {
clearEditor: () => void;
setEditorValue: (content: string) => void;
}
interface RichTextEditorWrapperProps
extends Omit<
IRichTextEditor,
"uploadFile" | "deleteFile" | "restoreFile" | "mentionSuggestions" | "mentionHighlights"
> {
workspaceSlug: string;
}
const fileService = new FileService();
export const RichTextEditorWrapper = React.forwardRef<EditorHandle, RichTextEditorWrapperProps>(
({ workspaceSlug, ...props }, ref) => {
const editorSuggestions = useMention();
return (
<RichTextEditorWithRef
ref={ref}
uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
deleteFile={fileService.deleteImage}
restoreFile={fileService.restoreImage}
mentionSuggestions={editorSuggestions.mentionSuggestions}
mentionHighlights={editorSuggestions.mentionHighlights}
{...props}
/>
);
}
);
RichTextEditorWrapper.displayName = "RichTextEditorWrapper";