[WEB-5449] fix: update inbox issue description loading condition (#4785)

This commit is contained in:
Vipin Chaudhary
2025-11-18 18:05:10 +05:30
committed by GitHub
parent 37318b04c4
commit a8df46fb83
14 changed files with 57 additions and 40 deletions
@@ -1,6 +1,6 @@
"use client";
import { useCallback, useEffect, useState, useRef } from "react";
import { useCallback, useEffect, useState, useRef, useMemo } from "react";
import { debounce } from "lodash-es";
import { observer } from "mobx-react";
import { Controller, useForm } from "react-hook-form";
@@ -13,6 +13,7 @@ import { getDescriptionPlaceholderI18n } from "@plane/utils";
import { RichTextEditor } from "@/components/editor/rich-text";
// hooks
import { useEditorAsset } from "@/hooks/store/use-editor-asset";
import { useProject } from "@/hooks/store/use-project";
import { useWorkspace } from "@/hooks/store/use-workspace";
// plane web services
import { WorkspaceService } from "@/plane-web/services";
@@ -104,7 +105,6 @@ export const DescriptionInput: React.FC<Props> = observer((props) => {
setIsSubmitting,
swrDescription,
workspaceSlug,
issueSequenceId,
} = props;
// states
const [localDescription, setLocalDescription] = useState<TFormData>({
@@ -187,6 +187,16 @@ export const DescriptionInput: React.FC<Props> = observer((props) => {
[]
);
const { getProjectIdentifierById } = useProject();
const workItemUrl = useMemo(() => {
const projectIdentifier = getProjectIdentifierById(projectId);
if (!projectIdentifier || !props.issueSequenceId) {
return undefined;
}
const origin = window.location.origin;
return `${origin}/${workspaceSlug}/browse/${projectIdentifier}-${props.issueSequenceId}/`;
}, [projectId, workspaceSlug, props.issueSequenceId, getProjectIdentifierById]);
if (!workspaceDetails) return null;
return (
@@ -200,7 +210,7 @@ export const DescriptionInput: React.FC<Props> = observer((props) => {
editable={!disabled}
ref={editorRef}
id={entityId}
issueSequenceId={issueSequenceId}
workItemUrl={workItemUrl}
disabledExtensions={disabledExtensions}
initialValue={localDescription.description_html ?? "<p></p>"}
value={swrDescription ?? null}
@@ -9,7 +9,6 @@ import { EditorMentionsRoot } from "@/components/editor/embeds/mentions";
// hooks
import { useEditorConfig, useEditorMention } from "@/hooks/editor";
import { useMember } from "@/hooks/store/use-member";
import { useProject } from "@/hooks/store/use-project";
import { useUserProfile } from "@/hooks/store/use-user-profile";
// plane web components
import { EmbedHandler } from "@/plane-web/components/pages/editor/external-embed/embed-handler";
@@ -23,7 +22,7 @@ type RichTextEditorWrapperProps = MakeOptional<
workspaceSlug: string;
workspaceId: string;
projectId?: string;
issueSequenceId?: number;
workItemUrl?: string;
} & (
| {
editable: false;
@@ -43,6 +42,7 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
workspaceId,
projectId,
disabledExtensions: additionalDisabledExtensions = [],
workItemUrl,
...rest
} = props;
// store hooks
@@ -50,7 +50,6 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
const {
data: { is_smooth_cursor_enabled },
} = useUserProfile();
const { getProjectIdentifierById } = useProject();
// editor flaggings
const { richText: richTextEditorExtensions } = useEditorFlagging({
workspaceSlug: workspaceSlug?.toString() ?? "",
@@ -62,18 +61,8 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
// editor config
const { getEditorFileHandlers } = useEditorConfig();
const workItemIdentifier = useMemo(() => {
const projectIdentifier = getProjectIdentifierById(projectId);
if (!projectIdentifier || !props.issueSequenceId) {
return null;
}
const origin = window.location.origin;
return `${origin}/${workspaceSlug}/browse/${projectIdentifier}-${props.issueSequenceId}/`;
}, [projectId, workspaceSlug, props.issueSequenceId, getProjectIdentifierById]);
return (
<RichTextEditorWithRef
workItemIdentifier={workItemIdentifier}
ref={ref}
disabledExtensions={[...richTextEditorExtensions.disabled, ...(additionalDisabledExtensions ?? [])]}
editable={editable}
@@ -100,6 +89,7 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
embedHandler: {
externalEmbedComponent: { widgetCallback: EmbedHandler },
},
workItemUrl,
}}
{...rest}
containerClassName={cn("relative pl-3 pb-3", containerClassName)}
@@ -195,7 +195,6 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
<DescriptionInputLoader />
) : (
<DescriptionInput
issueSequenceId={issue.sequence_id}
containerClassName="-ml-3 border-none"
disabled={!isEditable}
editorRef={editorRef}
+8
View File
@@ -28,6 +28,8 @@ export const useEditorFlagging = (props: TEditorFlaggingHookProps): TEditorFlagg
const { isNestedPagesEnabled, isCommentsEnabled } = usePageStore(storeType || EPageStoreType.WORKSPACE);
const isEditorAttachmentsEnabled = useFlag(workspaceSlug, "EDITOR_ATTACHMENTS");
const isEditorCopyBlockLinkEnabled = useFlag(workspaceSlug, "EDITOR_COPY_BLOCK_LINK");
// const isEditorUniqueIdEnabled = useFlag(workspaceSlug, "EDITOR_UNIQUE_ID");
const isEditorUniqueIdEnabled = true;
const isEditorMathematicsEnabled = useFlag(workspaceSlug, "EDITOR_MATHEMATICS");
const isExternalEmbedEnabled = useFlag(workspaceSlug, "EDITOR_EXTERNAL_EMBEDS");
// check integrations
@@ -94,6 +96,12 @@ export const useEditorFlagging = (props: TEditorFlaggingHookProps): TEditorFlagg
richText.disabled.add("copy-block-link");
}
if (!isEditorUniqueIdEnabled) {
document.disabled.add("unique-id");
richText.disabled.add("unique-id");
liteText.disabled.add("unique-id");
}
// check for drawio integration
if (!hasDrawioIntegration) {
document.flagged.add("drawio");
+1 -1
View File
@@ -6,4 +6,4 @@ export enum EApplicationAuthorizationGrantType {
export const AUTHORIZATION_GRANT_TYPES_MAP = {
[EApplicationAuthorizationGrantType.AUTHORIZATION_CODE]: "User-Level Connection",
[EApplicationAuthorizationGrantType.CLIENT_CREDENTIALS]: "Workspace-Level Connection",
};
};
+1
View File
@@ -107,6 +107,7 @@ export enum E_FEATURE_FLAGS {
EDITOR_EXTERNAL_EMBEDS = "EDITOR_EXTERNAL_EMBEDS",
EDITOR_COPY_BLOCK_LINK = "EDITOR_COPY_BLOCK_LINK",
EDITOR_ADVANCED_MENTIONS = "EDITOR_ADVANCED_MENTIONS",
EDITOR_UNIQUE_ID = "EDITOR_UNIQUE_ID",
// analytics
ANALYTICS_ADVANCED = "ANALYTICS_ADVANCED",
// app rail
@@ -18,7 +18,6 @@ const RichTextEditor: React.FC<IRichTextEditorProps> = (props) => {
fileHandler,
flaggedExtensions,
extendedEditorProps,
workItemIdentifier,
} = props;
const getExtensions = useCallback(() => {
@@ -48,7 +47,7 @@ const RichTextEditor: React.FC<IRichTextEditorProps> = (props) => {
editor={editor}
flaggedExtensions={flaggedExtensions}
disabledExtensions={disabledExtensions}
workItemIdentifier={workItemIdentifier}
workItemUrl={extendedEditorProps?.workItemUrl}
/>
</>
)}
@@ -24,7 +24,7 @@ import { ADDITIONAL_EXTENSIONS } from "@/plane-editor/constants/extensions";
import { useBlockMenu } from "@/plane-editor/hooks/use-block-menu";
// types
import { EExternalEmbedAttributeNames } from "@/types";
import type { IEditorProps } from "@/types";
import type { IEditorProps, IEditorPropsExtended } from "@/types";
// components
import { getNodeOptions } from "./block-menu-options";
@@ -32,7 +32,7 @@ type Props = {
disabledExtensions?: IEditorProps["disabledExtensions"];
editor: Editor;
flaggedExtensions?: IEditorProps["flaggedExtensions"];
workItemIdentifier?: IEditorProps["workItemIdentifier"];
workItemUrl?: IEditorPropsExtended["workItemUrl"];
};
export type BlockMenuOption = {
icon: LucideIcon;
@@ -74,7 +74,7 @@ const stripCommentMarksFromJSON = (node: JSONContent | null | undefined): JSONCo
};
export const BlockMenu = (props: Props) => {
const { editor, flaggedExtensions, disabledExtensions, workItemIdentifier } = props;
const { editor, flaggedExtensions, disabledExtensions, workItemUrl } = props;
const [isOpen, setIsOpen] = useState(false);
const [isAnimatedIn, setIsAnimatedIn] = useState(false);
const menuRef = useRef<HTMLDivElement | null>(null);
@@ -210,9 +210,9 @@ export const BlockMenu = (props: Props) => {
let urlToCopy: string;
const currentPageUrl = window.location.href.split("#")[0];
const workItemUrl = workItemIdentifier;
if (workItemUrl) {
urlToCopy = nodeId ? `${workItemUrl}#${nodeId}` : workItemUrl;
const baseWorkItemUrl = workItemUrl;
if (baseWorkItemUrl) {
urlToCopy = nodeId ? `${baseWorkItemUrl}#${nodeId}` : baseWorkItemUrl;
} else {
urlToCopy = nodeId ? `${currentPageUrl}#${nodeId}` : currentPageUrl;
}
@@ -36,7 +36,6 @@ import { CustomImageExtension } from "./custom-image/extension";
import { EmojiExtension } from "./emoji/extension";
import { CustomPlaceholderExtension } from "./placeholder";
import { CustomStarterKitExtension } from "./starter-kit";
import { UniqueID } from "./unique-id/extension";
type TArguments = Pick<
IEditorProps,
@@ -122,8 +121,6 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
extendedEditorProps,
flaggedExtensions,
fileHandler,
}),
UniqueID.configure({
provider,
}),
];
-1
View File
@@ -184,7 +184,6 @@ export type IEditorProps = {
tabIndex?: number;
value?: Content | null;
extendedEditorProps: IEditorPropsExtended;
workItemIdentifier?: string | null;
};
export type ILiteTextEditorProps = IEditorProps;
+2 -1
View File
@@ -12,4 +12,5 @@ export type TExtensions =
| "comments"
| "mathematics"
| "drawio"
| "copy-block-link";
| "copy-block-link"
| "unique-id";
@@ -1,5 +1,7 @@
import type { HocuspocusProvider } from "@hocuspocus/provider";
import type { Extensions } from "@tiptap/core";
// ce imports
import { UniqueID } from "@/extensions/unique-id/extension";
import { ADDITIONAL_EXTENSIONS } from "@/plane-editor/constants/extensions";
import type { IEditorPropsExtended } from "@/plane-editor/types/editor-extended";
// types
@@ -11,10 +13,12 @@ import { MathematicsExtension } from "../mathematics/extension";
import { NodeHighlightExtension } from "../node-highlight/extension";
import { SmoothCursorExtension } from "../smooth-cursor";
type Props = TCoreAdditionalExtensionsProps & { extendedEditorProps?: IEditorPropsExtended };
type Props = TCoreAdditionalExtensionsProps & { extendedEditorProps?: IEditorPropsExtended } & {
provider: HocuspocusProvider | undefined;
};
export const CoreEditorAdditionalExtensions = (props: Props): Extensions => {
const { flaggedExtensions, extendedEditorProps, disabledExtensions } = props;
const { flaggedExtensions, extendedEditorProps, disabledExtensions, provider } = props;
const { extensionOptions } = extendedEditorProps ?? {};
const { embedHandler, isSmoothCursorEnabled } = extendedEditorProps ?? {};
const extensions: Extensions = [];
@@ -34,8 +38,16 @@ export const CoreEditorAdditionalExtensions = (props: Props): Extensions => {
if (isSmoothCursorEnabled) {
extensions.push(SmoothCursorExtension);
}
if (!disabledExtensions?.includes("copy-block-link")) {
if (!disabledExtensions?.includes("unique-id") && !disabledExtensions?.includes("copy-block-link")) {
extensions.push(NodeHighlightExtension);
}
if (!disabledExtensions?.includes("unique-id")) {
extensions.push(
UniqueID.configure({
provider,
})
);
}
return extensions;
};
@@ -18,6 +18,7 @@ export type IEditorPropsExtended = {
commentConfig?: TCommentConfig;
isSmoothCursorEnabled: boolean;
logoSpinner?: React.ComponentType;
workItemUrl?: string | null;
};
export type ICollaborativeDocumentEditorPropsExtended = unknown;
+6 -6
View File
@@ -4,14 +4,14 @@
"version": "0.0.0",
"scripts": {
"dev": "vite",
"lint": "eslint .",
"lint-mobile": "eslint .",
"preview": "vite preview",
"clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist",
"check:lint": "eslint . --max-warnings 28",
"check:types": "tsc --noEmit",
"check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
"fix:lint": "eslint . --fix",
"fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\""
"check:lint-mobile": "eslint . --max-warnings 28",
"check:types-mobile": "tsc --noEmit",
"check:format-mobile": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
"fix:lint-mobile": "eslint . --fix",
"fix:format-mobile": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\""
},
"dependencies": {
"@plane/editor": "workspace:*",