mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
7c0711dc90
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".
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
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";
|