[WIKI-511] [WIKI-572] fix: extended page root and editor body (#7661)

* fix: better refactoring of page root and editor body * fix: editor sideeffects * fix: add comments json field * fix: props name * fix: review changes * fix: extra checks * fix: type changes * fix: remove editor ref current * fix: renaming * fix: link check
2025-10-16 12:45:33 +00:00 · 2025-09-01 22:17:53 +05:30 · 2025-09-01 22:17:53 +05:30 · fd5ba6c7b8
commit fd5ba6c7b8
parent f42eeec2c0
39 changed files with 492 additions and 106 deletions
--- a/apps/space/core/components/editor/lite-text-editor.tsx
+++ b/apps/space/core/components/editor/lite-text-editor.tsx
@ -2,17 +2,16 @@ import React from "react";
 // plane imports
 import { type EditorRefApi, type ILiteTextEditorProps, LiteTextEditorWithRef, type TFileHandler } from "@plane/editor";
 import type { MakeOptional } from "@plane/types";
-import { cn } from "@plane/utils";
+import { cn, isCommentEmpty } from "@plane/utils";
 // helpers
 import { getEditorFileHandlers } from "@/helpers/editor.helper";
-import { isCommentEmpty } from "@/helpers/string.helper";
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 // local imports
 import { EditorMentionsRoot } from "./embeds/mentions";
 import { IssueCommentToolbar } from "./toolbar";

 type LiteTextEditorWrapperProps = MakeOptional<
-  Omit<ILiteTextEditorProps, "fileHandler" | "mentionHandler">,
+  Omit<ILiteTextEditorProps, "fileHandler" | "mentionHandler" | "extendedEditorProps">,
  "disabledExtensions" | "flaggedExtensions"
 > & {
  anchor: string;
@ -63,6 +62,7 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
        mentionHandler={{
          renderComponent: (props) => <EditorMentionsRoot {...props} />,
        }}
+        extendedEditorProps={{}}
        {...rest}
        // overriding the containerClassName to add relative class passed
        containerClassName={cn(containerClassName, "relative")}
--- a/apps/space/core/components/editor/rich-text-editor.tsx
+++ b/apps/space/core/components/editor/rich-text-editor.tsx
@ -12,7 +12,7 @@ import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 import { EditorMentionsRoot } from "./embeds/mentions";

 type RichTextEditorWrapperProps = MakeOptional<
-  Omit<IRichTextEditorProps, "editable" | "fileHandler" | "mentionHandler">,
+  Omit<IRichTextEditorProps, "editable" | "fileHandler" | "mentionHandler" | "extendedEditorProps">,
  "disabledExtensions" | "flaggedExtensions"
 > & {
  anchor: string;
@ -56,6 +56,7 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
        workspaceId,
      })}
      flaggedExtensions={richTextEditorExtensions.flagged}
+      extendedEditorProps={{}}
      {...rest}
      containerClassName={containerClassName}
      editorClassName="min-h-[100px] py-2 overflow-hidden"
--- a/apps/space/helpers/string.helper.ts
+++ b/apps/space/helpers/string.helper.ts
@ -57,24 +57,6 @@ export const isEmptyHtmlString = (htmlString: string, allowedHTMLTags: string[]
  return cleanText.trim() === "";
 };

-/**
- * @description this function returns whether a comment is empty or not by checking for the following conditions-
- * 1. If comment is undefined
- * 2. If comment is an empty string
- * 3. If comment is "<p></p>"
- * @param {string | undefined} comment
- * @returns {boolean}
- */
-export const isCommentEmpty = (comment: string | undefined): boolean => {
-  // return true if comment is undefined
-  if (!comment) return true;
-  return (
-    comment?.trim() === "" ||
-    comment === "<p></p>" ||
-    isEmptyHtmlString(comment ?? "", ["img", "mention-component", "image-component", "embed-component"])
-  );
-};
-
 export const replaceUnderscoreIfSnakeCase = (str: string) => str.replace(/_/g, " ");

 export const capitalizeFirstLetter = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
@ -1,6 +1,6 @@
 "use client";

-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@ -20,6 +20,7 @@ import { PageRoot, TPageRootConfig, TPageRootHandlers } from "@/components/pages
 import { useEditorConfig } from "@/hooks/editor";
 import { useEditorAsset } from "@/hooks/store/use-editor-asset";
 import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useAppRouter } from "@/hooks/use-app-router";
 // plane web hooks
 import { EPageStoreType, usePage, usePageStore } from "@/plane-web/hooks/store";
 // plane web services
@ -30,13 +31,17 @@ const workspaceService = new WorkspaceService();
 const projectPageService = new ProjectPageService();
 const projectPageVersionService = new ProjectPageVersionService();

+const storeType = EPageStoreType.PROJECT;
+
 const PageDetailsPage = observer(() => {
+  // router
+  const router = useAppRouter();
  const { workspaceSlug, projectId, pageId } = useParams();
  // store hooks
-  const { createPage, fetchPageDetails } = usePageStore(EPageStoreType.PROJECT);
+  const { createPage, fetchPageDetails } = usePageStore(storeType);
  const page = usePage({
    pageId: pageId?.toString() ?? "",
-    storeType: EPageStoreType.PROJECT,
+    storeType,
  });
  const { getWorkspaceBySlug } = useWorkspace();
  const { uploadEditorAsset } = useEditorAsset();
@ -88,10 +93,25 @@ const PageDetailsPage = observer(() => {
          versionId
        );
      },
-      getRedirectionLink: (pageId) => `/${workspaceSlug}/projects/${projectId}/pages/${pageId}`,
+      restoreVersion: async (pageId, versionId) => {
+        if (!workspaceSlug || !projectId) return;
+        await projectPageVersionService.restoreVersion(
+          workspaceSlug.toString(),
+          projectId.toString(),
+          pageId,
+          versionId
+        );
+      },
+      getRedirectionLink: (pageId) => {
+        if (pageId) {
+          return `/${workspaceSlug}/projects/${projectId}/pages/${pageId}`;
+        } else {
+          return `/${workspaceSlug}/projects/${projectId}/pages`;
+        }
+      },
      updateDescription: updateDescription ?? (async () => {}),
    }),
-    [createPage, fetchEntityCallback, id, projectId, updateDescription, workspaceSlug]
+    [createPage, fetchEntityCallback, id, updateDescription, workspaceSlug, projectId]
  );
  // page root config
  const pageRootConfig: TPageRootConfig = useMemo(
@ -115,7 +135,7 @@ const PageDetailsPage = observer(() => {
        workspaceSlug: workspaceSlug?.toString() ?? "",
      }),
    }),
-    [getEditorFileHandlers, id, projectId, uploadEditorAsset, workspaceId, workspaceSlug]
+    [getEditorFileHandlers, id, uploadEditorAsset, projectId, workspaceId, workspaceSlug]
  );

  const webhookConnectionParams: TWebhookConnectionQueryParams = useMemo(
@ -127,6 +147,12 @@ const PageDetailsPage = observer(() => {
    [projectId, workspaceSlug]
  );

+  useEffect(() => {
+    if (page?.deleted_at && page?.id) {
+      router.push(pageRootHandlers.getRedirectionLink());
+    }
+  }, [page?.deleted_at, page?.id, router, pageRootHandlers]);
+
  if ((!page || !id) && !pageDetailsError)
    return (
      <div className="size-full grid place-items-center">
@ -150,7 +176,7 @@ const PageDetailsPage = observer(() => {
      </div>
    );

-  if (!page) return null;
+  if (!page || !workspaceSlug || !projectId) return null;

  return (
    <>
@ -160,9 +186,11 @@ const PageDetailsPage = observer(() => {
          <PageRoot
            config={pageRootConfig}
            handlers={pageRootHandlers}
+            storeType={storeType}
            page={page}
            webhookConnectionParams={webhookConnectionParams}
-            workspaceSlug={workspaceSlug?.toString() ?? ""}
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId?.toString()}
          />
          <IssuePeekOverview />
        </div>
--- a/apps/web/ce/components/pages/modals/index.ts
+++ b/apps/web/ce/components/pages/modals/index.ts
@ -1 +1,2 @@
 export * from "./move-page-modal";
+export * from "./modals";
--- a/apps/web/ce/components/pages/modals/modals.tsx
+++ b/apps/web/ce/components/pages/modals/modals.tsx
@ -0,0 +1,15 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+// components
+import { EPageStoreType } from "@/plane-web/hooks/store";
+// store
+import { TPageInstance } from "@/store/pages/base-page";
+
+export type TPageModalsProps = {
+  page: TPageInstance;
+  storeType: EPageStoreType;
+};
+
+export const PageModals: React.FC<TPageModalsProps> = observer((props) => null);
--- a/apps/web/ce/hooks/pages/index.ts
+++ b/apps/web/ce/hooks/pages/index.ts
@ -0,0 +1,2 @@
+export * from "./use-pages-pane-extensions";
+export * from "./use-extended-editor-extensions";
--- a/apps/web/ce/hooks/pages/use-extended-editor-extensions.ts
+++ b/apps/web/ce/hooks/pages/use-extended-editor-extensions.ts
@ -0,0 +1,20 @@
+import type { IEditorPropsExtended } from "@plane/editor";
+import type { TSearchEntityRequestPayload, TSearchResponse } from "@plane/types";
+import type { TPageInstance } from "@/store/pages/base-page";
+import { EPageStoreType } from "../store";
+
+export type TExtendedEditorExtensionsHookParams = {
+  workspaceSlug: string;
+  page: TPageInstance;
+  storeType: EPageStoreType;
+  fetchEntity: (payload: TSearchEntityRequestPayload) => Promise<TSearchResponse>;
+  getRedirectionLink: (pageId?: string) => string;
+  extensionHandlers?: Map<string, unknown>;
+  projectId?: string;
+};
+
+export type TExtendedEditorExtensionsConfig = IEditorPropsExtended;
+
+export const useExtendedEditorProps = (
+  _params: TExtendedEditorExtensionsHookParams
+): TExtendedEditorExtensionsConfig => ({});
--- a/apps/web/ce/hooks/pages/use-pages-pane-extensions.ts
+++ b/apps/web/ce/hooks/pages/use-pages-pane-extensions.ts
@ -0,0 +1,52 @@
+import { useCallback, useMemo, type RefObject } from "react";
+import { useSearchParams } from "next/navigation";
+import type { EditorRefApi } from "@plane/editor";
+import {
+  PAGE_NAVIGATION_PANE_TAB_KEYS,
+  PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM,
+} from "@/components/pages/navigation-pane";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useQueryParams } from "@/hooks/use-query-params";
+import type { TPageNavigationPaneTab } from "@/plane-web/components/pages/navigation-pane";
+import { INavigationPaneExtension } from "@/plane-web/types/pages/pane-extensions";
+import type { TPageInstance } from "@/store/pages/base-page";
+
+export type TPageExtensionHookParams = {
+  page: TPageInstance;
+  editorRef: RefObject<EditorRefApi>;
+};
+
+export const usePagesPaneExtensions = (_params: TPageExtensionHookParams) => {
+  const router = useAppRouter();
+  const { updateQueryParams } = useQueryParams();
+  const searchParams = useSearchParams();
+
+  // Generic navigation pane logic - hook manages feature-specific routing
+  const navigationPaneQueryParam = searchParams.get(
+    PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM
+  ) as TPageNavigationPaneTab | null;
+
+  const isNavigationPaneOpen =
+    !!navigationPaneQueryParam && PAGE_NAVIGATION_PANE_TAB_KEYS.includes(navigationPaneQueryParam);
+
+  const handleOpenNavigationPane = useCallback(() => {
+    const updatedRoute = updateQueryParams({
+      paramsToAdd: { [PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM]: "outline" },
+    });
+    router.push(updatedRoute);
+  }, [router, updateQueryParams]);
+
+  const editorExtensionHandlers: Map<string, unknown> = useMemo(() => {
+    const map: Map<string, unknown> = new Map();
+    return map;
+  }, []);
+
+  const navigationPaneExtensions: INavigationPaneExtension[] = [];
+
+  return {
+    editorExtensionHandlers,
+    navigationPaneExtensions,
+    handleOpenNavigationPane,
+    isNavigationPaneOpen,
+  };
+};
--- a/apps/web/ce/hooks/use-editor-flagging.ts
+++ b/apps/web/ce/hooks/use-editor-flagging.ts
@ -1,5 +1,6 @@
 // editor
 import type { TExtensions } from "@plane/editor";
+import { EPageStoreType } from "@/plane-web/hooks/store";

 export type TEditorFlaggingHookReturnType = {
  document: {
@ -16,10 +17,15 @@ export type TEditorFlaggingHookReturnType = {
  };
 };

+export type TEditorFlaggingHookProps = {
+  workspaceSlug: string;
+  storeType?: EPageStoreType;
+};
+
 /**
 * @description extensions disabled in various editors
 */
-export const useEditorFlagging = (workspaceSlug: string): TEditorFlaggingHookReturnType => ({
+export const useEditorFlagging = (props: TEditorFlaggingHookProps): TEditorFlaggingHookReturnType => ({
  document: {
    disabled: ["ai", "collaboration-cursor"],
    flagged: [],
--- a/apps/web/ce/types/pages/pane-extensions.ts
+++ b/apps/web/ce/types/pages/pane-extensions.ts
@ -0,0 +1,16 @@
+import {
+  type INavigationPaneExtension as ICoreNavigationPaneExtension,
+  type INavigationPaneExtensionComponent,
+} from "@/components/pages/navigation-pane";
+
+// EE Union/map of extension data types (keyed by extension id)
+export type TNavigationPaneExtensionData = Record<string, unknown>;
+
+// EE Navigation pane extension configuration
+export interface INavigationPaneExtension<
+  T extends keyof TNavigationPaneExtensionData = keyof TNavigationPaneExtensionData,
+> extends Omit<ICoreNavigationPaneExtension<TNavigationPaneExtensionData[T]>, "id" | "data" | "component"> {
+  id: T;
+  component: INavigationPaneExtensionComponent<TNavigationPaneExtensionData[T]>;
+  data?: TNavigationPaneExtensionData[T];
+}
--- a/apps/web/core/components/editor/document/editor.tsx
+++ b/apps/web/core/components/editor/document/editor.tsx
@ -13,7 +13,7 @@ import { useIssueEmbed } from "@/plane-web/hooks/use-issue-embed";
 import { EditorMentionsRoot } from "../embeds/mentions";

 type DocumentEditorWrapperProps = MakeOptional<
-  Omit<IDocumentEditorProps, "fileHandler" | "mentionHandler" | "embedHandler" | "user">,
+  Omit<IDocumentEditorProps, "fileHandler" | "mentionHandler" | "embedHandler" | "user" | "extendedEditorProps">,
  "disabledExtensions" | "editable" | "flaggedExtensions"
 > & {
  embedHandler?: Partial<IDocumentEditorProps["embedHandler"]>;
@ -45,7 +45,9 @@ export const DocumentEditor = forwardRef<EditorRefApi, DocumentEditorWrapperProp
  // store hooks
  const { getUserDetails } = useMember();
  // editor flaggings
-  const { document: documentEditorExtensions } = useEditorFlagging(workspaceSlug);
+  const { document: documentEditorExtensions } = useEditorFlagging({
+    workspaceSlug: workspaceSlug?.toString() ?? "",
+  });
  // use editor mention
  const { fetchMentions } = useEditorMention({
    searchEntity: editable ? async (payload) => await props.searchMentionCallback(payload) : async () => ({}),
@ -83,6 +85,7 @@ export const DocumentEditor = forwardRef<EditorRefApi, DocumentEditorWrapperProp
        issue: issueEmbedProps,
        ...embedHandler,
      }}
+      extendedEditorProps={{}}
      {...rest}
      containerClassName={cn("relative pl-3 pb-3", containerClassName)}
    />
--- a/apps/web/core/components/editor/lite-text/editor.tsx
+++ b/apps/web/core/components/editor/lite-text/editor.tsx
@ -19,7 +19,7 @@ import { WorkspaceService } from "@/plane-web/services";
 const workspaceService = new WorkspaceService();

 type LiteTextEditorWrapperProps = MakeOptional<
-  Omit<ILiteTextEditorProps, "fileHandler" | "mentionHandler">,
+  Omit<ILiteTextEditorProps, "fileHandler" | "mentionHandler" | "extendedEditorProps">,
  "disabledExtensions" | "flaggedExtensions"
 > & {
  workspaceSlug: string;
@ -68,7 +68,9 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
  // states
  const [isFocused, setIsFocused] = useState(showToolbarInitially);
  // editor flaggings
-  const { liteText: liteTextEditorExtensions } = useEditorFlagging(workspaceSlug?.toString());
+  const { liteText: liteTextEditorExtensions } = useEditorFlagging({
+    workspaceSlug: workspaceSlug?.toString() ?? "",
+  });
  // store hooks
  const { getUserDetails } = useMember();
  // use editor mention
@ -126,6 +128,7 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
        containerClassName={cn(containerClassName, "relative", {
          "p-2": !editable,
        })}
+        extendedEditorProps={{}}
        {...rest}
      />
      {showToolbar && editable && (
--- a/apps/web/core/components/editor/rich-text/editor.tsx
+++ b/apps/web/core/components/editor/rich-text/editor.tsx
@ -12,7 +12,7 @@ import { useMember } from "@/hooks/store/use-member";
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";

 type RichTextEditorWrapperProps = MakeOptional<
-  Omit<IRichTextEditorProps, "fileHandler" | "mentionHandler">,
+  Omit<IRichTextEditorProps, "fileHandler" | "mentionHandler" | "extendedEditorProps">,
  "disabledExtensions" | "editable" | "flaggedExtensions"
 > & {
  workspaceSlug: string;
@ -42,7 +42,9 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
  // store hooks
  const { getUserDetails } = useMember();
  // editor flaggings
-  const { richText: richTextEditorExtensions } = useEditorFlagging(workspaceSlug?.toString());
+  const { richText: richTextEditorExtensions } = useEditorFlagging({
+    workspaceSlug: workspaceSlug?.toString() ?? "",
+  });
  // use editor mention
  const { fetchMentions } = useEditorMention({
    searchEntity: editable ? async (payload) => await props.searchMentionCallback(payload) : async () => ({}),
@ -73,6 +75,7 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
          display_name: getUserDetails(id)?.display_name ?? "",
        }),
      }}
+      extendedEditorProps={{}}
      {...rest}
      containerClassName={cn("relative pl-3 pb-3", containerClassName)}
    />
--- a/apps/web/core/components/editor/sticky-editor/editor.tsx
+++ b/apps/web/core/components/editor/sticky-editor/editor.tsx
@ -15,7 +15,7 @@ import { StickyEditorToolbar } from "./toolbar";

 interface StickyEditorWrapperProps
  extends Omit<
-    ILiteTextEditorProps,
+    Omit<ILiteTextEditorProps, "extendedEditorProps">,
    "disabledExtensions" | "editable" | "flaggedExtensions" | "fileHandler" | "mentionHandler"
  > {
  workspaceSlug: string;
@ -51,7 +51,9 @@ export const StickyEditor = React.forwardRef<EditorRefApi, StickyEditorWrapperPr
  // states
  const [isFocused, setIsFocused] = useState(showToolbarInitially);
  // editor flaggings
-  const { liteText: liteTextEditorExtensions } = useEditorFlagging(workspaceSlug?.toString());
+  const { liteText: liteTextEditorExtensions } = useEditorFlagging({
+    workspaceSlug: workspaceSlug?.toString() ?? "",
+  });
  // editor config
  const { getEditorFileHandlers } = useEditorConfig();
  function isMutableRefObject<T>(ref: React.ForwardedRef<T>): ref is React.MutableRefObject<T | null> {
@ -79,6 +81,7 @@ export const StickyEditor = React.forwardRef<EditorRefApi, StickyEditorWrapperPr
        mentionHandler={{
          renderComponent: () => <></>,
        }}
+        extendedEditorProps={{}}
        containerClassName={cn(containerClassName, "relative")}
        {...rest}
      />
--- a/apps/web/core/components/pages/editor/editor-body.tsx
+++ b/apps/web/core/components/pages/editor/editor-body.tsx
@ -24,8 +24,13 @@ import { useUser } from "@/hooks/store/user";
 import { usePageFilters } from "@/hooks/use-page-filters";
 // plane web components
 import { EditorAIMenu } from "@/plane-web/components/pages";
+// plane web types
+import type { TExtendedEditorExtensionsConfig } from "@/plane-web/hooks/pages";
+// plane web store
+import { EPageStoreType } from "@/plane-web/hooks/store";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
+
 import { useIssueEmbed } from "@/plane-web/hooks/use-issue-embed";
 // store
 import type { TPageInstance } from "@/store/pages/base-page";
@ -41,6 +46,7 @@ export type TEditorBodyConfig = {

 export type TEditorBodyHandlers = {
  fetchEntity: (payload: TSearchEntityRequestPayload) => Promise<TSearchResponse>;
+  getRedirectionLink: (pageId?: string) => string;
 };

 type Props = {
@ -54,7 +60,11 @@ type Props = {
  isNavigationPaneOpen: boolean;
  page: TPageInstance;
  webhookConnectionParams: TWebhookConnectionQueryParams;
+  projectId: string;
  workspaceSlug: string;
+  storeType: EPageStoreType;
+
+  extendedEditorProps: TExtendedEditorExtensionsConfig;
 };

 export const PageEditorBody: React.FC<Props> = observer((props) => {
@ -67,8 +77,11 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
    handlers,
    isNavigationPaneOpen,
    page,
+    storeType,
    webhookConnectionParams,
+    projectId,
    workspaceSlug,
+    extendedEditorProps,
  } = props;
  // store hooks
  const { data: currentUser } = useUser();
@ -93,7 +106,10 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
    searchEntity: handlers.fetchEntity,
  });
  // editor flaggings
-  const { document: documentEditorExtensions } = useEditorFlagging(workspaceSlug);
+  const { document: documentEditorExtensions } = useEditorFlagging({
+    workspaceSlug,
+    storeType,
+  });
  // page filters
  const { fontSize, fontStyle, isFullWidth } = usePageFilters();
  // translation
@ -115,7 +131,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
        isOpen={isOpen}
        onClose={onClose}
        workspaceId={workspaceId}
-        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        workspaceSlug={workspaceSlug}
      />
    ),
    [editorRef, workspaceId, workspaceSlug]
@ -202,7 +218,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
        )}
        <div className="page-header-container group/page-header">
          <div className={blockWidthClassName}>
-            <PageEditorHeaderRoot page={page} />
+            <PageEditorHeaderRoot page={page} projectId={projectId} />
            <PageEditorTitle
              editorRef={editorRef}
              readOnly={!isContentEditable}
@ -240,6 +256,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
            menu: getAIMenu,
          }}
          onAssetChange={updateAssetsList}
+          extendedEditorProps={extendedEditorProps}
        />
      </div>
    </Row>
--- a/apps/web/core/components/pages/editor/header/root.tsx
+++ b/apps/web/core/components/pages/editor/header/root.tsx
@ -11,6 +11,7 @@ import { PageEditorHeaderLogoPicker } from "./logo-picker";

 type Props = {
  page: TPageInstance;
+  projectId: string;
 };

 export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
--- a/apps/web/core/components/pages/editor/page-root.tsx
+++ b/apps/web/core/components/pages/editor/page-root.tsx
@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
-import { useSearchParams } from "next/navigation";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
 import type { TDocumentPayload, TPage, TPageVersion, TWebhookConnectionQueryParams } from "@plane/types";
@ -9,19 +8,20 @@ import { useAppRouter } from "@/hooks/use-app-router";
 import { usePageFallback } from "@/hooks/use-page-fallback";
 import { useQueryParams } from "@/hooks/use-query-params";
 // plane web import
-import type { TPageNavigationPaneTab } from "@/plane-web/components/pages/navigation-pane";
+import { PageModals } from "@/plane-web/components/pages";
+import { usePagesPaneExtensions, useExtendedEditorProps } from "@/plane-web/hooks/pages";
+import { EPageStoreType } from "@/plane-web/hooks/store";
 // store
 import type { TPageInstance } from "@/store/pages/base-page";
 // local imports
 import {
-  PAGE_NAVIGATION_PANE_TAB_KEYS,
  PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM,
  PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM,
  PageNavigationPaneRoot,
 } from "../navigation-pane";
 import { PageVersionsOverlay } from "../version";
 import { PagesVersionEditor } from "../version/editor";
-import { PageEditorBody, TEditorBodyConfig, TEditorBodyHandlers } from "./editor-body";
+import { PageEditorBody, type TEditorBodyConfig, type TEditorBodyHandlers } from "./editor-body";
 import { PageEditorToolbarRoot } from "./toolbar";

 export type TPageRootHandlers = {
@ -29,7 +29,7 @@ export type TPageRootHandlers = {
  fetchAllVersions: (pageId: string) => Promise<TPageVersion[] | undefined>;
  fetchDescriptionBinary: () => Promise<any>;
  fetchVersionDetails: (pageId: string, versionId: string) => Promise<TPageVersion | undefined>;
-  getRedirectionLink: (pageId: string) => string;
+  restoreVersion: (pageId: string, versionId: string) => Promise<void>;
  updateDescription: (document: TDocumentPayload) => Promise<void>;
 } & TEditorBodyHandlers;

@ -39,12 +39,14 @@ type TPageRootProps = {
  config: TPageRootConfig;
  handlers: TPageRootHandlers;
  page: TPageInstance;
+  storeType: EPageStoreType;
  webhookConnectionParams: TWebhookConnectionQueryParams;
+  projectId: string;
  workspaceSlug: string;
 };

 export const PageRoot = observer((props: TPageRootProps) => {
-  const { config, handlers, page, webhookConnectionParams, workspaceSlug } = props;
+  const { config, handlers, page, projectId, storeType, webhookConnectionParams, workspaceSlug } = props;
  // states
  const [editorReady, setEditorReady] = useState(false);
  const [hasConnectionFailed, setHasConnectionFailed] = useState(false);
@ -52,8 +54,6 @@ export const PageRoot = observer((props: TPageRootProps) => {
  const editorRef = useRef<EditorRefApi>(null);
  // router
  const router = useAppRouter();
-  // search params
-  const searchParams = useSearchParams();
  // derived values
  const {
    isContentEditable,
@ -66,7 +66,6 @@ export const PageRoot = observer((props: TPageRootProps) => {
    hasConnectionFailed,
    updatePageDescription: handlers.updateDescription,
  });
-  // update query params
  const { updateQueryParams } = useQueryParams();

  const handleEditorReady = useCallback(
@ -85,10 +84,31 @@ export const PageRoot = observer((props: TPageRootProps) => {
    }, 0);
  }, [isContentEditable, setEditorRef]);

-  const handleRestoreVersion = useCallback(async (descriptionHTML: string) => {
-    editorRef.current?.clearEditor();
-    editorRef.current?.setEditorValue(descriptionHTML);
-  }, []);
+  // Get extensions and navigation logic from hook
+  const { editorExtensionHandlers, navigationPaneExtensions, handleOpenNavigationPane, isNavigationPaneOpen } =
+    usePagesPaneExtensions({
+      page,
+      editorRef,
+    });
+
+  // Get extended editor extensions configuration
+  const extendedEditorProps = useExtendedEditorProps({
+    workspaceSlug,
+    page,
+    storeType,
+    fetchEntity: handlers.fetchEntity,
+    getRedirectionLink: handlers.getRedirectionLink,
+    extensionHandlers: editorExtensionHandlers,
+    projectId,
+  });
+
+  const handleRestoreVersion = useCallback(
+    async (descriptionHTML: string) => {
+      editorRef.current?.clearEditor();
+      editorRef.current?.setEditorValue(descriptionHTML);
+    },
+    [editorRef]
+  );

  // reset editor ref on unmount
  useEffect(
@ -98,19 +118,6 @@ export const PageRoot = observer((props: TPageRootProps) => {
    [setEditorRef]
  );

-  const navigationPaneQueryParam = searchParams.get(
-    PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM
-  ) as TPageNavigationPaneTab | null;
-  const isValidNavigationPaneTab =
-    !!navigationPaneQueryParam && PAGE_NAVIGATION_PANE_TAB_KEYS.includes(navigationPaneQueryParam);
-
-  const handleOpenNavigationPane = useCallback(() => {
-    const updatedRoute = updateQueryParams({
-      paramsToAdd: { [PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM]: "outline" },
-    });
-    router.push(updatedRoute);
-  }, [router, updateQueryParams]);
-
  const handleCloseNavigationPane = useCallback(() => {
    const updatedRoute = updateQueryParams({
      paramsToRemove: [PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM, PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM],
@ -127,10 +134,11 @@ export const PageRoot = observer((props: TPageRootProps) => {
          handleRestore={handleRestoreVersion}
          pageId={page.id ?? ""}
          restoreEnabled={isContentEditable}
+          storeType={storeType}
        />
        <PageEditorToolbarRoot
          handleOpenNavigationPane={handleOpenNavigationPane}
-          isNavigationPaneOpen={isValidNavigationPaneTab}
+          isNavigationPaneOpen={isNavigationPaneOpen}
          page={page}
        />
        <PageEditorBody
@ -141,21 +149,27 @@ export const PageRoot = observer((props: TPageRootProps) => {
          handleEditorReady={handleEditorReady}
          handleOpenNavigationPane={handleOpenNavigationPane}
          handlers={handlers}
-          isNavigationPaneOpen={isValidNavigationPaneTab}
+          isNavigationPaneOpen={isNavigationPaneOpen}
          page={page}
+          projectId={projectId}
+          storeType={storeType}
          webhookConnectionParams={webhookConnectionParams}
          workspaceSlug={workspaceSlug}
+          extendedEditorProps={extendedEditorProps}
        />
      </div>
      <PageNavigationPaneRoot
+        storeType={storeType}
        handleClose={handleCloseNavigationPane}
-        isNavigationPaneOpen={isValidNavigationPaneTab}
+        isNavigationPaneOpen={isNavigationPaneOpen}
        page={page}
        versionHistory={{
          fetchAllVersions: handlers.fetchAllVersions,
          fetchVersionDetails: handlers.fetchVersionDetails,
        }}
+        extensions={navigationPaneExtensions}
      />
+      <PageModals page={page} storeType={storeType} />
    </div>
  );
 });
--- a/apps/web/core/components/pages/navigation-pane/index.ts
+++ b/apps/web/core/components/pages/navigation-pane/index.ts
@ -2,6 +2,7 @@
 import { ORDERED_PAGE_NAVIGATION_TABS_LIST } from "@/plane-web/components/pages/navigation-pane";

 export * from "./root";
+export * from "./types";

 export const PAGE_NAVIGATION_PANE_WIDTH = 294;

--- a/apps/web/core/components/pages/navigation-pane/root.tsx
+++ b/apps/web/core/components/pages/navigation-pane/root.tsx
@ -11,11 +11,14 @@ import { useQueryParams } from "@/hooks/use-query-params";
 // plane web components
 import { TPageNavigationPaneTab } from "@/plane-web/components/pages/navigation-pane";
 // store
+import { type EPageStoreType } from "@/plane-web/hooks/store";
 import type { TPageInstance } from "@/store/pages/base-page";
 // local imports
 import { TPageRootHandlers } from "../editor/page-root";
 import { PageNavigationPaneTabPanelsRoot } from "./tab-panels/root";
 import { PageNavigationPaneTabsList } from "./tabs-list";
+import { INavigationPaneExtension } from "./types/extensions";
+
 import {
  PAGE_NAVIGATION_PANE_TAB_KEYS,
  PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM,
@ -28,10 +31,14 @@ type Props = {
  isNavigationPaneOpen: boolean;
  page: TPageInstance;
  versionHistory: Pick<TPageRootHandlers, "fetchAllVersions" | "fetchVersionDetails">;
+  // Generic extension system for additional navigation pane content
+  extensions?: INavigationPaneExtension[];
+  storeType: EPageStoreType;
 };

 export const PageNavigationPaneRoot: React.FC<Props> = observer((props) => {
-  const { handleClose, isNavigationPaneOpen, page, versionHistory } = props;
+  const { handleClose, isNavigationPaneOpen, page, versionHistory, extensions = [], storeType } = props;
+
  // navigation
  const router = useRouter();
  const searchParams = useSearchParams();
@ -43,6 +50,21 @@ export const PageNavigationPaneRoot: React.FC<Props> = observer((props) => {
  ) as TPageNavigationPaneTab | null;
  const activeTab: TPageNavigationPaneTab = navigationPaneQueryParam || "outline";
  const selectedIndex = PAGE_NAVIGATION_PANE_TAB_KEYS.indexOf(activeTab);
+
+  // Check if any extension is currently active based on query parameters
+  const ActiveExtension = extensions.find((extension) => {
+    const paneTabValue = searchParams.get(PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM);
+    const hasVersionParam = searchParams.get(PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM);
+
+    // Extension is active ONLY when paneTab matches AND no regular navigation params are present
+    return paneTabValue === extension.triggerParam && !hasVersionParam;
+  });
+
+  // Don't show tabs when an extension is active
+  const showNavigationTabs = !ActiveExtension && isNavigationPaneOpen;
+
+  // Use extension width if available, otherwise fall back to default
+  const paneWidth = ActiveExtension?.width ?? PAGE_NAVIGATION_PANE_WIDTH;
  // translation
  const { t } = useTranslation();

@ -61,10 +83,10 @@ export const PageNavigationPaneRoot: React.FC<Props> = observer((props) => {

  return (
    <aside
-      className="flex-shrink-0 h-full flex flex-col bg-custom-background-100 pt-3.5 border-l border-custom-border-200 transition-all duration-300 ease-in-out"
+      className="flex-shrink-0 h-full flex flex-col bg-custom-background-100 pt-3.5 border-l border-custom-border-200 transition-all duration-300 ease-out"
      style={{
-        width: `${PAGE_NAVIGATION_PANE_WIDTH}px`,
-        marginRight: isNavigationPaneOpen ? "0px" : `-${PAGE_NAVIGATION_PANE_WIDTH}px`,
+        width: `${paneWidth}px`,
+        marginRight: isNavigationPaneOpen ? "0px" : `-${paneWidth}px`,
      }}
    >
      <div className="mb-3.5 px-3.5">
@ -79,10 +101,17 @@ export const PageNavigationPaneRoot: React.FC<Props> = observer((props) => {
          </button>
        </Tooltip>
      </div>
-      <Tab.Group as={React.Fragment} selectedIndex={selectedIndex} onChange={handleTabChange}>
-        <PageNavigationPaneTabsList />
-        <PageNavigationPaneTabPanelsRoot page={page} versionHistory={versionHistory} />
-      </Tab.Group>
+
+      <div className="flex-1 flex flex-col overflow-hidden animate-slide-in-right">
+        {ActiveExtension ? (
+          <ActiveExtension.component page={page} extensionData={ActiveExtension.data} storeType={storeType} />
+        ) : showNavigationTabs ? (
+          <Tab.Group as={React.Fragment} selectedIndex={selectedIndex} onChange={handleTabChange}>
+            <PageNavigationPaneTabsList />
+            <PageNavigationPaneTabPanelsRoot page={page} versionHistory={versionHistory} />
+          </Tab.Group>
+        ) : null}
+      </div>
    </aside>
  );
 });
--- a/apps/web/core/components/pages/navigation-pane/types/extensions.ts
+++ b/apps/web/core/components/pages/navigation-pane/types/extensions.ts
@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import { EPageStoreType } from "@/plane-web/hooks/store";
+import { TPageInstance } from "@/store/pages/base-page";
+
+export interface INavigationPaneExtensionProps<T = any> {
+  page: TPageInstance;
+  extensionData?: T;
+  storeType: EPageStoreType;
+}
+
+export interface INavigationPaneExtensionComponent<T = any> {
+  (props: INavigationPaneExtensionProps<T>): ReactNode;
+}
+
+export interface INavigationPaneExtension<T = any> {
+  id: string;
+  triggerParam: string;
+  component: INavigationPaneExtensionComponent<T>;
+  data?: T;
+  width?: number;
+}
--- a/apps/web/core/components/pages/navigation-pane/types/index.ts
+++ b/apps/web/core/components/pages/navigation-pane/types/index.ts
@ -0,0 +1,6 @@
+// Export generic extension system interfaces
+export type {
+  INavigationPaneExtensionProps,
+  INavigationPaneExtensionComponent,
+  INavigationPaneExtension,
+} from "./extensions";
--- a/apps/web/core/components/pages/version/editor.tsx
+++ b/apps/web/core/components/pages/version/editor.tsx
@ -9,10 +9,13 @@ import { DocumentEditor } from "@/components/editor/document/editor";
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { usePageFilters } from "@/hooks/use-page-filters";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";

 export type TVersionEditorProps = {
  activeVersion: string | null;
  versionDetails: TPageVersion | undefined;
+  storeType: EPageStoreType;
 };

 export const PagesVersionEditor: React.FC<TVersionEditorProps> = observer((props) => {
--- a/apps/web/core/components/pages/version/main-content.tsx
+++ b/apps/web/core/components/pages/version/main-content.tsx
@ -6,6 +6,8 @@ import { EyeIcon, TriangleAlert } from "lucide-react";
 import { TPageVersion } from "@plane/types";
 import { Button, setToast, TOAST_TYPE } from "@plane/ui";
 import { renderFormattedDate, renderFormattedTime } from "@plane/utils";
+// helpers
+import { EPageStoreType } from "@/plane-web/hooks/store";
 // local imports
 import { TVersionEditorProps } from "./editor";

@ -17,11 +19,20 @@ type Props = {
  handleRestore: (descriptionHTML: string) => Promise<void>;
  pageId: string;
  restoreEnabled: boolean;
+  storeType: EPageStoreType;
 };

 export const PageVersionsMainContent: React.FC<Props> = observer((props) => {
-  const { activeVersion, editorComponent, fetchVersionDetails, handleClose, handleRestore, pageId, restoreEnabled } =
-    props;
+  const {
+    activeVersion,
+    editorComponent,
+    fetchVersionDetails,
+    handleClose,
+    handleRestore,
+    pageId,
+    restoreEnabled,
+    storeType,
+  } = props;
  // states
  const [isRestoring, setIsRestoring] = useState(false);
  const [isRetrying, setIsRetrying] = useState(false);
@ -107,7 +118,7 @@ export const PageVersionsMainContent: React.FC<Props> = observer((props) => {
            )}
          </div>
          <div className="pt-8 h-full overflow-y-scroll vertical-scrollbar scrollbar-sm">
-            <VersionEditor activeVersion={activeVersion} versionDetails={versionDetails} />
+            <VersionEditor activeVersion={activeVersion} storeType={storeType} versionDetails={versionDetails} />
          </div>
        </>
      )}
--- a/apps/web/core/components/pages/version/root.tsx
+++ b/apps/web/core/components/pages/version/root.tsx
@ -6,6 +6,8 @@ import { TPageVersion } from "@plane/types";
 import { cn } from "@plane/utils";
 // hooks
 import { useQueryParams } from "@/hooks/use-query-params";
+// plane web imports
+import { EPageStoreType } from "@/plane-web/hooks/store";
 // local imports
 import { PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM, PAGE_NAVIGATION_PANE_WIDTH } from "../navigation-pane";
 import { TVersionEditorProps } from "./editor";
@ -17,10 +19,11 @@ type Props = {
  handleRestore: (descriptionHTML: string) => Promise<void>;
  pageId: string;
  restoreEnabled: boolean;
+  storeType: EPageStoreType;
 };

 export const PageVersionsOverlay: React.FC<Props> = observer((props) => {
-  const { editorComponent, fetchVersionDetails, handleRestore, pageId, restoreEnabled } = props;
+  const { editorComponent, fetchVersionDetails, handleRestore, pageId, restoreEnabled, storeType } = props;
  // navigation
  const router = useRouter();
  const searchParams = useSearchParams();
@ -57,6 +60,7 @@ export const PageVersionsOverlay: React.FC<Props> = observer((props) => {
        handleRestore={handleRestore}
        pageId={pageId}
        restoreEnabled={restoreEnabled}
+        storeType={storeType}
      />
    </div>
  );
--- a/apps/web/core/services/page/project-page-version.service.ts
+++ b/apps/web/core/services/page/project-page-version.service.ts
@ -30,4 +30,14 @@ export class ProjectPageVersionService extends APIService {
        throw error?.response?.data;
      });
  }
+
+  async restoreVersion(workspaceSlug: string, projectId: string, pageId: string, versionId: string): Promise<void> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/versions/${versionId}/restore/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
--- a/apps/web/core/store/pages/base-page.ts
+++ b/apps/web/core/store/pages/base-page.ts
@ -93,6 +93,7 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
  updated_by: string | undefined;
  created_at: Date | undefined;
  updated_at: Date | undefined;
+  deleted_at: Date | undefined;
  // helpers
  oldName: string = "";
  // services
@ -130,6 +131,7 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
    this.created_at = page?.created_at || undefined;
    this.updated_at = page?.updated_at || undefined;
    this.oldName = page?.name || "";
+    this.deleted_at = page?.deleted_at || undefined;

    makeObservable(this, {
      // loaders
@ -153,6 +155,7 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
      updated_by: observable.ref,
      created_at: observable.ref,
      updated_at: observable.ref,
+      deleted_at: observable.ref,
      // helpers
      oldName: observable.ref,
      setIsSubmitting: action,
@ -227,6 +230,7 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
      updated_by: this.updated_by,
      created_at: this.created_at,
      updated_at: this.updated_at,
+      deleted_at: this.deleted_at,
      ...this.asJSONExtended,
    };
  }
--- a/packages/editor/src/ce/components/document-editor-side-effects.ts
+++ b/packages/editor/src/ce/components/document-editor-side-effects.ts
@ -0,0 +1,12 @@
+import { type Editor } from "@tiptap/core";
+import type { ReactElement } from "react";
+import type { IEditorPropsExtended } from "@/types";
+
+export type DocumentEditorSideEffectsProps = {
+  editor: Editor;
+  id: string;
+  updatePageProperties?: unknown;
+  extendedEditorProps?: IEditorPropsExtended;
+};
+
+export const DocumentEditorSideEffects = (_props: DocumentEditorSideEffectsProps): ReactElement | null => null;
--- a/packages/editor/src/ce/types/editor-extended.ts
+++ b/packages/editor/src/ce/types/editor-extended.ts
@ -0,0 +1,9 @@
+export type IEditorExtensionOptions = unknown;
+
+export type IEditorPropsExtended = unknown;
+
+export type TExtendedEditorCommands = never;
+
+export type TExtendedCommandExtraProps = unknown;
+
+export type TExtendedEditorRefApi = unknown;
--- a/packages/editor/src/ce/types/index.ts
+++ b/packages/editor/src/ce/types/index.ts
@ -1 +1,2 @@
 export * from "./issue-embed";
+export * from "./editor-extended";
--- a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
+++ b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
@ -12,6 +12,8 @@ import { WorkItemEmbedExtension } from "@/extensions";
 import { getEditorClassNames } from "@/helpers/common";
 // hooks
 import { useCollaborativeEditor } from "@/hooks/use-collaborative-editor";
+// constants
+import { DocumentEditorSideEffects } from "@/plane-editor/components/document-editor-side-effects";
 // types
 import type { EditorRefApi, ICollaborativeDocumentEditorProps } from "@/types";

@ -27,6 +29,7 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
    editable,
    editorClassName = "",
    editorProps,
+    extendedEditorProps,
    embedHandler,
    fileHandler,
    flaggedExtensions,
@ -97,20 +100,23 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
  if (!editor) return null;

  return (
-    <PageRenderer
-      aiHandler={aiHandler}
-      bubbleMenuEnabled={bubbleMenuEnabled}
-      displayConfig={displayConfig}
-      documentLoaderClassName={documentLoaderClassName}
-      editor={editor}
-      editorContainerClassName={cn(editorContainerClassNames, "document-editor")}
-      id={id}
-      isTouchDevice={!!isTouchDevice}
-      isLoading={!hasServerSynced && !hasServerConnectionFailed}
-      tabIndex={tabIndex}
-      flaggedExtensions={flaggedExtensions}
-      disabledExtensions={disabledExtensions}
-    />
+    <>
+      <DocumentEditorSideEffects editor={editor} id={id} extendedEditorProps={extendedEditorProps} />
+      <PageRenderer
+        aiHandler={aiHandler}
+        bubbleMenuEnabled={bubbleMenuEnabled}
+        displayConfig={displayConfig}
+        documentLoaderClassName={documentLoaderClassName}
+        editor={editor}
+        editorContainerClassName={cn(editorContainerClassNames, "document-editor")}
+        id={id}
+        isTouchDevice={!!isTouchDevice}
+        isLoading={!hasServerSynced && !hasServerConnectionFailed}
+        tabIndex={tabIndex}
+        flaggedExtensions={flaggedExtensions}
+        disabledExtensions={disabledExtensions}
+      />
+    </>
  );
 };

--- a/packages/editor/src/core/types/editor.ts
+++ b/packages/editor/src/core/types/editor.ts
@ -5,6 +5,8 @@ import type { EditorProps, EditorView } from "@tiptap/pm/view";
 import type { NodeViewProps as TNodeViewProps } from "@tiptap/react";
 // extension types
 import type { TTextAlign } from "@/extensions";
+// plane editor imports
+import type { IEditorPropsExtended, TExtendedEditorCommands } from "@/plane-editor/types/editor-extended";
 // types
 import type {
  IMarking,
@ -50,7 +52,8 @@ export type TEditorCommands =
  | "callout"
  | "attachment"
  | "emoji"
-  | "external-embed";
+  | "external-embed"
+  | TExtendedEditorCommands;

 export type TCommandExtraProps = {
  image: {
@ -157,6 +160,7 @@ export type IEditorProps = {
  placeholder?: string | ((isFocused: boolean, value: string) => string);
  tabIndex?: number;
  value?: string | null;
+  extendedEditorProps: IEditorPropsExtended;
 };

 export type ILiteTextEditorProps = IEditorProps;
--- a/packages/editor/src/core/types/index.ts
+++ b/packages/editor/src/core/types/index.ts
@ -8,5 +8,6 @@ export * from "./extensions";
 export * from "./hook";
 export * from "./mention";
 export * from "./slash-commands-suggestion";
-export * from "@/plane-editor/types";
 export * from "./document-collaborative-events";
+
+export * from "@/plane-editor/types";
--- a/packages/types/src/editor/editor-content.ts
+++ b/packages/types/src/editor/editor-content.ts
@ -0,0 +1,20 @@
+/**
+ * Editor content types - locally defined to avoid external dependencies
+ */
+
+export type JSONContent = {
+  type?: string;
+  attrs?: Record<string, unknown>;
+  content?: JSONContent[];
+  marks?: {
+    type: string;
+    attrs?: Record<string, unknown>;
+    [key: string]: unknown;
+  }[];
+  text?: string;
+  [key: string]: unknown;
+};
+
+export type HTMLContent = string;
+
+export type Content = HTMLContent | JSONContent | JSONContent[] | null;
--- a/packages/types/src/editor/index.ts
+++ b/packages/types/src/editor/index.ts
@ -0,0 +1 @@
+export type { JSONContent, HTMLContent, Content } from "./editor-content";
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@ -28,6 +28,7 @@ export * from "./waitlist";
 export * from "./webhook";
 export * from "./workspace-views";
 export * from "./common";
+export * from "./editor";
 export * from "./pragmatic";
 export * from "./publish";
 export * from "./search";
--- a/packages/types/src/issues/activity/issue_comment.ts
+++ b/packages/types/src/issues/activity/issue_comment.ts
@ -1,3 +1,4 @@
+import { JSONContent } from "../../editor";
 import { EIssueCommentAccessSpecifier } from "../../enums";
 import { TFileSignedURLResponse } from "../../file";
 import { IUserLite } from "../../users";
@ -34,7 +35,7 @@ export type TIssueComment = {
  comment_reactions: any[];
  comment_stripped: string;
  comment_html: string;
-  comment_json: object;
+  comment_json: JSONContent;
  external_id: string | undefined;
  external_source: string | undefined;
  access: EIssueCommentAccessSpecifier;
--- a/packages/types/src/page/core.ts
+++ b/packages/types/src/page/core.ts
@ -21,6 +21,7 @@ export type TPage = {
  updated_by: string | undefined;
  workspace: string | undefined;
  logo_props: TLogoProps | undefined;
+  deleted_at: Date | undefined;
 } & TPageExtended;

 // page filters
--- a/packages/utils/src/string.ts
+++ b/packages/utils/src/string.ts
@ -1,3 +1,4 @@
+import type { Content, JSONContent } from "@plane/types";
 import DOMPurify from "isomorphic-dompurify";

 /**
@ -161,14 +162,86 @@ export const isEmptyHtmlString = (htmlString: string, allowedHTMLTags: string[]
 };

 /**
- * @description this function returns whether a comment is empty or not by checking for the following conditions-
- * 1. If comment is undefined
- * 2. If comment is an empty string
- * 3. If comment is "<p></p>"
- * @param {string | undefined} comment
+ * @description
+ * Check if a JSONContent object is empty
+ * @param {JSONContent} content
 * @returns {boolean}
 */
-export const isCommentEmpty = (comment: string | undefined): boolean => {
+const isJSONContentEmpty = (content: JSONContent): boolean => {
+  // If it has text, check if text is meaningful
+  if (content.text !== undefined) {
+    return !content.text || content.text.trim() === "";
+  }
+
+  // If it has no content array, consider it empty
+  if (!content.content || content.content.length === 0) {
+    // Special case: empty paragraph nodes should be considered empty
+    if (content.type === "paragraph" || content.type === "doc") {
+      return true;
+    }
+    // For other node types without content (like hard breaks), check if they're meaningful
+    return (
+      content.type !== "hardBreak" &&
+      content.type !== "image" &&
+      content.type !== "mention-component" &&
+      content.type !== "image-component"
+    );
+  }
+
+  // Check if all nested content is empty
+  return content.content.every(isJSONContentEmpty);
+};
+
+/**
+ * @description
+ * This function will check if the comment is empty or not.
+ * It returns true if comment is empty.
+ * Now supports TipTap Content types (HTMLContent, JSONContent, JSONContent[], null)
+ *
+ * For HTML content:
+ * 1. If comment is undefined/null
+ * 2. If comment is an empty string
+ * 3. If comment is "<p></p>"
+ * 4. If comment contains only empty HTML tags
+ *
+ * For JSON content:
+ * 1. If content is null/undefined
+ * 2. If content has no meaningful text or nested content
+ * 3. If all nested content is empty
+ *
+ * @param {Content} comment - TipTap Content type
+ * @returns {boolean}
+ */
+export const isCommentEmpty = (comment: Content | undefined): boolean => {
+  // Handle null/undefined
+  if (!comment) return true;
+
+  // Handle HTMLContent (string)
+  if (typeof comment === "string") {
+    return (
+      comment.trim() === "" ||
+      comment === "<p></p>" ||
+      isEmptyHtmlString(comment, ["img", "mention-component", "image-component"])
+    );
+  }
+
+  // Handle JSONContent[] (array)
+  if (Array.isArray(comment)) {
+    return comment.length === 0 || comment.every(isJSONContentEmpty);
+  }
+
+  // Handle JSONContent (object)
+  return isJSONContentEmpty(comment);
+};
+
+/**
+ * @description
+ * Legacy function for backward compatibility with string comments
+ * @param {string | undefined} comment
+ * @returns {boolean}
+ * @deprecated Use isCommentEmpty with Content type instead
+ */
+export const isStringCommentEmpty = (comment: string | undefined): boolean => {
  // return true if comment is undefined
  if (!comment) return true;
  return (
				`@ -0,0 +1 @@`
				`export type { JSONContent, HTMLContent, Content } from "./editor-content";`