[Dashboards] Rich text editor frontend (#16437)

closes https://github.com/twentyhq/core-team-issues/issues/1894
2025-12-12 23:06:59 +05:30
parent afcca283c4
commit 44f0cfdd9e
42 changed files with 2054 additions and 143 deletions
@@ -157,7 +157,6 @@ export const usePageLayoutHeaderInfo = ({
        widgetInEditMode: undefined,
      };
    }
-
    default:
      return null;
  }
@@ -22,11 +22,7 @@ export const CommandMenuPageLayoutIframeSettings = () => {

  const { updatePageLayoutWidget } = useUpdatePageLayoutWidget(pageLayoutId);

-  if (!isDefined(widgetInEditMode)) {
-    throw new Error('Widget ID must be present while editing the widget');
-  }
-
-  const widgetConfiguration = widgetInEditMode.configuration;
+  const widgetConfiguration = widgetInEditMode?.configuration;

  const configUrl =
    widgetConfiguration && 'url' in widgetConfiguration
@@ -38,6 +34,10 @@ export const CommandMenuPageLayoutIframeSettings = () => {
  );
  const [urlError, setUrlError] = useState('');

+  if (!isDefined(widgetInEditMode)) {
+    return null;
+  }
+
  const validateUrl = (urlString: string): boolean => {
    const trimmedUrl = urlString.trim();

@@ -1,23 +1,31 @@
 import { CommandGroup } from '@/command-menu/components/CommandGroup';
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
 import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { useCompanyDefaultChartConfig } from '@/page-layout/hooks/useCompanyDefaultChartConfig';
 import { useCreatePageLayoutGraphWidget } from '@/page-layout/hooks/useCreatePageLayoutGraphWidget';
 import { useCreatePageLayoutIframeWidget } from '@/page-layout/hooks/useCreatePageLayoutIframeWidget';
+import { useCreatePageLayoutStandaloneRichTextWidget } from '@/page-layout/hooks/useCreatePageLayoutStandaloneRichTextWidget';
 import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { IconChartPie, IconFrame } from 'twenty-ui/display';
+import {
+  IconAlignBoxLeftTop,
+  IconChartPie,
+  IconFrame,
+} from 'twenty-ui/display';
 import { GraphType } from '~/generated-metadata/graphql';

 export const CommandMenuPageLayoutWidgetTypeSelect = () => {
  const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();

+  const { closeCommandMenu } = useCommandMenu();
+
  const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();

  const { buildBarChartFieldSelection } = useCompanyDefaultChartConfig();
@@ -28,6 +36,9 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
  const { createPageLayoutIframeWidget } =
    useCreatePageLayoutIframeWidget(pageLayoutId);

+  const { createPageLayoutStandaloneRichTextWidget } =
+    useCreatePageLayoutStandaloneRichTextWidget(pageLayoutId);
+
  const [pageLayoutEditingWidgetId, setPageLayoutEditingWidgetId] =
    useRecoilComponentState(
      pageLayoutEditingWidgetIdComponentState,
@@ -64,8 +75,23 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
    });
  };

+  const handleNavigateToRichTextSettings = () => {
+    if (!isDefined(pageLayoutEditingWidgetId)) {
+      const newWidget = createPageLayoutStandaloneRichTextWidget({
+        blocknote: '',
+        markdown: null,
+      });
+      setPageLayoutEditingWidgetId(newWidget.id);
+    }
+
+    closeCommandMenu();
+  };
+
  return (
-    <CommandMenuList commandGroups={[]} selectableItemIds={['chart', 'iframe']}>
+    <CommandMenuList
+      commandGroups={[]}
+      selectableItemIds={['chart', 'iframe', 'rich-text']}
+    >
      <CommandGroup heading={t`Widget type`}>
        <SelectableListItem
          itemId="chart"
@@ -89,6 +115,18 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
            onClick={handleNavigateToIframeSettings}
          />
        </SelectableListItem>
+
+        <SelectableListItem
+          itemId="rich-text"
+          onEnter={handleNavigateToRichTextSettings}
+        >
+          <CommandMenuItem
+            Icon={IconAlignBoxLeftTop}
+            label={t`Rich Text`}
+            id="rich-text"
+            onClick={handleNavigateToRichTextSettings}
+          />
+        </SelectableListItem>
      </CommandGroup>
    </CommandMenuList>
  );