@nocobase/client-v2 2.1.0-alpha.40 → 2.1.0-alpha.46

package/src/flow/admin-shell/admin-layout/__tests__/AdminLayoutMenuModels.test.ts

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
 import { observer } from '@nocobase/flow-engine';
 import { MemoryRouter } from 'react-router-dom';
@@ -45,6 +45,9 @@ describe('AdminLayoutModel menu items', () => {
   let modalConfirmMock: ReturnType<typeof vi.fn>;
 
   beforeEach(() => {
+    // Fixtures mount the modern client under the `v2` segment; tell the
+    // runtime-prefix helper so v2-runtime detection matches.
+    (globalThis.window as any).__nocobase_modern_client_prefix__ = 'v2';
     engine = new FlowEngine();
     modalConfirmMock = vi.fn().mockResolvedValue(true);
     engine.registerModels({
@@ -104,6 +107,10 @@ describe('AdminLayoutModel menu items', () => {
     vi.spyOn(window, 'open').mockImplementation(() => null);
   });
 
+  afterEach(() => {
+    delete (globalThis.window as any).__nocobase_modern_client_prefix__;
+  });
+
   const createRoute = (options?: Partial<import('../../../../flow-compat').NocoBaseDesktopRoute>) => ({
     id: 1,
     title: 'Page 1',
@@ -891,34 +898,9 @@ describe('AdminLayoutModel menu items', () => {
     });
   });
 
-  it('should persist hidden setting through route repository', async () => {
-    const updateRoute = vi.fn().mockResolvedValue(undefined);
-    engine.context.routeRepository.updateRoute = updateRoute;
-
-    const model = engine.createModel<AdminLayoutMenuItemModel>({
-      uid: 'menu-item-hidden',
-      use: AdminLayoutMenuItemModel,
-      props: {
-        route: {
-          id: 1,
-          title: 'Page 1',
-          schemaUid: 'current-page',
-          type: NocoBaseDesktopRouteType.page,
-          hideInMenu: false,
-        },
-      },
-    });
-
-    const menuSettingsFlow = AdminLayoutMenuItemModel.globalFlowRegistry.getFlow('menuSettings');
-    await menuSettingsFlow?.steps?.hidden?.beforeParamsSave?.({ model } as any, { hideInMenu: true }, {});
-
-    expect(updateRoute).toHaveBeenCalledWith(1, {
-      hideInMenu: true,
-    });
-  });
-
   it('should expose menu linkage rules only for existing menu items', async () => {
     const menuSettingsFlow = AdminLayoutMenuItemModel.globalFlowRegistry.getFlow('menuSettings');
+    expect(menuSettingsFlow?.steps?.hidden).toBeUndefined();
     expect(menuSettingsFlow?.steps?.linkageRules?.use).toBe('menuLinkageRules');
 
     const model = engine.createModel<AdminLayoutMenuItemModel>({
@@ -975,6 +957,73 @@ describe('AdminLayoutModel menu items', () => {
     });
   });
 
+  it('should save menu linkage rules without serializing runtime render props', async () => {
+    type SerializedFlowModel = Record<string, unknown> & {
+      props?: Record<string, unknown>;
+      subModels?: unknown;
+    };
+    const save = vi.fn(
+      async (targetModel: { serialize: () => SerializedFlowModel }, options?: { onlyStepParams?: boolean }) => {
+        const data = targetModel.serialize();
+        if (options?.onlyStepParams) {
+          delete data.subModels;
+        }
+
+        expect(data.props?.item).toBeUndefined();
+        expect(data.props?.dom).toBeUndefined();
+        expect(data.props?.options).toBeUndefined();
+        expect(data.props?.renderType).toBeUndefined();
+        expect(() => JSON.stringify(data)).not.toThrow();
+        return data;
+      },
+    );
+    const updateRoute = vi.fn().mockResolvedValue(undefined);
+    engine.setModelRepository({ save } as Parameters<FlowEngine['setModelRepository']>[0]);
+    engine.context.routeRepository.updateRoute = updateRoute;
+
+    const route = createRoute();
+    const model = engine.createModel<AdminLayoutMenuItemModel>({
+      uid: 'menu-item-linkage-runtime-props',
+      use: AdminLayoutMenuItemModel,
+      props: {
+        route,
+      },
+    });
+    const item = {
+      name: 'Page 1',
+      path: '/admin/page-1',
+      _route: route,
+      _model: model,
+    };
+
+    model.setProps({
+      item,
+      dom: React.createElement('span', null, 'Page 1'),
+      renderType: 'item',
+      options: { collapsed: false },
+    });
+    model.setStepParams('menuSettings', 'linkageRules', {
+      value: [
+        {
+          key: 'r1',
+          title: 'Hide menu item',
+          enable: true,
+          condition: { logic: '$and', items: [] },
+          actions: [{ key: 'a1', name: 'linkageSetMenuItemProps', params: { value: 'hidden' } }],
+        },
+      ],
+    });
+
+    await model.saveStepParams();
+
+    expect(save).toHaveBeenCalledWith(model, { onlyStepParams: true });
+    expect(updateRoute).toHaveBeenCalledWith(1, {
+      options: {
+        hasPersistedMenuInstanceFlow: true,
+      },
+    });
+  });
+
   it('should clear persisted menu linkage rules when no persisted state remains', async () => {
     const saveModel = vi.spyOn(engine, 'saveModel').mockResolvedValue(undefined as any);
     const destroy = vi.fn().mockResolvedValue(true);

package/src/flow/admin-shell/admin-layout/__tests__/AdminLayoutModel.test.tsx

@@ -43,6 +43,7 @@ import {
   type FlowModel,
 } from '@nocobase/flow-engine';
 import { AdminLayoutModel, getAdminLayoutModel } from '..';
+import { getLayoutPageRouteName, getLayoutPageViewRouteName } from '../../../../layout-manager/utils';
 import { TopbarActionModel } from '../../../models/topbar/TopbarActionModel';
 import { UserCenterTopbarActionModel } from '../../../models/topbar/UserCenterTopbarActionModel';
 import { TopbarActionsBar } from '../TopbarActionsBar';
@@ -113,7 +114,7 @@ describe('AdminLayoutModel runtime', () => {
     }).toThrowError(/admin-layout-model/);
   });
 
-  it('should expose live layoutContentElement on engine context', async () => {
+  it('should expose live layoutContentElement on layout context', async () => {
     const engine = new FlowEngine();
 
     render(
@@ -131,29 +132,99 @@ describe('AdminLayoutModel runtime', () => {
       model.setLayoutContentElement(element);
     });
 
-    expect(engine.context.layoutContentElement).toBe(element);
+    expect(model.context.layoutContentElement).toBe(element);
 
     act(() => {
       model.setLayoutContentElement(null);
     });
 
-    expect(engine.context.layoutContentElement).toBeNull();
+    expect(model.context.layoutContentElement).toBeNull();
   });
 
-  it('should expose live engine currentRoute when active page changes', async () => {
+  it('should expose layout definition only while mounted', async () => {
+    const engine = new FlowEngine();
+    const { unmount } = render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    expect(model.context.layout).toMatchObject({
+      routeName: 'admin',
+      routePath: '/admin',
+      rootRouteName: 'admin',
+      rootPageModelClass: 'RootPageModel',
+      childPageModelClass: 'ChildPageModel',
+    });
+    expect(engine.context.layout).toBeUndefined();
+
+    unmount();
+
+    expect(model.context.layout).toBeUndefined();
+    expect(model.context.currentRoute).toEqual({});
+    expect(model.context.layoutContentElement).toBeNull();
+  });
+
+  it('should expose layoutRoute from local layout route sync', async () => {
     const engine = new FlowEngine();
-    const routeMap = {
-      'page-1': { title: 'Page 1' },
-      'page-2': { title: 'Page 2' },
-    };
     engine.context.defineProperty('routeRepository', {
       value: {
-        getRouteBySchemaUid: (pageUid: string) => routeMap[pageUid],
+        getRouteBySchemaUid: (pageUid: string) => ({ title: pageUid }),
       },
     });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    act(() => {
+      model.syncLayoutRoute({
+        name: getLayoutPageViewRouteName('admin'),
+        pathname: '/admin/page-1/view/popup',
+        layoutBasePathname: '/admin',
+      });
+    });
+
+    await waitFor(() => {
+      expect(model.context.layoutRoute).toMatchObject({
+        type: 'page',
+        pageUid: 'page-1',
+        viewStack: [{ viewUid: 'page-1' }, { viewUid: 'popup' }],
+      });
+      expect(model.context.currentRoute.title).toBe('page-1');
+    });
+
+    act(() => {
+      model.syncLayoutRoute({
+        name: 'admin.settings',
+        pathname: '/admin/settings',
+      });
+    });
+
+    await waitFor(() => {
+      expect(model.context.layoutRoute).toBeNull();
+      expect(model.context.currentRoute).toEqual({});
+    });
+  });
+
+  it('should not consume global routes that belong to nested layouts', async () => {
+    const engine = new FlowEngine();
     const routeRef = observable.ref({
-      params: { name: 'page-1' },
-      pathname: '/admin/page-1',
+      name: getLayoutPageViewRouteName('admin.settings.publicForms'),
+      pathname: '/admin/settings/public-forms/form-1/view/popup',
+      params: { name: 'form-1' },
+      layoutBasePathname: '/admin/settings/public-forms',
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: (pageUid: string) => ({ title: pageUid }),
+      },
     });
     engine.context.defineProperty('route', {
       get: () => routeRef.value,
@@ -169,6 +240,55 @@ describe('AdminLayoutModel runtime', () => {
     const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
     expect(model).toBeTruthy();
 
+    await waitFor(() => {
+      expect(model.context.layoutRoute).toBeNull();
+      expect(model.context.currentRoute).toEqual({});
+    });
+
+    act(() => {
+      routeRef.value = {
+        name: getLayoutPageViewRouteName('admin.settings.publicForms'),
+        pathname: '/admin/settings/public-forms/form-2/view/popup',
+        params: { name: 'form-2' },
+        layoutBasePathname: '/admin/settings/public-forms',
+      };
+    });
+
+    await waitFor(() => {
+      expect(model.context.layoutRoute).toBeNull();
+      expect(model.context.currentRoute).toEqual({});
+    });
+  });
+
+  it('should expose live layout currentRoute when active page changes', async () => {
+    const engine = new FlowEngine();
+    const routeMap = {
+      'page-1': { title: 'Page 1' },
+      'page-2': { title: 'Page 2' },
+    };
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: (pageUid: string) => routeMap[pageUid],
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    act(() => {
+      model.syncLayoutRoute({
+        name: getLayoutPageRouteName('admin'),
+        pathname: '/admin/page-1',
+        layoutBasePathname: '/admin',
+      });
+    });
+
     model.registerRoutePage('page-1', {
       active: true,
     });
@@ -177,36 +297,29 @@ describe('AdminLayoutModel runtime', () => {
     });
 
     await waitFor(() => {
-      expect(engine.context.currentRoute.title).toBe('Page 1');
+      expect(model.context.currentRoute.title).toBe('Page 1');
     });
 
     act(() => {
-      routeRef.value = {
-        params: { name: 'page-2' },
+      model.syncLayoutRoute({
+        name: getLayoutPageRouteName('admin'),
         pathname: '/admin/page-2',
-      };
+        layoutBasePathname: '/admin',
+      });
     });
 
     await waitFor(() => {
-      expect(engine.context.currentRoute.title).toBe('Page 2');
+      expect(model.context.currentRoute.title).toBe('Page 2');
     });
   });
 
   it('should keep pageActive in sync after non-active route page updates', async () => {
     const engine = new FlowEngine();
-    const routeRef = observable.ref({
-      params: { name: 'page-1' },
-      pathname: '/admin/page-1',
-    });
     engine.context.defineProperty('routeRepository', {
       value: {
         getRouteBySchemaUid: (pageUid: string) => ({ title: pageUid }),
       },
     });
-    engine.context.defineProperty('route', {
-      get: () => routeRef.value,
-      cache: false,
-    });
 
     render(
       <FlowEngineProvider engine={engine}>
@@ -217,6 +330,14 @@ describe('AdminLayoutModel runtime', () => {
     const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
     expect(model).toBeTruthy();
 
+    act(() => {
+      model.syncLayoutRoute({
+        name: getLayoutPageRouteName('admin'),
+        pathname: '/admin/page-1',
+        layoutBasePathname: '/admin',
+      });
+    });
+
     model.registerRoutePage('page-1', {
       active: false,
     });
@@ -236,10 +357,11 @@ describe('AdminLayoutModel runtime', () => {
     expect(routeModel.context.pageActive.value).toBe(true);
 
     act(() => {
-      routeRef.value = {
-        params: { name: 'page-2' },
+      model.syncLayoutRoute({
+        name: getLayoutPageRouteName('admin'),
         pathname: '/admin/page-2',
-      };
+        layoutBasePathname: '/admin',
+      });
     });
 
     await waitFor(() => {

package/src/flow/admin-shell/admin-layout/index.ts

@@ -9,6 +9,8 @@
 
 export * from './AdminLayoutComponent';
 export * from './AdminLayoutModel';
+export * from '../BaseLayoutModel';
+export * from '../BaseLayoutRouteCoordinator';
 export * from './AdminLayoutSlotModels';
 export * from './AdminLayoutMenuModels';
 export * from './AdminLayoutMenuFlowUtils';
@@ -16,5 +18,6 @@ export * from './resolveAdminRouteRuntimeTarget';
 export * from './constants';
 export * from './ResetThemeTokenAndKeepAlgorithm';
 export * from './useApplications';
+export * from './AppListRender';
 export * from './PinnedPluginListLite';
 export * from './mobile-layout';

package/src/flow/admin-shell/admin-layout/resolveAdminRouteRuntimeTarget.test.ts

@@ -23,6 +23,17 @@ const app = {
   },
 } as any;
 
+// These fixtures mount the modern client under the `v2` segment; tell the
+// runtime-prefix helper so `isV2AdminRuntime` detects it (the server injects
+// this in production).
+beforeAll(() => {
+  (window as any).__nocobase_modern_client_prefix__ = 'v2';
+});
+
+afterAll(() => {
+  delete (window as any).__nocobase_modern_client_prefix__;
+});
+
 describe('resolveAdminRouteRuntimeTarget', () => {
   it('should resolve flowPage to v2 spa runtime target', () => {
     expect(

package/src/flow/admin-shell/admin-layout/resolveAdminRouteRuntimeTarget.ts

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { getV2EffectiveBasePath } from '../../../authRedirect';
+import { getModernClientPrefix, getV2EffectiveBasePath } from '../../../authRedirect';
 import type { BaseApplication } from '../../../BaseApplication';
 import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../../flow-compat';
 
@@ -26,8 +26,6 @@ export type AdminRouteRuntimeTarget = {
   reason: AdminRouteRuntimeTargetReason;
 };
 
-const V2_PUBLIC_PATH_SUFFIX = '/v2/';
-
 type LocationLike = {
   pathname: string;
   search?: string;
@@ -69,7 +67,7 @@ function normalizePublicPath(value = '/') {
 }
 
 export function isV2AdminRuntime(app?: ResolveAdminRouteRuntimeTargetOptions['app']) {
-  return !!app?.getPublicPath && normalizePublicPath(app.getPublicPath()).endsWith(V2_PUBLIC_PATH_SUFFIX);
+  return !!app?.getPublicPath && normalizePublicPath(app.getPublicPath()).endsWith(`/${getModernClientPrefix()}/`);
 }
 
 export function toRouterNavigationPath(pathname: string, basename?: string) {

package/src/flow/admin-shell/admin-layout/useApplications.tsx

@@ -8,8 +8,41 @@
  */
 
 import { useApp } from '../../../flow-compat';
+import React from 'react';
 
 export const useApplications = () => {
   const app = useApp();
-  return { Component: app.apps.Component };
+  const loadAppList = app.apps.loadAppList;
+  const [appList, setAppList] = React.useState([]);
+
+  React.useEffect(() => {
+    let canceled = false;
+
+    if (!loadAppList) {
+      setAppList([]);
+      return;
+    }
+
+    void Promise.resolve(loadAppList(app))
+      .then((list) => {
+        if (!canceled) {
+          setAppList(Array.isArray(list) ? list : []);
+        }
+      })
+      .catch((error) => {
+        console.error('[NocoBase] Failed to load application switcher list.', error);
+        if (!canceled) {
+          setAppList([]);
+        }
+      });
+
+    return () => {
+      canceled = true;
+    };
+  }, [app, loadAppList]);
+
+  return {
+    Component: app.apps.Component,
+    appList,
+  };
 };

package/src/flow/admin-shell/useAdminLayoutRoutePage.ts

@@ -8,14 +8,15 @@
  */
 
 import type { FlowEngine } from '@nocobase/flow-engine';
-import { useEffect, useRef } from 'react';
+import type { RefObject } from 'react';
 import { getAdminLayoutModel, type AdminLayoutModel } from './admin-layout/AdminLayoutModel';
+import { useLayoutRoutePage } from './useLayoutRoutePage';
 
 type UseAdminLayoutRoutePageOptions = {
   flowEngine: FlowEngine;
   pageUid: string;
   refreshDesktopRoutes?: () => Promise<unknown>;
-  layoutContentRef: React.RefObject<HTMLDivElement>;
+  layoutContentRef: RefObject<HTMLDivElement>;
 };
 
 /**
@@ -29,28 +30,11 @@ type UseAdminLayoutRoutePageOptions = {
  */
 export function useAdminLayoutRoutePage(options: UseAdminLayoutRoutePageOptions) {
   const { flowEngine, pageUid, refreshDesktopRoutes, layoutContentRef } = options;
-  const adminLayoutModel = getAdminLayoutModel<AdminLayoutModel>(flowEngine, { required: true });
-  const refreshRef = useRef(refreshDesktopRoutes);
-
-  refreshRef.current = refreshDesktopRoutes;
-
-  useEffect(() => {
-    adminLayoutModel.registerRoutePage(pageUid, {
-      active: false,
-      refreshDesktopRoutes: refreshRef.current,
-      layoutContentElement: layoutContentRef.current,
-    });
-    return () => {
-      adminLayoutModel.unregisterRoutePage(pageUid);
-    };
-  }, [adminLayoutModel, pageUid, layoutContentRef]);
-
-  useEffect(() => {
-    adminLayoutModel.updateRoutePage(pageUid, {
-      refreshDesktopRoutes,
-      layoutContentElement: layoutContentRef.current,
-    });
-  }, [adminLayoutModel, pageUid, refreshDesktopRoutes, layoutContentRef]);
-
-  return adminLayoutModel;
+  return useLayoutRoutePage<AdminLayoutModel>({
+    flowEngine,
+    pageUid,
+    refreshDesktopRoutes,
+    layoutContentRef,
+    getLayoutModel: (engine) => getAdminLayoutModel<AdminLayoutModel>(engine, { required: true }),
+  });
 }

package/src/flow/admin-shell/useLayoutRoutePage.ts

@@ -0,0 +1,61 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { FlowEngine } from '@nocobase/flow-engine';
+import { useEffect, useRef, type RefObject } from 'react';
+import type { BaseLayoutModel } from './BaseLayoutModel';
+
+export type UseLayoutRoutePageOptions<TModel extends BaseLayoutModel = BaseLayoutModel> = {
+  flowEngine: FlowEngine;
+  pageUid: string;
+  active?: boolean;
+  refreshDesktopRoutes?: () => Promise<unknown>;
+  layoutContentRef: RefObject<HTMLElement>;
+  getLayoutModel: (flowEngine: FlowEngine) => TModel | undefined;
+};
+
+/**
+ * 把 FlowRoute 页面的生命周期桥接到指定 Layout host model。
+ */
+export function useLayoutRoutePage<TModel extends BaseLayoutModel = BaseLayoutModel>(
+  options: UseLayoutRoutePageOptions<TModel>,
+) {
+  const { flowEngine, pageUid, active, refreshDesktopRoutes, layoutContentRef, getLayoutModel } = options;
+  const layoutModel = getLayoutModel(flowEngine);
+  const activeRef = useRef(active);
+  const refreshRef = useRef(refreshDesktopRoutes);
+
+  if (!layoutModel) {
+    throw new Error('[NocoBase] FlowRoute requires layout model. Please render FlowRoute under Layout.');
+  }
+
+  activeRef.current = active;
+  refreshRef.current = refreshDesktopRoutes;
+
+  useEffect(() => {
+    layoutModel.registerRoutePage(pageUid, {
+      active: activeRef.current ?? false,
+      refreshDesktopRoutes: refreshRef.current,
+      layoutContentElement: layoutContentRef.current,
+    });
+    return () => {
+      layoutModel.unregisterRoutePage(pageUid);
+    };
+  }, [layoutModel, pageUid, layoutContentRef]);
+
+  useEffect(() => {
+    layoutModel.updateRoutePage(pageUid, {
+      active,
+      refreshDesktopRoutes,
+      layoutContentElement: layoutContentRef.current,
+    });
+  }, [active, layoutModel, pageUid, refreshDesktopRoutes, layoutContentRef]);
+
+  return layoutModel;
+}

package/src/flow/common/Markdown/Edit.tsx

@@ -34,13 +34,41 @@ const defaultToolbar = [
   'code',
   'inline-code',
   'upload',
-  'fullscreen',
 ];
 
 const NAMESPACE = 'block-markdown';
 
 const locales = ['en_US', 'fr_FR', 'pt_BR', 'ja_JP', 'ko_KR', 'ru_RU', 'sv_SE', 'zh_CN', 'zh_TW'];
 
+type MarkdownToolbarItem =
+  | string
+  | {
+      name: string;
+      tipPosition?: string;
+      toolbar?: MarkdownToolbarItem[];
+      [key: string]: unknown;
+    };
+
+function placeToolbarTooltipsBelow(toolbar: MarkdownToolbarItem[]) {
+  return toolbar.map((item) => {
+    if (typeof item === 'string') {
+      if (item === '|' || item === 'br') {
+        return item;
+      }
+      return {
+        name: item,
+        tipPosition: 's',
+      };
+    }
+
+    return {
+      ...item,
+      tipPosition: 's',
+      toolbar: item.toolbar ? placeToolbarTooltipsBelow(item.toolbar) : item.toolbar,
+    };
+  });
+}
+
 const Edit = (props) => {
   const { disabled, onChange, value, fileCollection, toolbar, vditorRef } = props;
   const flowCtx = useFlowContext();
@@ -73,7 +101,7 @@ const Edit = (props) => {
   useEffect(() => {
     if (!containerRef.current) return;
 
-    const toolbarConfig = toolbar ?? defaultToolbar;
+    const toolbarConfig = placeToolbarTooltipsBelow(toolbar ?? defaultToolbar);
     const vditor = new Vditor(containerRef.current, {
       value: value ?? '',
       lang,
@@ -321,7 +349,7 @@ export const MarkdownWithContextSelector: React.FC<MarkdownWithContextSelectorPr
     if (quoteFlag !== false) {
       setInnerValue(value);
     }
-  }, [value]);
+  }, [quoteFlag, value]);
   const handleTextChange = useCallback(
     (e) => {
       const val = e ?? '';
@@ -375,7 +403,7 @@ export const MarkdownWithContextSelector: React.FC<MarkdownWithContextSelectorPr
         editor.focus();
       });
     },
-    [innerValue, onChange],
+    [onChange],
   );
 
   const handleVariableSelected = useCallback(