admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add Edit Rich Text functionality to table view (#11390)

Browse Source 
Fixes https://github.com/twentyhq/core-team-issues/issues/729


[recording.webm](https://github.com/user-attachments/assets/ea95d67b-64a3-4fef-91ed-b06318099a78)

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
Gaurav
2025-04-14 17:16:22 +05:30
committed by GitHub
parent 8f7a82f177
commit abecdbafc1
12 changed files with 329 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx
View File

@ -2,6 +2,7 @@ import { CommandMenu } from '@/command-menu/components/CommandMenu';
import { CommandMenuCalendarEventPage } from '@/command-menu/pages/calendar-event/components/CommandMenuCalendarEventPage';
import { CommandMenuMessageThreadPage } from '@/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage';
import { CommandMenuRecordPage } from '@/command-menu/pages/record-page/components/CommandMenuRecordPage';
import { CommandMenuEditRichTextPage } from '@/command-menu/pages/rich-text-page/components/CommandMenuEditRichTextPage';
import { CommandMenuSearchRecordsPage } from '@/command-menu/pages/search/components/CommandMenuSearchRecordsPage';
import { CommandMenuWorkflowSelectAction } from '@/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectAction';
import { CommandMenuWorkflowEditStep } from '@/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStep';
@ -18,6 +19,7 @@ export const COMMAND_MENU_PAGES_CONFIG = new Map<
[CommandMenuPages.ViewRecord, <CommandMenuRecordPage />],
[CommandMenuPages.ViewEmailThread, <CommandMenuMessageThreadPage />],
[CommandMenuPages.ViewCalendarEvent, <CommandMenuCalendarEventPage />],
[CommandMenuPages.EditRichText, <CommandMenuEditRichTextPage />],
[
CommandMenuPages.WorkflowStepSelectTriggerType,
<CommandMenuWorkflowSelectTriggerType />,

45
packages/twenty-front/src/modules/command-menu/hooks/useRichTextCommandMenu.ts Normal file
View File

@ -0,0 +1,45 @@
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { viewableRichTextComponentState } from '@/command-menu/pages/rich-text-page/states/viewableRichTextComponentState';
import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
import { useCallback } from 'react';
import { useRecoilCallback } from 'recoil';
import { IconPencil } from 'twenty-ui/display';
export const useRichTextCommandMenu = () => {
const { navigateCommandMenu, openCommandMenu } = useCommandMenu();
const openRichTextInCommandMenu = useRecoilCallback(
({ set }) =>
({
activityId,
activityObjectNameSingular,
}: {
activityId: string;
activityObjectNameSingular: string;
}) => {
set(viewableRichTextComponentState, {
activityId,
activityObjectNameSingular,
});
openCommandMenu();
navigateCommandMenu({
page: CommandMenuPages.EditRichText,
pageTitle: 'Rich Text',
pageIcon: IconPencil,
});
},
[navigateCommandMenu, openCommandMenu],
);
const editRichText = useCallback(
(activityId: string, activityObjectNameSingular: string) => {
openRichTextInCommandMenu({ activityId, activityObjectNameSingular });
},
[openRichTextInCommandMenu],
);
return {
editRichText,
};
};

33
packages/twenty-front/src/modules/command-menu/pages/rich-text-page/components/CommandMenuEditRichTextPage.tsx Normal file
View File

@ -0,0 +1,33 @@
import { ActivityRichTextEditor } from '@/activities/components/ActivityRichTextEditor';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { viewableRichTextComponentState } from '../states/viewableRichTextComponentState';
const StyledContainer = styled.div`
margin: ${({ theme }) => theme.spacing(4)} ${({ theme }) => theme.spacing(-2)};
`;
export const CommandMenuEditRichTextPage = () => {
const { activityId, activityObjectNameSingular } = useRecoilValue(
viewableRichTextComponentState,
);
if (
activityObjectNameSingular !== CoreObjectNameSingular.Note &&
activityObjectNameSingular !== CoreObjectNameSingular.Task
) {
throw new Error(
`Invalid activity object name singular: ${activityObjectNameSingular}`,
);
}
return (
<StyledContainer>
<ActivityRichTextEditor
activityId={activityId}
activityObjectNameSingular={activityObjectNameSingular}
/>
</StyledContainer>
);
};

12
packages/twenty-front/src/modules/command-menu/pages/rich-text-page/states/viewableRichTextComponentState.ts Normal file
View File

@ -0,0 +1,12 @@
import { atom, RecoilState } from 'recoil';
export const viewableRichTextComponentState: RecoilState<{
activityId: string;
activityObjectNameSingular: string;
}> = atom({
key: 'viewableRichTextComponentState',
default: {
activityId: '',
activityObjectNameSingular: '',
},
});

1
packages/twenty-front/src/modules/command-menu/types/CommandMenuPages.ts
View File

@ -3,6 +3,7 @@ export enum CommandMenuPages {
ViewRecord = 'view-record',
ViewEmailThread = 'view-email-thread',
ViewCalendarEvent = 'view-calendar-event',
EditRichText = 'edit-rich-text',
Copilot = 'copilot',
WorkflowStepSelectTriggerType = 'workflow-step-select-trigger-type',
WorkflowStepSelectAction = 'workflow-step-select-action',