chore: refactor RTE to accept custom menu options

Author: kevinkim-ogp

packages/backend/src/graphql/schema.graphql

@@ -220,6 +220,9 @@ type ActionSubstepArgument {
 
   # Only for multirow
   subFields: [ActionSubstepArgument]
+
+  # Only for rich text
+  customRteMenuOptions: [String]
 }
 
 type DropdownClickableLink {
@@ -262,6 +265,7 @@ enum AppCategory {
   data
   communication
   logic
+  ai
   others
 }
 

packages/frontend/src/components/InputCreator/index.tsx

@@ -121,6 +121,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
         variablesEnabled={variables}
         isRich
         noVariablesMessage={noVariablesMessage}
+        customRteMenuOptions={schema?.customRteMenuOptions}
       />
     )
   }

packages/frontend/src/components/RichTextEditor/MenuBar.tsx

@@ -63,7 +63,7 @@ enum MenuLabels {
   Undo = 'Undo',
   Redo = 'Redo',
 }
-const menuButtons = [
+const DEFAULT_MENU_BUTTONS = [
   {
     label: MenuLabels.Bold,
     onClick: (editor: Editor) => editor.chain().focus().toggleBold().run(),
@@ -238,9 +238,15 @@ interface MenuBarProps {
   editor: Editor | null
   variableMap: VariableInfoMap
   editable: boolean
+  customMenuOptions?: string[]
 }
 
-export const MenuBar = ({ editor, variableMap, editable }: MenuBarProps) => {
+export const MenuBar = ({
+  editor,
+  variableMap,
+  editable,
+  customMenuOptions,
+}: MenuBarProps) => {
   const {
     isOpen: isDialogOpen,
     onClose,
@@ -321,6 +327,18 @@ export const MenuBar = ({ editor, variableMap, editable }: MenuBarProps) => {
     [editor, dialogValue, onDialogClose],
   )
 
+  const menuButtons = useMemo(() => {
+    if (customMenuOptions) {
+      return customMenuOptions
+        .map((option) =>
+          DEFAULT_MENU_BUTTONS.find(({ label }) => label === option),
+        )
+        .filter((button): button is NonNullable<typeof button> => !!button)
+    }
+
+    return DEFAULT_MENU_BUTTONS
+  }, [customMenuOptions])
+
   if (!editor) {
     return null
   }

packages/frontend/src/components/RichTextEditor/index.tsx

@@ -100,6 +100,7 @@ interface EditorProps {
   autoFocus?: boolean
   singleVariableSelection?: boolean
   noVariablesMessage?: string
+  customRteMenuOptions?: string[]
 }
 const Editor = ({
   onChange,
@@ -114,6 +115,7 @@ const Editor = ({
   singleVariableSelection,
   autoFocus = false,
   noVariablesMessage,
+  customRteMenuOptions,
 }: EditorProps) => {
   const { priorExecutionSteps } = useContext(StepExecutionsContext)
   const { allApps } = useContext(EditorContext)
@@ -292,6 +294,7 @@ const Editor = ({
                 editor={editor}
                 variableMap={varInfo}
                 editable={editable ?? false}
+                customMenuOptions={customRteMenuOptions}
               />
             )}
             <EditorContent
@@ -348,6 +351,7 @@ interface RichTextEditorProps {
   autoFocus?: boolean
   singleVariableSelection?: boolean
   noVariablesMessage?: string
+  customRteMenuOptions?: string[]
 }
 const RichTextEditor = ({
   required,
@@ -365,6 +369,7 @@ const RichTextEditor = ({
   autoFocus,
   singleVariableSelection,
   noVariablesMessage,
+  customRteMenuOptions,
 }: RichTextEditorProps) => {
   const { readOnly } = useContext(EditorContext)
   const { control, getValues } = useFormContext()
@@ -413,6 +418,7 @@ const RichTextEditor = ({
             autoFocus={shouldAutoFocus}
             singleVariableSelection={singleVariableSelection}
             noVariablesMessage={noVariablesMessage}
+            customRteMenuOptions={customRteMenuOptions}
           />
         )}
       />

packages/frontend/src/graphql/queries/get-apps.ts

@@ -226,6 +226,7 @@ export const GET_APPS = gql`
               url
             }
             singleVariableSelection
+            customRteMenuOptions
             # Only for multi-row
             subFields {
               label

packages/types/index.d.ts

@@ -435,6 +435,10 @@ export interface IFieldMultiRow extends IBaseField {
 export interface IFieldRichText extends IBaseField {
   type: 'rich-text'
   value?: string
+
+  // Specifies the order and what menu options to show in the RTE
+  // 'divider' is specified manually to determine when a divider should be shown
+  customRteMenuOptions?: string[]
 }
 
 export interface IFieldDragDrop extends IBaseField {
@@ -599,7 +603,7 @@ export interface IApp {
   setupMessage?: SetupMessage
 }
 
-export type AppCategory = 'data' | 'communication' | 'logic' | 'others'
+export type AppCategory = 'data' | 'communication' | 'logic' | 'others' | 'ai'
 
 export type TBeforeRequest = (
   $: IGlobalVariable,