[WEB-5449] fix: update inbox issue description loading condition (#4785)
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -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",
|
||||
};
|
||||
};
|
||||
|
||||
@@ -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,
|
||||
}),
|
||||
];
|
||||
|
||||
@@ -184,7 +184,6 @@ export type IEditorProps = {
|
||||
tabIndex?: number;
|
||||
value?: Content | null;
|
||||
extendedEditorProps: IEditorPropsExtended;
|
||||
workItemIdentifier?: string | null;
|
||||
};
|
||||
|
||||
export type ILiteTextEditorProps = IEditorProps;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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:*",
|
||||
|
||||
Reference in New Issue
Block a user