binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WIKI-466] refactor: remove rich text read only editor (#7241)

Browse source 
* refactor: remove rich text read only editor

* fix: type imports
This commit is contained in:
Aaryan Khandelwal 2025-07-03 14:16:17 +05:30 • committed by GitHub
parent 7d141f26ad
commit 6f27ec031d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 126 additions and 262 deletions
Download patch file Download diff file Expand all files Collapse all files

113
apps/web/core/components/issues/description-input.tsx
View file

@ -5,13 +5,13 @@ import debounce from "lodash/debounce";
import { observer } from "mobx-react";
import { Controller, useForm } from "react-hook-form";
// plane imports
import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
import type { EditorRefApi } from "@plane/editor";
import { useTranslation } from "@plane/i18n";
import { EFileAssetType, TIssue, TNameDescriptionLoader } from "@plane/types";
import { Loader } from "@plane/ui";
// components
import { getDescriptionPlaceholderI18n } from "@plane/utils";
import { RichTextEditor, RichTextReadOnlyEditor } from "@/components/editor";
import { RichTextEditor } from "@/components/editor";
import { TIssueOperations } from "@/components/issues/issue-detail";
// helpers
// hooks
@ -22,7 +22,6 @@ const workspaceService = new WorkspaceService();
export type IssueDescriptionInputProps = {
containerClassName?: string;
editorReadOnlyRef?: React.RefObject<EditorReadOnlyRefApi>;
editorRef?: React.RefObject<EditorRefApi>;
workspaceSlug: string;
projectId: string;
@ -38,7 +37,6 @@ export type IssueDescriptionInputProps = {
export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((props) => {
const {
containerClassName,
editorReadOnlyRef,
editorRef,
workspaceSlug,
projectId,
@ -109,66 +107,55 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((p
<Controller
name="description_html"
control={control}
render={({ field: { onChange } }) =>
!disabled ? (
<RichTextEditor
id={issueId}
initialValue={localIssueDescription.description_html ?? "<p></p>"}
value={swrIssueDescription ?? null}
workspaceSlug={workspaceSlug}
workspaceId={workspaceId}
projectId={projectId}
dragDropEnabled
onChange={(_description: object, description_html: string) => {
setIsSubmitting("submitting");
onChange(description_html);
debouncedFormSave();
}}
placeholder={
placeholder
? placeholder
: (isFocused, value) => t(`${getDescriptionPlaceholderI18n(isFocused, value)}`)
render={({ field: { onChange } }) => (
<RichTextEditor
editable={!disabled}
id={issueId}
initialValue={localIssueDescription.description_html ?? "<p></p>"}
value={swrIssueDescription ?? null}
workspaceSlug={workspaceSlug}
workspaceId={workspaceId}
projectId={projectId}
dragDropEnabled
onChange={(_description: object, description_html: string) => {
setIsSubmitting("submitting");
onChange(description_html);
debouncedFormSave();
}}
placeholder={
placeholder
? placeholder
: (isFocused, value) => t(`${getDescriptionPlaceholderI18n(isFocused, value)}`)
}
searchMentionCallback={async (payload) =>
await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
...payload,
project_id: projectId?.toString() ?? "",
issue_id: issueId?.toString(),
})
}
containerClassName={containerClassName}
uploadFile={async (blockId, file) => {
try {
const { asset_id } = await uploadEditorAsset({
blockId,
data: {
entity_identifier: issueId,
entity_type: EFileAssetType.ISSUE_DESCRIPTION,
},
file,
projectId,
workspaceSlug,
});
return asset_id;
} catch (error) {
console.log("Error in uploading work item asset:", error);
throw new Error("Asset upload failed. Please try again later.");
}
searchMentionCallback={async (payload) =>
await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
...payload,
project_id: projectId?.toString() ?? "",
issue_id: issueId?.toString(),
})
}
containerClassName={containerClassName}
uploadFile={async (blockId, file) => {
try {
const { asset_id } = await uploadEditorAsset({
blockId,
data: {
entity_identifier: issueId,
entity_type: EFileAssetType.ISSUE_DESCRIPTION,
},
file,
projectId,
workspaceSlug,
});
return asset_id;
} catch (error) {
console.log("Error in uploading work item asset:", error);
throw new Error("Asset upload failed. Please try again later.");
}
}}
ref={editorRef}
/>
) : (
<RichTextReadOnlyEditor
id={issueId}
initialValue={localIssueDescription.description_html ?? ""}
containerClassName={containerClassName}
workspaceId={workspaceId}
workspaceSlug={workspaceSlug}
projectId={projectId}
ref={editorReadOnlyRef}
/>
)
}
}}
ref={editorRef}
/>
)}
/>
) : (
<Loader>

7
apps/web/core/components/issues/issue-modal/components/description-editor.tsx
View file

@ -6,13 +6,9 @@ import { Control, Controller } from "react-hook-form";
import { Sparkle } from "lucide-react";
// plane imports
import { ETabIndices } from "@plane/constants";
// editor
import { EditorRefApi } from "@plane/editor";
// i18n
import type { EditorRefApi } from "@plane/editor";
import { useTranslation } from "@plane/i18n";
// types
import { EFileAssetType, TIssue } from "@plane/types";
// ui
import { Loader, setToast, TOAST_TYPE } from "@plane/ui";
import { getDescriptionPlaceholderI18n, getTabIndex } from "@plane/utils";
// components
@ -177,6 +173,7 @@ export const IssueDescriptionEditor: React.FC<TIssueDescriptionEditorProps> = ob
control={control}
render={({ field: { value, onChange } }) => (
<RichTextEditor
editable
id="issue-modal-editor"
initialValue={value ?? ""}
value={descriptionHtmlData}