[WIKI-650] fix: pane extensions close method moved into hook (#7823)

* fix: pane extensions close method moved into hook

* fix: editor build breaks web everytime in dev mode

* fix: variant of lite text toolbar

apps/web/ce/hooks/pages/use-pages-pane-extensions.ts

@@ -4,6 +4,7 @@ import type { EditorRefApi } from "@plane/editor";
 import {
   PAGE_NAVIGATION_PANE_TAB_KEYS,
   PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM,
+  PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM,
 } from "@/components/pages/navigation-pane";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { useQueryParams } from "@/hooks/use-query-params";
@@ -43,10 +44,18 @@ export const usePagesPaneExtensions = (_params: TPageExtensionHookParams) => {
 
   const navigationPaneExtensions: INavigationPaneExtension[] = [];
 
+  const handleCloseNavigationPane = useCallback(() => {
+    const updatedRoute = updateQueryParams({
+      paramsToRemove: [PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM, PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM],
+    });
+    router.push(updatedRoute);
+  }, [router, updateQueryParams]);
+
   return {
     editorExtensionHandlers,
     navigationPaneExtensions,
     handleOpenNavigationPane,
     isNavigationPaneOpen,
+    handleCloseNavigationPane,
   };
 };

apps/web/core/components/editor/lite-text/editor.tsx

@@ -14,8 +14,9 @@ import { useEditorConfig, useEditorMention } from "@/hooks/editor";
 import { useMember } from "@/hooks/store/use-member";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
-// plane web services
+// plane web service
 import { WorkspaceService } from "@/plane-web/services";
+import { LiteToolbar } from "./lite-toolbar";
 const workspaceService = new WorkspaceService();
 
 type LiteTextEditorWrapperProps = MakeOptional<
@@ -31,9 +32,10 @@ type LiteTextEditorWrapperProps = MakeOptional<
   showSubmitButton?: boolean;
   isSubmitting?: boolean;
   showToolbarInitially?: boolean;
-  showToolbar?: boolean;
+  variant?: "full" | "lite" | "none";
   issue_id?: string;
   parentClassName?: string;
+  editorClassName?: string;
 } & (
     | {
         editable: false;
@@ -59,14 +61,17 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
     showSubmitButton = true,
     isSubmitting = false,
     showToolbarInitially = true,
-    showToolbar = true,
+    variant = "full",
     parentClassName = "",
     placeholder = t("issue.comments.placeholder"),
     disabledExtensions: additionalDisabledExtensions = [],
+    editorClassName = "",
     ...rest
   } = props;
   // states
-  const [isFocused, setIsFocused] = useState(showToolbarInitially);
+  const isLiteVariant = variant === "lite";
+  const isFullVariant = variant === "full";
+  const [isFocused, setIsFocused] = useState(isFullVariant ? showToolbarInitially : true);
   // editor flaggings
   const { liteText: liteTextEditorExtensions } = useEditorFlagging({
     workspaceSlug: workspaceSlug?.toString() ?? "",
@@ -95,13 +100,17 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
       className={cn(
         "relative border border-custom-border-200 rounded",
         {
-          "p-3": editable,
+          "p-3": editable && !isLiteVariant,
         },
         parentClassName
       )}
-      onFocus={() => !showToolbarInitially && setIsFocused(true)}
+      onFocus={() => isFullVariant && !showToolbarInitially && setIsFocused(true)}
-      onBlur={() => !showToolbarInitially && setIsFocused(false)}
+      onBlur={() => isFullVariant && !showToolbarInitially && setIsFocused(false)}
     >
+      {/* Wrapper for lite toolbar layout */}
+      <div className={cn(isLiteVariant && editable ? "flex items-end gap-1" : "")}>
+        {/* Main Editor - always rendered once */}
+        <div className={cn(isLiteVariant && editable ? "flex-1 min-w-0" : "")}>
           <LiteTextEditorWithRef
             ref={ref}
             disabledExtensions={[...liteTextEditorExtensions.disabled, ...additionalDisabledExtensions]}
@@ -129,9 +138,31 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
               "p-2": !editable,
             })}
             extendedEditorProps={{}}
+            editorClassName={editorClassName}
             {...rest}
           />
-      {showToolbar && editable && (
+        </div>
+
+        {/* Lite Toolbar - conditionally rendered */}
+        {isLiteVariant && editable && (
+          <LiteToolbar
+            executeCommand={(item) => {
+              // TODO: update this while toolbar homogenization
+              // @ts-expect-error type mismatch here
+              editorRef?.executeMenuItemCommand({
+                itemKey: item.itemKey,
+                ...item.extraProps,
+              });
+            }}
+            onSubmit={(e) => rest.onEnterKeyPress?.(e)}
+            isSubmitting={isSubmitting}
+            isEmpty={isEmpty}
+          />
+        )}
+      </div>
+
+      {/* Full Toolbar - conditionally rendered */}
+      {isFullVariant && editable && (
         <div
           className={cn(
             "transition-all duration-300 ease-out origin-top overflow-hidden",

apps/web/core/components/editor/lite-text/lite-toolbar.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { ArrowUp, Paperclip } from "lucide-react";
+// constants
+import { IMAGE_ITEM, ToolbarMenuItem } from "@/constants/editor";
+
+type LiteToolbarProps = {
+  onSubmit: (e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement>) => void;
+  isSubmitting: boolean;
+  isEmpty: boolean;
+  executeCommand: (item: ToolbarMenuItem) => void;
+};
+
+export const LiteToolbar = ({ onSubmit, isSubmitting, isEmpty, executeCommand }: LiteToolbarProps) => (
+  <div className="flex items-center gap-2 pb-1">
+    <button
+      onClick={() => executeCommand(IMAGE_ITEM)}
+      type="button"
+      className="p-1 text-custom-text-300 hover:text-custom-text-200 transition-colors"
+    >
+      <Paperclip className="size-3" />
+    </button>
+    <button
+      type="button"
+      onClick={(e) => onSubmit(e)}
+      disabled={isEmpty || isSubmitting}
+      className="p-1 bg-custom-primary-100 hover:bg-custom-primary-200 disabled:bg-custom-text-400 disabled:text-custom-text-200 text-custom-text-100 rounded transition-colors"
+    >
+      <ArrowUp className="size-3" />
+    </button>
+  </div>
+);
+
+export type { LiteToolbarProps };

apps/web/core/components/pages/editor/page-root.tsx

@@ -6,7 +6,6 @@ import type { TDocumentPayload, TPage, TPageVersion, TWebhookConnectionQueryPara
 // hooks
 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 { PageModals } from "@/plane-web/components/pages";
 import { usePagesPaneExtensions, useExtendedEditorProps } from "@/plane-web/hooks/pages";
@@ -14,11 +13,7 @@ import { EPageStoreType } from "@/plane-web/hooks/store";
 // store
 import type { TPageInstance } from "@/store/pages/base-page";
 // local imports
-import {
+import { PageNavigationPaneRoot } from "../navigation-pane";
-  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, type TEditorBodyConfig, type TEditorBodyHandlers } from "./editor-body";
@@ -66,7 +61,6 @@ export const PageRoot = observer((props: TPageRootProps) => {
     hasConnectionFailed,
     updatePageDescription: handlers.updateDescription,
   });
-  const { updateQueryParams } = useQueryParams();
 
   const handleEditorReady = useCallback(
     (status: boolean) => {
@@ -85,8 +79,13 @@ export const PageRoot = observer((props: TPageRootProps) => {
   }, [isContentEditable, setEditorRef]);
 
   // Get extensions and navigation logic from hook
-  const { editorExtensionHandlers, navigationPaneExtensions, handleOpenNavigationPane, isNavigationPaneOpen } =
+  const {
-    usePagesPaneExtensions({
+    editorExtensionHandlers,
+    navigationPaneExtensions,
+    handleOpenNavigationPane,
+    handleCloseNavigationPane,
+    isNavigationPaneOpen,
+  } = usePagesPaneExtensions({
     page,
     editorRef,
   });
@@ -118,13 +117,6 @@ export const PageRoot = observer((props: TPageRootProps) => {
     [setEditorRef]
   );
 
-  const handleCloseNavigationPane = useCallback(() => {
-    const updatedRoute = updateQueryParams({
-      paramsToRemove: [PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM, PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM],
-    });
-    router.push(updatedRoute);
-  }, [router, updateQueryParams]);
-
   return (
     <div className="relative size-full overflow-hidden flex transition-all duration-300 ease-in-out">
       <div className="size-full flex flex-col overflow-hidden">

apps/web/core/constants/editor.ts

@@ -158,9 +158,18 @@ const USER_ACTION_ITEMS: ToolbarMenuItem<"quote" | "code">[] = [
   { itemKey: "code", renderKey: "code", name: "Code", icon: Code2, editors: ["lite", "document"] },
 ];
 
+export const IMAGE_ITEM = {
+  itemKey: "image",
+  renderKey: "image",
+  name: "Image",
+  icon: Image,
+  editors: ["lite", "document"],
+  extraProps: {},
+} as ToolbarMenuItem<"image">;
+
 const COMPLEX_ITEMS: ToolbarMenuItem<"table" | "image">[] = [
   { itemKey: "table", renderKey: "table", name: "Table", icon: Table, editors: ["document"] },
-  { itemKey: "image", renderKey: "image", name: "Image", icon: Image, editors: ["lite", "document"], extraProps: {} },
+  IMAGE_ITEM,
 ];
 
 export const TOOLBAR_ITEMS: {

packages/editor/tsdown.config.ts

@@ -5,7 +5,7 @@ export default defineConfig({
   outDir: "dist",
   format: ["esm", "cjs"],
   dts: true,
-  clean: true,
+  clean: false,
   sourcemap: true,
   copy: ["src/styles"],
 });